Fixed parent directory still loading in repository browser

Stops the directory from setting data on the Vue instance after
the user has navigated after from the direcetory.
This fixes a bug where the parents directory content would still load
and then become visible even after the user navigates away.

Closes https://gitlab.com/gitlab-org/gitlab/-/issues/221282

app/assets/javascripts/repository/components/tree_content.vue

@@ -75,6 +75,7 @@ export default {
   },
   methods: {
     fetchFiles() {
+      const path = this.path || '/';
       this.isLoadingFiles = true;
 
       return this.$apollo
@@ -83,14 +84,14 @@ export default {
           variables: {
             projectPath: this.projectPath,
             ref: this.ref,
-            path: this.path || '/',
+            path,
             nextPageCursor: this.nextPageCursor,
             pageSize: this.pageSize,
           },
         })
         .then(({ data }) => {
           if (data.errors) throw data.errors;
-          if (!data?.project?.repository) return;
+          if (!data?.project?.repository || path !== (this.path || '/')) return;
 
           const pageInfo = this.hasNextPage(data.project.repository.tree);
 

app/assets/javascripts/repository/log_tree.js

@@ -5,8 +5,8 @@ import commitsQuery from './queries/commits.query.graphql';
 import projectPathQuery from './queries/project_path.query.graphql';
 import refQuery from './queries/ref.query.graphql';
 
-let fetchpromise;
-let resolvers = [];
+const fetchpromises = {};
+const resolvers = {};
 
 export function resolveCommit(commits, path, { resolve, entry }) {
   const commit = commits.find(c => c.filePath === `${path}/${entry.name}` && c.type === entry.type);
@@ -18,15 +18,19 @@ export function resolveCommit(commits, path, { resolve, entry }) {
 
 export function fetchLogsTree(client, path, offset, resolver = null) {
   if (resolver) {
-    resolvers.push(resolver);
+    if (!resolvers[path]) {
+      resolvers[path] = [resolver];
+    } else {
+      resolvers[path].push(resolver);
+    }
   }
 
-  if (fetchpromise) return fetchpromise;
+  if (fetchpromises[path]) return fetchpromises[path];
 
   const { projectPath } = client.readQuery({ query: projectPathQuery });
   const { escapedRef } = client.readQuery({ query: refQuery });
 
-  fetchpromise = axios
+  fetchpromises[path] = axios
     .get(
       `${gon.relative_url_root}/${projectPath}/-/refs/${escapedRef}/logs_tree/${encodeURIComponent(
         path.replace(/^\//, ''),
@@ -46,16 +50,16 @@ export function fetchLogsTree(client, path, offset, resolver = null) {
         data,
       });
 
-      resolvers.forEach(r => resolveCommit(data.commits, path, r));
+      resolvers[path].forEach(r => resolveCommit(data.commits, path, r));
 
-      fetchpromise = null;
+      delete fetchpromises[path];
 
       if (headerLogsOffset) {
         fetchLogsTree(client, path, headerLogsOffset);
       } else {
-        resolvers = [];
+        delete resolvers[path];
       }
     });
 
-  return fetchpromise;
+  return fetchpromises[path];
 }

spec/frontend/repository/log_tree_spec.js

@@ -84,6 +84,14 @@ describe('fetchLogsTree', () => {
       expect(axios.get.mock.calls.length).toEqual(1);
     }));
 
+  it('calls axios for each path', () =>
+    Promise.all([
+      fetchLogsTree(client, '', '0', resolver),
+      fetchLogsTree(client, '/test', '0', resolver),
+    ]).then(() => {
+      expect(axios.get.mock.calls.length).toEqual(2);
+    }));
+
   it('calls entry resolver', () =>
     fetchLogsTree(client, '', '0', resolver).then(() => {
       expect(resolver.resolve).toHaveBeenCalledWith(