Refactor prop mutation in issue form

Addresses https://gitlab.com/gitlab-org/gitlab/-/issues/357830.

app/assets/javascripts/issues/show/components/app.vue

@@ -327,9 +327,12 @@ export default {
         });
     },
 
+    updateFormState(state) {
+      this.store.setFormState(state);
+    },
+
     updateAndShowForm(templates = {}) {
       if (!this.showForm) {
-        this.showForm = true;
         this.store.setFormState({
           title: this.state.titleText,
           description: this.state.descriptionText,
@@ -338,6 +341,7 @@ export default {
           updateLoading: false,
           issuableTemplates: templates,
         });
+        this.showForm = true;
       }
     },
 
@@ -369,6 +373,10 @@ export default {
     },
 
     updateIssuable() {
+      this.store.setFormState({
+        updateLoading: true,
+      });
+
       const {
         store: { formState },
         issueState,
@@ -376,7 +384,9 @@ export default {
       const issuablePayload = issueState.isDirty
         ? { ...formState, issue_type: issueState.issueType }
         : formState;
+
       this.clearFlash();
+
       return this.service
         .updateIssuable(issuablePayload)
         .then((res) => res.data)
@@ -473,6 +483,7 @@ export default {
         :can-attach-file="canAttachFile"
         :enable-autocomplete="enableAutocomplete"
         :issuable-type="issuableType"
+        @updateForm="updateFormState"
       />
     </div>
     <div v-else>

app/assets/javascripts/issues/show/components/description.vue

@@ -288,17 +288,17 @@ export default {
       }"
       class="md"
     ></div>
-    <!-- eslint-disable vue/no-mutating-props -->
+
     <textarea
       v-if="descriptionText"
-      v-model="descriptionText"
+      :value="descriptionText"
       :data-update-url="updateUrl"
       class="hidden js-task-list-field"
       dir="auto"
       data-testid="textarea"
     >
     </textarea>
-    <!-- eslint-enable vue/no-mutating-props -->
+
     <gl-modal
       ref="modal"
       modal-id="create-task-modal"

app/assets/javascripts/issues/show/components/fields/description.vue

@@ -9,8 +9,8 @@ export default {
   },
   mixins: [updateMixin],
   props: {
-    formState: {
-      type: Object,
+    value: {
+      type: String,
       required: true,
     },
     markdownPreviewPath: {
@@ -52,24 +52,23 @@ export default {
       :quick-actions-docs-path="quickActionsDocsPath"
       :can-attach-file="canAttachFile"
       :enable-autocomplete="enableAutocomplete"
-      :textarea-value="formState.description"
+      :textarea-value="value"
     >
       <template #textarea>
-        <!-- eslint-disable vue/no-mutating-props -->
         <textarea
           id="issue-description"
           ref="textarea"
-          v-model="formState.description"
+          :value="value"
           class="note-textarea js-gfm-input js-autosize markdown-area qa-description-textarea"
           dir="auto"
           data-supports-quick-actions="true"
           :aria-label="__('Description')"
           :placeholder="__('Write a comment or drag your files here…')"
+          @input="$emit('input', $event.target.value)"
           @keydown.meta.enter="updateIssuable"
           @keydown.ctrl.enter="updateIssuable"
         >
         </textarea>
-        <!-- eslint-enable vue/no-mutating-props -->
       </template>
     </markdown-field>
   </div>

app/assets/javascripts/issues/show/components/fields/description_template.vue

@@ -8,8 +8,8 @@ export default {
     GlIcon,
   },
   props: {
-    formState: {
-      type: Object,
+    value: {
+      type: String,
       required: true,
     },
     issuableTemplates: {
@@ -39,10 +39,9 @@ export default {
     // Create the editor for the template
     const editor = document.querySelector('.detail-page-description .note-textarea') || {};
     editor.setValue = (val) => {
-      // eslint-disable-next-line vue/no-mutating-props
-      this.formState.description = val;
+      this.$emit('input', val);
     };
-    editor.getValue = () => this.formState.description;
+    editor.getValue = () => this.value;
 
     this.issuableTemplate = new IssuableTemplateSelectors({
       $dropdowns: $(this.$refs.toggle),

app/assets/javascripts/issues/show/components/fields/title.vue

@@ -4,8 +4,8 @@ import updateMixin from '../../mixins/update';
 export default {
   mixins: [updateMixin],
   props: {
-    formState: {
-      type: Object,
+    value: {
+      type: String,
       required: true,
     },
   },
@@ -15,19 +15,18 @@ export default {
 <template>
   <fieldset>
     <label class="sr-only" for="issuable-title">{{ __('Title') }}</label>
-    <!-- eslint-disable vue/no-mutating-props -->
     <input
       id="issuable-title"
       ref="input"
-      v-model="formState.title"
+      :value="value"
       class="form-control qa-title-input gl-border-gray-200"
       dir="auto"
       type="text"
       :placeholder="__('Title')"
       :aria-label="__('Title')"
+      @input="$emit('input', $event.target.value)"
       @keydown.meta.enter="updateIssuable"
       @keydown.ctrl.enter="updateIssuable"
     />
-    <!-- eslint-enable vue/no-mutating-props -->
   </fieldset>
 </template>

app/assets/javascripts/issues/show/components/form.vue

@@ -86,6 +86,10 @@ export default {
   },
   data() {
     return {
+      formData: {
+        title: this.formState.title,
+        description: this.formState.description,
+      },
       showOutdatedDescriptionWarning: false,
     };
   },
@@ -100,6 +104,14 @@ export default {
       return this.issuableType === IssuableType.Issue;
     },
   },
+  watch: {
+    formData: {
+      handler(value) {
+        this.$emit('updateForm', value);
+      },
+      deep: true,
+    },
+  },
   created() {
     eventHub.$on('delete.issuable', this.resetAutosave);
     eventHub.$on('update.issuable', this.resetAutosave);
@@ -191,16 +203,17 @@ export default {
     >
     <div class="row gl-mb-3">
       <div class="col-12">
-        <issuable-title-field ref="title" :form-state="formState" />
+        <issuable-title-field ref="title" v-model="formData.title" />
       </div>
     </div>
     <div class="row">
       <div v-if="isIssueType" class="col-12 col-md-4 pr-md-0">
         <issuable-type-field ref="issue-type" />
       </div>
+
       <div v-if="hasIssuableTemplates" class="col-12 col-md-4 pl-md-2">
         <description-template-field
-          :form-state="formState"
+          v-model="formData.description"
           :issuable-templates="issuableTemplates"
           :project-path="projectPath"
           :project-id="projectId"
@@ -208,14 +221,16 @@ export default {
         />
       </div>
     </div>
+
     <description-field
       ref="description"
-      :form-state="formState"
+      v-model="formData.description"
       :markdown-preview-path="markdownPreviewPath"
       :markdown-docs-path="markdownDocsPath"
       :can-attach-file="canAttachFile"
       :enable-autocomplete="enableAutocomplete"
     />
+
     <edit-actions
       :endpoint="endpoint"
       :form-state="formState"

app/assets/javascripts/issues/show/mixins/update.js

@@ -3,7 +3,6 @@ import eventHub from '../event_hub';
 export default {
   methods: {
     updateIssuable() {
-      this.formState.updateLoading = true;
       eventHub.$emit('update.issuable');
     },
   },

spec/frontend/issues/show/components/fields/description_spec.js

@@ -15,9 +15,7 @@ describe('Description field component', () => {
         markdownPreviewPath: '/',
         markdownDocsPath: '/',
         quickActionsDocsPath: '/',
-        formState: {
-          description,
-        },
+        value: description,
       },
       stubs: {
         MarkdownField,

spec/frontend/issues/show/components/fields/description_template_spec.js

-import Vue from 'vue';
+import { shallowMount } from '@vue/test-utils';
 import descriptionTemplate from '~/issues/show/components/fields/description_template.vue';
 
 describe('Issue description template component with templates as hash', () => {
-  let vm;
-  let formState;
+  let wrapper;
+  const defaultOptions = {
+    propsData: {
+      value: 'test',
+      issuableTemplates: {
+        test: [{ name: 'test', id: 'test', project_path: '/', namespace_path: '/' }],
+      },
+      projectId: 1,
+      projectPath: '/',
+      namespacePath: '/',
+      projectNamespace: '/',
+    },
+  };
 
-  beforeEach(() => {
-    const Component = Vue.extend(descriptionTemplate);
-    formState = {
-      description: 'test',
-    };
+  const findIssuableSelector = () => wrapper.find('.js-issuable-selector');
 
-    vm = new Component({
-      propsData: {
-        formState,
-        issuableTemplates: {
-          test: [{ name: 'test', id: 'test', project_path: '/', namespace_path: '/' }],
-        },
-        projectId: 1,
-        projectPath: '/',
-        namespacePath: '/',
-        projectNamespace: '/',
-      },
-    }).$mount();
+  const createComponent = (options = defaultOptions) => {
+    wrapper = shallowMount(descriptionTemplate, options);
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
   });
 
   it('renders templates as JSON hash in data attribute', () => {
-    expect(vm.$el.querySelector('.js-issuable-selector').getAttribute('data-data')).toBe(
+    createComponent();
+    expect(findIssuableSelector().attributes('data-data')).toBe(
       '{"test":[{"name":"test","id":"test","project_path":"/","namespace_path":"/"}]}',
     );
   });
 
-  it('updates formState when changing template', () => {
-    vm.issuableTemplate.editor.setValue('test new template');
+  it('emits input event', () => {
+    createComponent();
+    wrapper.vm.issuableTemplate.editor.setValue('test new template');
 
-    expect(formState.description).toBe('test new template');
+    expect(wrapper.emitted('input')).toEqual([['test new template']]);
   });
 
-  it('returns formState description with editor getValue', () => {
-    formState.description = 'testing new template';
-
-    expect(vm.issuableTemplate.editor.getValue()).toBe('testing new template');
+  it('returns value with editor getValue', () => {
+    createComponent();
+    expect(wrapper.vm.issuableTemplate.editor.getValue()).toBe('test');
   });
-});
-
-describe('Issue description template component with templates as array', () => {
-  let vm;
-  let formState;
 
-  beforeEach(() => {
-    const Component = Vue.extend(descriptionTemplate);
-    formState = {
-      description: 'test',
-    };
-
-    vm = new Component({
-      propsData: {
-        formState,
-        issuableTemplates: [{ name: 'test', id: 'test', project_path: '/', namespace_path: '/' }],
-        projectId: 1,
-        projectPath: '/',
-        namespacePath: '/',
-        projectNamespace: '/',
-      },
-    }).$mount();
-  });
-
-  it('renders templates as JSON array in data attribute', () => {
-    expect(vm.$el.querySelector('.js-issuable-selector').getAttribute('data-data')).toBe(
-      '[{"name":"test","id":"test","project_path":"/","namespace_path":"/"}]',
-    );
+  describe('Issue description template component with templates as array', () => {
+    it('renders templates as JSON array in data attribute', () => {
+      createComponent({
+        propsData: {
+          value: 'test',
+          issuableTemplates: [{ name: 'test', id: 'test', project_path: '/', namespace_path: '/' }],
+          projectId: 1,
+          projectPath: '/',
+          namespacePath: '/',
+          projectNamespace: '/',
+        },
+      });
+      expect(findIssuableSelector().attributes('data-data')).toBe(
+        '[{"name":"test","id":"test","project_path":"/","namespace_path":"/"}]',
+      );
+    });
   });
 });

spec/frontend/issues/show/components/fields/title_spec.js

@@ -12,9 +12,7 @@ describe('Title field component', () => {
 
     wrapper = shallowMount(TitleField, {
       propsData: {
-        formState: {
-          title: 'test',
-        },
+        value: 'test',
       },
     });
   });