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

Add Vuex Store for Allowing Users to Edit User Lists

See merge request gitlab-org/gitlab!37006

ee/app/assets/javascripts/user_lists/constants/edit.js

+export default Object.freeze({
+  LOADING: 'LOADING',
+  SUCCESS: 'SUCCESS',
+  ERROR: 'ERROR',
+  UNSYNCED: 'UNSYNCED',
+});

ee/app/assets/javascripts/user_lists/store/edit/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 fetchUserList = ({ commit, state }) => {
+  commit(types.REQUEST_USER_LIST);
+  return Api.fetchFeatureFlagUserList(state.projectId, state.userListIid)
+    .then(({ data }) => commit(types.RECEIVE_USER_LIST_SUCCESS, data))
+    .catch(response => commit(types.RECEIVE_USER_LIST_ERROR, getErrorMessages(response)));
+};
+
+export const dismissErrorAlert = ({ commit }) => commit(types.DISMISS_ERROR_ALERT);
+
+export const updateUserList = ({ commit, state }, userList) => {
+  return Api.updateFeatureFlagUserList(state.projectId, {
+    ...state.userList,
+    ...userList,
+  })
+    .then(({ data }) => redirectTo(data.path))
+    .catch(response => commit(types.RECEIVE_USER_LIST_ERROR, getErrorMessages(response)));
+};

ee/app/assets/javascripts/user_lists/store/edit/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/edit/mutation_types.js

+export const REQUEST_USER_LIST = 'REQUEST_USER_LIST';
+export const RECEIVE_USER_LIST_SUCCESS = 'RECEIVE_USER_LIST_SUCCESS';
+export const RECEIVE_USER_LIST_ERROR = 'RECEIVE_USER_LIST_ERROR';
+
+export const DISMISS_ERROR_ALERT = 'DISMISS_ERROR_ALERT';

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

+import statuses from '../../constants/edit';
+import * as types from './mutation_types';
+
+export default {
+  [types.REQUEST_USER_LIST](state) {
+    state.status = statuses.LOADING;
+  },
+  [types.RECEIVE_USER_LIST_SUCCESS](state, userList) {
+    state.status = statuses.SUCCESS;
+    state.userList = userList;
+  },
+  [types.RECEIVE_USER_LIST_ERROR](state, error) {
+    state.status = statuses.ERROR;
+    state.errorMessage = error;
+  },
+  [types.DISMISS_ERROR_ALERT](state) {
+    state.status = statuses.UNSYNCED;
+  },
+};

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

+import statuses from '../../constants/edit';
+
+export default ({ projectId = '', userListIid = '' }) => ({
+  status: statuses.LOADING,
+  projectId,
+  userListIid,
+  userList: null,
+  errorMessage: '',
+});

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

