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

Updates pipeline code to use gitlab-ui

See merge request gitlab-org/gitlab-ce!22999

app/assets/javascripts/pipelines/components/graph/action_component.vue

 <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>

app/assets/javascripts/pipelines/components/graph/job_group_dropdown.vue

 <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"
     >

app/assets/javascripts/pipelines/components/graph/job_item.vue

 <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

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>

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"

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"

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();
     });
   });