Add latest changes from gitlab-org/gitlab@master

2 files changed, 9 insertions, 13 deletions

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"