diff options
Diffstat (limited to 'app/assets/javascripts/issues/related_merge_requests/components/related_merge_requests.vue')
-rw-r--r-- | app/assets/javascripts/issues/related_merge_requests/components/related_merge_requests.vue | 120 |
1 files changed, 120 insertions, 0 deletions
diff --git a/app/assets/javascripts/issues/related_merge_requests/components/related_merge_requests.vue b/app/assets/javascripts/issues/related_merge_requests/components/related_merge_requests.vue new file mode 100644 index 00000000000..1d48446b083 --- /dev/null +++ b/app/assets/javascripts/issues/related_merge_requests/components/related_merge_requests.vue @@ -0,0 +1,120 @@ +<script> +import { GlLink, GlLoadingIcon, GlIcon } from '@gitlab/ui'; +import { mapState, mapActions } from 'vuex'; +import { sprintf, __, n__ } from '~/locale'; +import RelatedIssuableItem from '~/issuable/components/related_issuable_item.vue'; +import { parseIssuableData } from '~/issues/show/utils/parse_data'; + +export default { + name: 'RelatedMergeRequests', + components: { + GlIcon, + GlLink, + GlLoadingIcon, + RelatedIssuableItem, + }, + props: { + endpoint: { + type: String, + required: true, + }, + projectNamespace: { + type: String, + required: true, + }, + projectPath: { + type: String, + required: true, + }, + }, + computed: { + ...mapState(['isFetchingMergeRequests', 'mergeRequests', 'totalCount']), + closingMergeRequestsText() { + if (!this.hasClosingMergeRequest) { + return ''; + } + + const mrText = n__( + 'When this merge request is accepted', + 'When these merge requests are accepted', + this.totalCount, + ); + + return sprintf(__('%{mrText}, this issue will be closed automatically.'), { mrText }); + }, + }, + mounted() { + this.setInitialState({ apiEndpoint: this.endpoint }); + this.fetchMergeRequests(); + }, + created() { + this.hasClosingMergeRequest = parseIssuableData().hasClosingMergeRequest; + }, + methods: { + ...mapActions(['setInitialState', 'fetchMergeRequests']), + getAssignees(mr) { + if (mr.assignees) { + return mr.assignees; + } + + return mr.assignee ? [mr.assignee] : []; + }, + }, +}; +</script> + +<template> + <div v-if="isFetchingMergeRequests || (!isFetchingMergeRequests && totalCount)"> + <div class="card card-slim gl-mt-5"> + <div class="card-header"> + <div + class="card-title gl-relative gl-display-flex gl-align-items-center gl-line-height-20 gl-font-weight-bold gl-m-0" + > + <gl-link + class="anchor gl-absolute gl-text-decoration-none" + href="#related-merge-requests" + aria-labelledby="related-merge-requests" + /> + <h3 id="related-merge-requests" class="gl-font-base gl-m-0"> + {{ __('Related merge requests') }} + </h3> + <template v-if="totalCount"> + <gl-icon name="merge-request" class="gl-ml-5 gl-mr-2 gl-text-gray-500" /> + <span data-testid="count">{{ totalCount }}</span> + </template> + </div> + </div> + <gl-loading-icon + v-if="isFetchingMergeRequests" + size="sm" + label="Fetching related merge requests" + class="gl-py-3" + /> + <ul v-else class="content-list related-items-list"> + <li v-for="mr in mergeRequests" :key="mr.id" class="list-item gl-m-0! gl-p-0!"> + <related-issuable-item + :id-key="mr.id" + :display-reference="mr.reference" + :title="mr.title" + :milestone="mr.milestone" + :assignees="getAssignees(mr)" + :created-at="mr.created_at" + :closed-at="mr.closed_at" + :merged-at="mr.merged_at" + :path="mr.web_url" + :state="mr.state" + :is-merge-request="true" + :pipeline-status="mr.head_pipeline && mr.head_pipeline.detailed_status" + path-id-separator="!" + /> + </li> + </ul> + </div> + <div + v-if="hasClosingMergeRequest && !isFetchingMergeRequests" + class="issue-closed-by-widget second-block" + > + {{ closingMergeRequestsText }} + </div> + </div> +</template> |