1 files changed, 68 insertions, 0 deletions
diff --git a/app/assets/javascripts/packages_and_registries/harbor_registry/components/harbor_registry_breadcrumb.vue b/app/assets/javascripts/packages_and_registries/harbor_registry/components/harbor_registry_breadcrumb.vue
new file mode 100644
index 00000000000..ac1df5cf93f
--- /dev/null
+++ b/app/assets/javascripts/packages_and_registries/harbor_registry/components/harbor_registry_breadcrumb.vue
@@ -0,0 +1,68 @@
+<script>
+// Since app/assets/javascripts/packages_and_registries/shared/components/registry_breadcrumb.vue
+// can only handle two levels of breadcrumbs, but we have three levels here.
+// So we extended the registry_breadcrumb.vue component with harbor_registry_breadcrumb.vue to support multiple levels of breadcrumbs
+import { GlBreadcrumb, GlIcon } from '@gitlab/ui';
+import { isArray, last } from 'lodash';
+
+export default {
+  components: {
+    GlBreadcrumb,
+    GlIcon,
+  },
+  computed: {
+    rootRoute() {
+      return this.$router.options.routes.find((r) => r.meta.root);
+    },
+    isRootRoute() {
+      return this.$route.name === this.rootRoute.name;
+    },
+    currentRoute() {
+      const currentName = this.$route.meta.nameGenerator();
+      const currentHref = this.$route.meta.hrefGenerator();
+      let routeInfoList = [
+        {
+          text: currentName,
+          to: currentHref,
+        },
+      ];
+
+      if (isArray(currentName) && isArray(currentHref)) {
+        routeInfoList = currentName.map((name, index) => {
+          return {
+            text: name,
+            to: currentHref[index],
+          };
+        });
+      }
+
+      return routeInfoList;
+    },
+    isLoaded() {
+      return this.isRootRoute || last(this.currentRoute).text;
+    },
+    allCrumbs() {
+      let crumbs = [
+        {
+          text: this.rootRoute.meta.nameGenerator(),
+          to: this.rootRoute.path,
+        },
+      ];
+      if (!this.isRootRoute) {
+        crumbs = crumbs.concat(this.currentRoute);
+      }
+      return crumbs;
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-breadcrumb :key="isLoaded" :items="allCrumbs">
+    <template #separator>
+      <span class="gl-mx-n5">
+        <gl-icon name="chevron-lg-right" :size="8" />
+      </span>
+    </template>
+  </gl-breadcrumb>
+</template>