Merge branch 'winh-rename-create-item-form' into 'master'

Rename CreateItemForm component to CreateEpicForm in epics tree

See merge request gitlab-org/gitlab!17249

ee/app/assets/javascripts/related_items_tree/components/create_item_form.vue → ee/app/assets/javascripts/related_items_tree/components/create_epic_form.vue

@@ -33,10 +33,10 @@ export default {
   },
   methods: {
     onFormSubmit() {
-      this.$emit('createItemFormSubmit', this.inputValue.trim());
+      this.$emit('createEpicFormSubmit', this.inputValue.trim());
     },
     onFormCancel() {
-      this.$emit('createItemFormCancel');
+      this.$emit('createEpicFormCancel');
     },
   },
 };

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

@@ -4,7 +4,7 @@ import { mapState, mapActions, mapGetters } from 'vuex';
 import { GlLoadingIcon } from '@gitlab/ui';
 
 import AddItemForm from 'ee/related_issues/components/add_issuable_form.vue';
-import CreateItemForm from './create_item_form.vue';
+import CreateEpicForm from './create_epic_form.vue';
 import TreeItemRemoveModal from './tree_item_remove_modal.vue';
 
 import RelatedItemsTreeHeader from './related_items_tree_header.vue';
@@ -21,7 +21,7 @@ export default {
     RelatedItemsTreeHeader,
     RelatedItemsTreeBody,
     AddItemForm,
-    CreateItemForm,
+    CreateEpicForm,
     TreeItemRemoveModal,
   },
   computed: {
@@ -32,7 +32,7 @@ export default {
       'itemAddInProgress',
       'itemCreateInProgress',
       'showAddItemForm',
-      'showCreateItemForm',
+      'showCreateEpicForm',
       'autoCompleteEpics',
       'autoCompleteIssues',
       'pendingReferences',
@@ -55,7 +55,7 @@ export default {
     ...mapActions([
       'fetchItems',
       'toggleAddItemForm',
-      'toggleCreateItemForm',
+      'toggleCreateEpicForm',
       'setPendingReferences',
       'addPendingReferences',
       'removePendingReference',
@@ -84,7 +84,7 @@ export default {
         this.addItem();
       }
     },
-    handleCreateItemFormSubmit(newValue) {
+    handleCreateEpicFormSubmit(newValue) {
       this.createItem({
         itemTitle: newValue,
       });
@@ -94,8 +94,8 @@ export default {
       this.setPendingReferences([]);
       this.setItemInputValue('');
     },
-    handleCreateItemFormCancel() {
-      this.toggleCreateItemForm({ toggleState: false, actionType: this.actionType });
+    handleCreateEpicFormCancel() {
+      this.toggleCreateEpicForm({ toggleState: false, actionType: this.actionType });
       this.setItemInputValue('');
     },
   },
@@ -117,7 +117,7 @@ export default {
     >
       <related-items-tree-header :class="{ 'border-bottom-0': itemsFetchResultEmpty }" />
       <div
-        v-if="showAddItemForm || showCreateItemForm"
+        v-if="showAddItemForm || showCreateEpicForm"
         class="card-body add-item-form-container"
         :class="{ 'border-bottom-0': itemsFetchResultEmpty }"
       >
@@ -135,11 +135,11 @@ export default {
           @addIssuableFormSubmit="handleAddItemFormSubmit"
           @addIssuableFormCancel="handleAddItemFormCancel"
         />
-        <create-item-form
-          v-if="showCreateItemForm"
+        <create-epic-form
+          v-if="showCreateEpicForm"
           :is-submitting="itemCreateInProgress"
-          @createItemFormSubmit="handleCreateItemFormSubmit"
-          @createItemFormCancel="handleCreateItemFormCancel"
+          @createEpicFormSubmit="handleCreateEpicFormSubmit"
+          @createEpicFormCancel="handleCreateEpicFormCancel"
         />
       </div>
       <related-items-tree-body

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

@@ -32,7 +32,7 @@ export default {
     },
   },
   methods: {
-    ...mapActions(['toggleAddItemForm', 'toggleCreateItemForm']),
+    ...mapActions(['toggleAddItemForm', 'toggleCreateEpicForm']),
     handleActionClick({ id, actionType }) {
       if (id === 0) {
         this.toggleAddItemForm({
@@ -40,7 +40,7 @@ export default {
           toggleState: true,
         });
       } else {
-        this.toggleCreateItemForm({
+        this.toggleCreateEpicForm({
           actionType,
           toggleState: true,
         });

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

@@ -244,8 +244,8 @@ export const removeItem = ({ dispatch }, { parentItem, item }) => {
 };
 
 export const toggleAddItemForm = ({ commit }, data) => commit(types.TOGGLE_ADD_ITEM_FORM, data);
-export const toggleCreateItemForm = ({ commit }, data) =>
-  commit(types.TOGGLE_CREATE_ITEM_FORM, data);
+export const toggleCreateEpicForm = ({ commit }, data) =>
+  commit(types.TOGGLE_CREATE_EPIC_FORM, data);
 
 export const setPendingReferences = ({ commit }, data) =>
   commit(types.SET_PENDING_REFERENCES, data);
@@ -342,7 +342,7 @@ export const receiveCreateItemSuccess = (
     isSubItem: false,
   });
 
-  dispatch('toggleCreateItemForm', {
+  dispatch('toggleCreateEpicForm', {
     actionType,
     toggleState: false,
   });

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

@@ -21,7 +21,7 @@ export const EXPAND_ITEM = 'EXPAND_ITEM';
 export const COLLAPSE_ITEM = 'COLLAPSE_ITEM';
 
 export const TOGGLE_ADD_ITEM_FORM = 'TOGGLE_ADD_ITEM_FORM';
-export const TOGGLE_CREATE_ITEM_FORM = 'TOGGLE_CREATE_ITEM_FORM';
+export const TOGGLE_CREATE_EPIC_FORM = 'TOGGLE_CREATE_EPIC_FORM';
 
 export const SET_PENDING_REFERENCES = 'SET_PENDING_REFERENCES';
 export const ADD_PENDING_REFERENCES = 'ADD_PENDING_REFERENCES';

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

@@ -123,12 +123,12 @@ export default {
   [types.TOGGLE_ADD_ITEM_FORM](state, { actionType, toggleState }) {
     state.actionType = actionType;
     state.showAddItemForm = toggleState;
-    state.showCreateItemForm = false;
+    state.showCreateEpicForm = false;
   },
 
-  [types.TOGGLE_CREATE_ITEM_FORM](state, { actionType, toggleState }) {
+  [types.TOGGLE_CREATE_EPIC_FORM](state, { actionType, toggleState }) {
     state.actionType = actionType;
-    state.showCreateItemForm = toggleState;
+    state.showCreateEpicForm = toggleState;
     state.showAddItemForm = false;
   },
 

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

@@ -22,7 +22,7 @@ export default () => ({
   itemAddInProgress: false,
   itemCreateInProgress: false,
   showAddItemForm: false,
-  showCreateItemForm: false,
+  showCreateEpicForm: false,
   autoCompleteEpics: false,
   autoCompleteIssues: false,
   removeItemModalProps: {

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

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

ee/spec/javascripts/related_items_tree/components/create_item_form_spec.js → ee/spec/javascripts/related_items_tree/components/create_epic_form_spec.js

 import { mount, createLocalVue } from '@vue/test-utils';
 import { GlButton } from '@gitlab/ui';
 
-import CreateItemForm from 'ee/related_items_tree/components/create_item_form.vue';
+import CreateEpicForm from 'ee/related_items_tree/components/create_epic_form.vue';
 
 const createComponent = (isSubmitting = false) => {
   const localVue = createLocalVue();
 
-  return mount(CreateItemForm, {
+  return mount(CreateEpicForm, {
     localVue,
     propsData: {
       isSubmitting,
@@ -15,7 +15,7 @@ const createComponent = (isSubmitting = false) => {
 };
 
 describe('RelatedItemsTree', () => {
-  describe('CreateItemForm', () => {
+  describe('CreateEpicForm', () => {
     let wrapper;
 
     beforeEach(() => {
@@ -68,22 +68,22 @@ describe('RelatedItemsTree', () => {
 
     describe('methods', () => {
       describe('onFormSubmit', () => {
-        it('emits `createItemFormSubmit` event on component with input value as param', () => {
+        it('emits `createEpicFormSubmit` event on component with input value as param', () => {
           const value = 'foo';
           wrapper.find('input.form-control').setValue(value);
 
           wrapper.vm.onFormSubmit();
 
-          expect(wrapper.emitted().createItemFormSubmit).toBeTruthy();
-          expect(wrapper.emitted().createItemFormSubmit[0]).toEqual([value]);
+          expect(wrapper.emitted().createEpicFormSubmit).toBeTruthy();
+          expect(wrapper.emitted().createEpicFormSubmit[0]).toEqual([value]);
         });
       });
 
       describe('onFormCancel', () => {
-        it('emits `createItemFormCancel` event on component', () => {
+        it('emits `createEpicFormCancel` event on component', () => {
           wrapper.vm.onFormCancel();
 
-          expect(wrapper.emitted().createItemFormCancel).toBeTruthy();
+          expect(wrapper.emitted().createEpicFormCancel).toBeTruthy();
         });
       });
     });

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

@@ -105,12 +105,12 @@ describe('RelatedItemsTreeApp', () => {
       });
     });
 
-    describe('handleCreateItemFormSubmit', () => {
+    describe('handleCreateEpicFormSubmit', () => {
       it('calls `createItem` action with `itemTitle` param', () => {
         const newValue = 'foo';
         spyOn(wrapper.vm, 'createItem');
 
-        wrapper.vm.handleCreateItemFormSubmit(newValue);
+        wrapper.vm.handleCreateEpicFormSubmit(newValue);
 
         expect(wrapper.vm.createItem).toHaveBeenCalledWith({
           itemTitle: newValue,
@@ -147,13 +147,13 @@ describe('RelatedItemsTreeApp', () => {
       });
     });
 
-    describe('handleCreateItemFormCancel', () => {
-      it('calls `toggleCreateItemForm` actions with params `toggleState` and `actionType`', () => {
-        spyOn(wrapper.vm, 'toggleCreateItemForm');
+    describe('handleCreateEpicFormCancel', () => {
+      it('calls `toggleCreateEpicForm` actions with params `toggleState` and `actionType`', () => {
+        spyOn(wrapper.vm, 'toggleCreateEpicForm');
 
-        wrapper.vm.handleCreateItemFormCancel();
+        wrapper.vm.handleCreateEpicFormCancel();
 
-        expect(wrapper.vm.toggleCreateItemForm).toHaveBeenCalledWith({
+        expect(wrapper.vm.toggleCreateEpicForm).toHaveBeenCalledWith({
           toggleState: false,
           actionType: '',
         });
@@ -162,7 +162,7 @@ describe('RelatedItemsTreeApp', () => {
       it('calls `setItemInputValue` action with empty string', () => {
         spyOn(wrapper.vm, 'setItemInputValue');
 
-        wrapper.vm.handleCreateItemFormCancel();
+        wrapper.vm.handleCreateEpicFormCancel();
 
         expect(wrapper.vm.setItemInputValue).toHaveBeenCalledWith('');
       });

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

@@ -70,15 +70,15 @@ describe('RelatedItemsTree', () => {
           });
         });
 
-        it('calls `toggleCreateItemForm` action when provided `id` param value is not `0`', () => {
-          spyOn(wrapper.vm, 'toggleCreateItemForm');
+        it('calls `toggleCreateEpicForm` action when provided `id` param value is not `0`', () => {
+          spyOn(wrapper.vm, 'toggleCreateEpicForm');
 
           wrapper.vm.handleActionClick({
             id: 1,
             actionType,
           });
 
-          expect(wrapper.vm.toggleCreateItemForm).toHaveBeenCalledWith({
+          expect(wrapper.vm.toggleCreateEpicForm).toHaveBeenCalledWith({
             actionType,
             toggleState: true,
           });

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

@@ -732,13 +732,13 @@ describe('RelatedItemTree', () => {
         });
       });
 
-      describe('toggleCreateItemForm', () => {
-        it('should set `state.showCreateItemForm` to true', done => {
+      describe('toggleCreateEpicForm', () => {
+        it('should set `state.showCreateEpicForm` to true', done => {
           testAction(
-            actions.toggleCreateItemForm,
+            actions.toggleCreateEpicForm,
             {},
             {},
-            [{ type: types.TOGGLE_CREATE_ITEM_FORM, payload: {} }],
+            [{ type: types.TOGGLE_CREATE_EPIC_FORM, payload: {} }],
             [],
             done,
           );
@@ -997,7 +997,7 @@ describe('RelatedItemTree', () => {
                 payload: { children: [createdEpic], isSubItem: false },
               },
               {
-                type: 'toggleCreateItemForm',
+                type: 'toggleCreateEpicForm',
                 payload: { actionType: ActionType.Epic, toggleState: false },
               },
             ],