1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
<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 {
pipelineStatusClasses,
validationSegmentClasses,
validationSegmentWithPipelineStatusClasses,
components: {
PipelineStatus,
ValidationSegment,
},
mixins: [glFeatureFlagsMixin()],
props: {
ciConfigData: {
type: Object,
required: true,
},
isCiConfigDataLoading: {
type: Boolean,
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="validationStyling"
:loading="isCiConfigDataLoading"
:ci-config="ciConfigData"
/>
</div>
</template>
|
