Multi-file editor fetch log data from a different endpoint

Closes #38360

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

@@ -16,6 +16,9 @@
       ...mapGetters([
         'isCollapsed',
       ]),
+      isSubmodule() {
+        return this.file.type === 'submodule';
+      },
       fileIcon() {
         return {
           'fa-spinner fa-spin': this.file.loading,
@@ -31,6 +34,9 @@
       shortId() {
         return this.file.id.substr(0, 8);
       },
+      submoduleColSpan() {
+        return !this.isCollapsed && this.isSubmodule ? 3 : undefined;
+      },
     },
     methods: {
       ...mapActions([
@@ -44,7 +50,7 @@
   <tr
     class="file"
     @click.prevent="clickedTreeRow(file)">
-    <td>
+    <td :colspan="submoduleColSpan">
       <i
         class="fa fa-fw file-icon"
         :class="fileIcon"
@@ -58,7 +64,7 @@
       >
         {{ file.name }}
       </a>
-      <template v-if="file.type === 'submodule' && file.id">
+      <template v-if="isSubmodule && file.id">
         @
         <span class="commit-sha">
           <a
@@ -71,15 +77,27 @@
       </template>
     </td>
 
-    <template v-if="!isCollapsed">
+    <template v-if="!isCollapsed && !isSubmodule">
       <td class="hidden-sm hidden-xs">
         <a
+          v-if="file.lastCommit.message"
           @click.stop
           :href="file.lastCommit.url"
           class="commit-message"
         >
           {{ file.lastCommit.message }}
         </a>
+        <div
+          v-else
+          class="animation-container animation-container-small"
+        >
+          <div
+            v-for="n in 6"
+            :key="n"
+            :class="'skeleton-line-' + n"
+          >
+          </div>
+        </div>
       </td>
 
       <td class="commit-update hidden-xs text-right">
@@ -89,6 +107,17 @@
         >
           {{ timeFormated(file.lastCommit.updatedAt) }}
         </span>
+        <div
+          v-else
+          class="animation-container animation-container-small animation-container-right"
+        >
+          <div
+            v-for="n in 6"
+            :key="n"
+            :class="'skeleton-line-' + n"
+          >
+          </div>
+        </div>
       </td>
     </template>
   </tr>

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

@@ -33,7 +33,7 @@
     <template v-if="!isCollapsed">
       <td
         class="hidden-sm hidden-xs">
-        <div class="animation-container">
+        <div class="animation-container animation-container-small">
           <div
             v-for="n in 6"
             :key="n"

app/assets/javascripts/repo/services/index.js

@@ -30,4 +30,11 @@ export default {
   commit(projectId, payload) {
     return Api.commitMultiple(projectId, payload);
   },
+  getTreeLastCommit(endpoint) {
+    return Vue.http.get(endpoint, {
+      params: {
+        format: 'json',
+      },
+    });
+  },
 };

app/assets/javascripts/repo/stores/actions/tree.js

@@ -10,7 +10,7 @@ import {
 } from '../utils';
 
 export const getTreeData = (
-  { commit, state },
+  { commit, state, dispatch },
   { endpoint = state.endpoints.rootEndpoint, tree = state } = {},
 ) => {
   commit(types.TOGGLE_LOADING, tree);
@@ -30,7 +30,9 @@ export const getTreeData = (
 
       commit(types.SET_DIRECTORY_DATA, { data, tree });
       commit(types.SET_PARENT_TREE_URL, data.parent_tree_url);
+      commit(types.SET_LAST_COMMIT_URL, { tree, url: data.last_commit_path });
       commit(types.TOGGLE_LOADING, tree);
+      dispatch('getLastCommitData', tree);
 
       pushState(endpoint);
     })
@@ -108,3 +110,28 @@ export const createTempTree = ({ state, commit, dispatch }, name) => {
     });
   }
 };
+
+export const getLastCommitData = ({ state, commit, dispatch }, tree = state) => {
+  if (tree.lastCommitPath === '') return;
+
+  service.getTreeLastCommit(tree.lastCommitPath)
+    .then((res) => {
+      const lastCommitPath = normalizeHeaders(res.headers)['LOG-URL'];
+
+      commit(types.SET_LAST_COMMIT_URL, { tree, url: lastCommitPath });
+
+      return res.json();
+    })
+    .then((data) => {
+      data.forEach((lastCommit) => {
+        const entry = findEntry(tree, lastCommit.type, lastCommit.file_name);
+
+        if (entry) {
+          commit(types.SET_LAST_COMMIT_DATA, { entry, lastCommit });
+        }
+      });
+
+      dispatch('getLastCommitData', tree);
+    })
+    .catch(() => flash('Error fetching log data.'));
+};

app/assets/javascripts/repo/stores/mutation_types.js

@@ -4,11 +4,13 @@ export const SET_COMMIT_REF = 'SET_COMMIT_REF';
 export const SET_PARENT_TREE_URL = 'SET_PARENT_TREE_URL';
 export const SET_ROOT = 'SET_ROOT';
 export const SET_PREVIOUS_URL = 'SET_PREVIOUS_URL';
+export const SET_LAST_COMMIT_DATA = 'SET_LAST_COMMIT_DATA';
 
 // Tree mutation types
 export const SET_DIRECTORY_DATA = 'SET_DIRECTORY_DATA';
 export const TOGGLE_TREE_OPEN = 'TOGGLE_TREE_OPEN';
 export const CREATE_TMP_TREE = 'CREATE_TMP_TREE';
+export const SET_LAST_COMMIT_URL = 'SET_LAST_COMMIT_URL';
 
 // File mutation types
 export const SET_FILE_DATA = 'SET_FILE_DATA';

app/assets/javascripts/repo/stores/mutations.js

@@ -48,6 +48,13 @@ export default {
       previousUrl,
     });
   },
