Add latest changes from gitlab-org/gitlab@master

9 files changed, 60 insertions, 71 deletions

diff --git a/app/assets/javascripts/boards/models/list.js b/app/assets/javascripts/boards/models/list.js
index b232fea0882..299864c279b 100644
--- a/app/assets/javascripts/boards/models/list.js
+++ b/app/assets/javascripts/boards/models/list.js
@@ -83,27 +83,7 @@ class List {
   }
 
   save() {
-    const entity = this.label || this.assignee || this.milestone;
-    let entityType = '';
-    if (this.label) {
-      entityType = 'label_id';
-    } else if (this.assignee) {
-      entityType = 'assignee_id';
-    } else if (IS_EE && this.milestone) {
-      entityType = 'milestone_id';
-    }
-
-    return boardsStore
-      .createList(entity.id, entityType)
-      .then(res => res.data)
-      .then(data => {
-        this.id = data.id;
-        this.type = data.list_type;
-        this.position = data.position;
-        this.label = data.label;
-
-        return this.getIssues();
-      });
+    return boardsStore.saveList(this);
   }
 
   destroy() {
diff --git a/app/assets/javascripts/boards/stores/boards_store.js b/app/assets/javascripts/boards/stores/boards_store.js
index 8b737d1dab0..df8b7a2df6c 100644
--- a/app/assets/javascripts/boards/stores/boards_store.js
+++ b/app/assets/javascripts/boards/stores/boards_store.js
@@ -1,4 +1,4 @@
-/* eslint-disable no-shadow */
+/* eslint-disable no-shadow, no-param-reassign */
 /* global List */
 
 import $ from 'jquery';
@@ -408,6 +408,29 @@ const boardsStore = {
     return axios.delete(`${this.state.endpoints.listsEndpoint}/${id}`);
   },
 
+  saveList(list) {
+    const entity = list.label || list.assignee || list.milestone;
+    let entityType = '';
+    if (list.label) {
+      entityType = 'label_id';
+    } else if (list.assignee) {
+      entityType = 'assignee_id';
+    } else if (IS_EE && list.milestone) {
+      entityType = 'milestone_id';
+    }
+
+    return this.createList(entity.id, entityType)
+      .then(res => res.data)
+      .then(data => {
+        list.id = data.id;
+        list.type = data.list_type;
+        list.position = data.position;
+        list.label = data.label;
+
+        return list.getIssues();
+      });
+  },
+
   getIssuesForList(id, filter = {}) {
     const data = { id };
     Object.keys(filter).forEach(key => {
diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue
index 878b54f7d53..463d1427805 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"
+        class="files d-flex prepend-top-default"
       >
         <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 63ce43a193d..24542126b07 100644
--- a/app/assets/javascripts/diffs/components/compare_versions.vue
+++ b/app/assets/javascripts/diffs/components/compare_versions.vue
@@ -1,4 +1,5 @@
 <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';
@@ -62,6 +63,9 @@ 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');
     },
@@ -87,7 +91,7 @@ export default {
 </script>
 
 <template>
-  <div class="mr-version-controls border-top">
+  <div class="mr-version-controls border-top border-bottom">
     <div
       class="mr-version-menus-container content-block"
       :class="{
@@ -104,17 +108,17 @@ export default {
         :title="toggleFileBrowserTitle"
         @click="toggleShowTreeList"
       >
-        <icon name="file-tree" />
+        <icon :name="fileTreeIcon" />
       </button>
       <div v-if="showDropdowns" class="d-flex align-items-center compare-versions-container">
-        {{ __('Compare') }}
+        Changes between
         <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 e78bea789c3..5d27c6eb865 100644
--- a/app/assets/javascripts/diffs/components/diff_file_header.vue
+++ b/app/assets/javascripts/diffs/components/diff_file_header.vue
@@ -123,20 +123,6 @@ 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);
@@ -235,7 +221,7 @@ export default {
 
     <div
       v-if="!diffFile.submodule && addMergeRequestButtons"
-      class="file-actions d-none d-sm-flex align-items-center"
+      class="file-actions d-none d-sm-block"
     >
       <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 1fa1fda7bd7..2e5855380af 100644
--- a/app/assets/javascripts/diffs/components/diff_stats.vue
+++ b/app/assets/javascripts/diffs/components/diff_stats.vue
@@ -1,7 +1,9 @@
 <script>
+import Icon from '~/vue_shared/components/icon.vue';
 import { n__ } from '~/locale';
 
 export default {
+  components: { Icon },
   props: {
     addedLines: {
       type: Number,
@@ -19,7 +21,7 @@ export default {
   },
   computed: {
     filesText() {
-      return n__('file', 'files', this.diffFilesLength);
+      return n__('File', 'Files', this.diffFilesLength);
     },
     isCompareVersionsHeader() {
       return Boolean(this.diffFilesLength);
@@ -37,21 +39,14 @@ export default {
     }"
   >
     <div v-if="diffFilesLength !== null" class="diff-stats-group">
-      <span class="text-secondary bold">{{ diffFilesLength }} {{ filesText }}</span>
+      <icon name="doc-code" class="diff-stats-icon text-secondary" />
+      <strong>{{ diffFilesLength }} {{ filesText }}</strong>
     </div>
-    <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 class="diff-stats-group cgreen">
+      <icon name="file-addition" class="diff-stats-icon" /> <strong>{{ addedLines }}</strong>
     </div>
-    <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 class="diff-stats-group cred">
+      <icon name="file-deletion" class="diff-stats-icon" /> <strong>{{ removedLines }}</strong>
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/diffs/components/tree_list.vue b/app/assets/javascripts/diffs/components/tree_list.vue
index 7956d05b4f1..30be2e68e76 100644
--- a/app/assets/javascripts/diffs/components/tree_list.vue
+++ b/app/assets/javascripts/diffs/components/tree_list.vue
@@ -4,6 +4,7 @@ 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: {
@@ -47,6 +48,9 @@ export default {
         return acc;
       }, []);
     },
+    fileRowExtraComponent() {
+      return this.hideFileStats ? null : FileRowStats;
+    },
   },
   methods: {
     ...mapActions('diffs', ['toggleTreeOpen', 'scrollToFile']),
@@ -54,8 +58,8 @@ export default {
       this.search = '';
     },
   },
-  searchPlaceholder: sprintf(s__('MergeRequest|Search files (%{modifier_key}P)'), {
-    modifier_key: /Mac/i.test(navigator.userAgent) ? '⌘' : 'Ctrl+',
+  searchPlaceholder: sprintf(s__('MergeRequest|Filter files or search with %{modifier_key}+p'), {
+    modifier_key: /Mac/i.test(navigator.userAgent) ? 'cmd' : 'ctrl',
   }),
 };
 </script>
@@ -93,6 +97,7 @@ export default {
           :file="file"
           :level="0"
           :hide-extra-on-tree="true"
+          :extra-component="fileRowExtraComponent"
           :show-changed-icon="true"
           @toggleTreeOpen="toggleTreeOpen"
           @clickFile="scrollToFile"
diff --git a/app/assets/javascripts/vue_shared/components/changed_file_icon.vue b/app/assets/javascripts/vue_shared/components/changed_file_icon.vue
index 09cffc57688..75c3c544c77 100644
--- a/app/assets/javascripts/vue_shared/components/changed_file_icon.vue
+++ b/app/assets/javascripts/vue_shared/components/changed_file_icon.vue
@@ -36,17 +36,12 @@ export default {
       required: false,
       default: true,
     },
-    showChangedStatus: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
   },
   computed: {
     changedIcon() {
       // False positive i18n lint: https://gitlab.com/gitlab-org/frontend/eslint-plugin-i18n/issues/26
       // eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings
-      const suffix = this.showStagedIcon ? '-solid' : '';
+      const suffix = !this.file.changed && this.file.staged && this.showStagedIcon ? '-solid' : '';
 
       return `${getCommitIconMap(this.file).icon}${suffix}`;
     },
@@ -91,8 +86,8 @@ export default {
   <span
     v-gl-tooltip.right
     :title="tooltipTitle"
-    :class="[{ 'ml-auto': isCentered }, changedIconClass]"
-    class="file-changed-icon d-flex align-items-center "
+    :class="{ 'ml-auto': isCentered }"
+    class="file-changed-icon d-inline-block"
   >
     <icon v-if="showIcon" :name="changedIcon" :size="size" :class="changedIconClass" />
   </span>
diff --git a/app/assets/javascripts/vue_shared/components/file_row.vue b/app/assets/javascripts/vue_shared/components/file_row.vue
index 0c9f6ea94d5..611001df32f 100644
--- a/app/assets/javascripts/vue_shared/components/file_row.vue
+++ b/app/assets/javascripts/vue_shared/components/file_row.vue
@@ -1,4 +1,5 @@
 <script>
+import Icon from '~/vue_shared/components/icon.vue';
 import FileHeader from '~/vue_shared/components/file_row_header.vue';
 import FileIcon from '~/vue_shared/components/file_icon.vue';
 import ChangedFileIcon from '~/vue_shared/components/changed_file_icon.vue';
@@ -8,6 +9,7 @@ export default {
   components: {
     FileHeader,
     FileIcon,
+    Icon,
     ChangedFileIcon,
   },
   props: {
@@ -24,7 +26,6 @@ export default {
       required: false,
       default: null,
     },
-
     hideExtraOnTree: {
       type: Boolean,
       required: false,
@@ -142,17 +143,17 @@ export default {
       @mouseleave="toggleDropdown(false)"
     >
       <div class="file-row-name-container">
-        <span ref="textOutput" :style="levelIndentation" class="file-row-name str-truncated d-flex">
+        <span ref="textOutput" :style="levelIndentation" class="file-row-name str-truncated">
           <file-icon
             v-if="!showChangedIcon || file.type === 'tree'"
-            class="file-row-icon text-secondary mr-1"
+            class="file-row-icon"
             :file-name="file.name"
             :loading="file.loading"
             :folder="isTree"
             :opened="file.opened"
             :size="16"
           />
-          <file-icon v-else :file-name="file.name" :size="16" css-classes="top mr-1" />
+          <changed-file-icon v-else :file="file" :size="16" class="append-right-5" />
           {{ file.name }}
         </span>
         <component
@@ -162,7 +163,6 @@ export default {
           :dropdown-open="dropdownOpen"
           @toggle="toggleDropdown($event)"
         />
-        <changed-file-icon :file="file" :size="16" class="append-right-5" />
       </div>
     </div>
     <template v-if="file.opened || file.isHeader">
@@ -172,6 +172,7 @@ export default {
         :file="childFile"
         :level="childFilesLevel"
         :hide-extra-on-tree="hideExtraOnTree"
+        :extra-component="extraComponent"
         :show-changed-icon="showChangedIcon"
         @toggleTreeOpen="toggleTreeOpen"
         @clickFile="clickedFile"