Ensure the VSA form submits only required fields

With https://gitlab.com/gitlab-org/gitlab/-/merge_requests/64273 we
introduced changes to locally store labels in vuex, this added some
additional fields to VSA form, which are not needed when persisting
changes.

This MR adds an allow list for fields that should be submitted
for the Value stream.

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

@@ -70,6 +70,15 @@ export const formFieldKeys = [
   'endEventLabelId',
 ];
 
+export const editableFormFieldKeys = [
+  ...formFieldKeys,
+  'hidden',
+  'description',
+  'title',
+  'legend',
+  'custom',
+];
+
 export const defaultFields = formFieldKeys.reduce((acc, field) => ({ ...acc, [field]: null }), {});
 export const defaultErrors = formFieldKeys.reduce((acc, field) => ({ ...acc, [field]: [] }), {});
 

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

@@ -8,6 +8,7 @@ import {
   defaultFields,
   NAME_MAX_LENGTH,
   formFieldKeys,
+  editableFormFieldKeys,
 } from './constants';
 
 /**
@@ -151,9 +152,10 @@ export const formatStageDataForSubmission = (stages, isEditing = false) => {
       // The new stage is still `custom` but wont have an id until the form submits and its persisted to the DB
       editProps = id ? { id, custom: true } : { custom: true };
     }
+    const editableFields = pick(rest, editableFormFieldKeys);
     // While we work on https://gitlab.com/gitlab-org/gitlab/-/issues/321959 we should not allow editing default
     return custom
-      ? convertObjectPropsToSnakeCase({ ...rest, ...editProps, name })
+      ? convertObjectPropsToSnakeCase({ ...editableFields, ...editProps, name })
       : convertObjectPropsToSnakeCase({ ...editProps, name, custom: false });
   });
 };

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

 import {
   ERRORS,
   NAME_MAX_LENGTH,
+  editableFormFieldKeys,
 } from 'ee/analytics/cycle_analytics/components/create_value_stream_form/constants';
 import {
   initializeFormData,
@@ -177,14 +178,9 @@ describe('formatStageDataForSubmission', () => {
       expect(Object.keys(res).includes('id')).toBe(false);
     });
 
-    it('will not include the event fields', () => {
-      [
-        'start_event_identifier',
-        'start_event_label_id',
-        'end_event_identifier',
-        'end_event_label_id',
-      ].forEach((field) => {
-        expect(Object.keys(res).includes(field)).toBe(false);
+    it('will only include editable fields', () => {
+      Object.keys(res).forEach((field) => {
+        expect(editableFormFieldKeys.includes(field)).toBe(true);
       });
     });