Commit f80abe5d authored by Filipa Lacerda's avatar Filipa Lacerda

Uses gitlab-ui components in jobs components.

Removes old buttons,links and tooltips and uses
the new gitlab-ui components.
parent c0d30fad
<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>
<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">
......
<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>
......
<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") }}
......
<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,
......
<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>
<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>
......
<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>
<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>
......@@ -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 {
......
......@@ -94,7 +94,7 @@
}
.controllers {
@include build-controllers(15px, center, false, 0);
@include build-controllers(15px, center, false, 0, inline, 0);
}
}
......
---
title: Uses gitlab-ui components in jobs components
merge_request:
author:
type: other
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