Created repository list breadcrumbs Vue app

4 files changed, 87 insertions, 4 deletions

diff --git a/app/assets/javascripts/repository/components/breadcrumbs.vue b/app/assets/javascripts/repository/components/breadcrumbs.vue
new file mode 100644
index 00000000000..6eca015036f
--- /dev/null
+++ b/app/assets/javascripts/repository/components/breadcrumbs.vue
@@ -0,0 +1,61 @@
+<script>
+import getRefMixin from '../mixins/get_ref';
+import getProjectShortPath from '../queries/getProjectShortPath.graphql';
+
+export default {
+  apollo: {
+    projectShortPath: {
+      query: getProjectShortPath,
+    },
+  },
+  mixins: [getRefMixin],
+  props: {
+    currentPath: {
+      type: String,
+      required: false,
+      default: '/',
+    },
+  },
+  data() {
+    return {
+      projectShortPath: '',
+    };
+  },
+  computed: {
+    pathLinks() {
+      return this.currentPath
+        .split('/')
+        .filter(p => p !== '')
+        .reduce(
+          (acc, name, i) => {
+            const path = `${i > 0 ? acc[i].path : ''}/${name}`;
+
+            return acc.concat({
+              name,
+              path,
+              to: `/tree/${this.ref}${path}`,
+            });
+          },
+          [{ name: this.projectShortPath, path: '/', to: `/tree/${this.ref}` }],
+        );
+    },
+  },
+  methods: {
+    isLast(i) {
+      return i === this.pathLinks.length - 1;
+    },
+  },
+};
+</script>
+
+<template>
+  <nav :aria-label="__('Files breadcrumb')">
+    <ol class="breadcrumb repo-breadcrumb">
+      <li v-for="(link, i) in pathLinks" :key="i" class="breadcrumb-item">
+        <router-link :to="link.to" :aria-current="isLast(i) ? 'page' : null">
+          {{ link.name }}
+        </router-link>
+      </li>
+    </ol>
+  </nav>
+</template>
diff --git a/app/assets/javascripts/repository/index.js b/app/assets/javascripts/repository/index.js
index f992d4b6d54..52f53be045b 100644
--- a/app/assets/javascripts/repository/index.js
+++ b/app/assets/javascripts/repository/index.js
@@ -1,24 +1,27 @@
 import Vue from 'vue';
 import createRouter from './router';
 import App from './components/app.vue';
+import Breadcrumbs from './components/breadcrumbs.vue';
 import apolloProvider from './graphql';
 import { setTitle } from './utils/title';
 
 export default function setupVueRepositoryList() {
   const el = document.getElementById('js-tree-list');
-  const { projectPath, ref, fullName } = el.dataset;
+  const { projectPath, projectShortPath, ref, fullName } = el.dataset;
   const router = createRouter(projectPath, ref);
 
   apolloProvider.clients.defaultClient.cache.writeData({
     data: {
       projectPath,
+      projectShortPath,
       ref,
     },
   });
 
-  router.afterEach(({ params: { pathMatch } }) => setTitle(pathMatch, ref, fullName));
-  router.afterEach(to => {
-    const isRoot = to.params.pathMatch === undefined || to.params.pathMatch === '/';
+  router.afterEach(({ params: { pathMatch } }) => {
+    const isRoot = pathMatch === undefined || pathMatch === '/';
+
+    setTitle(pathMatch, ref, fullName);
 
     if (!isRoot) {
       document
@@ -31,6 +34,20 @@ export default function setupVueRepositoryList() {
       .forEach(elem => elem.classList.toggle('hidden', !isRoot));
   });
 
+  // eslint-disable-next-line no-new
+  new Vue({
+    el: document.getElementById('js-repo-breadcrumb'),
+    router,
+    apolloProvider,
+    render(h) {
+      return h(Breadcrumbs, {
+        props: {
+          currentPath: this.$route.params.pathMatch,
+        },
+      });
+    },
+  });
+
   return new Vue({
     el,
     router,
diff --git a/app/assets/javascripts/repository/queries/getProjectShortPath.graphql b/app/assets/javascripts/repository/queries/getProjectShortPath.graphql
new file mode 100644
index 00000000000..34eb26598c2
--- /dev/null
+++ b/app/assets/javascripts/repository/queries/getProjectShortPath.graphql
@@ -0,0 +1,3 @@
+query getProjectShortPath {
+  projectShortPath @client
+}
diff --git a/app/assets/javascripts/repository/utils/title.js b/app/assets/javascripts/repository/utils/title.js
index 3c3e918c0a8..4e194640e92 100644
--- a/app/assets/javascripts/repository/utils/title.js
+++ b/app/assets/javascripts/repository/utils/title.js
@@ -1,5 +1,7 @@
 // eslint-disable-next-line import/prefer-default-export
 export const setTitle = (pathMatch, ref, project) => {
+  if (!pathMatch) return;
+
   const path = pathMatch.replace(/^\//, '');
   const isEmpty = path === '';