Update flash alerts of Admin Runner UI

This change updates the flash messages appearance for the Runner's UI.
These messages are shown when user update data some errors occurs.

Changelog: changed

app/assets/javascripts/runner/components/cells/runner_actions_cell.vue

 <script>
 import { GlButton, GlButtonGroup, GlModalDirective, GlTooltipDirective } from '@gitlab/ui';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { __, s__, sprintf } from '~/locale';
 import runnerDeleteMutation from '~/runner/graphql/runner_delete.mutation.graphql';
 import runnerActionsUpdateMutation from '~/runner/graphql/runner_actions_update.mutation.graphql';
@@ -139,7 +139,7 @@ export default {
 
     onError(error) {
       const { message } = error;
-      createFlash({ message });
+      createAlert({ message });
 
       this.reportToSentry(error);
     },

app/assets/javascripts/runner/components/registration/registration_token_reset_dropdown_item.vue

 <script>
 import { GlDropdownItem, GlLoadingIcon } from '@gitlab/ui';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { TYPE_GROUP, TYPE_PROJECT } from '~/graphql_shared/constants';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
 import { __, s__ } from '~/locale';
@@ -91,7 +91,7 @@ export default {
     },
     onError(error) {
       const { message } = error;
-      createFlash({ message });
+      createAlert({ message });
 
       this.reportToSentry(error);
     },

app/assets/javascripts/runner/components/runner_update_form.vue

@@ -11,7 +11,7 @@ import {
   modelToUpdateMutationVariables,
   runnerToModel,
 } from 'ee_else_ce/runner/runner_details/runner_update_form_utils';
-import createFlash, { FLASH_TYPES } from '~/flash';
+import { createAlert, VARIANT_SUCCESS } from '~/flash';
 import { __ } from '~/locale';
 import { captureException } from '~/runner/sentry_utils';
 import { ACCESS_LEVEL_NOT_PROTECTED, ACCESS_LEVEL_REF_PROTECTED, PROJECT_TYPE } from '../constants';
@@ -75,14 +75,14 @@ export default {
 
         if (errors?.length) {
           // Validation errors need not be thrown
-          createFlash({ message: errors[0] });
+          createAlert({ message: errors[0] });
           return;
         }
 
         this.onSuccess();
       } catch (error) {
         const { message } = error;
-        createFlash({ message });
+        createAlert({ message });
 
         this.reportToSentry(error);
       } finally {
@@ -90,7 +90,7 @@ export default {
       }
     },
     onSuccess() {
-      createFlash({ message: __('Changes saved.'), type: FLASH_TYPES.SUCCESS });
+      createAlert({ message: __('Changes saved.'), variant: VARIANT_SUCCESS });
       this.model = runnerToModel(this.runner);
     },
     reportToSentry(error) {

app/assets/javascripts/runner/components/search_tokens/tag_token.vue

 <script>
 import { GlFilteredSearchSuggestion, GlToken } from '@gitlab/ui';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { s__ } from '~/locale';
 
@@ -50,7 +50,7 @@ export default {
       try {
         this.tags = await this.getTagsOptions(searchTerm);
       } catch {
-        createFlash({
+        createAlert({
           message: s__('Runners|Something went wrong while fetching the tags suggestions'),
         });
       } finally {

app/assets/javascripts/runner/group_runners/group_runners_app.vue

 <script>
 import { GlLink } from '@gitlab/ui';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { fetchPolicies } from '~/lib/graphql';
 import { updateHistory } from '~/lib/utils/url_utility';
 import { formatNumber, sprintf, s__ } from '~/locale';
@@ -84,7 +84,7 @@ export default {
         };
       },
       error(error) {
-        createFlash({ message: I18N_FETCH_ERROR });
+        createAlert({ message: I18N_FETCH_ERROR });
 
         this.reportToSentry(error);
       },

app/assets/javascripts/runner/runner_details/runner_details_app.vue

 <script>
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { TYPE_CI_RUNNER } from '~/graphql_shared/constants';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
 import RunnerHeader from '../components/runner_header.vue';
@@ -34,7 +34,7 @@ export default {
         };
       },
       error(error) {
-        createFlash({ message: I18N_FETCH_ERROR });
+        createAlert({ message: I18N_FETCH_ERROR });
 
         this.reportToSentry(error);
       },

ee/spec/frontend/runner/components/runner_update_form_spec.js

@@ -5,7 +5,7 @@ import createMockApollo from 'helpers/mock_apollo_helper';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { runnerData } from 'jest/runner/mock_data';
-import createFlash, { FLASH_TYPES } from '~/flash';
+import { createAlert, VARIANT_SUCCESS } from '~/flash';
 import RunnerUpdateForm from '~/runner/components/runner_update_form.vue';
 import runnerUpdateMutation from '~/runner/graphql/runner_update.mutation.graphql';
 
@@ -53,9 +53,9 @@ describe('RunnerUpdateForm', () => {
       input: expect.objectContaining(submittedRunner),
     });
 
-    expect(createFlash).toHaveBeenLastCalledWith({
+    expect(createAlert).toHaveBeenLastCalledWith({
       message: expect.stringContaining('saved'),
-      type: FLASH_TYPES.SUCCESS,
+      variant: VARIANT_SUCCESS,
     });
 
     expect(findSubmitDisabledAttr()).toBeUndefined();

spec/frontend/runner/components/cells/runner_actions_cell_spec.js

@@ -4,7 +4,7 @@ import createMockApollo from 'helpers/mock_apollo_helper';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 
 import { captureException } from '~/runner/sentry_utils';
@@ -200,7 +200,7 @@ describe('RunnerTypeCell', () => {
           });
 
           it('error is shown to the user', () => {
-            expect(createFlash).toHaveBeenCalledTimes(1);
+            expect(createAlert).toHaveBeenCalledTimes(1);
           });
         });
 
@@ -229,7 +229,7 @@ describe('RunnerTypeCell', () => {
           });
 
           it('error is shown to the user', () => {
-            expect(createFlash).toHaveBeenCalledTimes(1);
+            expect(createAlert).toHaveBeenCalledTimes(1);
           });
         });
       });
