Merge branch 'winh-epic-tree-remove-action-type' into 'master'

Remove ActionType constants from epic tree frontend

See merge request gitlab-org/gitlab!17971

ee/app/assets/javascripts/related_items_tree/components/related_items_tree_header.vue

@@ -8,11 +8,10 @@ import { sprintf, s__ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 import DroplabDropdownButton from '~/vue_shared/components/droplab_dropdown_button.vue';
 
-import { EpicDropdownActions, ActionType } from '../constants';
+import { EpicDropdownActions } from '../constants';
 
 export default {
   EpicDropdownActions,
-  ActionType,
   components: {
     Icon,
     GlButton,
@@ -33,10 +32,10 @@ export default {
   },
   methods: {
     ...mapActions(['toggleAddItemForm', 'toggleCreateEpicForm']),
-    handleActionClick({ id, actionType }) {
+    handleActionClick({ id, issuableType }) {
       if (id === 0) {
         this.toggleAddItemForm({
-          actionType,
+          issuableType,
           toggleState: true,
         });
       } else {
@@ -80,7 +79,7 @@ export default {
           :class="headerItems[1].qaClass"
           class="ml-1 js-add-issues-button"
           size="sm"
-          @click="handleActionClick({ id: 0, actionType: 'issue' })"
+          @click="handleActionClick({ id: 0, issuableType: 'issue' })"
           >{{ __('Add an issue') }}</gl-button
         >
       </template>

ee/app/assets/javascripts/related_items_tree/constants.js

 import { s__ } from '~/locale';
+import { issuableTypesMap } from 'ee/related_issues/constants';
 
 export const ChildType = {
   // eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings
@@ -17,11 +18,6 @@ export const PathIdSeparator = {
   Issue: '#',
 };
 
-export const ActionType = {
-  Epic: 'epic',
-  Issue: 'issue',
-};
-
 export const idProp = {
   Epic: 'id',
   Issue: 'epicIssueId',
@@ -50,13 +46,13 @@ export const RemoveItemModalProps = {
 export const EpicDropdownActions = [
   {
     id: 0,
-    actionType: ActionType.Epic,
+    issuableType: issuableTypesMap.EPIC,
     title: s__('Epics|Add an epic'),
     description: s__('Epics|Add an existing epic as a child epic.'),
   },
   {
     id: 1,
-    actionType: ActionType.Epic,
+    issuableType: issuableTypesMap.EPIC,
     title: s__('Epics|Create new epic'),
     description: s__('Epics|Create an epic within this group and add it as a child epic.'),
   },

ee/app/assets/javascripts/related_items_tree/store/actions.js

@@ -7,12 +7,13 @@ import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 
 import {
   addRelatedIssueErrorMap,
+  issuableTypesMap,
   pathIndeterminateErrorMap,
   relatedIssuesRemoveErrorMap,
 } from 'ee/related_issues/constants';
 
 import { processQueryResponse, formatChildItem, gqClient } from '../utils/epic_utils';
-import { ActionType, ChildType, ChildState } from '../constants';
+import { ChildType, ChildState } from '../constants';
 
 import epicChildren from '../queries/epicChildren.query.graphql';
 import epicChildReorder from '../queries/epicChildReorder.mutation.graphql';
@@ -214,10 +215,11 @@ export const receiveRemoveItemSuccess = ({ commit }, data) =>
   commit(types.RECEIVE_REMOVE_ITEM_SUCCESS, data);
 export const receiveRemoveItemFailure = ({ commit }, { item, status }) => {
   commit(types.RECEIVE_REMOVE_ITEM_FAILURE, item);
+  const issuableType = issuableTypesMap[item.type.toUpperCase()];
   flash(
     status === httpStatusCodes.NOT_FOUND
-      ? pathIndeterminateErrorMap[ActionType[item.type]]
-      : relatedIssuesRemoveErrorMap[ActionType[item.type]],
+      ? pathIndeterminateErrorMap[issuableType]
+      : relatedIssuesRemoveErrorMap[issuableType],
   );
 };
 export const removeItem = ({ dispatch }, { parentItem, item }) => {
@@ -256,7 +258,7 @@ export const removePendingReference = ({ commit }, data) =>
 export const setItemInputValue = ({ commit }, data) => commit(types.SET_ITEM_INPUT_VALUE, data);
 
 export const requestAddItem = ({ commit }) => commit(types.REQUEST_ADD_ITEM);
-export const receiveAddItemSuccess = ({ dispatch, commit, getters, state }, { rawItems }) => {
+export const receiveAddItemSuccess = ({ dispatch, commit, getters }, { rawItems }) => {
   const items = rawItems.map(item =>
     formatChildItem({
       ...convertObjectPropsToCamelCase(item, { deep: !getters.isEpic }),
@@ -279,15 +281,12 @@ export const receiveAddItemSuccess = ({ dispatch, commit, getters, state }, { ra
 
   dispatch('setPendingReferences', []);
   dispatch('setItemInputValue', '');
-  dispatch('toggleAddItemForm', {
-    actionType: state.actionType,
-    toggleState: false,
-  });
+  dispatch('toggleAddItemForm', { toggleState: false });
 };
 export const receiveAddItemFailure = ({ commit, state }, data = {}) => {
   commit(types.RECEIVE_ADD_ITEM_FAILURE);
 
-  let errorMessage = addRelatedIssueErrorMap[state.actionType];
+  let errorMessage = addRelatedIssueErrorMap[state.issuableType];
   if (data.message) {
     errorMessage = data.message;
   }
@@ -336,10 +335,7 @@ export const receiveCreateItemSuccess = ({ state, commit, dispatch, getters }, {
     isSubItem: false,
   });
 
-  dispatch('toggleCreateEpicForm', {
-    actionType: state.actionType,
-    toggleState: false,
-  });
+  dispatch('toggleCreateEpicForm', { toggleState: false });
 };
 export const receiveCreateItemFailure = ({ commit }) => {
   commit(types.RECEIVE_CREATE_ITEM_FAILURE);

ee/app/assets/javascripts/related_items_tree/store/getters.js

 import { issuableTypesMap } from 'ee/related_issues/constants';
-import { ChildType, ActionType, PathIdSeparator } from '../constants';
+import { ChildType, PathIdSeparator } from '../constants';
 
 export const autoCompleteSources = () => gl.GfmAutoComplete && gl.GfmAutoComplete.dataSources;
 
@@ -33,22 +33,10 @@ export const itemAutoCompleteSources = (state, getters) => {
   return state.autoCompleteIssues ? getters.autoCompleteSources : {};
 };
 
-export const issuableType = state => {
-  if (state.actionType === ActionType.Epic) {
-    return issuableTypesMap.EPIC;
-  }
-
-  if (state.actionType === ActionType.Issue) {
-    return issuableTypesMap.ISSUE;
-  }
-
-  return null;
-};
-
 export const itemPathIdSeparator = (state, getters) =>
   getters.isEpic ? PathIdSeparator.Epic : PathIdSeparator.Issue;
 
-export const isEpic = state => state.actionType === ActionType.Epic;
+export const isEpic = state => state.issuableType === issuableTypesMap.EPIC;
 
 // prevent babel-plugin-rewire from generating an invalid default during karma tests
 export default () => {};

ee/app/assets/javascripts/related_items_tree/store/mutations.js

@@ -120,10 +120,11 @@ export default {
     state.childrenFlags[item.reference].itemRemoveInProgress = false;
   },
 
-  [types.TOGGLE_ADD_ITEM_FORM](state, { actionType, toggleState }) {
-    if (actionType) {
-      state.actionType = actionType;
+  [types.TOGGLE_ADD_ITEM_FORM](state, { issuableType, toggleState }) {
+    if (issuableType) {
+      state.issuableType = issuableType;
     }
+
     state.showAddItemForm = toggleState;
     state.showCreateEpicForm = false;
   },

ee/app/assets/javascripts/related_items_tree/store/state.js

@@ -10,7 +10,7 @@ export default () => ({
   issuesCount: 0,
 
   // Add Item Form Data
-  actionType: '',
+  issuableType: null,
   itemInputValue: '',
   pendingReferences: [],
   itemAutoCompleteSources: {},

ee/spec/frontend/related_items_tree/store/getters_spec.js

@@ -3,7 +3,7 @@ import * as getters from 'ee/related_items_tree/store/getters';
 import createDefaultState from 'ee/related_items_tree/store/state';
 
 import { issuableTypesMap } from 'ee/related_issues/constants';
-import { ChildType, ActionType } from 'ee/related_items_tree/constants';
+import { ChildType } from 'ee/related_items_tree/constants';
 
 import {
   mockEpic1,
@@ -110,12 +110,12 @@ describe('RelatedItemsTree', () => {
       });
 
       describe('itemAutoCompleteSources', () => {
-        it('returns autoCompleteSources value when `actionType` is set to `Epic` and `autoCompleteEpics` is true', () => {
+        it('returns autoCompleteSources value when `issuableType` is set to `Epic` and `autoCompleteEpics` is true', () => {
           const mockGetter = {
             autoCompleteSources: 'foo',
             isEpic: true,
           };
-          state.actionType = ActionType.Epic;
+          state.issuableType = issuableTypesMap.Epic;
           state.autoCompleteEpics = true;
 
           expect(getters.itemAutoCompleteSources(state, mockGetter)).toBe('foo');
@@ -127,11 +127,11 @@ describe('RelatedItemsTree', () => {
           );
         });
 
-        it('returns autoCompleteSources value when `actionType` is set to `Issues` and `autoCompleteIssues` is true', () => {
+        it('returns autoCompleteSources value when `issuableType` is set to `Issue` and `autoCompleteIssues` is true', () => {
           const mockGetter = {
             autoCompleteSources: 'foo',
           };
-          state.actionType = ActionType.Issue;
+          state.issuableType = issuableTypesMap.Issue;
           state.autoCompleteIssues = true;
 
           expect(getters.itemAutoCompleteSources(state, mockGetter)).toBe('foo');
@@ -144,17 +144,6 @@ describe('RelatedItemsTree', () => {
         });
       });
 
-      describe('issuableType', () => {
-        it.each`
-          actionType          | expectedValue
-          ${null}             | ${null}
-          ${ActionType.Epic}  | ${issuableTypesMap.EPIC}
-          ${ActionType.Issue} | ${issuableTypesMap.ISSUE}
-        `('for $actionType returns $expectedValue', ({ actionType, expectedValue }) => {
-          expect(getters.issuableType({ actionType })).toBe(expectedValue);
-        });
-      });
-
       describe('itemPathIdSeparator', () => {
         it('returns string containing pathIdSeparator for `Epic`  when isEpic is truee', () => {
           expect(getters.itemPathIdSeparator({}, { isEpic: true })).toBe('&');
@@ -167,13 +156,16 @@ describe('RelatedItemsTree', () => {
 
       describe('isEpic', () => {
         it.each`
-          actionType          | expectedValue
-          ${null}             | ${false}
-          ${ActionType.Issue} | ${false}
-          ${ActionType.Epic}  | ${true}
-        `('for actionType = $actionType is $expectedValue', ({ actionType, expectedValue }) => {
-          expect(getters.isEpic({ actionType })).toBe(expectedValue);
-        });
+          issuableType              | expectedValue
+          ${null}                   | ${false}
+          ${issuableTypesMap.ISSUE} | ${false}
+          ${issuableTypesMap.EPIC}  | ${true}
+        `(
+          'for issuableType = issuableType is $expectedValue',
+          ({ issuableType, expectedValue }) => {
+            expect(getters.isEpic({ issuableType })).toBe(expectedValue);
+          },
+        );
       });
     });
   });

ee/spec/frontend/related_items_tree/store/mutations_spec.js

@@ -364,15 +364,15 @@ describe('RelatedItemsTree', () => {
       });
 
       describe(types.TOGGLE_ADD_ITEM_FORM, () => {
-        it('should set value of `actionType`, `showAddItemForm` as it is and `showCreateEpicForm` as false on state', () => {
+        it('should set value of `issuableType`, `showAddItemForm` as it is and `showCreateEpicForm` as false on state', () => {
           const data = {
-            actionType: 'Epic',
+            issuableType: 'Epic',
             toggleState: true,
           };
 
           mutations[types.TOGGLE_ADD_ITEM_FORM](state, data);
 
-          expect(state.actionType).toBe(data.actionType);
+          expect(state.issuableType).toBe(data.issuableType);
           expect(state.showAddItemForm).toBe(data.toggleState);
           expect(state.showCreateEpicForm).toBe(false);
         });

ee/spec/javascripts/related_items_tree/components/related_items_tree_app_spec.js

@@ -4,7 +4,7 @@ import { GlLoadingIcon } from '@gitlab/ui';
 import RelatedItemsTreeApp from 'ee/related_items_tree/components/related_items_tree_app.vue';
 import RelatedItemsTreeHeader from 'ee/related_items_tree/components/related_items_tree_header.vue';
 import createDefaultStore from 'ee/related_items_tree/store';
-import { ActionType } from 'ee/related_items_tree/constants';
+import { issuableTypesMap } from 'ee/related_issues/constants';
 
 import { mockInitialConfig, mockParentItem } from '../mock_data';
 
@@ -119,7 +119,7 @@ describe('RelatedItemsTreeApp', () => {
     });
 
     describe('handleAddItemFormCancel', () => {
-      it('calls `toggleAddItemForm` actions with params `toggleState` as true and `actionType` as `ActionType.Epic`', () => {
+      it('calls `toggleAddItemForm` actions with params `toggleState` as `false`', () => {
         spyOn(wrapper.vm, 'toggleAddItemForm');
 
         wrapper.vm.handleAddItemFormCancel();
@@ -145,10 +145,12 @@ describe('RelatedItemsTreeApp', () => {
     });
 
     describe('handleCreateEpicFormCancel', () => {
-      it('calls `toggleCreateEpicForm` actions with params `toggleState` and `actionType`', () => {
+      it('calls `toggleCreateEpicForm` actions with params `toggleState`', () => {
         spyOn(wrapper.vm, 'toggleCreateEpicForm');
 
         wrapper.vm.handleCreateEpicFormCancel();
+
+        expect(wrapper.vm.toggleCreateEpicForm).toHaveBeenCalledWith({ toggleState: false });
       });
 
       it('calls `setItemInputValue` action with empty string', () => {
@@ -208,7 +210,7 @@ describe('RelatedItemsTreeApp', () => {
     it('renders item add/create form container element', done => {
       wrapper.vm.$store.dispatch('toggleAddItemForm', {
         toggleState: true,
-        actionType: ActionType.Epic,
+        issuableType: issuableTypesMap.Epic,
       });
 
       wrapper.vm.$nextTick(() => {

ee/spec/javascripts/related_items_tree/components/related_items_tree_header_spec.js

@@ -6,7 +6,7 @@ import Icon from '~/vue_shared/components/icon.vue';
 import DroplabDropdownButton from '~/vue_shared/components/droplab_dropdown_button.vue';
 import createDefaultStore from 'ee/related_items_tree/store';
 import * as epicUtils from 'ee/related_items_tree/utils/epic_utils';
-import { ActionType } from 'ee/related_items_tree/constants';
+import { issuableTypesMap } from 'ee/related_issues/constants';
 
 import { mockParentItem, mockQueryResponse } from '../mock_data';
 
@@ -54,18 +54,18 @@ describe('RelatedItemsTree', () => {
 
     describe('methods', () => {
       describe('handleActionClick', () => {
-        const actionType = ActionType.Epic;
+        const issuableType = issuableTypesMap.Epic;
 
         it('calls `toggleAddItemForm` action when provided `id` param as value `0`', () => {
           spyOn(wrapper.vm, 'toggleAddItemForm');
 
           wrapper.vm.handleActionClick({
             id: 0,
-            actionType,
+            issuableType,
           });
 
           expect(wrapper.vm.toggleAddItemForm).toHaveBeenCalledWith({
-            actionType,
+            issuableType,
             toggleState: true,
           });
         });

ee/spec/javascripts/related_items_tree/store/actions_spec.js

@@ -5,12 +5,8 @@ import * as actions from 'ee/related_items_tree/store/actions';
 import * as types from 'ee/related_items_tree/store/mutation_types';
 
 import * as epicUtils from 'ee/related_items_tree/utils/epic_utils';
-import {
-  ChildType,
-  ChildState,
-  ActionType,
-  PathIdSeparator,
-} from 'ee/related_items_tree/constants';
+import { ChildType, ChildState, PathIdSeparator } from 'ee/related_items_tree/constants';
+import { issuableTypesMap } from 'ee/related_issues/constants';
 
 import axios from '~/lib/utils/axios_utils';
 import testAction from 'spec/helpers/vuex_action_helper';
@@ -806,7 +802,7 @@ describe('RelatedItemTree', () => {
       describe('receiveAddItemSuccess', () => {
         it('should set `state.itemAddInProgress` to false and dispatches actions `setPendingReferences`, `setItemInputValue` and `toggleAddItemForm`', done => {
           state.epicsBeginAtIndex = 0;
-          state.actionType = ActionType.Epic;
+          state.issuableType = issuableTypesMap.EPIC;
           state.isEpic = true;
 
           const mockEpicsWithoutPerm = mockEpics.map(item =>
@@ -848,7 +844,7 @@ describe('RelatedItemTree', () => {
               },
               {
                 type: 'toggleAddItemForm',
-                payload: { actionType: ActionType.Epic, toggleState: false },
+                payload: { toggleState: false },
               },
             ],
             done,
@@ -881,7 +877,7 @@ describe('RelatedItemTree', () => {
           actions.receiveAddItemFailure(
             {
               commit: () => {},
-              state: { actionType: ActionType.Epic },
+              state: { issuableType: issuableTypesMap.EPIC },
             },
             {
               message,
@@ -906,7 +902,7 @@ describe('RelatedItemTree', () => {
         });
 
         it('should dispatch `requestAddItem` and `receiveAddItemSuccess` actions on request success', done => {
-          state.actionType = ActionType.Epic;
+          state.issuableType = issuableTypesMap.EPIC;
           state.epicsEndpoint = '/foo/bar';
           state.pendingReferences = ['foo'];
           state.isEpic = true;
@@ -932,7 +928,7 @@ describe('RelatedItemTree', () => {
         });
 
         it('should dispatch `requestAddItem` and `receiveAddItemFailure` actions on request failure', done => {
-          state.actionType = ActionType.Epic;
+          state.issuableType = issuableTypesMap.EPIC;
           state.epicsEndpoint = '/foo/bar';
           state.pendingReferences = ['foo'];
 
@@ -980,7 +976,7 @@ describe('RelatedItemTree', () => {
           state.parentItem = {
             fullPath: createdEpic.group.fullPath,
           };
-          state.actionType = ActionType.Epic;
+          state.issuableType = issuableTypesMap.EPIC;
           state.isEpic = true;
 
           testAction(
@@ -1004,7 +1000,7 @@ describe('RelatedItemTree', () => {
               },
               {
                 type: 'toggleCreateEpicForm',
-                payload: { actionType: ActionType.Epic, toggleState: false },
+                payload: { toggleState: false },
               },
             ],
             done,
@@ -1033,7 +1029,7 @@ describe('RelatedItemTree', () => {
           actions.receiveCreateItemFailure(
             {
               commit: () => {},
-              state: { actionType: ActionType.Epic },
+              state: {},
             },
             {
               message,
@@ -1052,7 +1048,7 @@ describe('RelatedItemTree', () => {
         beforeEach(() => {
           mock = new MockAdapter(axios);
           state.parentItem = mockParentItem;
-          state.actionType = ActionType.Epic;
+          state.issuableType = issuableTypesMap.EPIC;
         });
 
         afterEach(() => {