diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/tags_list_row.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/tags_list_row.vue
index 38802fc5922b42c0016b701f8930f46ca4b85075..61991e970a71c162c779a4bb18503492c73a3a58 100644
--- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/tags_list_row.vue
+++ b/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">·</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">
diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/details.js b/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/details.js
index 0e4c450765548ec9967f87e76986fdb7da890f61..78e59c5c0f10259973ad75216a1af06980769cf9 100644
--- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/details.js
+++ b/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}');
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 8c31bb5c59eb4bfa588f0a4a4a12c0ec48d16381..aee8d8ccd5196b45a72908ae7cac1749d962acb1 100644
--- a/locale/gitlab.pot
+++ b/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 ""
diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/tags_list_row_spec.js b/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/tags_list_row_spec.js
index e2162a62f1714b2a9c373c728ac03b7ef9f0e666..bc97e8f768061d45dc2be137425427f01cfc051b 100644
--- a/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/tags_list_row_spec.js
+++ b/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);
});
});
});