From 054200062f1151fd31138305721d04798e8880b7 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Wed, 1 Nov 2017 16:08:06 +0000
Subject: Multi-file editor fetch log data from a different endpoint

Closes #38360
---
 .../javascripts/repo/components/repo_file.vue      | 35 ++++++++++++++++++++--
 .../repo/components/repo_loading_file.vue          |  2 +-
 app/assets/javascripts/repo/services/index.js      |  7 +++++
 app/assets/javascripts/repo/stores/actions/tree.js | 29 +++++++++++++++++-
 .../javascripts/repo/stores/mutation_types.js      |  2 ++
 app/assets/javascripts/repo/stores/mutations.js    |  7 +++++
 .../javascripts/repo/stores/mutations/tree.js      | 11 +++++--
 app/assets/javascripts/repo/stores/state.js        |  1 +
 app/assets/javascripts/repo/stores/utils.js        | 16 +++++-----
 app/controllers/projects/refs_controller.rb        |  8 ++++-
 app/serializers/blob_entity.rb                     |  4 ---
 app/serializers/tree_entity.rb                     |  4 ---
 app/serializers/tree_root_entity.rb                |  4 +++
 13 files changed, 104 insertions(+), 26 deletions(-)

diff --git a/app/assets/javascripts/repo/components/repo_file.vue b/app/assets/javascripts/repo/components/repo_file.vue
index 7a23154b340..3d2ab90187d 100644
--- a/app/assets/javascripts/repo/components/repo_file.vue
+++ b/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>
diff --git a/app/assets/javascripts/repo/components/repo_loading_file.vue b/app/assets/javascripts/repo/components/repo_loading_file.vue
index 1e6c405f292..a77fb8cc462 100644
--- a/app/assets/javascripts/repo/components/repo_loading_file.vue
+++ b/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"
diff --git a/app/assets/javascripts/repo/services/index.js b/app/assets/javascripts/repo/services/index.js
index dc222ccac01..2fb45dcb03c 100644
--- a/app/assets/javascripts/repo/services/index.js
+++ b/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',
+      },
+    });
+  },
 };
diff --git a/app/assets/javascripts/repo/stores/actions/tree.js b/app/assets/javascripts/repo/stores/actions/tree.js
index 129743c66c2..d8a09b52348 100644
--- a/app/assets/javascripts/repo/stores/actions/tree.js
+++ b/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.'));
+};
diff --git a/app/assets/javascripts/repo/stores/mutation_types.js b/app/assets/javascripts/repo/stores/mutation_types.js
index 4722a7dd0df..bc3390f1506 100644
--- a/app/assets/javascripts/repo/stores/mutation_types.js
+++ b/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';
diff --git a/app/assets/javascripts/repo/stores/mutations.js b/app/assets/javascripts/repo/stores/mutations.js
index 2f9b038322b..7e6c3d6e286 100644
--- a/app/assets/javascripts/repo/stores/mutations.js
+++ b/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,
diff --git a/app/assets/javascripts/repo/stores/mutations/tree.js b/app/assets/javascripts/repo/stores/mutations/tree.js
index 52be2673107..eb77512a7c4 100644
--- a/app/assets/javascripts/repo/stores/mutations/tree.js
+++ b/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);
   },
diff --git a/app/assets/javascripts/repo/stores/state.js b/app/assets/javascripts/repo/stores/state.js
index aab74754f02..0068834831e 100644
--- a/app/assets/javascripts/repo/stores/state.js
+++ b/app/assets/javascripts/repo/stores/state.js
@@ -8,6 +8,7 @@ export default () => ({
   endpoints: {},
   isRoot: false,
   isInitialRoot: false,
+  lastCommitPath: '',
   loading: false,
   onTopOfBranch: false,
   openFiles: [],
diff --git a/app/assets/javascripts/repo/stores/utils.js b/app/assets/javascripts/repo/stores/utils.js
index 797c2b1e5b9..18673fe82c7 100644
--- a/app/assets/javascripts/repo/stores/utils.js
+++ b/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,
-    } : {},
   };
 };
 
