diff --git a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx index 16a3bb0761..394fe517ce 100644 --- a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx +++ b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx @@ -115,7 +115,8 @@ export const Stepper = (stepperProps: StepperProps) => { const apiHolder = useApiHolder(); const [activeStep, setActiveStep] = useState(0); const [isValidating, setIsValidating] = useState(false); - const [formState, setFormState] = useFormDataFromQuery(props.initialState); + const initialState = useFormDataFromQuery(props.initialState); + const [formState, setFormState] = useState<{ [step: string]: any }>(); const [errors, setErrors] = useState(); const styles = useStyles(); @@ -164,11 +165,6 @@ export const Stepper = (stepperProps: StepperProps) => { [setFormState, activeStep], ); - const handleCreate = useCallback(() => { - props.onCreate(formState); - analytics.captureEvent('click', `${createLabel}`); - }, [props, formState, analytics, createLabel]); - const currentStep = useTransformSchemaToProps(steps[activeStep], { layouts }); const handleNext = async ({ @@ -207,6 +203,9 @@ export const Stepper = (stepperProps: StepperProps) => { const mergedUiSchema = merge({}, propUiSchema, currentStep?.uiSchema); const mergedState = useMemo(() => { + if (!formState) { + return initialState; + } const { [`step${activeStep}`]: activeState, ...historicalState } = formState; const chronologicalState = { @@ -214,7 +213,12 @@ export const Stepper = (stepperProps: StepperProps) => { [`step${activeStep}`]: activeState, }; return merge({}, ...Object.values(chronologicalState)); - }, [formState, activeStep]); + }, [formState, activeStep, initialState]); + + const handleCreate = useCallback(() => { + props.onCreate(mergedState); + analytics.captureEvent('click', `${createLabel}`); + }, [props, mergedState, analytics, createLabel]); return ( <> diff --git a/plugins/scaffolder-react/src/next/hooks/useFormDataFromQuery.ts b/plugins/scaffolder-react/src/next/hooks/useFormDataFromQuery.ts index 966a8fe8f4..9f9f4ed9a2 100644 --- a/plugins/scaffolder-react/src/next/hooks/useFormDataFromQuery.ts +++ b/plugins/scaffolder-react/src/next/hooks/useFormDataFromQuery.ts @@ -13,10 +13,8 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - import { JsonValue } from '@backstage/types'; import qs from 'qs'; -import { useState } from 'react'; /** * This hook is used to get the formData from the query string. @@ -25,19 +23,17 @@ import { useState } from 'react'; export const useFormDataFromQuery = ( initialState?: Record, ) => { - return useState>(() => { - if (initialState) { - return initialState; - } + if (initialState) { + return initialState; + } - const query = qs.parse(window.location.search, { - ignoreQueryPrefix: true, - }); - - try { - return JSON.parse(query.formData as string); - } catch (e) { - return {}; - } + const query = qs.parse(window.location.search, { + ignoreQueryPrefix: true, }); + + try { + return JSON.parse(query.formData as string); + } catch (e) { + return {}; + } }; diff --git a/plugins/scaffolder/src/next/TemplateWizardPage/TemplateWizardPage.test.tsx b/plugins/scaffolder/src/next/TemplateWizardPage/TemplateWizardPage.test.tsx index 2b1522cac2..2639e8149c 100644 --- a/plugins/scaffolder/src/next/TemplateWizardPage/TemplateWizardPage.test.tsx +++ b/plugins/scaffolder/src/next/TemplateWizardPage/TemplateWizardPage.test.tsx @@ -140,7 +140,7 @@ describe('TemplateWizardPage', () => { // And the "Create" button should have fired an event expect(analyticsMock.getEvents()[1]).toMatchObject({ action: 'create', - subject: 'test', + subject: 'expected-name', context: { entityRef: 'template:default/test' }, value: 120, });