Set unique modal IDs

app/assets/javascripts/registry/components/collapsible_container.vue

@@ -31,6 +31,7 @@ export default {
   data() {
     return {
       isOpen: false,
+      modalId: `confirm-repo-deletion-modal-${this.repo.id}`,
     };
   },
   computed: {
@@ -80,7 +81,7 @@ export default {
         <gl-button
           v-if="repo.canDelete"
           v-gl-tooltip
-          v-gl-modal="'confirm-repo-deletion-modal'"
+          v-gl-modal="modalId"
           :title="s__('ContainerRegistry|Remove repository')"
           :aria-label="s__('ContainerRegistry|Remove repository')"
           class="js-remove-repo"
@@ -100,12 +101,7 @@ export default {
         {{ s__('ContainerRegistry|No tags in Container Registry for this container image.') }}
       </div>
     </div>
-
-    <gl-modal
-      modal-id="confirm-repo-deletion-modal"
-      ok-variant="danger"
-      @ok="handleDeleteRepository"
-    >
+    <gl-modal :modal-id="modalId" ok-variant="danger" @ok="handleDeleteRepository">
       <template v-slot:modal-title>{{ s__('ContainerRegistry|Remove repository') }}</template>
       <p
         v-html="

app/assets/javascripts/registry/components/table_registry.vue

@@ -32,6 +32,7 @@ export default {
   data() {
     return {
       itemToBeDeleted: null,
+      modalId: `confirm-image-deletion-modal-${this.repo.id}`,
     };
   },
   computed: {
@@ -114,7 +115,7 @@ export default {
             <gl-button
               v-if="item.canDelete"
               v-gl-tooltip
-              v-gl-modal="'confirm-image-deletion-modal'"
+              v-gl-modal="modalId"
               :title="s__('ContainerRegistry|Remove image')"
               :aria-label="s__('ContainerRegistry|Remove image')"
               variant="danger"
@@ -134,11 +135,7 @@ export default {
       :page-info="repo.pagination"
     />
 
-    <gl-modal
-      modal-id="confirm-image-deletion-modal"
-      ok-variant="danger"
-      @ok="handleDeleteRegistry"
-    >
+    <gl-modal :modal-id="modalId" ok-variant="danger" @ok="handleDeleteRegistry">
       <template v-slot:modal-title>{{ s__('ContainerRegistry|Remove image') }}</template>
       <template v-slot:modal-ok>{{ s__('ContainerRegistry|Remove image and tags') }}</template>
       <p

changelogs/unreleased/registry-fix-multi-delete-modal.yml

@@ -0,0 +1,5 @@
+---
+title: Prevent multiple confirmation modals from opening when deleting a repository
+merge_request: 30532
+author:
+type: fixed

spec/javascripts/registry/components/collapsible_container_spec.js

@@ -77,7 +77,7 @@ describe('collapsible registry container', () => {
       spyOn(vm, 'deleteItem').and.returnValue(Promise.resolve());
 
       Vue.nextTick(() => {
-        document.querySelector('#confirm-repo-deletion-modal .btn-danger').click();
+        document.querySelector(`#${vm.modalId} .btn-danger`).click();
 
         expect(vm.deleteItem).toHaveBeenCalledWith(vm.repo);
         done();

spec/javascripts/registry/components/table_registry_spec.js

@@ -51,7 +51,7 @@ describe('table registry', () => {
       spyOn(vm, 'deleteItem').and.returnValue(Promise.resolve());
 
       Vue.nextTick(() => {
-        document.querySelector('#confirm-image-deletion-modal .btn-danger').click();
+        document.querySelector(`#${vm.modalId} .btn-danger`).click();
 
         expect(vm.deleteItem).toHaveBeenCalledWith(firstImage);
         expect(vm.itemToBeDeleted).toBeNull();