Restyle file tree:

- Folder icon colors are lighter
- Has file type icon
- ChangedFileIcon is on the right

app/assets/javascripts/diffs/components/diff_file_row.vue

@@ -5,12 +5,14 @@
  */
 import FileRow from '~/vue_shared/components/file_row.vue';
 import FileRowStats from './file_row_stats.vue';
+import ChangedFileIcon from '~/vue_shared/components/changed_file_icon.vue';
 
 export default {
   name: 'DiffFileRow',
   components: {
     FileRow,
     FileRowStats,
+    ChangedFileIcon,
   },
   props: {
     file: {
@@ -31,7 +33,8 @@ export default {
 </script>
 
 <template>
-  <file-row :file="file" :hide-file-stats="hideFileStats" v-bind="$attrs" v-on="$listeners">
-    <file-row-stats v-if="showFileRowStats" :file="file" />
+  <file-row :file="file" v-bind="$attrs" v-on="$listeners">
+    <file-row-stats v-if="showFileRowStats" :file="file" class="mr-1" />
+    <changed-file-icon :file="file" :size="16" />
   </file-row>
 </template>

app/assets/javascripts/diffs/components/tree_list.vue

@@ -95,8 +95,6 @@ export default {
           :file="file"
           :level="0"
           :hide-file-stats="hideFileStats"
-          :hide-extra-on-tree="true"
-          :show-changed-icon="true"
           :file-row-component="$options.DiffFileRow"
           @toggleTreeOpen="toggleTreeOpen"
           @clickFile="scrollToFile"

app/assets/javascripts/vue_shared/components/file_row.vue

 <script>
 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';
 
 export default {
   name: 'FileRow',
   components: {
     FileHeader,
     FileIcon,
-    ChangedFileIcon,
   },
   props: {
     file: {
@@ -19,11 +17,6 @@ export default {
       type: Number,
       required: true,
     },
-    showChangedIcon: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
   },
   computed: {
     isTree() {
@@ -121,15 +114,14 @@ export default {
     <div class="file-row-name-container">
       <span ref="textOutput" :style="levelIndentation" class="file-row-name str-truncated">
         <file-icon
-          v-if="!showChangedIcon || file.type === 'tree'"
           class="file-row-icon"
+          :class="{ 'text-secondary': file.type === 'tree' }"
           :file-name="file.name"
           :loading="file.loading"
           :folder="isTree"
           :opened="file.opened"
           :size="16"
         />
-        <changed-file-icon v-else :file="file" :size="16" class="append-right-5" />
         {{ file.name }}
       </span>
       <slot></slot>

changelogs/unreleased/118442-step2-restyle-changes-header-and-file-tree.yml

+---
+title: Restyle Merge Request diffs file tree
+merge_request: 24342
+author:
+type: changed

spec/frontend/diffs/components/diff_file_row_spec.js

@@ -2,6 +2,7 @@ import { shallowMount } from '@vue/test-utils';
 import DiffFileRow from '~/diffs/components/diff_file_row.vue';
 import FileRow from '~/vue_shared/components/file_row.vue';
 import FileRowStats from '~/diffs/components/file_row_stats.vue';
+import ChangedFileIcon from '~/vue_shared/components/changed_file_icon.vue';
 
 describe('Diff File Row component', () => {
   let wrapper;
@@ -38,6 +39,21 @@ describe('Diff File Row component', () => {
     );
   });
 
+  it('renders ChangedFileIcon component', () => {
+    createComponent({
+      level: 4,
+      file: {},
+      hideFileStats: false,
+    });
+
+    expect(wrapper.find(ChangedFileIcon).props()).toEqual(
+      expect.objectContaining({
+        file: {},
+        size: 16,
+      }),
+    );
+  });
+
   describe('FileRowStats components', () => {
     it.each`
       type      | hideFileStats | value    | desc