Merge branch 'alert-users-of-upcoming-new-feature-flags' into 'master'

Alert Users that Feature Flags will be Changing

See merge request gitlab-org/gitlab!32177

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 ""