+import Api from 'ee/api';
+import { redirectTo } from '~/lib/utils/url_utility';
+import createState from 'ee/user_lists/store/edit/state';
+import * as types from 'ee/user_lists/store/edit/mutation_types';
+import * as actions from 'ee/user_lists/store/edit/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', userListIid: '2' });
+  });
+
+  describe('fetchUserList', () => {
+    describe('success', () => {
+      beforeEach(() => {
+        Api.fetchFeatureFlagUserList.mockResolvedValue({ data: userList });
+      });
+
+      it('should commit RECEIVE_USER_LIST_SUCCESS', () => {
+        return testAction(
+          actions.fetchUserList,
+          undefined,
+          state,
+          [
+            { type: types.REQUEST_USER_LIST },
+            { type: types.RECEIVE_USER_LIST_SUCCESS, payload: userList },
+          ],
+          [],
+          () => expect(Api.fetchFeatureFlagUserList).toHaveBeenCalledWith('1', '2'),
+        );
+      });
+    });
+
+    describe('error', () => {
+      let error;
+      beforeEach(() => {
+        error = { response: { data: { message: ['error'] } } };
+        Api.fetchFeatureFlagUserList.mockRejectedValue(error);
+      });
+
+      it('should commit RECEIVE_USER_LIST_ERROR', () => {
+        return testAction(
+          actions.fetchUserList,
+          undefined,
+          state,
+          [
+            { type: types.REQUEST_USER_LIST },
+            { type: types.RECEIVE_USER_LIST_ERROR, payload: ['error'] },
+          ],
+          [],
+          () => expect(Api.fetchFeatureFlagUserList).toHaveBeenCalledWith('1', '2'),
+        );
+      });
+    });
+  });
+
+  describe('dismissErrorAlert', () => {
+    it('should commit DISMISS_ERROR_ALERT', () => {
+      return testAction(actions.dismissErrorAlert, undefined, state, [
+        { type: types.DISMISS_ERROR_ALERT },
+      ]);
+    });
+  });
+
+  describe('updateUserList', () => {
+    let updatedList;
+
+    beforeEach(() => {
+      updatedList = {
+        ...userList,
+        name: 'new',
+      };
+    });
+    describe('success', () => {
+      beforeEach(() => {
+        Api.updateFeatureFlagUserList.mockResolvedValue({ data: userList });
+        state.userList = userList;
+      });
+
+      it('should commit RECEIVE_USER_LIST_SUCCESS', () => {
+        return testAction(actions.updateUserList, updatedList, state, [], [], () => {
+          expect(Api.updateFeatureFlagUserList).toHaveBeenCalledWith('1', updatedList);
+          expect(redirectTo).toHaveBeenCalledWith(userList.path);
+        });
+      });
+    });
+
+    describe('error', () => {
+      let error;
+
+      beforeEach(() => {
+        error = { message: 'error' };
+        Api.updateFeatureFlagUserList.mockRejectedValue(error);
+      });
+
+      it('should commit RECEIVE_USER_LIST_ERROR', () => {
+        return testAction(
+          actions.updateUserList,
+          updatedList,
+          state,
+          [{ type: types.RECEIVE_USER_LIST_ERROR, payload: ['error'] }],
+          [],
+          () => expect(Api.updateFeatureFlagUserList).toHaveBeenCalledWith('1', updatedList),
+        );
+      });
+    });
+  });
+});

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

+import statuses from 'ee/user_lists/constants/edit';
+import createState from 'ee/user_lists/store/edit/state';
+import * as types from 'ee/user_lists/store/edit/mutation_types';
+import mutations from 'ee/user_lists/store/edit/mutations';
+import { userList } from '../../../feature_flags/mock_data';
+
+describe('User List Edit Mutations', () => {
+  let state;
+
+  beforeEach(() => {
+    state = createState({ projectId: '1', userListIid: '2' });
+  });
+
+  describe(types.REQUEST_USER_LIST, () => {
+    beforeEach(() => {
+      mutations[types.REQUEST_USER_LIST](state);
+    });
+
+    it('sets the state to loading', () => {
+      expect(state.status).toBe(statuses.LOADING);
+    });
+  });
+
+  describe(types.RECEIVE_USER_LIST_SUCCESS, () => {
+    beforeEach(() => {
+      mutations[types.RECEIVE_USER_LIST_SUCCESS](state, userList);
+    });
+
+    it('sets the state to success', () => {
+      expect(state.status).toBe(statuses.SUCCESS);
+    });
+
+    it('sets the user list to the one received', () => {
+      expect(state.userList).toEqual(userList);
+    });
+  });
+
+  describe(types.RECIEVE_USER_LIST_ERROR, () => {
+    beforeEach(() => {
+      mutations[types.RECEIVE_USER_LIST_ERROR](state, ['network error']);
+    });
+
+    it('sets the state to error', () => {
+      expect(state.status).toBe(statuses.ERROR);
+    });
+
+    it('sets the error message to the recieved one', () => {
+      expect(state.errorMessage).toEqual(['network error']);
+    });
+  });
+
+  describe(types.DISMISS_ERROR_ALERT, () => {
+    beforeEach(() => {
+      mutations[types.DISMISS_ERROR_ALERT](state);
+    });
+
+    it('sets the state to error dismissed', () => {
+      expect(state.status).toBe(statuses.UNSYNCED);
+    });
+  });
+});