Packages and Registries settings: refactor to gl-alert

app/assets/javascripts/packages_and_registries/settings/group/bundle.js

 import Vue from 'vue';
+import { GlToast } from '@gitlab/ui';
+
 import Translate from '~/vue_shared/translate';
 import { parseBoolean } from '~/lib/utils/common_utils';
 import SettingsApp from './components/group_settings_app.vue';
 import { apolloProvider } from './graphql';
 
 Vue.use(Translate);
+Vue.use(GlToast);
 
 export default () => {
   const el = document.getElementById('js-packages-and-registries-settings');

app/assets/javascripts/packages_and_registries/settings/group/components/group_settings_app.vue

 <script>
-import { GlSprintf, GlLink } from '@gitlab/ui';
-import createFlash from '~/flash';
+import { GlSprintf, GlLink, GlAlert } from '@gitlab/ui';
 import SettingsBlock from '~/vue_shared/components/settings/settings_block.vue';
 import MavenSettings from '~/packages_and_registries/settings/group/components/maven_settings.vue';
 
@@ -26,6 +25,7 @@ export default {
     PACKAGES_DOCS_PATH,
   },
   components: {
+    GlAlert,
     GlSprintf,
     GlLink,
     SettingsBlock,
@@ -49,6 +49,7 @@ export default {
     return {
       packageSettings: {},
       errors: {},
+      alertMessage: null,
     };
   },
   computed: {
@@ -57,6 +58,9 @@ export default {
     },
   },
   methods: {
+    dismissAlert() {
+      this.alertMessage = null;
+    },
     updateSettings(payload) {
       this.errors = {};
       return this.$apollo
@@ -76,9 +80,10 @@ export default {
         })
         .then(({ data }) => {
           if (data.updateNamespacePackageSettings?.errors?.length > 0) {
-            createFlash({ message: ERROR_UPDATING_SETTINGS, type: 'warning' });
+            this.alertMessage = ERROR_UPDATING_SETTINGS;
           } else {
-            createFlash({ message: SUCCESS_UPDATING_SETTINGS, type: 'success' });
+            this.dismissAlert();
+            this.$toast.show(SUCCESS_UPDATING_SETTINGS, { type: 'success' });
           }
         })
         .catch((e) => {
@@ -93,7 +98,7 @@ export default {
               this.errors = { ...this.errors, [key]: message };
             });
           }
-          createFlash({ message: ERROR_UPDATING_SETTINGS, type: 'warning' });
+          this.alertMessage = ERROR_UPDATING_SETTINGS;
         });
     },
   },
