debian-mirror-gitlab/app/assets/javascripts/issues/show/components/header_actions.vue

345 lines
9.5 KiB
Vue
Raw Normal View History

2021-01-29 00:20:46 +05:30
<script>
2022-01-26 12:08:38 +05:30
import {
GlButton,
GlDropdown,
GlDropdownDivider,
GlDropdownItem,
GlLink,
GlModal,
GlModalDirective,
} from '@gitlab/ui';
2021-02-22 17:27:13 +05:30
import { mapActions, mapGetters, mapState } from 'vuex';
2021-01-29 00:20:46 +05:30
import createFlash, { FLASH_TYPES } from '~/flash';
2021-04-17 20:07:23 +05:30
import { EVENT_ISSUABLE_VUE_APP_CHANGE } from '~/issuable/constants';
2022-03-02 08:16:31 +05:30
import { IssuableStatus, IssueType } from '~/issues/constants';
import { ISSUE_STATE_EVENT_CLOSE, ISSUE_STATE_EVENT_REOPEN } from '~/issues/show/constants';
2021-01-29 00:20:46 +05:30
import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
import { visitUrl } from '~/lib/utils/url_utility';
2022-01-26 12:08:38 +05:30
import { s__, __, sprintf } from '~/locale';
2021-02-22 17:27:13 +05:30
import eventHub from '~/notes/event_hub';
2022-01-26 12:08:38 +05:30
import Tracking from '~/tracking';
2021-01-29 00:20:46 +05:30
import promoteToEpicMutation from '../queries/promote_to_epic.mutation.graphql';
import updateIssueMutation from '../queries/update_issue.mutation.graphql';
2022-01-26 12:08:38 +05:30
import DeleteIssueModal from './delete_issue_modal.vue';
const trackingMixin = Tracking.mixin({ label: 'delete_issue' });
2021-01-29 00:20:46 +05:30
export default {
actionCancel: {
text: __('Cancel'),
},
actionPrimary: {
text: __('Yes, close issue'),
},
2022-01-26 12:08:38 +05:30
deleteModalId: 'delete-modal-id',
2021-01-29 00:20:46 +05:30
i18n: {
promoteErrorMessage: __(
'Something went wrong while promoting the issue to an epic. Please try again.',
),
promoteSuccessMessage: __(
'The issue was successfully promoted to an epic. Redirecting to epic...',
),
},
2022-01-26 12:08:38 +05:30
components: {
DeleteIssueModal,
GlButton,
GlDropdown,
GlDropdownDivider,
GlDropdownItem,
GlLink,
GlModal,
},
directives: {
GlModal: GlModalDirective,
},
mixins: [trackingMixin],
2021-01-29 00:20:46 +05:30
inject: {
canCreateIssue: {
default: false,
},
2022-01-26 12:08:38 +05:30
canDestroyIssue: {
default: false,
},
2021-01-29 00:20:46 +05:30
canPromoteToEpic: {
default: false,
},
canReopenIssue: {
default: false,
},
canReportSpam: {
default: false,
},
canUpdateIssue: {
default: false,
},
iid: {
default: '',
},
isIssueAuthor: {
default: false,
},
2022-01-26 12:08:38 +05:30
issuePath: {
default: '',
},
2021-01-29 00:20:46 +05:30
issueType: {
2022-03-02 08:16:31 +05:30
default: IssueType.Issue,
2021-01-29 00:20:46 +05:30
},
newIssuePath: {
default: '',
},
projectPath: {
default: '',
},
reportAbusePath: {
default: '',
},
submitAsSpamPath: {
default: '',
},
},
computed: {
2021-02-22 17:27:13 +05:30
...mapState(['isToggleStateButtonLoading']),
...mapGetters(['openState', 'getBlockedByIssues']),
2021-01-29 00:20:46 +05:30
isClosed() {
2021-02-22 17:27:13 +05:30
return this.openState === IssuableStatus.Closed;
2021-01-29 00:20:46 +05:30
},
2022-01-26 12:08:38 +05:30
issueTypeText() {
const issueTypeTexts = {
2022-03-02 08:16:31 +05:30
[IssueType.Issue]: s__('HeaderAction|issue'),
[IssueType.Incident]: s__('HeaderAction|incident'),
2022-01-26 12:08:38 +05:30
};
return issueTypeTexts[this.issueType] ?? this.issueType;
},
2021-01-29 00:20:46 +05:30
buttonText() {
return this.isClosed
2022-01-26 12:08:38 +05:30
? sprintf(__('Reopen %{issueType}'), { issueType: this.issueTypeText })
: sprintf(__('Close %{issueType}'), { issueType: this.issueTypeText });
},
deleteButtonText() {
return sprintf(__('Delete %{issuableType}'), { issuableType: this.issueTypeText });
2021-01-29 00:20:46 +05:30
},
qaSelector() {
return this.isClosed ? 'reopen_issue_button' : 'close_issue_button';
},
dropdownText() {
return sprintf(__('%{issueType} actions'), {
issueType: capitalizeFirstCharacter(this.issueType),
});
},
newIssueTypeText() {
return sprintf(__('New %{issueType}'), { issueType: this.issueType });
},
showToggleIssueStateButton() {
const canClose = !this.isClosed && this.canUpdateIssue;
const canReopen = this.isClosed && this.canReopenIssue;
return canClose || canReopen;
},
},
2021-02-22 17:27:13 +05:30
created() {
eventHub.$on('toggle.issuable.state', this.toggleIssueState);
},
beforeDestroy() {
eventHub.$off('toggle.issuable.state', this.toggleIssueState);
},
2021-01-29 00:20:46 +05:30
methods: {
2021-02-22 17:27:13 +05:30
...mapActions(['toggleStateButtonLoading']),
2021-01-29 00:20:46 +05:30
toggleIssueState() {
2021-02-22 17:27:13 +05:30
if (!this.isClosed && this.getBlockedByIssues?.length) {
2021-01-29 00:20:46 +05:30
this.$refs.blockedByIssuesModal.show();
return;
}
this.invokeUpdateIssueMutation();
},
invokeUpdateIssueMutation() {
2021-02-22 17:27:13 +05:30
this.toggleStateButtonLoading(true);
2021-01-29 00:20:46 +05:30
this.$apollo
.mutate({
mutation: updateIssueMutation,
variables: {
input: {
iid: this.iid.toString(),
projectPath: this.projectPath,
2022-03-02 08:16:31 +05:30
stateEvent: this.isClosed ? ISSUE_STATE_EVENT_REOPEN : ISSUE_STATE_EVENT_CLOSE,
2021-01-29 00:20:46 +05:30
},
},
})
.then(({ data }) => {
if (data.updateIssue.errors.length) {
2022-01-26 12:08:38 +05:30
throw new Error();
2021-01-29 00:20:46 +05:30
}
const payload = {
detail: {
data: { id: this.iid },
isClosed: !this.isClosed,
},
};
// Dispatch event which updates open/close state, shared among the issue show page
2021-04-17 20:07:23 +05:30
document.dispatchEvent(new CustomEvent(EVENT_ISSUABLE_VUE_APP_CHANGE, payload));
2021-01-29 00:20:46 +05:30
})
2021-02-22 17:27:13 +05:30
.catch(() => createFlash({ message: __('Error occurred while updating the issue status') }))
2021-01-29 00:20:46 +05:30
.finally(() => {
2021-02-22 17:27:13 +05:30
this.toggleStateButtonLoading(false);
2021-01-29 00:20:46 +05:30
});
},
promoteToEpic() {
2021-02-22 17:27:13 +05:30
this.toggleStateButtonLoading(true);
2021-01-29 00:20:46 +05:30
this.$apollo
.mutate({
mutation: promoteToEpicMutation,
variables: {
input: {
iid: this.iid,
projectPath: this.projectPath,
},
},
})
.then(({ data }) => {
if (data.promoteToEpic.errors.length) {
2022-01-26 12:08:38 +05:30
throw new Error();
2021-01-29 00:20:46 +05:30
}
createFlash({
message: this.$options.i18n.promoteSuccessMessage,
type: FLASH_TYPES.SUCCESS,
});
visitUrl(data.promoteToEpic.epic.webPath);
})
.catch(() => createFlash({ message: this.$options.i18n.promoteErrorMessage }))
.finally(() => {
2021-02-22 17:27:13 +05:30
this.toggleStateButtonLoading(false);
2021-01-29 00:20:46 +05:30
});
},
},
};
</script>
<template>
2021-04-29 21:17:54 +05:30
<div class="detail-page-header-actions gl-display-flex">
2021-02-22 17:27:13 +05:30
<gl-dropdown
2021-04-29 21:17:54 +05:30
class="gl-sm-display-none! w-100"
2021-02-22 17:27:13 +05:30
block
:text="dropdownText"
2021-12-11 22:18:48 +05:30
data-qa-selector="issue_actions_dropdown"
2021-02-22 17:27:13 +05:30
:loading="isToggleStateButtonLoading"
>
2021-12-11 22:18:48 +05:30
<gl-dropdown-item
v-if="showToggleIssueStateButton"
:data-qa-selector="`mobile_${qaSelector}`"
@click="toggleIssueState"
>
2021-01-29 00:20:46 +05:30
{{ buttonText }}
</gl-dropdown-item>
<gl-dropdown-item v-if="canCreateIssue" :href="newIssuePath">
{{ newIssueTypeText }}
</gl-dropdown-item>
2021-02-22 17:27:13 +05:30
<gl-dropdown-item v-if="canPromoteToEpic" @click="promoteToEpic">
2021-01-29 00:20:46 +05:30
{{ __('Promote to epic') }}
</gl-dropdown-item>
<gl-dropdown-item v-if="!isIssueAuthor" :href="reportAbusePath">
{{ __('Report abuse') }}
</gl-dropdown-item>
<gl-dropdown-item
v-if="canReportSpam"
:href="submitAsSpamPath"
data-method="post"
rel="nofollow"
>
{{ __('Submit as spam') }}
</gl-dropdown-item>
2022-01-26 12:08:38 +05:30
<template v-if="canDestroyIssue">
<gl-dropdown-divider />
<gl-dropdown-item
v-gl-modal="$options.deleteModalId"
variant="danger"
@click="track('click_dropdown')"
>
{{ deleteButtonText }}
</gl-dropdown-item>
</template>
2021-01-29 00:20:46 +05:30
</gl-dropdown>
<gl-button
v-if="showToggleIssueStateButton"
2021-03-11 19:13:27 +05:30
class="gl-display-none gl-sm-display-inline-flex!"
2021-01-29 00:20:46 +05:30
:data-qa-selector="qaSelector"
2021-02-22 17:27:13 +05:30
:loading="isToggleStateButtonLoading"
2021-01-29 00:20:46 +05:30
@click="toggleIssueState"
>
{{ buttonText }}
</gl-button>
<gl-dropdown
2021-04-29 21:17:54 +05:30
class="gl-display-none gl-sm-display-inline-flex! gl-ml-3"
icon="ellipsis_v"
category="tertiary"
:text="dropdownText"
:text-sr-only="true"
2021-01-29 00:20:46 +05:30
no-caret
right
>
<gl-dropdown-item v-if="canCreateIssue" :href="newIssuePath">
{{ newIssueTypeText }}
</gl-dropdown-item>
<gl-dropdown-item
v-if="canPromoteToEpic"
2021-02-22 17:27:13 +05:30
:disabled="isToggleStateButtonLoading"
2021-01-29 00:20:46 +05:30
data-testid="promote-button"
@click="promoteToEpic"
>
{{ __('Promote to epic') }}
</gl-dropdown-item>
<gl-dropdown-item v-if="!isIssueAuthor" :href="reportAbusePath">
{{ __('Report abuse') }}
</gl-dropdown-item>
<gl-dropdown-item
v-if="canReportSpam"
:href="submitAsSpamPath"
data-method="post"
rel="nofollow"
>
{{ __('Submit as spam') }}
</gl-dropdown-item>
2022-01-26 12:08:38 +05:30
<template v-if="canDestroyIssue">
<gl-dropdown-divider />
<gl-dropdown-item
v-gl-modal="$options.deleteModalId"
variant="danger"
@click="track('click_dropdown')"
>
{{ deleteButtonText }}
</gl-dropdown-item>
</template>
2021-01-29 00:20:46 +05:30
</gl-dropdown>
<gl-modal
ref="blockedByIssuesModal"
modal-id="blocked-by-issues-modal"
:action-cancel="$options.actionCancel"
:action-primary="$options.actionPrimary"
:title="__('Are you sure you want to close this blocked issue?')"
@primary="invokeUpdateIssueMutation"
>
<p>{{ __('This issue is currently blocked by the following issues:') }}</p>
<ul>
2021-02-22 17:27:13 +05:30
<li v-for="issue in getBlockedByIssues" :key="issue.iid">
2021-01-29 00:20:46 +05:30
<gl-link :href="issue.web_url">#{{ issue.iid }}</gl-link>
</li>
</ul>
</gl-modal>
2022-01-26 12:08:38 +05:30
<delete-issue-modal
:issue-path="issuePath"
:issue-type="issueType"
:modal-id="$options.deleteModalId"
:title="deleteButtonText"
/>
2021-01-29 00:20:46 +05:30
</div>
</template>