diff options
Diffstat (limited to 'app/assets/javascripts/ci/pipeline_editor/components/header')
4 files changed, 31 insertions, 57 deletions
diff --git a/app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_editor_header.vue b/app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_editor_header.vue index ec6ee52b6b2..665ca907ed9 100644 --- a/app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_editor_header.vue +++ b/app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_editor_header.vue @@ -1,30 +1,11 @@ <script> +import { GlCard } from '@gitlab/ui'; import PipelineStatus from './pipeline_status.vue'; import ValidationSegment from './validation_segment.vue'; -const baseClasses = ['gl-p-5', 'gl-bg-gray-10', 'gl-border-solid', 'gl-border-gray-100']; - -const pipelineStatusClasses = [ - ...baseClasses, - 'gl-border-1', - 'gl-border-b-0!', - 'gl-rounded-top-base', -]; - -const validationSegmentClasses = [...baseClasses, 'gl-border-1', 'gl-rounded-base']; - -const validationSegmentWithPipelineStatusClasses = [ - ...baseClasses, - 'gl-border-1', - 'gl-rounded-bottom-left-base', - 'gl-rounded-bottom-right-base', -]; - export default { - pipelineStatusClasses, - validationSegmentClasses, - validationSegmentWithPipelineStatusClasses, components: { + GlCard, PipelineStatus, ValidationSegment, }, @@ -47,24 +28,19 @@ export default { showPipelineStatus() { return !this.isNewCiConfigFile; }, - // make sure corners are rounded correctly depending on if - // pipeline status is rendered - validationStyling() { - return this.showPipelineStatus - ? this.$options.validationSegmentWithPipelineStatusClasses - : this.$options.validationSegmentClasses; - }, }, }; </script> <template> - <div class="gl-mb-5"> - <pipeline-status - v-if="showPipelineStatus" - :commit-sha="commitSha" - :class="$options.pipelineStatusClasses" - v-on="$listeners" - /> - <validation-segment :class="validationStyling" :ci-config="ciConfigData" /> - </div> + <gl-card + class="gl-new-card gl-mb-3 gl-mt-0" + header-class="gl-new-card-header" + body-class="gl-new-card-body gl-py-4 gl-px-5" + > + <template v-if="showPipelineStatus" #header> + <pipeline-status :commit-sha="commitSha" v-on="$listeners" /> + </template> + + <validation-segment :ci-config="ciConfigData" /> + </gl-card> </template> diff --git a/app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_editor_mini_graph.vue b/app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_editor_mini_graph.vue index f1c9770714a..f00098105d3 100644 --- a/app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_editor_mini_graph.vue +++ b/app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_editor_mini_graph.vue @@ -1,8 +1,8 @@ <script> import { __ } from '~/locale'; -import { keepLatestDownstreamPipelines } from '~/pipelines/components/parsing_utils'; -import LegacyPipelineMiniGraph from '~/pipelines/components/pipeline_mini_graph/legacy_pipeline_mini_graph.vue'; -import getLinkedPipelinesQuery from '~/pipelines/graphql/queries/get_linked_pipelines.query.graphql'; +import { keepLatestDownstreamPipelines } from '~/ci/pipeline_details/utils/parsing_utils'; +import LegacyPipelineMiniGraph from '~/ci/pipeline_mini_graph/legacy_pipeline_mini_graph.vue'; +import getLinkedPipelinesQuery from '~/ci/pipeline_details/graphql/queries/get_linked_pipelines.query.graphql'; import { PIPELINE_FAILURE } from '../../constants'; export default { diff --git a/app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_status.vue b/app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_status.vue index 3bce50224d9..58b5c0004e0 100644 --- a/app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_status.vue +++ b/app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_status.vue @@ -5,13 +5,10 @@ import { truncateSha } from '~/lib/utils/text_utility'; import { s__ } from '~/locale'; import getPipelineQuery from '~/ci/pipeline_editor/graphql/queries/pipeline.query.graphql'; import getPipelineEtag from '~/ci/pipeline_editor/graphql/queries/client/pipeline_etag.query.graphql'; -import { - getQueryHeaders, - toggleQueryPollingByVisibility, -} from '~/pipelines/components/graph/utils'; +import { getQueryHeaders, toggleQueryPollingByVisibility } from '~/ci/pipeline_details/graph/utils'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import CiIcon from '~/vue_shared/components/ci_icon.vue'; -import PipelineMiniGraph from '~/pipelines/components/pipeline_mini_graph/pipeline_mini_graph.vue'; +import PipelineMiniGraph from '~/ci/pipeline_mini_graph/pipeline_mini_graph.vue'; import PipelineEditorMiniGraph from './pipeline_editor_mini_graph.vue'; const POLL_INTERVAL = 10000; @@ -141,7 +138,9 @@ export default { </script> <template> - <div class="gl-display-flex gl-justify-content-space-between gl-align-items-center gl-flex-wrap"> + <div + class="gl-display-flex gl-justify-content-space-between gl-align-items-center gl-flex-wrap gl-w-full" + > <template v-if="showLoadingState"> <div> <gl-loading-icon class="gl-mr-auto gl-display-inline-block" size="sm" /> @@ -149,20 +148,20 @@ export default { </div> </template> <template v-else-if="hasError"> - <gl-icon class="gl-mr-auto" name="warning-solid" /> - <span data-testid="pipeline-error-msg">{{ $options.i18n.fetchError }}</span> + <div> + <gl-icon class="gl-mr-auto" name="warning-solid" /> + <span data-testid="pipeline-error-msg">{{ $options.i18n.fetchError }}</span> + </div> </template> <template v-else> <div class="gl-text-truncate gl-md-max-w-50p gl-mr-1"> <a :href="status.detailsPath" class="gl-mr-auto"> - <ci-icon :status="status" :size="16" data-testid="pipeline-status-icon" /> + <ci-icon :status="status" :size="16" data-testid="pipeline-status-icon" class="gl-mr-2" /> </a> <span class="gl-font-weight-bold"> <gl-sprintf :message="$options.i18n.pipelineInfo"> <template #id="{ content }"> - <span data-testid="pipeline-id" data-qa-selector="pipeline_id_content"> - {{ content }}{{ pipelineId }} - </span> + <span data-testid="pipeline-id"> {{ content }}{{ pipelineId }} </span> </template> <template #status>{{ status.text }}</template> <template #commit> @@ -187,9 +186,8 @@ export default { /> <pipeline-editor-mini-graph v-else :pipeline="pipeline" v-on="$listeners" /> <gl-button - class="gl-ml-3" - category="secondary" - variant="confirm" + class="gl-ml-3 gl-align-self-center" + size="small" :href="status.detailsPath" data-testid="pipeline-view-btn" > diff --git a/app/assets/javascripts/ci/pipeline_editor/components/header/validation_segment.vue b/app/assets/javascripts/ci/pipeline_editor/components/header/validation_segment.vue index 8553256f13a..d54ad78b3d3 100644 --- a/app/assets/javascripts/ci/pipeline_editor/components/header/validation_segment.vue +++ b/app/assets/javascripts/ci/pipeline_editor/components/header/validation_segment.vue @@ -112,8 +112,8 @@ export default { {{ $options.i18n.loading }} </template> <span v-else data-testid="validation-segment"> - <span class="gl-max-w-full" data-qa-selector="validation_message_content"> - <gl-icon :name="icon" /> + <span class="gl-max-w-full"> + <gl-icon :name="icon" class="gl-mr-2" /> <gl-sprintf :message="message"> <template v-if="hasLink" #link="{ content }"> <gl-link :href="helpPath">{{ content }}</gl-link> |