diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2018-11-10 01:42:24 +0300 |
---|---|---|
committer | Clement Ho <clemmakesapps@gmail.com> | 2018-11-10 01:42:24 +0300 |
commit | 21edd590bd77c5ccdd5d0187241683447a972376 (patch) | |
tree | b430059f7c2c220a7c564aadbcf3e72266fbf2ff /app/assets/javascripts/pipelines | |
parent | 746ac855f96bcee76cfd53550428831522f4054b (diff) |
Use gitlab-ui in jobs and pipelines
Diffstat (limited to 'app/assets/javascripts/pipelines')
5 files changed, 67 insertions, 51 deletions
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> |