Minor maintainer feedback

Replace bootstrap utilites with gl- versions
and adds jsDoc information for utils

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

@@ -51,7 +51,7 @@ export default {
   },
   methods: {
     eventFieldClasses(condition) {
-      return condition ? 'w-50 mr-1' : 'w-100';
+      return condition ? 'gl-w-half gl-mr-2' : 'gl-w-full';
     },
     hasFieldErrors(key) {
       return this.errors[key]?.length < 1;
@@ -85,7 +85,7 @@ export default {
         @input="handleUpdateField('name', $event)"
       />
     </gl-form-group>
-    <div class="d-flex" :class="{ 'justify-content-between': startEventRequiresLabel }">
+    <div class="d-flex" :class="{ 'gl-justify-content-between': startEventRequiresLabel }">
       <div :class="eventFieldClasses(startEventRequiresLabel)">
         <gl-form-group
           data-testid="custom-stage-start-event"
@@ -103,7 +103,7 @@ export default {
           />
         </gl-form-group>
       </div>
-      <div v-if="startEventRequiresLabel" class="w-50 ml-1">
+      <div v-if="startEventRequiresLabel" class="gl-w-half gl-ml-2">
         <gl-form-group
           data-testid="custom-stage-start-event-label"
           :label="$options.I18N.FORM_FIELD_START_EVENT_LABEL"
@@ -119,7 +119,7 @@ export default {
         </gl-form-group>
       </div>
     </div>
-    <div class="d-flex" :class="{ 'justify-content-between': endEventRequiresLabel }">
+    <div class="d-flex" :class="{ 'gl-justify-content-between': endEventRequiresLabel }">
       <div :class="eventFieldClasses(endEventRequiresLabel)">
         <gl-form-group
           data-testid="custom-stage-end-event"

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

@@ -2,11 +2,38 @@ import { isStartEvent, getAllowedEndEvents, eventToOption, eventsByIdentifier }
 import { I18N, ERRORS, defaultErrors, defaultFields } from './constants';
 import { DEFAULT_STAGE_NAMES } from '../../constants';
 
+/**
+ * @typedef {Object} CustomStageEvents
+ * @property {String} canBeStartEvent - Title of the metric measured
+ * @property {String} name - Friendly name for the event
+ * @property {String} identifier - snakeized name for the event
+ *
+ * @typedef {Object} DropdownData
+ * @property {String} text - Friendly name for the event
+ * @property {String} value - Value to be submitted for the dropdown
+ */
+
+/**
+ * Takes an array of custom stage events to return only the
+ * events where `canBeStartEvent` is true and converts them
+ * to { value, text } pairs for use in dropdowns
+ *
+ * @param {CustomStageEvents[]} events
+ * @returns {DropdownData[]} array of start events formatted for dropdowns
+ */
 export const startEventOptions = eventsList => [
   { value: null, text: I18N.SELECT_START_EVENT },
   ...eventsList.filter(isStartEvent).map(eventToOption),
 ];
 
+/**
+ * Takes an array of custom stage events to return only the
+ * events where `canBeStartEvent` is false and converts them
+ * to { value, text } pairs for use in dropdowns
+ *
+ * @param {CustomStageEvents[]} events
+ * @returns {DropdownData[]} array end events formatted for dropdowns
+ */
 export const endEventOptions = (eventsList, startEventIdentifier) => {
   const endEvents = getAllowedEndEvents(eventsList, startEventIdentifier);
   return [
@@ -15,6 +42,19 @@ export const endEventOptions = (eventsList, startEventIdentifier) => {
   ];
 };
 
+/**
+ * @typedef {Object} CustomStageFormData
+ * @property {Object.<String, String>} fields - form field values
+ * @property {Object.<String, Array>} errors - form field errors
+ */
+
+/**
+ * Initializes the fields and errors for the custom stages form
+ * providing defaults for any missing keys
+ *
+ * @param {CustomStageFormData} data
+ * @returns {CustomStageFormData} the updated initial data with all defaults
+ */
 export const initializeFormData = ({ fields, errors }) => {
   const initErrors = fields?.endEventIdentifier
     ? defaultErrors
@@ -34,6 +74,14 @@ export const initializeFormData = ({ fields, errors }) => {
   };
 };
 
+/**
+ * Validates the form fields for the custom stages form
+ * Any errors will be returned in a object where the key is
+ * the name of the field.g
+ *
+ * @param {Object} fields key value pair of form field values
+ * @returns {Object} key value pair of form fields with an array of errors
+ */
 export const validateFields = fields => {
   const newErrors = {};