Add latest changes from gitlab-org/gitlab@master

7 files changed, 46 insertions, 24 deletions

diff --git a/app/assets/javascripts/issues/show/components/app.vue b/app/assets/javascripts/issues/show/components/app.vue
index 55e39165885..456a2029703 100644
--- a/app/assets/javascripts/issues/show/components/app.vue
+++ b/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>
diff --git a/app/assets/javascripts/issues/show/components/description.vue b/app/assets/javascripts/issues/show/components/description.vue
index ddfef35ad6f..0b7e128c47b 100644
--- a/app/assets/javascripts/issues/show/components/description.vue
+++ b/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"
diff --git a/app/assets/javascripts/issues/show/components/fields/description.vue b/app/assets/javascripts/issues/show/components/fields/description.vue
index abf9ae2690e..0bb5e7cb2ee 100644
--- a/app/assets/javascripts/issues/show/components/fields/description.vue
+++ b/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>
diff --git a/app/assets/javascripts/issues/show/components/fields/description_template.vue b/app/assets/javascripts/issues/show/components/fields/description_template.vue
index d528641dcb6..98f92c97f77 100644
--- a/app/assets/javascripts/issues/show/components/fields/description_template.vue
+++ b/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),
diff --git a/app/assets/javascripts/issues/show/components/fields/title.vue b/app/assets/javascripts/issues/show/components/fields/title.vue
index a73926575d0..594d1a65700 100644
--- a/app/assets/javascripts/issues/show/components/fields/title.vue
+++ b/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>
diff --git a/app/assets/javascripts/issues/show/components/form.vue b/app/assets/javascripts/issues/show/components/form.vue
index 6447ec85b4e..e2c12edf46d 100644
--- a/app/assets/javascripts/issues/show/components/form.vue
+++ b/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"
diff --git a/app/assets/javascripts/issues/show/mixins/update.js b/app/assets/javascripts/issues/show/mixins/update.js
index 72be65b426f..31b29de580c 100644
--- a/app/assets/javascripts/issues/show/mixins/update.js
+++ b/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');
     },
   },