1 files changed, 121 insertions, 0 deletions
diff --git a/app/assets/javascripts/feature_flags/components/strategies/flexible_rollout.vue b/app/assets/javascripts/feature_flags/components/strategies/flexible_rollout.vue
new file mode 100644
index 00000000000..020a0d43096
--- /dev/null
+++ b/app/assets/javascripts/feature_flags/components/strategies/flexible_rollout.vue
@@ -0,0 +1,121 @@
+<script>
+import { GlFormInput, GlFormSelect } from '@gitlab/ui';
+import { __ } from '~/locale';
+import { PERCENT_ROLLOUT_GROUP_ID } from '../../constants';
+import ParameterFormGroup from './parameter_form_group.vue';
+
+export default {
+  components: {
+    GlFormInput,
+    GlFormSelect,
+    ParameterFormGroup,
+  },
+  props: {
+    strategy: {
+      required: true,
+      type: Object,
+    },
+  },
+  i18n: {
+    percentageDescription: __('Enter a whole number between 0 and 100'),
+    percentageInvalid: __('Percent rollout must be a whole number between 0 and 100'),
+    percentageLabel: __('Percentage'),
+    stickinessDescription: __('Consistency guarantee method'),
+    stickinessLabel: __('Based on'),
+  },
+  stickinessOptions: [
+    {
+      value: 'DEFAULT',
+      text: __('Available ID'),
+    },
+    {
+      value: 'USERID',
+      text: __('User ID'),
+    },
+    {
+      value: 'SESSIONID',
+      text: __('Session ID'),
+    },
+    {
+      value: 'RANDOM',
+      text: __('Random'),
+    },
+  ],
+  computed: {
+    isValid() {
+      const percentageNum = Number(this.percentage);
+      return Number.isInteger(percentageNum) && percentageNum >= 0 && percentageNum <= 100;
+    },
+    percentage() {
+      return this.strategy?.parameters?.rollout ?? '100';
+    },
+    stickiness() {
+      return this.strategy?.parameters?.stickiness ?? this.$options.stickinessOptions[0].value;
+    },
+  },
+  methods: {
+    onPercentageChange(value) {
+      this.$emit('change', {
+        parameters: {
+          groupId: PERCENT_ROLLOUT_GROUP_ID,
+          rollout: value,
+          stickiness: this.stickiness,
+        },
+      });
+    },
+    onStickinessChange(value) {
+      this.$emit('change', {
+        parameters: {
+          groupId: PERCENT_ROLLOUT_GROUP_ID,
+          rollout: this.percentage,
+          stickiness: value,
+        },
+      });
+    },
+  },
+};
+</script>
+<template>
+  <div class="gl-display-flex">
+    <div class="gl-mr-7" data-testid="strategy-flexible-rollout-percentage">
+      <parameter-form-group
+        :label="$options.i18n.percentageLabel"
+        :description="isValid ? $options.i18n.percentageDescription : ''"
+        :invalid-feedback="$options.i18n.percentageInvalid"
+        :state="isValid"
+      >
+        <template #default="{ inputId }">
+          <div class="gl-display-flex gl-align-items-center">
+            <gl-form-input
+              :id="inputId"
+              :value="percentage"
+              :state="isValid"
+              class="rollout-percentage gl-text-right gl-w-9"
+              type="number"
+              min="0"
+              max="100"
+              @input="onPercentageChange"
+            />
+            <span class="ml-1">%</span>
+          </div>
+        </template>
+      </parameter-form-group>
+    </div>
+
+    <div class="gl-mr-7" data-testid="strategy-flexible-rollout-stickiness">
+      <parameter-form-group
+        :label="$options.i18n.stickinessLabel"
+        :description="$options.i18n.stickinessDescription"
+      >
+        <template #default="{ inputId }">
+          <gl-form-select
+            :id="inputId"
+            :value="stickiness"
+            :options="$options.stickinessOptions"
+            @change="onStickinessChange"
+          />
+        </template>
+      </parameter-form-group>
+    </div>
+  </div>
+</template>