@@ -102,6 +107,10 @@ export default {
 
 <template>
   <div>
+    <gl-alert v-if="alertMessage" variant="warning" class="gl-mt-4" @dismiss="dismissAlert">
+      {{ alertMessage }}
+    </gl-alert>
+
     <settings-block :default-expanded="defaultExpanded">
       <template #title> {{ $options.i18n.PACKAGE_SETTINGS_HEADER }}</template>
       <template #description>

spec/frontend/packages_and_registries/settings/group/components/group_settings_app_spec.js

 import { shallowMount, createLocalVue } from '@vue/test-utils';
-import { GlSprintf, GlLink } from '@gitlab/ui';
+import { GlSprintf, GlLink, GlAlert } from '@gitlab/ui';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import createFlash from '~/flash';
 import SettingsBlock from '~/vue_shared/components/settings/settings_block.vue';
 import component from '~/packages_and_registries/settings/group/components/group_settings_app.vue';
 import MavenSettings from '~/packages_and_registries/settings/group/components/maven_settings.vue';
@@ -30,6 +29,7 @@ const localVue = createLocalVue();
 describe('Group Settings App', () => {
   let wrapper;
   let apolloProvider;
+  let show;
 
   const defaultProvide = {
     defaultExpanded: false,
@@ -40,6 +40,7 @@ describe('Group Settings App', () => {
     provide = defaultProvide,
     resolver = jest.fn().mockResolvedValue(groupPackageSettingsMock),
     mutationResolver = jest.fn().mockResolvedValue(groupPackageSettingsMutationMock()),
+    data = {},
   } = {}) => {
     localVue.use(VueApollo);
 
@@ -54,13 +55,27 @@ describe('Group Settings App', () => {
       localVue,
       apolloProvider,
       provide,
+      data() {
+        return {
+          ...data,
+        };
+      },
       stubs: {
         GlSprintf,
         SettingsBlock,
       },
+      mocks: {
+        $toast: {
+          show,
+        },
+      },
     });
   };
 
+  beforeEach(() => {
+    show = jest.fn();
+  });
+
   afterEach(() => {
     wrapper.destroy();
     wrapper = null;
@@ -70,6 +85,7 @@ describe('Group Settings App', () => {
   const findDescription = () => wrapper.find('[data-testid="description"');
   const findLink = () => wrapper.find(GlLink);
   const findMavenSettings = () => wrapper.find(MavenSettings);
+  const findAlert = () => wrapper.find(GlAlert);
 
   const waitForApolloQueryAndRender = async () => {
     await waitForPromises();
@@ -178,8 +194,7 @@ describe('Group Settings App', () => {
 
         await waitForPromises();
 
-        expect(createFlash).toHaveBeenCalledWith({
-          message: SUCCESS_UPDATING_SETTINGS,
+        expect(show).toHaveBeenCalledWith(SUCCESS_UPDATING_SETTINGS, {
           type: 'success',
         });
       });
@@ -211,6 +226,12 @@ describe('Group Settings App', () => {
     });
 
     describe('errors', () => {
+      const verifyAlert = () => {
+        expect(findAlert().exists()).toBe(true);
+        expect(findAlert().text()).toBe(ERROR_UPDATING_SETTINGS);
+        expect(findAlert().props('variant')).toBe('warning');
+      };
+
       it('mutation payload with root level errors', async () => {
         // note this is a complex test that covers all the path around errors that are shown in the form
         // it's one single it case, due to the expensive preparation and execution
@@ -229,10 +250,8 @@ describe('Group Settings App', () => {
         );
 
         // general error message is shown
-        expect(createFlash).toHaveBeenCalledWith({
-          message: ERROR_UPDATING_SETTINGS,
-          type: 'warning',
-        });
+
+        verifyAlert();
 
         emitSettingsUpdate();
 
@@ -242,11 +261,11 @@ describe('Group Settings App', () => {
         expect(findMavenSettings().props('mavenDuplicateExceptionRegexError')).toBe('');
       });
 
-      it('mutation payload with local errors', async () => {
-        const mutationResolver = jest
-          .fn()
-          .mockResolvedValue(groupPackageSettingsMutationMock({ errors: ['foo'] }));
-
+      it.each`
+        type         | mutationResolver
+        ${'local'}   | ${jest.fn().mockResolvedValue(groupPackageSettingsMutationMock({ errors: ['foo'] }))}
+        ${'network'} | ${jest.fn().mockRejectedValue()}
+      `('mutation payload with $type error', async ({ mutationResolver }) => {
         mountComponent({ mutationResolver });
 
         await waitForApolloQueryAndRender();
@@ -255,26 +274,35 @@ describe('Group Settings App', () => {
 
         await waitForPromises();
 
-        expect(createFlash).toHaveBeenCalledWith({
-          message: ERROR_UPDATING_SETTINGS,
-          type: 'warning',
-        });
+        verifyAlert();
       });
 
-      it('shows an error in case of network error', async () => {
-        const mutationResolver = jest.fn().mockRejectedValue();
-        mountComponent({ mutationResolver });
+      it('a successful request dismisses the alert', async () => {
+        mountComponent({ data: { alertMessage: 'foo' } });
 
         await waitForApolloQueryAndRender();
 
+        expect(findAlert().exists()).toBe(true);
+
         emitSettingsUpdate();
 
         await waitForPromises();
 
-        expect(createFlash).toHaveBeenCalledWith({
-          message: ERROR_UPDATING_SETTINGS,
-          type: 'warning',
-        });
+        expect(findAlert().exists()).toBe(false);
+      });
+
+      it('dismiss event from alert dismiss it from the page', async () => {
+        mountComponent({ data: { alertMessage: 'foo' } });
+
+        await waitForApolloQueryAndRender();
+
+        expect(findAlert().exists()).toBe(true);
+
+        findAlert().vm.$emit('dismiss');
+
+        await wrapper.vm.$nextTick();
+
+        expect(findAlert().exists()).toBe(false);
       });
     });
   });