1 files changed, 72 insertions, 0 deletions
diff --git a/app/assets/javascripts/user_lists/components/add_user_modal.vue b/app/assets/javascripts/user_lists/components/add_user_modal.vue
new file mode 100644
index 00000000000..a8dde1f681e
--- /dev/null
+++ b/app/assets/javascripts/user_lists/components/add_user_modal.vue
@@ -0,0 +1,72 @@
+<script>
+import { GlModal, GlFormGroup, GlFormTextarea } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import { ADD_USER_MODAL_ID } from '../constants/show';
+
+export default {
+  components: {
+    GlFormGroup,
+    GlFormTextarea,
+    GlModal,
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  modalOptions: {
+    actionPrimary: {
+      text: s__('UserLists|Add'),
+      attributes: [{ 'data-testid': 'confirm-add-user-ids' }],
+    },
+    actionCancel: {
+      text: s__('UserLists|Cancel'),
+      attributes: [{ 'data-testid': 'cancel-add-user-ids' }],
+    },
+    modalId: ADD_USER_MODAL_ID,
+    static: true,
+  },
+  translations: {
+    title: s__('UserLists|Add users'),
+    description: s__(
+      'UserLists|Enter a comma separated list of user IDs. These IDs should be the users of the system in which the feature flag is set, not GitLab IDs',
+    ),
+    userIdsLabel: s__('UserLists|User IDs'),
+  },
+  data() {
+    return {
+      userIds: '',
+    };
+  },
+  methods: {
+    submitUsers() {
+      this.$emit('addUsers', this.userIds);
+      this.clearInput();
+    },
+    clearInput() {
+      this.userIds = '';
+    },
+  },
+};
+</script>
+<template>
+  <gl-modal
+    v-bind="$options.modalOptions"
+    :visible="visible"
+    data-testid="add-users-modal"
+    @primary="submitUsers"
+    @canceled="clearInput"
+  >
+    <template #modal-title>
+      {{ $options.translations.title }}
+    </template>
+    <template #default>
+      <p data-testid="add-userids-description">{{ $options.translations.description }}</p>
+      <gl-form-group label-for="add-user-ids" :label="$options.translations.userIdsLabel">
+        <gl-form-textarea id="add-user-ids" v-model="userIds" />
+      </gl-form-group>
+    </template>
+  </gl-modal>
+</template>