Added submodule support in multi-file editor

app/assets/javascripts/repo/components/repo_file.vue

@@ -28,6 +28,9 @@
           marginLeft: `${this.file.level * 16}px`,
         };
       },
+      shortId() {
+        return this.file.id.substr(0, 8);
+      },
     },
     methods: {
       linkClicked(file) {
@@ -55,6 +58,17 @@
       >
         {{ file.name }}
       </a>
+      <template v-if="file.type === 'submodule' && file.id">
+        @
+        <span class="commit-sha">
+          <a
+            @click.stop
+            :href="file.tree_url"
+          >
+            {{ shortId }}
+          </a>
+        </span>
+      </template>
     </td>
 
     <template v-if="!isMini">
@@ -69,7 +83,10 @@
       </td>
 
       <td class="commit-update hidden-xs text-right">
-        <span :title="tooltipTitle(file.lastCommit.updatedAt)">
+        <span
+          v-if="file.lastCommit.updatedAt"
+          :title="tooltipTitle(file.lastCommit.updatedAt)"
+        >
           {{ timeFormated(file.lastCommit.updatedAt) }}
         </span>
       </td>

app/assets/javascripts/repo/components/repo_sidebar.vue

@@ -74,6 +74,10 @@ export default {
       if (file.type === 'tree' && file.opened) {
         Helper.setDirectoryToClosed(file);
         Store.setActiveLine(lineNumber);
+      } else if (file.type === 'submodule') {
+        file.loading = true;
+
+        gl.utils.visitUrl(file.url);
       } else {
         const openFile = Helper.getFileFromPath(file.url);
 

app/assets/javascripts/repo/helpers/repo_helper.js

@@ -157,12 +157,14 @@ const RepoHelper = {
   },
 
   serializeRepoEntity(type, entity, level = 0) {
-    const { url, name, icon, last_commit } = entity;
+    const { id, url, name, icon, last_commit, tree_url } = entity;
 
     return {
+      id,
       type,
       name,
       url,
+      tree_url,
       level,
       icon: `fa-${icon}`,
       files: [],

app/serializers/submodule_entity.rb

@@ -7,7 +7,7 @@ class SubmoduleEntity < Grape::Entity
     'archive'
   end
 
-  expose :project_url do |blob|
+  expose :url do |blob|
     submodule_links(blob, request).first
   end
 

changelogs/unreleased/multi-file-editor-submodules.yml

+---
+title: Added submodule support in multi-file editor
+merge_request:
+author:
+type: added

spec/javascripts/repo/components/repo_file_spec.js

@@ -93,6 +93,32 @@ describe('RepoFile', () => {
     expect(vm.linkClicked).toHaveBeenCalledWith(vm.file);
   });
 
+  describe('submodule', () => {
+    let f;
+    let vm;
+
+    beforeEach(() => {
+      f = file('submodule name', '123456789');
+      f.type = 'submodule';
+
+      vm = createComponent({
+        file: f,
+      });
+    });
+
+    afterEach(() => {
+      vm.$destroy();
+    });
+
+    it('renders submodule short ID', () => {
+      expect(vm.$el.querySelector('.commit-sha').textContent.trim()).toBe('12345678');
+    });
+
+    it('renders ID next to submodule name', () => {
+      expect(vm.$el.querySelector('td').textContent.replace(/\s+/g, ' ')).toContain('submodule name @ 12345678');
+    });
+  });
+
   describe('methods', () => {
     describe('linkClicked', () => {
       it('$emits fileNameClicked with file obj', () => {

spec/javascripts/repo/components/repo_sidebar_spec.js

@@ -117,6 +117,21 @@ describe('RepoSidebar', () => {
 
         expect(Helper.setDirectoryToClosed).toHaveBeenCalledWith(RepoStore.files[0]);
       });
+
+      describe('submodule', () => {
+        it('opens submodule project URL', () => {
+          spyOn(gl.utils, 'visitUrl');
+
+          const f = file();
+          f.type = 'submodule';
+
+          vm = createComponent();
+
+          vm.fileClicked(f);
+
+          expect(gl.utils.visitUrl).toHaveBeenCalledWith('url');
+        });
+      });
     });
 
     describe('goToPreviousDirectoryClicked', () => {

spec/javascripts/repo/mock_data.js

 import RepoHelper from '~/repo/helpers/repo_helper';
 
 // eslint-disable-next-line import/prefer-default-export
-export const file = (name = 'name') => RepoHelper.serializeRepoEntity('blob', {
+export const file = (name = 'name', id = name) => RepoHelper.serializeRepoEntity('blob', {
+  id,
   icon: 'icon',
   url: 'url',
   name,
   last_commit: {
     id: '123',
     message: 'test',
-    committed_date: '',
+    committed_date: new Date().toISOString(),
   },
 });