diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-11-05 00:09:59 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-11-05 00:09:59 +0300 |
commit | 8fc2555ccce63aa5641b123c154389cff593e0d7 (patch) | |
tree | 74f0200c2f7b9a5349120599daa762ea36df697a /app/assets/javascripts/artifacts | |
parent | 821ba7ce78f6508fe03e3f7c9bc0b9542fa86485 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/artifacts')
4 files changed, 97 insertions, 11 deletions
diff --git a/app/assets/javascripts/artifacts/components/artifact_delete_modal.vue b/app/assets/javascripts/artifacts/components/artifact_delete_modal.vue new file mode 100644 index 00000000000..14edd73824e --- /dev/null +++ b/app/assets/javascripts/artifacts/components/artifact_delete_modal.vue @@ -0,0 +1,54 @@ +<script> +import { GlModal } from '@gitlab/ui'; + +import { + I18N_MODAL_TITLE, + I18N_MODAL_BODY, + I18N_MODAL_PRIMARY, + I18N_MODAL_CANCEL, +} from '../constants'; + +export default { + components: { + GlModal, + }, + props: { + artifactName: { + type: String, + required: true, + }, + deleteInProgress: { + type: Boolean, + required: true, + }, + }, + computed: { + actionPrimary() { + return { + text: I18N_MODAL_PRIMARY, + attributes: { variant: 'danger', loading: this.deleteInProgress }, + }; + }, + }, + actionCancel: { text: I18N_MODAL_CANCEL }, + i18n: { + title: I18N_MODAL_TITLE, + body: I18N_MODAL_BODY, + }, +}; +</script> + +<template> + <gl-modal + ref="modal" + modal-id="artifact-delete-modal" + size="sm" + :title="$options.i18n.title(artifactName)" + :action-primary="actionPrimary" + :action-cancel="$options.actionCancel" + v-bind="$attrs" + v-on="$listeners" + > + {{ $options.i18n.body }} + </gl-modal> +</template> diff --git a/app/assets/javascripts/artifacts/components/artifact_row.vue b/app/assets/javascripts/artifacts/components/artifact_row.vue index b6cea6a04e3..8c03db2acd1 100644 --- a/app/assets/javascripts/artifacts/components/artifact_row.vue +++ b/app/assets/javascripts/artifacts/components/artifact_row.vue @@ -16,10 +16,6 @@ export default { type: Object, required: true, }, - isLoading: { - type: Boolean, - required: true, - }, isLastRow: { type: Boolean, required: true, @@ -81,7 +77,6 @@ export default { icon="remove" :title="$options.i18n.delete" :aria-label="$options.i18n.delete" - :loading="isLoading" data-testid="job-artifact-row-delete-button" @click="$emit('delete')" /> diff --git a/app/assets/javascripts/artifacts/components/artifacts_table_row_details.vue b/app/assets/javascripts/artifacts/components/artifacts_table_row_details.vue index 089bfd80222..4a826d0d462 100644 --- a/app/assets/javascripts/artifacts/components/artifacts_table_row_details.vue +++ b/app/assets/javascripts/artifacts/components/artifacts_table_row_details.vue @@ -10,6 +10,7 @@ import { ARTIFACTS_SHOWN_WITHOUT_SCROLLING, } from '../constants'; import ArtifactRow from './artifact_row.vue'; +import ArtifactDeleteModal from './artifact_delete_modal.vue'; export default { name: 'ArtifactsTableRowDetails', @@ -17,6 +18,7 @@ export default { DynamicScroller, DynamicScrollerItem, ArtifactRow, + ArtifactDeleteModal, }, props: { artifacts: { @@ -30,7 +32,10 @@ export default { }, data() { return { + isModalVisible: false, + deleteInProgress: false, deletingArtifactId: null, + deletingArtifactName: '', }; }, computed: { @@ -47,8 +52,22 @@ export default { isLastRow(index) { return index === this.artifacts.nodes.length - 1; }, - destroyArtifact(id) { - this.deletingArtifactId = id; + showModal(item) { + this.deletingArtifactId = item.id; + this.deletingArtifactName = item.name; + this.isModalVisible = true; + }, + hideModal() { + this.isModalVisible = false; + }, + clearModal() { + this.deletingArtifactId = null; + this.deletingArtifactName = ''; + }, + destroyArtifact() { + const id = this.deletingArtifactId; + this.deleteInProgress = true; + this.$apollo .mutate({ mutation: destroyArtifactMutation, @@ -64,7 +83,8 @@ export default { this.$emit('refetch'); }) .finally(() => { - this.deletingArtifactId = null; + this.deleteInProgress = false; + this.clearModal(); }); }, }, @@ -79,11 +99,20 @@ export default { <artifact-row :artifact="item" :is-last-row="isLastRow(index)" - :is-loading="item.id === deletingArtifactId" - @delete="destroyArtifact(item.id)" + @delete="showModal(item)" /> </dynamic-scroller-item> </template> </dynamic-scroller> + <artifact-delete-modal + :artifact-name="deletingArtifactName" + :visible="isModalVisible" + :delete-in-progress="deleteInProgress" + @primary="destroyArtifact" + @cancel="hideModal" + @close="hideModal" + @hide="hideModal" + @hidden="clearModal" + /> </div> </template> diff --git a/app/assets/javascripts/artifacts/constants.js b/app/assets/javascripts/artifacts/constants.js index 9ed0821ac2d..5fcc4f2b76e 100644 --- a/app/assets/javascripts/artifacts/constants.js +++ b/app/assets/javascripts/artifacts/constants.js @@ -1,4 +1,4 @@ -import { __, s__, n__ } from '~/locale'; +import { __, s__, n__, sprintf } from '~/locale'; export const JOB_STATUS_GROUP_SUCCESS = 'success'; @@ -35,6 +35,14 @@ export const I18N_SIZE = __('Size'); export const I18N_CREATED = __('Created'); export const I18N_ARTIFACTS_COUNT = (count) => n__('%d file', '%d files', count); +export const I18N_MODAL_TITLE = (artifactName) => + sprintf(s__('Artifacts|Delete %{name}?'), { name: artifactName }); +export const I18N_MODAL_BODY = s__( + 'Artifacts|This artifact will be permanently deleted. Any reports generated from this artifact will be empty.', +); +export const I18N_MODAL_PRIMARY = s__('Artifacts|Delete artifact'); +export const I18N_MODAL_CANCEL = __('Cancel'); + export const INITIAL_CURRENT_PAGE = 1; export const INITIAL_PREVIOUS_PAGE_CURSOR = ''; export const INITIAL_NEXT_PAGE_CURSOR = ''; |