diff --git a/app/assets/javascripts/ci/pipeline_details/graph/components/job_group_dropdown.vue b/app/assets/javascripts/ci/pipeline_details/graph/components/job_group_dropdown.vue index a624c5fdbd6..329c3ef3f26 100644 --- a/app/assets/javascripts/ci/pipeline_details/graph/components/job_group_dropdown.vue +++ b/app/assets/javascripts/ci/pipeline_details/graph/components/job_group_dropdown.vue @@ -2,13 +2,12 @@ import { GlBadge, GlDisclosureDropdown, - GlDisclosureDropdownItem, GlTooltipDirective, GlResizeObserverDirective, } from '@gitlab/ui'; import { GlBreakpointInstance } from '@gitlab/ui/dist/utils'; -import { sprintf } from '~/locale'; -import { JOB_DROPDOWN, SINGLE_JOB } from '../constants'; +import PipelineMiniGraphJobItem from '~/ci/pipeline_mini_graph/job_item.vue'; +import { JOB_DROPDOWN } from '../constants'; import JobItem from './job_item.vue'; /** @@ -22,7 +21,7 @@ export default { JobItem, GlBadge, GlDisclosureDropdown, - GlDisclosureDropdownItem, + PipelineMiniGraphJobItem, }, directives: { GlTooltip: GlTooltipDirective, @@ -51,7 +50,6 @@ export default { }, jobItemTypes: { jobDropdown: JOB_DROPDOWN, - singleJob: SINGLE_JOB, }, data() { return { @@ -63,8 +61,8 @@ export default { computedJobId() { return this.pipelineId > -1 ? `${this.group.name}-${this.pipelineId}` : ''; }, - jobStatusText() { - return this.jobItemTooltip(this.group); + dropdownTooltip() { + return !this.showTooltip ? this.group?.status?.tooltip || this.group?.status?.text : ''; }, placement() { // MR !49053: @@ -74,32 +72,8 @@ export default { // https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2615 return this.isMobile ? 'bottom-start' : 'right-start'; }, - moreActionsTooltip() { - return !this.showTooltip ? this.jobStatusText : ''; - }, }, methods: { - pipelineActionRequestComplete() { - this.$emit('pipelineActionRequestComplete'); - }, - jobItem(job) { - return { - text: job.name, - href: job.status?.detailsPath, - }; - }, - jobItemTooltip(job) { - const { tooltip: statusTooltip } = job.status; - const { text: statusText } = job.status; - - if (statusTooltip) { - if (this.isDelayedJob) { - return sprintf(statusTooltip, { remainingTime: job.remainingTime }); - } - return statusTooltip; - } - return statusText; - }, handleResize() { this.isMobile = GlBreakpointInstance.getBreakpointSize() === 'xs'; }, @@ -117,8 +91,7 @@ export default { :id="computedJobId" v-gl-resize-observer="handleResize" v-gl-tooltip.viewport.left="{ customClass: 'ci-job-component-tooltip' }" - :title="moreActionsTooltip" - class="ci-job-group-dropdown" + :title="dropdownTooltip" block fluid-width :placement="placement" @@ -141,26 +114,13 @@ export default { - - - - + diff --git a/app/assets/javascripts/ci/pipeline_mini_graph/job_item.vue b/app/assets/javascripts/ci/pipeline_mini_graph/job_item.vue index c8d130cbc15..9dde7d1a4f5 100644 --- a/app/assets/javascripts/ci/pipeline_mini_graph/job_item.vue +++ b/app/assets/javascripts/ci/pipeline_mini_graph/job_item.vue @@ -35,7 +35,7 @@ export default { }; }, status() { - return this.job.detailedStatus || {}; + return this.job.detailedStatus || this.job.status; }, tooltipText() { const statusTooltip = capitalizeFirstCharacter(this.status?.tooltip); @@ -49,7 +49,7 @@ export default { };