debian-mirror-gitlab/app/assets/javascripts/issuable/popover/components/mr_popover.vue

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

117 lines
3 KiB
Vue
Raw Normal View History

2019-07-07 11:18:12 +05:30
<script>
2022-07-23 23:45:48 +05:30
import { GlBadge, GlPopover, GlSkeletonLoader } from '@gitlab/ui';
2023-05-27 22:25:52 +05:30
import { STATUS_CLOSED, STATUS_MERGED } from '~/issues/constants';
import { __ } from '~/locale';
2022-06-21 17:19:12 +05:30
import CiIcon from '~/vue_shared/components/ci_icon.vue';
import timeagoMixin from '~/vue_shared/mixins/timeago';
2021-03-11 19:13:27 +05:30
import query from '../queries/merge_request.query.graphql';
2019-07-07 11:18:12 +05:30
export default {
components: {
2022-07-23 23:45:48 +05:30
GlBadge,
2019-07-07 11:18:12 +05:30
GlPopover,
2022-07-23 23:45:48 +05:30
GlSkeletonLoader,
2019-07-07 11:18:12 +05:30
CiIcon,
},
mixins: [timeagoMixin],
props: {
target: {
type: HTMLAnchorElement,
required: true,
},
projectPath: {
type: String,
required: true,
},
2022-07-23 23:45:48 +05:30
iid: {
2019-07-07 11:18:12 +05:30
type: String,
required: true,
},
2022-07-23 23:45:48 +05:30
cachedTitle: {
2019-07-07 11:18:12 +05:30
type: String,
required: true,
},
},
data() {
return {
mergeRequest: {},
};
},
computed: {
detailedStatus() {
return this.mergeRequest.headPipeline && this.mergeRequest.headPipeline.detailedStatus;
},
formattedTime() {
2020-01-01 13:55:28 +05:30
return this.timeFormatted(this.mergeRequest.createdAt);
2019-07-07 11:18:12 +05:30
},
2022-07-23 23:45:48 +05:30
badgeVariant() {
2019-07-07 11:18:12 +05:30
switch (this.mergeRequest.state) {
2023-05-27 22:25:52 +05:30
case STATUS_MERGED:
2022-07-23 23:45:48 +05:30
return 'info';
2023-05-27 22:25:52 +05:30
case STATUS_CLOSED:
2022-07-23 23:45:48 +05:30
return 'danger';
2019-07-07 11:18:12 +05:30
default:
2022-07-23 23:45:48 +05:30
return 'success';
2019-07-07 11:18:12 +05:30
}
},
stateHumanName() {
switch (this.mergeRequest.state) {
2023-05-27 22:25:52 +05:30
case STATUS_MERGED:
return __('Merged');
case STATUS_CLOSED:
return __('Closed');
2019-07-07 11:18:12 +05:30
default:
2023-05-27 22:25:52 +05:30
return __('Open');
2019-07-07 11:18:12 +05:30
}
},
2022-01-26 12:08:38 +05:30
title() {
2022-07-23 23:45:48 +05:30
return this.mergeRequest?.title || this.cachedTitle;
2022-01-26 12:08:38 +05:30
},
2019-07-07 11:18:12 +05:30
showDetails() {
return Object.keys(this.mergeRequest).length > 0;
},
},
apollo: {
mergeRequest: {
query,
2021-03-08 18:12:59 +05:30
update: (data) => data.project.mergeRequest,
2019-07-07 11:18:12 +05:30
variables() {
2022-07-23 23:45:48 +05:30
const { projectPath, iid } = this;
2019-07-07 11:18:12 +05:30
return {
projectPath,
2022-07-23 23:45:48 +05:30
iid,
2019-07-07 11:18:12 +05:30
};
},
},
},
};
</script>
<template>
<gl-popover :target="target" boundary="viewport" placement="top" show>
<div class="mr-popover">
2022-07-23 23:45:48 +05:30
<gl-skeleton-loader v-if="$apollo.queries.mergeRequest.loading" :height="15">
<rect width="250" height="15" rx="4" />
</gl-skeleton-loader>
2019-07-07 11:18:12 +05:30
<div v-else-if="showDetails" class="d-flex align-items-center justify-content-between">
<div class="d-inline-flex align-items-center">
2022-07-23 23:45:48 +05:30
<gl-badge class="gl-mr-3" :variant="badgeVariant">
2019-07-07 11:18:12 +05:30
{{ stateHumanName }}
2022-07-23 23:45:48 +05:30
</gl-badge>
2023-05-27 22:25:52 +05:30
<span class="gl-text-secondary">
{{ __('Opened') }} <time v-text="formattedTime"></time
></span>
2019-07-07 11:18:12 +05:30
</div>
<ci-icon v-if="detailedStatus" :status="detailedStatus" />
</div>
2022-01-26 12:08:38 +05:30
<h5 v-if="!$apollo.queries.mergeRequest.loading" class="my-2">{{ title }}</h5>
2020-04-22 19:07:51 +05:30
<!-- eslint-disable @gitlab/vue-require-i18n-strings -->
2022-01-26 12:08:38 +05:30
<div class="gl-text-secondary">
2022-07-23 23:45:48 +05:30
{{ `${projectPath}!${iid}` }}
2019-07-07 11:18:12 +05:30
</div>
2020-04-22 19:07:51 +05:30
<!-- eslint-enable @gitlab/vue-require-i18n-strings -->
2019-07-07 11:18:12 +05:30
</div>
</gl-popover>
</template>