Integrate New Feature Flag Form with New API

This allows the creation of new-style feature flags with strategies,
hidden behind the `:feature_flags_new_version`

ee/app/assets/javascripts/feature_flags/components/form.vue

 <script>
 import Vue from 'vue';
-import { memoize, isString } from 'lodash';
+import { memoize, isString, cloneDeep } from 'lodash';
 import {
   GlButton,
   GlBadge,
@@ -8,18 +8,22 @@ import {
   GlTooltipDirective,
   GlFormTextarea,
   GlFormCheckbox,
+  GlSprintf,
 } from '@gitlab/ui';
-import { s__, sprintf } from '~/locale';
+import { s__ } from '~/locale';
 import featureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import ToggleButton from '~/vue_shared/components/toggle_button.vue';
 import Icon from '~/vue_shared/components/icon.vue';
 import EnvironmentsDropdown from './environments_dropdown.vue';
+import Strategy from './strategy.vue';
 import {
   ROLLOUT_STRATEGY_ALL_USERS,
   ROLLOUT_STRATEGY_PERCENT_ROLLOUT,
   ROLLOUT_STRATEGY_USER_ID,
   ALL_ENVIRONMENTS_NAME,
   INTERNAL_ID_PREFIX,
+  NEW_VERSION_FLAG,
+  LEGACY_FLAG,
 } from '../constants';
 import { createNewEnvironmentScope } from '../store/modules/helpers';
 
@@ -30,9 +34,11 @@ export default {
     GlFormTextarea,
     GlFormCheckbox,
     GlTooltip,
+    GlSprintf,
     ToggleButton,
     Icon,
     EnvironmentsDropdown,
+    Strategy,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -71,22 +77,29 @@ export default {
       type: String,
       required: true,
     },
+    strategies: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    version: {
+      type: String,
+      required: false,
+      default: LEGACY_FLAG,
+    },
   },
+  translations: {
+    allEnvironmentsText: s__('FeatureFlags|* (All Environments)'),
 
-  allEnvironmentsText: s__('FeatureFlags|* (All Environments)'),
-
-  helpText: sprintf(
-    s__(
+    helpText: s__(
       'FeatureFlags|Feature Flag behavior is built up by creating a set of rules to define the status of target environments. A default wildcard rule %{codeStart}*%{codeEnd} for %{boldStart}All Environments%{boldEnd} is set, and you are able to add as many rules as you need by choosing environment specs below. You can toggle the behavior for each of your rules to set them %{boldStart}Active%{boldEnd} or %{boldStart}Inactive%{boldEnd}.',
     ),
-    {
-      codeStart: '<code>',
-      codeEnd: '</code>',
-      boldStart: '<b>',
-      boldEnd: '</b>',
-    },
-    false,
-  ),
+
+    newHelpText: s__(
+      'FeatureFlags|Enable features for specific users and specific environments by defining feature flag strategies. By default, features are available to all users in all environments.',
+    ),
+    noStrategiesText: s__('FeatureFlags|Feature Flag has no strategies'),
+  },
 
   ROLLOUT_STRATEGY_ALL_USERS,
   ROLLOUT_STRATEGY_PERCENT_ROLLOUT,
@@ -102,6 +115,7 @@ export default {
 
       // operate on a clone to avoid mutating props
       formScopes: this.scopes.map(s => ({ ...s })),
+      formStrategies: cloneDeep(this.strategies),
 
       newScope: '',
     };
@@ -110,14 +124,36 @@ export default {
     filteredScopes() {
       return this.formScopes.filter(scope => !scope.shouldBeDestroyed);
     },
+    filteredStrategies() {
+      return this.formStrategies.filter(s => !s.shouldBeDestroyed);
+    },
     canUpdateFlag() {
       return !this.permissionsFlag || (this.formScopes || []).every(scope => scope.canUpdate);
     },
     permissionsFlag() {
       return this.glFeatures.featureFlagPermissions;
     },
+    supportsStrategies() {
+      return this.glFeatures.featureFlagsNewVersion && this.version === NEW_VERSION_FLAG;
+    },
+
+    canDeleteStrategy() {
+      return this.formStrategies.length > 1;
+    },
   },
   methods: {
+    addStrategy() {
+      this.formStrategies.push({ name: '', parameters: {}, scopes: [] });
+    },
+
+    deleteStrategy(s) {
+      if (s.id) {
+        Vue.set(s, 'shouldBeDestroyed', true);
+      } else {
+        this.formStrategies = this.formStrategies.filter(strategy => strategy !== s);
+      }
+    },
+
     isAllEnvironment(name) {
       return name === ALL_ENVIRONMENTS_NAME;
     },
@@ -157,12 +193,20 @@ export default {
      * it triggers an event with the form data
      */
     handleSubmit() {
-      this.$emit('handleSubmit', {
+      const flag = {
         name: this.formName,
         description: this.formDescription,
-        scopes: this.formScopes,
         active: this.active,
-      });
+        version: this.version,
+      };
+
+      if (this.version === LEGACY_FLAG) {
+        flag.scopes = this.formScopes;
+      } else {
+        flag.strategies = this.formStrategies;
+      }
+
+      this.$emit('handleSubmit', flag);
     },
 
     canUpdateScope(scope) {
@@ -208,6 +252,14 @@ export default {
         scope.rolloutUserIds.length > 0 &&
         scope.rolloutStrategy === ROLLOUT_STRATEGY_PERCENT_ROLLOUT;
     },
+    onFormStrategyChange({ id, name, parameters, scopes }, index) {
+      Object.assign(this.filteredStrategies[index], {
+        id,
+        name,
+        parameters,
+        scopes,
+      });
+    },
   },
 };
 </script>
@@ -241,10 +293,46 @@ export default {
         </div>
       </div>
 
-      <div class="row">
+      <template v-if="supportsStrategies">
+        <div class="row">
+          <div class="col-md-12">
+            <h4>{{ s__('FeatureFlags|Strategies') }}</h4>
+            <div class="flex align-items-baseline justify-content-between">
+              <p class="mr-3">{{ $options.translations.newHelpText }}</p>
+              <gl-button variant="success" category="secondary" @click="addStrategy">
+                {{ s__('FeatureFlags|Add strategy') }}
+              </gl-button>
+            </div>
+          </div>
+        </div>
+        <template v-if="filteredStrategies.length > 0">
+          <strategy
+            v-for="(strategy, index) in filteredStrategies"
+            :key="strategy.id"
+            :strategy="strategy"
+            :index="index"
+            :endpoint="environmentsEndpoint"
+            :can-delete="canDeleteStrategy"
+            @change="onFormStrategyChange($event, index)"
+            @delete="deleteStrategy(strategy)"
+          />
+        </template>
+        <div v-else class="flex justify-content-center border-top py-4 w-100">
+          <span>{{ $options.translations.noStrategiesText }}</span>
+        </div>
+      </template>
+
+      <div v-else class="row">
         <div class="form-group col-md-12">
           <h4>{{ s__('FeatureFlags|Target environments') }}</h4>
-          <div v-html="$options.helpText"></div>
+          <gl-sprintf :message="$options.translations.helpText">
+            <template #code="{ content }">
+              <code>{{ content }}</code>
+            </template>
+            <template #bold="{ content }">
+              <b>{{ content }}</b>
+            </template>
+          </gl-sprintf>
 
           <div class="js-scopes-table prepend-top-default">
             <div class="gl-responsive-table-row table-row-header" role="row">
@@ -274,7 +362,7 @@ export default {
                   class="table-mobile-content js-feature-flag-status d-flex align-items-center justify-content-start"
                 >
                   <p v-if="isAllEnvironment(scope.environmentScope)" class="js-scope-all pl-3">
-                    {{ $options.allEnvironmentsText }}
+                    {{ $options.translations.allEnvironmentsText }}
                   </p>
 
                   <environments-dropdown

ee/app/assets/javascripts/feature_flags/components/new_feature_flag.vue

@@ -2,6 +2,7 @@
 import { createNamespacedHelpers } from 'vuex';
 import store from '../store/index';
 import FeatureFlagForm from './form.vue';
+import { LEGACY_FLAG, NEW_VERSION_FLAG } from '../constants';
 import { createNewEnvironmentScope } from '../store/modules/helpers';
 
 import featureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
@@ -41,6 +42,12 @@ export default {
         ),
       ];
     },
+    version() {
+      return this.glFeatures.featureFlagsNewVersion ? NEW_VERSION_FLAG : LEGACY_FLAG;
+    },
+    strategies() {
+      return [{ name: '', parameters: {}, scopes: [] }];
+    },
   },
   created() {
     this.setEndpoint(this.endpoint);
@@ -63,7 +70,9 @@ export default {
       :cancel-path="path"
       :submit-text="s__('FeatureFlags|Create feature flag')"
       :scopes="scopes"
+      :strategies="strategies"
       :environments-endpoint="environmentsEndpoint"
+      :version="version"
       @handleSubmit="data => createFeatureFlag(data)"
     />
   </div>

ee/app/controllers/projects/feature_flags_controller.rb

@@ -12,6 +12,7 @@ class Projects::FeatureFlagsController < Projects::ApplicationController
 
   before_action do
     push_frontend_feature_flag(:feature_flag_permissions)
+    push_frontend_feature_flag(:feature_flags_new_version, project)
   end
 
   def index

ee/spec/features/projects/feature_flags/user_creates_feature_flag_spec.rb

@@ -12,6 +12,7 @@ describe 'User creates feature flag', :js do
     project.add_developer(user)
     stub_licensed_features(feature_flags: true)
     stub_feature_flags(feature_flag_permissions: false)
+    stub_feature_flags(feature_flags_new_version: false)
     sign_in(user)
   end
 

ee/spec/frontend/feature_flags/components/form_spec.js

 import _ from 'underscore';
 import { shallowMount } from '@vue/test-utils';
-import { GlFormTextarea, GlFormCheckbox } from '@gitlab/ui';
+import { GlFormTextarea, GlFormCheckbox, GlButton } from '@gitlab/ui';
 import Form from 'ee/feature_flags/components/form.vue';
 import EnvironmentsDropdown from 'ee/feature_flags/components/environments_dropdown.vue';
+import Strategy from 'ee/feature_flags/components/strategy.vue';
 import {
   ROLLOUT_STRATEGY_ALL_USERS,
   ROLLOUT_STRATEGY_PERCENT_ROLLOUT,
   INTERNAL_ID_PREFIX,
   DEFAULT_PERCENT_ROLLOUT,
+  LEGACY_FLAG,
+  NEW_VERSION_FLAG,
 } from 'ee/feature_flags/constants';
 import ToggleButton from '~/vue_shared/components/toggle_button.vue';
 import { featureFlag } from '../mock_data';
@@ -26,6 +29,7 @@ describe('feature flag form', () => {
       provide: {
         glFeatures: {
           featureFlagPermissions: true,
+          featureFlagsNewVersion: true,
         },
       },
     });
@@ -100,6 +104,7 @@ describe('feature flag form', () => {
         name: featureFlag.name,
         description: featureFlag.description,
         active: true,
+        version: LEGACY_FLAG,
         scopes: [
           {
             id: 1,
@@ -380,4 +385,60 @@ describe('feature flag form', () => {
       });
     });
   });
+
+  describe('with strategies', () => {
+    beforeEach(() => {
+      factory({
+        ...requiredProps,
+        name: featureFlag.name,
+        description: featureFlag.description,
+        active: true,
+        version: NEW_VERSION_FLAG,
+        strategies: [
+          {
+            type: ROLLOUT_STRATEGY_PERCENT_ROLLOUT,
+            paramters: { percentage: '30' },
+            scopes: [],
+          },
+          {
+            type: ROLLOUT_STRATEGY_ALL_USERS,
+            paramters: {},
+            scopes: [{ environment_scope: 'review/*' }],
+          },
+        ],
+      });
+    });
+
+    it('should show the strategy component', () => {
+      const strategy = wrapper.find(Strategy);
+      expect(strategy.exists()).toBe(true);
+      expect(strategy.props('strategy')).toEqual({
+        type: ROLLOUT_STRATEGY_PERCENT_ROLLOUT,
+        paramters: { percentage: '30' },
+        scopes: [],
+      });
+    });
+
+    it('should show one strategy component per strategy', () => {
+      expect(wrapper.findAll(Strategy)).toHaveLength(2);
+    });
+
+    it('should add a strategy when clicking the Add button', () => {
+      wrapper.find(GlButton).vm.$emit('click');
+      return wrapper.vm.$nextTick().then(() => expect(wrapper.findAll(Strategy)).toHaveLength(3));
+    });
+
+    it('should remove a strategy on delete', () => {
+      const strategy = {
+        type: ROLLOUT_STRATEGY_PERCENT_ROLLOUT,
+        paramters: { percentage: '30' },
+        scopes: [],
+      };
+      wrapper.find(Strategy).vm.$emit('delete');
+      return wrapper.vm.$nextTick().then(() => {
+        expect(wrapper.findAll(Strategy)).toHaveLength(1);
+        expect(wrapper.find(Strategy).props('strategy')).not.toEqual(strategy);
+      });
+    });
+  });
 });

locale/gitlab.pot

@@ -8675,6 +8675,9 @@ msgstr ""
 msgid "FeatureFlags|Active"
 msgstr ""
 
+msgid "FeatureFlags|Add strategy"
+msgstr ""
+
 msgid "FeatureFlags|All users"
 msgstr ""
 
@@ -8699,6 +8702,9 @@ msgstr ""
 msgid "FeatureFlags|Edit Feature Flag"
 msgstr ""
 
+msgid "FeatureFlags|Enable features for specific users and specific environments by defining feature flag strategies. By default, features are available to all users in all environments."
+msgstr ""
+
 msgid "FeatureFlags|Environment Spec"
 msgstr ""
 
@@ -8711,6 +8717,9 @@ msgstr ""
 msgid "FeatureFlags|Feature Flag behavior is built up by creating a set of rules to define the status of target environments. A default wildcard rule %{codeStart}*%{codeEnd} for %{boldStart}All Environments%{boldEnd} is set, and you are able to add as many rules as you need by choosing environment specs below. You can toggle the behavior for each of your rules to set them %{boldStart}Active%{boldEnd} or %{boldStart}Inactive%{boldEnd}."
 msgstr ""
 
+msgid "FeatureFlags|Feature Flag has no strategies"
+msgstr ""
+
 msgid "FeatureFlags|Feature Flags"
 msgstr ""
 
@@ -8780,6 +8789,9 @@ msgstr ""
 msgid "FeatureFlags|Status"
 msgstr ""
 
+msgid "FeatureFlags|Strategies"
+msgstr ""
+
 msgid "FeatureFlags|Target environments"
 msgstr ""