diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-03-16 18:18:33 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-03-16 18:18:33 +0000 |
commit | f64a639bcfa1fc2bc89ca7db268f594306edfd7c (patch) | |
tree | a2c3c2ebcc3b45e596949db485d6ed18ffaacfa1 /app/assets/javascripts/pipeline_editor/components/header/pipeline_editor_header.vue | |
parent | bfbc3e0d6583ea1a91f627528bedc3d65ba4b10f (diff) | |
download | gitlab-ce-f64a639bcfa1fc2bc89ca7db268f594306edfd7c.tar.gz |
Add latest changes from gitlab-org/gitlab@13-10-stable-eev13.10.0-rc40
Diffstat (limited to 'app/assets/javascripts/pipeline_editor/components/header/pipeline_editor_header.vue')
-rw-r--r-- | app/assets/javascripts/pipeline_editor/components/header/pipeline_editor_header.vue | 47 |
1 files changed, 44 insertions, 3 deletions
diff --git a/app/assets/javascripts/pipeline_editor/components/header/pipeline_editor_header.vue b/app/assets/javascripts/pipeline_editor/components/header/pipeline_editor_header.vue index ab41c0170e9..7a35e31e9ce 100644 --- a/app/assets/javascripts/pipeline_editor/components/header/pipeline_editor_header.vue +++ b/app/assets/javascripts/pipeline_editor/components/header/pipeline_editor_header.vue @@ -1,13 +1,40 @@ <script> +import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; +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 { - validationSegmentClasses: - 'gl-p-5 gl-bg-gray-10 gl-border-solid gl-border-1 gl-border-gray-100 gl-rounded-base', + pipelineStatusClasses, + validationSegmentClasses, + validationSegmentWithPipelineStatusClasses, components: { + PipelineStatus, ValidationSegment, }, + mixins: [glFeatureFlagsMixin()], props: { + ciFileContent: { + type: String, + required: true, + }, ciConfigData: { type: Object, required: true, @@ -17,13 +44,27 @@ export default { required: true, }, }, + computed: { + showPipelineStatus() { + return this.glFeatures.pipelineStatusForPipelineEditor; + }, + // 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" :class="$options.pipelineStatusClasses" /> <validation-segment - :class="$options.validationSegmentClasses" + :class="validationStyling" :loading="isCiConfigDataLoading" + :ci-file-content="ciFileContent" :ci-config="ciConfigData" /> </div> |