All files / ee/app/assets/javascripts/analytics/cycle_analytics/components/create_value_stream_form default_stage_fields.vue

60% Statements 6/10
0% Branches 0/7
42.85% Functions 3/7
66.66% Lines 6/9

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>