Merge branch 'master' into 11-5-stable-prepare-rc4

12 files changed, 325 insertions, 160 deletions

diff --git a/app/assets/javascripts/notes/components/comment_form.vue b/app/assets/javascripts/notes/components/comment_form.vue
index b980e43b898..754c6e79ee4 100644
--- a/app/assets/javascripts/notes/components/comment_form.vue
+++ b/app/assets/javascripts/notes/components/comment_form.vue
@@ -321,10 +321,10 @@ Please check your network connection and try again.`;
       v-else-if="!canCreateNote"
       :issuable-type="issuableTypeTitle"
     />
-    <ul
+    <div
       v-else-if="canCreateNote"
       class="notes notes-form timeline">
-      <li class="timeline-entry">
+      <div class="timeline-entry note-form">
         <div class="timeline-entry-inner">
           <div class="flash-container error-alert timeline-content"></div>
           <div class="timeline-icon d-none d-sm-none d-md-block">
@@ -390,7 +390,7 @@ append-right-10 comment-type-dropdown js-comment-type-dropdown droplab-dropdown"
                     :disabled="isSubmitButtonDisabled"
                     name="button"
                     type="button"
-                    class="btn comment-btn note-type-toggle js-note-new-discussion dropdown-toggle"
+                    class="btn comment-btn note-type-toggle js-note-new-discussion dropdown-toggle qa-note-dropdown"
                     data-display="static"
                     data-toggle="dropdown"
                     aria-label="Open comment type dropdown">
@@ -422,7 +422,7 @@ append-right-10 comment-type-dropdown js-comment-type-dropdown droplab-dropdown"
                     <li :class="{ 'droplab-item-selected': noteType === 'discussion' }">
                       <button
                         type="button"
-                        class="btn btn-transparent"
+                        class="btn btn-transparent qa-discussion-option"
                         @click.prevent="setNoteType('discussion')">
                         <i
                           aria-hidden="true"
@@ -462,7 +462,7 @@ append-right-10 comment-type-dropdown js-comment-type-dropdown droplab-dropdown"
             </form>
           </div>
         </div>
-      </li>
-    </ul>
+      </div>
+    </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/notes/components/diff_with_note.vue b/app/assets/javascripts/notes/components/diff_with_note.vue
index eaa0cded224..b209f736c3f 100644
--- a/app/assets/javascripts/notes/components/diff_with_note.vue
+++ b/app/assets/javascripts/notes/components/diff_with_note.vue
@@ -1,15 +1,18 @@
 <script>
 import { mapState, mapActions } from 'vuex';
-import imageDiffHelper from '~/image_diff/helpers/index';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import DiffFileHeader from '~/diffs/components/diff_file_header.vue';
+import DiffViewer from '~/vue_shared/components/diff_viewer/diff_viewer.vue';
+import ImageDiffOverlay from '~/diffs/components/image_diff_overlay.vue';
 import { GlSkeletonLoading } from '@gitlab-org/gitlab-ui';
-import { trimFirstCharOfLineContent } from '~/diffs/store/utils';
+import { trimFirstCharOfLineContent, getDiffMode } from '~/diffs/store/utils';
 
 export default {
   components: {
     DiffFileHeader,
     GlSkeletonLoading,
+    DiffViewer,
+    ImageDiffOverlay,
   },
   props: {
     discussion: {
@@ -25,7 +28,11 @@ export default {
   computed: {
     ...mapState({
       noteableData: state => state.notes.noteableData,
+      projectPath: state => state.diffs.projectPath,
     }),
+    diffMode() {
+      return getDiffMode(this.diffFile);
+    },
     hasTruncatedDiffLines() {
       return this.discussion.truncatedDiffLines && this.discussion.truncatedDiffLines.length !== 0;
     },
@@ -62,11 +69,7 @@ export default {
     },
   },
   mounted() {
-    if (this.isImageDiff) {
-      const canCreateNote = false;
-      const renderCommentBadge = true;
-      imageDiffHelper.initImageDiff(this.$refs.fileHolder, canCreateNote, renderCommentBadge);
-    } else if (!this.hasTruncatedDiffLines) {
+    if (!this.hasTruncatedDiffLines) {
       this.fetchDiff();
     }
   },
@@ -160,7 +163,24 @@ export default {
     <div
       v-else
     >
-      <div v-html="imageDiffHtml"></div>
+      <diff-viewer
+        :diff-mode="diffMode"
+        :new-path="diffFile.newPath"
+        :new-sha="diffFile.diffRefs.headSha"
+        :old-path="diffFile.oldPath"
+        :old-sha="diffFile.diffRefs.baseSha"
+        :file-hash="diffFile.fileHash"
+        :project-path="projectPath"
+      >
+        <image-diff-overlay
+          slot="image-overlay"
+          :discussions="discussion"
+          :file-hash="diffFile.fileHash"
+          :show-comment-icon="true"
+          :should-toggle-discussion="false"
+          badge-class="image-comment-badge"
+        />
+      </diff-viewer>
       <slot></slot>
     </div>
   </div>
diff --git a/app/assets/javascripts/notes/components/discussion_counter.vue b/app/assets/javascripts/notes/components/discussion_counter.vue
index 1f80f24e045..a4d76a70696 100644
--- a/app/assets/javascripts/notes/components/discussion_counter.vue
+++ b/app/assets/javascripts/notes/components/discussion_counter.vue
@@ -1,9 +1,6 @@
 <script>
 import { mapActions, mapGetters } from 'vuex';
-import resolveSvg from 'icons/_icon_resolve_discussion.svg';
-import resolvedSvg from 'icons/_icon_status_success_solid.svg';
-import mrIssueSvg from 'icons/_icon_mr_issue.svg';
-import nextDiscussionSvg from 'icons/_next_discussion.svg';
+import Icon from '~/vue_shared/components/icon.vue';
 import { pluralize } from '../../lib/utils/text_utility';
 import discussionNavigation from '../mixins/discussion_navigation';
 import tooltip from '../../vue_shared/directives/tooltip';
@@ -12,6 +9,9 @@ export default {
   directives: {
     tooltip,
   },
+  components: {
+    Icon,
+  },
   mixins: [discussionNavigation],
   computed: {
     ...mapGetters([
@@ -37,12 +37,6 @@ export default {
       return this.getNoteableData.create_issue_to_resolve_discussions_path;
     },
   },
-  created() {
-    this.resolveSvg = resolveSvg;
-    this.resolvedSvg = resolvedSvg;
-    this.mrIssueSvg = mrIssueSvg;
-    this.nextDiscussionSvg = nextDiscussionSvg;
-  },
   methods: {
     ...mapActions(['expandDiscussion']),
     jumpToFirstUnresolvedDiscussion() {
@@ -66,15 +60,9 @@ export default {
         <span
           :class="{ 'is-active': allResolved }"
           class="line-resolve-btn is-disabled"
-          type="button">
-          <span
-            v-if="allResolved"
-            v-html="resolvedSvg"
-          ></span>
-          <span
-            v-else
-            v-html="resolveSvg"
-          ></span>
+          type="button"
+        >
+          <icon name="check-circle" />
         </span>
         <span class="line-resolve-text">
           {{ resolvedDiscussionCount }}/{{ discussionCount }} {{ countText }} resolved
@@ -90,7 +78,7 @@ export default {
           :title="s__('Resolve all discussions in new issue')"
           data-container="body"
           class="new-issue-for-discussion btn btn-default discussion-create-issue-btn">
-          <span v-html="mrIssueSvg"></span>
+          <icon name="issue-new" />
         </a>
       </div>
       <div
@@ -103,7 +91,7 @@ export default {
           data-container="body"
           class="btn btn-default discussion-next-btn"
           @click="jumpToFirstUnresolvedDiscussion">
-          <span v-html="nextDiscussionSvg"></span>
+          <icon name="comment-next" />
         </button>
       </div>
     </div>
diff --git a/app/assets/javascripts/notes/components/discussion_filter.vue b/app/assets/javascripts/notes/components/discussion_filter.vue
index 6e8f43048d1..affa2d1b574 100644
--- a/app/assets/javascripts/notes/components/discussion_filter.vue
+++ b/app/assets/javascripts/notes/components/discussion_filter.vue
@@ -1,7 +1,8 @@
 <script>
 import $ from 'jquery';
-import Icon from '~/vue_shared/components/icon.vue';
 import { mapGetters, mapActions } from 'vuex';
+import Icon from '~/vue_shared/components/icon.vue';
+import { DISCUSSION_FILTERS_DEFAULT_VALUE, HISTORY_ONLY_FILTER_VALUE } from '../constants';
 
 export default {
   components: {
@@ -12,14 +13,17 @@ export default {
       type: Array,
       required: true,
     },
-    defaultValue: {
+    selectedValue: {
       type: Number,
       default: null,
       required: false,
     },
   },
   data() {
-    return { currentValue: this.defaultValue };
+    return {
+      currentValue: this.selectedValue,
+      defaultValue: DISCUSSION_FILTERS_DEFAULT_VALUE,
+    };
   },
   computed: {
     ...mapGetters(['getNotesDataByProp']),
@@ -28,8 +32,11 @@ export default {
       return this.filters.find(filter => filter.value === this.currentValue);
     },
   },
+  mounted() {
+    this.toggleCommentsForm();
+  },
   methods: {
-    ...mapActions(['filterDiscussion']),
+    ...mapActions(['filterDiscussion', 'setCommentsDisabled']),
     selectFilter(value) {
       const filter = parseInt(value, 10);
 
@@ -39,6 +46,10 @@ export default {
       if (filter === this.currentValue) return;
       this.currentValue = filter;
       this.filterDiscussion({ path: this.getNotesDataByProp('discussionsPath'), filter });
+      this.toggleCommentsForm();
+    },
+    toggleCommentsForm() {
+      this.setCommentsDisabled(this.currentValue === HISTORY_ONLY_FILTER_VALUE);
     },
   },
 };
@@ -73,6 +84,10 @@ export default {
             >
               {{ filter.title }}
             </button>
+            <div
+              v-if="filter.value === defaultValue"
+              class="dropdown-divider"
+            ></div>
           </li>
         </ul>
       </div>
diff --git a/app/assets/javascripts/notes/components/note_actions.vue b/app/assets/javascripts/notes/components/note_actions.vue
index e075f94b82b..f7a61fbfcd4 100644
--- a/app/assets/javascripts/notes/components/note_actions.vue
+++ b/app/assets/javascripts/notes/components/note_actions.vue
@@ -1,19 +1,14 @@
 <script>
 import { mapGetters } from 'vuex';
-import emojiSmiling from 'icons/_emoji_slightly_smiling_face.svg';
-import emojiSmile from 'icons/_emoji_smile.svg';
-import emojiSmiley from 'icons/_emoji_smiley.svg';
-import editSvg from 'icons/_icon_pencil.svg';
-import resolveDiscussionSvg from 'icons/_icon_resolve_discussion.svg';
-import resolvedDiscussionSvg from 'icons/_icon_status_success_solid.svg';
-import ellipsisSvg from 'icons/_ellipsis_v.svg';
 import Icon from '~/vue_shared/components/icon.vue';
 import tooltip from '~/vue_shared/directives/tooltip';
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 
 export default {
   name: 'NoteActions',
   components: {
     Icon,
+    GlLoadingIcon,
   },
   directives: {
     tooltip,
@@ -108,15 +103,6 @@ export default {
       return title;
     },
   },
-  created() {
-    this.emojiSmiling = emojiSmiling;
-    this.emojiSmile = emojiSmile;
-    this.emojiSmiley = emojiSmiley;
-    this.editSvg = editSvg;
-    this.ellipsisSvg = ellipsisSvg;
-    this.resolveDiscussionSvg = resolveDiscussionSvg;
-    this.resolvedDiscussionSvg = resolvedDiscussionSvg;
-  },
   methods: {
     onEdit() {
       this.$emit('handleEdit');
@@ -150,12 +136,7 @@ export default {
         class="line-resolve-btn note-action-button"
         @click="onResolve">
         <template v-if="!isResolving">
-          <div
-            v-if="isResolved"
-            v-html="resolvedDiscussionSvg"></div>
-          <div
-            v-else
-            v-html="resolveDiscussionSvg"></div>
+          <icon name="check-circle" />
         </template>
         <gl-loading-icon
           v-else
@@ -177,18 +158,18 @@ export default {
         title="Add reaction"
       >
         <gl-loading-icon inline/>
-        <span
-          class="link-highlight award-control-icon-neutral"
-          v-html="emojiSmiling">
-        </span>
-        <span
-          class="link-highlight award-control-icon-positive"
-          v-html="emojiSmiley">
-        </span>
-        <span
-          class="link-highlight award-control-icon-super-positive"
-          v-html="emojiSmile">
-        </span>
+        <icon
+          css-classes="link-highlight award-control-icon-neutral"
+          name="emoji_slightly_smiling_face"
+        />
+        <icon
+          css-classes="link-highlight award-control-icon-positive"
+          name="emoji_smiley"
+        />
+        <icon
+          css-classes="link-highlight award-control-icon-super-positive"
+          name="emoji_smiley"
+        />
       </a>
     </div>
     <div
@@ -202,10 +183,10 @@ export default {
         data-container="body"
         data-placement="bottom"
         @click="onEdit">
-        <span
-          class="link-highlight"
-          v-html="editSvg">
-        </span>
+        <icon
+          name="pencil"
+          css-classes="link-highlight"
+        />
       </button>
     </div>
     <div
@@ -238,15 +219,15 @@ export default {
         data-toggle="dropdown"
         data-container="body"
         data-placement="bottom">
-        <span
-          class="icon"
-          v-html="ellipsisSvg">
-        </span>
+        <icon
+          css-classes="icon"
+          name="ellipsis_v"
+        />
       </button>
       <ul class="dropdown-menu more-actions-dropdown dropdown-open-left">
         <li v-if="canReportAsAbuse">
           <a :href="reportAbusePath">
-            Report as abuse
+            {{ __('Report abuse to GitLab') }}
           </a>
         </li>
         <li v-if="noteUrl">
@@ -255,7 +236,7 @@ export default {
             type="button"
             class="btn-default btn-transparent js-btn-copy-note-link"
           >
-            Copy link
+            {{ __('Copy link') }}
           </button>
         </li>
         <li v-if="canEdit">
@@ -264,7 +245,7 @@ export default {
             type="button"
             @click.prevent="onDelete">
             <span class="text-danger">
-              Delete comment
+              {{ __('Delete comment') }}
             </span>
           </button>
         </li>
diff --git a/app/assets/javascripts/notes/components/note_awards_list.vue b/app/assets/javascripts/notes/components/note_awards_list.vue
index df7ab4502a6..401bcfabbe4 100644
--- a/app/assets/javascripts/notes/components/note_awards_list.vue
+++ b/app/assets/javascripts/notes/components/note_awards_list.vue
@@ -1,13 +1,14 @@
 <script>
 import { mapActions, mapGetters } from 'vuex';
-import emojiSmiling from 'icons/_emoji_slightly_smiling_face.svg';
-import emojiSmile from 'icons/_emoji_smile.svg';
-import emojiSmiley from 'icons/_emoji_smiley.svg';
+import Icon from '~/vue_shared/components/icon.vue';
 import Flash from '../../flash';
 import { glEmojiTag } from '../../emoji';
 import tooltip from '../../vue_shared/directives/tooltip';
 
 export default {
+  components: {
+    Icon,
+  },
   directives: {
     tooltip,
   },
@@ -72,11 +73,6 @@ export default {
       return this.noteAuthorId === this.getUserData.id;
     },
   },
-  created() {
-    this.emojiSmiling = emojiSmiling;
-    this.emojiSmile = emojiSmile;
-    this.emojiSmiley = emojiSmiley;
-  },
   methods: {
     ...mapActions(['toggleAwardRequest']),
     getAwardHTML(name) {
@@ -196,17 +192,14 @@ export default {
           data-boundary="viewport"
           data-placement="bottom"
           type="button">
-          <span
-            class="award-control-icon award-control-icon-neutral"
-            v-html="emojiSmiling">
+          <span class="award-control-icon award-control-icon-neutral">
+            <icon name="emoji_slightly_smiling_face" />
           </span>
-          <span
-            class="award-control-icon award-control-icon-positive"
-            v-html="emojiSmiley">
+          <span class="award-control-icon award-control-icon-positive">
+            <icon name="emoji_smiley" />
           </span>
-          <span
-            class="award-control-icon award-control-icon-super-positive"
-            v-html="emojiSmile">
+          <span class="award-control-icon award-control-icon-super-positive">
+            <icon name="emoji_smiley" />
           </span>
           <i
             aria-hidden="true"
diff --git a/app/assets/javascripts/notes/components/note_form.vue b/app/assets/javascripts/notes/components/note_form.vue
index 38c43e5fe08..31ee8fed984 100644
--- a/app/assets/javascripts/notes/components/note_form.vue
+++ b/app/assets/javascripts/notes/components/note_form.vue
@@ -187,7 +187,7 @@ export default {
           :data-supports-quick-actions="!isEditing"
           name="note[note]"
           class="note-textarea js-gfm-input js-note-text
-js-autosize markdown-area js-vue-issue-note-form js-vue-textarea"
+js-autosize markdown-area js-vue-issue-note-form js-vue-textarea qa-reply-input"
           aria-label="Description"
           placeholder="Write a comment or drag your files here…"
           @keydown.meta.enter="handleUpdate()"
diff --git a/app/assets/javascripts/notes/components/note_header.vue b/app/assets/javascripts/notes/components/note_header.vue
index 7b6e7b72caf..dd7313d7b10 100644
--- a/app/assets/javascripts/notes/components/note_header.vue
+++ b/app/assets/javascripts/notes/components/note_header.vue
@@ -45,6 +45,9 @@ export default {
     noteTimestampLink() {
       return `#note_${this.noteId}`;
     },
