Make new feature flag alert dismissible

- make sure the alert is dismissible in both edit and new
- make sure the feature is covered with tests

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

@@ -40,6 +40,11 @@ export default {
       required: true,
     },
   },
+  data() {
+    return {
+      userDidDismissNewFlagAlert: false,
+    };
+  },
   translations: {
     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.',
@@ -70,6 +75,9 @@ export default {
     hasNewVersionFlags() {
       return this.glFeatures.featureFlagsNewVersion;
     },
+    shouldShowNewFlagAlert() {
+      return !(this.hasNewVersionFlags || this.userDidDismissNewFlagAlert);
+    },
   },
   created() {
     this.setPath(this.path);
@@ -88,7 +96,12 @@ export default {
 </script>
 <template>
   <div>
-    <gl-alert v-if="!hasNewVersionFlags" variant="warning" :dismissible="false" class="gl-my-5">
+    <gl-alert
+      v-if="shouldShowNewFlagAlert"
+      variant="warning"
+      class="gl-my-5"
+      @dismiss="userDidDismissNewFlagAlert = true"
+    >
       {{ $options.translations.newFlagAlert }}
     </gl-alert>
     <gl-loading-icon v-if="isLoading" />

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

@@ -40,6 +40,11 @@ export default {
       required: true,
     },
   },
+  data() {
+    return {
+      userDidDismissNewFlagAlert: false,
+    };
+  },
   translations: {
     newFlagAlert: NEW_FLAG_ALERT,
   },
@@ -62,6 +67,9 @@ export default {
     hasNewVersionFlags() {
       return this.glFeatures.featureFlagsNewVersion;
     },
+    shouldShowNewFlagAlert() {
+      return !(this.hasNewVersionFlags || this.userDidDismissNewFlagAlert);
+    },
     strategies() {
       return [{ name: ROLLOUT_STRATEGY_ALL_USERS, parameters: {}, scopes: [] }];
     },
@@ -77,7 +85,12 @@ export default {
 </script>
 <template>
   <div>
-    <gl-alert v-if="!hasNewVersionFlags" variant="warning" :dismissible="false" class="gl-my-5">
+    <gl-alert
+      v-if="shouldShowNewFlagAlert"
+      variant="warning"
+      class="gl-my-5"
+      @dismiss="userDidDismissNewFlagAlert = true"
+    >
       {{ $options.translations.newFlagAlert }}
     </gl-alert>
     <h3 class="page-title">{{ s__('FeatureFlags|New feature flag') }}</h3>

ee/changelogs/unreleased/218355-make-alert-users-that-feature-flags-will-be-changing-dismissabl.yml

+---
+title: Make New Feature Flags alert dismissible
+merge_request: 37306
+author:
+type: changed

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

@@ -152,8 +152,13 @@ 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);
     });
+
+    it('the new feature flags alert should be dismissable', () => {
+      expect(wrapper.find(GlAlert).props('dismissible')).toBe(true);
+    });
   });
 });

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

@@ -9,6 +9,7 @@ import {
   DEFAULT_PERCENT_ROLLOUT,
   NEW_FLAG_ALERT,
 } from 'ee/feature_flags/constants';
+import { TEST_HOST } from 'spec/test_constants';
 import { allUsersStrategy } from '../mock_data';
 
 describe('New feature flag form', () => {
@@ -20,15 +21,25 @@ describe('New feature flag form', () => {
     },
   });
 
-  const factory = () => {
+  const factory = (opts = {}) => {
+    if (wrapper) {
+      wrapper.destroy();
+      wrapper = null;
+    }
     wrapper = shallowMount(NewFeatureFlag, {
       propsData: {
-        endpoint: 'feature_flags.json',
+        endpoint: `${TEST_HOST}/feature_flags.json`,
         path: '/feature_flags',
         environmentsEndpoint: 'environments.json',
         projectId: '8',
       },
       store,
+      provide: {
+        glFeatures: {
+          featureFlagsNewVersion: true,
+        },
+      },
+      ...opts,
     });
   };
 
@@ -76,8 +87,8 @@ 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);
+  it('should not alert users that feature flags are changing soon', () => {
+    expect(wrapper.contains(GlAlert)).toBe(false);
   });
 
   it('should pass in the project ID', () => {
@@ -89,4 +100,16 @@ describe('New feature flag form', () => {
 
     expect(strategies).toEqual([allUsersStrategy]);
   });
+
+  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);
+    });
+
+    it('the new feature flags alert should be dismissable', () => {
+      expect(wrapper.find(GlAlert).props('dismissible')).toBe(true);
+    });
+  });
 });