Merge branch...

Merge branch '225644-package-registry-in-the-group-registry-view-make-the-project-ui-moment-easier-to-read-and' into 'master'

Breadcrumb like UI for project path in packages list

See merge request gitlab-org/gitlab!42684

app/assets/javascripts/packages/shared/components/package_list_row.vue

 <script>
 import { GlButton, GlIcon, GlLink, GlSprintf, GlTooltipDirective, GlTruncate } from '@gitlab/ui';
 import PackageTags from './package_tags.vue';
+import PackagePath from './package_path.vue';
 import PublishMethod from './publish_method.vue';
 import { getPackageTypeLabel } from '../utils';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
@@ -15,6 +16,7 @@ export default {
     GlSprintf,
     GlTruncate,
     PackageTags,
+    PackagePath,
     PublishMethod,
     ListItem,
   },
@@ -92,22 +94,12 @@ export default {
           </gl-sprintf>
         </div>
 
-        <div v-if="hasProjectLink" class="gl-display-flex gl-align-items-center">
-          <gl-icon name="review-list" class="gl-ml-3 gl-mr-2 gl-min-w-0" />
-
-          <gl-link
-            class="gl-text-body gl-min-w-0"
-            data-testid="packages-row-project"
-            :href="`/${packageEntity.project_path}`"
-          >
-            <gl-truncate :text="packageEntity.projectPathName" />
-          </gl-link>
-        </div>
-
         <div v-if="showPackageType" class="d-flex align-items-center" data-testid="package-type">
           <gl-icon name="package" class="gl-ml-3 gl-mr-2" />
           <span>{{ packageType }}</span>
         </div>
+
+        <package-path v-if="hasProjectLink" :path="packageEntity.project_path" />
       </div>
     </template>
 

app/assets/javascripts/packages/shared/components/package_path.vue

+<script>
+import { GlIcon, GlLink, GlTooltipDirective } from '@gitlab/ui';
+import { joinPaths } from '~/lib/utils/url_utility';
+
+export default {
+  name: 'PackagePath',
+  components: {
+    GlIcon,
+    GlLink,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  props: {
+    path: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    pathPieces() {
+      return this.path.split('/');
+    },
+    root() {
+      // we skip the first part of the path since is the 'base' group
+      return this.pathPieces[1];
+    },
+    rootLink() {
+      return joinPaths(this.pathPieces[0], this.root);
+    },
+    leaf() {
+      return this.pathPieces[this.pathPieces.length - 1];
+    },
+    deeplyNested() {
+      return this.pathPieces.length > 3;
+    },
+    hasGroup() {
+      return this.root !== this.leaf;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="gl-display-flex gl-align-items-center">
+    <gl-icon data-testid="base-icon" name="project" class="gl-mx-3 gl-min-w-0" />
+
+    <gl-link data-testid="root-link" class="gl-text-gray-500 gl-min-w-0" :href="`/${rootLink}`">
+      {{ root }}
+    </gl-link>
+
+    <template v-if="hasGroup">
+      <gl-icon data-testid="root-chevron" name="chevron-right" class="gl-mx-2 gl-min-w-0" />
+
+      <template v-if="deeplyNested">
+        <span
+          v-gl-tooltip="{ title: path }"
+          data-testid="ellipsis-icon"
+          class="gl-inset-border-1-gray-200 gl-rounded-base gl-px-2 gl-min-w-0"
+        >
+          <gl-icon name="ellipsis_h" />
+        </span>
+        <gl-icon data-testid="ellipsis-chevron" name="chevron-right" class="gl-mx-2 gl-min-w-0" />
+      </template>
+
+      <gl-link data-testid="leaf-link" class="gl-text-gray-500 gl-min-w-0" :href="`/${path}`">
+        {{ leaf }}
+      </gl-link>
+    </template>
+  </div>
+</template>

changelogs/unreleased/225644-package-registry-in-the-group-registry-view-make-the-project-ui-mo.yml

+---
+title: Breadcrumb like UI for project path in packages list
+merge_request: 42684
+author:
+type: changed

spec/frontend/packages/shared/components/__snapshots__/package_list_row_spec.js.snap

@@ -51,27 +51,6 @@ exports[`packages_list_row renders 1`] = `
              
             <!---->
              
-            <div
-              class="gl-display-flex gl-align-items-center"
-            >
-              <gl-icon-stub
-                class="gl-ml-3 gl-mr-2 gl-min-w-0"
-                name="review-list"
-                size="16"
-              />
-               
-              <gl-link-stub
-                class="gl-text-body gl-min-w-0"
-                data-testid="packages-row-project"
-                href="/foo/bar/baz"
-              >
-                <gl-truncate-stub
-                  position="end"
-                  text="foo/bar/baz"
-                />
-              </gl-link-stub>
-            </div>
-             
             <div
               class="d-flex align-items-center"
               data-testid="package-type"
@@ -86,6 +65,10 @@ exports[`packages_list_row renders 1`] = `
                 Maven
               </span>
             </div>
+             
+            <package-path-stub
+              path="foo/bar/baz"
+            />
           </div>
         </div>
       </div>

spec/frontend/packages/shared/components/package_list_row_spec.js

 import { shallowMount } from '@vue/test-utils';
 import PackagesListRow from '~/packages/shared/components/package_list_row.vue';
 import PackageTags from '~/packages/shared/components/package_tags.vue';
+import PackagePath from '~/packages/shared/components/package_path.vue';
 import ListItem from '~/vue_shared/components/registry/list_item.vue';
 import { packageList } from '../../mock_data';
 
@@ -11,7 +12,7 @@ describe('packages_list_row', () => {
   const [packageWithoutTags, packageWithTags] = packageList;
 
   const findPackageTags = () => wrapper.find(PackageTags);
-  const findProjectLink = () => wrapper.find('[data-testid="packages-row-project"]');
+  const findPackagePath = () => wrapper.find(PackagePath);
   const findDeleteButton = () => wrapper.find('[data-testid="action-delete"]');
   const findPackageType = () => wrapper.find('[data-testid="package-type"]');
 
@@ -63,8 +64,9 @@ describe('packages_list_row', () => {
       mountComponent({ isGroup: true });
     });
 
-    it('has project field', () => {
-      expect(findProjectLink().exists()).toBe(true);
+    it('has a package path component', () => {
+      expect(findPackagePath().exists()).toBe(true);
+      expect(findPackagePath().props()).toMatchObject({ path: 'foo/bar/baz' });
     });
   });
 

spec/frontend/packages/shared/components/package_path_spec.js

+import { shallowMount } from '@vue/test-utils';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
+import PackagePath from '~/packages/shared/components/package_path.vue';
+
+describe('PackagePath', () => {
+  let wrapper;
+
+  const mountComponent = (propsData = { path: 'foo' }) => {
+    wrapper = shallowMount(PackagePath, {
+      propsData,
+      directives: {
+        GlTooltip: createMockDirective(),
+      },
+    });
+  };
+
+  const BASE_ICON = 'base-icon';
+  const ROOT_LINK = 'root-link';
+  const ROOT_CHEVRON = 'root-chevron';
+  const ELLIPSIS_ICON = 'ellipsis-icon';
+  const ELLIPSIS_CHEVRON = 'ellipsis-chevron';
+  const LEAF_LINK = 'leaf-link';
+
+  const findItem = name => wrapper.find(`[data-testid="${name}"]`);
+  const findTooltip = w => getBinding(w.element, 'gl-tooltip');
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe.each`
+    path                       | rootUrl       | shouldExist                                                   | shouldNotExist
+    ${'foo/bar'}               | ${'/foo/bar'} | ${[]}                                                         | ${[ROOT_CHEVRON, ELLIPSIS_ICON, ELLIPSIS_CHEVRON, LEAF_LINK]}
+    ${'foo/bar/baz'}           | ${'/foo/bar'} | ${[ROOT_CHEVRON, LEAF_LINK]}                                  | ${[ELLIPSIS_ICON, ELLIPSIS_CHEVRON]}
+    ${'foo/bar/baz/baz2'}      | ${'/foo/bar'} | ${[ROOT_CHEVRON, LEAF_LINK, ELLIPSIS_ICON, ELLIPSIS_CHEVRON]} | ${[]}
+    ${'foo/bar/baz/baz2/bar2'} | ${'/foo/bar'} | ${[ROOT_CHEVRON, LEAF_LINK, ELLIPSIS_ICON, ELLIPSIS_CHEVRON]} | ${[]}
+  `('given path $path', ({ path, shouldExist, shouldNotExist, rootUrl }) => {
+    const pathPieces = path.split('/').slice(1);
+    const hasTooltip = shouldExist.includes(ELLIPSIS_ICON);
+
+    beforeEach(() => {
+      mountComponent({ path });
+    });
+
+    it('should have a base icon', () => {
+      expect(findItem(BASE_ICON).exists()).toBe(true);
+    });
+
+    it('should have a root link', () => {
+      const root = findItem(ROOT_LINK);
+      expect(root.exists()).toBe(true);
+      expect(root.attributes('href')).toBe(rootUrl);
+    });
+
+    if (hasTooltip) {
+      it('should have a tooltip', () => {
+        const tooltip = findTooltip(findItem(ELLIPSIS_ICON));
+        expect(tooltip).toBeDefined();
+        expect(tooltip.value).toMatchObject({
+          title: path,
+        });
+      });
+    }
+
+    if (shouldExist.length) {
+      it.each(shouldExist)(`should have %s`, element => {
+        expect(findItem(element).exists()).toBe(true);
+      });
+    }
+
+    if (shouldNotExist.length) {
+      it.each(shouldNotExist)(`should not have %s`, element => {
+        expect(findItem(element).exists()).toBe(false);
+      });
+    }
+
+    if (shouldExist.includes(LEAF_LINK)) {
+      it('the last link should be the last piece of the path', () => {
+        const leaf = findItem(LEAF_LINK);
+        expect(leaf.attributes('href')).toBe(`/${path}`);
+        expect(leaf.text()).toBe(pathPieces[pathPieces.length - 1]);
+      });
+    }
+  });
+});