Commit 2059e9f5 authored by Clement Ho's avatar Clement Ho

Merge branch 'fl-gitlab-ui-cicd' into 'master'

Updates pipeline code to use gitlab-ui

See merge request gitlab-org/gitlab-ce!22999
parents 63b4b4b2 f1e35e7e
<script> <script>
import $ from 'jquery'; import { GlTooltipDirective, GlButton } from '@gitlab-org/gitlab-ui';
import axios from '~/lib/utils/axios_utils'; import axios from '~/lib/utils/axios_utils';
import { dasherize } from '~/lib/utils/text_utility'; import { dasherize } from '~/lib/utils/text_utility';
import { __ } from '~/locale'; import { __ } from '~/locale';
import createFlash from '~/flash'; import createFlash from '~/flash';
import tooltip from '~/vue_shared/directives/tooltip';
import Icon from '~/vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
/** /**
...@@ -20,23 +19,20 @@ import Icon from '~/vue_shared/components/icon.vue'; ...@@ -20,23 +19,20 @@ import Icon from '~/vue_shared/components/icon.vue';
export default { export default {
components: { components: {
Icon, Icon,
GlButton,
}, },
directives: { directives: {
tooltip, GlTooltip: GlTooltipDirective,
}, },
props: { props: {
tooltipText: { tooltipText: {
type: String, type: String,
required: true, required: true,
}, },
link: { link: {
type: String, type: String,
required: true, required: true,
}, },
actionIcon: { actionIcon: {
type: String, type: String,
required: true, required: true,
...@@ -47,7 +43,6 @@ export default { ...@@ -47,7 +43,6 @@ export default {
isDisabled: false, isDisabled: false,
}; };
}, },
computed: { computed: {
cssClass() { cssClass() {
const actionIconDash = dasherize(this.actionIcon); const actionIconDash = dasherize(this.actionIcon);
...@@ -62,8 +57,7 @@ export default { ...@@ -62,8 +57,7 @@ export default {
* *
*/ */
onClickAction() { onClickAction() {
$(this.$el).tooltip('hide'); this.$root.$emit('bv::hide::tooltip', `js-ci-action-${this.link}`);
this.isDisabled = true; this.isDisabled = true;
axios axios
...@@ -82,18 +76,16 @@ export default { ...@@ -82,18 +76,16 @@ export default {
}; };
</script> </script>
<template> <template>
<button <gl-button
v-tooltip :id="`js-ci-action-${link}`"
v-gl-tooltip="{ boundary: 'viewport' }"
:title="tooltipText" :title="tooltipText"
:class="cssClass" :class="cssClass"
:disabled="isDisabled" :disabled="isDisabled"
type="button"
class="js-ci-action btn btn-blank class="js-ci-action btn btn-blank
btn-transparent ci-action-icon-container ci-action-icon-wrapper" btn-transparent ci-action-icon-container ci-action-icon-wrapper"
data-container="body"
data-boundary="viewport"
@click="onClickAction" @click="onClickAction"
> >
<icon :name="actionIcon"/> <icon :name="actionIcon"/>
</button> </gl-button>
</template> </template>
<script> <script>
import $ from 'jquery'; import $ from 'jquery';
import { GlTooltipDirective } from '@gitlab-org/gitlab-ui';
import CiIcon from '~/vue_shared/components/ci_icon.vue'; import CiIcon from '~/vue_shared/components/ci_icon.vue';
import JobItem from './job_item.vue'; import JobItem from './job_item.vue';
import tooltip from '../../../vue_shared/directives/tooltip';
/** /**
* Renders the dropdown for the pipeline graph. * Renders the dropdown for the pipeline graph.
...@@ -12,32 +12,27 @@ import tooltip from '../../../vue_shared/directives/tooltip'; ...@@ -12,32 +12,27 @@ import tooltip from '../../../vue_shared/directives/tooltip';
*/ */
export default { export default {
directives: { directives: {
tooltip, GlTooltip: GlTooltipDirective,
}, },
components: { components: {
JobItem, JobItem,
CiIcon, CiIcon,
}, },
props: { props: {
group: { group: {
type: Object, type: Object,
required: true, required: true,
}, },
}, },
computed: { computed: {
tooltipText() { tooltipText() {
const { name, status } = this.group; const { name, status } = this.group;
return `${name} - ${status.label}`; return `${name} - ${status.label}`;
}, },
}, },
mounted() { mounted() {
this.stopDropdownClickPropagation(); this.stopDropdownClickPropagation();
}, },
methods: { methods: {
/** /**
* When the user right clicks or cmd/ctrl + click in the group name or the action icon * When the user right clicks or cmd/ctrl + click in the group name or the action icon
...@@ -65,12 +60,10 @@ export default { ...@@ -65,12 +60,10 @@ export default {
<template> <template>
<div class="ci-job-dropdown-container dropdown dropright"> <div class="ci-job-dropdown-container dropdown dropright">
<button <button
v-tooltip v-gl-tooltip.hover="{ boundary: 'viewport' }"
:title="tooltipText" :title="tooltipText"
type="button" type="button"
data-toggle="dropdown" data-toggle="dropdown"
data-container="body"
data-boundary="viewport"
data-display="static" data-display="static"
class="dropdown-menu-toggle build-content" class="dropdown-menu-toggle build-content"
> >
......
<script> <script>
import ActionComponent from './action_component.vue'; import ActionComponent from './action_component.vue';
import JobNameComponent from './job_name_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 { sprintf } from '~/locale';
import delayedJobMixin from '~/jobs/mixins/delayed_job_mixin'; import delayedJobMixin from '~/jobs/mixins/delayed_job_mixin';
...@@ -34,9 +34,10 @@ export default { ...@@ -34,9 +34,10 @@ export default {
components: { components: {
ActionComponent, ActionComponent,
JobNameComponent, JobNameComponent,
GlLink,
}, },
directives: { directives: {
tooltip, GlTooltip: GlTooltipDirective,
}, },
mixins: [delayedJobMixin], mixins: [delayedJobMixin],
props: { props: {
...@@ -55,7 +56,6 @@ export default { ...@@ -55,7 +56,6 @@ export default {
default: Infinity, default: Infinity,
}, },
}, },
computed: { computed: {
status() { status() {
return this.job && this.job.status ? this.job.status : {}; return this.job && this.job.status ? this.job.status : {};
...@@ -88,7 +88,6 @@ export default { ...@@ -88,7 +88,6 @@ export default {
tooltipBoundary() { tooltipBoundary() {
return this.dropdownLength < 5 ? 'viewport' : null; return this.dropdownLength < 5 ? 'viewport' : null;
}, },
/** /**
* Verifies if the provided job has an action path * Verifies if the provided job has an action path
* *
...@@ -98,7 +97,6 @@ export default { ...@@ -98,7 +97,6 @@ export default {
return this.job.status && this.job.status.action && this.job.status.action.path; return this.job.status && this.job.status.action && this.job.status.action.path;
}, },
}, },
methods: { methods: {
pipelineActionRequestComplete() { pipelineActionRequestComplete() {
this.$emit('pipelineActionRequestComplete'); this.$emit('pipelineActionRequestComplete');
...@@ -108,30 +106,26 @@ export default { ...@@ -108,30 +106,26 @@ export default {
</script> </script>
<template> <template>
<div class="ci-job-component"> <div class="ci-job-component">
<a <gl-link
v-if="status.has_details" v-if="status.has_details"
v-tooltip v-gl-tooltip="{ boundary: tooltipBoundary }"
:href="status.details_path" :href="status.details_path"
:title="tooltipText" :title="tooltipText"
:class="cssClassJobName" :class="cssClassJobName"
:data-boundary="tooltipBoundary"
data-container="body"
class="js-pipeline-graph-job-link" class="js-pipeline-graph-job-link"
> >
<job-name-component <job-name-component
:name="job.name" :name="job.name"
:status="job.status" :status="job.status"
/> />
</a> </gl-link>
<div <div
v-else v-else
v-tooltip v-gl-tooltip
:title="tooltipText" :title="tooltipText"
:class="cssClassJobName" :class="cssClassJobName"
class="js-job-component-tooltip non-details-job-component" class="js-job-component-tooltip non-details-job-component"
data-container="body"
> >
<job-name-component <job-name-component
......
...@@ -13,34 +13,28 @@ export default { ...@@ -13,34 +13,28 @@ export default {
type: String, type: String,
required: true, required: true,
}, },
groups: { groups: {
type: Array, type: Array,
required: true, required: true,
}, },
isFirstColumn: { isFirstColumn: {
type: Boolean, type: Boolean,
required: false, required: false,
default: false, default: false,
}, },
stageConnectorClass: { stageConnectorClass: {
type: String, type: String,
required: false, required: false,
default: '', default: '',
}, },
}, },
methods: { methods: {
groupId(group) { groupId(group) {
return `ci-badge-${_.escape(group.name)}`; return `ci-badge-${_.escape(group.name)}`;
}, },
buildConnnectorClass(index) { buildConnnectorClass(index) {
return index === 0 && !this.isFirstColumn ? 'left-connector' : ''; return index === 0 && !this.isFirstColumn ? 'left-connector' : '';
}, },
pipelineActionRequestComplete() { pipelineActionRequestComplete() {
this.$emit('refreshPipelineGraph'); this.$emit('refreshPipelineGraph');
}, },
...@@ -50,7 +44,8 @@ export default { ...@@ -50,7 +44,8 @@ export default {
<template> <template>
<li <li
:class="stageConnectorClass" :class="stageConnectorClass"
class="stage-column"> class="stage-column"
>
<div class="stage-name"> <div class="stage-name">
{{ title }} {{ title }}
</div> </div>
...@@ -78,7 +73,6 @@ export default { ...@@ -78,7 +73,6 @@ export default {
:group="group" :group="group"
@pipelineActionRequestComplete="pipelineActionRequestComplete" @pipelineActionRequestComplete="pipelineActionRequestComplete"
/> />
</li> </li>
</ul> </ul>
</div> </div>
......
...@@ -308,7 +308,8 @@ export default { ...@@ -308,7 +308,8 @@ export default {
<div <div
v-for="(stage, index) in pipeline.details.stages" v-for="(stage, index) in pipeline.details.stages"
:key="index" :key="index"
class="stage-container dropdown js-mini-pipeline-graph"> class="stage-container dropdown js-mini-pipeline-graph"
>
<pipeline-stage <pipeline-stage
:type="$options.pipelinesTable" :type="$options.pipelinesTable"
:stage="stage" :stage="stage"
......
...@@ -13,14 +13,13 @@ ...@@ -13,14 +13,13 @@
*/ */
import $ from 'jquery'; import $ from 'jquery';
import { GlLoadingIcon } from '@gitlab-org/gitlab-ui'; import { GlLoadingIcon, GlTooltipDirective } from '@gitlab-org/gitlab-ui';
import { __ } from '../../locale'; import { __ } from '../../locale';
import Flash from '../../flash'; import Flash from '../../flash';
import axios from '../../lib/utils/axios_utils'; import axios from '../../lib/utils/axios_utils';
import eventHub from '../event_hub'; import eventHub from '../event_hub';
import Icon from '../../vue_shared/components/icon.vue'; import Icon from '../../vue_shared/components/icon.vue';
import JobItem from './graph/job_item.vue'; import JobItem from './graph/job_item.vue';
import tooltip from '../../vue_shared/directives/tooltip';
import { PIPELINES_TABLE } from '../constants'; import { PIPELINES_TABLE } from '../constants';
export default { export default {
...@@ -31,7 +30,7 @@ export default { ...@@ -31,7 +30,7 @@ export default {
}, },
directives: { directives: {
tooltip, GlTooltip: GlTooltipDirective,
}, },
props: { props: {
...@@ -159,11 +158,10 @@ export default { ...@@ -159,11 +158,10 @@ export default {
<button <button
id="stageDropdown" id="stageDropdown"
ref="dropdown" ref="dropdown"
v-tooltip v-gl-tooltip.hover
:class="triggerButtonClass" :class="triggerButtonClass"
:title="stage.title" :title="stage.title"
class="mini-pipeline-graph-dropdown-toggle js-builds-dropdown-button" class="mini-pipeline-graph-dropdown-toggle js-builds-dropdown-button"
data-placement="top"
data-toggle="dropdown" data-toggle="dropdown"
data-display="static" data-display="static"
type="button" type="button"
......
...@@ -140,14 +140,12 @@ describe('pipeline graph job item', () => { ...@@ -140,14 +140,12 @@ describe('pipeline graph job item', () => {
}); });
describe('tooltip placement', () => { describe('tooltip placement', () => {
const tooltipBoundary = 'a[data-boundary="viewport"]';
it('does not set tooltip boundary by default', () => { it('does not set tooltip boundary by default', () => {
component = mountComponent(JobComponent, { component = mountComponent(JobComponent, {
job: mockJob, job: mockJob,
}); });
expect(component.$el.querySelector(tooltipBoundary)).toBeNull(); expect(component.tooltipBoundary).toBeNull();
}); });
it('sets tooltip boundary to viewport for small dropdowns', () => { it('sets tooltip boundary to viewport for small dropdowns', () => {
...@@ -156,7 +154,7 @@ describe('pipeline graph job item', () => { ...@@ -156,7 +154,7 @@ describe('pipeline graph job item', () => {
dropdownLength: 1, dropdownLength: 1,
}); });
expect(component.$el.querySelector(tooltipBoundary)).not.toBeNull(); expect(component.tooltipBoundary).toEqual('viewport');
}); });
it('does not set tooltip boundary for large lists', () => { it('does not set tooltip boundary for large lists', () => {
...@@ -165,7 +163,7 @@ describe('pipeline graph job item', () => { ...@@ -165,7 +163,7 @@ describe('pipeline graph job item', () => {
dropdownLength: 7, dropdownLength: 7,
}); });
expect(component.$el.querySelector(tooltipBoundary)).toBeNull(); expect(component.tooltipBoundary).toBeNull();
}); });
}); });
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment