Use gitlab-ui in jobs and pipelines

app/assets/javascripts/jobs/components/sidebar.vue

 <script>
 import _ from 'underscore';
 import { mapActions, mapState } from 'vuex';
+import { GlLink, GlButton } from '@gitlab-org/gitlab-ui';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
 import { timeIntervalInWords } from '~/lib/utils/datetime_utility';
 import Icon from '~/vue_shared/components/icon.vue';
@@ -21,6 +22,8 @@ export default {
     TriggerBlock,
     StagesDropdown,
     JobsContainer,
+    GlLink,
+    GlButton,
   },
   mixins: [timeagoMixin],
   props: {
@@ -115,7 +118,7 @@ export default {
           <strong class="inline prepend-top-8">
             {{ job.name }}
           </strong>
-          <a
+          <gl-link
             v-if="job.retry_path"
             :class="retryButtonClass"
             :href="job.retry_path"
@@ -123,8 +126,8 @@ export default {
             rel="nofollow"
           >
             {{ __('Retry') }}
-          </a>
-          <a
+          </gl-link>
+          <gl-link
             v-if="job.terminal_path"
             :href="job.terminal_path"
             class="js-terminal-link pull-right btn btn-primary
@@ -133,8 +136,8 @@ export default {
           >
             {{ __('Debug') }}
             <icon name="external-link" />
-          </a>
-          <button
+          </gl-link>
+          <gl-button
             :aria-label="__('Toggle Sidebar')"
             type="button"
             class="btn btn-blank gutter-toggle
@@ -146,20 +149,20 @@ export default {
               data-hidden="true"
               class="fa fa-angle-double-right"
             ></i>
-          </button>
+          </gl-button>
         </div>
         <div
           v-if="job.retry_path || job.new_issue_path"
           class="block retry-link"
         >
-          <a
+          <gl-link
             v-if="job.new_issue_path"
             :href="job.new_issue_path"
             class="js-new-issue btn btn-success btn-inverted"
           >
             {{ __('New issue') }}
-          </a>
-          <a
+          </gl-link>
+          <gl-link
             v-if="job.retry_path"
             :href="job.retry_path"
             class="js-retry-job btn btn-inverted-secondary"
@@ -167,7 +170,7 @@ export default {
             rel="nofollow"
           >
             {{ __('Retry') }}
-          </a>
+          </gl-link>
         </div>
         <div :class="{ block : renderBlock }">
           <p
@@ -177,9 +180,9 @@ export default {
             <span class="build-light-text">
               {{ __('Merge Request:') }}
             </span>
-            <a :href="job.merge_request.path">
+            <gl-link :href="job.merge_request.path">
               !{{ job.merge_request.iid }}
-            </a>
+            </gl-link>
           </p>
 
           <detail-row
@@ -244,14 +247,14 @@ export default {
             v-if="job.cancel_path"
             class="btn-group prepend-top-5"
             role="group">
-            <a
+            <gl-link
               :href="job.cancel_path"
               class="js-cancel-job btn btn-sm btn-default"
               data-method="post"
               rel="nofollow"
             >
               {{ __('Cancel') }}
-            </a>
+            </gl-link>
           </div>
         </div>
 

app/assets/javascripts/jobs/components/trigger_block.vue

 <script>
+import { GlButton } from '@gitlab-org/gitlab-ui';
+
 export default {
+  components: {
+    GlButton,
+  },
   props: {
     trigger: {
       type: Object,
@@ -41,15 +46,14 @@ export default {
     </p>
 
     <p v-if="hasVariables">
-      <button
+      <gl-button
         v-if="!areVariablesVisible"
         type="button"
         class="btn btn-default group js-reveal-variables"
         @click="revealVariables"
       >
         {{ __('Reveal Variables') }}
-      </button>
-
+      </gl-button>
     </p>
 
     <dl

app/assets/javascripts/pipelines/components/empty_state.vue

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

app/assets/javascripts/pipelines/components/nav_controls.vue

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

app/assets/javascripts/pipelines/components/pipeline_url.vue

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

app/assets/javascripts/pipelines/components/pipelines_actions.vue

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

app/assets/javascripts/pipelines/components/pipelines_artifacts.vue

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

changelogs/unreleased/51259-ci-cd-gitlab-ui-1.yml

+---
+title: Uses new gitlab-ui components in Jobs and Pipelines components
+merge_request:
+author:
+type: other