Add latest changes from gitlab-org/gitlab@master

2 files changed, 66 insertions, 2 deletions

diff --git a/app/assets/javascripts/access_tokens/components/projects_field.vue b/app/assets/javascripts/access_tokens/components/projects_field.vue
new file mode 100644
index 00000000000..e58f74b6ad4
--- /dev/null
+++ b/app/assets/javascripts/access_tokens/components/projects_field.vue
@@ -0,0 +1,38 @@
+<script>
+import { GlFormGroup, GlFormRadio, GlFormText } from '@gitlab/ui';
+
+export default {
+  name: 'ProjectsField',
+  ALL_PROJECTS: 'ALL_PROJECTS',
+  SELECTED_PROJECTS: 'SELECTED_PROJECTS',
+  components: { GlFormGroup, GlFormRadio, GlFormText },
+  props: {
+    inputAttrs: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      selectedRadio: this.$options.ALL_PROJECTS,
+    };
+  },
+};
+</script>
+
+<template>
+  <div>
+    <gl-form-group :label="__('Projects')" label-class="gl-pb-0!">
+      <gl-form-text class="gl-pb-3">{{
+        __('Set access permissions for this token.')
+      }}</gl-form-text>
+      <gl-form-radio v-model="selectedRadio" :value="$options.ALL_PROJECTS">{{
+        __('All projects')
+      }}</gl-form-radio>
+      <gl-form-radio v-model="selectedRadio" :value="$options.SELECTED_PROJECTS">{{
+        __('Selected projects')
+      }}</gl-form-radio>
+      <input :id="inputAttrs.id" type="hidden" :name="inputAttrs.name" />
+    </gl-form-group>
+  </div>
+</template>
diff --git a/app/assets/javascripts/access_tokens/index.js b/app/assets/javascripts/access_tokens/index.js
index b4353af30d5..e29ec5adb42 100644
--- a/app/assets/javascripts/access_tokens/index.js
+++ b/app/assets/javascripts/access_tokens/index.js
@@ -1,4 +1,5 @@
 import Vue from 'vue';
+
 import ExpiresAtField from './components/expires_at_field.vue';
 
 const getInputAttrs = (el) => {
@@ -11,7 +12,7 @@ const getInputAttrs = (el) => {
   };
 };
 
-const initExpiresAtField = () => {
+export const initExpiresAtField = () => {
   const el = document.querySelector('.js-access-tokens-expires-at');
 
   if (!el) {
@@ -32,4 +33,29 @@ 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) {
+    const ProjectsField = () => import('./components/projects_field.vue');
+
+    return new Vue({
+      el,
+      render(h) {
+        return h(ProjectsField, {
+          props: {
+            inputAttrs,
+          },
+        });
+      },
+    });
+  }
+
+  return null;
+};