Add latest changes from gitlab-org/gitlab@15-4-stable-eev15.4.0-rc42

7 files changed, 57 insertions, 12 deletions

diff --git a/app/assets/javascripts/design_management/components/design_notes/design_discussion.vue b/app/assets/javascripts/design_management/components/design_notes/design_discussion.vue
index ac00af2ab34..124780df8a5 100644
--- a/app/assets/javascripts/design_management/components/design_notes/design_discussion.vue
+++ b/app/assets/javascripts/design_management/components/design_notes/design_discussion.vue
@@ -174,6 +174,7 @@ export default {
       this.$emit('open-form', this.discussion.id);
       this.isFormRendered = true;
     },
+
     toggleResolvedStatus() {
       this.isResolving = true;
 
@@ -234,6 +235,7 @@ export default {
         :note="firstNote"
         :markdown-preview-path="markdownPreviewPath"
         :is-resolving="isResolving"
+        :noteable-id="noteableId"
         :class="{ 'gl-bg-blue-50': isDiscussionActive }"
         @error="$emit('update-note-error', $event)"
       >
@@ -276,6 +278,7 @@ export default {
         :note="note"
         :markdown-preview-path="markdownPreviewPath"
         :is-resolving="isResolving"
+        :noteable-id="noteableId"
         :class="{ 'gl-bg-blue-50': isDiscussionActive }"
         @error="$emit('update-note-error', $event)"
       />
@@ -307,6 +310,8 @@ export default {
               v-model="discussionComment"
               :is-saving="loading"
               :markdown-preview-path="markdownPreviewPath"
+              :noteable-id="noteableId"
+              :discussion-id="discussion.id"
               @submit-form="mutate"
               @cancel-form="hideForm"
             >
diff --git a/app/assets/javascripts/design_management/components/design_notes/design_note.vue b/app/assets/javascripts/design_management/components/design_notes/design_note.vue
index 5fb5989e11a..e629f74ba02 100644
--- a/app/assets/javascripts/design_management/components/design_notes/design_note.vue
+++ b/app/assets/javascripts/design_management/components/design_notes/design_note.vue
@@ -45,6 +45,10 @@ export default {
       required: false,
       default: '',
     },
+    noteableId: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     return {
@@ -160,6 +164,7 @@ export default {
         :is-saving="loading"
         :markdown-preview-path="markdownPreviewPath"
         :is-new-comment="false"
+        :noteable-id="noteableId"
         class="gl-mt-5"
         @submit-form="mutate"
         @cancel-form="hideForm"
diff --git a/app/assets/javascripts/design_management/components/design_notes/design_reply_form.vue b/app/assets/javascripts/design_management/components/design_notes/design_reply_form.vue
index 1b6458668f5..4faeba3983b 100644
--- a/app/assets/javascripts/design_management/components/design_notes/design_reply_form.vue
+++ b/app/assets/javascripts/design_management/components/design_notes/design_reply_form.vue
@@ -1,7 +1,11 @@
 <script>
 import { GlButton, GlModal } from '@gitlab/ui';
+import $ from 'jquery';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { s__ } from '~/locale';
+import Autosave from '~/autosave';
+import { isLoggedIn } from '~/lib/utils/common_utils';
+import { getIdFromGraphQLId, isGid } from '~/graphql_shared/utils';
 import MarkdownField from '~/vue_shared/components/markdown/field.vue';
 
 export default {
@@ -30,10 +34,20 @@ export default {
       required: false,
       default: true,
     },
+    noteableId: {
+      type: String,
+      required: true,
+    },
+    discussionId: {
+      type: String,
+      required: false,
+      default: 'new',
+    },
   },
   data() {
     return {
       formText: this.value,
+      isLoggedIn: isLoggedIn(),
     };
   },
   computed: {
@@ -64,13 +78,19 @@ export default {
     markdownDocsPath() {
       return helpPagePath('user/markdown');
     },
+    shortDiscussionId() {
+      return isGid(this.discussionId) ? getIdFromGraphQLId(this.discussionId) : this.discussionId;
+    },
   },
   mounted() {
     this.focusInput();
   },
   methods: {
     submitForm() {
-      if (this.hasValue) this.$emit('submit-form');
+      if (this.hasValue) {
+        this.$emit('submit-form');
+        this.autosaveDiscussion.reset();
+      }
     },
     cancelComment() {
       if (this.hasValue && this.formText !== this.value) {
@@ -79,8 +99,22 @@ export default {
         this.$emit('cancel-form');
       }
     },
+    confirmCancelCommentModal() {
+      this.$emit('cancel-form');
+      this.autosaveDiscussion.reset();
+    },
     focusInput() {
       this.$refs.textarea.focus();
+      this.initAutosaveComment();
+    },
+    initAutosaveComment() {
+      if (this.isLoggedIn) {
+        this.autosaveDiscussion = new Autosave($(this.$refs.textarea), [
+          s__('DesignManagement|Discussion'),
+          getIdFromGraphQLId(this.noteableId),
+          this.shortDiscussionId,
+        ]);
+      }
     },
   },
 };
@@ -124,7 +158,7 @@ export default {
         type="submit"
         data-track-action="click_button"
         data-qa-selector="save_comment_button"
-        @click="$emit('submit-form')"
+        @click="submitForm"
       >
         {{ buttonText }}
       </gl-button>
@@ -144,7 +178,7 @@ export default {
       :ok-title="modalSettings.okTitle"
       :cancel-title="modalSettings.cancelTitle"
       modal-id="cancel-comment-modal"
-      @ok="$emit('cancel-form')"
+      @ok="confirmCancelCommentModal"
       >{{ modalSettings.content }}
     </gl-modal>
   </form>
diff --git a/app/assets/javascripts/design_management/components/list/item.vue b/app/assets/javascripts/design_management/components/list/item.vue
index 3092b8554ac..1e36aa686a4 100644
--- a/app/assets/javascripts/design_management/components/list/item.vue
+++ b/app/assets/javascripts/design_management/components/list/item.vue
@@ -128,7 +128,7 @@ export default {
       params: { id: filename },
       query: $route.query,
     }"
-    class="card gl-cursor-pointer text-plain js-design-list-item design-list-item design-list-item-new"
+    class="card gl-cursor-pointer text-plain js-design-list-item design-list-item design-list-item-new gl-mb-0"
   >
     <div
       class="card-body gl-p-0 gl-display-flex gl-align-items-center gl-justify-content-center gl-overflow-hidden gl-relative"
diff --git a/app/assets/javascripts/design_management/components/upload/design_version_dropdown.vue b/app/assets/javascripts/design_management/components/upload/design_version_dropdown.vue
index 816d7ac7abf..f10545faea6 100644
--- a/app/assets/javascripts/design_management/components/upload/design_version_dropdown.vue
+++ b/app/assets/javascripts/design_management/components/upload/design_version_dropdown.vue
@@ -73,8 +73,8 @@ export default {
     <gl-dropdown-item
       v-for="(version, index) in allVersions"
       :key="version.id"
-      :is-check-item="true"
-      :is-check-centered="true"
+      is-check-item
+      is-check-centered
       :is-checked="findVersionId(version.id) === currentVersionId"
       :avatar-url="getAvatarUrl(version)"
       @click="routeToVersion(version.id)"
diff --git a/app/assets/javascripts/design_management/pages/design/index.vue b/app/assets/javascripts/design_management/pages/design/index.vue
index 1825ce7f092..228ad637b9e 100644
--- a/app/assets/javascripts/design_management/pages/design/index.vue
+++ b/app/assets/javascripts/design_management/pages/design/index.vue
@@ -418,6 +418,7 @@ export default {
             v-model="comment"
             :is-saving="loading"
             :markdown-preview-path="markdownPreviewPath"
+            :noteable-id="design.id"
             @submit-form="mutate"
             @cancel-form="closeCommentForm"
           /> </apollo-mutation
diff --git a/app/assets/javascripts/design_management/pages/index.vue b/app/assets/javascripts/design_management/pages/index.vue
index 91e35ad3764..07f7a19f7d4 100644
--- a/app/assets/javascripts/design_management/pages/index.vue
+++ b/app/assets/javascripts/design_management/pages/index.vue
@@ -135,7 +135,7 @@ export default {
     designDropzoneWrapperClass() {
       return this.isDesignListEmpty
         ? 'col-12'
-        : 'gl-flex-direction-column col-md-6 col-lg-3 gl-mb-3';
+        : 'gl-flex-direction-column col-md-6 col-lg-3 gl-mt-5';
     },
   },
   mounted() {
@@ -364,15 +364,15 @@ export default {
       data-testid="design-toolbar-wrapper"
     >
       <div
-        class="gl-display-flex gl-justify-content-space-between gl-align-items-center gl-w-full gl-flex-wrap"
+        class="gl-display-flex gl-justify-content-space-between gl-align-items-center gl-w-full gl-flex-wrap gl-gap-3"
       >
-        <div class="gl-display-flex gl-align-items-center gl-my-2">
+        <div class="gl-display-flex gl-align-items-center">
           <span class="gl-font-weight-bold gl-mr-3">{{ s__('DesignManagement|Designs') }}</span>
           <design-version-dropdown />
         </div>
         <div
           v-show="hasDesigns"
-          class="gl-display-flex gl-align-items-center gl-my-2"
+          class="gl-display-flex gl-align-items-center"
           data-testid="design-selector-toolbar"
         >
           <gl-button
@@ -413,7 +413,7 @@ export default {
         </div>
       </div>
     </header>
-    <div class="gl-mt-6">
+    <div>
       <gl-loading-icon v-if="isLoading" size="lg" />
       <gl-alert v-else-if="error" variant="danger" :dismissible="false">
         {{ __('An error occurred while loading designs. Please try again.') }}
@@ -449,7 +449,7 @@ export default {
         <li
           v-for="design in designs"
           :key="design.id"
-          class="col-md-6 col-lg-3 gl-mb-3 gl-bg-transparent gl-shadow-none js-design-tile"
+          class="col-md-6 col-lg-3 gl-mt-5 gl-bg-transparent gl-shadow-none js-design-tile"
         >
           <design-dropzone
             :display-as-card="hasDesigns"