diff options
Diffstat (limited to 'app/assets/javascripts/pipelines/components/pipelines_list')
8 files changed, 59 insertions, 60 deletions
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/nav_controls.vue b/app/assets/javascripts/pipelines/components/pipelines_list/nav_controls.vue index a66bbb7e5ba..d7b6e033bd1 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/nav_controls.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/nav_controls.vue @@ -1,12 +1,10 @@ <script> -import { GlDeprecatedButton } from '@gitlab/ui'; -import LoadingButton from '~/vue_shared/components/loading_button.vue'; +import { GlButton } from '@gitlab/ui'; export default { name: 'PipelineNavControls', components: { - LoadingButton, - GlDeprecatedButton, + GlButton, }, props: { newPipelinePath: { @@ -42,25 +40,27 @@ export default { </script> <template> <div class="nav-controls"> - <gl-deprecated-button + <gl-button v-if="newPipelinePath" :href="newPipelinePath" variant="success" + category="primary" class="js-run-pipeline" > {{ s__('Pipelines|Run Pipeline') }} - </gl-deprecated-button> + </gl-button> - <loading-button + <gl-button v-if="resetCachePath" :loading="isResetCacheButtonLoading" - :label="s__('Pipelines|Clear Runner Caches')" class="js-clear-cache" @click="onClickResetCache" - /> + > + {{ s__('Pipelines|Clear Runner Caches') }} + </gl-button> - <gl-deprecated-button v-if="ciLintPath" :href="ciLintPath" class="js-ci-lint"> + <gl-button v-if="ciLintPath" :href="ciLintPath" class="js-ci-lint"> {{ s__('Pipelines|CI Lint') }} - </gl-deprecated-button> + </gl-button> </div> </template> diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_stop_modal.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_stop_modal.vue index f604edd8859..43a54090e18 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_stop_modal.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_stop_modal.vue @@ -1,4 +1,5 @@ <script> +/* eslint-disable vue/no-v-html */ import { isEmpty } from 'lodash'; import { GlLink } from '@gitlab/ui'; import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue'; diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue index 2dfc6485d85..adba86d384b 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue @@ -1,5 +1,6 @@ <script> import { isEqual } from 'lodash'; +import { GlIcon } from '@gitlab/ui'; import { __, s__ } from '~/locale'; import { deprecatedCreateFlash as createFlash } from '~/flash'; import PipelinesService from '../../services/pipelines_service'; @@ -9,7 +10,6 @@ import NavigationTabs from '~/vue_shared/components/navigation_tabs.vue'; import NavigationControls from './nav_controls.vue'; import { getParameterByName } from '~/lib/utils/common_utils'; import CIPaginationMixin from '~/vue_shared/mixins/ci_pagination_api_mixin'; -import Icon from '~/vue_shared/components/icon.vue'; import PipelinesFilteredSearch from './pipelines_filtered_search.vue'; import { validateParams } from '../../utils'; import { ANY_TRIGGER_AUTHOR, RAW_TEXT_WARNING, FILTER_TAG_IDENTIFIER } from '../../constants'; @@ -21,7 +21,7 @@ export default { NavigationTabs, NavigationControls, PipelinesFilteredSearch, - Icon, + GlIcon, }, mixins: [pipelinesMixin, CIPaginationMixin, glFeatureFlagsMixin()], props: { @@ -285,8 +285,8 @@ export default { v-if="shouldRenderTabs || shouldRenderButtons" class="top-area scrolling-tabs-container inner-page-scroll-tabs" > - <div class="fade-left"><icon name="chevron-lg-left" :size="12" /></div> - <div class="fade-right"><icon name="chevron-lg-right" :size="12" /></div> + <div class="fade-left"><gl-icon name="chevron-lg-left" :size="12" /></div> + <div class="fade-right"><gl-icon name="chevron-lg-right" :size="12" /></div> <navigation-tabs v-if="shouldRenderTabs" diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_actions.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_actions.vue index 098efe68b83..97595e5d2ce 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_actions.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_actions.vue @@ -1,10 +1,9 @@ <script> -import { GlDeprecatedButton, GlTooltipDirective, GlLoadingIcon } from '@gitlab/ui'; +import { GlTooltipDirective, GlButton, GlLoadingIcon, GlIcon } from '@gitlab/ui'; import axios from '~/lib/utils/axios_utils'; import { deprecatedCreateFlash as flash } from '~/flash'; import { s__, __, sprintf } from '~/locale'; import GlCountdown from '~/vue_shared/components/gl_countdown.vue'; -import Icon from '~/vue_shared/components/icon.vue'; import eventHub from '../../event_hub'; export default { @@ -12,9 +11,9 @@ export default { GlTooltip: GlTooltipDirective, }, components: { - Icon, + GlIcon, GlCountdown, - GlDeprecatedButton, + GlButton, GlLoadingIcon, }, props: { @@ -83,29 +82,32 @@ export default { type="button" :disabled="isLoading" class="dropdown-new btn btn-default js-pipeline-dropdown-manual-actions" - :title="__('Manual job')" + :title="__('Run manual or delayed jobs')" data-toggle="dropdown" - :aria-label="__('Manual job')" + :aria-label="__('Run manual or delayed jobs')" > - <icon name="play" class="icon-play" /> + <gl-icon name="play" class="icon-play" /> <i class="fa fa-caret-down" aria-hidden="true"></i> <gl-loading-icon v-if="isLoading" /> </button> <ul class="dropdown-menu dropdown-menu-right"> <li v-for="action in actions" :key="action.path"> - <gl-deprecated-button + <gl-button + category="tertiary" :class="{ disabled: isActionDisabled(action) }" :disabled="isActionDisabled(action)" - class="js-pipeline-action-link no-btn btn d-flex align-items-center justify-content-between flex-wrap" + class="js-pipeline-action-link" @click="onClickAction(action)" > - {{ action.name }} - <span v-if="action.scheduled_at"> - <icon name="clock" /> - <gl-countdown :end-date-string="action.scheduled_at" /> - </span> - </gl-deprecated-button> + <div class="d-flex justify-content-between flex-wrap"> + {{ action.name }} + <span v-if="action.scheduled_at"> + <gl-icon name="clock" /> + <gl-countdown :end-date-string="action.scheduled_at" /> + </span> + </div> + </gl-button> </li> </ul> </div> diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_artifacts.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_artifacts.vue index 59c066b2683..4a3d134685e 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_artifacts.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_artifacts.vue @@ -1,14 +1,13 @@ <script> /* eslint-disable @gitlab/vue-require-i18n-strings */ -import { GlLink, GlTooltipDirective } from '@gitlab/ui'; -import Icon from '~/vue_shared/components/icon.vue'; +import { GlLink, GlTooltipDirective, GlIcon } from '@gitlab/ui'; export default { directives: { GlTooltip: GlTooltipDirective, }, components: { - Icon, + GlIcon, GlLink, }, props: { @@ -29,7 +28,7 @@ export default { data-toggle="dropdown" :aria-label="__('Artifacts')" > - <icon name="download" /> + <gl-icon name="download" /> <i class="fa fa-caret-down" aria-hidden="true"></i> </button> <ul class="dropdown-menu dropdown-menu-right"> diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table_row.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table_row.vue index f25994a7506..1bdb7d18f04 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table_row.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table_row.vue @@ -1,4 +1,5 @@ <script> +import { GlButton } from '@gitlab/ui'; import eventHub from '../../event_hub'; import PipelinesActionsComponent from './pipelines_actions.vue'; import PipelinesArtifactsComponent from './pipelines_artifacts.vue'; @@ -8,8 +9,6 @@ import PipelineUrl from './pipeline_url.vue'; import PipelineTriggerer from './pipeline_triggerer.vue'; import PipelinesTimeago from './time_ago.vue'; import CommitComponent from '~/vue_shared/components/commit.vue'; -import LoadingButton from '~/vue_shared/components/loading_button.vue'; -import Icon from '~/vue_shared/components/icon.vue'; import { PIPELINES_TABLE } from '../../constants'; /** @@ -27,8 +26,7 @@ export default { PipelineTriggerer, CiBadge, PipelinesTimeago, - LoadingButton, - Icon, + GlButton, }, props: { pipeline: { @@ -274,6 +272,7 @@ export default { <ci-badge :status="pipelineStatus" :show-text="!isChildView" + :icon-classes="'gl-vertical-align-middle!'" data-qa-selector="pipeline_commit_status" /> </div> @@ -337,28 +336,30 @@ export default { class="d-md-block" /> - <loading-button + <gl-button v-if="pipeline.flags.retryable" :loading="isRetrying" :disabled="isRetrying" - container-class="js-pipelines-retry-button btn btn-default btn-retry" + class="js-pipelines-retry-button btn-retry" data-qa-selector="pipeline_retry_button" + icon="repeat" + variant="default" + category="secondary" @click="handleRetryClick" - > - <icon name="repeat" /> - </loading-button> + /> - <loading-button + <gl-button v-if="pipeline.flags.cancelable" :loading="isCancelling" :disabled="isCancelling" data-toggle="modal" data-target="#confirmation-modal" - container-class="js-pipelines-cancel-button btn btn-remove" + icon="close" + variant="danger" + category="primary" + class="js-pipelines-cancel-button" @click="handleCancelClick" - > - <icon name="close" /> - </loading-button> + /> </div> </div> </div> diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/stage.vue b/app/assets/javascripts/pipelines/components/pipelines_list/stage.vue index d992a4b7752..4045f450104 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/stage.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/stage.vue @@ -13,18 +13,17 @@ */ import $ from 'jquery'; -import { GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui'; +import { GlLoadingIcon, GlTooltipDirective, GlIcon } from '@gitlab/ui'; import { __ } from '~/locale'; import { deprecatedCreateFlash as Flash } from '~/flash'; import axios from '~/lib/utils/axios_utils'; import eventHub from '../../event_hub'; -import Icon from '~/vue_shared/components/icon.vue'; import JobItem from '../graph/job_item.vue'; import { PIPELINES_TABLE } from '../../constants'; export default { components: { - Icon, + GlIcon, JobItem, GlLoadingIcon, }, @@ -170,7 +169,7 @@ export default { @click="onClickStage" > <span :aria-label="stage.title" aria-hidden="true" class="no-pointer-events"> - <icon :name="borderlessIcon" /> + <gl-icon :name="borderlessIcon" /> </span> </button> diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/time_ago.vue b/app/assets/javascripts/pipelines/components/pipelines_list/time_ago.vue index 8a01e1fe3f5..7d13ee582c6 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/time_ago.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/time_ago.vue @@ -1,5 +1,5 @@ <script> -import iconTimerSvg from 'icons/_icon_timer.svg'; +import { GlIcon } from '@gitlab/ui'; import '~/lib/utils/datetime_utility'; import tooltip from '~/vue_shared/directives/tooltip'; import timeagoMixin from '~/vue_shared/mixins/timeago'; @@ -8,6 +8,7 @@ export default { directives: { tooltip, }, + components: { GlIcon }, mixins: [timeagoMixin], props: { finishedTime: { @@ -19,11 +20,6 @@ export default { required: true, }, }, - data() { - return { - iconTimerSvg, - }; - }, computed: { hasDuration() { return this.duration > 0; @@ -59,11 +55,12 @@ export default { <div class="table-mobile-header" role="rowheader">{{ s__('Pipeline|Duration') }}</div> <div class="table-mobile-content"> <p v-if="hasDuration" class="duration"> - <span v-html="iconTimerSvg"> </span> {{ durationFormatted }} + <gl-icon name="timer" class="gl-vertical-align-baseline!" aria-hidden="true" /> + {{ durationFormatted }} </p> <p v-if="hasFinishedTime" class="finished-at d-none d-sm-none d-md-block"> - <i class="fa fa-calendar" aria-hidden="true"> </i> + <gl-icon name="calendar" class="gl-vertical-align-baseline!" aria-hidden="true" /> <time v-tooltip |