Merge branch 'master' into michel.engelen/gitlab-ce-issue/55953

32 files changed, 530 insertions, 214 deletions

diff --git a/app/assets/javascripts/diffs/components/diff_discussion_reply.vue b/app/assets/javascripts/diffs/components/diff_discussion_reply.vue
new file mode 100644
index 00000000000..2aa5e9b3339
--- /dev/null
+++ b/app/assets/javascripts/diffs/components/diff_discussion_reply.vue
@@ -0,0 +1,55 @@
+<script>
+import { mapGetters } from 'vuex';
+import NoteSignedOutWidget from '~/notes/components/note_signed_out_widget.vue';
+import ReplyPlaceholder from '~/notes/components/discussion_reply_placeholder.vue';
+import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
+
+export default {
+  name: 'DiffDiscussionReply',
+  components: {
+    NoteSignedOutWidget,
+    ReplyPlaceholder,
+    UserAvatarLink,
+  },
+  props: {
+    hasForm: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    renderReplyPlaceholder: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  computed: {
+    ...mapGetters({
+      currentUser: 'getUserData',
+      userCanReply: 'userCanReply',
+    }),
+  },
+};
+</script>
+
+<template>
+  <div class="discussion-reply-holder d-flex clearfix">
+    <template v-if="userCanReply">
+      <slot v-if="hasForm" name="form"></slot>
+      <template v-else-if="renderReplyPlaceholder">
+        <user-avatar-link
+          :link-href="currentUser.path"
+          :img-src="currentUser.avatar_url"
+          :img-alt="currentUser.name"
+          :img-size="40"
+          class="d-none d-sm-block"
+        />
+        <reply-placeholder
+          class="qa-discussion-reply"
+          :button-text="__('Start a new discussion...')"
+          @onClick="$emit('showNewDiscussionForm')"
+        />
+      </template>
+    </template>
+    <note-signed-out-widget v-else />
+  </div>
+</template>
diff --git a/app/assets/javascripts/diffs/components/diff_discussions.vue b/app/assets/javascripts/diffs/components/diff_discussions.vue
index 4c73eea4049..b0460bacff2 100644
--- a/app/assets/javascripts/diffs/components/diff_discussions.vue
+++ b/app/assets/javascripts/diffs/components/diff_discussions.vue
@@ -80,7 +80,6 @@ export default {
           v-show="isExpanded(discussion)"
           :discussion="discussion"
           :render-diff-file="false"
-          :always-expanded="true"
           :discussions-by-diff-order="true"
           :line="line"
           :help-page-path="helpPagePath"
diff --git a/app/assets/javascripts/diffs/components/diff_file_header.vue b/app/assets/javascripts/diffs/components/diff_file_header.vue
index eb9f1465945..4b226e30699 100644
--- a/app/assets/javascripts/diffs/components/diff_file_header.vue
+++ b/app/assets/javascripts/diffs/components/diff_file_header.vue
@@ -151,7 +151,11 @@ export default {
     stickyMonitor(this.$refs.header, contentTop() - fileHeaderHeight - 1, false);
   },
   methods: {
-    ...mapActions('diffs', ['toggleFileDiscussions', 'toggleFullDiff']),
+    ...mapActions('diffs', [
+      'toggleFileDiscussions',
+      'toggleFileDiscussionWrappers',
+      'toggleFullDiff',
+    ]),
     handleToggleFile(e, checkTarget) {
       if (
         !checkTarget ||
@@ -165,7 +169,7 @@ export default {
       this.$emit('showForkMessage');
     },
     handleToggleDiscussions() {
-      this.toggleFileDiscussions(this.diffFile);
+      this.toggleFileDiscussionWrappers(this.diffFile);
     },
     handleFileNameClick(e) {
       const isLinkToOtherPage =
diff --git a/app/assets/javascripts/diffs/components/diff_gutter_avatars.vue b/app/assets/javascripts/diffs/components/diff_gutter_avatars.vue
index e28909b7be3..af5550aec3b 100644
--- a/app/assets/javascripts/diffs/components/diff_gutter_avatars.vue
+++ b/app/assets/javascripts/diffs/components/diff_gutter_avatars.vue
@@ -1,5 +1,4 @@
 <script>
-import { mapActions } from 'vuex';
 import Icon from '~/vue_shared/components/icon.vue';
 import { pluralize, truncate } from '~/lib/utils/text_utility';
 import UserAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue';
@@ -19,11 +18,13 @@ export default {
       type: Array,
       required: true,
     },
+    discussionsExpanded: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
-    discussionsExpanded() {
-      return this.discussions.every(discussion => discussion.expanded);
-    },
     allDiscussions() {
       return this.discussions.reduce((acc, note) => acc.concat(note.notes), []);
     },
@@ -45,26 +46,14 @@ export default {
     },
   },
   methods: {
-    ...mapActions(['toggleDiscussion']),
     getTooltipText(noteData) {
       let { note } = noteData;
-
       if (note.length > LENGTH_OF_AVATAR_TOOLTIP) {
         note = truncate(note, LENGTH_OF_AVATAR_TOOLTIP);
       }
 
       return `${noteData.author.name}: ${note}`;
     },
-    toggleDiscussions() {
-      const forceExpanded = this.discussions.some(discussion => !discussion.expanded);
-
-      this.discussions.forEach(discussion => {
-        this.toggleDiscussion({
-          discussionId: discussion.id,
-          forceExpanded,
-        });
-      });
-    },
   },
 };
 </script>
@@ -76,7 +65,7 @@ export default {
       type="button"
       :aria-label="__('Show comments')"
       class="diff-notes-collapse js-diff-comment-avatar js-diff-comment-button"
-      @click="toggleDiscussions"
+      @click="$emit('toggleLineDiscussions')"
     >
       <icon :size="12" name="collapse" />
     </button>
@@ -87,7 +76,7 @@ export default {
         :img-src="note.author.avatar_url"
         :tooltip-text="getTooltipText(note)"
         class="diff-comment-avatar js-diff-comment-avatar"
-        @click.native="toggleDiscussions"
+        @click.native="$emit('toggleLineDiscussions')"
       />
       <span
         v-if="moreText"
@@ -97,7 +86,7 @@ export default {
         data-container="body"
         data-placement="top"
         role="button"
-        @click="toggleDiscussions"
+        @click="$emit('toggleLineDiscussions')"
         >+{{ moreCount }}</span
       >
     </template>
diff --git a/app/assets/javascripts/diffs/components/diff_line_gutter_content.vue b/app/assets/javascripts/diffs/components/diff_line_gutter_content.vue
index 1281f9b17ef..351110f0a87 100644
--- a/app/assets/javascripts/diffs/components/diff_line_gutter_content.vue
+++ b/app/assets/javascripts/diffs/components/diff_line_gutter_content.vue
@@ -105,7 +105,13 @@ export default {
     },
   },
   methods: {
-    ...mapActions('diffs', ['loadMoreLines', 'showCommentForm', 'setHighlightedRow']),
+    ...mapActions('diffs', [
+      'loadMoreLines',
+      'showCommentForm',
+      'setHighlightedRow',
+      'toggleLineDiscussions',
+      'toggleLineDiscussionWrappers',
+    ]),
     handleCommentButton() {
       this.showCommentForm({ lineCode: this.line.line_code, fileHash: this.fileHash });
     },
@@ -184,7 +190,14 @@ export default {
         @click="setHighlightedRow(lineCode)"
       >
       </a>
-      <diff-gutter-avatars v-if="shouldShowAvatarsOnGutter" :discussions="line.discussions" />
+      <diff-gutter-avatars
+        v-if="shouldShowAvatarsOnGutter"
+        :discussions="line.discussions"
+        :discussions-expanded="line.discussionsExpanded"
+        @toggleLineDiscussions="
+          toggleLineDiscussions({ lineCode, fileHash, expanded: !line.discussionsExpanded })
+        "
+      />
     </template>
   </div>
 </template>
diff --git a/app/assets/javascripts/diffs/components/inline_diff_comment_row.vue b/app/assets/javascripts/diffs/components/inline_diff_comment_row.vue
index 1faa0493e79..ca3285e9afd 100644
--- a/app/assets/javascripts/diffs/components/inline_diff_comment_row.vue
+++ b/app/assets/javascripts/diffs/components/inline_diff_comment_row.vue
@@ -1,11 +1,14 @@
 <script>
-import diffDiscussions from './diff_discussions.vue';
-import diffLineNoteForm from './diff_line_note_form.vue';
+import { mapActions } from 'vuex';
+import DiffDiscussions from './diff_discussions.vue';
+import DiffLineNoteForm from './diff_line_note_form.vue';
+import DiffDiscussionReply from './diff_discussion_reply.vue';
 
 export default {
   components: {
-    diffDiscussions,
-    diffLineNoteForm,
+    DiffDiscussions,
+    DiffLineNoteForm,
+    DiffDiscussionReply,
   },
   props: {
     line: {
@@ -32,10 +35,12 @@ export default {
       if (!this.line.discussions || !this.line.discussions.length) {
         return false;
       }
-
-      return this.line.discussions.every(discussion => discussion.expanded);
+      return this.line.discussionsExpanded;
     },
   },
+  methods: {
+    ...mapActions('diffs', ['showCommentForm']),
+  },
 };
 </script>
 
@@ -49,13 +54,22 @@ export default {
           :discussions="line.discussions"
           :help-page-path="helpPagePath"
         />
-        <diff-line-note-form
-          v-if="line.hasForm"
-          :diff-file-hash="diffFileHash"
-          :line="line"
-          :note-target-line="line"
-          :help-page-path="helpPagePath"
-        />
+        <diff-discussion-reply
+          :has-form="line.hasForm"
+          :render-reply-placeholder="Boolean(line.discussions.length)"
+          @showNewDiscussionForm="
+            showCommentForm({ lineCode: line.line_code, fileHash: diffFileHash })
+          "
+        >
+          <template #form>
+            <diff-line-note-form
+              :diff-file-hash="diffFileHash"
+              :line="line"
+              :note-target-line="line"
+              :help-page-path="helpPagePath"
+            />
+          </template>
+        </diff-discussion-reply>
       </div>
     </td>
   </tr>
diff --git a/app/assets/javascripts/diffs/components/parallel_diff_comment_row.vue b/app/assets/javascripts/diffs/components/parallel_diff_comment_row.vue
index d2e54edca85..c00b0e010ff 100644
--- a/app/assets/javascripts/diffs/components/parallel_diff_comment_row.vue
+++ b/app/assets/javascripts/diffs/components/parallel_diff_comment_row.vue
@@ -1,11 +1,14 @@
 <script>
-import diffDiscussions from './diff_discussions.vue';
-import diffLineNoteForm from './diff_line_note_form.vue';
+import { mapActions } from 'vuex';
+import DiffDiscussions from './diff_discussions.vue';
+import DiffLineNoteForm from './diff_line_note_form.vue';
+import DiffDiscussionReply from './diff_discussion_reply.vue';
 
 export default {
   components: {
-    diffDiscussions,
-    diffLineNoteForm,
+    DiffDiscussions,
+    DiffLineNoteForm,
+    DiffDiscussionReply,
   },
   props: {
     line: {
@@ -29,24 +32,30 @@ export default {
   computed: {
     hasExpandedDiscussionOnLeft() {
       return this.line.left && this.line.left.discussions.length
-        ? this.line.left.discussions.every(discussion => discussion.expanded)
+        ? this.line.left.discussionsExpanded
         : false;
     },
     hasExpandedDiscussionOnRight() {
       return this.line.right && this.line.right.discussions.length
-        ? this.line.right.discussions.every(discussion => discussion.expanded)
+        ? this.line.right.discussionsExpanded
         : false;
     },
     hasAnyExpandedDiscussion() {
       return this.hasExpandedDiscussionOnLeft || this.hasExpandedDiscussionOnRight;
     },
     shouldRenderDiscussionsOnLeft() {
-      return this.line.left && this.line.left.discussions && this.hasExpandedDiscussionOnLeft;
+      return (
+        this.line.left &&
+        this.line.left.discussions &&
+        this.line.left.discussions.length &&
+        this.hasExpandedDiscussionOnLeft
+      );
     },
     shouldRenderDiscussionsOnRight() {
       return (
         this.line.right &&
         this.line.right.discussions &&
+        this.line.right.discussions.length &&
         this.hasExpandedDiscussionOnRight &&
         this.line.right.type
       );
@@ -81,6 +90,22 @@ export default {
 
       return hasCommentFormOnLeft || hasCommentFormOnRight;
     },
+    shouldRenderReplyPlaceholderOnLeft() {
+      return Boolean(
+        this.line.left && this.line.left.discussions && this.line.left.discussions.length,
+      );
+    },
+    shouldRenderReplyPlaceholderOnRight() {
+      return Boolean(
+        this.line.right && this.line.right.discussions && this.line.right.discussions.length,
+      );
+    },
+  },
+  methods: {
+    ...mapActions('diffs', ['showCommentForm']),
+    showNewDiscussionForm() {
+      this.showCommentForm({ lineCode: this.line.line_code, fileHash: this.diffFileHash });
+    },
   },
 };
 </script>
@@ -90,37 +115,49 @@ export default {
     <td class="notes-content parallel old" colspan="2">
       <div v-if="shouldRenderDiscussionsOnLeft" class="content">
         <diff-discussions
-          v-if="line.left.discussions.length"
           :discussions="line.left.discussions"
           :line="line.left"
           :help-page-path="helpPagePath"
         />
       </div>
-      <diff-line-note-form
-        v-if="showLeftSideCommentForm"
-        :diff-file-hash="diffFileHash"
-        :line="line.left"
-        :note-target-line="line.left"
-        :help-page-path="helpPagePath"
-        line-position="left"
-      />
+      <diff-discussion-reply
+        :has-form="showLeftSideCommentForm"
+        :render-reply-placeholder="shouldRenderReplyPlaceholderOnLeft"
+        @showNewDiscussionForm="showNewDiscussionForm"
+      >
+        <template #form>
+          <diff-line-note-form
+            :diff-file-hash="diffFileHash"
+            :line="line.left"
+            :note-target-line="line.left"
+            :help-page-path="helpPagePath"
+            line-position="left"
+          />
+        </template>
+      </diff-discussion-reply>
     </td>
     <td class="notes-content parallel new" colspan="2">
       <div v-if="shouldRenderDiscussionsOnRight" class="content">
         <diff-discussions
-          v-if="line.right.discussions.length"
           :discussions="line.right.discussions"
           :line="line.right"
           :help-page-path="helpPagePath"
         />
       </div>
-      <diff-line-note-form
-        v-if="showRightSideCommentForm"
-        :diff-file-hash="diffFileHash"
-        :line="line.right"
-        :note-target-line="line.right"
-        line-position="right"
-      />
+      <diff-discussion-reply
+        :has-form="showRightSideCommentForm"
+        :render-reply-placeholder="shouldRenderReplyPlaceholderOnRight"
+        @showNewDiscussionForm="showNewDiscussionForm"
+      >
+        <template #form>
+          <diff-line-note-form
+            :diff-file-hash="diffFileHash"
+            :line="line.right"
+            :note-target-line="line.right"
+            line-position="right"
+          />
+        </template>
+      </diff-discussion-reply>
     </td>
   </tr>
 </template>
diff --git a/app/assets/javascripts/diffs/store/actions.js b/app/assets/javascripts/diffs/store/actions.js
index 88d7b4bba63..32e0d8f42ee 100644
--- a/app/assets/javascripts/diffs/store/actions.js
+++ b/app/assets/javascripts/diffs/store/actions.js
@@ -12,6 +12,7 @@ import {
   getNoteFormData,
   convertExpandLines,
   idleCallback,
+  allDiscussionWrappersExpanded,
 } from './utils';
 import * as types from './mutation_types';
 import {
@@ -79,6 +80,7 @@ export const assignDiscussionsToDiff = (
   discussions = rootState.notes.discussions,
 ) => {
   const diffPositionByLineCode = getDiffPositionByLineCode(state.diffFiles);
+  const hash = getLocationHash();
 
   discussions
     .filter(discussion => discussion.diff_discussion)
@@ -86,6 +88,7 @@ export const assignDiscussionsToDiff = (
       commit(types.SET_LINE_DISCUSSIONS_FOR_FILE, {
         discussion,
         diffPositionByLineCode,
+        hash,
       });
     });
 
@@ -99,6 +102,10 @@ export const removeDiscussionsFromDiff = ({ commit }, removeDiscussion) => {
   commit(types.REMOVE_LINE_DISCUSSIONS_FOR_FILE, { fileHash: file_hash, lineCode: line_code, id });
 };
 
+export const toggleLineDiscussions = ({ commit }, options) => {
+  commit(types.TOGGLE_LINE_DISCUSSIONS, options);
+};
+
 export const renderFileForDiscussionId = ({ commit, rootState, state }, discussionId) => {
   const discussion = rootState.notes.discussions.find(d => d.id === discussionId);
 
@@ -257,6 +264,31 @@ export const toggleFileDiscussions = ({ getters, dispatch }, diff) => {
   });
 };
 
+export const toggleFileDiscussionWrappers = ({ commit }, diff) => {
+  const discussionWrappersExpanded = allDiscussionWrappersExpanded(diff);
+  let linesWithDiscussions;
+  if (diff.highlighted_diff_lines) {
+    linesWithDiscussions = diff.highlighted_diff_lines.filter(line => line.discussions.length);
+  }
+  if (diff.parallel_diff_lines) {
+    linesWithDiscussions = diff.parallel_diff_lines.filter(
+      line =>
+        (line.left && line.left.discussions.length) ||
+        (line.right && line.right.discussions.length),
+    );
+  }
+
+  if (linesWithDiscussions.length) {
+    linesWithDiscussions.forEach(line => {
+      commit(types.TOGGLE_LINE_DISCUSSIONS, {
+        fileHash: diff.file_hash,
+        lineCode: line.line_code,
+        expanded: !discussionWrappersExpanded,
+      });
+    });
+  }
+};
+
 export const saveDiffDiscussion = ({ state, dispatch }, { note, formData }) => {
   const postData = getNoteFormData({
     commit: state.commit,
@@ -267,7 +299,7 @@ export const saveDiffDiscussion = ({ state, dispatch }, { note, formData }) => {
   return dispatch('saveNote', postData, { root: true })
     .then(result => dispatch('updateDiscussion', result.discussion, { root: true }))
     .then(discussion => dispatch('assignDiscussionsToDiff', [discussion]))
-    .then(() => dispatch('updateResolvableDiscussonsCounts', null, { root: true }))
+    .then(() => dispatch('updateResolvableDiscussionsCounts', null, { root: true }))
     .then(() => dispatch('closeDiffFileCommentForm', formData.diffFile.file_hash))
     .catch(() => createFlash(s__('MergeRequests|Saving the comment failed')));
 };
diff --git a/app/assets/javascripts/diffs/store/mutation_types.js b/app/assets/javascripts/diffs/store/mutation_types.js
index 8d6111da500..9db56331faa 100644
--- a/app/assets/javascripts/diffs/store/mutation_types.js
+++ b/app/assets/javascripts/diffs/store/mutation_types.js
@@ -35,3 +35,5 @@ export const ADD_CURRENT_VIEW_DIFF_FILE_LINES = 'ADD_CURRENT_VIEW_DIFF_FILE_LINE
 export const TOGGLE_DIFF_FILE_RENDERING_MORE = 'TOGGLE_DIFF_FILE_RENDERING_MORE';
 
 export const SET_SHOW_SUGGEST_POPOVER = 'SET_SHOW_SUGGEST_POPOVER';
+
+export const TOGGLE_LINE_DISCUSSIONS = 'TOGGLE_LINE_DISCUSSIONS';
diff --git a/app/assets/javascripts/diffs/store/mutations.js b/app/assets/javascripts/diffs/store/mutations.js
index 00181a63c43..a66f205bbbd 100644
--- a/app/assets/javascripts/diffs/store/mutations.js
+++ b/app/assets/javascripts/diffs/store/mutations.js
@@ -6,6 +6,7 @@ import {
   addContextLines,
   prepareDiffData,
   isDiscussionApplicableToLine,
+  updateLineInFile,
 } from './utils';
 import * as types from './mutation_types';
 
@@ -109,7 +110,7 @@ export default {
     }));
   },
 
-  [types.SET_LINE_DISCUSSIONS_FOR_FILE](state, { discussion, diffPositionByLineCode }) {
+  [types.SET_LINE_DISCUSSIONS_FOR_FILE](state, { discussion, diffPositionByLineCode, hash }) {
     const { latestDiff } = state;
 
     const discussionLineCode = discussion.line_code;
@@ -130,13 +131,27 @@ export default {
         : [],
     });
 
+    const setDiscussionsExpanded = line => {
+      const isLineNoteTargeted = line.discussions.some(
+        disc => disc.notes && disc.notes.find(note => hash === `note_${note.id}`),
+      );
+
+      return {
+        ...line,
+        discussionsExpanded:
+          line.discussions && line.discussions.length
+            ? line.discussions.some(disc => !disc.resolved) || isLineNoteTargeted
+            : false,
+      };
+    };
+
     state.diffFiles = state.diffFiles.map(diffFile => {
       if (diffFile.file_hash === fileHash) {
         const file = { ...diffFile };
 
         if (file.highlighted_diff_lines) {
           file.highlighted_diff_lines = file.highlighted_diff_lines.map(line =>
-            lineCheck(line) ? mapDiscussions(line) : line,
+            setDiscussionsExpanded(lineCheck(line) ? mapDiscussions(line) : line),
           );
         }
 
@@ -148,8 +163,10 @@ export default {
             if (left || right) {
               return {
                 ...line,
-                left: line.left ? mapDiscussions(line.left) : null,
-                right: line.right ? mapDiscussions(line.right, () => !left) : null,
+                left: line.left ? setDiscussionsExpanded(mapDiscussions(line.left)) : null,
+                right: line.right
+                  ? setDiscussionsExpanded(mapDiscussions(line.right, () => !left))
+                  : null,
               };
             }
 
@@ -173,32 +190,11 @@ export default {
   [types.REMOVE_LINE_DISCUSSIONS_FOR_FILE](state, { fileHash, lineCode }) {
     const selectedFile = state.diffFiles.find(f => f.file_hash === fileHash);
     if (selectedFile) {
-      if (selectedFile.parallel_diff_lines) {
-        const targetLine = selectedFile.parallel_diff_lines.find(
-          line =>
-            (line.left && line.left.line_code === lineCode) ||
-            (line.right && line.right.line_code === lineCode),
-        );
-        if (targetLine) {
-          const side = targetLine.left && targetLine.left.line_code === lineCode ? 'left' : 'right';
-
-          Object.assign(targetLine[side], {
-            discussions: targetLine[side].discussions.filter(discussion => discussion.notes.length),
-          });
-        }
-      }
-
-      if (selectedFile.highlighted_diff_lines) {
-        const targetInlineLine = selectedFile.highlighted_diff_lines.find(
-          line => line.line_code === lineCode,
-        );
-
-        if (targetInlineLine) {
-          Object.assign(targetInlineLine, {
-            discussions: targetInlineLine.discussions.filter(discussion => discussion.notes.length),
-          });
-        }
-      }
+      updateLineInFile(selectedFile, lineCode, line =>
+        Object.assign(line, {
+          discussions: line.discussions.filter(discussion => discussion.notes.length),
+        }),
+      );
 
       if (selectedFile.discussions && selectedFile.discussions.length) {
         selectedFile.discussions = selectedFile.discussions.filter(
@@ -207,6 +203,15 @@ export default {
       }
     }
   },
+
+  [types.TOGGLE_LINE_DISCUSSIONS](state, { fileHash, lineCode, expanded }) {
+    const selectedFile = state.diffFiles.find(f => f.file_hash === fileHash);
+
+    updateLineInFile(selectedFile, lineCode, line =>
+      Object.assign(line, { discussionsExpanded: expanded }),
+    );
+  },
+
   [types.TOGGLE_FOLDER_OPEN](state, path) {
     state.treeEntries[path].opened = !state.treeEntries[path].opened;
   },
diff --git a/app/assets/javascripts/diffs/store/utils.js b/app/assets/javascripts/diffs/store/utils.js
index 71956255eef..1c3ed84001c 100644
--- a/app/assets/javascripts/diffs/store/utils.js
+++ b/app/assets/javascripts/diffs/store/utils.js
@@ -454,3 +454,48 @@ export const convertExpandLines = ({
 };
 
 export const idleCallback = cb => requestIdleCallback(cb);
+
+export const updateLineInFile = (selectedFile, lineCode, updateFn) => {
+  if (selectedFile.parallel_diff_lines) {
+    const targetLine = selectedFile.parallel_diff_lines.find(
+      line =>
+        (line.left && line.left.line_code === lineCode) ||
+        (line.right && line.right.line_code === lineCode),
+    );
+    if (targetLine) {
+      const side = targetLine.left && targetLine.left.line_code === lineCode ? 'left' : 'right';
+
+      updateFn(targetLine[side]);
+    }
+  }
+  if (selectedFile.highlighted_diff_lines) {
+    const targetInlineLine = selectedFile.highlighted_diff_lines.find(
+      line => line.line_code === lineCode,
+    );
+
+    if (targetInlineLine) {
+      updateFn(targetInlineLine);
+    }
+  }
+};
+
+export const allDiscussionWrappersExpanded = diff => {
+  const discussionsExpandedArray = [];
+  if (diff.parallel_diff_lines) {
+    diff.parallel_diff_lines.forEach(line => {
+      if (line.left && line.left.discussions.length) {
+        discussionsExpandedArray.push(line.left.discussionsExpanded);
+      }
+      if (line.right && line.right.discussions.length) {
+        discussionsExpandedArray.push(line.right.discussionsExpanded);
+      }
+    });
+  } else if (diff.highlighted_diff_lines) {
+    diff.parallel_diff_lines.forEach(line => {
+      if (line.discussions.length) {
+        discussionsExpandedArray.push(line.discussionsExpanded);
+      }
+    });
+  }
+  return discussionsExpandedArray.every(el => el);
+};
diff --git a/app/assets/javascripts/group.js b/app/assets/javascripts/group.js
index 903c838e266..460174caf4d 100644
--- a/app/assets/javascripts/group.js
+++ b/app/assets/javascripts/group.js
@@ -1,5 +1,5 @@
 import $ from 'jquery';
-import { slugifyWithHyphens } from './lib/utils/text_utility';
+import { slugify } from './lib/utils/text_utility';
 
 export default class Group {
   constructor() {
@@ -14,7 +14,7 @@ export default class Group {
   }
 
   update() {
-    const slug = slugifyWithHyphens(this.groupName.val());
+    const slug = slugify(this.groupName.val());
     this.groupPath.val(slug);
   }
 
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
index 4be4b02ac1e..c8fbc3cb9f1 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
@@ -107,7 +107,8 @@ export default {
       @click="openFileInEditor"
     >
       <span class="multi-file-commit-list-file-path d-flex align-items-center">
-        <file-icon :file-name="file.name" class="append-right-8" />{{ file.name }}
+        <file-icon :file-name="file.name" class="append-right-8" />
+        {{ file.name }}
       </span>
       <div class="ml-auto d-flex align-items-center">
         <div class="d-flex align-items-center ide-commit-list-changed-icon">
diff --git a/app/assets/javascripts/ide/components/external_link.vue b/app/assets/javascripts/ide/components/external_link.vue
index 954f84cea17..d1857f0176a 100644
--- a/app/assets/javascripts/ide/components/external_link.vue
+++ b/app/assets/javascripts/ide/components/external_link.vue
@@ -27,7 +27,7 @@ export default {
       target="_blank"
       rel="noopener noreferrer"
     >
-      <span class="vertical-align-middle">Open in file view</span>
+      <span class="vertical-align-middle">{{ __('Open in file view') }}</span>
       <icon :size="16" name="external-link" css-classes="vertical-align-middle space-right" />
     </a>
   </div>
diff --git a/app/assets/javascripts/ide/components/repo_editor.vue b/app/assets/javascripts/ide/components/repo_editor.vue
index f952b1e7b80..5fcb11a232e 100644
--- a/app/assets/javascripts/ide/components/repo_editor.vue
+++ b/app/assets/javascripts/ide/components/repo_editor.vue
@@ -8,6 +8,7 @@ import { activityBarViews, viewerTypes } from '../constants';
 import Editor from '../lib/editor';
 import ExternalLink from './external_link.vue';
 import FileTemplatesBar from './file_templates/bar.vue';
+import { __ } from '~/locale';
 
 export default {
   components: {
@@ -160,7 +161,14 @@ export default {
           this.createEditorInstance();
         })
         .catch(err => {
-          flash('Error setting up editor. Please try again.', 'alert', document, null, false, true);
+          flash(
+            __('Error setting up editor. Please try again.'),
+            'alert',
+            document,
+            null,
+            false,
+            true,
+          );
           throw err;
         });
     },
@@ -247,12 +255,8 @@ export default {
             role="button"
             @click.prevent="setFileViewMode({ file, viewMode: 'editor' })"
           >
-            <template v-if="viewer === $options.viewerTypes.edit">
-              {{ __('Edit') }}
-            </template>
-            <template v-else>
-              {{ __('Review') }}
-            </template>
+            <template v-if="viewer === $options.viewerTypes.edit">{{ __('Edit') }}</template>
+            <template v-else>{{ __('Review') }}</template>
           </a>
         </li>
         <li v-if="file.previewMode" :class="previewTabCSS">
@@ -260,9 +264,8 @@ export default {
             href="javascript:void(0);"
             role="button"
             @click.prevent="setFileViewMode({ file, viewMode: 'preview' })"
+            >{{ file.previewMode.previewTitle }}</a
           >
-            {{ file.previewMode.previewTitle }}
-          </a>
         </li>
       </ul>
       <external-link :file="file" />
diff --git a/app/assets/javascripts/ide/components/repo_file_status_icon.vue b/app/assets/javascripts/ide/components/repo_file_status_icon.vue
index a964d90b090..84a962bfc7d 100644
--- a/app/assets/javascripts/ide/components/repo_file_status_icon.vue
+++ b/app/assets/javascripts/ide/components/repo_file_status_icon.vue
@@ -1,4 +1,5 @@
 <script>
+import { __, sprintf } from '~/locale';
 import icon from '~/vue_shared/components/icon.vue';
 import tooltip from '~/vue_shared/directives/tooltip';
 import '~/lib/utils/datetime_utility';
@@ -18,7 +19,9 @@ export default {
   },
   computed: {
     lockTooltip() {
-      return `Locked by ${this.file.file_lock.user.name}`;
+      return sprintf(__(`Locked by %{fileLockUserName}`), {
+        fileLockUserName: this.file.file_lock.user.name,
+      });
     },
   },
 };
diff --git a/app/assets/javascripts/ide/components/repo_tab.vue b/app/assets/javascripts/ide/components/repo_tab.vue
index f6aa2295844..7615cfc966e 100644
--- a/app/assets/javascripts/ide/components/repo_tab.vue
+++ b/app/assets/javascripts/ide/components/repo_tab.vue
@@ -1,4 +1,5 @@
 <script>
+import { __, sprintf } from '~/locale';
 import { mapActions } from 'vuex';
 
 import FileIcon from '~/vue_shared/components/file_icon.vue';
@@ -27,9 +28,9 @@ export default {
   computed: {
     closeLabel() {
       if (this.fileHasChanged) {
-        return `${this.tab.name} changed`;
+        return sprintf(__(`%{tabname} changed`), { tabname: this.tab.name });
       }
-      return `Close ${this.tab.name}`;
+      return sprintf(__(`Close %{tabname}`, { tabname: this.tab.name }));
     },
     showChangedIcon() {
       if (this.tab.pending) return true;
diff --git a/app/assets/javascripts/lib/utils/text_utility.js b/app/assets/javascripts/lib/utils/text_utility.js
index cc1d85fd97d..d38f59b5861 100644
--- a/app/assets/javascripts/lib/utils/text_utility.js
+++ b/app/assets/javascripts/lib/utils/text_utility.js
@@ -44,11 +44,18 @@ export const pluralize = (str, count) => str + (count > 1 || count === 0 ? 's' :
 export const dasherize = str => str.replace(/[_\s]+/g, '-');
 
 /**
- * Replaces whitespaces with hyphens and converts to lower case
+ * Replaces whitespaces with hyphens, convert to lower case and remove non-allowed special characters
  * @param {String} str
  * @returns {String}
  */
-export const slugifyWithHyphens = str => str.toLowerCase().replace(/\s+/g, '-');
+export const slugify = str => {
+  const slug = str
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-zA-Z0-9_.-]+/g, '-');
+
+  return slug === '-' ? '' : slug;
+};
 
 /**
  * Replaces whitespaces with underscore and converts to lower case
diff --git a/app/assets/javascripts/manual_ordering.js b/app/assets/javascripts/manual_ordering.js
index e16ddbfef7e..012d1e70410 100644
--- a/app/assets/javascripts/manual_ordering.js
+++ b/app/assets/javascripts/manual_ordering.js
@@ -21,7 +21,7 @@ const updateIssue = (url, issueList, { move_before_id, move_after_id }) =>
 const initManualOrdering = () => {
   const issueList = document.querySelector('.manual-ordering');
 
-  if (!issueList || !(gon.features && gon.features.manualSorting)) {
+  if (!issueList || !(gon.features && gon.features.manualSorting) || !(gon.current_user_id > 0)) {
     return;
   }
 
diff --git a/app/assets/javascripts/notes/components/discussion_actions.vue b/app/assets/javascripts/notes/components/discussion_actions.vue
index 1357a5268d6..f4570c1292c 100644
--- a/app/assets/javascripts/notes/components/discussion_actions.vue
+++ b/app/assets/javascripts/notes/components/discussion_actions.vue
@@ -39,15 +39,23 @@ export default {
 </script>
 
 <template>
-  <div class="discussion-with-resolve-btn clearfix">
-    <reply-placeholder class="qa-discussion-reply" @onClick="$emit('showReplyForm')" />
-
-    <div class="btn-group discussion-actions" role="group">
-      <resolve-discussion-button
-        v-if="discussion.resolvable"
-        :is-resolving="isResolving"
-        :button-title="resolveButtonTitle"
-        @onClick="$emit('resolve')"
+  <div class="discussion-with-resolve-btn">
+    <reply-placeholder
+      :button-text="s__('MergeRequests|Reply...')"
+      class="qa-discussion-reply"
+      @onClick="$emit('showReplyForm')"
+    />
+    <resolve-discussion-button
+      v-if="discussion.resolvable"
+      :is-resolving="isResolving"
+      :button-title="resolveButtonTitle"
+      @onClick="$emit('resolve')"
+    />
+    <div v-if="discussion.resolvable" class="btn-group discussion-actions ml-sm-2" role="group">
+      <resolve-with-issue-button v-if="resolveWithIssuePath" :url="resolveWithIssuePath" />
+      <jump-to-next-discussion-button
+        v-if="shouldShowJumpToNextDiscussion"
+        @onClick="$emit('jumpToNextDiscussion')"
       />
       <resolve-with-issue-button
         v-if="discussion.resolvable && resolveWithIssuePath"
diff --git a/app/assets/javascripts/notes/components/discussion_notes.vue b/app/assets/javascripts/notes/components/discussion_notes.vue
index 30971ad5227..2ff0fee62f3 100644
--- a/app/assets/javascripts/notes/components/discussion_notes.vue
+++ b/app/assets/javascripts/notes/components/discussion_notes.vue
@@ -1,11 +1,11 @@
 <script>
-import { mapGetters } from 'vuex';
+import { mapGetters, mapActions } from 'vuex';
 import { SYSTEM_NOTE } from '../constants';
 import { __ } from '~/locale';
-import NoteableNote from './noteable_note.vue';
-import PlaceholderNote from '../../vue_shared/components/notes/placeholder_note.vue';
-import PlaceholderSystemNote from '../../vue_shared/components/notes/placeholder_system_note.vue';
+import PlaceholderNote from '~/vue_shared/components/notes/placeholder_note.vue';
+import PlaceholderSystemNote from '~/vue_shared/components/notes/placeholder_system_note.vue';
 import SystemNote from '~/vue_shared/components/notes/system_note.vue';
+import NoteableNote from './noteable_note.vue';
 import ToggleRepliesWidget from './toggle_replies_widget.vue';
 import NoteEditedText from './note_edited_text.vue';
 
@@ -72,6 +72,7 @@ export default {
     },
   },
   methods: {
+    ...mapActions(['toggleDiscussion']),
     componentName(note) {
       if (note.isPlaceholderNote) {
         if (note.placeholderType === SYSTEM_NOTE) {
@@ -101,7 +102,7 @@ export default {
         <component
           :is="componentName(firstNote)"
           :note="componentData(firstNote)"
-          :line="line"
+          :line="line || diffLine"
           :commit="commit"
           :help-page-path="helpPagePath"
           :show-reply-button="userCanReply"
@@ -118,23 +119,29 @@ export default {
           />
           <slot slot="avatar-badge" name="avatar-badge"></slot>
         </component>
-        <toggle-replies-widget
-          v-if="hasReplies"
-          :collapsed="!isExpanded"
-          :replies="replies"
-          @toggle="$emit('toggleDiscussion')"
-        />
-        <template v-if="isExpanded">
-          <component
-            :is="componentName(note)"
-            v-for="note in replies"
-            :key="note.id"
-            :note="componentData(note)"
-            :help-page-path="helpPagePath"
-            :line="line"
-            @handleDeleteNote="$emit('deleteNote')"
+        <div
+          :class="discussion.diff_discussion ? 'discussion-collapsible bordered-box clearfix' : ''"
+        >
+          <toggle-replies-widget
+            v-if="hasReplies"
+            :collapsed="!isExpanded"
+            :replies="replies"
+            :class="{ 'discussion-toggle-replies': discussion.diff_discussion }"
+            @toggle="toggleDiscussion({ discussionId: discussion.id })"
           />
-        </template>
+          <template v-if="isExpanded">
+            <component
+              :is="componentName(note)"
+              v-for="note in replies"
+              :key="note.id"
+              :note="componentData(note)"
+              :help-page-path="helpPagePath"
+              :line="line"
+              @handleDeleteNote="$emit('deleteNote')"
+            />
+          </template>
+          <slot :show-replies="isExpanded || !hasReplies" name="footer"></slot>
+        </div>
       </template>
       <template v-else>
         <component
@@ -148,8 +155,8 @@ export default {
         >
           <slot v-if="index === 0" slot="avatar-badge" name="avatar-badge"></slot>
         </component>
+        <slot :show-replies="isExpanded || !hasReplies" name="footer"></slot>
       </template>
     </ul>
-    <slot :show-replies="isExpanded || !hasReplies" name="footer"></slot>
   </div>
 </template>
diff --git a/app/assets/javascripts/notes/components/discussion_reply_placeholder.vue b/app/assets/javascripts/notes/components/discussion_reply_placeholder.vue
index ea590905e3c..0204169214b 100644
--- a/app/assets/javascripts/notes/components/discussion_reply_placeholder.vue
+++ b/app/assets/javascripts/notes/components/discussion_reply_placeholder.vue
@@ -1,6 +1,12 @@
 <script>
 export default {
   name: 'ReplyPlaceholder',
+  props: {
+    buttonText: {
+      type: String,
+      required: true,
+    },
+  },
 };
 </script>
 
@@ -12,6 +18,6 @@ export default {
     :title="s__('MergeRequests|Add a reply')"
     @click="$emit('onClick')"
   >
-    {{ s__('MergeRequests|Reply...') }}
+    {{ buttonText }}
   </button>
 </template>
diff --git a/app/assets/javascripts/notes/components/noteable_discussion.vue b/app/assets/javascripts/notes/components/noteable_discussion.vue
index 0031056ad4f..a71a89cfffc 100644
--- a/app/assets/javascripts/notes/components/noteable_discussion.vue
+++ b/app/assets/javascripts/notes/components/noteable_discussion.vue
@@ -132,7 +132,7 @@ export default {
       return this.discussion.diff_discussion && this.renderDiffFile;
     },
     shouldGroupReplies() {
-      return !this.shouldRenderDiffs && !this.discussion.diff_discussion;
+      return !this.shouldRenderDiffs;
     },
     wrapperComponent() {
       return this.shouldRenderDiffs ? diffWithNote : 'div';
@@ -248,6 +248,11 @@ export default {
       clearDraft(this.autosaveKey);
     },
     saveReply(noteText, form, callback) {
+      if (!noteText) {
+        this.cancelReplyForm();
+        callback();
+        return;
+      }
       const postData = {
         in_reply_to_discussion_id: this.discussion.reply_id,
         target_type: this.getNoteableData.targetType,
@@ -361,7 +366,6 @@ Please check your network connection and try again.`;
               :line="line"
               :should-group-replies="shouldGroupReplies"
               @startReplying="showReplyForm"
-              @toggleDiscussion="toggleDiscussionHandler"
               @deleteNote="deleteNoteHandler"
             >
               <slot slot="avatar-badge" name="avatar-badge"></slot>
@@ -374,7 +378,7 @@ Please check your network connection and try again.`;
                 <div
                   v-else-if="showReplies"
                   :class="{ 'is-replying': isReplying }"
-                  class="discussion-reply-holder"
+                  class="discussion-reply-holder clearfix"
                 >
                   <user-avatar-link
                     v-if="!isReplying && userCanReply"
diff --git a/app/assets/javascripts/notes/stores/actions.js b/app/assets/javascripts/notes/stores/actions.js
index 63658d49a05..9054b4779aa 100644
--- a/app/assets/javascripts/notes/stores/actions.js
+++ b/app/assets/javascripts/notes/stores/actions.js
@@ -51,7 +51,7 @@ export const fetchDiscussions = ({ commit, dispatch }, { path, filter }) =>
     .then(res => res.json())
     .then(discussions => {
       commit(types.SET_INITIAL_DISCUSSIONS, discussions);
-      dispatch('updateResolvableDiscussonsCounts');
+      dispatch('updateResolvableDiscussionsCounts');
     });
 
 export const updateDiscussion = ({ commit, state }, discussion) => {
@@ -67,7 +67,7 @@ export const deleteNote = ({ commit, dispatch, state }, note) =>
     commit(types.DELETE_NOTE, note);
 
     dispatch('updateMergeRequestWidget');
-    dispatch('updateResolvableDiscussonsCounts');
+    dispatch('updateResolvableDiscussionsCounts');
 
     if (isInMRPage()) {
       dispatch('diffs/removeDiscussionsFromDiff', discussion);
@@ -117,7 +117,7 @@ export const replyToDiscussion = ({ commit, state, getters, dispatch }, { endpoi
 
         dispatch('updateMergeRequestWidget');
         dispatch('startTaskList');
-        dispatch('updateResolvableDiscussonsCounts');
+        dispatch('updateResolvableDiscussionsCounts');
       } else {
         commit(types.ADD_NEW_REPLY_TO_DISCUSSION, res);
       }
@@ -135,7 +135,7 @@ export const createNewNote = ({ commit, dispatch }, { endpoint, data }) =>
 
         dispatch('updateMergeRequestWidget');
         dispatch('startTaskList');
-        dispatch('updateResolvableDiscussonsCounts');
+        dispatch('updateResolvableDiscussionsCounts');
       }
       return res;
     });
@@ -168,7 +168,7 @@ export const toggleResolveNote = ({ commit, dispatch }, { endpoint, isResolved,
 
       commit(mutationType, res);
 
-      dispatch('updateResolvableDiscussonsCounts');
+      dispatch('updateResolvableDiscussionsCounts');
 
       dispatch('updateMergeRequestWidget');
     });
@@ -442,7 +442,7 @@ export const startTaskList = ({ dispatch }) =>
       }),
   );
 
-export const updateResolvableDiscussonsCounts = ({ commit }) =>
+export const updateResolvableDiscussionsCounts = ({ commit }) =>
   commit(types.UPDATE_RESOLVABLE_DISCUSSIONS_COUNTS);
 
 export const submitSuggestion = (
diff --git a/app/assets/javascripts/performance_bar/components/performance_bar_app.vue b/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
index 185003c306e..015c1527500 100644
--- a/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
+++ b/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
@@ -4,14 +4,12 @@ import { glEmojiTag } from '~/emoji';
 
 import detailedMetric from './detailed_metric.vue';
 import requestSelector from './request_selector.vue';
-import simpleMetric from './simple_metric.vue';
 import { s__ } from '~/locale';
 
 export default {
   components: {
     detailedMetric,
     requestSelector,
-    simpleMetric,
   },
   props: {
     store: {
@@ -43,8 +41,13 @@ export default {
       details: 'details',
       keys: ['feature', 'request'],
     },
+    {
+      metric: 'redis',
+      header: 'Redis calls',
+      details: 'details',
+      keys: ['cmd'],
+    },
   ],
-  simpleMetrics: ['redis'],
   data() {
     return { currentRequestId: '' };
   },
@@ -124,12 +127,6 @@ export default {
         </button>
         <a v-else :href="profileUrl">{{ s__('PerformanceBar|profile') }}</a>
       </div>
-      <simple-metric
-        v-for="metric in $options.simpleMetrics"
-        :key="metric"
-        :current-request="currentRequest"
-        :metric="metric"
-      />
       <div id="peek-view-gc" class="view">
         <span v-if="currentRequest.details" class="bold">
           <span title="Invoke Time">{{ currentRequest.details.gc.gc_time }}</span
diff --git a/app/assets/javascripts/performance_bar/components/simple_metric.vue b/app/assets/javascripts/performance_bar/components/simple_metric.vue
deleted file mode 100644
index 358a57d5bc5..00000000000
--- a/app/assets/javascripts/performance_bar/components/simple_metric.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<script>
-export default {
-  props: {
-    currentRequest: {
-      type: Object,
-      required: true,
-    },
-    metric: {
-      type: String,
-      required: true,
-    },
-  },
-  computed: {
-    duration() {
-      return (
-        this.currentRequest.details[this.metric] &&
-        this.currentRequest.details[this.metric].duration
-      );
-    },
-    calls() {
-      return (
-        this.currentRequest.details[this.metric] && this.currentRequest.details[this.metric].calls
-      );
-    },
-  },
-};
-</script>
-<template>
-  <div :id="`peek-view-${metric}`" class="view">
-    <span v-if="currentRequest.details" class="bold"> {{ duration }} / {{ calls }} </span>
-    {{ metric }}
-  </div>
-</template>
diff --git a/app/assets/javascripts/projects/project_new.js b/app/assets/javascripts/projects/project_new.js
index ea82ff4e340..9066844f687 100644
--- a/app/assets/javascripts/projects/project_new.js
+++ b/app/assets/javascripts/projects/project_new.js
@@ -1,6 +1,6 @@
 import $ from 'jquery';
 import { addSelectOnFocusBehaviour } from '../lib/utils/common_utils';
-import { slugifyWithHyphens } from '../lib/utils/text_utility';
+import { slugify } from '../lib/utils/text_utility';
 import { s__ } from '~/locale';
 
 let hasUserDefinedProjectPath = false;
@@ -34,7 +34,7 @@ const deriveProjectPathFromUrl = $projectImportUrl => {
 };
 
 const onProjectNameChange = ($projectNameInput, $projectPathInput) => {
-  const slug = slugifyWithHyphens($projectNameInput.val());
+  const slug = slugify($projectNameInput.val());
   $projectPathInput.val(slug);
 };
 
diff --git a/app/assets/javascripts/registry/components/app.vue b/app/assets/javascripts/registry/components/app.vue
index ee973017387..7752723baac 100644
--- a/app/assets/javascripts/registry/components/app.vue
+++ b/app/assets/javascripts/registry/components/app.vue
@@ -3,22 +3,81 @@ import { mapGetters, mapActions } from 'vuex';
 import { GlLoadingIcon } from '@gitlab/ui';
 import store from '../stores';
 import CollapsibleContainer from './collapsible_container.vue';
+import SvgMessage from './svg_message.vue';
+import { s__, sprintf } from '../../locale';
 
 export default {
   name: 'RegistryListApp',
   components: {
     CollapsibleContainer,
     GlLoadingIcon,
+    SvgMessage,
   },
   props: {
     endpoint: {
       type: String,
       required: true,
     },
+    characterError: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    helpPagePath: {
+      type: String,
+      required: true,
+    },
+    noContainersImage: {
+      type: String,
+      required: true,
+    },
+    containersErrorImage: {
+      type: String,
+      required: true,
+    },
+    repositoryUrl: {
+      type: String,
+      required: true,
+    },
   },
   store,
   computed: {
     ...mapGetters(['isLoading', 'repos']),
+    dockerConnectionErrorText() {
+      return sprintf(
+        s__(`ContainerRegistry|We are having trouble connecting to Docker, which could be due to an
+            issue with your project name or path. For more information, please review the
+            %{docLinkStart}Container Registry documentation%{docLinkEnd}.`),
+        {
+          docLinkStart: `<a href="${this.helpPagePath}#docker-connection-error">`,
+          docLinkEnd: '</a>',
+        },
+        false,
+      );
+    },
+    introText() {
+      return sprintf(
+        s__(`ContainerRegistry|With the Docker Container Registry integrated into GitLab, every 
+            project can have its own space to store its Docker images. Learn more about the 
+            %{docLinkStart}Container Registry%{docLinkEnd}.`),
+        {
+          docLinkStart: `<a href="${this.helpPagePath}">`,
+          docLinkEnd: '</a>',
+        },
+        false,
+      );
+    },
+    noContainerImagesText() {
+      return sprintf(
+        s__(`ContainerRegistry|With the Container Registry, every project can have its own space to
+            store its Docker images. Learn more about the %{docLinkStart}Container Registry%{docLinkEnd}.`),
+        {
+          docLinkStart: `<a href="${this.helpPagePath}">`,
+          docLinkEnd: '</a>',
+        },
+        false,
+      );
+    },
   },
   created() {
     this.setMainEndpoint(this.endpoint);
@@ -33,20 +92,44 @@ export default {
 </script>
 <template>
   <div>
-    <gl-loading-icon v-if="isLoading" size="md" />
+    <svg-message v-if="characterError" id="invalid-characters" :svg-path="containersErrorImage">
+      <h4>
+        {{ s__('ContainerRegistry|Docker connection error') }}
+      </h4>
+      <p v-html="dockerConnectionErrorText"></p>
+    </svg-message>
+
+    <gl-loading-icon v-else-if="isLoading" size="md" class="prepend-top-16" />
+
+    <div v-else-if="!isLoading && !characterError && repos.length">
+      <h4>{{ s__('ContainerRegistry|Container Registry') }}</h4>
+      <p v-html="introText"></p>
+      <collapsible-container v-for="item in repos" :key="item.id" :repo="item" />
+    </div>
+
+    <svg-message
+      v-else-if="!isLoading && !characterError && !repos.length"
+      id="no-container-images"
+      :svg-path="noContainersImage"
+    >
+      <h4>
+        {{ s__('ContainerRegistry|There are no container images stored for this project') }}
+      </h4>
+      <p v-html="noContainerImagesText"></p>
 
-    <collapsible-container
-      v-for="item in repos"
-      v-else-if="!isLoading && repos.length"
-      :key="item.id"
-      :repo="item"
-    />
+      <h5>{{ s__('ContainerRegistry|Quick Start') }}</h5>
+      <p>
+        {{
+          s__(
+            'ContainerRegistry|You can add an image to this registry with the following commands:',
+          )
+        }}
+      </p>
 
-    <p v-else-if="!isLoading && !repos.length">
-      {{
-        __(`No container images stored for this project.
-      Add one by following the instructions above.`)
-      }}
-    </p>
+      <pre>
+        docker build -t {{ repositoryUrl }} .
+        docker push {{ repositoryUrl }}
+      </pre>
+    </svg-message>
   </div>
 </template>
diff --git a/app/assets/javascripts/registry/components/svg_message.vue b/app/assets/javascripts/registry/components/svg_message.vue
new file mode 100644
index 00000000000..d0d44bf2d14
--- /dev/null
+++ b/app/assets/javascripts/registry/components/svg_message.vue
@@ -0,0 +1,24 @@
+<script>
+export default {
+  name: 'RegistrySvgMessage',
+  props: {
+    id: {
+      type: String,
+      required: true,
+    },
+    svgPath: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <div :id="id" class="empty-state container-message mw-70p">
+    <div class="svg-content">
+      <img :src="svgPath" class="flex-align-self-center" />
+    </div>
+    <slot></slot>
+  </div>
+</template>
diff --git a/app/assets/javascripts/registry/index.js b/app/assets/javascripts/registry/index.js
index 025afefe7f0..d8daec29fda 100644
--- a/app/assets/javascripts/registry/index.js
+++ b/app/assets/javascripts/registry/index.js
@@ -14,12 +14,22 @@ export default () =>
       const { dataset } = document.querySelector(this.$options.el);
       return {
         endpoint: dataset.endpoint,
+        characterError: Boolean(dataset.characterError),
+        helpPagePath: dataset.helpPagePath,
+        noContainersImage: dataset.noContainersImage,
+        containersErrorImage: dataset.containersErrorImage,
+        repositoryUrl: dataset.repositoryUrl,
       };
     },
     render(createElement) {
       return createElement('registry-app', {
         props: {
           endpoint: this.endpoint,
+          characterError: this.characterError,
+          helpPagePath: this.helpPagePath,
+          noContainersImage: this.noContainersImage,
+          containersErrorImage: this.containersErrorImage,
+          repositoryUrl: this.repositoryUrl,
         },
       });
     },
diff --git a/app/assets/javascripts/releases/components/release_block.vue b/app/assets/javascripts/releases/components/release_block.vue
index c82b65cd97b..0031ba04d78 100644
--- a/app/assets/javascripts/releases/components/release_block.vue
+++ b/app/assets/javascripts/releases/components/release_block.vue
@@ -28,7 +28,7 @@ export default {
   computed: {
     releasedTimeAgo() {
       return sprintf(__('released %{time}'), {
-        time: this.timeFormated(this.release.created_at),
+        time: this.timeFormated(this.release.released_at),
       });
     },
     userImageAltDescription() {
@@ -56,8 +56,8 @@ export default {
     <div class="card-body">
       <h2 class="card-title mt-0">
         {{ release.name }}
-        <gl-badge v-if="release.pre_release" variant="warning" class="align-middle">{{
-          __('Pre-release')
+        <gl-badge v-if="release.upcoming_release" variant="warning" class="align-middle">{{
+          __('Upcoming Release')
         }}</gl-badge>
       </h2>
 
@@ -74,7 +74,7 @@ export default {
 
         <div class="append-right-4">
           &bull;
-          <span v-gl-tooltip.bottom :title="tooltipTitle(release.created_at)">
+          <span v-gl-tooltip.bottom :title="tooltipTitle(release.released_at)">
             {{ releasedTimeAgo }}
           </span>
         </div>
diff --git a/app/assets/javascripts/vue_shared/components/notes/placeholder_note.vue b/app/assets/javascripts/vue_shared/components/notes/placeholder_note.vue
index baed26a157c..af02b8969ee 100644
--- a/app/assets/javascripts/vue_shared/components/notes/placeholder_note.vue
+++ b/app/assets/javascripts/vue_shared/components/notes/placeholder_note.vue
@@ -39,7 +39,7 @@ export default {
 </script>
 
 <template>
-  <timeline-entry-item class="note being-posted fade-in-half">
+  <timeline-entry-item class="note note-wrapper being-posted fade-in-half">
     <div class="timeline-icon">
       <user-avatar-link
         :link-href="getUserData.path"