Use GlAert for form validation messages

This updates the error alert banner on the new feature flag form
and edit feature flag form to just warning.

Addresses https://gitlab.com/gitlab-org/gitlab/-/issues/273018.

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

@@ -91,9 +91,9 @@ export default {
         <h3 class="page-title gl-m-0">{{ title }}</h3>
       </div>
 
-      <div v-if="error.length" class="alert alert-danger">
+      <gl-alert v-if="error.length" variant="warning" class="gl-mb-5" :dismissible="false">
         <p v-for="(message, index) in error" :key="index" class="gl-mb-0">{{ message }}</p>
-      </div>
+      </gl-alert>
 
       <feature-flag-form
         :name="name"

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

 <script>
+import { GlAlert } from '@gitlab/ui';
 import { mapState, mapActions } from 'vuex';
 import axios from '~/lib/utils/axios_utils';
 import FeatureFlagForm from './form.vue';
@@ -10,6 +11,7 @@ import featureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 export default {
   components: {
     FeatureFlagForm,
+    GlAlert,
   },
   mixins: [featureFlagsMixin()],
   inject: {
@@ -61,9 +63,9 @@ export default {
   <div>
     <h3 class="page-title">{{ s__('FeatureFlags|New feature flag') }}</h3>
 
-    <div v-if="error.length" class="alert alert-danger">
-      <p v-for="(message, index) in error" :key="index" class="mb-0">{{ message }}</p>
-    </div>
+    <gl-alert v-if="error.length" variant="warning" class="gl-mb-5" :dismissible="false">
+      <p v-for="(message, index) in error" :key="index" class="gl-mb-0">{{ message }}</p>
+    </gl-alert>
 
     <feature-flag-form
       :cancel-path="path"

changelogs/unreleased/update-feature-flag-error-banner.yml

+---
+title: Update styling of validation messages in New Feature Flag form
+merge_request: 52217
+author:
+type: changed

spec/frontend/feature_flags/components/edit_feature_flag_spec.js

@@ -75,6 +75,8 @@ describe('Edit feature flag form', () => {
   });
 
   const findAlert = () => wrapper.find(GlAlert);
+  const findWarningGlAlert = () =>
+    wrapper.findAll(GlAlert).filter((c) => c.props('variant') === 'warning');
 
   it('should display the iid', () => {
     expect(wrapper.find('h3').text()).toContain('^5');
@@ -88,7 +90,7 @@ describe('Edit feature flag form', () => {
     expect(wrapper.find(GlToggle).props('value')).toBe(true);
   });
 
-  it('should not alert users that feature flags are changing soon', () => {
+  it('should alert users the flag is read only', () => {
     expect(findAlert().text()).toContain('GitLab is moving to a new way of managing feature flags');
   });
 
@@ -96,8 +98,9 @@ describe('Edit feature flag form', () => {
     it('should render the error', () => {
       store.dispatch('receiveUpdateFeatureFlagError', { message: ['The name is required'] });
       return wrapper.vm.$nextTick(() => {
-        expect(wrapper.find('.alert-danger').exists()).toEqual(true);
-        expect(wrapper.find('.alert-danger').text()).toContain('The name is required');
+        const warningGlAlert = findWarningGlAlert();
+        expect(warningGlAlert.at(1).exists()).toEqual(true);
+        expect(warningGlAlert.at(1).text()).toContain('The name is required');
       });
     });
   });

spec/frontend/feature_flags/components/new_feature_flag_spec.js

@@ -41,6 +41,9 @@ describe('New feature flag form', () => {
     });
   };
 
+  const findWarningGlAlert = () =>
+    wrapper.findAll(GlAlert).filter((c) => c.props('variant') === 'warning');
+
   beforeEach(() => {
     factory();
   });
@@ -53,8 +56,9 @@ describe('New feature flag form', () => {
     it('should render the error', () => {
       store.dispatch('receiveCreateFeatureFlagError', { message: ['The name is required'] });
       return wrapper.vm.$nextTick(() => {
-        expect(wrapper.find('.alert').exists()).toEqual(true);
-        expect(wrapper.find('.alert').text()).toContain('The name is required');
+        const warningGlAlert = findWarningGlAlert();
+        expect(warningGlAlert.at(0).exists()).toBe(true);
+        expect(warningGlAlert.at(0).text()).toContain('The name is required');
       });
     });
   });
@@ -81,10 +85,6 @@ describe('New feature flag form', () => {
     expect(wrapper.find(Form).props('scopes')).toContainEqual(defaultScope);
   });
 
-  it('should not alert users that feature flags are changing soon', () => {
-    expect(wrapper.find(GlAlert).exists()).toBe(false);
-  });
-
   it('has an all users strategy by default', () => {
     const strategies = wrapper.find(Form).props('strategies');