Merge branch '267536-vsa-move-custom-value-stream-fields-to-component' into 'master'

Refactor custom stage form specs

See merge request gitlab-org/gitlab!49651

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

@@ -138,7 +138,7 @@ export default {
           />
         </gl-form-group>
       </div>
-      <div v-if="endEventRequiresLabel" class="w-50 ml-1">
+      <div v-if="endEventRequiresLabel" class="gl-w-half gl-ml-2">
         <gl-form-group
           data-testid="custom-stage-end-event-label"
           :label="$options.I18N.FORM_FIELD_END_EVENT_LABEL"

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

@@ -172,7 +172,7 @@ export default {
   <div v-if="isLoading">
     <gl-loading-icon class="mt-4" size="md" />
   </div>
-  <form v-else class="custom-stage-form m-4 mt-0">
+  <form v-else class="custom-stage-form m-4 gl-mt-0">
     <div class="gl-mb-1 gl-display-flex gl-justify-content-space-between gl-align-items-center">
       <h4>{{ formTitle }}</h4>
       <gl-dropdown
@@ -191,7 +191,7 @@ export default {
             >{{ stage.title }}</gl-dropdown-item
           >
         </template>
-        <p v-else class="mx-3 my-2">{{ $options.I18N.RECOVER_STAGES_VISIBLE }}</p>
+        <p v-else class="gl-mx-5 gl-my-3">{{ $options.I18N.RECOVER_STAGES_VISIBLE }}</p>
       </gl-dropdown>
     </div>
     <custom-stage-form-fields
@@ -201,7 +201,7 @@ export default {
       :events="events"
       @update="handleUpdateFields"
     />
-    <div class="custom-stage-form-actions">
+    <div>
       <gl-button
         :disabled="!isDirty"
         category="primary"
@@ -221,7 +221,7 @@ export default {
         {{ saveStageText }}
       </gl-button>
     </div>
-    <div class="mt-2">
+    <div class="gl-mt-3">
       <gl-sprintf
         :message="
           __(

ee/spec/frontend/analytics/cycle_analytics/components/__snapshots__/custom_stage_form_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 exports[`CustomStageForm Editing a custom stage isSavingCustomStage=true displays a loading icon 1`] = `
-"<button data-testid=\\"save-custom-stage\\" type=\\"button\\" disabled=\\"disabled\\" class=\\"btn btn-success btn-md disabled gl-button\\">
-  <!---->
-  <!----> <span class=\\"gl-button-text\\"><span class=\\"gl-spinner-container\\"><span aria-label=\\"Loading\\" class=\\"align-text-bottom gl-spinner gl-spinner-dark gl-spinner-sm\\"></span></span>
+"<gl-button-stub category=\\"primary\\" variant=\\"success\\" size=\\"medium\\" icon=\\"\\" buttontextclasses=\\"\\" disabled=\\"true\\" data-testid=\\"save-custom-stage\\">
+  <gl-loading-icon-stub label=\\"Loading\\" size=\\"sm\\" color=\\"dark\\" inline=\\"true\\"></gl-loading-icon-stub>
   Update stage
-  </span></button>"
+</gl-button-stub>"
 `;
 exports[`CustomStageForm isSavingCustomStage=true displays a loading icon 1`] = `
-"<button data-testid=\\"save-custom-stage\\" type=\\"button\\" disabled=\\"disabled\\" class=\\"btn btn-success btn-md disabled gl-button\\">
-  <!---->
-  <!----> <span class=\\"gl-button-text\\"><span class=\\"gl-spinner-container\\"><span aria-label=\\"Loading\\" class=\\"align-text-bottom gl-spinner gl-spinner-dark gl-spinner-sm\\"></span></span>
+"<gl-button-stub category=\\"primary\\" variant=\\"success\\" size=\\"medium\\" icon=\\"\\" buttontextclasses=\\"\\" disabled=\\"true\\" data-testid=\\"save-custom-stage\\">
+  <gl-loading-icon-stub label=\\"Loading\\" size=\\"sm\\" color=\\"dark\\" inline=\\"true\\"></gl-loading-icon-stub>
   Add stage
-  </span></button>"
+</gl-button-stub>"
 `;

ee/spec/frontend/analytics/cycle_analytics/components/create_value_stream_form/custom_stage_fields_spec.js

@@ -91,7 +91,7 @@ describe('CustomStageFields', () => {
   describe.each([
     ['Start event label', findStartEventLabel],
-    ['End event label', findStartEventLabel],
+    ['End event label', findEndEventLabel],
   ])('Default state', (field, finder) => {
     it(`field '${field}' is hidden by default`, () => {
       expect(finder(wrapper).exists()).toBe(false);
@@ -172,7 +172,7 @@ describe('CustomStageFields', () => {
         });
       });
-      it('will display the start event label field if a label event is selected', () => {
+      it('will display the end event label field if a label event is selected', () => {
         expect(findEndEventLabel(wrapper).exists()).toEqual(true);
       });