nitialize all formData in next/Stepper

Signed-off-by: Paul Cowan <paul.cowan@cutting.scot>

.changeset/early-parrots-guess.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder': patch
+---
+
+initialize all formData in next/Stepper

plugins/scaffolder/src/next/TemplateWizardPage/Stepper/Stepper.test.tsx

@@ -19,6 +19,7 @@ import { Stepper } from './Stepper';
 import { renderInTestApp } from '@backstage/test-utils';
 import { act, fireEvent } from '@testing-library/react';
 import type { RJSFValidationError } from '@rjsf/utils';
+import { JsonValue } from '@backstage/types';
 
 describe('Stepper', () => {
   it('should render the step titles for each step of the manifest', async () => {
@@ -187,4 +188,43 @@ describe('Stepper', () => {
 
     expect(getByText('invalid postcode')).toBeInTheDocument();
   });
-});
+
+  it('should initialize formState with undefined form values', async () => {
+    const manifest: TemplateParameterSchema = {
+      steps: [
+        {
+          title: 'Step 1',
+          schema: {
+            properties: {
+              firstName: {
+                type: 'string',
+              },
+            },
+          },
+        },
+      ],
+      title: 'initialize formData',
+    };
+
+    const onComplete = jest.fn(async (values: Record<string, JsonValue>) => {
+      expect(values).toHaveProperty('firstName');
+    });
+
+    const { getByRole } = await renderInTestApp(
+      <Stepper manifest={manifest} extensions={[]} onComplete={onComplete} />,
+    );
+
+    await act(async () => {
+      await fireEvent.click(getByRole('button', { name: 'Review' }));
+    });
+
+    expect(getByRole('button', { name: 'Create' })).toBeInTheDocument();
+
+    await act(async () => {
+      await fireEvent.click(getByRole('button', { name: 'Create' }));
+    });
+
+    // flush promises
+    return new Promise(process.nextTick);
+  });
+});

plugins/scaffolder/src/next/TemplateWizardPage/Stepper/Stepper.tsx

@@ -37,6 +37,7 @@ import { ReviewState } from './ReviewState';
 import validator from '@rjsf/validator-ajv8';
 import { selectedTemplateRouteRef } from '../../../routes';
 import type { ErrorTransformer } from '@rjsf/utils';
+import { getDefaultFormState } from '@rjsf/utils';
 
 const useStyles = makeStyles(theme => ({
   backButton: {
@@ -108,7 +109,18 @@ export const Stepper = (props: StepperProps) => {
     // to display it's own loading? Or should we grey out the entire form.
     setErrors(undefined);
 
-    const returnedValidation = await validation(formData);
+    const schema = steps[activeStep]?.schema;
+    const rootSchema = steps[activeStep]?.mergedSchema;
+
+    const newFormData = getDefaultFormState(
+      validator,
+      schema,
+      formData,
+      rootSchema,
+      true,
+    );
+
+    const returnedValidation = await validation(newFormData);
 
     const hasErrors = Object.values(returnedValidation).some(
       i => i.__errors?.length,
@@ -124,7 +136,7 @@ export const Stepper = (props: StepperProps) => {
         return stepNum;
       });
     }
-    setFormState(current => ({ ...current, ...formData }));
+    setFormState(current => ({ ...current, ...newFormData }));
   };
 
   return (