Use gitlab-ui in jobs and pipelines

5 files changed, 67 insertions, 51 deletions

diff --git a/app/assets/javascripts/pipelines/components/empty_state.vue b/app/assets/javascripts/pipelines/components/empty_state.vue
index c5a45afc634..8a0259ed5a5 100644
--- a/app/assets/javascripts/pipelines/components/empty_state.vue
+++ b/app/assets/javascripts/pipelines/components/empty_state.vue
@@ -1,6 +1,11 @@
 <script>
+import { GlButton } from '@gitlab-org/gitlab-ui';
+
 export default {
   name: 'PipelinesEmptyState',
+  components: {
+    GlButton,
+  },
   props: {
     helpPagePath: {
       type: String,
@@ -41,12 +46,13 @@ export default {
           </p>
 
           <div class="text-center">
-            <a
+            <gl-button
               :href="helpPagePath"
-              class="btn btn-primary js-get-started-pipelines"
+              variant="primary"
+              class="js-get-started-pipelines"
             >
               {{ s__('Pipelines|Get started with Pipelines') }}
-            </a>
+            </gl-button>
           </div>
         </template>
 
diff --git a/app/assets/javascripts/pipelines/components/nav_controls.vue b/app/assets/javascripts/pipelines/components/nav_controls.vue
index efb80d3a3c0..0911acbb131 100644
--- a/app/assets/javascripts/pipelines/components/nav_controls.vue
+++ b/app/assets/javascripts/pipelines/components/nav_controls.vue
@@ -1,10 +1,13 @@
 <script>
+import { GlLink, GlButton } from '@gitlab-org/gitlab-ui';
 import LoadingButton from '../../vue_shared/components/loading_button.vue';
 
 export default {
   name: 'PipelineNavControls',
   components: {
     LoadingButton,
+    GlLink,
+    GlButton,
   },
   props: {
     newPipelinePath: {
@@ -40,28 +43,29 @@ export default {
 </script>
 <template>
   <div class="nav-controls">
-    <a
+    <gl-button
       v-if="newPipelinePath"
       :href="newPipelinePath"
-      class="btn btn-success js-run-pipeline"
+      variant="success"
+      class="js-run-pipeline"
     >
       {{ s__('Pipelines|Run Pipeline') }}
-    </a>
+    </gl-button>
 
     <loading-button
       v-if="resetCachePath"
       :loading="isResetCacheButtonLoading"
       :label="s__('Pipelines|Clear Runner Caches')"
-      class="btn btn-default js-clear-cache"
+      class="js-clear-cache"
       @click="onClickResetCache"
     />
 
-    <a
+    <gl-button
       v-if="ciLintPath"
       :href="ciLintPath"
-      class="btn btn-default js-ci-lint"
+      class="js-ci-lint"
     >
       {{ s__('Pipelines|CI Lint') }}
-    </a>
+    </gl-button>
   </div>
 </template>
diff --git a/app/assets/javascripts/pipelines/components/pipeline_url.vue b/app/assets/javascripts/pipelines/components/pipeline_url.vue
index 40df07650c9..be4b37f3c8c 100644
--- a/app/assets/javascripts/pipelines/components/pipeline_url.vue
+++ b/app/assets/javascripts/pipelines/components/pipeline_url.vue
@@ -1,14 +1,15 @@
 <script>
-import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
-import tooltip from '../../vue_shared/directives/tooltip';
-import popover from '../../vue_shared/directives/popover';
+import { GlLink, GlTooltipDirective } from '@gitlab-org/gitlab-ui';
+import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
+import popover from '~/vue_shared/directives/popover';
 
 export default {
   components: {
-    userAvatarLink,
+    UserAvatarLink,
+    GlLink,
   },
   directives: {
-    tooltip,
+    GlTooltip: GlTooltipDirective,
     popover,
   },
   props: {
@@ -47,11 +48,12 @@ export default {
 </script>
 <template>
   <div class="table-section section-15 d-none d-sm-none d-md-block pipeline-tags">
-    <a
+    <gl-link
       :href="pipeline.path"
-      class="js-pipeline-url-link">
+      class="js-pipeline-url-link"
+    >
       <span class="pipeline-id">#{{ pipeline.id }}</span>
-    </a>
+    </gl-link>
     <span>by</span>
     <user-avatar-link
       v-if="user"
@@ -68,36 +70,41 @@ export default {
     <div class="label-container">
       <span
         v-if="pipeline.flags.latest"
-        v-tooltip
+        v-gl-tooltip
         class="js-pipeline-url-latest badge badge-success"
-        title="Latest pipeline for this branch">
+        title="Latest pipeline for this branch"
+      >
         latest
       </span>
       <span
         v-if="pipeline.flags.yaml_errors"
-        v-tooltip
+        v-gl-tooltip
         :title="pipeline.yaml_errors"
-        class="js-pipeline-url-yaml badge badge-danger">
+        class="js-pipeline-url-yaml badge badge-danger"
+      >
         yaml invalid
       </span>
       <span
         v-if="pipeline.flags.failure_reason"
-        v-tooltip
+        v-gl-tooltip
         :title="pipeline.failure_reason"
-        class="js-pipeline-url-failure badge badge-danger">
+        class="js-pipeline-url-failure badge badge-danger"
+      >
         error
       </span>
-      <a
+      <gl-link
         v-if="pipeline.flags.auto_devops"
         v-popover="popoverOptions"
         tabindex="0"
         class="js-pipeline-url-autodevops badge badge-info autodevops-badge"
-        role="button">
+        role="button"
+      >
         Auto DevOps
-      </a>
+      </gl-link>
       <span
         v-if="pipeline.flags.stuck"
-        class="js-pipeline-url-stuck badge badge-warning">
+        class="js-pipeline-url-stuck badge badge-warning"
+      >
         stuck
       </span>
     </div>
diff --git a/app/assets/javascripts/pipelines/components/pipelines_actions.vue b/app/assets/javascripts/pipelines/components/pipelines_actions.vue
index cb47704ca26..811495c45a9 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_actions.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_actions.vue
@@ -1,18 +1,18 @@
 <script>
+import { GlButton, GlTooltipDirective, GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 import { s__, sprintf } from '~/locale';
+import GlCountdown from '~/vue_shared/components/gl_countdown.vue';
 import eventHub from '../event_hub';
 import Icon from '../../vue_shared/components/icon.vue';
-import tooltip from '../../vue_shared/directives/tooltip';
-import GlCountdown from '~/vue_shared/components/gl_countdown.vue';
-import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 
 export default {
   directives: {
-    tooltip,
+    GlTooltip: GlTooltipDirective,
   },
   components: {
     Icon,
     GlCountdown,
+    GlButton,
     GlLoadingIcon,
   },
   props: {
@@ -59,14 +59,12 @@ export default {
 </script>
 <template>
   <div class="btn-group">
-    <button
-      v-tooltip
+    <gl-button
+      v-gl-tooltip
       :disabled="isLoading"
-      type="button"
       class="dropdown-new btn btn-default js-pipeline-dropdown-manual-actions"
       title="Manual job"
       data-toggle="dropdown"
-      data-placement="top"
       aria-label="Manual job"
     >
       <icon
@@ -78,17 +76,16 @@ export default {
         aria-hidden="true">
       </i>
       <gl-loading-icon v-if="isLoading" />
-    </button>
+    </gl-button>
 
     <ul class="dropdown-menu dropdown-menu-right">
       <li
         v-for="action in actions"
         :key="action.path"
       >
-        <button
+        <gl-button
           :class="{ disabled: isActionDisabled(action) }"
           :disabled="isActionDisabled(action)"
-          type="button"
           class="js-pipeline-action-link no-btn btn"
           @click="onClickAction(action)"
         >
@@ -100,7 +97,7 @@ export default {
             <icon name="clock" />
             <gl-countdown :end-date-string="action.scheduled_at" />
           </span>
-        </button>
+        </gl-button>
       </li>
     </ul>
   </div>
diff --git a/app/assets/javascripts/pipelines/components/pipelines_artifacts.vue b/app/assets/javascripts/pipelines/components/pipelines_artifacts.vue
index e0f0434e03d..2abb24b87b6 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_artifacts.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_artifacts.vue
@@ -1,13 +1,15 @@
 <script>
-import tooltip from '../../vue_shared/directives/tooltip';
-import Icon from '../../vue_shared/components/icon.vue';
+import { GlLink, GlButton, GlTooltipDirective } from '@gitlab-org/gitlab-ui';
+import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
   directives: {
-    tooltip,
+    GlTooltip: GlTooltipDirective,
   },
   components: {
     Icon,
+    GlLink,
+    GlButton,
   },
   props: {
     artifacts: {
@@ -22,11 +24,10 @@ export default {
     class="btn-group"
     role="group"
   >
-    <button
-      v-tooltip
-      class="dropdown-toggle btn btn-default build-artifacts js-pipeline-dropdown-download"
+    <gl-button
+      v-gl-tooltip
+      class="dropdown-toggle build-artifacts js-pipeline-dropdown-download"
       title="Artifacts"
-      data-placement="top"
       data-toggle="dropdown"
       aria-label="Artifacts"
     >
@@ -36,18 +37,19 @@ export default {
         aria-hidden="true"
       >
       </i>
-    </button>
+    </gl-button>
     <ul class="dropdown-menu dropdown-menu-right">
       <li
         v-for="(artifact, i) in artifacts"
-        :key="i">
-        <a
+        :key="i"
+      >
+        <gl-link
           :href="artifact.path"
           rel="nofollow"
           download
         >
           Download {{ artifact.name }} artifacts
-        </a>
+        </gl-link>
       </li>
     </ul>
   </div>