diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-05-25 15:08:10 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-05-25 15:08:10 +0300 |
commit | ba9892d3c122a4f437b4b38926fb75848deaf097 (patch) | |
tree | 428fa4e4d19ff38cc6ccdd2036e10f2333720fc2 /app/assets/javascripts/issuable | |
parent | f71f0f5307d836c4b0a7e501e4af799a536f3454 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/issuable')
5 files changed, 122 insertions, 18 deletions
diff --git a/app/assets/javascripts/issuable/popover/components/issue_popover.vue b/app/assets/javascripts/issuable/popover/components/issue_popover.vue new file mode 100644 index 00000000000..0cafaa1e500 --- /dev/null +++ b/app/assets/javascripts/issuable/popover/components/issue_popover.vue @@ -0,0 +1,83 @@ +<script> +import { GlPopover, GlSkeletonLoader } from '@gitlab/ui'; +import StatusBox from '~/issuable/components/status_box.vue'; +import timeagoMixin from '~/vue_shared/mixins/timeago'; +import query from '../queries/issue.query.graphql'; + +export default { + components: { + GlPopover, + GlSkeletonLoader, + StatusBox, + }, + mixins: [timeagoMixin], + props: { + target: { + type: HTMLAnchorElement, + required: true, + }, + projectPath: { + type: String, + required: true, + }, + iid: { + type: String, + required: true, + }, + cachedTitle: { + type: String, + required: true, + }, + }, + data() { + return { + issue: {}, + }; + }, + computed: { + formattedTime() { + return this.timeFormatted(this.issue.createdAt); + }, + title() { + return this.issue?.title || this.cachedTitle; + }, + showDetails() { + return Object.keys(this.issue).length > 0; + }, + }, + apollo: { + issue: { + query, + update: (data) => data.project.issue, + variables() { + const { projectPath, iid } = this; + + return { + projectPath, + iid, + }; + }, + }, + }, +}; +</script> + +<template> + <gl-popover :target="target" boundary="viewport" placement="top" show> + <gl-skeleton-loader v-if="$apollo.queries.issue.loading" :height="15"> + <rect width="250" height="15" rx="4" /> + </gl-skeleton-loader> + <div v-else-if="showDetails" class="gl-display-flex gl-align-items-center"> + <status-box issuable-type="issue" :initial-state="issue.state" /> + <span class="gl-text-secondary"> + {{ __('Opened') }} <time :datetime="issue.createdAt">{{ formattedTime }}</time> + </span> + </div> + <h5 v-if="!$apollo.queries.issue.loading" class="gl-my-3">{{ title }}</h5> + <!-- eslint-disable @gitlab/vue-require-i18n-strings --> + <div class="gl-text-secondary"> + {{ `${projectPath}#${iid}` }} + </div> + <!-- eslint-enable @gitlab/vue-require-i18n-strings --> + </gl-popover> +</template> diff --git a/app/assets/javascripts/issuable/popover/components/mr_popover.vue b/app/assets/javascripts/issuable/popover/components/mr_popover.vue index f467d7e93b1..8573dd702a6 100644 --- a/app/assets/javascripts/issuable/popover/components/mr_popover.vue +++ b/app/assets/javascripts/issuable/popover/components/mr_popover.vue @@ -25,11 +25,11 @@ export default { type: String, required: true, }, - mergeRequestIID: { + iid: { type: String, required: true, }, - mergeRequestTitle: { + cachedTitle: { type: String, required: true, }, @@ -67,7 +67,7 @@ export default { } }, title() { - return this.mergeRequest?.title || this.mergeRequestTitle; + return this.mergeRequest?.title || this.cachedTitle; }, showDetails() { return Object.keys(this.mergeRequest).length > 0; @@ -78,11 +78,11 @@ export default { query, update: (data) => data.project.mergeRequest, variables() { - const { projectPath, mergeRequestIID } = this; + const { projectPath, iid } = this; return { projectPath, - mergeRequestIID, + iid, }; }, }, @@ -108,7 +108,7 @@ export default { <h5 v-if="!$apollo.queries.mergeRequest.loading" class="my-2">{{ title }}</h5> <!-- eslint-disable @gitlab/vue-require-i18n-strings --> <div class="gl-text-secondary"> - {{ `${projectPath}!${mergeRequestIID}` }} + {{ `${projectPath}!${iid}` }} </div> <!-- eslint-enable @gitlab/vue-require-i18n-strings --> </div> diff --git a/app/assets/javascripts/issuable/popover/index.js b/app/assets/javascripts/issuable/popover/index.js index 1f0a00bc286..a09aae00aeb 100644 --- a/app/assets/javascripts/issuable/popover/index.js +++ b/app/assets/javascripts/issuable/popover/index.js @@ -1,8 +1,14 @@ import Vue from 'vue'; import VueApollo from 'vue-apollo'; import createDefaultClient from '~/lib/graphql'; +import IssuePopover from './components/issue_popover.vue'; import MRPopover from './components/mr_popover.vue'; +const componentsByReferenceType = { + issue: IssuePopover, + merge_request: MRPopover, +}; + let renderedPopover; let renderFn; @@ -22,20 +28,24 @@ const handleIssuablePopoverMouseOut = ({ target }) => { * Adds a MergeRequestPopover component to the body, hands over as much data as the target element has in data attributes. * loads based on data-project-path and data-iid more data about an MR from the API and sets it on the popover */ -const handleIssuablePopoverMount = ({ apolloProvider, projectPath, title, iid }) => ({ - target, -}) => { +const handleIssuablePopoverMount = ({ + apolloProvider, + projectPath, + title, + iid, + referenceType, +}) => ({ target }) => { // Add listener to actually remove it again target.addEventListener('mouseleave', handleIssuablePopoverMouseOut); renderFn = setTimeout(() => { - const MRPopoverComponent = Vue.extend(MRPopover); - renderedPopover = new MRPopoverComponent({ + const PopoverComponent = Vue.extend(componentsByReferenceType[referenceType]); + renderedPopover = new PopoverComponent({ propsData: { target, projectPath, - mergeRequestIID: iid, - mergeRequestTitle: title, + iid, + cachedTitle: title, }, apolloProvider, }); @@ -54,13 +64,13 @@ export default (elements) => { const listenerAddedAttr = 'data-popover-listener-added'; elements.forEach((el) => { - const { projectPath, iid } = el.dataset; + const { projectPath, iid, referenceType } = el.dataset; const title = el.dataset.mrTitle || el.title; - if (!el.getAttribute(listenerAddedAttr) && projectPath && title && iid) { + if (!el.getAttribute(listenerAddedAttr) && projectPath && title && iid && referenceType) { el.addEventListener( 'mouseenter', - handleIssuablePopoverMount({ apolloProvider, projectPath, title, iid }), + handleIssuablePopoverMount({ apolloProvider, projectPath, title, iid, referenceType }), ); el.setAttribute(listenerAddedAttr, true); } diff --git a/app/assets/javascripts/issuable/popover/queries/issue.query.graphql b/app/assets/javascripts/issuable/popover/queries/issue.query.graphql new file mode 100644 index 00000000000..47a62e2b6ea --- /dev/null +++ b/app/assets/javascripts/issuable/popover/queries/issue.query.graphql @@ -0,0 +1,11 @@ +query issue($projectPath: ID!, $iid: String!) { + project(fullPath: $projectPath) { + id + issue(iid: $iid) { + id + title + createdAt + state + } + } +} diff --git a/app/assets/javascripts/issuable/popover/queries/merge_request.query.graphql b/app/assets/javascripts/issuable/popover/queries/merge_request.query.graphql index b3e5d89d495..7cd344c1d5e 100644 --- a/app/assets/javascripts/issuable/popover/queries/merge_request.query.graphql +++ b/app/assets/javascripts/issuable/popover/queries/merge_request.query.graphql @@ -1,7 +1,7 @@ -query mergeRequest($projectPath: ID!, $mergeRequestIID: String!) { +query mergeRequest($projectPath: ID!, $iid: String!) { project(fullPath: $projectPath) { id - mergeRequest(iid: $mergeRequestIID) { + mergeRequest(iid: $iid) { id title createdAt |