Uses gitlab-ui components in jobs components.

Removes old buttons,links and tooltips and uses
the new gitlab-ui components.

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

 <script>
+import { GlLink } from '@gitlab-org/gitlab-ui';
 import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
 
 export default {
   components: {
     TimeagoTooltip,
+    GlLink,
   },
   mixins: [timeagoMixin],
   props: {
@@ -53,16 +55,16 @@ export default {
       class="btn-group d-flex"
       role="group"
     >
-      <a
+      <gl-link
         v-if="artifact.keep_path"
         :href="artifact.keep_path"
         class="js-keep-artifacts btn btn-sm btn-default"
         data-method="post"
       >
         {{ s__('Job|Keep') }}
-      </a>
+      </gl-link>
 
-      <a
+      <gl-link
         v-if="artifact.download_path"
         :href="artifact.download_path"
         class="js-download-artifacts btn btn-sm btn-default"
@@ -70,15 +72,15 @@ export default {
         rel="nofollow"
       >
         {{ s__('Job|Download') }}
-      </a>
+      </gl-link>
 
-      <a
+      <gl-link
         v-if="artifact.browse_path"
         :href="artifact.browse_path"
         class="js-browse-artifacts btn btn-sm btn-default"
       >
         {{ s__('Job|Browse') }}
-      </a>
+      </gl-link>
     </div>
   </div>
 </template>

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

 <script>
+import { GlLink } from '@gitlab-org/gitlab-ui';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 
 export default {
   components: {
     ClipboardButton,
+    GlLink,
   },
   props: {
     commit: {
@@ -31,10 +33,10 @@ export default {
     <p>
       {{ __('Commit') }}
 
-      <a
+      <gl-link
         :href="commit.commit_path"
         class="js-commit-sha commit-sha link-commit"
-      >{{ commit.short_id }}</a>
+      >{{ commit.short_id }}</gl-link>
 
       <clipboard-button
         :text="commit.short_id"
@@ -42,11 +44,11 @@ export default {
         css-class="btn btn-clipboard btn-transparent"
       />
 
-      <a
+      <gl-link
         v-if="mergeRequest"
         :href="mergeRequest.path"
         class="js-link-commit link-commit"
-      >!{{ mergeRequest.iid }}</a>
+      >!{{ mergeRequest.iid }}</gl-link>
     </p>
 
     <p class="build-light-text append-bottom-0">

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

 <script>
+import { GlLink } from '@gitlab-org/gitlab-ui';
+
 export default {
+  components: {
+    GlLink,
+  },
   props: {
     illustrationPath: {
       type: String,
@@ -62,13 +67,13 @@ export default {
           v-if="action"
           class="text-center"
         >
-          <a
+          <gl-link
             :href="action.path"
             :data-method="action.method"
             class="js-job-empty-state-action btn btn-primary"
           >
             {{ action.button_title }}
-          </a>
+          </gl-link>
         </div>
       </div>
     </div>

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

 <script>
 import _ from 'underscore';
+import { GlLink } from '@gitlab-org/gitlab-ui';
 import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 
 export default {
   components: {
     TimeagoTooltip,
+    GlLink,
   },
   props: {
     user: {
@@ -29,9 +31,9 @@ export default {
     <div class="erased alert alert-warning">
       <template v-if="isErasedByUser">
         {{ s__("Job|Job has been erased by") }}
-        <a :href="user.web_url">
+        <gl-link :href="user.web_url">
           {{ user.username }}
-        </a>
+        </gl-link>
       </template>
       <template v-else>
         {{ s__("Job|Job has been erased") }}

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

 <script>
 import _ from 'underscore';
 import { mapGetters, mapState, mapActions } from 'vuex';
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 import { isScrolledToBottom } from '~/lib/utils/scroll_utils';
 import bp from '~/breakpoints';
 import CiHeader from '~/vue_shared/components/header_ci_component.vue';
@@ -23,6 +24,7 @@ export default {
     EmptyState,
     EnvironmentsBlock,
     ErasedBlock,
+    GlLoadingIcon,
     Log,
     LogTopBar,
     StuckBlock,

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

 <script>
+import { GlTooltipDirective, GlLink } from '@gitlab-org/gitlab-ui';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import Icon from '~/vue_shared/components/icon.vue';
-import tooltip from '~/vue_shared/directives/tooltip';
 
 export default {
   components: {
     CiIcon,
     Icon,
+    GlLink,
   },
   directives: {
-    tooltip,
+    GlTooltip: GlTooltipDirective,
   },
   props: {
     job: {
@@ -37,11 +38,10 @@ export default {
       active: isActive
     }"
   >
-    <a
-      v-tooltip
+    <gl-link
+      v-gl-tooltip
       :href="job.status.details_path"
       :title="tooltipText"
-      data-container="body"
       data-boundary="viewport"
       class="js-job-link"
     >
@@ -60,6 +60,6 @@ export default {
         name="retry"
         class="js-retry-icon"
       />
-    </a>
+    </gl-link>
   </div>
 </template>

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

 <script>
+import { GlTooltipDirective, GlLink, GlButton } from '@gitlab-org/gitlab-ui';
 import { polyfillSticky } from '~/lib/utils/sticky';
 import Icon from '~/vue_shared/components/icon.vue';
-import tooltip from '~/vue_shared/directives/tooltip';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
 import { sprintf } from '~/locale';
 import scrollDown from '../svg/scroll_down.svg';
@@ -9,9 +9,11 @@ import scrollDown from '../svg/scroll_down.svg';
 export default {
   components: {
     Icon,
+    GlLink,
+    GlButton,
   },
   directives: {
-    tooltip,
+    GlTooltip: GlTooltipDirective,
   },
   scrollDown,
   props: {
@@ -73,76 +75,70 @@ export default {
       <template v-if="isTraceSizeVisible">
         {{ jobLogSize }}
 
-        <a
+        <gl-link
           v-if="rawPath"
           :href="rawPath"
           class="js-raw-link raw-link"
         >
           {{ s__("Job|Complete Raw") }}
-        </a>
+        </gl-link>
       </template>
     </div>
     <!-- eo truncate information -->
 
     <div class="controllers float-right">
       <!-- links -->
-      <a
+      <gl-link
         v-if="rawPath"
-        v-tooltip
+        v-gl-tooltip.body
         :title="s__('Job|Show complete raw')"
         :href="rawPath"
         class="js-raw-link-controller controllers-buttons"
-        data-container="body"
       >
         <icon name="doc-text" />
-      </a>
+      </gl-link>
 
-      <a
+      <gl-link
         v-if="erasePath"
-        v-tooltip
+        v-gl-tooltip.body
         :title="s__('Job|Erase job log')"
         :href="erasePath"
         :data-confirm="__('Are you sure you want to erase this build?')"
         class="js-erase-link controllers-buttons"
-        data-container="body"
         data-method="post"
       >
         <icon name="remove" />
-      </a>
+      </gl-link>
       <!-- eo links -->
 
       <!-- scroll buttons -->
       <div
-        v-tooltip
+        v-gl-tooltip
         :title="s__('Job|Scroll to top')"
         class="controllers-buttons"
-        data-container="body"
       >
-        <button
+        <gl-button
           :disabled="isScrollTopDisabled"
           type="button"
           class="js-scroll-top btn-scroll btn-transparent btn-blank"
           @click="handleScrollToTop"
         >
-          <icon name="scroll_up"/>
-        </button>
+          <icon name="scroll_up" />
+        </gl-button>
       </div>
 
       <div
-        v-tooltip
+        v-gl-tooltip
         :title="s__('Job|Scroll to bottom')"
         class="controllers-buttons"
-        data-container="body"
       >
-        <button
+        <gl-button
           :disabled="isScrollBottomDisabled"
-          type="button"
           class="js-scroll-bottom btn-scroll btn-transparent btn-blank"
           :class="{ animate: isScrollingDown }"
           @click="handleScrollToBottom"
           v-html="$options.scrollDown"
-        >
-        </button>
+        />
       </div>
       <!-- eo scroll buttons -->
     </div>

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

 <script>
+import { GlLink } from '@gitlab-org/gitlab-ui';
+
 export default {
   name: 'SidebarDetailRow',
+  components: {
+    GlLink,
+  },
   props: {
     title: {
       type: String,
@@ -41,7 +46,7 @@ export default {
       v-if="hasHelpURL"
       class="help-button float-right"
     >
-      <a
+      <gl-link
         :href="helpUrl"
         target="_blank"
         rel="noopener noreferrer nofollow"
@@ -50,7 +55,7 @@ export default {
           class="fa fa-question-circle"
           aria-hidden="true"
         ></i>
-      </a>
+      </gl-link>
     </span>
   </p>
 </template>

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

 <script>
+import { GlLink } from '@gitlab-org/gitlab-ui';
 /**
  * Renders Stuck Runners block for job's view.
  */
 export default {
+  components: {
+    GlLink,
+  },
   props: {
     hasNoRunnersForProject: {
       type: Boolean,
@@ -52,12 +56,12 @@ export default {
     </p>
 
     {{ __("Go to") }}
-    <a
+    <gl-link
       v-if="runnersPath"
       :href="runnersPath"
       class="js-runners-path"
     >
       {{ __("Runners page") }}
-    </a>
+    </gl-link>
   </div>
 </template>

app/assets/stylesheets/framework/mixins.scss

@@ -291,7 +291,7 @@
 /*
 * Mixin that handles the position of the controls placed on the top bar
 */
-@mixin build-controllers($control-font-size, $flex-direction, $with-grow, $flex-grow-size) {
+@mixin build-controllers($control-font-size, $flex-direction, $with-grow, $flex-grow-size, $svg-display: 'block', $svg-top: '2px') {
   display: flex;
   font-size: $control-font-size;
   justify-content: $flex-direction;
@@ -304,8 +304,9 @@
   svg {
     width: 15px;
     height: 15px;
-    display: block;
+    display: $svg-display;
     fill: $gl-text-color;
+    top: $svg-top;
   }
 
   .controllers-buttons {

app/assets/stylesheets/pages/builds.scss

@@ -94,7 +94,7 @@
     }
 
     .controllers {
-      @include build-controllers(15px, center, false, 0);
+      @include build-controllers(15px, center, false, 0, inline, 0);
     }
   }
 

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

+---
+title: Uses gitlab-ui components in jobs components
+merge_request:
+author:
+type: other