Display submodules in MR tree and file header

Issue: https://gitlab.com/gitlab-org/gitlab/-/issues/232817

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

@@ -230,7 +230,13 @@ export default {
         :href="titleLink"
         @click="handleFileNameClick"
       >
-        <file-icon :file-name="filePath" :size="18" aria-hidden="true" css-classes="gl-mr-2" />
+        <file-icon
+          :file-name="filePath"
+          :size="18"
+          aria-hidden="true"
+          css-classes="gl-mr-2"
+          :submodule="diffFile.submodule"
+        />
         <span v-if="isFileRenamed">
           <strong
             v-gl-tooltip

app/assets/javascripts/diffs/store/utils.js

@@ -664,6 +664,7 @@ export const generateTreeList = files => {
               addedLines: file.added_lines,
               removedLines: file.removed_lines,
               parentPath: parent ? `${parent.path}/` : '/',
+              submodule: file.submodule,
             });
           } else {
             Object.assign(entry, {

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

@@ -153,6 +153,7 @@ export default {
           :folder="isTree"
           :opened="file.opened"
           :size="16"
+          :submodule="file.submodule"
         />
         <gl-truncate v-if="truncateMiddle" :text="file.name" position="middle" class="gl-pr-7" />
         <template v-else>{{ file.name }}</template>

changelogs/unreleased/232817-display-mr-submodules-icon.yml

+---
+title: Display submodules in MR tree and file header
+merge_request: 46840
+author:
+type: fixed

spec/frontend/diffs/components/diff_file_header_spec.js

@@ -6,6 +6,7 @@ import { mockTracking, triggerEvent } from 'helpers/tracking_helper';
 
 import DiffFileHeader from '~/diffs/components/diff_file_header.vue';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import FileIcon from '~/vue_shared/components/file_icon.vue';
 import diffDiscussionsMockData from '../mock_data/diff_discussions';
 import { truncateSha } from '~/lib/utils/text_utility';
 import { diffViewerModes } from '~/ide/constants';
@@ -207,6 +208,14 @@ describe('DiffFileHeader component', () => {
       });
       expect(findFileActions().exists()).toBe(false);
     });
+
+    it('renders submodule icon', () => {
+      createComponent({
+        diffFile: submoduleDiffFile,
+      });
+
+      expect(wrapper.find(FileIcon).props('submodule')).toBe(true);
+    });
   });
 
   describe('for any file', () => {

spec/frontend/vue_shared/components/file_row_spec.js

@@ -3,6 +3,7 @@ import { shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import FileRow from '~/vue_shared/components/file_row.vue';
 import FileHeader from '~/vue_shared/components/file_row_header.vue';
+import FileIcon from '~/vue_shared/components/file_icon.vue';
 import { escapeFileUrl } from '~/lib/utils/url_utility';
 
 describe('File row component', () => {
@@ -151,4 +152,18 @@ describe('File row component', () => {
 
     expect(wrapper.find('.file-row-name').classes()).toContain('font-weight-bold');
   });
+
+  it('renders submodule icon', () => {
+    const submodule = true;
+
+    createComponent({
+      file: {
+        ...file(),
+        submodule,
+      },
+      level: 0,
+    });
+
+    expect(wrapper.find(FileIcon).props('submodule')).toBe(submodule);
+  });
 });