Fix handleCreate and initialState cases

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

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<undefined | FormValidation>();
   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 (
     <>

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<string, JsonValue>,
 ) => {
-  return useState<Record<string, any>>(() => {
-    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 {};
+  }
 };

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,
     });