+    hasAuthor() {
+      return this.author && Object.keys(this.author).length;
+    },
   },
   methods: {
     ...mapActions(['setTargetNoteHash']),
@@ -76,7 +79,7 @@ export default {
       </button>
     </div>
     <a
-      v-if="Object.keys(author).length"
+      v-if="hasAuthor"
       :href="author.path"
     >
       <span class="note-header-author-name">{{ author.name }}</span>
@@ -92,9 +95,6 @@ export default {
     </span>
     <span class="note-headline-light">
       <span class="note-headline-meta">
-        <template v-if="actionText">
-          {{ actionText }}
-        </template>
         <span class="system-note-message">
           <slot></slot>
         </span>
@@ -102,7 +102,9 @@ export default {
           v-if="createdAt"
         >
           <span class="system-note-separator">
-            &middot;
+            <template v-if="actionText">
+              {{ actionText }}
+            </template>
           </span>
           <a
             :href="noteTimestampLink"
diff --git a/app/assets/javascripts/notes/components/noteable_discussion.vue b/app/assets/javascripts/notes/components/noteable_discussion.vue
index c5fdfa1d47c..a153edd0476 100644
--- a/app/assets/javascripts/notes/components/noteable_discussion.vue
+++ b/app/assets/javascripts/notes/components/noteable_discussion.vue
@@ -1,16 +1,16 @@
 <script>
 import { mapActions, mapGetters } from 'vuex';
-import resolveDiscussionsSvg from 'icons/_icon_mr_issue.svg';
-import nextDiscussionsSvg from 'icons/_next_discussion.svg';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import { truncateSha } from '~/lib/utils/text_utility';
-import systemNote from '~/vue_shared/components/notes/system_note.vue';
 import { s__ } from '~/locale';
+import systemNote from '~/vue_shared/components/notes/system_note.vue';
+import icon from '~/vue_shared/components/icon.vue';
 import Flash from '../../flash';
 import { SYSTEM_NOTE } from '../constants';
 import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
 import noteableNote from './noteable_note.vue';
 import noteHeader from './note_header.vue';
+import toggleRepliesWidget from './toggle_replies_widget.vue';
 import noteSignedOutWidget from './note_signed_out_widget.vue';
 import noteEditedText from './note_edited_text.vue';
 import noteForm from './note_form.vue';
@@ -26,6 +26,7 @@ import tooltip from '../../vue_shared/directives/tooltip';
 export default {
   name: 'NoteableDiscussion',
   components: {
+    icon,
     noteableNote,
     diffWithNote,
     userAvatarLink,
@@ -33,6 +34,7 @@ export default {
     noteSignedOutWidget,
     noteEditedText,
     noteForm,
+    toggleRepliesWidget,
     placeholderNote,
     placeholderSystemNote,
     systemNote,
@@ -46,11 +48,6 @@ export default {
       type: Object,
       required: true,
     },
-    renderHeader: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
     renderDiffFile: {
       type: Boolean,
       required: false,
@@ -72,6 +69,7 @@ export default {
       isReplying: false,
       isResolving: false,
       resolveAsThread: true,
+      isRepliesCollapsed: (!this.discussion.diff_discussion && this.discussion.resolved) || false,
     };
   },
   computed: {
@@ -112,6 +110,15 @@ export default {
     newNotePath() {
       return this.getNoteableData.create_note_path;
     },
+    hasReplies() {
+      return this.discussion.notes.length > 1;
+    },
+    initialDiscussion() {
+      return this.discussion.notes.slice(0, 1)[0];
+    },
+    replies() {
+      return this.discussion.notes.slice(1);
+    },
     lastUpdatedBy() {
       const { notes } = this.discussion;
 
@@ -147,6 +154,12 @@ export default {
 
       return diffDiscussion && diffFile && this.renderDiffFile;
     },
+    shouldGroupReplies() {
+      return !this.shouldRenderDiffs && !this.transformedDiscussion.diffDiscussion;
+    },
+    shouldRenderHeader() {
+      return this.shouldRenderDiffs;
+    },
     wrapperComponent() {
       return this.shouldRenderDiffs ? diffWithNote : 'div';
     },
@@ -160,6 +173,22 @@ export default {
     wrapperClass() {
       return this.isDiffDiscussion ? '' : 'card discussion-wrapper';
     },
+    componentClassName() {
+      if (this.shouldRenderDiffs) {
+        if (!this.lastUpdatedAt && !this.discussion.resolved) {
+          return 'unresolved';
+        }
+      }
+
+      return '';
+    },
+    shouldShowDiscussions() {
+      const isExpanded = this.discussion.expanded;
+      const { diffDiscussion, resolved } = this.transformedDiscussion;
+      const isResolvedNonDiffDiscussion = !diffDiscussion && resolved;
+
+      return isExpanded || this.alwaysExpanded || isResolvedNonDiffDiscussion;
+    },
   },
   watch: {
     isReplying() {
@@ -173,10 +202,6 @@ export default {
       }
     },
   },
-  created() {
-    this.resolveDiscussionsSvg = resolveDiscussionsSvg;
-    this.nextDiscussionsSvg = nextDiscussionsSvg;
-  },
   methods: {
     ...mapActions([
       'saveNote',
@@ -207,6 +232,9 @@ export default {
     toggleDiscussionHandler() {
       this.toggleDiscussion({ discussionId: this.discussion.id });
     },
+    toggleReplies() {
+      this.isRepliesCollapsed = !this.isRepliesCollapsed;
+    },
     showReplyForm() {
       this.isReplying = true;
     },
@@ -274,26 +302,29 @@ Please check your network connection and try again.`;
 </script>
 
 <template>
-  <li class="note note-discussion timeline-entry">
+  <li
+    class="note note-discussion timeline-entry"
+    :class="componentClassName"
+  >
     <div class="timeline-entry-inner">
-      <div class="timeline-icon">
-        <user-avatar-link
-          v-if="author"
-          :link-href="author.path"
-          :img-src="author.avatar_url"
-          :img-alt="author.name"
-          :img-size="40"
-        />
-      </div>
       <div class="timeline-content">
         <div
           :data-discussion-id="transformedDiscussion.discussion_id"
           class="discussion js-discussion-container"
         >
           <div
-            v-if="renderHeader"
-            class="discussion-header"
+            v-if="shouldRenderHeader"
+            class="discussion-header note-wrapper"
           >
+            <div class="timeline-icon">
+              <user-avatar-link
+                v-if="author"
+                :link-href="author.path"
+                :img-src="author.avatar_url"
+                :img-alt="author.name"
+                :img-size="40"
+              />
+            </div>
             <note-header
               :author="author"
               :created-at="transformedDiscussion.created_at"
@@ -339,7 +370,7 @@ Please check your network connection and try again.`;
             />
           </div>
           <div
-            v-if="discussion.expanded || alwaysExpanded"
+            v-if="shouldShowDiscussions"
             class="discussion-body">
             <component
               :is="wrapperComponent"
@@ -348,38 +379,70 @@ Please check your network connection and try again.`;
             >
               <div class="discussion-notes">
                 <ul class="notes">
-                  <component
-                    :is="componentName(note)"
-                    v-for="note in discussion.notes"
-                    :key="note.id"
-                    :note="componentData(note)"
-                    @handleDeleteNote="deleteNoteHandler"
-                  />
+                  <template v-if="shouldGroupReplies">
+                    <component
+                      :is="componentName(initialDiscussion)"
+                      :note="componentData(initialDiscussion)"
+                      @handleDeleteNote="deleteNoteHandler"
+                    >
+                      <slot
+                        slot="avatar-badge"
+                        name="avatar-badge"
+                      >
+                      </slot>
+                    </component>
+                    <toggle-replies-widget
+                      v-if="hasReplies"
+                      :collapsed="isRepliesCollapsed"
+                      :replies="replies"
+                      @toggle="toggleReplies"
+                    />
+                    <template v-if="!isRepliesCollapsed">
+                      <component
+                        :is="componentName(note)"
+                        v-for="note in replies"
+                        :key="note.id"
+                        :note="componentData(note)"
+                        @handleDeleteNote="deleteNoteHandler"
+                      />
+                    </template>
+                  </template>
+                  <template v-else>
+                    <component
+                      :is="componentName(note)"
+                      v-for="(note, index) in discussion.notes"
+                      :key="note.id"
+                      :note="componentData(note)"
+                      @handleDeleteNote="deleteNoteHandler"
+                    >
+                      <slot
+                        v-if="index === 0"
+                        slot="avatar-badge"
+                        name="avatar-badge"
+                      >
+                      </slot>
+                    </component>
+                  </template>
                 </ul>
                 <div
+                  v-if="!isRepliesCollapsed"
                   :class="{ 'is-replying': isReplying }"
                   class="discussion-reply-holder"
                 >
                   <template v-if="!isReplying && canReply">
-                    <div
-                      class="btn-group d-flex discussion-with-resolve-btn"
-                      role="group">
-                      <div
-                        class="btn-group w-100"
-                        role="group">
-                        <button
-                          type="button"
-                          class="js-vue-discussion-reply btn btn-text-field mr-2"
-                          title="Add a reply"
-                          @click="showReplyForm">Reply...</button>
-                      </div>
-                      <div
-                        v-if="discussion.resolvable"
-                        class="btn-group"
-                        role="group">
+                    <div class="discussion-with-resolve-btn">
+                      <button
+                        type="button"
+                        class="js-vue-discussion-reply btn btn-text-field mr-2 qa-discussion-reply"
+                        title="Add a reply"
+                        @click="showReplyForm"
+                      >
+                        Reply...
+                      </button>
+                      <div v-if="discussion.resolvable">
                         <button
                           type="button"
-                          class="btn btn-default"
+                          class="btn btn-default mx-sm-2"
                           @click="resolveHandler()"
                         >
                           <i
@@ -407,7 +470,7 @@ Please check your network connection and try again.`;
                               btn-default discussion-create-issue-btn"
                             data-container="body"
                           >
-                            <span v-html="resolveDiscussionsSvg"></span>
+                            <icon name="issue-new" />
                           </a>
                         </div>
                         <div
@@ -421,7 +484,7 @@ Please check your network connection and try again.`;
                             data-container="body"
                             @click="jumpToNextDiscussion"
                           >
-                            <span v-html="nextDiscussionsSvg"></span>
+                            <icon name="comment-next" />
                           </button>
                         </div>
                       </div>
diff --git a/app/assets/javascripts/notes/components/noteable_note.vue b/app/assets/javascripts/notes/components/noteable_note.vue
index f391ed848a4..e302a89ee95 100644
--- a/app/assets/javascripts/notes/components/noteable_note.vue
+++ b/app/assets/javascripts/notes/components/noteable_note.vue
@@ -173,7 +173,7 @@ export default {
     :class="classNameBindings"
     :data-award-url="note.toggle_award_path"
     :data-note-id="note.id"
-    class="note timeline-entry"
+    class="note timeline-entry note-wrapper"
   >
     <div class="timeline-entry-inner">
       <div class="timeline-icon">
@@ -182,7 +182,13 @@ export default {
           :img-src="author.avatar_url"
           :img-alt="author.name"
           :img-size="40"
-        />
+        >
+          <slot
+            slot="avatar-badge"
+            name="avatar-badge"
+          >
+          </slot>
+        </user-avatar-link>
       </div>
       <div class="timeline-content">
         <div class="note-header">
@@ -190,6 +196,7 @@ export default {
             :author="author"
             :created-at="note.created_at"
             :note-id="note.id"
+            action-text="commented"
           />
           <note-actions
             :author-id="author.id"
diff --git a/app/assets/javascripts/notes/components/notes_app.vue b/app/assets/javascripts/notes/components/notes_app.vue
index 7514ce8a1eb..ed5ac112dc0 100644
--- a/app/assets/javascripts/notes/components/notes_app.vue
+++ b/app/assets/javascripts/notes/components/notes_app.vue
@@ -60,6 +60,7 @@ export default {
       'getNotesDataByProp',
       'discussionCount',
       'isLoading',
+      'commentsDisabled',
     ]),
     noteableType() {
       return this.noteableData.noteableType;
@@ -206,6 +207,7 @@ export default {
     </ul>
 
     <comment-form
+      v-if="!commentsDisabled"
       :noteable-type="noteableType"
       :markdown-version="markdownVersion"
     />
diff --git a/app/assets/javascripts/notes/components/toggle_replies_widget.vue b/app/assets/javascripts/notes/components/toggle_replies_widget.vue
new file mode 100644
index 00000000000..78ecbbb9247
--- /dev/null
+++ b/app/assets/javascripts/notes/components/toggle_replies_widget.vue
@@ -0,0 +1,94 @@
+<script>
+import _ from 'underscore';
+import Icon from '~/vue_shared/components/icon.vue';
+import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
+import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+
+export default {
+  components: {
+    Icon,
+    UserAvatarLink,
+    TimeAgoTooltip,
+  },
+  props: {
+    collapsed: {
+      type: Boolean,
+      required: true,
+    },
+    replies: {
+      type: Array,
+      required: true,
+    },
+  },
+  computed: {
+    lastReply() {
+      return this.replies[this.replies.length - 1];
+    },
+    uniqueAuthors() {
+      const authors = this.replies.map(reply => reply.author || {});
+
+      return _.uniq(authors, author => author.username);
+    },
+    className() {
+      return this.collapsed ? 'collapsed' : 'expanded';
+    },
+  },
+  methods: {
+    toggle() {
+      this.$emit('toggle');
+    },
+  },
+};
+</script>
+
+<template>
+  <li
+    :class="className"
+    class="replies-toggle"
+  >
+    <template v-if="collapsed">
+      <icon
+        name="chevron-right"
+        @click.native="toggle"
+      />
+      <div>
+        <user-avatar-link
+          v-for="author in uniqueAuthors"
+          :key="author.username"
+          :link-href="author.path"
+          :img-alt="author.name"
+          :img-src="author.avatar_url"
+          :img-size="26"
+          :tooltip-text="author.name"
+          tooltip-placement="bottom"
+        />
+      </div>
+      <button
+        class="btn btn-link js-replies-text"
+        type="button"
+        @click="toggle"
+      >
+        {{ replies.length }} {{ n__('reply', 'replies', replies.length) }}
+      </button>
+      {{ __('Last reply by') }}
+      <a
+        :href="lastReply.author.path"
+        class="btn btn-link author-link"
+      >
+        {{ lastReply.author.name }}
+      </a>
+      <time-ago-tooltip
+        :time="lastReply.created_at"
+        tooltip-placement="bottom"
+      />
+    </template>
+    <span
+      v-else
+      class="collapse-replies-btn js-collapse-replies"
+      @click="toggle"
+    >
+      <icon name="chevron-down" />
+      {{ s__('Notes|Collapse replies') }}
+    </span>
+  </li>
+</template>