Add latest changes from gitlab-org/gitlab@master

5 files changed, 36 insertions, 26 deletions

diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue
index 463d1427805..878b54f7d53 100644
--- a/app/assets/javascripts/diffs/components/app.vue
+++ b/app/assets/javascripts/diffs/components/app.vue
@@ -374,7 +374,7 @@ export default {
 
       <div
         :data-can-create-note="getNoteableData.current_user.can_create_note"
-        class="files d-flex prepend-top-default"
+        class="files d-flex"
       >
         <div
           v-show="showTreeList"
diff --git a/app/assets/javascripts/diffs/components/compare_versions.vue b/app/assets/javascripts/diffs/components/compare_versions.vue
index 24542126b07..63ce43a193d 100644
--- a/app/assets/javascripts/diffs/components/compare_versions.vue
+++ b/app/assets/javascripts/diffs/components/compare_versions.vue
@@ -1,5 +1,4 @@
 <script>
-/* eslint-disable @gitlab/vue-i18n/no-bare-strings */
 import { mapActions, mapGetters, mapState } from 'vuex';
 import { GlTooltipDirective, GlLink, GlButton } from '@gitlab/ui';
 import { __ } from '~/locale';
@@ -63,9 +62,6 @@ export default {
     showDropdowns() {
       return !this.commit && this.mergeRequestDiffs.length;
     },
-    fileTreeIcon() {
-      return this.showTreeList ? 'collapse-left' : 'expand-left';
-    },
     toggleFileBrowserTitle() {
       return this.showTreeList ? __('Hide file browser') : __('Show file browser');
     },
@@ -91,7 +87,7 @@ export default {
 </script>
 
 <template>
-  <div class="mr-version-controls border-top border-bottom">
+  <div class="mr-version-controls border-top">
     <div
       class="mr-version-menus-container content-block"
       :class="{
@@ -108,17 +104,17 @@ export default {
         :title="toggleFileBrowserTitle"
         @click="toggleShowTreeList"
       >
-        <icon :name="fileTreeIcon" />
+        <icon name="file-tree" />
       </button>
       <div v-if="showDropdowns" class="d-flex align-items-center compare-versions-container">
-        Changes between
+        {{ __('Compare') }}
         <compare-versions-dropdown
           :other-versions="mergeRequestDiffs"
           :merge-request-version="mergeRequestDiff"
           :show-commit-count="true"
           class="mr-version-dropdown"
         />
-        and
+        {{ __('and') }}
         <compare-versions-dropdown
           :other-versions="comparableDiffs"
           :base-version-path="baseVersionPath"
diff --git a/app/assets/javascripts/diffs/components/diff_file_header.vue b/app/assets/javascripts/diffs/components/diff_file_header.vue
index 5d27c6eb865..e78bea789c3 100644
--- a/app/assets/javascripts/diffs/components/diff_file_header.vue
+++ b/app/assets/javascripts/diffs/components/diff_file_header.vue
@@ -123,6 +123,20 @@ export default {
       }
       return s__('MRDiff|Show full file');
     },
+    changedFile() {
+      const {
+        new_path: changed,
+        deleted_file: deleted,
+        new_file: tempFile,
+        ...diffFile
+      } = this.diffFile;
+      return {
+        ...diffFile,
+        changed: Boolean(changed),
+        deleted,
+        tempFile,
+      };
+    },
   },
   mounted() {
     polyfillSticky(this.$refs.header);
@@ -221,7 +235,7 @@ export default {
 
     <div
       v-if="!diffFile.submodule && addMergeRequestButtons"
-      class="file-actions d-none d-sm-block"
+      class="file-actions d-none d-sm-flex align-items-center"
     >
       <diff-stats :added-lines="diffFile.added_lines" :removed-lines="diffFile.removed_lines" />
       <div class="btn-group" role="group">
diff --git a/app/assets/javascripts/diffs/components/diff_stats.vue b/app/assets/javascripts/diffs/components/diff_stats.vue
index 2e5855380af..1fa1fda7bd7 100644
--- a/app/assets/javascripts/diffs/components/diff_stats.vue
+++ b/app/assets/javascripts/diffs/components/diff_stats.vue
@@ -1,9 +1,7 @@
 <script>
-import Icon from '~/vue_shared/components/icon.vue';
 import { n__ } from '~/locale';
 
 export default {
-  components: { Icon },
   props: {
     addedLines: {
       type: Number,
@@ -21,7 +19,7 @@ export default {
   },
   computed: {
     filesText() {
-      return n__('File', 'Files', this.diffFilesLength);
+      return n__('file', 'files', this.diffFilesLength);
     },
     isCompareVersionsHeader() {
       return Boolean(this.diffFilesLength);
@@ -39,14 +37,21 @@ export default {
     }"
   >
     <div v-if="diffFilesLength !== null" class="diff-stats-group">
-      <icon name="doc-code" class="diff-stats-icon text-secondary" />
-      <strong>{{ diffFilesLength }} {{ filesText }}</strong>
+      <span class="text-secondary bold">{{ diffFilesLength }} {{ filesText }}</span>
     </div>
-    <div class="diff-stats-group cgreen">
-      <icon name="file-addition" class="diff-stats-icon" /> <strong>{{ addedLines }}</strong>
+    <div
+      class="diff-stats-group cgreen d-flex align-items-center"
+      :class="{ bold: isCompareVersionsHeader }"
+    >
+      <span>+</span>
+      <span class="js-file-addition-line">{{ addedLines }}</span>
     </div>
-    <div class="diff-stats-group cred">
-      <icon name="file-deletion" class="diff-stats-icon" /> <strong>{{ removedLines }}</strong>
+    <div
+      class="diff-stats-group cred d-flex align-items-center"
+      :class="{ bold: isCompareVersionsHeader }"
+    >
+      <span>-</span>
+      <span class="js-file-deletion-line">{{ removedLines }}</span>
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/diffs/components/tree_list.vue b/app/assets/javascripts/diffs/components/tree_list.vue
index 30be2e68e76..7956d05b4f1 100644
--- a/app/assets/javascripts/diffs/components/tree_list.vue
+++ b/app/assets/javascripts/diffs/components/tree_list.vue
@@ -4,7 +4,6 @@ import { GlTooltipDirective } from '@gitlab/ui';
 import { s__, sprintf } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 import FileRow from '~/vue_shared/components/file_row.vue';
-import FileRowStats from './file_row_stats.vue';
 
 export default {
   directives: {
@@ -48,9 +47,6 @@ export default {
         return acc;
       }, []);
     },
-    fileRowExtraComponent() {
-      return this.hideFileStats ? null : FileRowStats;
-    },
   },
   methods: {
     ...mapActions('diffs', ['toggleTreeOpen', 'scrollToFile']),
@@ -58,8 +54,8 @@ export default {
       this.search = '';
     },
   },
-  searchPlaceholder: sprintf(s__('MergeRequest|Filter files or search with %{modifier_key}+p'), {
-    modifier_key: /Mac/i.test(navigator.userAgent) ? 'cmd' : 'ctrl',
+  searchPlaceholder: sprintf(s__('MergeRequest|Search files (%{modifier_key}P)'), {
+    modifier_key: /Mac/i.test(navigator.userAgent) ? '⌘' : 'Ctrl+',
   }),
 };
 </script>
@@ -97,7 +93,6 @@ export default {
           :file="file"
           :level="0"
           :hide-extra-on-tree="true"
-          :extra-component="fileRowExtraComponent"
           :show-changed-icon="true"
           @toggleTreeOpen="toggleTreeOpen"
           @clickFile="scrollToFile"