summaryrefslogtreecommitdiff
path: root/app/assets
diff options
context:
space:
mode:
authorFilipa Lacerda <filipa@gitlab.com>2018-11-09 22:42:24 +0000
committerClement Ho <clemmakesapps@gmail.com>2018-11-09 22:42:24 +0000
commit21edd590bd77c5ccdd5d0187241683447a972376 (patch)
treeb430059f7c2c220a7c564aadbcf3e72266fbf2ff /app/assets
parent746ac855f96bcee76cfd53550428831522f4054b (diff)
downloadgitlab-ce-21edd590bd77c5ccdd5d0187241683447a972376.tar.gz
Use gitlab-ui in jobs and pipelines
Diffstat (limited to 'app/assets')
-rw-r--r--app/assets/javascripts/jobs/components/sidebar.vue31
-rw-r--r--app/assets/javascripts/jobs/components/trigger_block.vue10
-rw-r--r--app/assets/javascripts/pipelines/components/empty_state.vue12
-rw-r--r--app/assets/javascripts/pipelines/components/nav_controls.vue18
-rw-r--r--app/assets/javascripts/pipelines/components/pipeline_url.vue43
-rw-r--r--app/assets/javascripts/pipelines/components/pipelines_actions.vue21
-rw-r--r--app/assets/javascripts/pipelines/components/pipelines_artifacts.vue24
7 files changed, 91 insertions, 68 deletions
diff --git a/app/assets/javascripts/jobs/components/sidebar.vue b/app/assets/javascripts/jobs/components/sidebar.vue
index 28a02230d89..f7b7b8f10f7 100644
--- a/app/assets/javascripts/jobs/components/sidebar.vue
+++ b/app/assets/javascripts/jobs/components/sidebar.vue
@@ -1,6 +1,7 @@
<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>
diff --git a/app/assets/javascripts/jobs/components/trigger_block.vue b/app/assets/javascripts/jobs/components/trigger_block.vue
index 41de4a6e85a..1e62c05b4d1 100644
--- a/app/assets/javascripts/jobs/components/trigger_block.vue
+++ b/app/assets/javascripts/jobs/components/trigger_block.vue
@@ -1,5 +1,10 @@
<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
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>