Add support for omitExtraData and liveOmit properties.

Signed-off-by: Jasper Boeijenga <jboeijenga@gmail.com>

plugins/scaffolder-react/src/components/types.ts

@@ -32,7 +32,12 @@ export type TemplateGroupFilter = {
  */
 export type FormProps = Pick<
   SchemaFormProps,
-  'transformErrors' | 'noHtml5Validate' | 'uiSchema' | 'formContext'
+  | 'transformErrors'
+  | 'noHtml5Validate'
+  | 'uiSchema'
+  | 'formContext'
+  | 'omitExtraData'
+  | 'liveOmit'
 >;
 
 /**

plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx

@@ -155,9 +155,13 @@ export const Stepper = (stepperProps: StepperProps) => {
   };
 
   const handleChange = useCallback(
-    (e: IChangeEvent) =>
-      setFormState(current => ({ ...current, ...e.formData })),
-    [setFormState],
+    (e: IChangeEvent) => {
+      setFormState(current => ({
+        ...current,
+        [`step${activeStep}`]: e.formData,
+      }));
+    },
+    [setFormState, activeStep],
   );
 
   const handleCreate = useCallback(() => {
@@ -191,7 +195,7 @@ export const Stepper = (stepperProps: StepperProps) => {
         return stepNum;
       });
     }
-    setFormState(current => ({ ...current, ...formData }));
+    setFormState(current => ({ ...current, [`step${activeStep}`]: formData }));
   };
 
   const {
@@ -202,6 +206,16 @@ export const Stepper = (stepperProps: StepperProps) => {
 
   const mergedUiSchema = merge({}, propUiSchema, currentStep?.uiSchema);
 
+  const mergedState = useMemo(() => {
+    const { [`step${activeStep}`]: activeState, ...historicalState } =
+      formState;
+    const chronologicalState = {
+      ...historicalState,
+      [`step${activeStep}`]: activeState,
+    };
+    return merge({}, ...Object.values(chronologicalState));
+  }, [formState, activeStep]);
+
   return (
     <>
       {isValidating && <LinearProgress variant="indeterminate" />}
@@ -237,8 +251,8 @@ export const Stepper = (stepperProps: StepperProps) => {
           <Form
             validator={validator}
             extraErrors={errors as unknown as ErrorSchema}
-            formData={formState}
-            formContext={{ ...propFormContext, formData: formState }}
+            formData={mergedState}
+            formContext={{ ...propFormContext, formData: mergedState }}
             schema={currentStep.schema}
             uiSchema={mergedUiSchema}
             onSubmit={handleNext}
@@ -274,7 +288,7 @@ export const Stepper = (stepperProps: StepperProps) => {
         ReviewStepComponent ? (
           <ReviewStepComponent
             disableButtons={isValidating}
-            formData={formState}
+            formData={mergedState}
             handleBack={handleBack}
             handleReset={() => {}}
             steps={steps}
@@ -282,7 +296,7 @@ export const Stepper = (stepperProps: StepperProps) => {
           />
         ) : (
           <>
-            <ReviewStateComponent formState={formState} schemas={steps} />
+            <ReviewStateComponent formState={mergedState} schemas={steps} />
             <div className={styles.footer}>
               <Button
                 onClick={handleBack}

plugins/scaffolder/src/components/Router/Router.tsx

@@ -166,6 +166,7 @@ export const Router = (props: PropsWithChildren<RouterProps>) => {
             <TemplateEditorPage
               customFieldExtensions={fieldExtensions}
               layouts={customLayouts}
+              formProps={props.formProps}
             />
           </SecretsContextProvider>
         }

plugins/scaffolder/src/next/TemplateEditorPage/TemplateEditor.tsx

@@ -15,7 +15,10 @@
  */
 import { makeStyles } from '@material-ui/core/styles';
 import React, { useState } from 'react';
-import type { LayoutOptions } from '@backstage/plugin-scaffolder-react';
+import type {
+  FormProps,
+  LayoutOptions,
+} from '@backstage/plugin-scaffolder-react';
 import { FieldExtensionOptions } from '@backstage/plugin-scaffolder-react';
 import { TemplateDirectoryAccess } from '../../lib/filesystem';
 import { DirectoryEditorProvider } from './DirectoryEditorContext';
@@ -60,6 +63,7 @@ export const TemplateEditor = (props: {
   fieldExtensions?: FieldExtensionOptions<any, any>[];
   layouts?: LayoutOptions[];
   onClose?: () => void;
+  formProps?: FormProps;
 }) => {
   const classes = useStyles();
 
@@ -80,6 +84,7 @@ export const TemplateEditor = (props: {
               setErrorText={setErrorText}
               fieldExtensions={props.fieldExtensions}
               layouts={props.layouts}
+              formProps={props.formProps}
             />
           </section>
           <section className={classes.results}>

plugins/scaffolder/src/next/TemplateEditorPage/TemplateEditorForm.tsx

@@ -23,6 +23,7 @@ import {
   LayoutOptions,
   TemplateParameterSchema,
   FieldExtensionOptions,
+  FormProps,
 } from '@backstage/plugin-scaffolder-react';
 import {
   Stepper,
@@ -87,6 +88,7 @@ interface TemplateEditorFormProps {
   onDryRun?: (data: JsonObject) => Promise<void>;
   fieldExtensions?: FieldExtensionOptions<any, any>[];
   layouts?: LayoutOptions[];
+  formProps?: FormProps;
 }
 
 function isJsonObject(value: JsonValue | undefined): value is JsonObject {
@@ -195,6 +197,7 @@ export function TemplateEditorForm(props: TemplateEditorFormProps) {
               await onDryRun?.(options);
             }}
             layouts={layouts}
+            formProps={props.formProps}
           />
         </ErrorBoundary>
       </div>
@@ -206,7 +209,7 @@ export function TemplateEditorForm(props: TemplateEditorFormProps) {
 export function TemplateEditorFormDirectoryEditorDryRun(
   props: Pick<
     TemplateEditorFormProps,
-    'setErrorText' | 'fieldExtensions' | 'layouts'
+    'setErrorText' | 'fieldExtensions' | 'layouts' | 'formProps'
   >,
 ) {
   const { setErrorText, fieldExtensions = [], layouts } = props;
@@ -245,6 +248,7 @@ export function TemplateEditorFormDirectoryEditorDryRun(
       setErrorText={setErrorText}
       content={content}
       layouts={layouts}
+      formProps={props.formProps}
     />
   );
 }

plugins/scaffolder/src/next/TemplateEditorPage/TemplateEditorPage.tsx

@@ -24,6 +24,7 @@ import { TemplateEditor } from './TemplateEditor';
 import { TemplateFormPreviewer } from './TemplateFormPreviewer';
 import {
   FieldExtensionOptions,
+  FormProps,
   type LayoutOptions,
 } from '@backstage/plugin-scaffolder-react';
 import { TemplateEditorIntro } from './TemplateEditorIntro';
@@ -54,6 +55,7 @@ interface TemplateEditorPageProps {
   defaultPreviewTemplate?: string;
   customFieldExtensions?: FieldExtensionOptions<any, any>[];
   layouts?: LayoutOptions[];
+  formProps?: FormProps;
 }
 
 export function TemplateEditorPage(props: TemplateEditorPageProps) {
@@ -79,6 +81,7 @@ export function TemplateEditorPage(props: TemplateEditorPageProps) {
         fieldExtensions={props.customFieldExtensions}
         onClose={() => setSelection(undefined)}
         layouts={props.layouts}
+        formProps={props.formProps}
       />
     );
   } else if (selection?.type === 'form') {
@@ -88,6 +91,7 @@ export function TemplateEditorPage(props: TemplateEditorPageProps) {
         customFieldExtensions={props.customFieldExtensions}
         onClose={() => setSelection(undefined)}
         layouts={props.layouts}
+        formProps={props.formProps}
       />
     );
   } else if (selection?.type === 'field-explorer') {

plugins/scaffolder/src/next/TemplateEditorPage/TemplateFormPreviewer.tsx

@@ -33,6 +33,7 @@ import yaml from 'yaml';
 import {
   LayoutOptions,
   FieldExtensionOptions,
+  FormProps,
 } from '@backstage/plugin-scaffolder-react';
 import { TemplateEditorForm } from './TemplateEditorForm';
 import { TemplateEditorTextArea } from './TemplateEditorTextArea';
@@ -114,11 +115,13 @@ export const TemplateFormPreviewer = ({
   customFieldExtensions = [],
   onClose,
   layouts = [],
+  formProps,
 }: {
   defaultPreviewTemplate?: string;
   customFieldExtensions?: FieldExtensionOptions<any, any>[];
   onClose?: () => void;
   layouts?: LayoutOptions[];
+  formProps?: FormProps;
 }) => {
   const classes = useStyles();
   const { t } = useTranslationRef(scaffolderTranslationRef);
@@ -213,6 +216,7 @@ export const TemplateFormPreviewer = ({
             fieldExtensions={customFieldExtensions}
             setErrorText={setErrorText}
             layouts={layouts}
+            formProps={formProps}
           />
         </div>
       </main>