Merge branch...

Merge branch '431048-do-not-show-zero-size-of-container-registry-manifest-lists-indexes-in-the-ui' into 'master' 

Show manifest media type for container registry image tag

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/166151



Merged-by: Payton Burdette <pburdette@gitlab.com>
Approved-by: João Pereira <jpereira@gitlab.com>
Approved-by: Doug Stull <dstull@gitlab.com>
Approved-by: Payton Burdette <pburdette@gitlab.com>
Co-authored-by: Rahul Chanila <rchanila@gitlab.com>

app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/tags_list_row.vue

@@ -21,6 +21,7 @@ import {
   CREATED_AT_LABEL,
   PUBLISHED_DETAILS_ROW_TEXT,
   MANIFEST_DETAILS_ROW_TEST,
+  MANIFEST_MEDIA_TYPE_ROW_TEXT,
   CONFIGURATION_DETAILS_ROW_TEST,
   MISSING_MANIFEST_WARNING_TOOLTIP,
   NOT_AVAILABLE_TEXT,
@@ -30,8 +31,6 @@ import {
   SIGNATURE_BADGE_TOOLTIP,
   DOCKER_MEDIA_TYPE,
   OCI_MEDIA_TYPE,
-  DOCKER_MANIFEST_LIST_TOOLTIP,
-  OCI_INDEX_TOOLTIP,
 } from '../../constants/index';
 import SignatureDetailsModal from './signature_details_modal.vue';
 
@@ -79,13 +78,12 @@ export default {
     CREATED_AT_LABEL,
     PUBLISHED_DETAILS_ROW_TEXT,
     MANIFEST_DETAILS_ROW_TEST,
+    MANIFEST_MEDIA_TYPE_ROW_TEXT,
     CONFIGURATION_DETAILS_ROW_TEST,
     MISSING_MANIFEST_WARNING_TOOLTIP,
     MORE_ACTIONS_TEXT,
     COPY_IMAGE_PATH_TITLE,
     SIGNATURE_BADGE_TOOLTIP,
-    DOCKER_MANIFEST_LIST_TOOLTIP,
-    OCI_INDEX_TOOLTIP,
   },
   data() {
     return {
@@ -146,6 +144,9 @@ export default {
     showConfigDigest() {
       return !this.isInvalidTag && !this.isEmptyRevision;
     },
+    showManifestMediaType() {
+      return !this.isInvalidTag && this.tag.mediaType;
+    },
     signatures() {
       const referrers = this.tag.referrers || [];
       // All referrers should be signatures, but we'll filter by signature artifact types as a sanity check.
@@ -153,14 +154,9 @@ export default {
         ({ artifactType }) => artifactType === 'application/vnd.dev.cosign.artifact.sig.v1+json',
       );
     },
-    shouldDisplayLabelsIcon() {
+    isDockerOrOciMediaType() {
       return this.tag.mediaType === DOCKER_MEDIA_TYPE || this.tag.mediaType === OCI_MEDIA_TYPE;
     },
-    labelsIconTooltipText() {
-      return this.tag.mediaType === DOCKER_MEDIA_TYPE
-        ? this.$options.i18n.DOCKER_MANIFEST_LIST_TOOLTIP
-        : this.$options.i18n.OCI_INDEX_TOOLTIP;
-    },
   },
 };
 </script>
@@ -203,14 +199,6 @@ export default {
           name="warning"
           class="gl-mr-2 gl-text-orange-500"
         />
-
-        <gl-icon
-          v-if="shouldDisplayLabelsIcon"
-          v-gl-tooltip.d0="labelsIconTooltipText"
-          name="labels"
-          class="gl-mr-2"
-          data-testid="labels-icon"
-        />
       </div>
     </template>
 
@@ -221,7 +209,11 @@ export default {
     </template>
 
     <template #left-secondary>
-      <span data-testid="size">
+      <gl-badge v-if="isDockerOrOciMediaType" data-testid="index-badge">
+        {{ s__('ContainerRegistry|index') }}
+      </gl-badge>
+
+      <span v-else data-testid="size">
         {{ formattedSize }}
         <template v-if="formattedSize && layers">&middot;</template>
         {{ layers }}
@@ -287,6 +279,15 @@ export default {
         />
       </details-row>
     </template>
+    <template v-if="showManifestMediaType" #details-manifest-media-type>
+      <details-row icon="media" data-testid="manifest-media-type">
+        <gl-sprintf :message="$options.i18n.MANIFEST_MEDIA_TYPE_ROW_TEXT">
+          <template #mediaType>
+            {{ tag.mediaType }}
+          </template>
+        </gl-sprintf>
+      </details-row>
+    </template>
     <template v-if="showConfigDigest" #details-configuration-digest>
       <details-row icon="cloud-gear" data-testid="configuration-detail">
         <gl-sprintf :message="$options.i18n.CONFIGURATION_DETAILS_ROW_TEST">

app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/details.js

@@ -65,12 +65,8 @@ export const MISSING_MANIFEST_WARNING_TOOLTIP = s__(
   'ContainerRegistry|Invalid tag: missing manifest digest',
 );
 
-export const OCI_INDEX_TOOLTIP = s__(
-  'ContainerRegistry|This tag points to a OCI index, which references multiple container images',
-);
-
-export const DOCKER_MANIFEST_LIST_TOOLTIP = s__(
-  'ContainerRegistry|This tag points to a Docker manifest list, which references multiple container images',
+export const MANIFEST_MEDIA_TYPE_ROW_TEXT = s__(
+  'ContainerRegistry|Manifest media type: %{mediaType}',
 );
 
 export const CREATED_AT = s__('ContainerRegistry|Created %{time}');

locale/gitlab.pot

@@ -15054,6 +15054,9 @@ msgstr ""
 msgid "ContainerRegistry|Manifest digest: %{digest}"
 msgstr ""
+msgid "ContainerRegistry|Manifest media type: %{mediaType}"
+msgstr ""
+
 msgid "ContainerRegistry|Minimum access level for delete"
 msgstr ""
@@ -15239,12 +15242,6 @@ msgstr ""
 msgid "ContainerRegistry|This project's cleanup policy for tags is not enabled."
 msgstr ""
-msgid "ContainerRegistry|This tag points to a Docker manifest list, which references multiple container images"
-msgstr ""
-
-msgid "ContainerRegistry|This tag points to a OCI index, which references multiple container images"
-msgstr ""
-
 msgid "ContainerRegistry|To widen your search, change or remove the filters above."
 msgstr ""
@@ -15278,6 +15275,9 @@ msgstr ""
 msgid "ContainerRegistry|You can add an image to this registry with the following commands:"
 msgstr ""
+msgid "ContainerRegistry|index"
+msgstr ""
+
 msgid "Containers"
 msgstr ""

spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/tags_list_row_spec.js

@@ -18,8 +18,6 @@ import {
   NOT_AVAILABLE_TEXT,
   NOT_AVAILABLE_SIZE,
   COPY_IMAGE_PATH_TITLE,
-  OCI_INDEX_TOOLTIP,
-  DOCKER_MANIFEST_LIST_TOOLTIP,
 } from '~/packages_and_registries/container_registry/explorer/constants';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import DetailsRow from '~/vue_shared/components/registry/details_row.vue';
@@ -45,13 +43,14 @@ describe('tags list row', () => {
   const findDetailsRows = () => wrapper.findAllComponents(DetailsRow);
   const findPublishedDateDetail = () => wrapper.findByTestId('published-date-detail');
   const findManifestDetail = () => wrapper.findByTestId('manifest-detail');
+  const findManifestMediaType = () => wrapper.findByTestId('manifest-media-type');
   const findConfigurationDetail = () => wrapper.findByTestId('configuration-detail');
   const findSignaturesDetails = () => wrapper.findAllByTestId('signatures-detail');
   const findWarningIcon = () => wrapper.findComponent(GlIcon);
   const findAdditionalActionsMenu = () => wrapper.findComponent(GlDisclosureDropdown);
   const findDeleteButton = () => wrapper.findComponent(GlDisclosureDropdownItem);
   const findSignedBadge = () => wrapper.findComponent(GlBadge);
-  const findLabelsIcon = () => wrapper.findByTestId('labels-icon');
+  const findIndexBadge = () => wrapper.findByTestId('index-badge');
   const findSignatureDetailsModal = () => wrapper.findComponent(SignatureDetailsModal);
   const getTooltipFor = (component) => getBinding(component.element, 'gl-tooltip');
 
@@ -370,17 +369,19 @@ describe('tags list row', () => {
         name                       | finderFunction             | text                                                                                                            | icon            | clipboard
         ${'published date detail'} | ${findPublishedDateDetail} | ${'Published to the gitlab-org/gitlab-test/rails-12009 image repository on November 5, 2020 at 1:29:38 PM GMT'} | ${'clock'}      | ${false}
         ${'manifest detail'}       | ${findManifestDetail}      | ${'Manifest digest: sha256:2cf3d2fdac1b04a14301d47d51cb88dcd26714c74f91440eeee99ce399089062'}                   | ${'log'}        | ${true}
+        ${'manifest media type'}   | ${findManifestMediaType}   | ${'Manifest media type: application/vnd.docker.distribution.manifest.list.v2+json'}                             | ${'media'}      | ${false}
         ${'configuration detail'}  | ${findConfigurationDetail} | ${'Configuration digest: sha256:c2613843ab33aabf847965442b13a8b55a56ae28837ce182627c0716eb08c02b'}              | ${'cloud-gear'} | ${true}
       `('$name details row', ({ finderFunction, text, icon, clipboard }) => {
+        const props = { ...defaultProps, tag: tagWithListMediaType };
         it(`has ${text} as text`, async () => {
-          mountComponent();
+          mountComponent(props);
           await nextTick();
 
           expect(finderFunction().text()).toMatchInterpolatedText(text);
         });
 
         it(`has the ${icon} icon`, async () => {
-          mountComponent();
+          mountComponent(props);
           await nextTick();
 
           expect(finderFunction().props('icon')).toBe(icon);
@@ -388,14 +389,14 @@ describe('tags list row', () => {
 
         if (clipboard) {
           it(`clipboard button exist`, async () => {
-            mountComponent();
+            mountComponent(props);
             await nextTick();
 
             expect(finderFunction().findComponent(ClipboardButton).exists()).toBe(clipboard);
           });
 
           it('is disabled when the component is disabled', async () => {
-            mountComponent({ ...defaultProps, disabled: true });
+            mountComponent({ ...props, disabled: true });
             await nextTick();
 
             expect(finderFunction().findComponent(ClipboardButton).attributes().disabled).toBe(
@@ -535,24 +536,19 @@ describe('tags list row', () => {
   });
 
   describe('media type', () => {
-    it('without media type', () => {
-      mountComponent();
-
-      expect(findLabelsIcon().exists()).toBe(false);
-    });
-
-    it('with OCI index media type', () => {
-      mountComponent({ ...defaultProps, tag: tagWithOCIMediaType });
-
-      expect(findLabelsIcon().exists()).toBe(true);
-      expect(getTooltipFor(findLabelsIcon()).value).toBe(OCI_INDEX_TOOLTIP);
-    });
-
-    it('with Docker manifest list media type', () => {
-      mountComponent({ ...defaultProps, tag: tagWithListMediaType });
-
-      expect(findLabelsIcon().exists()).toBe(true);
-      expect(getTooltipFor(findLabelsIcon()).value).toBe(DOCKER_MANIFEST_LIST_TOOLTIP);
+    it.each`
+      description                               | image                   | expectedIndexBadge | expectedSize
+      ${'without media type'}                   | ${tag}                  | ${false}           | ${true}
+      ${'with OCI index media type'}            | ${tagWithOCIMediaType}  | ${true}            | ${false}
+      ${'with Docker manifest list media type'} | ${tagWithListMediaType} | ${true}            | ${false}
+    `('$description', ({ image, expectedIndexBadge, expectedSize }) => {
+      mountComponent({ ...defaultProps, tag: image });
+
+      expect(findIndexBadge().exists()).toBe(expectedIndexBadge);
+      if (expectedIndexBadge) {
+        expect(findIndexBadge().text()).toBe('index');
+      }
+      expect(findSize().exists()).toBe(expectedSize);
     });
   });
 });