diff options
7 files changed, 28 insertions, 58 deletions
diff --git a/app/assets/javascripts/pipelines/components/graph/action_component.vue b/app/assets/javascripts/pipelines/components/graph/action_component.vue index b82e28a0735..f6a97236ebf 100644 --- a/app/assets/javascripts/pipelines/components/graph/action_component.vue +++ b/app/assets/javascripts/pipelines/components/graph/action_component.vue @@ -1,10 +1,9 @@ <script> -import $ from 'jquery'; +import { GlTooltipDirective, GlButton } from '@gitlab-org/gitlab-ui'; import axios from '~/lib/utils/axios_utils'; import { dasherize } from '~/lib/utils/text_utility'; import { __ } from '~/locale'; import createFlash from '~/flash'; -import tooltip from '~/vue_shared/directives/tooltip'; import Icon from '~/vue_shared/components/icon.vue'; /** @@ -20,23 +19,20 @@ import Icon from '~/vue_shared/components/icon.vue'; export default { components: { Icon, + GlButton, }, - directives: { - tooltip, + GlTooltip: GlTooltipDirective, }, - props: { tooltipText: { type: String, required: true, }, - link: { type: String, required: true, }, - actionIcon: { type: String, required: true, @@ -47,7 +43,6 @@ export default { isDisabled: false, }; }, - computed: { cssClass() { const actionIconDash = dasherize(this.actionIcon); @@ -62,8 +57,7 @@ export default { * */ onClickAction() { - $(this.$el).tooltip('hide'); - + this.$root.$emit('bv::hide::tooltip', `js-ci-action-${this.link}`); this.isDisabled = true; axios @@ -82,18 +76,16 @@ export default { }; </script> <template> - <button - v-tooltip + <gl-button + :id="`js-ci-action-${link}`" + v-gl-tooltip="{ boundary: 'viewport' }" :title="tooltipText" :class="cssClass" :disabled="isDisabled" - type="button" class="js-ci-action btn btn-blank btn-transparent ci-action-icon-container ci-action-icon-wrapper" - data-container="body" - data-boundary="viewport" @click="onClickAction" > <icon :name="actionIcon"/> - </button> + </gl-button> </template> diff --git a/app/assets/javascripts/pipelines/components/graph/job_group_dropdown.vue b/app/assets/javascripts/pipelines/components/graph/job_group_dropdown.vue index 34bada533df..2c3cb1959b5 100644 --- a/app/assets/javascripts/pipelines/components/graph/job_group_dropdown.vue +++ b/app/assets/javascripts/pipelines/components/graph/job_group_dropdown.vue @@ -1,8 +1,8 @@ <script> import $ from 'jquery'; +import { GlTooltipDirective } from '@gitlab-org/gitlab-ui'; import CiIcon from '~/vue_shared/components/ci_icon.vue'; import JobItem from './job_item.vue'; -import tooltip from '../../../vue_shared/directives/tooltip'; /** * Renders the dropdown for the pipeline graph. @@ -12,32 +12,27 @@ import tooltip from '../../../vue_shared/directives/tooltip'; */ export default { directives: { - tooltip, + GlTooltip: GlTooltipDirective, }, - components: { JobItem, CiIcon, }, - props: { group: { type: Object, required: true, }, }, - computed: { tooltipText() { const { name, status } = this.group; return `${name} - ${status.label}`; }, }, - mounted() { this.stopDropdownClickPropagation(); }, - methods: { /** * When the user right clicks or cmd/ctrl + click in the group name or the action icon @@ -65,12 +60,10 @@ export default { <template> <div class="ci-job-dropdown-container dropdown dropright"> <button - v-tooltip + v-gl-tooltip.hover="{ boundary: 'viewport' }" :title="tooltipText" type="button" data-toggle="dropdown" - data-container="body" - data-boundary="viewport" data-display="static" class="dropdown-menu-toggle build-content" > diff --git a/app/assets/javascripts/pipelines/components/graph/job_item.vue b/app/assets/javascripts/pipelines/components/graph/job_item.vue index 7cdde8a53b3..182849c6455 100644 --- a/app/assets/javascripts/pipelines/components/graph/job_item.vue +++ b/app/assets/javascripts/pipelines/components/graph/job_item.vue @@ -1,7 +1,7 @@ <script> import ActionComponent from './action_component.vue'; import JobNameComponent from './job_name_component.vue'; -import tooltip from '../../../vue_shared/directives/tooltip'; +import { GlTooltipDirective, GlLink } from '@gitlab-org/gitlab-ui'; import { sprintf } from '~/locale'; import delayedJobMixin from '~/jobs/mixins/delayed_job_mixin'; @@ -34,9 +34,10 @@ export default { components: { ActionComponent, JobNameComponent, + GlLink, }, directives: { - tooltip, + GlTooltip: GlTooltipDirective, }, mixins: [delayedJobMixin], props: { @@ -55,7 +56,6 @@ export default { default: Infinity, }, }, - computed: { status() { return this.job && this.job.status ? this.job.status : {}; @@ -88,7 +88,6 @@ export default { tooltipBoundary() { return this.dropdownLength < 5 ? 'viewport' : null; }, - /** * Verifies if the provided job has an action path * @@ -98,7 +97,6 @@ export default { return this.job.status && this.job.status.action && this.job.status.action.path; }, }, - methods: { pipelineActionRequestComplete() { this.$emit('pipelineActionRequestComplete'); @@ -108,30 +106,26 @@ export default { </script> <template> <div class="ci-job-component"> - <a + <gl-link v-if="status.has_details" - v-tooltip + v-gl-tooltip="{ boundary: tooltipBoundary }" :href="status.details_path" :title="tooltipText" :class="cssClassJobName" - :data-boundary="tooltipBoundary" - data-container="body" class="js-pipeline-graph-job-link" > - <job-name-component :name="job.name" :status="job.status" /> - </a> + </gl-link> <div v-else - v-tooltip + v-gl-tooltip :title="tooltipText" :class="cssClassJobName" class="js-job-component-tooltip non-details-job-component" - data-container="body" > <job-name-component diff --git a/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue b/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue index efbab51d200..d5f931943d5 100644 --- a/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue +++ b/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue @@ -13,34 +13,28 @@ export default { type: String, required: true, }, - groups: { type: Array, required: true, }, - isFirstColumn: { type: Boolean, required: false, default: false, }, - stageConnectorClass: { type: String, required: false, default: '', }, }, - methods: { groupId(group) { return `ci-badge-${_.escape(group.name)}`; }, - buildConnnectorClass(index) { return index === 0 && !this.isFirstColumn ? 'left-connector' : ''; }, - pipelineActionRequestComplete() { this.$emit('refreshPipelineGraph'); }, @@ -50,7 +44,8 @@ export default { <template> <li :class="stageConnectorClass" - class="stage-column"> + class="stage-column" + > <div class="stage-name"> {{ title }} </div> @@ -78,7 +73,6 @@ export default { :group="group" @pipelineActionRequestComplete="pipelineActionRequestComplete" /> - </li> </ul> </div> diff --git a/app/assets/javascripts/pipelines/components/pipelines_table_row.vue b/app/assets/javascripts/pipelines/components/pipelines_table_row.vue index 026d533d10f..fd674a8d447 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_table_row.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_table_row.vue @@ -308,7 +308,8 @@ export default { <div v-for="(stage, index) in pipeline.details.stages" :key="index" - class="stage-container dropdown js-mini-pipeline-graph"> + class="stage-container dropdown js-mini-pipeline-graph" + > <pipeline-stage :type="$options.pipelinesTable" :stage="stage" diff --git a/app/assets/javascripts/pipelines/components/stage.vue b/app/assets/javascripts/pipelines/components/stage.vue index 3df8f7a6da6..587c4ffa45c 100644 --- a/app/assets/javascripts/pipelines/components/stage.vue +++ b/app/assets/javascripts/pipelines/components/stage.vue @@ -13,14 +13,13 @@ */ import $ from 'jquery'; -import { GlLoadingIcon } from '@gitlab-org/gitlab-ui'; +import { GlLoadingIcon, GlTooltipDirective } from '@gitlab-org/gitlab-ui'; import { __ } from '../../locale'; import Flash from '../../flash'; import axios from '../../lib/utils/axios_utils'; import eventHub from '../event_hub'; import Icon from '../../vue_shared/components/icon.vue'; import JobItem from './graph/job_item.vue'; -import tooltip from '../../vue_shared/directives/tooltip'; import { PIPELINES_TABLE } from '../constants'; export default { @@ -31,7 +30,7 @@ export default { }, directives: { - tooltip, + GlTooltip: GlTooltipDirective, }, props: { @@ -159,11 +158,10 @@ export default { <button id="stageDropdown" ref="dropdown" - v-tooltip + v-gl-tooltip.hover :class="triggerButtonClass" :title="stage.title" class="mini-pipeline-graph-dropdown-toggle js-builds-dropdown-button" - data-placement="top" data-toggle="dropdown" data-display="static" type="button" diff --git a/spec/javascripts/pipelines/graph/job_item_spec.js b/spec/javascripts/pipelines/graph/job_item_spec.js index 41b614cc95e..88e1789184d 100644 --- a/spec/javascripts/pipelines/graph/job_item_spec.js +++ b/spec/javascripts/pipelines/graph/job_item_spec.js @@ -140,14 +140,12 @@ describe('pipeline graph job item', () => { }); describe('tooltip placement', () => { - const tooltipBoundary = 'a[data-boundary="viewport"]'; - it('does not set tooltip boundary by default', () => { component = mountComponent(JobComponent, { job: mockJob, }); - expect(component.$el.querySelector(tooltipBoundary)).toBeNull(); + expect(component.tooltipBoundary).toBeNull(); }); it('sets tooltip boundary to viewport for small dropdowns', () => { @@ -156,7 +154,7 @@ describe('pipeline graph job item', () => { dropdownLength: 1, }); - expect(component.$el.querySelector(tooltipBoundary)).not.toBeNull(); + expect(component.tooltipBoundary).toEqual('viewport'); }); it('does not set tooltip boundary for large lists', () => { @@ -165,7 +163,7 @@ describe('pipeline graph job item', () => { dropdownLength: 7, }); - expect(component.$el.querySelector(tooltipBoundary)).toBeNull(); + expect(component.tooltipBoundary).toBeNull(); }); }); |