diff --git a/app/controllers/projects/refs_controller.rb b/app/controllers/projects/refs_controller.rb
index 2fd015df688..e5285ca8fba 100644
--- a/app/controllers/projects/refs_controller.rb
+++ b/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
diff --git a/app/serializers/blob_entity.rb b/app/serializers/blob_entity.rb
index 56f173e5a27..ad039a2623d 100644
--- a/app/serializers/blob_entity.rb
+++ b/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
diff --git a/app/serializers/tree_entity.rb b/app/serializers/tree_entity.rb
index 555e5cf83bd..9f1b485347f 100644
--- a/app/serializers/tree_entity.rb
+++ b/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
diff --git a/app/serializers/tree_root_entity.rb b/app/serializers/tree_root_entity.rb
index 69702ae1493..496f070ddbd 100644
--- a/app/serializers/tree_root_entity.rb
+++ b/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
-- 
cgit v1.2.1


From 5a2d9f66e28f54471b4d1cbfebe359152763a897 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Wed, 1 Nov 2017 16:26:10 +0000
Subject: only allow the call when not in collapsed view

[ci skip]
---
 app/assets/javascripts/repo/stores/actions/file.js | 2 ++
 app/assets/javascripts/repo/stores/actions/tree.js | 4 ++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/repo/stores/actions/file.js b/app/assets/javascripts/repo/stores/actions/file.js
index afbe0b78a82..5bae4fa826a 100644
--- a/app/assets/javascripts/repo/stores/actions/file.js
+++ b/app/assets/javascripts/repo/stores/actions/file.js
@@ -27,6 +27,8 @@ export const closeFile = ({ commit, state, dispatch }, { file, force = false })
   } else if (!state.openFiles.length) {
     pushState(file.parentTreeUrl);
   }
+
+  dispatch('getLastCommitData');
 };
 
 export const setFileActive = ({ commit, state, getters, dispatch }, file) => {
diff --git a/app/assets/javascripts/repo/stores/actions/tree.js b/app/assets/javascripts/repo/stores/actions/tree.js
index d8a09b52348..7e8b0b10322 100644
--- a/app/assets/javascripts/repo/stores/actions/tree.js
+++ b/app/assets/javascripts/repo/stores/actions/tree.js
@@ -111,8 +111,8 @@ export const createTempTree = ({ state, commit, dispatch }, name) => {
   }
 };
 
