Commit a4527d2a authored by Phil Hughes's avatar Phil Hughes

Merge branch '51259-ci-cd-gitlab-ui' into 'master'

Uses gitlab-ui components in jobs components.

See merge request gitlab-org/gitlab-ce!22780
parents 690298ab f80abe5d
<script> <script>
import { GlLink } from '@gitlab-org/gitlab-ui';
import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
import timeagoMixin from '~/vue_shared/mixins/timeago'; import timeagoMixin from '~/vue_shared/mixins/timeago';
export default { export default {
components: { components: {
TimeagoTooltip, TimeagoTooltip,
GlLink,
}, },
mixins: [timeagoMixin], mixins: [timeagoMixin],
props: { props: {
...@@ -53,16 +55,16 @@ export default { ...@@ -53,16 +55,16 @@ export default {
class="btn-group d-flex" class="btn-group d-flex"
role="group" role="group"
> >
<a <gl-link
v-if="artifact.keep_path" v-if="artifact.keep_path"
:href="artifact.keep_path" :href="artifact.keep_path"
class="js-keep-artifacts btn btn-sm btn-default" class="js-keep-artifacts btn btn-sm btn-default"
data-method="post" data-method="post"
> >
{{ s__('Job|Keep') }} {{ s__('Job|Keep') }}
</a> </gl-link>
<a <gl-link
v-if="artifact.download_path" v-if="artifact.download_path"
:href="artifact.download_path" :href="artifact.download_path"
class="js-download-artifacts btn btn-sm btn-default" class="js-download-artifacts btn btn-sm btn-default"
...@@ -70,15 +72,15 @@ export default { ...@@ -70,15 +72,15 @@ export default {
rel="nofollow" rel="nofollow"
> >
{{ s__('Job|Download') }} {{ s__('Job|Download') }}
</a> </gl-link>
<a <gl-link
v-if="artifact.browse_path" v-if="artifact.browse_path"
:href="artifact.browse_path" :href="artifact.browse_path"
class="js-browse-artifacts btn btn-sm btn-default" class="js-browse-artifacts btn btn-sm btn-default"
> >
{{ s__('Job|Browse') }} {{ s__('Job|Browse') }}
</a> </gl-link>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { GlLink } from '@gitlab-org/gitlab-ui';
import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
export default { export default {
components: { components: {
ClipboardButton, ClipboardButton,
GlLink,
}, },
props: { props: {
commit: { commit: {
...@@ -31,10 +33,10 @@ export default { ...@@ -31,10 +33,10 @@ export default {
<p> <p>
{{ __('Commit') }} {{ __('Commit') }}
<a <gl-link
:href="commit.commit_path" :href="commit.commit_path"
class="js-commit-sha commit-sha link-commit" class="js-commit-sha commit-sha link-commit"
>{{ commit.short_id }}</a> >{{ commit.short_id }}</gl-link>
<clipboard-button <clipboard-button
:text="commit.short_id" :text="commit.short_id"
...@@ -42,11 +44,11 @@ export default { ...@@ -42,11 +44,11 @@ export default {
css-class="btn btn-clipboard btn-transparent" css-class="btn btn-clipboard btn-transparent"
/> />
<a <gl-link
v-if="mergeRequest" v-if="mergeRequest"
:href="mergeRequest.path" :href="mergeRequest.path"
class="js-link-commit link-commit" class="js-link-commit link-commit"
>!{{ mergeRequest.iid }}</a> >!{{ mergeRequest.iid }}</gl-link>
</p> </p>
<p class="build-light-text append-bottom-0"> <p class="build-light-text append-bottom-0">
......
<script> <script>
import { GlLink } from '@gitlab-org/gitlab-ui';
export default { export default {
components: {
GlLink,
},
props: { props: {
illustrationPath: { illustrationPath: {
type: String, type: String,
...@@ -62,13 +67,13 @@ export default { ...@@ -62,13 +67,13 @@ export default {
v-if="action" v-if="action"
class="text-center" class="text-center"
> >
<a <gl-link
:href="action.path" :href="action.path"
:data-method="action.method" :data-method="action.method"
class="js-job-empty-state-action btn btn-primary" class="js-job-empty-state-action btn btn-primary"
> >
{{ action.button_title }} {{ action.button_title }}
</a> </gl-link>
</div> </div>
</div> </div>
</div> </div>
......
<script> <script>
import _ from 'underscore'; import _ from 'underscore';
import { GlLink } from '@gitlab-org/gitlab-ui';
import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
export default { export default {
components: { components: {
TimeagoTooltip, TimeagoTooltip,
GlLink,
}, },
props: { props: {
user: { user: {
...@@ -29,9 +31,9 @@ export default { ...@@ -29,9 +31,9 @@ export default {
<div class="erased alert alert-warning"> <div class="erased alert alert-warning">
<template v-if="isErasedByUser"> <template v-if="isErasedByUser">
{{ s__("Job|Job has been erased by") }} {{ s__("Job|Job has been erased by") }}
<a :href="user.web_url"> <gl-link :href="user.web_url">
{{ user.username }} {{ user.username }}
</a> </gl-link>
</template> </template>
<template v-else> <template v-else>
{{ s__("Job|Job has been erased") }} {{ s__("Job|Job has been erased") }}
......
<script> <script>
import _ from 'underscore'; import _ from 'underscore';
import { mapGetters, mapState, mapActions } from 'vuex'; import { mapGetters, mapState, mapActions } from 'vuex';
import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
import { isScrolledToBottom } from '~/lib/utils/scroll_utils'; import { isScrolledToBottom } from '~/lib/utils/scroll_utils';
import bp from '~/breakpoints'; import bp from '~/breakpoints';
import CiHeader from '~/vue_shared/components/header_ci_component.vue'; import CiHeader from '~/vue_shared/components/header_ci_component.vue';
...@@ -23,6 +24,7 @@ export default { ...@@ -23,6 +24,7 @@ export default {
EmptyState, EmptyState,
EnvironmentsBlock, EnvironmentsBlock,
ErasedBlock, ErasedBlock,
GlLoadingIcon,
Log, Log,
LogTopBar, LogTopBar,
StuckBlock, StuckBlock,
......
<script> <script>
import { GlTooltipDirective, GlLink } from '@gitlab-org/gitlab-ui';
import CiIcon from '~/vue_shared/components/ci_icon.vue'; import CiIcon from '~/vue_shared/components/ci_icon.vue';
import Icon from '~/vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
import tooltip from '~/vue_shared/directives/tooltip';
export default { export default {
components: { components: {
CiIcon, CiIcon,
Icon, Icon,
GlLink,
}, },
directives: { directives: {
tooltip, GlTooltip: GlTooltipDirective,
}, },
props: { props: {
job: { job: {
...@@ -37,11 +38,10 @@ export default { ...@@ -37,11 +38,10 @@ export default {
active: isActive active: isActive
}" }"
> >
<a <gl-link
v-tooltip v-gl-tooltip
:href="job.status.details_path" :href="job.status.details_path"
:title="tooltipText" :title="tooltipText"
data-container="body"
data-boundary="viewport" data-boundary="viewport"
class="js-job-link" class="js-job-link"
> >
...@@ -60,6 +60,6 @@ export default { ...@@ -60,6 +60,6 @@ export default {
name="retry" name="retry"
class="js-retry-icon" class="js-retry-icon"
/> />
</a> </gl-link>
</div> </div>
</template> </template>
<script> <script>
import { GlTooltipDirective, GlLink, GlButton } from '@gitlab-org/gitlab-ui';
import { polyfillSticky } from '~/lib/utils/sticky'; import { polyfillSticky } from '~/lib/utils/sticky';
import Icon from '~/vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
import tooltip from '~/vue_shared/directives/tooltip';
import { numberToHumanSize } from '~/lib/utils/number_utils'; import { numberToHumanSize } from '~/lib/utils/number_utils';
import { sprintf } from '~/locale'; import { sprintf } from '~/locale';
import scrollDown from '../svg/scroll_down.svg'; import scrollDown from '../svg/scroll_down.svg';
...@@ -9,9 +9,11 @@ import scrollDown from '../svg/scroll_down.svg'; ...@@ -9,9 +9,11 @@ import scrollDown from '../svg/scroll_down.svg';
export default { export default {
components: { components: {
Icon, Icon,
GlLink,
GlButton,
}, },
directives: { directives: {
tooltip, GlTooltip: GlTooltipDirective,
}, },
scrollDown, scrollDown,
props: { props: {
...@@ -73,76 +75,70 @@ export default { ...@@ -73,76 +75,70 @@ export default {
<template v-if="isTraceSizeVisible"> <template v-if="isTraceSizeVisible">
{{ jobLogSize }} {{ jobLogSize }}
<a <gl-link
v-if="rawPath" v-if="rawPath"
:href="rawPath" :href="rawPath"
class="js-raw-link raw-link" class="js-raw-link raw-link"
> >
{{ s__("Job|Complete Raw") }} {{ s__("Job|Complete Raw") }}
</a> </gl-link>
</template> </template>
</div> </div>
<!-- eo truncate information --> <!-- eo truncate information -->
<div class="controllers float-right"> <div class="controllers float-right">
<!-- links --> <!-- links -->
<a <gl-link
v-if="rawPath" v-if="rawPath"
v-tooltip v-gl-tooltip.body
:title="s__('Job|Show complete raw')" :title="s__('Job|Show complete raw')"
:href="rawPath" :href="rawPath"
class="js-raw-link-controller controllers-buttons" class="js-raw-link-controller controllers-buttons"
data-container="body"
> >
<icon name="doc-text" /> <icon name="doc-text" />
</a> </gl-link>
<a <gl-link
v-if="erasePath" v-if="erasePath"
v-tooltip v-gl-tooltip.body
:title="s__('Job|Erase job log')" :title="s__('Job|Erase job log')"
:href="erasePath" :href="erasePath"
:data-confirm="__('Are you sure you want to erase this build?')" :data-confirm="__('Are you sure you want to erase this build?')"
class="js-erase-link controllers-buttons" class="js-erase-link controllers-buttons"
data-container="body"
data-method="post" data-method="post"
> >
<icon name="remove" /> <icon name="remove" />
</a> </gl-link>
<!-- eo links --> <!-- eo links -->
<!-- scroll buttons --> <!-- scroll buttons -->
<div <div
v-tooltip v-gl-tooltip
:title="s__('Job|Scroll to top')" :title="s__('Job|Scroll to top')"
class="controllers-buttons" class="controllers-buttons"
data-container="body"
> >
<button <gl-button
:disabled="isScrollTopDisabled" :disabled="isScrollTopDisabled"
type="button" type="button"
class="js-scroll-top btn-scroll btn-transparent btn-blank" class="js-scroll-top btn-scroll btn-transparent btn-blank"
@click="handleScrollToTop" @click="handleScrollToTop"
> >
<icon name="scroll_up"/> <icon name="scroll_up" />
</button> </gl-button>
</div> </div>
<div <div
v-tooltip v-gl-tooltip
:title="s__('Job|Scroll to bottom')" :title="s__('Job|Scroll to bottom')"
class="controllers-buttons" class="controllers-buttons"
data-container="body"
> >
<button <gl-button
:disabled="isScrollBottomDisabled" :disabled="isScrollBottomDisabled"
type="button"
class="js-scroll-bottom btn-scroll btn-transparent btn-blank" class="js-scroll-bottom btn-scroll btn-transparent btn-blank"
:class="{ animate: isScrollingDown }" :class="{ animate: isScrollingDown }"
@click="handleScrollToBottom" @click="handleScrollToBottom"
v-html="$options.scrollDown" v-html="$options.scrollDown"
> />
</button>
</div> </div>
<!-- eo scroll buttons --> <!-- eo scroll buttons -->
</div> </div>
......
<script> <script>
import { GlLink } from '@gitlab-org/gitlab-ui';
export default { export default {
name: 'SidebarDetailRow', name: 'SidebarDetailRow',
components: {
GlLink,
},
props: { props: {
title: { title: {
type: String, type: String,
...@@ -41,7 +46,7 @@ export default { ...@@ -41,7 +46,7 @@ export default {
v-if="hasHelpURL" v-if="hasHelpURL"
class="help-button float-right" class="help-button float-right"
> >
<a <gl-link
:href="helpUrl" :href="helpUrl"
target="_blank" target="_blank"
rel="noopener noreferrer nofollow" rel="noopener noreferrer nofollow"
...@@ -50,7 +55,7 @@ export default { ...@@ -50,7 +55,7 @@ export default {
class="fa fa-question-circle" class="fa fa-question-circle"
aria-hidden="true" aria-hidden="true"
></i> ></i>
</a> </gl-link>
</span> </span>
</p> </p>
</template> </template>
<script> <script>
import { GlLink } from '@gitlab-org/gitlab-ui';
/** /**
* Renders Stuck Runners block for job's view. * Renders Stuck Runners block for job's view.
*/ */
export default { export default {
components: {
GlLink,
},
props: { props: {
hasNoRunnersForProject: { hasNoRunnersForProject: {
type: Boolean, type: Boolean,
...@@ -52,12 +56,12 @@ export default { ...@@ -52,12 +56,12 @@ export default {
</p> </p>
{{ __("Go to") }} {{ __("Go to") }}
<a <gl-link
v-if="runnersPath" v-if="runnersPath"
:href="runnersPath" :href="runnersPath"
class="js-runners-path" class="js-runners-path"
> >
{{ __("Runners page") }} {{ __("Runners page") }}
</a> </gl-link>
</div> </div>
</template> </template>
...@@ -291,7 +291,7 @@ ...@@ -291,7 +291,7 @@
/* /*
* Mixin that handles the position of the controls placed on the top bar * 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; display: flex;
font-size: $control-font-size; font-size: $control-font-size;
justify-content: $flex-direction; justify-content: $flex-direction;
...@@ -304,8 +304,9 @@ ...@@ -304,8 +304,9 @@
svg { svg {
width: 15px; width: 15px;
height: 15px; height: 15px;
display: block; display: $svg-display;
fill: $gl-text-color; fill: $gl-text-color;
top: $svg-top;
} }
.controllers-buttons { .controllers-buttons {
......
...@@ -94,7 +94,7 @@ ...@@ -94,7 +94,7 @@
} }
.controllers { .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