1 files changed, 27 insertions, 3 deletions
diff --git a/app/assets/javascripts/registry/explorer/index.js b/app/assets/javascripts/registry/explorer/index.js
index d887b6a1b15..a3890ab5c42 100644
--- a/app/assets/javascripts/registry/explorer/index.js
+++ b/app/assets/javascripts/registry/explorer/index.js
@@ -2,6 +2,7 @@ import Vue from 'vue';
 import { GlToast } from '@gitlab/ui';
 import Translate from '~/vue_shared/translate';
 import { parseBoolean } from '~/lib/utils/common_utils';
+import PerformancePlugin from '~/performance/vue_performance_plugin';
 import RegistryExplorer from './pages/index.vue';
 import RegistryBreadcrumb from './components/registry_breadcrumb.vue';
 import createRouter from './router';
@@ -10,6 +11,17 @@ import { apolloProvider } from './graphql/index';
 Vue.use(Translate);
 Vue.use(GlToast);
 
+Vue.use(PerformancePlugin, {
+  components: [
+    'RegistryListPage',
+    'ListHeader',
+    'ImageListRow',
+    'RegistryDetailsPage',
+    'DetailsHeader',
+    'TagsList',
+  ],
+});
+
 export default () => {
   const el = document.getElementById('js-container-registry');
 
@@ -59,16 +71,28 @@ export default () => {
     });
 
   const attachBreadcrumb = () => {
-    const breadCrumbEl = document.querySelector('nav .js-breadcrumbs-list');
-    const crumbs = [...document.querySelectorAll('.js-breadcrumbs-list li')];
+    const breadCrumbEls = document.querySelectorAll('nav .js-breadcrumbs-list li');
+    const breadCrumbEl = breadCrumbEls[breadCrumbEls.length - 1];
+    const crumbs = [breadCrumbEl.querySelector('h2')];
+    const nestedBreadcrumbEl = document.createElement('div');
+    breadCrumbEl.replaceChild(nestedBreadcrumbEl, breadCrumbEl.querySelector('h2'));
     return new Vue({
-      el: breadCrumbEl,
+      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: {