Add latest changes from gitlab-org/gitlab@master

10 files changed, 136 insertions, 91 deletions

diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/index.js b/app/assets/javascripts/packages_and_registries/container_registry/explorer/index.js
index e6c197a30dd..ca5bd8d6964 100644
--- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/index.js
+++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/index.js
@@ -4,6 +4,7 @@ import { parseBoolean } from '~/lib/utils/common_utils';
 import PerformancePlugin from '~/performance/vue_performance_plugin';
 import Translate from '~/vue_shared/translate';
 import RegistryBreadcrumb from '~/packages_and_registries/shared/components/registry_breadcrumb.vue';
+import { renderBreadcrumb } from '~/packages_and_registries/shared/utils';
 import { apolloProvider } from './graphql/index';
 import RegistryExplorer from './pages/index.vue';
 import createRouter from './router';
@@ -84,38 +85,8 @@ export default () => {
       },
     });
 
-  const attachBreadcrumb = () => {
-    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: 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,
-          },
-        });
-      },
-    });
+  return {
+    attachBreadcrumb: renderBreadcrumb(router, apolloProvider, RegistryBreadcrumb),
+    attachMainComponent,
   };
-
-  return { attachBreadcrumb, attachMainComponent };
 };
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/npm_installation.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/npm_installation.vue
index 95b09b25678..7479f748a56 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/components/details/npm_installation.vue
+++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/npm_installation.vue
@@ -26,7 +26,7 @@ export default {
     GlSprintf,
     GlFormRadioGroup,
   },
