1 files changed, 60 insertions, 2 deletions
diff --git a/app/assets/javascripts/access_tokens/index.js b/app/assets/javascripts/access_tokens/index.js
index b4353af30d5..43d56295f78 100644
--- a/app/assets/javascripts/access_tokens/index.js
+++ b/app/assets/javascripts/access_tokens/index.js
@@ -1,4 +1,7 @@
 import Vue from 'vue';
+import createFlash from '~/flash';
+import { __ } from '~/locale';
+
 import ExpiresAtField from './components/expires_at_field.vue';
 
 const getInputAttrs = (el) => {
@@ -7,11 +10,12 @@ const getInputAttrs = (el) => {
   return {
     id: input.id,
     name: input.name,
+    value: input.value,
     placeholder: input.placeholder,
   };
 };
 
-const initExpiresAtField = () => {
+export const initExpiresAtField = () => {
   const el = document.querySelector('.js-access-tokens-expires-at');
 
   if (!el) {
@@ -32,4 +36,58 @@ const initExpiresAtField = () => {
   });
 };
 
-export default initExpiresAtField;
+export const initProjectsField = () => {
+  const el = document.querySelector('.js-access-tokens-projects');
+
+  if (!el) {
+    return null;
+  }
+
+  const inputAttrs = getInputAttrs(el);
+
+  if (window.gon.features.personalAccessTokensScopedToProjects) {
+    return new Promise((resolve) => {
+      Promise.all([
+        import('./components/projects_field.vue'),
+        import('vue-apollo'),
+        import('~/lib/graphql'),
+      ])
+        .then(
+          ([
+            { default: ProjectsField },
+            { default: VueApollo },
+            { default: createDefaultClient },
+          ]) => {
+            const apolloProvider = new VueApollo({
+              defaultClient: createDefaultClient(),
+            });
+
+            Vue.use(VueApollo);
+
+            resolve(
+              new Vue({
+                el,
+                apolloProvider,
+                render(h) {
+                  return h(ProjectsField, {
+                    props: {
+                      inputAttrs,
+                    },
+                  });
+                },
+              }),
+            );
+          },
+        )
+        .catch(() => {
+          createFlash({
+            message: __(
+              'An error occurred while loading the access tokens form, please try again.',
+            ),
+          });
+        });
+    });
+  }
+
+  return null;
+};