1 files changed, 47 insertions, 0 deletions
diff --git a/app/assets/javascripts/feature_flags/components/strategies/users_with_id.vue b/app/assets/javascripts/feature_flags/components/strategies/users_with_id.vue
new file mode 100644
index 00000000000..094127fb710
--- /dev/null
+++ b/app/assets/javascripts/feature_flags/components/strategies/users_with_id.vue
@@ -0,0 +1,47 @@
+<script>
+import { GlFormTextarea } from '@gitlab/ui';
+import { __, s__ } from '~/locale';
+
+import ParameterFormGroup from './parameter_form_group.vue';
+
+export default {
+  components: {
+    ParameterFormGroup,
+    GlFormTextarea,
+  },
+  props: {
+    strategy: {
+      required: true,
+      type: Object,
+    },
+  },
+  translations: {
+    rolloutUserIdsDescription: __('Enter one or more user ID separated by commas'),
+    rolloutUserIdsLabel: s__('FeatureFlag|User IDs'),
+  },
+  computed: {
+    userIds() {
+      return this.strategy?.parameters?.userIds ?? '';
+    },
+  },
+  methods: {
+    onUserIdsChange(value) {
+      this.$emit('change', {
+        parameters: {
+          userIds: value,
+        },
+      });
+    },
+  },
+};
+</script>
+<template>
+  <parameter-form-group
+    :label="$options.translations.rolloutUserIdsLabel"
+    :description="$options.translations.rolloutUserIdsDescription"
+  >
+    <template #default="{ inputId }">
+      <gl-form-textarea :id="inputId" :value="userIds" @input="onUserIdsChange" />
+    </template>
+  </parameter-form-group>
+</template>