Prune obsolete properties from form data before Review and Submit (#1706)

Author: lokanandaprabhu

workspaces/orchestrator/.changeset/prune-obsolete-form-properties.md

@@ -0,0 +1,10 @@
+---
+'@red-hat-developer-hub/backstage-plugin-orchestrator-form-react': minor
+---
+
+Prune obsolete properties from form data before Review and Submit
+
+- Update `OrchestratorForm` to prune form data before passing to Review step and execution
+- Fixes issue where SchemaUpdater dynamically adds/removes fields but old values remain in form state
+- Ensures only properties that exist in the final schema version are displayed on Review page and submitted
+- Prevents stale data from previous schema versions from being included in workflow execution

workspaces/orchestrator/plugins/orchestrator-form-react/package.json

@@ -55,6 +55,7 @@
     "@types/json-schema": "7.0.15",
     "@types/lodash": "^4.14.151",
     "@types/react": "^18.2.58",
+    "json-schema": "^0.4.0",
     "prettier": "3.6.2",
     "react": "^16.13.1 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0",

workspaces/orchestrator/plugins/orchestrator-form-react/src/components/OrchestratorForm.tsx

@@ -27,6 +27,7 @@ import { OrchestratorFormContextProps } from '@red-hat-developer-hub/backstage-p
 
 import { TranslationFunction } from '../hooks/useTranslation';
 import generateUiSchema from '../utils/generateUiSchema';
+import { pruneFormData } from '../utils/pruneFormData';
 import { StepperContextProvider } from '../utils/StepperContext';
 import OrchestratorFormWrapper from './OrchestratorFormWrapper';
 import ReviewStep from './ReviewStep';
@@ -136,9 +137,16 @@ const OrchestratorForm = ({
   );
   const isMultiStep = numStepsInMultiStepSchema !== undefined;
 
+  // Prune form data to remove properties that no longer exist in the schema
+  // This handles the case where SchemaUpdater dynamically adds/removes fields
+  const prunedFormData = useMemo(() => {
+    return pruneFormData(formData, schema);
+  }, [formData, schema]);
+
   const _handleExecute = useCallback(() => {
-    handleExecute(formData);
-  }, [formData, handleExecute]);
+    // Use pruned data for execution to avoid submitting stale properties
+    handleExecute(prunedFormData);
+  }, [prunedFormData, handleExecute]);
 
   const onSubmit = useCallback(
     (_formData: JsonObject) => {
@@ -154,14 +162,14 @@ const OrchestratorForm = ({
   const reviewStep = useMemo(
     () => (
       <ReviewStep
-        data={formData}
+        data={prunedFormData}
         schema={schema}
         busy={isExecuting}
         handleExecute={_handleExecute}
         // no schema update here
       />
     ),
-    [formData, schema, isExecuting, _handleExecute],
+    [prunedFormData, schema, isExecuting, _handleExecute],
   );
 
   return (