1 files changed, 28 insertions, 9 deletions
diff --git a/app/assets/javascripts/registry/explorer/components/details_page/delete_modal.vue b/app/assets/javascripts/registry/explorer/components/details_page/delete_modal.vue
index 96f221bf71d..0432cf1123c 100644
--- a/app/assets/javascripts/registry/explorer/components/details_page/delete_modal.vue
+++ b/app/assets/javascripts/registry/explorer/components/details_page/delete_modal.vue
@@ -1,7 +1,12 @@
 <script>
 import { GlModal, GlSprintf } from '@gitlab/ui';
 import { n__ } from '~/locale';
-import { REMOVE_TAG_CONFIRMATION_TEXT, REMOVE_TAGS_CONFIRMATION_TEXT } from '../../constants/index';
+import {
+  REMOVE_TAG_CONFIRMATION_TEXT,
+  REMOVE_TAGS_CONFIRMATION_TEXT,
+  DELETE_IMAGE_CONFIRMATION_TITLE,
+  DELETE_IMAGE_CONFIRMATION_TEXT,
+} from '../../constants';
 
 export default {
   components: {
@@ -14,9 +19,17 @@ export default {
       required: false,
       default: () => [],
     },
+    deleteImage: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
   },
   computed: {
-    modalAction() {
+    modalTitle() {
+      if (this.deleteImage) {
+        return DELETE_IMAGE_CONFIRMATION_TITLE;
+      }
       return n__(
         'ContainerRegistry|Remove tag',
         'ContainerRegistry|Remove tags',
@@ -24,14 +37,19 @@ export default {
       );
     },
     modalDescription() {
+      if (this.deleteImage) {
+        return {
+          message: DELETE_IMAGE_CONFIRMATION_TEXT,
+        };
+      }
       if (this.itemsToBeDeleted.length > 1) {
         return {
           message: REMOVE_TAGS_CONFIRMATION_TEXT,
           item: this.itemsToBeDeleted.length,
         };
       }
-      const [first] = this.itemsToBeDeleted;
 
+      const [first] = this.itemsToBeDeleted;
       return {
         message: REMOVE_TAG_CONFIRMATION_TEXT,
         item: first?.path,
@@ -51,16 +69,17 @@ export default {
     ref="deleteModal"
     modal-id="delete-tag-modal"
     ok-variant="danger"
-    @ok="$emit('confirmDelete')"
+    :action-primary="{ text: __('Confirm'), attributes: { variant: 'danger' } }"
+    :action-cancel="{ text: __('Cancel') }"
+    @primary="$emit('confirmDelete')"
     @cancel="$emit('cancelDelete')"
   >
-    <template #modal-title>{{ modalAction }}</template>
-    <template #modal-ok>{{ modalAction }}</template>
+    <template #modal-title>{{ modalTitle }}</template>
     <p v-if="modalDescription" data-testid="description">
       <gl-sprintf :message="modalDescription.message">
-        <template #item
-          ><b>{{ modalDescription.item }}</b></template
-        >
+        <template #item>
+          <b>{{ modalDescription.item }}</b>
+        </template>
       </gl-sprintf>
     </p>
   </gl-modal>