1 files changed, 35 insertions, 0 deletions
diff --git a/app/assets/javascripts/packages_and_registries/shared/utils.js b/app/assets/javascripts/packages_and_registries/shared/utils.js
index cf18f655e79..7e963cd0b08 100644
--- a/app/assets/javascripts/packages_and_registries/shared/utils.js
+++ b/app/assets/javascripts/packages_and_registries/shared/utils.js
@@ -1,3 +1,4 @@
+import Vue from 'vue';
 import { queryToObject } from '~/lib/utils/url_utility';
 import { FILTERED_SEARCH_TERM } from './constants';
 
@@ -38,3 +39,37 @@ export const getCommitLink = ({ project_path: projectPath, pipeline = {} }, isGr
 
   return `../commit/${pipeline.sha}`;
 };
+
+export const renderBreadcrumb = (router, apolloProvider, RegistryBreadcrumb) => () => {
+  const breadCrumbEls = document.querySelectorAll('nav .js-breadcrumbs-list li');
+  const breadCrumbEl = breadCrumbEls[breadCrumbEls.length - 1];
+  const lastCrumb = breadCrumbEl.children[0];
+  const crumbs = [lastCrumb];
+  const nestedBreadcrumbEl = document.createElement('div');
+  breadCrumbEl.replaceChild(nestedBreadcrumbEl, lastCrumb);
+  return new Vue({
+    el: nestedBreadcrumbEl,
+    router,
+    apolloProvider,
+    components: {
+      RegistryBreadcrumb,
+    },
+    render(createElement) {
+      // FIXME(@tnir): this is a workaround until the MR gets merged:
+      // https://gitlab.com/gitlab-org/gitlab/-/merge_requests/48115
+      const parentEl = breadCrumbEl.parentElement.parentElement;
+      if (parentEl) {
+        parentEl.classList.remove('breadcrumbs-container');
+        parentEl.classList.add('gl-display-flex');
+        parentEl.classList.add('w-100');
+      }
+      // End of FIXME(@tnir)
+      return createElement('registry-breadcrumb', {
+        class: breadCrumbEl.className,
+        props: {
+          crumbs,
+        },
+      });
+    },
+  });
+};