-  inject: ['npmPath'],
+  inject: ['npmInstanceUrl'],
   props: {
     packageEntity: {
       type: Object,
@@ -66,7 +66,9 @@ export default {
     npmSetupCommand(type, endpointType) {
       const scope = this.packageEntity.name.substring(0, this.packageEntity.name.indexOf('/'));
       const npmPathForEndpoint =
-        endpointType === INSTANCE_PACKAGE_ENDPOINT_TYPE ? this.npmPath : this.packageEntity.npmUrl;
+        endpointType === INSTANCE_PACKAGE_ENDPOINT_TYPE
+          ? this.npmInstanceUrl
+          : this.packageEntity.npmUrl;
 
       if (type === NPM_PACKAGE_MANAGER) {
         return `echo ${scope}:registry=${npmPathForEndpoint}/ >> .npmrc`;
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_list_row.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_list_row.vue
index 6fd96c0654f..6222c2e73d7 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_list_row.vue
+++ b/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_list_row.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlButton, GlLink, GlSprintf, GlTooltipDirective, GlTruncate } from '@gitlab/ui';
+import { GlButton, GlSprintf, GlTooltipDirective, GlTruncate } from '@gitlab/ui';
 import { s__, __ } from '~/locale';
 import ListItem from '~/vue_shared/components/registry/list_item.vue';
 import {
@@ -18,7 +18,6 @@ export default {
   name: 'PackageListRow',
   components: {
     GlButton,
-    GlLink,
     GlSprintf,
     GlTruncate,
     PackageTags,
@@ -42,9 +41,8 @@ export default {
     packageType() {
       return getPackageTypeLabel(this.packageEntity.packageType);
     },
-    packageLink() {
-      const { project, id } = this.packageEntity;
-      return `${project?.webUrl}/-/packages/${getIdFromGraphQLId(id)}`;
+    packageId() {
+      return getIdFromGraphQLId(this.packageEntity.id);
     },
     pipeline() {
       return this.packageEntity?.pipelines?.nodes[0];
@@ -61,6 +59,9 @@ export default {
     disabledRow() {
       return this.packageEntity.status && this.packageEntity.status !== PACKAGE_DEFAULT_STATUS;
     },
+    routerLinkEvent() {
+      return this.disabledRow ? '' : 'click';
+    },
   },
   i18n: {
     erroredPackageText: s__('PackageRegistry|Invalid Package: failed metadata extraction'),
@@ -73,14 +74,15 @@ export default {
   <list-item data-qa-selector="package_row" :disabled="disabledRow">
     <template #left-primary>
       <div class="gl-display-flex gl-align-items-center gl-mr-3 gl-min-w-0">
-        <gl-link
-          :href="packageLink"
+        <router-link
           class="gl-text-body gl-min-w-0"
+          data-testid="details-link"
           data-qa-selector="package_link"
-          :disabled="disabledRow"
+          :event="routerLinkEvent"
+          :to="{ name: 'details', params: { id: packageId } }"
         >
           <gl-truncate :text="packageEntity.name" />
-        </gl-link>
+        </router-link>
 
         <gl-button
           v-if="showWarningIcon"
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/constants.js b/app/assets/javascripts/packages_and_registries/package_registry/constants.js
index af4e586231c..c4d331fa384 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/constants.js
+++ b/app/assets/javascripts/packages_and_registries/package_registry/constants.js
@@ -74,6 +74,7 @@ export const FETCH_PACKAGE_DETAILS_ERROR_MESSAGE = s__(
 );
 
 export const DELETE_PACKAGE_SUCCESS_MESSAGE = s__('PackageRegistry|Package deleted successfully');
+export const PACKAGE_REGISTRY_TITLE = __('Package Registry');
 
 export const PACKAGE_ERROR_STATUS = 'ERROR';
 export const PACKAGE_DEFAULT_STATUS = 'DEFAULT';
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/index.js b/app/assets/javascripts/packages_and_registries/package_registry/index.js
index 7ec931ff9a0..6680e612985 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/index.js
+++ b/app/assets/javascripts/packages_and_registries/package_registry/index.js
@@ -2,29 +2,59 @@ import Vue from 'vue';
 import Translate from '~/vue_shared/translate';
 import { apolloProvider } from '~/packages_and_registries/package_registry/graphql/index';
 import PackageRegistry from '~/packages_and_registries/package_registry/pages/index.vue';
+import RegistryBreadcrumb from '~/packages_and_registries/shared/components/registry_breadcrumb.vue';
+import { renderBreadcrumb } from '~/packages_and_registries/shared/utils';
 import createRouter from './router';
 
 Vue.use(Translate);
 
 export default () => {
   const el = document.getElementById('js-vue-packages-list');
-  const { endpoint, resourceId, fullPath, pageType, emptyListIllustration } = el.dataset;
-  const router = createRouter(endpoint);
+  const {
+    endpoint,
+    resourceId,
+    fullPath,
+    pageType,
+    emptyListIllustration,
+    npmInstanceUrl,
+    projectListUrl,
+    groupListUrl,
+  } = el.dataset;
 
   const isGroupPage = pageType === 'groups';
 
-  return new Vue({
-    el,
-    router,
-    apolloProvider,
-    provide: {
-      resourceId,
-      fullPath,
-      emptyListIllustration,
-      isGroupPage,
-    },
-    render(createElement) {
-      return createElement(PackageRegistry);
+  // This is a mini state to help the breadcrumb have the correct name in the details page
+  const breadCrumbState = Vue.observable({
+    name: '',
+    updateName(value) {
+      this.name = value;
     },
   });
+
+  const router = createRouter(endpoint, breadCrumbState);
+
+  const attachMainComponent = () =>
+    new Vue({
+      el,
+      router,
+      apolloProvider,
+      provide: {
+        resourceId,
+        fullPath,
+        emptyListIllustration,
+        isGroupPage,
+        npmInstanceUrl,
+        projectListUrl,
+        groupListUrl,
+        breadCrumbState,
+      },
+      render(createElement) {
+        return createElement(PackageRegistry);
+      },
+    });
+
+  return {
+    attachBreadcrumb: renderBreadcrumb(router, apolloProvider, RegistryBreadcrumb),
+    attachMainComponent,
+  };
 };
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/pages/details.js b/app/assets/javascripts/packages_and_registries/package_registry/pages/details.js
deleted file mode 100644
index d94bbd21035..00000000000
--- a/app/assets/javascripts/packages_and_registries/package_registry/pages/details.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import Vue from 'vue';
-import { parseBoolean } from '~/lib/utils/common_utils';
-import PackagesApp from '~/packages_and_registries/package_registry/components/details/app.vue';
-import { apolloProvider } from '~/packages_and_registries/package_registry/graphql/index';
-import Translate from '~/vue_shared/translate';
-
-Vue.use(Translate);
-
-export default () => {
-  const el = document.getElementById('js-vue-packages-detail-new');
-  if (!el) {
-    return null;
-  }
-
-  const { canDelete, ...datasetOptions } = el.dataset;
-  return new Vue({
-    el,
-    apolloProvider,
-    provide: {
-      canDelete: parseBoolean(canDelete),
-      ...datasetOptions,
-    },
-    render(createElement) {
-      return createElement(PackagesApp);
-    },
-  });
-};
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/app.vue b/app/assets/javascripts/packages_and_registries/package_registry/pages/details.vue
index 52fea4bebbe..162b420a784 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/components/details/app.vue
+++ b/app/assets/javascripts/packages_and_registries/package_registry/pages/details.vue
@@ -68,7 +68,7 @@ export default {
     GlModal: GlModalDirective,
   },
   mixins: [Tracking.mixin()],
-  inject: ['packageId', 'svgPath', 'projectListUrl', 'groupListUrl'],
+  inject: ['emptyListIllustration', 'projectListUrl', 'groupListUrl', 'breadCrumbState'],
   trackingActions: {
     DELETE_PACKAGE_TRACKING_ACTION,
     REQUEST_DELETE_PACKAGE_TRACKING_ACTION,
@@ -100,12 +100,20 @@ export default {
           error,
         });
       },
+      result() {
+        this.breadCrumbState.updateName(
+          `${this.packageEntity?.name} v ${this.packageEntity?.version}`,
+        );
+      },
     },
   },
   computed: {
     projectName() {
       return this.packageEntity.project?.name;
     },
+    packageId() {
+      return this.$route.params.id;
+    },
     queryVariables() {
       return {
         id: convertToGraphQLId('Packages::Package', this.packageId),
@@ -229,7 +237,7 @@ export default {
     v-if="!isValidPackage"
     :title="s__('PackageRegistry|Unable to load package')"
     :description="s__('PackageRegistry|There was a problem fetching the details for this package.')"
-    :svg-path="svgPath"
+    :svg-path="emptyListIllustration"
   />
   <div v-else-if="!isLoading" class="packages-app">
     <package-title :package-entity="packageEntity">
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/router.js b/app/assets/javascripts/packages_and_registries/package_registry/router.js
index ea5b740e879..c5ef4f70dd9 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/router.js
+++ b/app/assets/javascripts/packages_and_registries/package_registry/router.js
@@ -1,10 +1,12 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 import List from '~/packages_and_registries/package_registry/pages/list.vue';
+import Details from '~/packages_and_registries/package_registry/pages/details.vue';
+import { PACKAGE_REGISTRY_TITLE } from '~/packages_and_registries/package_registry/constants';
 
 Vue.use(VueRouter);
 
-export default function createRouter(base) {
+export default function createRouter(base, breadCrumbState) {
   const router = new VueRouter({
     base,
     mode: 'history',
@@ -13,9 +15,25 @@ export default function createRouter(base) {
         name: 'list',
         path: '/',
         component: List,
+        meta: {
+          nameGenerator: () => PACKAGE_REGISTRY_TITLE,
+          root: true,
+        },
+      },
+      {
+        name: 'details',
+        path: '/:id',
+        component: Details,
+        meta: {
+          nameGenerator: () => breadCrumbState.name,
+        },
       },
     ],
   });
 
+  router.afterEach(() => {
+    breadCrumbState.updateName('');
+  });
+
   return router;
 }
diff --git a/app/assets/javascripts/packages_and_registries/shared/components/registry_breadcrumb.vue b/app/assets/javascripts/packages_and_registries/shared/components/registry_breadcrumb.vue
index e77eda31596..a1e3c06812c 100644
--- a/app/assets/javascripts/packages_and_registries/shared/components/registry_breadcrumb.vue
+++ b/app/assets/javascripts/packages_and_registries/shared/components/registry_breadcrumb.vue
@@ -20,8 +20,11 @@ export default {
     isRootRoute() {
       return this.$route.name === this.rootRoute.name;
     },
+    detailsRouteName() {
+      return this.detailsRoute.meta.nameGenerator();
+    },
     isLoaded() {
-      return this.isRootRoute || this.$store?.state.imageDetails?.name;
+      return this.isRootRoute || this.detailsRouteName;
     },
     allCrumbs() {
       const crumbs = [
@@ -32,7 +35,7 @@ export default {
       ];
       if (!this.isRootRoute) {
         crumbs.push({
-          text: this.detailsRoute.meta.nameGenerator(),
+          text: this.detailsRouteName,
           href: this.detailsRoute.meta.path,
         });
       }
@@ -45,7 +48,9 @@ export default {
 <template>
   <gl-breadcrumb :key="isLoaded" :items="allCrumbs">
     <template #separator>
-      <gl-icon name="angle-right" :size="8" />
+      <span class="gl-mx-n5">
+        <gl-icon name="angle-right" :size="8" />
+      </span>
     </template>
   </gl-breadcrumb>
 </template>
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,
+        },
+      });
+    },
+  });
+};