diff options
Diffstat (limited to 'app/assets/javascripts/pipelines/components/graph')
4 files changed, 15 insertions, 21 deletions
diff --git a/app/assets/javascripts/pipelines/components/graph/action_component.vue b/app/assets/javascripts/pipelines/components/graph/action_component.vue index c5e95036f4f..137455bcae1 100644 --- a/app/assets/javascripts/pipelines/components/graph/action_component.vue +++ b/app/assets/javascripts/pipelines/components/graph/action_component.vue @@ -1,9 +1,9 @@ <script> -import { GlTooltipDirective, GlDeprecatedButton, GlLoadingIcon } from '@gitlab/ui'; +import { GlTooltipDirective, GlButton, GlLoadingIcon } from '@gitlab/ui'; import axios from '~/lib/utils/axios_utils'; import { dasherize } from '~/lib/utils/text_utility'; import { __ } from '~/locale'; -import createFlash from '~/flash'; +import { deprecatedCreateFlash as createFlash } from '~/flash'; import Icon from '~/vue_shared/components/icon.vue'; /** @@ -19,7 +19,7 @@ import Icon from '~/vue_shared/components/icon.vue'; export default { components: { Icon, - GlDeprecatedButton, + GlButton, GlLoadingIcon, }, directives: { @@ -82,16 +82,16 @@ export default { }; </script> <template> - <gl-deprecated-button + <gl-button :id="`js-ci-action-${link}`" v-gl-tooltip="{ boundary: 'viewport' }" :title="tooltipText" :class="cssClass" :disabled="isDisabled" - class="js-ci-action btn btn-blank btn-transparent ci-action-icon-container ci-action-icon-wrapper d-flex align-items-center justify-content-center" + class="js-ci-action ci-action-icon-container ci-action-icon-wrapper gl-display-flex gl-align-items-center gl-justify-content-center" @click="onClickAction" > <gl-loading-icon v-if="isLoading" class="js-action-icon-loading" /> <icon v-else :name="actionIcon" /> - </gl-deprecated-button> + </gl-button> </template> diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component.vue b/app/assets/javascripts/pipelines/components/graph/graph_component.vue index 6b890688a48..f5bf6a6ed34 100644 --- a/app/assets/javascripts/pipelines/components/graph/graph_component.vue +++ b/app/assets/javascripts/pipelines/components/graph/graph_component.vue @@ -170,7 +170,7 @@ export default { v-for="(stage, index) in graph" :key="stage.name" :class="{ - 'has-upstream prepend-left-64': hasUpstream(index), + 'has-upstream gl-ml-11': hasUpstream(index), 'has-only-one-job': hasOnlyOneJob(stage), 'gl-mr-26': shouldAddRightMargin(index), }" diff --git a/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue b/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue index 733553e02c0..f0a8f9f7ab7 100644 --- a/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue +++ b/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue @@ -1,5 +1,5 @@ <script> -import { GlLoadingIcon, GlTooltipDirective, GlDeprecatedButton } from '@gitlab/ui'; +import { GlTooltipDirective, GlButton } from '@gitlab/ui'; import CiStatus from '~/vue_shared/components/ci_icon.vue'; import { __, sprintf } from '~/locale'; @@ -9,8 +9,7 @@ export default { }, components: { CiStatus, - GlLoadingIcon, - GlDeprecatedButton, + GlButton, }, props: { pipeline: { @@ -95,26 +94,21 @@ export default { @mouseover="onDownstreamHovered" @mouseleave="onDownstreamHoverLeave" > - <gl-deprecated-button + <gl-button :id="buttonId" v-gl-tooltip :title="tooltipText" - class="js-linked-pipeline-content linked-pipeline-content" + class="linked-pipeline-content" data-qa-selector="linked_pipeline_button" :class="`js-pipeline-expand-${pipeline.id}`" + :loading="pipeline.isLoading" @click="onClickLinkedPipeline" > - <gl-loading-icon v-if="pipeline.isLoading" class="js-linked-pipeline-loading d-inline" /> - <ci-status - v-else - :status="pipelineStatus" - css-classes="position-top-0" - class="js-linked-pipeline-status" - /> + <ci-status v-if="!pipeline.isLoading" :status="pipelineStatus" css-classes="gl-top-0" /> <span class="str-truncated"> {{ downstreamTitle }} • #{{ pipeline.id }} </span> <div class="gl-pt-2"> <span class="badge badge-primary" data-testid="downstream-pipeline-label">{{ label }}</span> </div> - </gl-deprecated-button> + </gl-button> </li> </template> diff --git a/app/assets/javascripts/pipelines/components/graph/linked_pipelines_column.vue b/app/assets/javascripts/pipelines/components/graph/linked_pipelines_column.vue index c4dfd3382a2..d82885ff8de 100644 --- a/app/assets/javascripts/pipelines/components/graph/linked_pipelines_column.vue +++ b/app/assets/javascripts/pipelines/components/graph/linked_pipelines_column.vue @@ -27,7 +27,7 @@ export default { computed: { columnClass() { const positionValues = { - right: 'prepend-left-64', + right: 'gl-ml-11', left: 'gl-mr-7', }; return `graph-position-${this.graphPosition} ${positionValues[this.graphPosition]}`; |