1 files changed, 51 insertions, 0 deletions
diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/registry_breadcrumb.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/registry_breadcrumb.vue
new file mode 100644
index 00000000000..e77eda31596
--- /dev/null
+++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/registry_breadcrumb.vue
@@ -0,0 +1,51 @@
+<script>
+// We are using gl-breadcrumb only at the last child of the handwritten breadcrumb
+// until this gitlab-ui issue is resolved: https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1079
+//
+// See the CSS workaround in app/assets/stylesheets/pages/registry.scss when this file is changed.
+import { GlBreadcrumb, GlIcon } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlBreadcrumb,
+    GlIcon,
+  },
+  computed: {
+    rootRoute() {
+      return this.$router.options.routes.find((r) => r.meta.root);
+    },
+    detailsRoute() {
+      return this.$router.options.routes.find((r) => r.name === 'details');
+    },
+    isRootRoute() {
+      return this.$route.name === this.rootRoute.name;
+    },
+    isLoaded() {
+      return this.isRootRoute || this.$store?.state.imageDetails?.name;
+    },
+    allCrumbs() {
+      const crumbs = [
+        {
+          text: this.rootRoute.meta.nameGenerator(),
+          to: this.rootRoute.path,
+        },
+      ];
+      if (!this.isRootRoute) {
+        crumbs.push({
+          text: this.detailsRoute.meta.nameGenerator(),
+          href: this.detailsRoute.meta.path,
+        });
+      }
+      return crumbs;
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-breadcrumb :key="isLoaded" :items="allCrumbs">
+    <template #separator>
+      <gl-icon name="angle-right" :size="8" />
+    </template>
+  </gl-breadcrumb>
+</template>