diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-12-20 13:37:47 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-12-20 13:37:47 +0000 |
commit | aee0a117a889461ce8ced6fcf73207fe017f1d99 (patch) | |
tree | 891d9ef189227a8445d83f35c1b0fc99573f4380 /app/assets/javascripts/issues/show/components/edit_actions.vue | |
parent | 8d46af3258650d305f53b819eabf7ab18d22f59e (diff) | |
download | gitlab-ce-985a97665f0cffeefeeafdf55089c30e1832e6cf.tar.gz |
Add latest changes from gitlab-org/gitlab@14-6-stable-eev14.6.0-rc42
Diffstat (limited to 'app/assets/javascripts/issues/show/components/edit_actions.vue')
-rw-r--r-- | app/assets/javascripts/issues/show/components/edit_actions.vue | 141 |
1 files changed, 141 insertions, 0 deletions
diff --git a/app/assets/javascripts/issues/show/components/edit_actions.vue b/app/assets/javascripts/issues/show/components/edit_actions.vue new file mode 100644 index 00000000000..4daf6f2b61b --- /dev/null +++ b/app/assets/javascripts/issues/show/components/edit_actions.vue @@ -0,0 +1,141 @@ +<script> +import { GlButton, GlModalDirective } from '@gitlab/ui'; +import { uniqueId } from 'lodash'; +import { __, sprintf } from '~/locale'; +import Tracking from '~/tracking'; +import eventHub from '../event_hub'; +import updateMixin from '../mixins/update'; +import getIssueStateQuery from '../queries/get_issue_state.query.graphql'; +import DeleteIssueModal from './delete_issue_modal.vue'; + +const issuableTypes = { + issue: __('Issue'), + epic: __('Epic'), + incident: __('Incident'), +}; + +const trackingMixin = Tracking.mixin({ label: 'delete_issue' }); + +export default { + components: { + DeleteIssueModal, + GlButton, + }, + directives: { + GlModal: GlModalDirective, + }, + mixins: [trackingMixin, updateMixin], + props: { + canDestroy: { + type: Boolean, + required: true, + }, + endpoint: { + required: true, + type: String, + }, + formState: { + type: Object, + required: true, + }, + showDeleteButton: { + type: Boolean, + required: false, + default: true, + }, + issuableType: { + type: String, + required: true, + }, + }, + data() { + return { + deleteLoading: false, + skipApollo: false, + issueState: {}, + modalId: uniqueId('delete-issuable-modal-'), + }; + }, + apollo: { + issueState: { + query: getIssueStateQuery, + skip() { + return this.skipApollo; + }, + result() { + this.skipApollo = true; + }, + }, + }, + computed: { + deleteIssuableButtonText() { + return sprintf(__('Delete %{issuableType}'), { + issuableType: this.typeToShow.toLowerCase(), + }); + }, + isSubmitEnabled() { + return this.formState.title.trim() !== ''; + }, + shouldShowDeleteButton() { + return this.canDestroy && this.showDeleteButton; + }, + typeToShow() { + const { issueState, issuableType } = this; + const type = issueState.issueType ?? issuableType; + return issuableTypes[type]; + }, + }, + methods: { + closeForm() { + eventHub.$emit('close.form'); + }, + deleteIssuable() { + this.deleteLoading = true; + eventHub.$emit('delete.issuable'); + }, + }, +}; +</script> + +<template> + <div class="gl-mt-3 gl-mb-3 gl-display-flex gl-justify-content-space-between"> + <div> + <gl-button + :loading="formState.updateLoading" + :disabled="formState.updateLoading || !isSubmitEnabled" + category="primary" + variant="confirm" + class="qa-save-button gl-mr-3" + data-testid="issuable-save-button" + type="submit" + @click.prevent="updateIssuable" + > + {{ __('Save changes') }} + </gl-button> + <gl-button data-testid="issuable-cancel-button" @click="closeForm"> + {{ __('Cancel') }} + </gl-button> + </div> + <div v-if="shouldShowDeleteButton"> + <gl-button + v-gl-modal="modalId" + :loading="deleteLoading" + :disabled="deleteLoading" + category="secondary" + variant="danger" + class="qa-delete-button" + data-testid="issuable-delete-button" + @click="track('click_button')" + > + {{ deleteIssuableButtonText }} + </gl-button> + <delete-issue-modal + :issue-path="endpoint" + :issue-type="typeToShow" + :modal-id="modalId" + :title="deleteIssuableButtonText" + @delete="deleteIssuable" + /> + </div> + </div> +</template> |