Add latest changes from gitlab-org/gitlab@master

3 files changed, 77 insertions, 10 deletions

diff --git a/app/assets/javascripts/issuable_show/components/issuable_body.vue b/app/assets/javascripts/issuable_show/components/issuable_body.vue
index e6a05c1ab8b..c084f328f42 100644
--- a/app/assets/javascripts/issuable_show/components/issuable_body.vue
+++ b/app/assets/javascripts/issuable_show/components/issuable_body.vue
@@ -36,10 +36,18 @@ export default {
       type: Boolean,
       required: true,
     },
+    enableAutosave: {
+      type: Boolean,
+      required: true,
+    },
     editFormVisible: {
       type: Boolean,
       required: true,
     },
+    showFieldTitle: {
+      type: Boolean,
+      required: true,
+    },
     descriptionPreviewPath: {
       type: String,
       required: true,
@@ -57,6 +65,14 @@ export default {
       return this.issuable.updatedBy;
     },
   },
+  methods: {
+    handleKeydownTitle(e, issuableMeta) {
+      this.$emit('keydown-title', e, issuableMeta);
+    },
+    handleKeydownDescription(e, issuableMeta) {
+      this.$emit('keydown-description', e, issuableMeta);
+    },
+  },
 };
 </script>
 
@@ -67,8 +83,12 @@ export default {
         v-if="editFormVisible"
         :issuable="issuable"
         :enable-autocomplete="enableAutocomplete"
+        :enable-autosave="enableAutosave"
+        :show-field-title="showFieldTitle"
         :description-preview-path="descriptionPreviewPath"
         :description-help-path="descriptionHelpPath"
+        @keydown-title="handleKeydownTitle"
+        @keydown-description="handleKeydownDescription"
       >
         <template #edit-form-actions="issuableMeta">
           <slot name="edit-form-actions" v-bind="issuableMeta"></slot>
diff --git a/app/assets/javascripts/issuable_show/components/issuable_edit_form.vue b/app/assets/javascripts/issuable_show/components/issuable_edit_form.vue
index 7b9a83a740f..93e4db8b99c 100644
--- a/app/assets/javascripts/issuable_show/components/issuable_edit_form.vue
+++ b/app/assets/javascripts/issuable_show/components/issuable_edit_form.vue
@@ -23,6 +23,14 @@ export default {
       type: Boolean,
       required: true,
     },
+    enableAutosave: {
+      type: Boolean,
+      required: true,
+    },
+    showFieldTitle: {
+      type: Boolean,
+      required: true,
+    },
     descriptionPreviewPath: {
       type: String,
       required: true,
@@ -33,19 +41,27 @@ export default {
     },
   },
   data() {
-    const { title, description } = this.issuable;
-
     return {
-      title,
-      description,
+      title: '',
+      description: '',
     };
   },
+  watch: {
+    issuable: {
+      handler(value) {
+        this.title = value?.title || '';
+        this.description = value?.description || '';
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
   created() {
     eventHub.$on('update.issuable', this.resetAutosave);
     eventHub.$on('close.form', this.resetAutosave);
   },
   mounted() {
-    this.initAutosave();
+    if (this.enableAutosave) this.initAutosave();
   },
   beforeDestroy() {
     eventHub.$off('update.issuable', this.resetAutosave);
@@ -73,6 +89,12 @@ export default {
       this.autosaveTitle.reset();
       this.autosaveDescription.reset();
     },
+    handleKeydown(e, inputType) {
+      this.$emit(`keydown-${inputType}`, e, {
+        issuableTitle: this.title,
+        issuableDescription: this.description,
+      });
+    },
   },
 };
 </script>
@@ -82,9 +104,9 @@ export default {
     <gl-form-group
       data-testid="title"
       :label="__('Title')"
-      :label-sr-only="true"
+      :label-sr-only="!showFieldTitle"
       label-for="issuable-title"
-      class="col-12"
+      class="col-12 gl-px-0"
     >
       <gl-form-input
         id="issuable-title"
@@ -94,14 +116,16 @@ export default {
         :aria-label="__('Title')"
         :autofocus="true"
         class="qa-title-input"
+        @keydown="handleKeydown($event, 'title')"
       />
     </gl-form-group>
     <gl-form-group
       data-testid="description"
       :label="__('Description')"
-      :label-sr-only="true"
+      :label-sr-only="!showFieldTitle"
       label-for="issuable-description"
-      class="col-12 common-note-form"
+      label-class="gl-pb-0!"
+      class="col-12 gl-px-0 common-note-form"
     >
       <markdown-field
         :markdown-preview-path="descriptionPreviewPath"
@@ -120,11 +144,12 @@ export default {
             class="note-textarea js-gfm-input js-autosize markdown-area
           qa-description-textarea"
             dir="auto"
+            @keydown="handleKeydown($event, 'description')"
           ></textarea>
         </template>
       </markdown-field>
     </gl-form-group>
-    <div data-testid="actions" class="col-12 gl-mt-3 gl-mb-3 clearfix">
+    <div data-testid="actions" class="col-12 gl-mt-3 gl-mb-3 gl-px-0 clearfix">
       <slot
         name="edit-form-actions"
         :issuable-title="title"
diff --git a/app/assets/javascripts/issuable_show/components/issuable_show_root.vue b/app/assets/javascripts/issuable_show/components/issuable_show_root.vue
index b41f5e270a8..2443338e8c4 100644
--- a/app/assets/javascripts/issuable_show/components/issuable_show_root.vue
+++ b/app/assets/javascripts/issuable_show/components/issuable_show_root.vue
@@ -35,11 +35,21 @@ export default {
       required: false,
       default: false,
     },
+    enableAutosave: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
     editFormVisible: {
       type: Boolean,
       required: false,
       default: false,
     },
+    showFieldTitle: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     descriptionPreviewPath: {
       type: String,
       required: false,
@@ -51,6 +61,14 @@ export default {
       default: '',
     },
   },
+  methods: {
+    handleKeydownTitle(e, issuableMeta) {
+      this.$emit('keydown-title', e, issuableMeta);
+    },
+    handleKeydownDescription(e, issuableMeta) {
+      this.$emit('keydown-description', e, issuableMeta);
+    },
+  },
 };
 </script>
 
@@ -77,10 +95,14 @@ export default {
       :status-icon="statusIcon"
       :enable-edit="enableEdit"
       :enable-autocomplete="enableAutocomplete"
+      :enable-autosave="enableAutosave"
       :edit-form-visible="editFormVisible"
+      :show-field-title="showFieldTitle"
       :description-preview-path="descriptionPreviewPath"
       :description-help-path="descriptionHelpPath"
       @edit-issuable="$emit('edit-issuable', $event)"
+      @keydown-title="handleKeydownTitle"
+      @keydown-description="handleKeydownDescription"
     >
       <template #status-badge>
         <slot name="status-badge"></slot>