Fix wrong title and button label on image delete

- separate selected items to items to be deleted
- keep in sync the states when necessary
- adjust the tests

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

@@ -43,6 +43,7 @@ export default {
   },
   data() {
     return {
+      selectedItems: [],
       itemsToBeDeleted: [],
       modalId: `confirm-image-deletion-modal-${this.repo.id}`,
       selectAllChecked: false,
@@ -96,6 +97,7 @@ export default {
     },
     deleteSingleItem(index) {
       this.setModalDescription(index);
+      this.itemsToBeDeleted = [index];
 
       this.$refs.deleteModal.$refs.modal.$once('ok', () => {
         this.removeModalEvents();
@@ -103,9 +105,10 @@ export default {
       });
     },
     deleteMultipleItems() {
-      if (this.itemsToBeDeleted.length === 1) {
+      this.itemsToBeDeleted = [...this.selectedItems];
+      if (this.selectedItems.length === 1) {
         this.setModalDescription(this.itemsToBeDeleted[0]);
-      } else if (this.itemsToBeDeleted.length > 1) {
+      } else if (this.selectedItems.length > 1) {
         this.setModalDescription();
       }
 
@@ -115,6 +118,7 @@ export default {
       });
     },
     handleSingleDelete(itemToDelete) {
+      this.itemsToBeDeleted = [];
       this.deleteItem(itemToDelete)
         .then(() => this.fetchList({ repo: this.repo }))
         .catch(() => this.showError(errorMessagesTypes.DELETE_REGISTRY));
@@ -122,6 +126,7 @@ export default {
     handleMultipleDelete() {
       const { itemsToBeDeleted } = this;
       this.itemsToBeDeleted = [];
+      this.selectedItems = [];
 
       if (this.bulkDeletePath) {
         this.multiDeleteItems({
@@ -150,23 +155,23 @@ export default {
       }
     },
     selectAll() {
-      this.itemsToBeDeleted = this.repo.list.map((x, index) => index);
+      this.selectedItems = this.repo.list.map((x, index) => index);
       this.selectAllChecked = true;
     },
     deselectAll() {
-      this.itemsToBeDeleted = [];
+      this.selectedItems = [];
       this.selectAllChecked = false;
     },
-    updateItemsToBeDeleted(index) {
-      const delIndex = this.itemsToBeDeleted.findIndex(x => x === index);
+    updateselectedItems(index) {
+      const delIndex = this.selectedItems.findIndex(x => x === index);
 
       if (delIndex > -1) {
-        this.itemsToBeDeleted.splice(delIndex, 1);
+        this.selectedItems.splice(delIndex, 1);
         this.selectAllChecked = false;
       } else {
-        this.itemsToBeDeleted.push(index);
+        this.selectedItems.push(index);
 
-        if (this.itemsToBeDeleted.length === this.repo.list.length) {
+        if (this.selectedItems.length === this.repo.list.length) {
           this.selectAllChecked = true;
         }
       }
@@ -199,7 +204,7 @@ export default {
               v-if="canDeleteRepo"
               v-gl-tooltip
               v-gl-modal="modalId"
-              :disabled="!itemsToBeDeleted || itemsToBeDeleted.length === 0"
+              :disabled="!selectedItems || selectedItems.length === 0"
               class="js-delete-registry float-right"
               data-track-event="click_button"
               data-track-label="bulk_registry_tag_delete"
@@ -219,8 +224,8 @@ export default {
             <gl-form-checkbox
               v-if="canDeleteRow(item)"
               class="js-select-checkbox"
-              :checked="itemsToBeDeleted && itemsToBeDeleted.includes(index)"
-              @change="updateItemsToBeDeleted(index)"
+              :checked="selectedItems && selectedItems.includes(index)"
+              @change="updateselectedItems(index)"
             />
           </td>
           <td class="monospace">

changelogs/unreleased/34032-container-registry-bug-on-modal-delete-button-and-title-text.yml

+---
+title: Fix container registry delete tag modal title and button
+merge_request: 34032
+author:
+type: fixed

spec/frontend/registry/components/table_registry_spec.js

@@ -112,11 +112,13 @@ describe('table registry', () => {
 
       Vue.nextTick(() => {
         const deleteBtn = findDeleteButton(wrapper);
-        expect(wrapper.vm.itemsToBeDeleted).toEqual([0, 1]);
+        expect(wrapper.vm.selectedItems).toEqual([0, 1]);
         expect(deleteBtn.attributes('disabled')).toEqual(undefined);
+        wrapper.setData({ itemsToBeDeleted: [...wrapper.vm.selectedItems] });
         wrapper.vm.handleMultipleDelete();
 
         Vue.nextTick(() => {
+          expect(wrapper.vm.selectedItems).toEqual([]);
           expect(wrapper.vm.itemsToBeDeleted).toEqual([]);
           expect(wrapper.vm.multiDeleteItems).toHaveBeenCalledWith({
             path: bulkDeletePath,
@@ -143,13 +145,13 @@ describe('table registry', () => {
 
   describe('delete registry', () => {
     beforeEach(() => {
-      wrapper.setData({ itemsToBeDeleted: [0] });
+      wrapper.setData({ selectedItems: [0] });
     });
 
     it('should be possible to delete a registry', () => {
       const deleteBtn = findDeleteButton(wrapper);
       const deleteBtns = findDeleteButtonsRow(wrapper);
-      expect(wrapper.vm.itemsToBeDeleted).toEqual([0]);
+      expect(wrapper.vm.selectedItems).toEqual([0]);
       expect(deleteBtn).toBeDefined();
       expect(deleteBtn.attributes('disable')).toBe(undefined);
       expect(deleteBtns.is('button')).toBe(true);
@@ -212,15 +214,15 @@ describe('table registry', () => {
 
   describe('modal content', () => {
     it('should show the singular title and image name when deleting a single image', () => {
-      wrapper.setData({ itemsToBeDeleted: [1] });
-      wrapper.vm.setModalDescription(0);
+      wrapper.setData({ selectedItems: [1, 2, 3] });
+      wrapper.vm.deleteSingleItem(0);
       expect(wrapper.vm.modalAction).toBe('Remove tag');
       expect(wrapper.vm.modalDescription).toContain(firstImage.tag);
     });
 
     it('should show the plural title and image count when deleting more than one image', () => {
-      wrapper.setData({ itemsToBeDeleted: [1, 2] });
-      wrapper.vm.setModalDescription();
+      wrapper.setData({ selectedItems: [1, 2] });
+      wrapper.vm.deleteMultipleItems();
 
       expect(wrapper.vm.modalAction).toBe('Remove tags');
       expect(wrapper.vm.modalDescription).toContain('<b>2</b> tags');