Commit dfc6c167 authored by Clement Ho's avatar Clement Ho

Merge branch '34032-container-registry-bug-on-modal-delete-button-and-title-text' into 'master'

Resolve "Container registry:  bug on modal delete button and title text"

Closes #34032

See merge request gitlab-org/gitlab!18529
parents 2584a397 68b6826b
......@@ -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">
......
---
title: Fix container registry delete tag modal title and button
merge_request: 34032
author:
type: fixed
......@@ -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');
......
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