Press n or j to go to the next uncovered block, b, p or k for the previous block.
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 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 | 9x 32x 32x 9x 32x 32x | <script> import { GlFormGroup, GlFormInput, GlFormText } from '@gitlab/ui'; import { i18n, ADDITIONAL_DEFAULT_STAGE_EVENTS } from './constants'; import StageFieldActions from './stage_field_actions.vue'; const findStageEvent = (stageEvents = [], eid = null) => { Iif (!eid) return ''; return stageEvents.find(({ identifier }) => identifier === eid); }; const eventIdToName = (stageEvents = [], eid) => { const event = findStageEvent(stageEvents, eid); return event?.name || ''; }; export default { name: 'DefaultStageFields', components: { StageFieldActions, GlFormGroup, GlFormInput, GlFormText, }, props: { index: { type: Number, required: true, }, stageLabel: { type: String, required: true, }, totalStages: { type: Number, required: true, }, stage: { type: Object, required: true, }, errors: { type: Object, required: false, default: () => ({}), }, stageEvents: { type: Array, required: true, }, }, methods: { isValid(field) { return !this.errors[field] || !this.errors[field]?.length; }, renderError(field) { return this.errors[field] ? this.errors[field]?.join('\n') : null; }, eventName(eventId) { return eventIdToName([...this.stageEvents, ...ADDITIONAL_DEFAULT_STAGE_EVENTS], eventId); }, }, i18n, }; </script> <template> <div class="gl-mb-4" data-testid="value-stream-stage-fields"> <div class="gl-display-flex gl-flex-direction-column gl-sm-flex-direction-row"> <div class="gl-flex-grow-1 gl-mr-2"> <gl-form-group :label="stageLabel" :state="isValid('name')" :invalid-feedback="renderError('name')" :data-testid="`default-stage-name-${index}`" :description="$options.i18n.DEFAULT_STAGE_FEATURES" > <!-- eslint-disable vue/no-mutating-props --> <gl-form-input v-model.trim="stage.name" :name="`create-value-stream-stage-${index}`" :placeholder="$options.i18n.FORM_FIELD_STAGE_NAME_PLACEHOLDER" disabled="disabled" required /> <!-- eslint-enable vue/no-mutating-props --> </gl-form-group> <div class="gl-display-flex gl-align-items-center" :data-testid="`stage-start-event-${index}`" > <span class="gl-m-0 gl-vertical-align-middle gl-mr-2 gl-font-weight-bold">{{ $options.i18n.DEFAULT_FIELD_START_EVENT_LABEL }}</span> <gl-form-text class="gl-m-0" tag="span">{{ eventName(stage.startEventIdentifier) }}</gl-form-text> </div> <div class="gl-display-flex gl-align-items-center" :data-testid="`stage-end-event-${index}`" > <span class="gl-m-0 gl-vertical-align-middle gl-mr-2 gl-font-weight-bold">{{ $options.i18n.DEFAULT_FIELD_END_EVENT_LABEL }}</span> <gl-form-text class="gl-m-0" tag="span">{{ eventName(stage.endEventIdentifier) }}</gl-form-text> </div> </div> <stage-field-actions class="gl-mt-3 gl-sm-mt-6!" :index="index" :stage-count="totalStages" @move="$emit('move', $event)" @hide="$emit('hide', $event)" /> </div> </div> </template> |