-export const getLastCommitData = ({ state, commit, dispatch }, tree = state) => {
-  if (tree.lastCommitPath === '') return;
+export const getLastCommitData = ({ state, commit, dispatch, getters }, tree = state) => {
+  if (tree.lastCommitPath === '' || getters.isCollapsed) return;
 
   service.getTreeLastCommit(tree.lastCommitPath)
     .then((res) => {
-- 
cgit v1.2.1


From 46e0a66aedac4be34fd5c578af46898a2d208cd2 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Wed, 1 Nov 2017 16:48:47 +0000
Subject: added refs_controller_spec

---
 spec/controllers/projects/refs_controller_spec.rb | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/spec/controllers/projects/refs_controller_spec.rb b/spec/controllers/projects/refs_controller_spec.rb
index 3a3e7467ef2..4c1315b26c1 100644
--- a/spec/controllers/projects/refs_controller_spec.rb
+++ b/spec/controllers/projects/refs_controller_spec.rb
@@ -19,16 +19,19 @@ describe Projects::RefsController do
           format: format
     end
 
-    def xhr_get(format = :html)
+    def xhr_get(format = :html, path = 'foo/bar/baz.html')
       xhr :get,
           :logs_tree,
           namespace_id: project.namespace.to_param,
-          project_id: project, id: 'master',
-          path: 'foo/bar/baz.html', format: format
+          project_id: project,
+          id: 'master',
+          path: path,
+          format: format
     end
 
     it 'never throws MissingTemplate' do
       expect { default_get }.not_to raise_error
+      expect { xhr_get(:json) }.not_to raise_error
       expect { xhr_get }.not_to raise_error
     end
 
@@ -42,5 +45,14 @@ describe Projects::RefsController do
       xhr_get(:js)
       expect(response).to be_success
     end
+
+    it 'renders JSON' do
+      xhr_get(:json, '/')
+
+      expect(response).to be_success
+      expect(json_response).to be_kind_of(Array)
+      expect(json_response[0]['type']).to eq('tree')
+      expect(json_response[0]['file_name']).to eq('bar')
+    end
   end
 end
-- 
cgit v1.2.1


From 4119e92be5a83d845b8076237f7b0957fc392e7a Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Thu, 2 Nov 2017 16:07:01 +0000
Subject: correctly updates commit data after committing changes

also merges data in after a fetch to save overriting all data.
changed the render keys to save a full re-render when any data changes
---
 .../javascripts/repo/components/repo_file.vue      | 31 +++++---------
 .../repo/components/repo_loading_file.vue          | 41 +++++++-----------
 .../javascripts/repo/components/repo_sidebar.vue   |  2 +-
 app/assets/javascripts/repo/stores/actions.js      | 18 +++++++-
 app/assets/javascripts/repo/stores/actions/tree.js | 35 +++++++++++++---
 app/assets/javascripts/repo/stores/mutations.js    |  2 +-
 .../javascripts/repo/stores/mutations/tree.js      | 25 +----------
 app/assets/javascripts/repo/stores/utils.js        | 19 +++++++++
 .../components/skeleton_loading_container.vue      | 32 ++++++++++++++
 app/controllers/projects/refs_controller.rb        |  5 ++-
 spec/javascripts/repo/components/repo_file_spec.js |  5 +--
 .../components/skeleton_loading_container_spec.js  | 49 ++++++++++++++++++++++
 12 files changed, 180 insertions(+), 84 deletions(-)
 create mode 100644 app/assets/javascripts/vue_shared/components/skeleton_loading_container.vue
 create mode 100644 spec/javascripts/vue_shared/components/skeleton_loading_container_spec.js

diff --git a/app/assets/javascripts/repo/components/repo_file.vue b/app/assets/javascripts/repo/components/repo_file.vue
index 3d2ab90187d..e7a40e06da7 100644
--- a/app/assets/javascripts/repo/components/repo_file.vue
+++ b/app/assets/javascripts/repo/components/repo_file.vue
@@ -1,11 +1,15 @@
 <script>
   import { mapActions, mapGetters } from 'vuex';
   import timeAgoMixin from '../../vue_shared/mixins/timeago';
+  import skeletonLoadingContainer from '../../vue_shared/components/skeleton_loading_container.vue';
 
   export default {
     mixins: [
       timeAgoMixin,
     ],
+    components: {
+      skeletonLoadingContainer,
+    },
     props: {
       file: {
         type: Object,
@@ -87,17 +91,10 @@
         >
           {{ file.lastCommit.message }}
         </a>
-        <div
+        <skeleton-loading-container
           v-else
-          class="animation-container animation-container-small"
-        >
-          <div
-            v-for="n in 6"
-            :key="n"
-            :class="'skeleton-line-' + n"
-          >
-          </div>
-        </div>
+          :small="true"
+        />
       </td>
 
       <td class="commit-update hidden-xs text-right">
@@ -107,17 +104,11 @@
         >
           {{ timeFormated(file.lastCommit.updatedAt) }}
         </span>
-        <div
+        <skeleton-loading-container
           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>
+          class="animation-container-right"
+          :small="true"
+        />
       </td>
     </template>
   </tr>
diff --git a/app/assets/javascripts/repo/components/repo_loading_file.vue b/app/assets/javascripts/repo/components/repo_loading_file.vue
index a77fb8cc462..14c2ddfb615 100644
--- a/app/assets/javascripts/repo/components/repo_loading_file.vue
+++ b/app/assets/javascripts/repo/components/repo_loading_file.vue
@@ -1,17 +1,16 @@
 <script>
   import { mapGetters } from 'vuex';
+  import skeletonLoadingContainer from '../../vue_shared/components/skeleton_loading_container.vue';
 
   export default {
+    components: {
+      skeletonLoadingContainer,
+    },
     computed: {
       ...mapGetters([
         'isCollapsed',
       ]),
     },
-    methods: {
-      lineOfCode(n) {
-        return `skeleton-line-${n}`;
-      },
-    },
   };
 </script>
 
@@ -21,36 +20,24 @@
     aria-label="Loading files"
   >
     <td>
-      <div
-        class="animation-container animation-container-small">
-        <div
-          v-for="n in 6"
-          :key="n"
-          :class="lineOfCode(n)">
-        </div>
-      </div>
+      <skeleton-loading-container
+        :small="true"
+      />
     </td>
     <template v-if="!isCollapsed">
       <td
         class="hidden-sm hidden-xs">
-        <div class="animation-container animation-container-small">
-          <div
-            v-for="n in 6"
-            :key="n"
-            :class="lineOfCode(n)">
-          </div>
-        </div>
+        <skeleton-loading-container
+          :small="true"
+        />
       </td>
 
       <td
         class="hidden-xs">
-        <div class="animation-container animation-container-small animation-container-right">
-          <div
-            v-for="n in 6"
-            :key="n"
-            :class="lineOfCode(n)">
-          </div>
-        </div>
+        <skeleton-loading-container
+          class="animation-container-right"
+          :small="true"
+        />
       </td>
     </template>
   </tr>
diff --git a/app/assets/javascripts/repo/components/repo_sidebar.vue b/app/assets/javascripts/repo/components/repo_sidebar.vue
index 63c0d70f5c0..8efc1aaa06c 100644
--- a/app/assets/javascripts/repo/components/repo_sidebar.vue
+++ b/app/assets/javascripts/repo/components/repo_sidebar.vue
@@ -80,7 +80,7 @@ export default {
       />
       <repo-file
         v-for="(file, index) in treeList"
-        :key="index"
+        :key="file.name + file.type"
         :file="file"
       />
     </tbody>
diff --git a/app/assets/javascripts/repo/stores/actions.js b/app/assets/javascripts/repo/stores/actions.js
index ca2f2a5ce7a..be290c268b1 100644
--- a/app/assets/javascripts/repo/stores/actions.js
+++ b/app/assets/javascripts/repo/stores/actions.js
@@ -64,7 +64,7 @@ export const checkCommitStatus = ({ state }) => service.getBranchData(
   })
   .catch(() => flash('Error checking branch data. Please try again.'));
 
-export const commitChanges = ({ commit, state, dispatch }, { payload, newMr }) =>
+export const commitChanges = ({ commit, state, dispatch, getters }, { payload, newMr }) =>
   service.commit(state.project.id, payload)
   .then((data) => {
     const { branch } = payload;
@@ -73,12 +73,28 @@ export const commitChanges = ({ commit, state, dispatch }, { payload, newMr }) =
       return;
     }
 
+    const lastCommit = {
+      commit_path: `${state.project.url}/commit/${data.id}`,
+      commit: {
+        message: data.message,
+        authored_date: data.committed_date,
+      },
+    };
+
     flash(`Your changes have been committed. Commit ${data.short_id} with ${data.stats.additions} additions, ${data.stats.deletions} deletions.`, 'notice');
 
     if (newMr) {
       redirectToUrl(`${state.endpoints.newMergeRequestUrl}${branch}`);
     } else {
       commit(types.SET_COMMIT_REF, data.id);
+
+      getters.changedFiles.forEach((entry) => {
+        commit(types.SET_LAST_COMMIT_DATA, {
+          entry,
+          lastCommit,
+        });
+      });
+
       dispatch('discardAllChanges');
       dispatch('closeAllFiles');
       dispatch('toggleEditMode');
diff --git a/app/assets/javascripts/repo/stores/actions/tree.js b/app/assets/javascripts/repo/stores/actions/tree.js
index 7e8b0b10322..aa830e946a2 100644
--- a/app/assets/javascripts/repo/stores/actions/tree.js
+++ b/app/assets/javascripts/repo/stores/actions/tree.js
@@ -7,6 +7,7 @@ import {
   setPageTitle,
   findEntry,
   createTemp,
+  createOrMergeEntry,
 } from '../utils';
 
 export const getTreeData = (
@@ -24,15 +25,19 @@ export const getTreeData = (
       return res.json();
     })
     .then((data) => {
+      const prevLastCommitPath = tree.lastCommitPath;
       if (!state.isInitialRoot) {
         commit(types.SET_ROOT, data.path === '/');
       }
 
-      commit(types.SET_DIRECTORY_DATA, { data, tree });
+      dispatch('updateDirectoryData', { 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);
+
+      if (prevLastCommitPath !== null) {
+        dispatch('getLastCommitData', tree);
+      }
 
       pushState(endpoint);
     })
@@ -50,7 +55,7 @@ export const toggleTreeOpen = ({ commit, dispatch }, { endpoint, tree }) => {
     pushState(tree.parentTreeUrl);
 
     commit(types.SET_PREVIOUS_URL, tree.parentTreeUrl);
-    commit(types.SET_DIRECTORY_DATA, { data, tree });
+    dispatch('updateDirectoryData', { data, tree });
   } else {
     commit(types.SET_PREVIOUS_URL, endpoint);
     dispatch('getTreeData', { endpoint, tree });
@@ -112,11 +117,11 @@ export const createTempTree = ({ state, commit, dispatch }, name) => {
 };
 
 export const getLastCommitData = ({ state, commit, dispatch, getters }, tree = state) => {
-  if (tree.lastCommitPath === '' || getters.isCollapsed) return;
+  if (tree.lastCommitPath === null || getters.isCollapsed) return;
 
   service.getTreeLastCommit(tree.lastCommitPath)
     .then((res) => {
-      const lastCommitPath = normalizeHeaders(res.headers)['LOG-URL'];
+      const lastCommitPath = normalizeHeaders(res.headers)['MORE-LOGS-URL'] || null;
 
       commit(types.SET_LAST_COMMIT_URL, { tree, url: lastCommitPath });
 
@@ -135,3 +140,23 @@ export const getLastCommitData = ({ state, commit, dispatch, getters }, tree = s
     })
     .catch(() => flash('Error fetching log data.'));
 };
+
+export const updateDirectoryData = ({ commit, state }, { data, tree }) => {
+  const level = tree.level !== undefined ? tree.level + 1 : 0;
+  const parentTreeUrl = data.parent_tree_url ? `${data.parent_tree_url}${data.path}` : state.endpoints.rootUrl;
+  const createEntry = (entry, type) => createOrMergeEntry({
+    tree,
+    entry,
+    level,
+    type,
+    parentTreeUrl,
+  });
+
+  const formattedData = [
+    ...data.trees.map(t => createEntry(t, 'tree')),
+    ...data.submodules.map(m => createEntry(m, 'submodule')),
+    ...data.blobs.map(b => createEntry(b, 'blob')),
+  ];
+
+  commit(types.SET_DIRECTORY_DATA, { tree, data: formattedData });
+};
diff --git a/app/assets/javascripts/repo/stores/mutations.js b/app/assets/javascripts/repo/stores/mutations.js
index 7e6c3d6e286..ae2ba5bedf7 100644
--- a/app/assets/javascripts/repo/stores/mutations.js
+++ b/app/assets/javascripts/repo/stores/mutations.js
@@ -50,7 +50,7 @@ export default {
   },
   [types.SET_LAST_COMMIT_DATA](state, { entry, lastCommit }) {
     Object.assign(entry.lastCommit, {
-      url: `${state.project.url}/commit/${lastCommit.commit.id}`,
+      url: lastCommit.commit_path,
       message: lastCommit.commit.message,
       updatedAt: lastCommit.commit.authored_date,
     });
diff --git a/app/assets/javascripts/repo/stores/mutations/tree.js b/app/assets/javascripts/repo/stores/mutations/tree.js
index eb77512a7c4..130221c9fda 100644
--- a/app/assets/javascripts/repo/stores/mutations/tree.js
+++ b/app/assets/javascripts/repo/stores/mutations/tree.js
@@ -1,5 +1,4 @@
 import * as types from '../mutation_types';
-import * as utils from '../utils';
 
 export default {
   [types.TOGGLE_TREE_OPEN](state, tree) {
@@ -8,30 +7,8 @@ export default {
     });
   },
   [types.SET_DIRECTORY_DATA](state, { data, tree }) {
-    const level = tree.level !== undefined ? tree.level + 1 : 0;
-    const parentTreeUrl = data.parent_tree_url ? `${data.parent_tree_url}${data.path}` : state.endpoints.rootUrl;
-
     Object.assign(tree, {
-      tree: [
-        ...data.trees.map(t => utils.decorateData({
-          ...t,
-          type: 'tree',
-          parentTreeUrl,
-          level,
-        })),
-        ...data.submodules.map(m => utils.decorateData({
-          ...m,
-          type: 'submodule',
-          parentTreeUrl,
-          level,
-        })),
-        ...data.blobs.map(b => utils.decorateData({
-          ...b,
-          type: 'blob',
-          parentTreeUrl,
-          level,
-        })),
-      ],
+      tree: data,
     });
   },
   [types.SET_PARENT_TREE_URL](state, url) {
diff --git a/app/assets/javascripts/repo/stores/utils.js b/app/assets/javascripts/repo/stores/utils.js
index 18673fe82c7..57c0dd62c41 100644
--- a/app/assets/javascripts/repo/stores/utils.js
+++ b/app/assets/javascripts/repo/stores/utils.js
@@ -104,3 +104,22 @@ export const createTemp = ({ name, path, type, level, changed, content, base64 }
     renderError: base64,
   });
 };
+
+export const createOrMergeEntry = ({ tree, entry, type, parentTreeUrl, level }) => {
+  const found = findEntry(tree, type, entry.name);
+
+  if (found) {
+    return Object.assign({}, found, {
+      id: entry.id,
+      url: entry.url,
+      tempFile: false,
+    });
+  }
+
+  return decorateData({
+    ...entry,
+    type,
+    parentTreeUrl,
+    level,
+  });
+};
diff --git a/app/assets/javascripts/vue_shared/components/skeleton_loading_container.vue b/app/assets/javascripts/vue_shared/components/skeleton_loading_container.vue
new file mode 100644
index 00000000000..4e759fb6c6c
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/skeleton_loading_container.vue
@@ -0,0 +1,32 @@
+<script>
+  export default {
+    props: {
+      small: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+      lines: {
+        type: Number,
+        required: false,
+        default: 6,
+      },
+    },
+  };
+</script>
+
+<template>
+  <div
+    class="animation-container"
+    :class="{
+      'animation-container-small': small,
+    }"
+  >
+    <div
+      v-for="line in lines"
+      :key="line"
+      :class="'skeleton-line-' + line"
+    >
+    </div>
+  </div>
+</template>
diff --git a/app/controllers/projects/refs_controller.rb b/app/controllers/projects/refs_controller.rb
index e5285ca8fba..ff79f88afc3 100644
--- a/app/controllers/projects/refs_controller.rb
+++ b/app/controllers/projects/refs_controller.rb
@@ -59,7 +59,8 @@ class Projects::RefsController < Projects::ApplicationController
         {
           file_name: content.name,
           commit: last_commit,
-          type: content.type
+          type: content.type,
+          commit_path: project_commit_path(@project, last_commit)
         }
       end
     end
@@ -72,7 +73,7 @@ class Projects::RefsController < Projects::ApplicationController
     respond_to do |format|
       format.html { render_404 }
       format.json do
-        response.headers["Log-Url"] = @more_log_url
+        response.headers["More-Logs-Url"] = @more_log_url
 
         render json: @logs
       end
diff --git a/spec/javascripts/repo/components/repo_file_spec.js b/spec/javascripts/repo/components/repo_file_spec.js
index c45f8a18d1f..bf9181fb09c 100644
--- a/spec/javascripts/repo/components/repo_file_spec.js
+++ b/spec/javascripts/repo/components/repo_file_spec.js
@@ -20,7 +20,7 @@ describe('RepoFile', () => {
     resetStore(vm.$store);
   });
 
-  it('renders link, icon, name and last commit details', () => {
+  it('renders link, icon and name', () => {
     const RepoFile = Vue.extend(repoFile);
     vm = new RepoFile({
       store,
@@ -37,10 +37,9 @@ describe('RepoFile', () => {
     expect(vm.$el.querySelector(`.${vm.file.icon}`).style.marginLeft).toEqual('0px');
     expect(name.href).toMatch(`/${vm.file.url}`);
     expect(name.textContent.trim()).toEqual(vm.file.name);
-    expect(vm.$el.querySelector('.commit-message').textContent.trim()).toBe(vm.file.lastCommit.message);
-    expect(vm.$el.querySelector('.commit-update').textContent.trim()).toBe(updated);
     expect(fileIcon.classList.contains(vm.file.icon)).toBeTruthy();
     expect(fileIcon.style.marginLeft).toEqual(`${vm.file.level * 10}px`);
+    expect(vm.$el.querySelectorAll('.animation-container').length).toBe(2);
   });
 
   it('does render if hasFiles is true and is loading tree', () => {
diff --git a/spec/javascripts/vue_shared/components/skeleton_loading_container_spec.js b/spec/javascripts/vue_shared/components/skeleton_loading_container_spec.js
new file mode 100644
index 00000000000..a5db0b2c59e
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/skeleton_loading_container_spec.js
@@ -0,0 +1,49 @@
+import Vue from 'vue';
+import skeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
+import mountComponent from '../../helpers/vue_mount_component_helper';
+
+describe('Skeleton loading container', () => {
+  let vm;
+
+  beforeEach(() => {
+    const component = Vue.extend(skeletonLoadingContainer);
+    vm = mountComponent(component);
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('renders 6 skeleton lines by default', () => {
+    expect(vm.$el.querySelector('.skeleton-line-6')).not.toBeNull();
+  });
+
+  it('renders in full mode by default', () => {
+    expect(vm.$el.classList.contains('animation-container-small')).toBeFalsy();
+  });
+
+  describe('small', () => {
+    beforeEach((done) => {
+      vm.small = true;
+
+      Vue.nextTick(done);
+    });
+
+    it('renders in small mode', () => {
+      expect(vm.$el.classList.contains('animation-container-small')).toBeTruthy();
+    });
+  });
+
+  describe('lines', () => {
+    beforeEach((done) => {
+      vm.lines = 5;
+
+      Vue.nextTick(done);
+    });
+
+    it('renders 5 lines', () => {
+      expect(vm.$el.querySelector('.skeleton-line-5')).not.toBeNull();
+      expect(vm.$el.querySelector('.skeleton-line-6')).toBeNull();
+    });
+  });
+});
-- 
cgit v1.2.1


From e2bcb3a46fd7d29bcbd17101e9a4e8f7d0ca4746 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Fri, 3 Nov 2017 11:27:02 +0000
Subject: fixed specs

---
 app/controllers/projects/refs_controller.rb          | 2 +-
 spec/controllers/projects/refs_controller_spec.rb    | 8 +++-----
 spec/features/projects/tree/create_directory_spec.rb | 5 -----
 3 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/app/controllers/projects/refs_controller.rb b/app/controllers/projects/refs_controller.rb
index ff79f88afc3..82f7ccb6afa 100644
--- a/app/controllers/projects/refs_controller.rb
+++ b/app/controllers/projects/refs_controller.rb
@@ -60,7 +60,7 @@ class Projects::RefsController < Projects::ApplicationController
           file_name: content.name,
           commit: last_commit,
           type: content.type,
-          commit_path: project_commit_path(@project, last_commit)
+          commit_path: (project_commit_path(@project, last_commit) unless last_commit.nil?)
         }
       end
     end
diff --git a/spec/controllers/projects/refs_controller_spec.rb b/spec/controllers/projects/refs_controller_spec.rb
index 4c1315b26c1..748ae040928 100644
--- a/spec/controllers/projects/refs_controller_spec.rb
+++ b/spec/controllers/projects/refs_controller_spec.rb
@@ -19,13 +19,13 @@ describe Projects::RefsController do
           format: format
     end
 
-    def xhr_get(format = :html, path = 'foo/bar/baz.html')
+    def xhr_get(format = :html)
       xhr :get,
           :logs_tree,
           namespace_id: project.namespace.to_param,
           project_id: project,
           id: 'master',
-          path: path,
+          path: 'foo/bar/baz.html',
           format: format
     end
 
@@ -47,12 +47,10 @@ describe Projects::RefsController do
     end
 
     it 'renders JSON' do
-      xhr_get(:json, '/')
+      xhr_get(:json)
 
       expect(response).to be_success
       expect(json_response).to be_kind_of(Array)
-      expect(json_response[0]['type']).to eq('tree')
-      expect(json_response[0]['file_name']).to eq('bar')
     end
   end
 end
diff --git a/spec/features/projects/tree/create_directory_spec.rb b/spec/features/projects/tree/create_directory_spec.rb
index 8ee7b9cf015..1686e7fa342 100644
--- a/spec/features/projects/tree/create_directory_spec.rb
+++ b/spec/features/projects/tree/create_directory_spec.rb
@@ -31,10 +31,5 @@ feature 'Multi-file editor new directory', :js do
     click_button('Commit 1 file')
 
     expect(page).to have_selector('td', text: 'commit message')
-
-    click_link('foldername')
-
-    expect(page).to have_selector('td', text: 'commit message', count: 2)
-    expect(page).to have_selector('td', text: '.gitkeep')
   end
 end
-- 
cgit v1.2.1


From eacd821a3c0bae80a56a6933d5ab6aea4b9f283e Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Mon, 6 Nov 2017 08:53:33 +0000
Subject: moved key into data structure uses an array of classes to render
 skeleton loading cells

---
 app/assets/javascripts/repo/components/repo_file.vue          |  2 +-
 app/assets/javascripts/repo/components/repo_sidebar.vue       |  2 +-
 app/assets/javascripts/repo/stores/utils.js                   |  2 ++
 .../vue_shared/components/skeleton_loading_container.vue      | 11 ++++++++---
 4 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/repo/components/repo_file.vue b/app/assets/javascripts/repo/components/repo_file.vue
index e7a40e06da7..9f16e6bb2cc 100644
--- a/app/assets/javascripts/repo/components/repo_file.vue
+++ b/app/assets/javascripts/repo/components/repo_file.vue
@@ -39,7 +39,7 @@
         return this.file.id.substr(0, 8);
       },
       submoduleColSpan() {
-        return !this.isCollapsed && this.isSubmodule ? 3 : undefined;
+        return !this.isCollapsed && this.isSubmodule ? 3 : 1;
       },
     },
     methods: {
diff --git a/app/assets/javascripts/repo/components/repo_sidebar.vue b/app/assets/javascripts/repo/components/repo_sidebar.vue
index 8efc1aaa06c..3f61d048288 100644
--- a/app/assets/javascripts/repo/components/repo_sidebar.vue
+++ b/app/assets/javascripts/repo/components/repo_sidebar.vue
@@ -80,7 +80,7 @@ export default {
       />
       <repo-file
         v-for="(file, index) in treeList"
-        :key="file.name + file.type"
+        :key="file.key"
         :file="file"
       />
     </tbody>
diff --git a/app/assets/javascripts/repo/stores/utils.js b/app/assets/javascripts/repo/stores/utils.js
index 57c0dd62c41..fae1f4439a9 100644
--- a/app/assets/javascripts/repo/stores/utils.js
+++ b/app/assets/javascripts/repo/stores/utils.js
@@ -1,5 +1,6 @@
 export const dataStructure = () => ({
   id: '',
+  key: '',
   type: '',
   name: '',
   url: '',
@@ -55,6 +56,7 @@ export const decorateData = (entity) => {
   return {
     ...dataStructure(),
     id,
+    key: `${name}-${type}-${id}`,
     type,
     name,
     url,
diff --git a/app/assets/javascripts/vue_shared/components/skeleton_loading_container.vue b/app/assets/javascripts/vue_shared/components/skeleton_loading_container.vue
index 4e759fb6c6c..7ab5e069003 100644
--- a/app/assets/javascripts/vue_shared/components/skeleton_loading_container.vue
+++ b/app/assets/javascripts/vue_shared/components/skeleton_loading_container.vue
@@ -12,6 +12,11 @@
         default: 6,
       },
     },
+    computed: {
+      lineClasses() {
+        return new Array(this.lines).fill().map((_, i) => `skeleton-line-${i}`);
+      },
+    },
   };
 </script>
 
@@ -23,9 +28,9 @@
     }"
   >
     <div
-      v-for="line in lines"
-      :key="line"
-      :class="'skeleton-line-' + line"
+      v-for="(css, index) in lineClasses"
+      :key="index"
+      :class="css"
     >
     </div>
   </div>
-- 
cgit v1.2.1


From bd5ea484952e3ee4c50b7ffeaa20801696222ed2 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Mon, 6 Nov 2017 10:51:44 +0000
Subject: fixed karma test updated controller based on review

---
 .../javascripts/vue_shared/components/skeleton_loading_container.vue   | 2 +-
 app/controllers/projects/refs_controller.rb                            | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/vue_shared/components/skeleton_loading_container.vue b/app/assets/javascripts/vue_shared/components/skeleton_loading_container.vue
index 7ab5e069003..b06493e6c66 100644
--- a/app/assets/javascripts/vue_shared/components/skeleton_loading_container.vue
+++ b/app/assets/javascripts/vue_shared/components/skeleton_loading_container.vue
@@ -14,7 +14,7 @@
     },
     computed: {
       lineClasses() {
-        return new Array(this.lines).fill().map((_, i) => `skeleton-line-${i}`);
+        return new Array(this.lines).fill().map((_, i) => `skeleton-line-${i + 1}`);
       },
     },
   };
diff --git a/app/controllers/projects/refs_controller.rb b/app/controllers/projects/refs_controller.rb
index 82f7ccb6afa..2376f469213 100644
--- a/app/controllers/projects/refs_controller.rb
+++ b/app/controllers/projects/refs_controller.rb
@@ -56,11 +56,12 @@ class Projects::RefsController < Projects::ApplicationController
       contents[@offset, @limit].to_a.map do |content|
         file = @path ? File.join(@path, content.name) : content.name
         last_commit = @repo.last_commit_for_path(@commit.id, file)
+        commit_path = project_commit_path(@project, last_commit) if last_commit
         {
           file_name: content.name,
           commit: last_commit,
           type: content.type,
-          commit_path: (project_commit_path(@project, last_commit) unless last_commit.nil?)
+          commit_path: commit_path
         }
       end
     end
-- 
cgit v1.2.1