1 files changed, 87 insertions, 68 deletions
diff --git a/app/assets/javascripts/feature_flags/components/strategy.vue b/app/assets/javascripts/feature_flags/components/strategy.vue
index c83e2c897e3..ae559a4c9e3 100644
--- a/app/assets/javascripts/feature_flags/components/strategy.vue
+++ b/app/assets/javascripts/feature_flags/components/strategy.vue
@@ -1,15 +1,20 @@
 <script>
 import Vue from 'vue';
 import { isNumber } from 'lodash';
-import { GlButton, GlFormSelect, GlFormGroup, GlIcon, GlLink, GlToken } from '@gitlab/ui';
+import { GlAlert, GlButton, GlFormSelect, GlFormGroup, GlIcon, GlLink, GlToken } from '@gitlab/ui';
 import { s__, __ } from '~/locale';
-import { EMPTY_PARAMETERS, STRATEGY_SELECTIONS } from '../constants';
+import {
+  EMPTY_PARAMETERS,
+  STRATEGY_SELECTIONS,
+  ROLLOUT_STRATEGY_PERCENT_ROLLOUT,
+} from '../constants';
 
 import NewEnvironmentsDropdown from './new_environments_dropdown.vue';
 import StrategyParameters from './strategy_parameters.vue';
 
 export default {
   components: {
+    GlAlert,
     GlButton,
     GlFormGroup,
     GlFormSelect,
@@ -51,13 +56,13 @@ export default {
   i18n: {
     allEnvironments: __('All environments'),
     environmentsLabel: __('Environments'),
-    rolloutUserListLabel: s__('FeatureFlag|List'),
-    rolloutUserListDescription: s__('FeatureFlag|Select a user list'),
-    rolloutUserListNoListError: s__('FeatureFlag|There are no configured user lists'),
-    strategyTypeDescription: __('Select strategy activation method.'),
+    strategyTypeDescription: __('Select strategy activation method'),
     strategyTypeLabel: s__('FeatureFlag|Type'),
     environmentsSelectDescription: s__(
-      'FeatureFlag|Select the environment scope for this feature flag.',
+      'FeatureFlag|Select the environment scope for this feature flag',
+    ),
+    considerFlexibleRollout: s__(
+      'FeatureFlags|Consider using the more flexible "Percent rollout" strategy instead.',
     ),
   },
 
@@ -85,6 +90,9 @@ export default {
     filteredEnvironments() {
       return this.environments.filter(e => !e.shouldBeDestroyed);
     },
+    isPercentUserRollout() {
+      return this.formStrategy.name === ROLLOUT_STRATEGY_PERCENT_ROLLOUT;
+    },
   },
   methods: {
     addEnvironment(environment) {
@@ -121,73 +129,84 @@ export default {
 };
 </script>
 <template>
-  <div class="gl-border-t-solid gl-border-t-1 gl-border-t-gray-100 gl-py-6">
-    <div class="gl-display-flex gl-flex-direction-column gl-md-flex-direction-row flex-md-wrap">
-      <div class="mr-5">
-        <gl-form-group :label="$options.i18n.strategyTypeLabel" :label-for="strategyTypeId">
-          <p class="gl-display-inline-block ">{{ $options.i18n.strategyTypeDescription }}</p>
-          <gl-link :href="strategyTypeDocsPagePath" target="_blank">
-            <gl-icon name="question" />
-          </gl-link>
-          <gl-form-select
-            :id="strategyTypeId"
-            :value="formStrategy.name"
-            :options="$options.strategies"
-            @change="onStrategyTypeChange"
+  <div>
+    <gl-alert v-if="isPercentUserRollout" variant="tip" :dismissible="false">
+      {{ $options.i18n.considerFlexibleRollout }}
+    </gl-alert>
+
+    <div class="gl-border-t-solid gl-border-t-1 gl-border-t-gray-100 gl-py-6">
+      <div class="gl-display-flex gl-flex-direction-column gl-md-flex-direction-row flex-md-wrap">
+        <div class="mr-5">
+          <gl-form-group :label="$options.i18n.strategyTypeLabel" :label-for="strategyTypeId">
+            <template #description>
+              {{ $options.i18n.strategyTypeDescription }}
+              <gl-link :href="strategyTypeDocsPagePath" target="_blank">
+                <gl-icon name="question" />
+              </gl-link>
+            </template>
+            <gl-form-select
+              :id="strategyTypeId"
+              :value="formStrategy.name"
+              :options="$options.strategies"
+              @change="onStrategyTypeChange"
+            />
+          </gl-form-group>
+        </div>
+
+        <div data-testid="strategy">
+          <strategy-parameters
+            :strategy="strategy"
+            :user-lists="userLists"
+            @change="onStrategyChange"
           />
-        </gl-form-group>
-      </div>
+        </div>
 
-      <div data-testid="strategy">
-        <strategy-parameters
-          :strategy="strategy"
-          :user-lists="userLists"
-          @change="onStrategyChange"
-        />
+        <div
+          class="align-self-end align-self-md-stretch order-first offset-md-0 order-md-0 gl-ml-auto"
+        >
+          <gl-button
+            data-testid="delete-strategy-button"
+            variant="danger"
+            icon="remove"
+            @click="$emit('delete')"
+          />
+        </div>
       </div>
 
-      <div
-        class="align-self-end align-self-md-stretch order-first offset-md-0 order-md-0 gl-ml-auto"
-      >
-        <gl-button
-          data-testid="delete-strategy-button"
-          variant="danger"
-          icon="remove"
-          @click="$emit('delete')"
-        />
-      </div>
-    </div>
-    <label class="gl-display-block" :for="environmentsDropdownId">{{
-      $options.i18n.environmentsLabel
-    }}</label>
-    <p class="gl-display-inline-block">{{ $options.i18n.environmentsSelectDescription }}</p>
-    <gl-link :href="environmentsScopeDocsPath" target="_blank">
-      <gl-icon name="question" />
-    </gl-link>
-    <div class="gl-display-flex gl-flex-direction-column">
-      <div
-        class="gl-display-flex gl-flex-direction-column gl-md-flex-direction-row align-items-start gl-md-align-items-center"
-      >
-        <new-environments-dropdown
-          :id="environmentsDropdownId"
-          :endpoint="endpoint"
-          class="gl-mr-3"
-          @add="addEnvironment"
-        />
-        <span v-if="appliesToAllEnvironments" class="text-secondary gl-mt-3 mt-md-0 ml-md-3">
-          {{ $options.i18n.allEnvironments }}
-        </span>
-        <div v-else class="gl-display-flex gl-align-items-center">
-          <gl-token
-            v-for="environment in filteredEnvironments"
-            :key="environment.id"
-            class="gl-mt-3 gl-mr-3 mt-md-0 mr-md-0 ml-md-2 rounded-pill"
-            @close="removeScope(environment)"
-          >
-            {{ environment.environmentScope }}
-          </gl-token>
+      <label class="gl-display-block" :for="environmentsDropdownId">{{
+        $options.i18n.environmentsLabel
+      }}</label>
+      <div class="gl-display-flex gl-flex-direction-column">
+        <div
+          class="gl-display-flex gl-flex-direction-column gl-md-flex-direction-row align-items-start gl-md-align-items-center"
+        >
+          <new-environments-dropdown
+            :id="environmentsDropdownId"
+            :endpoint="endpoint"
+            class="gl-mr-3"
+            @add="addEnvironment"
+          />
+          <span v-if="appliesToAllEnvironments" class="text-secondary gl-mt-3 mt-md-0 ml-md-3">
+            {{ $options.i18n.allEnvironments }}
+          </span>
+          <div v-else class="gl-display-flex gl-align-items-center">
+            <gl-token
+              v-for="environment in filteredEnvironments"
+              :key="environment.id"
+              class="gl-mt-3 gl-mr-3 mt-md-0 mr-md-0 ml-md-2 rounded-pill"
+              @close="removeScope(environment)"
+            >
+              {{ environment.environmentScope }}
+            </gl-token>
+          </div>
         </div>
       </div>
+      <span class="gl-display-inline-block gl-py-3">
+        {{ $options.i18n.environmentsSelectDescription }}
+      </span>
+      <gl-link :href="environmentsScopeDocsPath" target="_blank">
+        <gl-icon name="question" />
+      </gl-link>
     </div>
   </div>
 </template>