+  [types.SET_LAST_COMMIT_DATA](state, { entry, lastCommit }) {
+    Object.assign(entry.lastCommit, {
+      url: `${state.project.url}/commit/${lastCommit.commit.id}`,
+      message: lastCommit.commit.message,
+      updatedAt: lastCommit.commit.authored_date,
+    });
+  },
   ...fileMutations,
   ...treeMutations,
   ...branchMutations,

app/assets/javascripts/repo/stores/mutations/tree.js

@@ -18,19 +18,19 @@ export default {
           type: 'tree',
           parentTreeUrl,
           level,
-        }, state.project.url)),
+        })),
         ...data.submodules.map(m => utils.decorateData({
           ...m,
           type: 'submodule',
           parentTreeUrl,
           level,
-        }, state.project.url)),
+        })),
         ...data.blobs.map(b => utils.decorateData({
           ...b,
           type: 'blob',
           parentTreeUrl,
           level,
-        }, state.project.url)),
+        })),
       ],
     });
   },
@@ -39,6 +39,11 @@ export default {
       parentTreeUrl: url,
     });
   },
+  [types.SET_LAST_COMMIT_URL](state, { tree = state, url }) {
+    Object.assign(tree, {
+      lastCommitPath: url,
+    });
+  },
   [types.CREATE_TMP_TREE](state, { parent, tmpEntry }) {
     parent.tree.push(tmpEntry);
   },

app/assets/javascripts/repo/stores/state.js

@@ -8,6 +8,7 @@ export default () => ({
   endpoints: {},
   isRoot: false,
   isInitialRoot: false,
+  lastCommitPath: '',
   loading: false,
   onTopOfBranch: false,
   openFiles: [],

app/assets/javascripts/repo/stores/utils.js

@@ -12,7 +12,12 @@ export const dataStructure = () => ({
   opened: false,
   active: false,
   changed: false,
-  lastCommit: {},
+  lastCommitPath: '',
+  lastCommit: {
+    url: '',
+    message: '',
+    updatedAt: '',
+  },
   tree_url: '',
   blamePath: '',
   commitsPath: '',
@@ -27,14 +32,13 @@ export const dataStructure = () => ({
   base64: false,
 });
 
-export const decorateData = (entity, projectUrl = '') => {
+export const decorateData = (entity) => {
   const {
     id,
     type,
     url,
     name,
     icon,
-    last_commit,
     tree_url,
     path,
     renderError,
@@ -66,12 +70,6 @@ export const decorateData = (entity, projectUrl = '') => {
     renderError,
     content,
     base64,
-    // eslint-disable-next-line camelcase
-    lastCommit: last_commit ? {
-      url: `${projectUrl}/commit/${last_commit.id}`,
-      message: last_commit.message,
-      updatedAt: last_commit.committed_date,
-    } : {},
   };
 };
 

app/controllers/projects/refs_controller.rb

@@ -58,7 +58,8 @@ class Projects::RefsController < Projects::ApplicationController
         last_commit = @repo.last_commit_for_path(@commit.id, file)
         {
           file_name: content.name,
-          commit: last_commit
+          commit: last_commit,
+          type: content.type
         }
       end
     end
@@ -70,6 +71,11 @@ class Projects::RefsController < Projects::ApplicationController
 
     respond_to do |format|
       format.html { render_404 }
+      format.json do
+        response.headers["Log-Url"] = @more_log_url
+
+        render json: @logs
+      end
       format.js
     end
   end

app/serializers/blob_entity.rb

@@ -3,10 +3,6 @@ class BlobEntity < Grape::Entity
 
   expose :id, :path, :name, :mode
 
-  expose :last_commit do |blob|
-    request.project.repository.last_commit_for_path(blob.commit_id, blob.path)
-  end
-
   expose :icon do |blob|
     IconsHelper.file_type_icon_class('file', blob.mode, blob.name)
   end

app/serializers/tree_entity.rb

@@ -3,10 +3,6 @@ class TreeEntity < Grape::Entity
 
   expose :id, :path, :name, :mode
 
-  expose :last_commit do |tree|
-    request.project.repository.last_commit_for_path(tree.commit_id, tree.path)
-  end
-
   expose :icon do |tree|
     IconsHelper.file_type_icon_class('folder', tree.mode, tree.name)
   end

app/serializers/tree_root_entity.rb

@@ -18,4 +18,8 @@ class TreeRootEntity < Grape::Entity
 
     project_tree_path(request.project, File.join(request.ref, parent_tree_path))
   end
+
+  expose :last_commit_path do |tree|
+    logs_file_project_ref_path(request.project, request.ref, tree.path)
+  end
 end