diff --git a/app/assets/javascripts/vue_shared/components/registry/title_area.vue b/app/assets/javascripts/vue_shared/components/registry/title_area.vue
index 8cb29ad5abab506d91ab99f73e8017791e5a73c9..29d1822d93503b810791581965c6d321329874ed 100644
--- a/app/assets/javascripts/vue_shared/components/registry/title_area.vue
+++ b/app/assets/javascripts/vue_shared/components/registry/title_area.vue
@@ -63,9 +63,9 @@ export default {
<template>
<div class="gl-display-flex gl-flex-direction-column">
<div
- class="gl-display-flex gl-flex-direction-column gl-sm-flex-direction-row gl-justify-content-space-between gl-py-3"
+ class="gl-display-flex gl-flex-wrap gl-sm-flex-nowrap gl-justify-content-space-between gl-py-3"
>
- <div class="gl-flex-direction-column gl-flex-grow-1">
+ <div class="gl-flex-direction-column gl-flex-grow-1 gl-min-w-0">
<div class="gl-display-flex">
<gl-avatar
v-if="avatar"
@@ -74,7 +74,7 @@ export default {
class="gl-align-self-center gl-mr-4"
/>
- <div class="gl-display-flex gl-flex-direction-column">
+ <div class="gl-display-flex gl-flex-direction-column gl-min-w-0">
<h2 class="gl-font-size-h1 gl-mt-3 gl-mb-0" data-testid="title">
<slot name="title">{{ title }}</slot>
</h2>
@@ -111,7 +111,10 @@ export default {
</template>
</div>
</div>
- <div v-if="$scopedSlots['right-actions']" class="gl-mt-3">
+ <div
+ v-if="$scopedSlots['right-actions']"
+ class="gl-display-flex gl-align-items-flex-start gl-gap-3 gl-mt-3"
+ >
<slot name="right-actions"></slot>
</div>
</div>
diff --git a/ee/app/assets/javascripts/packages_and_registries/google_artifact_registry/components/details/header.vue b/ee/app/assets/javascripts/packages_and_registries/google_artifact_registry/components/details/header.vue
index 460861a7a22069fa62cedda3ccb58b49e10c2c97..7231a294e0aa91882f7a493e557d65b64b9692e3 100644
--- a/ee/app/assets/javascripts/packages_and_registries/google_artifact_registry/components/details/header.vue
+++ b/ee/app/assets/javascripts/packages_and_registries/google_artifact_registry/components/details/header.vue
@@ -1,6 +1,5 @@
<script>
import { GlAlert, GlButton } from '@gitlab/ui';
-import MetadataItem from '~/vue_shared/components/registry/metadata_item.vue';
import TitleArea from '~/vue_shared/components/registry/title_area.vue';
import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
@@ -10,7 +9,6 @@ export default {
ClipboardButton,
GlAlert,
GlButton,
- MetadataItem,
TitleArea,
},
props: {
@@ -31,9 +29,6 @@ export default {
},
},
computed: {
- showMetadata() {
- return !this.showError;
- },
showActions() {
return !this.isLoading && !this.showError;
},
@@ -54,13 +49,18 @@ export default {
{{ s__('GoogleArtifactRegistry|Open in Google Cloud') }}
</gl-button>
</template>
- <template v-if="showMetadata" #metadata-uri>
- <metadata-item data-testid="uri" :text="data.uri" size="l" />
- <clipboard-button
- :title="s__('GoogleArtifactRegistry|Copy image URI')"
- :text="data.uri"
- category="tertiary"
- />
+ <template v-if="showActions" #sub-header>
+ <div class="gl-max-w-75">
+ <span data-testid="uri" class="gl-word-break-all gl-text-black-normal gl-font-weight-bold">
+ {{ data.uri }}
+ </span>
+ <clipboard-button
+ :title="s__('GoogleArtifactRegistry|Copy image path')"
+ :text="data.uri"
+ category="tertiary"
+ size="small"
+ />
+ </div>
</template>
<gl-alert v-if="showError" variant="danger" :dismissible="false">
{{ s__('GoogleArtifactRegistry|An error occurred while fetching the artifact details.') }}
diff --git a/ee/app/assets/javascripts/packages_and_registries/google_artifact_registry/components/details/image.vue b/ee/app/assets/javascripts/packages_and_registries/google_artifact_registry/components/details/image.vue
index 2ee85c14fe928fe1a7fc99a71934f402d0228636..970bbb5e03b138d122cbcfcd509715d50a7dca75 100644
--- a/ee/app/assets/javascripts/packages_and_registries/google_artifact_registry/components/details/image.vue
+++ b/ee/app/assets/javascripts/packages_and_registries/google_artifact_registry/components/details/image.vue
@@ -107,6 +107,7 @@ export default {
:title="s__('GoogleArtifactRegistry|Copy digest')"
:text="row.value"
category="tertiary"
+ size="small"
/>
</span>
</li>
diff --git a/ee/app/assets/javascripts/packages_and_registries/google_artifact_registry/components/list/header.vue b/ee/app/assets/javascripts/packages_and_registries/google_artifact_registry/components/list/header.vue
index 262810e768d11282c57bd28b09b49fd1e353d9af..a2e96708ccf36edfd40ad922a2ec26b2a7f5a1e0 100644
--- a/ee/app/assets/javascripts/packages_and_registries/google_artifact_registry/components/list/header.vue
+++ b/ee/app/assets/javascripts/packages_and_registries/google_artifact_registry/components/list/header.vue
@@ -60,25 +60,23 @@ export default {
<template>
<title-area :title="__('Google Artifact Registry')" :metadata-loading="isLoading">
<template v-if="showActions" #right-actions>
- <div class="gl-display-flex gl-gap-3">
- <gl-button
- :href="data.artifactRegistryRepositoryUrl"
- icon="external-link"
- target="_blank"
- category="primary"
- variant="default"
- >
- {{ s__('GoogleArtifactRegistry|Open in Google Cloud') }}
- </gl-button>
- <gl-button
- v-if="settingsPath"
- v-gl-tooltip="$options.i18n.settingsText"
- icon="settings"
- data-testid="settings-link"
- :href="settingsPath"
- :aria-label="$options.i18n.settingsText"
- />
- </div>
+ <gl-button
+ :href="data.artifactRegistryRepositoryUrl"
+ icon="external-link"
+ target="_blank"
+ category="primary"
+ variant="default"
+ >
+ {{ s__('GoogleArtifactRegistry|Open in Google Cloud') }}
+ </gl-button>
+ <gl-button
+ v-if="settingsPath"
+ v-gl-tooltip="$options.i18n.settingsText"
+ icon="settings"
+ data-testid="settings-link"
+ :href="settingsPath"
+ :aria-label="$options.i18n.settingsText"
+ />
</template>
<template v-if="showMetadata" #metadata-repository>
<metadata-item
diff --git a/ee/spec/features/projects/google_cloud/artifact_registry_spec.rb b/ee/spec/features/projects/google_cloud/artifact_registry_spec.rb
index 880c67cea26648ac7bbf6aa43699d94c200f96bb..10b367ebe87f8c70b60e751886b497512cb2a028 100644
--- a/ee/spec/features/projects/google_cloud/artifact_registry_spec.rb
+++ b/ee/spec/features/projects/google_cloud/artifact_registry_spec.rb
@@ -125,7 +125,7 @@
expect(page).to have_text _('ruby@4ca5c21b')
expect(page).to have_link _('Open in Google Cloud')
- expect(page).to have_button _('Copy image URI')
+ expect(page).to have_button _('Copy image path')
expect(page).to have_button _('Copy digest')
end
end
diff --git a/ee/spec/frontend/packages_and_registries/google_artifact_registry/components/details/header_spec.js b/ee/spec/frontend/packages_and_registries/google_artifact_registry/components/details/header_spec.js
index efd1e24c88cef357b72c58c972fba70372c86e41..73fb98ef4ff3452ebe6ea65ba5a4a6cbd969d58c 100644
--- a/ee/spec/frontend/packages_and_registries/google_artifact_registry/components/details/header_spec.js
+++ b/ee/spec/frontend/packages_and_registries/google_artifact_registry/components/details/header_spec.js
@@ -54,8 +54,9 @@ describe('Google Artifact Registry details page header', () => {
createComponent();
expect(findClipboardButton().props()).toMatchObject({
+ size: 'small',
text: 'location.dev/uri',
- title: 'Copy image URI',
+ title: 'Copy image path',
});
});
@@ -63,10 +64,7 @@ describe('Google Artifact Registry details page header', () => {
it('renders URI', () => {
createComponent();
- expect(findURI().props()).toMatchObject({
- text: 'location.dev/uri',
- size: 'l',
- });
+ expect(findURI().text()).toBe('location.dev/uri');
});
});
diff --git a/ee/spec/frontend/packages_and_registries/google_artifact_registry/components/details/image_spec.js b/ee/spec/frontend/packages_and_registries/google_artifact_registry/components/details/image_spec.js
index e832614c8530b68a6598eb7c9ce011196f78ead8..41b9d1ee813284d5a01e3bb7fa99b0d9ffb7ca24 100644
--- a/ee/spec/frontend/packages_and_registries/google_artifact_registry/components/details/image_spec.js
+++ b/ee/spec/frontend/packages_and_registries/google_artifact_registry/components/details/image_spec.js
@@ -54,6 +54,7 @@ describe('ArtifactRegistryImageDetails', () => {
createComponent();
expect(findClipboardButton().props()).toMatchObject({
+ size: 'small',
text: defaultProps.data.digest,
title: 'Copy digest',
});
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index cf0949c0d34c6fe7bf6110c8628ef32b8c8ad7e0..a359e0f6191fec222bfd0763bd3974a2d3822196 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -23867,9 +23867,6 @@ msgstr ""
msgid "GoogleArtifactRegistry|Copy digest"
msgstr ""
-msgid "GoogleArtifactRegistry|Copy image URI"
-msgstr ""
-
msgid "GoogleArtifactRegistry|Copy image path"
msgstr ""