Merge branch 'user-lists-new-store-vuex' into 'master'

Add Store for Creating a User List

See merge request gitlab-org/gitlab!37005

ee/app/assets/javascripts/user_lists/store/new/actions.js

+import Api from 'ee/api';
+import { redirectTo } from '~/lib/utils/url_utility';
+import { getErrorMessages } from '../utils';
+import * as types from './mutation_types';
+
+export const dismissErrorAlert = ({ commit }) => commit(types.DISMISS_ERROR_ALERT);
+
+export const createUserList = ({ commit, state }, userList) => {
+  return Api.createFeatureFlagUserList(state.projectId, {
+    ...state.userList,
+    ...userList,
+  })
+    .then(({ data }) => redirectTo(data.path))
+    .catch(response => commit(types.RECEIVE_CREATE_USER_LIST_ERROR, getErrorMessages(response)));
+};

ee/app/assets/javascripts/user_lists/store/new/index.js

+import Vuex from 'vuex';
+import createState from './state';
+import * as actions from './actions';
+import mutations from './mutations';
+
+export default initialState =>
+  new Vuex.Store({
+    actions,
+    mutations,
+    state: createState(initialState),
+  });

ee/app/assets/javascripts/user_lists/store/new/mutation_types.js

+export const RECEIVE_CREATE_USER_LIST_ERROR = 'RECEIVE_CREATE_USER_LIST_ERROR';
+
+export const DISMISS_ERROR_ALERT = 'DISMISS_ERROR_ALERT';

ee/app/assets/javascripts/user_lists/store/new/mutations.js

+import * as types from './mutation_types';
+
+export default {
+  [types.RECEIVE_CREATE_USER_LIST_ERROR](state, error) {
+    state.errorMessage = error;
+  },
+  [types.DISMISS_ERROR_ALERT](state) {
+    state.errorMessage = '';
+  },
+};

ee/app/assets/javascripts/user_lists/store/new/state.js

+export default ({ projectId = '' }) => ({
+  projectId,
+  userList: { name: '', user_xids: '' },
+  errorMessage: '',
+});

ee/app/assets/javascripts/user_lists/store/utils.js

 export const parseUserIds = userIds => userIds.split(/\s*,\s*/g);
 
 export const stringifyUserIds = userIds => userIds.join(',');
+
+export const getErrorMessages = error => [].concat(error?.response?.data?.message ?? error.message);

ee/spec/frontend/user_lists/store/new/actions_spec.js

+import Api from 'ee/api';
+import { redirectTo } from '~/lib/utils/url_utility';
+import createState from 'ee/user_lists/store/new/state';
+import * as types from 'ee/user_lists/store/new/mutation_types';
+import * as actions from 'ee/user_lists/store/new/actions';
+import testAction from 'helpers/vuex_action_helper';
+import { userList } from '../../../feature_flags/mock_data';
+
+jest.mock('ee/api');
+jest.mock('~/lib/utils/url_utility');
+
+describe('User Lists Edit Actions', () => {
+  let state;
+
+  beforeEach(() => {
+    state = createState({ projectId: '1' });
+  });
+
+  describe('dismissErrorAlert', () => {
+    it('should commit DISMISS_ERROR_ALERT', () => {
+      return testAction(actions.dismissErrorAlert, undefined, state, [
+        { type: types.DISMISS_ERROR_ALERT },
+      ]);
+    });
+  });
+
+  describe('createUserList', () => {
+    let createdList;
+
+    beforeEach(() => {
+      createdList = {
+        ...userList,
+        name: 'new',
+      };
+    });
+    describe('success', () => {
+      beforeEach(() => {
+        Api.createFeatureFlagUserList.mockResolvedValue({ data: userList });
+      });
+
+      it('should redirect to the user list page', () => {
+        return testAction(actions.createUserList, createdList, state, [], [], () => {
+          expect(Api.createFeatureFlagUserList).toHaveBeenCalledWith('1', createdList);
+          expect(redirectTo).toHaveBeenCalledWith(userList.path);
+        });
+      });
+    });
+
+    describe('error', () => {
+      let error;
+
+      beforeEach(() => {
+        error = { message: 'error' };
+        Api.createFeatureFlagUserList.mockRejectedValue(error);
+      });
+
+      it('should commit RECEIVE_USER_LIST_ERROR', () => {
+        return testAction(
+          actions.createUserList,
+          createdList,
+          state,
+          [{ type: types.RECEIVE_CREATE_USER_LIST_ERROR, payload: ['error'] }],
+          [],
+          () => expect(Api.createFeatureFlagUserList).toHaveBeenCalledWith('1', createdList),
+        );
+      });
+    });
+  });
+});

ee/spec/frontend/user_lists/store/new/mutations_spec.js

+import createState from 'ee/user_lists/store/new/state';
+import * as types from 'ee/user_lists/store/new/mutation_types';
+import mutations from 'ee/user_lists/store/new/mutations';
+
+describe('User List Edit Mutations', () => {
+  let state;
+
+  beforeEach(() => {
+    state = createState({ projectId: '1' });
+  });
+
+  describe(types.RECIEVE_USER_LIST_ERROR, () => {
+    beforeEach(() => {
+      mutations[types.RECEIVE_CREATE_USER_LIST_ERROR](state, ['network error']);
+    });
+
+    it('sets the error message to the recieved one', () => {
+      expect(state.errorMessage).toEqual(['network error']);
+    });
+
+    it('sets the error message to the recevied API message if present', () => {
+      const message = ['name is blank', 'name is too short'];
+
+      mutations[types.RECEIVE_CREATE_USER_LIST_ERROR](state, message);
+      expect(state.errorMessage).toEqual(message);
+    });
+  });
+
+  describe(types.DISMISS_ERROR_ALERT, () => {
+    beforeEach(() => {
+      mutations[types.DISMISS_ERROR_ALERT](state);
+    });
+
+    it('clears the error message', () => {
+      expect(state.errorMessage).toBe('');
+    });
+  });
+});