@@ -350,7 +350,7 @@ describe('RunnerTypeCell', () => {
         });
 
         it('error is shown to the user', () => {
-          expect(createFlash).toHaveBeenCalledTimes(1);
+          expect(createAlert).toHaveBeenCalledTimes(1);
         });
 
         it('toast notification is not shown', () => {
@@ -382,7 +382,7 @@ describe('RunnerTypeCell', () => {
         });
 
         it('error is shown to the user', () => {
-          expect(createFlash).toHaveBeenCalledTimes(1);
+          expect(createAlert).toHaveBeenCalledTimes(1);
         });
       });
     });

spec/frontend/runner/components/registration/registration_token_reset_dropdown_item_spec.js

@@ -4,7 +4,7 @@ import { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import RegistrationTokenResetDropdownItem from '~/runner/components/registration/registration_token_reset_dropdown_item.vue';
 import { INSTANCE_TYPE, GROUP_TYPE, PROJECT_TYPE } from '~/runner/constants';
 import runnersRegistrationTokenResetMutation from '~/runner/graphql/runners_registration_token_reset.mutation.graphql';
@@ -146,7 +146,7 @@ describe('RegistrationTokenResetDropdownItem', () => {
       findDropdownItem().trigger('click');
       await waitForPromises();
 
-      expect(createFlash).toHaveBeenLastCalledWith({
+      expect(createAlert).toHaveBeenLastCalledWith({
         message: `Network error: ${mockErrorMsg}`,
       });
       expect(captureException).toHaveBeenCalledWith({
@@ -172,7 +172,7 @@ describe('RegistrationTokenResetDropdownItem', () => {
       findDropdownItem().trigger('click');
       await waitForPromises();
 
-      expect(createFlash).toHaveBeenLastCalledWith({
+      expect(createAlert).toHaveBeenLastCalledWith({
         message: `${mockErrorMsg} ${mockErrorMsg2}`,
       });
       expect(captureException).toHaveBeenCalledWith({

spec/frontend/runner/components/runner_update_form_spec.js

@@ -5,7 +5,7 @@ import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import createFlash, { FLASH_TYPES } from '~/flash';
+import { createAlert, VARIANT_SUCCESS } from '~/flash';
 import RunnerUpdateForm from '~/runner/components/runner_update_form.vue';
 import {
   INSTANCE_TYPE,
@@ -79,9 +79,9 @@ describe('RunnerUpdateForm', () => {
       input: expect.objectContaining(submittedRunner),
     });
 
-    expect(createFlash).toHaveBeenLastCalledWith({
+    expect(createAlert).toHaveBeenLastCalledWith({
       message: expect.stringContaining('saved'),
-      type: FLASH_TYPES.SUCCESS,
+      variant: VARIANT_SUCCESS,
     });
 
     expect(findSubmitDisabledAttr()).toBeUndefined();
@@ -238,7 +238,7 @@ describe('RunnerUpdateForm', () => {
 
       await submitFormAndWait();
 
-      expect(createFlash).toHaveBeenLastCalledWith({
+      expect(createAlert).toHaveBeenLastCalledWith({
         message: `Network error: ${mockErrorMsg}`,
       });
       expect(captureException).toHaveBeenCalledWith({
@@ -262,7 +262,7 @@ describe('RunnerUpdateForm', () => {
 
       await submitFormAndWait();
 
-      expect(createFlash).toHaveBeenLastCalledWith({
+      expect(createAlert).toHaveBeenLastCalledWith({
         message: mockErrorMsg,
       });
       expect(captureException).not.toHaveBeenCalled();

spec/frontend/runner/components/search_tokens/tag_token_spec.js

@@ -3,7 +3,7 @@ import { mount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import { nextTick } from 'vue';
 import waitForPromises from 'helpers/wait_for_promises';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 
 import TagToken, { TAG_SUGGESTIONS_PATH } from '~/runner/components/search_tokens/tag_token.vue';
@@ -168,8 +168,8 @@ describe('TagToken', () => {
     });
 
     it('error is shown', async () => {
-      expect(createFlash).toHaveBeenCalledTimes(1);
-      expect(createFlash).toHaveBeenCalledWith({ message: expect.any(String) });
+      expect(createAlert).toHaveBeenCalledTimes(1);
+      expect(createAlert).toHaveBeenCalledWith({ message: expect.any(String) });
     });
   });
 

spec/frontend/runner/group_runners/group_runners_app_spec.js

@@ -6,7 +6,7 @@ import createMockApollo from 'helpers/mock_apollo_helper';
 import setWindowLocation from 'helpers/set_window_location_helper';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { updateHistory } from '~/lib/utils/url_utility';
 
@@ -236,7 +236,7 @@ describe('GroupRunnersApp', () => {
     });
 
     it('error is shown to the user', async () => {
-      expect(createFlash).toHaveBeenCalledTimes(1);
+      expect(createAlert).toHaveBeenCalledTimes(1);
     });
 
     it('error is reported to sentry', async () => {

spec/frontend/runner/runner_detail/runner_details_app_spec.js

@@ -2,7 +2,7 @@ import { createLocalVue, mount, shallowMount } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import RunnerHeader from '~/runner/components/runner_header.vue';
@@ -82,7 +82,7 @@ describe('RunnerDetailsApp', () => {
     });
 
     it('error is shown to the user', () => {
-      expect(createFlash).toHaveBeenCalled();
+      expect(createAlert).toHaveBeenCalled();
     });
   });
 });