1 files changed, 28 insertions, 8 deletions
diff --git a/app/assets/javascripts/registry/explorer/components/details_page/details_header.vue b/app/assets/javascripts/registry/explorer/components/details_page/details_header.vue
index ed02aa264ed..a4b4c08bc34 100644
--- a/app/assets/javascripts/registry/explorer/components/details_page/details_header.vue
+++ b/app/assets/javascripts/registry/explorer/components/details_page/details_header.vue
@@ -1,8 +1,8 @@
 <script>
-import { GlSprintf } from '@gitlab/ui';
+import { GlSprintf, GlButton } from '@gitlab/ui';
 import { sprintf, n__ } from '~/locale';
-import TitleArea from '~/vue_shared/components/registry/title_area.vue';
 import MetadataItem from '~/vue_shared/components/registry/metadata_item.vue';
+import TitleArea from '~/vue_shared/components/registry/title_area.vue';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
 import {
   DETAILS_PAGE_TITLE,
@@ -24,7 +24,7 @@ import {
 
 export default {
   name: 'DetailsHeader',
-  components: { GlSprintf, TitleArea, MetadataItem },
+  components: { GlSprintf, GlButton, TitleArea, MetadataItem },
   mixins: [timeagoMixin],
   props: {
     image: {
@@ -36,6 +36,11 @@ export default {
       required: false,
       default: false,
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
   },
   computed: {
     visibilityIcon() {
@@ -65,6 +70,9 @@ export default {
         [UNFINISHED_STATUS]: { text: CLEANUP_UNFINISHED_TEXT, tooltip: CLEANUP_UNFINISHED_TOOLTIP },
       }[this.image?.expirationPolicyCleanupStatus];
     },
+    deleteButtonDisabled() {
+      return this.disabled || !this.image.canDelete;
+    },
   },
   i18n: {
     DETAILS_PAGE_TITLE,
@@ -75,11 +83,13 @@ export default {
 <template>
   <title-area :metadata-loading="metadataLoading">
     <template #title>
-      <gl-sprintf :message="$options.i18n.DETAILS_PAGE_TITLE">
-        <template #imageName>
-          {{ image.name }}
-        </template>
-      </gl-sprintf>
+      <span data-testid="title">
+        <gl-sprintf :message="$options.i18n.DETAILS_PAGE_TITLE">
+          <template #imageName>
+            {{ image.name }}
+          </template>
+        </gl-sprintf>
+      </span>
     </template>
     <template #metadata-tags-count>
       <metadata-item icon="tag" :text="tagCountText" data-testid="tags-count" />
@@ -103,5 +113,15 @@ export default {
         data-testid="updated-and-visibility"
       />
     </template>
+    <template #right-actions>
+      <gl-button
+        v-if="!metadataLoading"
+        variant="danger"
+        :disabled="deleteButtonDisabled"
+        @click="$emit('delete')"
+      >
+        {{ __('Delete') }}
+      </gl-button>
+    </template>
   </title-area>
 </template>