diff options
Diffstat (limited to 'app/assets/javascripts/registry/components')
-rw-r--r-- | app/assets/javascripts/registry/components/collapsible_container.vue | 33 | ||||
-rw-r--r-- | app/assets/javascripts/registry/components/table_registry.vue | 95 |
2 files changed, 69 insertions, 59 deletions
diff --git a/app/assets/javascripts/registry/components/collapsible_container.vue b/app/assets/javascripts/registry/components/collapsible_container.vue index 95f8270b5d0..5a6f9370564 100644 --- a/app/assets/javascripts/registry/components/collapsible_container.vue +++ b/app/assets/javascripts/registry/components/collapsible_container.vue @@ -8,12 +8,13 @@ import { GlModalDirective, GlEmptyState, } from '@gitlab/ui'; -import createFlash from '../../flash'; -import ClipboardButton from '../../vue_shared/components/clipboard_button.vue'; -import Icon from '../../vue_shared/components/icon.vue'; +import createFlash from '~/flash'; +import Tracking from '~/tracking'; +import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; +import Icon from '~/vue_shared/components/icon.vue'; import TableRegistry from './table_registry.vue'; -import { errorMessages, errorMessagesTypes } from '../constants'; -import { __ } from '../../locale'; +import { DELETE_REPO_ERROR_MESSAGE } from '../constants'; +import { __ } from '~/locale'; export default { name: 'CollapsibeContainerRegisty', @@ -30,6 +31,7 @@ export default { GlTooltip: GlTooltipDirective, GlModal: GlModalDirective, }, + mixins: [Tracking.mixin({})], props: { repo: { type: Object, @@ -40,6 +42,10 @@ export default { return { isOpen: false, modalId: `confirm-repo-deletion-modal-${this.repo.id}`, + tracking: { + category: document.body.dataset.page, + label: 'registry_repository_delete', + }, }; }, computed: { @@ -61,15 +67,13 @@ export default { } }, handleDeleteRepository() { + this.track('confirm_delete', {}); return this.deleteItem(this.repo) .then(() => { createFlash(__('This container registry has been scheduled for deletion.'), 'notice'); this.fetchRepos(); }) - .catch(() => this.showError(errorMessagesTypes.DELETE_REPO)); - }, - showError(message) { - createFlash(errorMessages[message]); + .catch(() => createFlash(DELETE_REPO_ERROR_MESSAGE)); }, }, }; @@ -97,10 +101,9 @@ export default { v-gl-modal="modalId" :title="s__('ContainerRegistry|Remove repository')" :aria-label="s__('ContainerRegistry|Remove repository')" - data-track-event="click_button" - data-track-label="registry_repository_delete" class="js-remove-repo btn-inverted" variant="danger" + @click="track('click_button', {})" > <icon name="remove" /> </gl-button> @@ -124,7 +127,13 @@ export default { class="mx-auto my-0" /> </div> - <gl-modal :modal-id="modalId" ok-variant="danger" @ok="handleDeleteRepository"> + <gl-modal + ref="deleteModal" + :modal-id="modalId" + ok-variant="danger" + @ok="handleDeleteRepository" + @cancel="track('cancel_delete', {})" + > <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 8470fbc2b59..caa5fd4ff4e 100644 --- a/app/assets/javascripts/registry/components/table_registry.vue +++ b/app/assets/javascripts/registry/components/table_registry.vue @@ -1,20 +1,15 @@ <script> import { mapActions, mapGetters } from 'vuex'; -import { - GlButton, - GlFormCheckbox, - GlTooltipDirective, - GlModal, - GlModalDirective, -} from '@gitlab/ui'; -import { n__, s__, sprintf } from '../../locale'; -import createFlash from '../../flash'; -import ClipboardButton from '../../vue_shared/components/clipboard_button.vue'; -import TablePagination from '../../vue_shared/components/pagination/table_pagination.vue'; -import Icon from '../../vue_shared/components/icon.vue'; -import timeagoMixin from '../../vue_shared/mixins/timeago'; -import { errorMessages, errorMessagesTypes } from '../constants'; -import { numberToHumanSize } from '../../lib/utils/number_utils'; +import { GlButton, GlFormCheckbox, GlTooltipDirective, GlModal } from '@gitlab/ui'; +import Tracking from '~/tracking'; +import { n__, s__, sprintf } from '~/locale'; +import createFlash from '~/flash'; +import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; +import TablePagination from '~/vue_shared/components/pagination/table_pagination.vue'; +import Icon from '~/vue_shared/components/icon.vue'; +import timeagoMixin from '~/vue_shared/mixins/timeago'; +import { numberToHumanSize } from '~/lib/utils/number_utils'; +import { FETCH_REGISTRY_ERROR_MESSAGE, DELETE_REGISTRY_ERROR_MESSAGE } from '../constants'; export default { components: { @@ -27,7 +22,6 @@ export default { }, directives: { GlTooltip: GlTooltipDirective, - GlModal: GlModalDirective, }, mixins: [timeagoMixin], props: { @@ -65,12 +59,21 @@ export default { this.itemsToBeDeleted.length === 0 ? 1 : this.itemsToBeDeleted.length, ); }, - }, - mounted() { - this.$refs.deleteModal.$refs.modal.$on('hide', this.removeModalEvents); + isMultiDelete() { + return this.itemsToBeDeleted.length > 1; + }, + tracking() { + return { + property: this.repo.name, + label: this.isMultiDelete ? 'bulk_registry_tag_delete' : 'registry_tag_delete', + }; + }, }, methods: { ...mapActions(['fetchList', 'deleteItem', 'multiDeleteItems']), + track(action) { + Tracking.event(document.body.dataset.page, action, this.tracking); + }, setModalDescription(itemIndex = -1) { if (itemIndex === -1) { this.modalDescription = sprintf( @@ -92,17 +95,11 @@ export default { formatSize(size) { return numberToHumanSize(size); }, - removeModalEvents() { - this.$refs.deleteModal.$refs.modal.$off('ok'); - }, deleteSingleItem(index) { this.setModalDescription(index); this.itemsToBeDeleted = [index]; - - this.$refs.deleteModal.$refs.modal.$once('ok', () => { - this.removeModalEvents(); - this.handleSingleDelete(this.repo.list[index]); - }); + this.track('click_button'); + this.$refs.deleteModal.show(); }, deleteMultipleItems() { this.itemsToBeDeleted = [...this.selectedItems]; @@ -111,17 +108,14 @@ export default { } else if (this.selectedItems.length > 1) { this.setModalDescription(); } - - this.$refs.deleteModal.$refs.modal.$once('ok', () => { - this.removeModalEvents(); - this.handleMultipleDelete(); - }); + this.track('click_button'); + this.$refs.deleteModal.show(); }, handleSingleDelete(itemToDelete) { this.itemsToBeDeleted = []; this.deleteItem(itemToDelete) .then(() => this.fetchList({ repo: this.repo })) - .catch(() => this.showError(errorMessagesTypes.DELETE_REGISTRY)); + .catch(() => createFlash(DELETE_REGISTRY_ERROR_MESSAGE)); }, handleMultipleDelete() { const { itemsToBeDeleted } = this; @@ -134,19 +128,16 @@ export default { items: itemsToBeDeleted.map(x => this.repo.list[x].tag), }) .then(() => this.fetchList({ repo: this.repo })) - .catch(() => this.showError(errorMessagesTypes.DELETE_REGISTRY)); + .catch(() => createFlash(DELETE_REGISTRY_ERROR_MESSAGE)); } else { - this.showError(errorMessagesTypes.DELETE_REGISTRY); + createFlash(DELETE_REGISTRY_ERROR_MESSAGE); } }, onPageChange(pageNumber) { this.fetchList({ repo: this.repo, page: pageNumber }).catch(() => - this.showError(errorMessagesTypes.FETCH_REGISTRY), + createFlash(FETCH_REGISTRY_ERROR_MESSAGE), ); }, - showError(message) { - createFlash(errorMessages[message]); - }, onSelectAllChange() { if (this.selectAllChecked) { this.deselectAll(); @@ -179,6 +170,15 @@ export default { canDeleteRow(item) { return item && item.canDelete && !this.isDeleteDisabled; }, + onDeletionConfirmed() { + this.track('confirm_delete'); + if (this.isMultiDelete) { + this.handleMultipleDelete(); + } else { + const index = this.itemsToBeDeleted[0]; + this.handleSingleDelete(this.repo.list[index]); + } + }, }, }; </script> @@ -202,12 +202,10 @@ export default { <th> <gl-button v-if="canDeleteRepo" + ref="bulkDeleteButton" v-gl-tooltip - v-gl-modal="modalId" :disabled="!selectedItems || selectedItems.length === 0" - class="js-delete-registry float-right" - data-track-event="click_button" - data-track-label="bulk_registry_tag_delete" + class="float-right" variant="danger" :title="s__('ContainerRegistry|Remove selected tags')" :aria-label="s__('ContainerRegistry|Remove selected tags')" @@ -259,11 +257,8 @@ export default { <td class="content action-buttons"> <gl-button v-if="canDeleteRow(item)" - v-gl-modal="modalId" :title="s__('ContainerRegistry|Remove tag')" :aria-label="s__('ContainerRegistry|Remove tag')" - data-track-event="click_button" - data-track-label="registry_tag_delete" variant="danger" class="js-delete-registry-row float-right btn-inverted btn-border-color btn-icon" @click="deleteSingleItem(index)" @@ -282,7 +277,13 @@ export default { class="js-registry-pagination" /> - <gl-modal ref="deleteModal" :modal-id="modalId" ok-variant="danger"> + <gl-modal + ref="deleteModal" + :modal-id="modalId" + ok-variant="danger" + @ok="onDeletionConfirmed" + @cancel="track('cancel_delete')" + > <template v-slot:modal-title>{{ modalAction }}</template> <template v-slot:modal-ok>{{ modalAction }}</template> <p v-html="modalDescription"></p> |