Commit 68b6826b authored by Nicolò Maria Mezzopera's avatar Nicolò Maria Mezzopera Committed by Clement Ho

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
parent 2584a397
...@@ -43,6 +43,7 @@ export default { ...@@ -43,6 +43,7 @@ export default {
}, },
data() { data() {
return { return {
selectedItems: [],
itemsToBeDeleted: [], itemsToBeDeleted: [],
modalId: `confirm-image-deletion-modal-${this.repo.id}`, modalId: `confirm-image-deletion-modal-${this.repo.id}`,
selectAllChecked: false, selectAllChecked: false,
...@@ -96,6 +97,7 @@ export default { ...@@ -96,6 +97,7 @@ export default {
}, },
deleteSingleItem(index) { deleteSingleItem(index) {
this.setModalDescription(index); this.setModalDescription(index);
this.itemsToBeDeleted = [index];
this.$refs.deleteModal.$refs.modal.$once('ok', () => { this.$refs.deleteModal.$refs.modal.$once('ok', () => {
this.removeModalEvents(); this.removeModalEvents();
...@@ -103,9 +105,10 @@ export default { ...@@ -103,9 +105,10 @@ export default {
}); });
}, },
deleteMultipleItems() { deleteMultipleItems() {
if (this.itemsToBeDeleted.length === 1) { this.itemsToBeDeleted = [...this.selectedItems];
if (this.selectedItems.length === 1) {
this.setModalDescription(this.itemsToBeDeleted[0]); this.setModalDescription(this.itemsToBeDeleted[0]);
} else if (this.itemsToBeDeleted.length > 1) { } else if (this.selectedItems.length > 1) {
this.setModalDescription(); this.setModalDescription();
} }
...@@ -115,6 +118,7 @@ export default { ...@@ -115,6 +118,7 @@ export default {
}); });
}, },
handleSingleDelete(itemToDelete) { handleSingleDelete(itemToDelete) {
this.itemsToBeDeleted = [];
this.deleteItem(itemToDelete) this.deleteItem(itemToDelete)
.then(() => this.fetchList({ repo: this.repo })) .then(() => this.fetchList({ repo: this.repo }))
.catch(() => this.showError(errorMessagesTypes.DELETE_REGISTRY)); .catch(() => this.showError(errorMessagesTypes.DELETE_REGISTRY));
...@@ -122,6 +126,7 @@ export default { ...@@ -122,6 +126,7 @@ export default {
handleMultipleDelete() { handleMultipleDelete() {
const { itemsToBeDeleted } = this; const { itemsToBeDeleted } = this;
this.itemsToBeDeleted = []; this.itemsToBeDeleted = [];
this.selectedItems = [];
if (this.bulkDeletePath) { if (this.bulkDeletePath) {
this.multiDeleteItems({ this.multiDeleteItems({
...@@ -150,23 +155,23 @@ export default { ...@@ -150,23 +155,23 @@ export default {
} }
}, },
selectAll() { selectAll() {
this.itemsToBeDeleted = this.repo.list.map((x, index) => index); this.selectedItems = this.repo.list.map((x, index) => index);
this.selectAllChecked = true; this.selectAllChecked = true;
}, },
deselectAll() { deselectAll() {
this.itemsToBeDeleted = []; this.selectedItems = [];
this.selectAllChecked = false; this.selectAllChecked = false;
}, },
updateItemsToBeDeleted(index) { updateselectedItems(index) {
const delIndex = this.itemsToBeDeleted.findIndex(x => x === index); const delIndex = this.selectedItems.findIndex(x => x === index);
if (delIndex > -1) { if (delIndex > -1) {
this.itemsToBeDeleted.splice(delIndex, 1); this.selectedItems.splice(delIndex, 1);
this.selectAllChecked = false; this.selectAllChecked = false;
} else { } 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; this.selectAllChecked = true;
} }
} }
...@@ -199,7 +204,7 @@ export default { ...@@ -199,7 +204,7 @@ export default {
v-if="canDeleteRepo" v-if="canDeleteRepo"
v-gl-tooltip v-gl-tooltip
v-gl-modal="modalId" v-gl-modal="modalId"
:disabled="!itemsToBeDeleted || itemsToBeDeleted.length === 0" :disabled="!selectedItems || selectedItems.length === 0"
class="js-delete-registry float-right" class="js-delete-registry float-right"
data-track-event="click_button" data-track-event="click_button"
data-track-label="bulk_registry_tag_delete" data-track-label="bulk_registry_tag_delete"
...@@ -219,8 +224,8 @@ export default { ...@@ -219,8 +224,8 @@ export default {
<gl-form-checkbox <gl-form-checkbox
v-if="canDeleteRow(item)" v-if="canDeleteRow(item)"
class="js-select-checkbox" class="js-select-checkbox"
:checked="itemsToBeDeleted && itemsToBeDeleted.includes(index)" :checked="selectedItems && selectedItems.includes(index)"
@change="updateItemsToBeDeleted(index)" @change="updateselectedItems(index)"
/> />
</td> </td>
<td class="monospace"> <td class="monospace">
......
---
title: Fix container registry delete tag modal title and button
merge_request: 34032
author:
type: fixed
...@@ -112,11 +112,13 @@ describe('table registry', () => { ...@@ -112,11 +112,13 @@ describe('table registry', () => {
Vue.nextTick(() => { Vue.nextTick(() => {
const deleteBtn = findDeleteButton(wrapper); const deleteBtn = findDeleteButton(wrapper);
expect(wrapper.vm.itemsToBeDeleted).toEqual([0, 1]); expect(wrapper.vm.selectedItems).toEqual([0, 1]);
expect(deleteBtn.attributes('disabled')).toEqual(undefined); expect(deleteBtn.attributes('disabled')).toEqual(undefined);
wrapper.setData({ itemsToBeDeleted: [...wrapper.vm.selectedItems] });
wrapper.vm.handleMultipleDelete(); wrapper.vm.handleMultipleDelete();
Vue.nextTick(() => { Vue.nextTick(() => {
expect(wrapper.vm.selectedItems).toEqual([]);
expect(wrapper.vm.itemsToBeDeleted).toEqual([]); expect(wrapper.vm.itemsToBeDeleted).toEqual([]);
expect(wrapper.vm.multiDeleteItems).toHaveBeenCalledWith({ expect(wrapper.vm.multiDeleteItems).toHaveBeenCalledWith({
path: bulkDeletePath, path: bulkDeletePath,
...@@ -143,13 +145,13 @@ describe('table registry', () => { ...@@ -143,13 +145,13 @@ describe('table registry', () => {
describe('delete registry', () => { describe('delete registry', () => {
beforeEach(() => { beforeEach(() => {
wrapper.setData({ itemsToBeDeleted: [0] }); wrapper.setData({ selectedItems: [0] });
}); });
it('should be possible to delete a registry', () => { it('should be possible to delete a registry', () => {
const deleteBtn = findDeleteButton(wrapper); const deleteBtn = findDeleteButton(wrapper);
const deleteBtns = findDeleteButtonsRow(wrapper); const deleteBtns = findDeleteButtonsRow(wrapper);
expect(wrapper.vm.itemsToBeDeleted).toEqual([0]); expect(wrapper.vm.selectedItems).toEqual([0]);
expect(deleteBtn).toBeDefined(); expect(deleteBtn).toBeDefined();
expect(deleteBtn.attributes('disable')).toBe(undefined); expect(deleteBtn.attributes('disable')).toBe(undefined);
expect(deleteBtns.is('button')).toBe(true); expect(deleteBtns.is('button')).toBe(true);
...@@ -212,15 +214,15 @@ describe('table registry', () => { ...@@ -212,15 +214,15 @@ describe('table registry', () => {
describe('modal content', () => { describe('modal content', () => {
it('should show the singular title and image name when deleting a single image', () => { it('should show the singular title and image name when deleting a single image', () => {
wrapper.setData({ itemsToBeDeleted: [1] }); wrapper.setData({ selectedItems: [1, 2, 3] });
wrapper.vm.setModalDescription(0); wrapper.vm.deleteSingleItem(0);
expect(wrapper.vm.modalAction).toBe('Remove tag'); expect(wrapper.vm.modalAction).toBe('Remove tag');
expect(wrapper.vm.modalDescription).toContain(firstImage.tag); expect(wrapper.vm.modalDescription).toContain(firstImage.tag);
}); });
it('should show the plural title and image count when deleting more than one image', () => { it('should show the plural title and image count when deleting more than one image', () => {
wrapper.setData({ itemsToBeDeleted: [1, 2] }); wrapper.setData({ selectedItems: [1, 2] });
wrapper.vm.setModalDescription(); wrapper.vm.deleteMultipleItems();
expect(wrapper.vm.modalAction).toBe('Remove tags'); expect(wrapper.vm.modalAction).toBe('Remove tags');
expect(wrapper.vm.modalDescription).toContain('<b>2</b> tags'); expect(wrapper.vm.modalDescription).toContain('<b>2</b> tags');
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment