Alert Users that Feature Flags will be Changing

This is to inform users that the feature flag UI will be changing soon.
It looks to see if the new UI has been enabled already to decide whether
or not to show the alert, as it is a useless alert if the new UI has
been enabled.

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

@@ -3,7 +3,7 @@ import { GlAlert, GlLoadingIcon, GlToggle } from '@gitlab/ui';
 import { createNamespacedHelpers } from 'vuex';
 import { sprintf, s__ } from '~/locale';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import { LEGACY_FLAG } from '../constants';
+import { LEGACY_FLAG, NEW_FLAG_ALERT } from '../constants';
 import store from '../store/index';
 import FeatureFlagForm from './form.vue';
 
@@ -36,6 +36,7 @@ export default {
     legacyFlagAlert: s__(
       'FeatureFlags|GitLab is moving to a new way of managing feature flags, and in 13.4, this feature flag will become read-only. Please create a new feature flag.',
     ),
+    newFlagAlert: NEW_FLAG_ALERT,
   },
   computed: {
     ...mapState([
@@ -56,7 +57,10 @@ export default {
         : sprintf(s__('Edit %{name}'), { name: this.name });
     },
     deprecated() {
-      return this.glFeatures.featureFlagsNewVersion && this.version === LEGACY_FLAG;
+      return this.hasNewVersionFlags && this.version === LEGACY_FLAG;
+    },
+    hasNewVersionFlags() {
+      return this.glFeatures.featureFlagsNewVersion;
     },
   },
   created() {
@@ -76,6 +80,9 @@ export default {
 </script>
 <template>
   <div>
+    <gl-alert v-if="!hasNewVersionFlags" variant="warning" :dismissible="false" class="gl-my-5">
+      {{ $options.translations.newFlagAlert }}
+    </gl-alert>
     <gl-loading-icon v-if="isLoading" />
 
     <template v-else-if="!isLoading && !hasError">

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

 <script>
 import { createNamespacedHelpers } from 'vuex';
+import { GlAlert } from '@gitlab/ui';
 import store from '../store/index';
 import FeatureFlagForm from './form.vue';
-import { LEGACY_FLAG, NEW_VERSION_FLAG } from '../constants';
+import { LEGACY_FLAG, NEW_VERSION_FLAG, NEW_FLAG_ALERT } from '../constants';
 import { createNewEnvironmentScope } from '../store/modules/helpers';
 
 import featureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
@@ -12,6 +13,7 @@ const { mapState, mapActions } = createNamespacedHelpers('new');
 export default {
   store,
   components: {
+    GlAlert,
     FeatureFlagForm,
   },
   mixins: [featureFlagsMixin()],
@@ -29,6 +31,9 @@ export default {
       required: true,
     },
   },
+  translations: {
+    newFlagAlert: NEW_FLAG_ALERT,
+  },
   computed: {
     ...mapState(['error']),
     scopes() {
@@ -43,7 +48,10 @@ export default {
       ];
     },
     version() {
-      return this.glFeatures.featureFlagsNewVersion ? NEW_VERSION_FLAG : LEGACY_FLAG;
+      return this.hasNewVersionFlags ? NEW_VERSION_FLAG : LEGACY_FLAG;
+    },
+    hasNewVersionFlags() {
+      return this.glFeatures.featureFlagsNewVersion;
     },
     strategies() {
       return [{ name: '', parameters: {}, scopes: [] }];
@@ -60,6 +68,9 @@ export default {
 </script>
 <template>
   <div>
+    <gl-alert v-if="!hasNewVersionFlags" variant="warning" :dismissible="false" class="gl-my-5">
+      {{ $options.translations.newFlagAlert }}
+    </gl-alert>
     <h3 class="page-title">{{ s__('FeatureFlags|New feature flag') }}</h3>
 
     <div v-if="error.length" class="alert alert-danger">

ee/app/assets/javascripts/feature_flags/constants.js

 import { property } from 'lodash';
+import { s__ } from '~/locale';
 
 export const ROLLOUT_STRATEGY_ALL_USERS = 'default';
 export const ROLLOUT_STRATEGY_PERCENT_ROLLOUT = 'gradualRolloutUserId';
@@ -17,3 +18,7 @@ export const fetchUserIdParams = property(['parameters', 'userIds']);
 
 export const NEW_VERSION_FLAG = 'new_version_flag';
 export const LEGACY_FLAG = 'legacy_flag';
+
+export const NEW_FLAG_ALERT = s__(
+  'FeatureFlags|Feature Flags will look different in the next milestone. No action is needed, but you may notice the functionality was changed to improve the workflow.',
+);

ee/changelogs/unreleased-ee/alert-users-of-upcoming-new-feature-flags.yml

+---
+title: Alert Users that Feature Flags will be Changing
+merge_request: 32177
+author:
+type: added

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

 import Vuex from 'vuex';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
-import { GlToggle } from '@gitlab/ui';
-import { LEGACY_FLAG, NEW_VERSION_FLAG } from 'ee/feature_flags/constants';
+import { GlToggle, GlAlert } from '@gitlab/ui';
+import { LEGACY_FLAG, NEW_VERSION_FLAG, NEW_FLAG_ALERT } from 'ee/feature_flags/constants';
 import Form from 'ee/feature_flags/components/form.vue';
 import editModule from 'ee/feature_flags/store/modules/edit';
 import EditFeatureFlag from 'ee/feature_flags/components/edit_feature_flag.vue';
@@ -22,7 +22,7 @@ describe('Edit feature flag form', () => {
     },
   });
 
-  const factory = () => {
+  const factory = (opts = {}) => {
     if (wrapper) {
       wrapper.destroy();
       wrapper = null;
@@ -40,6 +40,7 @@ describe('Edit feature flag form', () => {
           featureFlagsNewVersion: true,
         },
       },
+      ...opts,
     });
   };
 
@@ -90,6 +91,10 @@ describe('Edit feature flag form', () => {
     expect(wrapper.find(GlToggle).props('value')).toBe(true);
   });
 
+  it('should not alert users that feature flags are changing soon', () => {
+    expect(wrapper.find(GlAlert).text()).not.toBe(NEW_FLAG_ALERT);
+  });
+
   describe('with error', () => {
     it('should render the error', () => {
       store.dispatch('edit/receiveUpdateFeatureFlagError', { message: ['The name is required'] });
@@ -136,4 +141,11 @@ describe('Edit feature flag form', () => {
       });
     });
   });
+
+  describe('without new version flags', () => {
+    beforeEach(() => factory({ provide: { glFeatures: { featureFlagsNewVersion: false } } }));
+    it('should alert users that feature flags are changing soon', () => {
+      expect(wrapper.find(GlAlert).text()).toBe(NEW_FLAG_ALERT);
+    });
+  });
 });

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

 import Vuex from 'vuex';
 import { shallowMount } from '@vue/test-utils';
+import { GlAlert } from '@gitlab/ui';
 import Form from 'ee/feature_flags/components/form.vue';
 import newModule from 'ee/feature_flags/store/modules/new';
 import NewFeatureFlag from 'ee/feature_flags/components/new_feature_flag.vue';
-import { ROLLOUT_STRATEGY_ALL_USERS, DEFAULT_PERCENT_ROLLOUT } from 'ee/feature_flags/constants';
+import {
+  ROLLOUT_STRATEGY_ALL_USERS,
+  DEFAULT_PERCENT_ROLLOUT,
+  NEW_FLAG_ALERT,
+} from 'ee/feature_flags/constants';
 
 describe('New feature flag form', () => {
   let wrapper;
@@ -64,4 +69,7 @@ describe('New feature flag form', () => {
 
     expect(wrapper.find(Form).props('scopes')).toContainEqual(defaultScope);
   });
+  it('should alert users that feature flags are changing soon', () => {
+    expect(wrapper.find(GlAlert).text()).toBe(NEW_FLAG_ALERT);
+  });
 });

locale/gitlab.pot

@@ -9266,6 +9266,9 @@ msgstr ""
 msgid "FeatureFlags|Feature Flags"
 msgstr ""
 
+msgid "FeatureFlags|Feature Flags will look different in the next milestone. No action is needed, but you may notice the functionality was changed to improve the workflow."
+msgstr ""
+
 msgid "FeatureFlags|Feature flag %{name} will be removed. Are you sure?"
 msgstr ""