summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorPaul Gascou-Vaillancourt <paul.gascvail@gmail.com>2019-07-09 15:32:46 -0400
committerPaul Gascou-Vaillancourt <paul.gascvail@gmail.com>2019-07-09 15:52:09 -0400
commita076d1d88e48041bf59219dd0f50c15970977126 (patch)
tree4a8a07ff01e554c1f8541d635b6d059984ab06d3
parent6e106f66ad9d692b88e90506c0b35c4281f2b600 (diff)
downloadgitlab-ce-a076d1d88e48041bf59219dd0f50c15970977126.tar.gz
-rw-r--r--app/assets/javascripts/registry/components/collapsible_container.vue10
-rw-r--r--app/assets/javascripts/registry/components/table_registry.vue9
-rw-r--r--changelogs/unreleased/registry-fix-multi-delete-modal.yml5
-rw-r--r--spec/javascripts/registry/components/collapsible_container_spec.js2
-rw-r--r--spec/javascripts/registry/components/table_registry_spec.js2
5 files changed, 13 insertions, 15 deletions
diff --git a/app/assets/javascripts/registry/components/collapsible_container.vue b/app/assets/javascripts/registry/components/collapsible_container.vue
index 1e266dd4ced..e157036871b 100644
--- a/app/assets/javascripts/registry/components/collapsible_container.vue
+++ b/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="
diff --git a/app/assets/javascripts/registry/components/table_registry.vue b/app/assets/javascripts/registry/components/table_registry.vue
index 0ec5e2c7a87..a498a553908 100644
--- a/app/assets/javascripts/registry/components/table_registry.vue
+++ b/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
diff --git a/changelogs/unreleased/registry-fix-multi-delete-modal.yml b/changelogs/unreleased/registry-fix-multi-delete-modal.yml
new file mode 100644
index 00000000000..94a2df7a7e7
--- /dev/null
+++ b/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
diff --git a/spec/javascripts/registry/components/collapsible_container_spec.js b/spec/javascripts/registry/components/collapsible_container_spec.js
index 55017b3e26b..2a5d8dd11da 100644
--- a/spec/javascripts/registry/components/collapsible_container_spec.js
+++ b/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();
diff --git a/spec/javascripts/registry/components/table_registry_spec.js b/spec/javascripts/registry/components/table_registry_spec.js
index 6a0b16f592e..31ac970378e 100644
--- a/spec/javascripts/registry/components/table_registry_spec.js
+++ b/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();