Add latest changes from gitlab-org/gitlab@master

5 files changed, 21 insertions, 23 deletions

diff --git a/app/assets/javascripts/notes/components/diff_discussion_header.vue b/app/assets/javascripts/notes/components/diff_discussion_header.vue
index 1b1923a90f7..cf6474270a2 100644
--- a/app/assets/javascripts/notes/components/diff_discussion_header.vue
+++ b/app/assets/javascripts/notes/components/diff_discussion_header.vue
@@ -84,8 +84,8 @@ export default {
 
       return sprintf(text, { commitDisplay, linkStart, linkEnd }, false);
     },
-    adaptiveAvatarSize() {
-      return { default: 24, md: 32 };
+    toggleClass() {
+      return this.discussion.expanded ? 'expanded' : 'collapsed';
     },
   },
   methods: {
@@ -98,16 +98,13 @@ export default {
 </script>
 
 <template>
-  <div class="discussion-header gl-display-flex gl-align-items-center gl-p-5">
-    <div
-      v-once
-      class="timeline-icon gl-align-self-start gl-flex-shrink-0 gl-flex-shrink gl-mx-3 gl-md-ml-2 gl-md-mr-5"
-    >
+  <div class="discussion-header gl-display-flex gl-align-items-center">
+    <div v-once class="timeline-avatar gl-align-self-start gl-flex-shrink-0 gl-flex-shrink">
       <gl-avatar-link v-if="author" :href="author.path">
-        <gl-avatar :src="author.avatar_url" :alt="author.name" :size="adaptiveAvatarSize" />
+        <gl-avatar :src="author.avatar_url" :alt="author.name" :size="32" />
       </gl-avatar-link>
     </div>
-    <div class="timeline-content w-100">
+    <div class="timeline-content w-100 gl-ml-3" :class="toggleClass">
       <note-header
         :author="author"
         :created-at="firstNote.created_at"
@@ -123,14 +120,14 @@ export default {
         :edited-at="discussion.resolved_at"
         :edited-by="discussion.resolved_by"
         :action-text="resolvedText"
-        class-name="discussion-headline-light js-discussion-headline gl-pl-2"
+        class-name="discussion-headline-light js-discussion-headline gl-pl-3"
       />
       <note-edited-text
         v-else-if="lastUpdatedAt"
         :edited-at="lastUpdatedAt"
         :edited-by="lastUpdatedBy"
         :action-text="__('Last updated')"
-        class-name="discussion-headline-light js-discussion-headline gl-pl-2"
+        class-name="discussion-headline-light js-discussion-headline gl-pl-3"
       />
     </div>
   </div>
diff --git a/app/assets/javascripts/notes/components/discussion_notes.vue b/app/assets/javascripts/notes/components/discussion_notes.vue
index 6fcfa66ea49..00ed7f0291b 100644
--- a/app/assets/javascripts/notes/components/discussion_notes.vue
+++ b/app/assets/javascripts/notes/components/discussion_notes.vue
@@ -142,7 +142,7 @@ export default {
               :edited-at="discussion.resolved_at"
               :edited-by="discussion.resolved_by"
               :action-text="resolvedText"
-              class-name="discussion-headline-light js-discussion-headline discussion-resolved-text"
+              class-name="discussion-headline-light js-discussion-headline discussion-resolved-text gl-mb-2"
             />
           </template>
           <template #avatar-badge>
diff --git a/app/assets/javascripts/notes/components/noteable_note.vue b/app/assets/javascripts/notes/components/noteable_note.vue
index e51969f95c7..45714541f80 100644
--- a/app/assets/javascripts/notes/components/noteable_note.vue
+++ b/app/assets/javascripts/notes/components/noteable_note.vue
@@ -199,9 +199,6 @@ export default {
     isMRDiffView() {
       return this.line && !this.isOverviewTab;
     },
-    authorAvatarAdaptiveSize() {
-      return { default: 24, md: 32 };
-    },
   },
   created() {
     const line = this.note.position?.line_range?.start || this.line;
@@ -409,7 +406,7 @@ export default {
     :class="{ ...classNameBindings, 'internal-note': note.internal }"
     :data-award-url="note.toggle_award_path"
     :data-note-id="note.id"
-    class="note note-wrapper"
+    class="note note-wrapper note-comment"
     data-qa-selector="noteable_note_container"
   >
     <div
@@ -427,7 +424,7 @@ export default {
       </gl-sprintf>
     </div>
 
-    <div v-if="isMRDiffView" class="gl-float-left gl-mt-n1 gl-mr-3">
+    <div v-if="isMRDiffView" class="gl-float-left gl-mt-2">
       <gl-avatar-link :href="author.path">
         <gl-avatar
           :src="author.avatar_url"
@@ -440,13 +437,13 @@ export default {
       </gl-avatar-link>
     </div>
 
-    <div v-else class="gl-float-left gl-pl-3 gl-md-pl-2">
+    <div v-else class="timeline-avatar gl-float-left">
       <gl-avatar-link :href="author.path">
         <gl-avatar
           :src="author.avatar_url"
           :entity-name="author.username"
           :alt="author.name"
-          :size="authorAvatarAdaptiveSize"
+          :size="32"
         />
 
         <slot name="avatar-badge"></slot>
diff --git a/app/assets/javascripts/notes/components/notes_app.vue b/app/assets/javascripts/notes/components/notes_app.vue
index 37bc8bad305..db04d60e6f2 100644
--- a/app/assets/javascripts/notes/components/notes_app.vue
+++ b/app/assets/javascripts/notes/components/notes_app.vue
@@ -292,7 +292,11 @@ export default {
       <template #comments>
         <ul id="notes-list" class="notes main-notes-list timeline">
           <template v-for="discussion in allDiscussions">
-            <skeleton-loading-container v-if="discussion.isSkeletonNote" :key="discussion.id" />
+            <skeleton-loading-container
+              v-if="discussion.isSkeletonNote"
+              :key="discussion.id"
+              class="note-skeleton"
+            />
             <timeline-entry-item v-else-if="discussion.isDraft" :key="discussion.id">
               <draft-note :draft="discussion" />
             </timeline-entry-item>
@@ -327,7 +331,7 @@ export default {
               :help-page-path="helpPagePath"
             />
           </template>
-          <discussion-filter-note v-show="commentsDisabled" />
+          <discussion-filter-note v-if="commentsDisabled" />
         </ul>
       </template>
     </ordered-layout>
diff --git a/app/assets/javascripts/notes/components/toggle_replies_widget.vue b/app/assets/javascripts/notes/components/toggle_replies_widget.vue
index 2bd3488ae1b..734e08dd586 100644
--- a/app/assets/javascripts/notes/components/toggle_replies_widget.vue
+++ b/app/assets/javascripts/notes/components/toggle_replies_widget.vue
@@ -61,7 +61,7 @@ export default {
 <template>
   <li
     :class="liClasses"
-    class="gl-display-flex! gl-align-items-center gl-flex-wrap gl-bg-gray-10 gl-py-3 gl-px-5 gl-border-t"
+    class="toggle-replies-widget gl-display-flex! gl-align-items-center gl-flex-wrap gl-bg-gray-10 gl-py-3 gl-px-5 gl-border"
   >
     <gl-button
       ref="toggle"
@@ -75,7 +75,7 @@ export default {
       <user-avatar-link
         v-for="author in uniqueAuthors"
         :key="author.username"
-        class="gl-mr-3"
+        class="gl-mr-3 reply-author-avatar"
         :link-href="author.path"
         :img-alt="author.name"
         img-css-classes="gl-mr-0!"