diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-06-20 14:10:13 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-06-20 14:10:13 +0300 |
commit | 0ea3fcec397b69815975647f5e2aa5fe944a8486 (patch) | |
tree | 7979381b89d26011bcf9bdc989a40fcc2f1ed4ff /app/assets/javascripts/mr_popover | |
parent | 72123183a20411a36d607d70b12d57c484394c8e (diff) |
Add latest changes from gitlab-org/gitlab@15-1-stable-eev15.1.0-rc42
Diffstat (limited to 'app/assets/javascripts/mr_popover')
4 files changed, 0 insertions, 214 deletions
diff --git a/app/assets/javascripts/mr_popover/components/mr_popover.vue b/app/assets/javascripts/mr_popover/components/mr_popover.vue deleted file mode 100644 index fef75b6d5d0..00000000000 --- a/app/assets/javascripts/mr_popover/components/mr_popover.vue +++ /dev/null @@ -1,115 +0,0 @@ -<script> -/* eslint-disable @gitlab/vue-require-i18n-strings */ -import { GlPopover, GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui'; -import CiIcon from '~/vue_shared/components/ci_icon.vue'; -import timeagoMixin from '~/vue_shared/mixins/timeago'; -import { mrStates, humanMRStates } from '../constants'; -import query from '../queries/merge_request.query.graphql'; - -export default { - // name: 'MRPopover' is a false positive: https://gitlab.com/gitlab-org/frontend/eslint-plugin-i18n/issues/25 - name: 'MRPopover', // eslint-disable-line @gitlab/require-i18n-strings - components: { - GlPopover, - GlSkeletonLoading, - CiIcon, - }, - mixins: [timeagoMixin], - props: { - target: { - type: HTMLAnchorElement, - required: true, - }, - projectPath: { - type: String, - required: true, - }, - mergeRequestIID: { - type: String, - required: true, - }, - mergeRequestTitle: { - type: String, - required: true, - }, - }, - data() { - return { - mergeRequest: {}, - }; - }, - computed: { - detailedStatus() { - return this.mergeRequest.headPipeline && this.mergeRequest.headPipeline.detailedStatus; - }, - formattedTime() { - return this.timeFormatted(this.mergeRequest.createdAt); - }, - statusBoxClass() { - switch (this.mergeRequest.state) { - case mrStates.merged: - return 'status-box-mr-merged'; - case mrStates.closed: - return 'status-box-closed'; - default: - return 'status-box-open'; - } - }, - stateHumanName() { - switch (this.mergeRequest.state) { - case mrStates.merged: - return humanMRStates.merged; - case mrStates.closed: - return humanMRStates.closed; - default: - return humanMRStates.open; - } - }, - title() { - return this.mergeRequest?.title || this.mergeRequestTitle; - }, - showDetails() { - return Object.keys(this.mergeRequest).length > 0; - }, - }, - apollo: { - mergeRequest: { - query, - update: (data) => data.project.mergeRequest, - variables() { - const { projectPath, mergeRequestIID } = this; - - return { - projectPath, - mergeRequestIID, - }; - }, - }, - }, -}; -</script> - -<template> - <gl-popover :target="target" boundary="viewport" placement="top" show> - <div class="mr-popover"> - <div v-if="$apollo.queries.mergeRequest.loading"> - <gl-skeleton-loading :lines="1" class="animation-container-small mt-1" /> - </div> - <div v-else-if="showDetails" class="d-flex align-items-center justify-content-between"> - <div class="d-inline-flex align-items-center"> - <div :class="`issuable-status-box status-box ${statusBoxClass}`"> - {{ stateHumanName }} - </div> - <span class="gl-text-secondary">Opened <time v-text="formattedTime"></time></span> - </div> - <ci-icon v-if="detailedStatus" :status="detailedStatus" /> - </div> - <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}` }} - </div> - <!-- eslint-enable @gitlab/vue-require-i18n-strings --> - </div> - </gl-popover> -</template> diff --git a/app/assets/javascripts/mr_popover/constants.js b/app/assets/javascripts/mr_popover/constants.js deleted file mode 100644 index 352bc635293..00000000000 --- a/app/assets/javascripts/mr_popover/constants.js +++ /dev/null @@ -1,13 +0,0 @@ -import { __ } from '~/locale'; - -export const mrStates = { - merged: 'merged', - closed: 'closed', - open: 'open', -}; - -export const humanMRStates = { - merged: __('Merged'), - closed: __('Closed'), - open: __('Open'), -}; diff --git a/app/assets/javascripts/mr_popover/index.js b/app/assets/javascripts/mr_popover/index.js deleted file mode 100644 index 714cf67e0bd..00000000000 --- a/app/assets/javascripts/mr_popover/index.js +++ /dev/null @@ -1,67 +0,0 @@ -import Vue from 'vue'; -import VueApollo from 'vue-apollo'; -import createDefaultClient from '~/lib/graphql'; -import MRPopover from './components/mr_popover.vue'; - -let renderedPopover; -let renderFn; - -const handleUserPopoverMouseOut = ({ target }) => { - target.removeEventListener('mouseleave', handleUserPopoverMouseOut); - - if (renderFn) { - clearTimeout(renderFn); - } - if (renderedPopover) { - renderedPopover.$destroy(); - renderedPopover = null; - } -}; - -/** - * 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 handleMRPopoverMount = ({ apolloProvider, projectPath, mrTitle, iid }) => ({ target }) => { - // Add listener to actually remove it again - target.addEventListener('mouseleave', handleUserPopoverMouseOut); - - renderFn = setTimeout(() => { - const MRPopoverComponent = Vue.extend(MRPopover); - renderedPopover = new MRPopoverComponent({ - propsData: { - target, - projectPath, - mergeRequestIID: iid, - mergeRequestTitle: mrTitle, - }, - apolloProvider, - }); - - renderedPopover.$mount(); - }, 200); // 200ms delay so not every mouseover triggers Popover + API Call -}; - -export default (elements) => { - const mrLinks = elements || [...document.querySelectorAll('.gfm-merge_request')]; - if (mrLinks.length > 0) { - Vue.use(VueApollo); - - const apolloProvider = new VueApollo({ - defaultClient: createDefaultClient(), - }); - const listenerAddedAttr = 'data-mr-listener-added'; - - mrLinks.forEach((el) => { - const { projectPath, mrTitle, iid } = el.dataset; - - if (!el.getAttribute(listenerAddedAttr) && projectPath && mrTitle && iid) { - el.addEventListener( - 'mouseenter', - handleMRPopoverMount({ apolloProvider, projectPath, mrTitle, iid }), - ); - el.setAttribute(listenerAddedAttr, true); - } - }); - } -}; diff --git a/app/assets/javascripts/mr_popover/queries/merge_request.query.graphql b/app/assets/javascripts/mr_popover/queries/merge_request.query.graphql deleted file mode 100644 index b3e5d89d495..00000000000 --- a/app/assets/javascripts/mr_popover/queries/merge_request.query.graphql +++ /dev/null @@ -1,19 +0,0 @@ -query mergeRequest($projectPath: ID!, $mergeRequestIID: String!) { - project(fullPath: $projectPath) { - id - mergeRequest(iid: $mergeRequestIID) { - id - title - createdAt - state - headPipeline { - id - detailedStatus { - id - icon - group - } - } - } - } -} |