Merge branch '3895-mlunoe-migrate-away-from-deprecated-create-flash-2' into 'master'

Refactor(createFlash): use non-deprecated function

See merge request gitlab-org/gitlab!63143

app/assets/javascripts/api.js

-import { deprecatedCreateFlash as flash } from '~/flash';
+import createFlash from '~/flash';
 import { __ } from '~/locale';
 import axios from './lib/utils/axios_utils';
 import { joinPaths } from './lib/utils/url_utility';
@@ -454,7 +454,9 @@ const Api = {
       })
       .then(({ data }) => (callback ? callback(data) : data))
       .catch(() => {
-        flash(__('Something went wrong while fetching projects'));
+        createFlash({
+          message: __('Something went wrong while fetching projects'),
+        });
         if (callback) {
           callback();
         }
@@ -642,7 +644,11 @@ const Api = {
         params: { ...defaults, ...options },
       })
       .then(({ data }) => callback(data))
-      .catch(() => flash(__('Something went wrong while fetching projects')));
+      .catch(() =>
+        createFlash({
+          message: __('Something went wrong while fetching projects'),
+        }),
+      );
   },
 
   branches(id, query = '', options = {}) {

app/assets/javascripts/search/store/actions.js

@@ -29,6 +29,7 @@ export const fetchProjects = ({ commit, state }, search) => {
   };
 
   if (groupId) {
+    // TODO (https://gitlab.com/gitlab-org/gitlab/-/issues/323331): For errors `createFlash` is called twice; in `callback` and in `Api.groupProjects`
     Api.groupProjects(groupId, search, {}, callback);
   } else {
     // The .catch() is due to the API method not handling a rejection properly

spec/frontend/boards/project_select_deprecated_spec.js

@@ -5,7 +5,7 @@ import AxiosMockAdapter from 'axios-mock-adapter';
 import ProjectSelect from '~/boards/components/project_select_deprecated.vue';
 import { ListType } from '~/boards/constants';
 import eventHub from '~/boards/eventhub';
-import { deprecatedCreateFlash as flash } from '~/flash';
+import createFlash from '~/flash';
 import httpStatus from '~/lib/utils/http_status';
 import { featureAccessLevel } from '~/pages/projects/shared/permissions/constants';
 
@@ -237,8 +237,10 @@ describe('ProjectSelect component', () => {
 
         await searchForProject('foobar');
 
-        expect(flash).toHaveBeenCalledTimes(1);
-        expect(flash).toHaveBeenCalledWith('Something went wrong while fetching projects');
+        expect(createFlash).toHaveBeenCalledTimes(1);
+        expect(createFlash).toHaveBeenCalledWith({
+          message: 'Something went wrong while fetching projects',
+        });
       });
 
       describe('with non-empty search result', () => {

spec/frontend/search/store/actions_spec.js

@@ -20,9 +20,8 @@ describe('Global Search Store Actions', () => {
   let mock;
   let state;
 
-  const noCallback = () => {};
-  const flashCallback = () => {
-    expect(createFlash).toHaveBeenCalledTimes(1);
+  const flashCallback = (callCount) => {
+    expect(createFlash).toHaveBeenCalledTimes(callCount);
     createFlash.mockClear();
   };
 
@@ -37,19 +36,21 @@ describe('Global Search Store Actions', () => {
   });
 
   describe.each`
-    action                   | axiosMock                                             | type         | expectedMutations                                                                                       | callback
-    ${actions.fetchGroups}   | ${{ method: 'onGet', code: 200, res: MOCK_GROUPS }}   | ${'success'} | ${[{ type: types.REQUEST_GROUPS }, { type: types.RECEIVE_GROUPS_SUCCESS, payload: MOCK_GROUPS }]}       | ${noCallback}
-    ${actions.fetchGroups}   | ${{ method: 'onGet', code: 500, res: null }}          | ${'error'}   | ${[{ type: types.REQUEST_GROUPS }, { type: types.RECEIVE_GROUPS_ERROR }]}                               | ${flashCallback}
-    ${actions.fetchProjects} | ${{ method: 'onGet', code: 200, res: MOCK_PROJECTS }} | ${'success'} | ${[{ type: types.REQUEST_PROJECTS }, { type: types.RECEIVE_PROJECTS_SUCCESS, payload: MOCK_PROJECTS }]} | ${noCallback}
-    ${actions.fetchProjects} | ${{ method: 'onGet', code: 500, res: null }}          | ${'error'}   | ${[{ type: types.REQUEST_PROJECTS }, { type: types.RECEIVE_PROJECTS_ERROR }]}                           | ${flashCallback}
-  `(`axios calls`, ({ action, axiosMock, type, expectedMutations, callback }) => {
+    action                   | axiosMock                                             | type         | expectedMutations                                                                                       | flashCallCount
+    ${actions.fetchGroups}   | ${{ method: 'onGet', code: 200, res: MOCK_GROUPS }}   | ${'success'} | ${[{ type: types.REQUEST_GROUPS }, { type: types.RECEIVE_GROUPS_SUCCESS, payload: MOCK_GROUPS }]}       | ${0}
+    ${actions.fetchGroups}   | ${{ method: 'onGet', code: 500, res: null }}          | ${'error'}   | ${[{ type: types.REQUEST_GROUPS }, { type: types.RECEIVE_GROUPS_ERROR }]}                               | ${1}
+    ${actions.fetchProjects} | ${{ method: 'onGet', code: 200, res: MOCK_PROJECTS }} | ${'success'} | ${[{ type: types.REQUEST_PROJECTS }, { type: types.RECEIVE_PROJECTS_SUCCESS, payload: MOCK_PROJECTS }]} | ${0}
+    ${actions.fetchProjects} | ${{ method: 'onGet', code: 500, res: null }}          | ${'error'}   | ${[{ type: types.REQUEST_PROJECTS }, { type: types.RECEIVE_PROJECTS_ERROR }]}                           | ${2}
+  `(`axios calls`, ({ action, axiosMock, type, expectedMutations, flashCallCount }) => {
     describe(action.name, () => {
       describe(`on ${type}`, () => {
         beforeEach(() => {
           mock[axiosMock.method]().replyOnce(axiosMock.code, axiosMock.res);
         });
         it(`should dispatch the correct mutations`, () => {
-          return testAction({ action, state, expectedMutations }).then(() => callback());
+          return testAction({ action, state, expectedMutations }).then(() =>
+            flashCallback(flashCallCount),
+          );
         });
       });
     });