Address minor review feedback

Moves translatable text to constants and
minor template changes

ee/app/assets/javascripts/analytics/cycle_analytics/components/create_value_stream_form/constants.js

-import { s__ } from '~/locale';
+import { __, s__ } from '~/locale';
 
 export const I18N = {
+  RECOVER_HIDDEN_STAGE: s__('CustomCycleAnalytics|Recover hidden stage'),
+  RECOVER_STAGE_TITLE: s__('CustomCycleAnalytics|Default stages'),
+  RECOVER_STAGES_VISIBLE: s__('CustomCycleAnalytics|All default stages are currently visible'),
   SELECT_START_EVENT: s__('CustomCycleAnalytics|Select start event'),
   SELECT_END_EVENT: s__('CustomCycleAnalytics|Select end event'),
+  FORM_FIELD_NAME: s__('CustomCycleAnalytics|Name'),
+  FORM_FIELD_NAME_PLACEHOLDER: s__('CustomCycleAnalytics|Enter a name for the stage'),
+  FORM_FIELD_START_EVENT: s__('CustomCycleAnalytics|Start event'),
+  FORM_FIELD_START_EVENT_LABEL: s__('CustomCycleAnalytics|Start event label'),
+  FORM_FIELD_END_EVENT: s__('CustomCycleAnalytics|End event'),
+  FORM_FIELD_END_EVENT_LABEL: s__('CustomCycleAnalytics|End event label'),
+  BTN_UPDATE_STAGE: s__('CustomCycleAnalytics|Update stage'),
+  BTN_ADD_STAGE: s__('CustomCycleAnalytics|Add stage'),
+  TITLE_EDIT_STAGE: s__('CustomCycleAnalytics|Editing stage'),
+  TITLE_ADD_STAGE: s__('CustomCycleAnalytics|New stage'),
+  BTN_CANCEL: __('Cancel'),
 };
 
 export const ERRORS = {

ee/app/assets/javascripts/analytics/cycle_analytics/components/create_value_stream_form/custom_stage_fields.vue

 <script>
 import { GlFormGroup, GlFormInput, GlFormSelect } from '@gitlab/ui';
-import { s__ } from '~/locale';
 import LabelsSelector from '../labels_selector.vue';
+import { I18N } from './constants';
 import { startEventOptions, endEventOptions } from './utils';
-import {
-  isStartEvent,
-  isLabelEvent,
-  getAllowedEndEvents,
-  eventToOption,
-  eventsByIdentifier,
-} from '../../utils';
+import { isLabelEvent } from '../../utils';
 
 export default {
   name: 'CustomStageFormFields',
@@ -56,8 +50,11 @@ export default {
     },
   },
   methods: {
+    eventFieldClasses(condition) {
+      return condition ? 'w-50 mr-1' : 'w-100';
+    },
     hasFieldErrors(key) {
-      return this.errors[key]?.length > 0;
+      return this.errors[key]?.length < 1;
     },
     fieldErrorMessage(key) {
       return this.errors[key]?.join('\n');
@@ -66,14 +63,15 @@ export default {
       this.$emit('update', field, value);
     },
   },
+  I18N,
 };
 </script>
 <template>
   <div>
     <gl-form-group
-      :label="s__('CustomCycleAnalytics|Name')"
+      :label="$options.I18N.FORM_FIELD_NAME"
       label-for="custom-stage-name"
-      :state="!hasFieldErrors('name')"
+      :state="hasFieldErrors('name')"
       :invalid-feedback="fieldErrorMessage('name')"
       data-testid="custom-stage-name"
     >
@@ -82,18 +80,18 @@ export default {
         class="form-control"
         type="text"
         name="custom-stage-name"
-        :placeholder="s__('CustomCycleAnalytics|Enter a name for the stage')"
+        :placeholder="$options.I18N.FORM_FIELD_NAME_PLACEHOLDER"
         required
         @input="handleUpdateField('name', $event)"
       />
     </gl-form-group>
     <div class="d-flex" :class="{ 'justify-content-between': startEventRequiresLabel }">
-      <div :class="[startEventRequiresLabel ? 'w-50 mr-1' : 'w-100']">
+      <div :class="eventFieldClasses(startEventRequiresLabel)">
         <gl-form-group
           data-testid="custom-stage-start-event"
-          :label="s__('CustomCycleAnalytics|Start event')"
+          :label="$options.I18N.FORM_FIELD_START_EVENT"
           label-for="custom-stage-start-event"
-          :state="!hasFieldErrors('startEventIdentifier')"
+          :state="hasFieldErrors('startEventIdentifier')"
           :invalid-feedback="fieldErrorMessage('startEventIdentifier')"
         >
           <gl-form-select
@@ -108,9 +106,9 @@ export default {
       <div v-if="startEventRequiresLabel" class="w-50 ml-1">
         <gl-form-group
           data-testid="custom-stage-start-event-label"
-          :label="s__('CustomCycleAnalytics|Start event label')"
+          :label="$options.I18N.FORM_FIELD_START_EVENT_LABEL"
           label-for="custom-stage-start-event-label"
-          :state="!hasFieldErrors('startEventLabelId')"
+          :state="hasFieldErrors('startEventLabelId')"
           :invalid-feedback="fieldErrorMessage('startEventLabelId')"
         >
           <labels-selector
@@ -122,12 +120,12 @@ export default {
       </div>
     </div>
     <div class="d-flex" :class="{ 'justify-content-between': endEventRequiresLabel }">
-      <div :class="[endEventRequiresLabel ? 'w-50 mr-1' : 'w-100']">
+      <div :class="eventFieldClasses(endEventRequiresLabel)">
         <gl-form-group
           data-testid="custom-stage-end-event"
-          :label="s__('CustomCycleAnalytics|End event')"
+          :label="$options.I18N.FORM_FIELD_END_EVENT"
           label-for="custom-stage-end-event"
-          :state="!hasFieldErrors('endEventIdentifier')"
+          :state="hasFieldErrors('endEventIdentifier')"
           :invalid-feedback="fieldErrorMessage('endEventIdentifier')"
         >
           <gl-form-select
@@ -143,9 +141,9 @@ export default {
       <div v-if="endEventRequiresLabel" class="w-50 ml-1">
         <gl-form-group
           data-testid="custom-stage-end-event-label"
-          :label="s__('CustomCycleAnalytics|End event label')"
+          :label="$options.I18N.FORM_FIELD_END_EVENT_LABEL"
           label-for="custom-stage-end-event-label"
-          :state="!hasFieldErrors('endEventLabelId')"
+          :state="hasFieldErrors('endEventLabelId')"
           :invalid-feedback="fieldErrorMessage('endEventLabelId')"
         >
           <labels-selector

ee/app/assets/javascripts/analytics/cycle_analytics/components/custom_stage_form.vue

@@ -13,7 +13,7 @@ import { s__ } from '~/locale';
 import { convertObjectPropsToSnakeCase } from '~/lib/utils/common_utils';
 import CustomStageFormFields from './create_value_stream_form/custom_stage_fields.vue';
 import { validateFields, initializeFormData } from './create_value_stream_form/utils';
-import { defaultFields, ERRORS } from './create_value_stream_form/constants';
+import { defaultFields, ERRORS, I18N } from './create_value_stream_form/constants';
 import { STAGE_ACTIONS } from '../constants';
 import { getAllowedEndEvents, getLabelEventsIdentifiers, isLabelEvent } from '../utils';
 
@@ -99,14 +99,10 @@ export default {
       return !endEvents.length || !endEvents.includes(endEventIdentifier);
     },
     saveStageText() {
-      return this.isEditingCustomStage
-        ? s__('CustomCycleAnalytics|Update stage')
-        : s__('CustomCycleAnalytics|Add stage');
+      return this.isEditingCustomStage ? I18N.BTN_UPDATE_STAGE : I18N.BTN_ADD_STAGE;
     },
     formTitle() {
-      return this.isEditingCustomStage
-        ? s__('CustomCycleAnalytics|Editing stage')
-        : s__('CustomCycleAnalytics|New stage');
+      return this.isEditingCustomStage ? I18N.TITLE_EDIT_STAGE : I18N.TITLE_ADD_STAGE;
     },
     hasHiddenStages() {
       return this.hiddenStages.length;
@@ -170,6 +166,7 @@ export default {
       this.errors = { ...this.errors, ...newErrors };
     },
   },
+  I18N,
 };
 </script>
 <template>
@@ -180,11 +177,13 @@ export default {
     <div class="gl-mb-1 gl-display-flex gl-justify-content-space-between gl-align-items-center">
       <h4>{{ formTitle }}</h4>
       <gl-dropdown
-        :text="__('Recover hidden stage')"
+        :text="$options.I18N.RECOVER_HIDDEN_STAGE"
         data-testid="recover-hidden-stage-dropdown"
         right
       >
-        <gl-dropdown-section-header>{{ __('Default stages') }}</gl-dropdown-section-header>
+        <gl-dropdown-section-header>{{
+          $options.I18N.RECOVER_STAGE_TITLE
+        }}</gl-dropdown-section-header>
         <template v-if="hasHiddenStages">
           <gl-dropdown-item
             v-for="stage in hiddenStages"
@@ -193,7 +192,7 @@ export default {
             >{{ stage.title }}</gl-dropdown-item
           >
         </template>
-        <p v-else class="mx-3 my-2">{{ __('All default stages are currently visible') }}</p>
+        <p v-else class="mx-3 my-2">{{ $options.I18N.RECOVER_STAGES_VISIBLE }}</p>
       </gl-dropdown>
     </div>
     <custom-stage-form-fields
@@ -210,7 +209,7 @@ export default {
         data-testid="cancel-custom-stage"
         @click="handleCancel"
       >
-        {{ __('Cancel') }}
+        {{ $options.I18N.BTN_CANCEL }}
       </gl-button>
       <gl-button
         :disabled="!isComplete || !isDirty"