Merge pull request #15308 from backstage/blam/start-over-next

Parse initial `formData` from `querystring` in `scaffolder/next`

.changeset/old-zoos-grow.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder': patch
+---
+
+Parse `formData` from `window.location.query` for `scaffolder/next`

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

@@ -189,6 +189,38 @@ describe('Stepper', () => {
     expect(getByText('invalid postcode')).toBeInTheDocument();
   });
 
+  it('should grab the initial formData from the query', async () => {
+    const manifest: TemplateParameterSchema = {
+      steps: [
+        {
+          title: 'Step 1',
+          schema: {
+            properties: {
+              firstName: {
+                type: 'string',
+              },
+            },
+          },
+        },
+      ],
+      title: 'initialize formData',
+    };
+
+    const mockFormData = { firstName: 'John' };
+
+    Object.defineProperty(window, 'location', {
+      value: {
+        search: `?formData=${JSON.stringify(mockFormData)}`,
+      },
+    });
+
+    const { getByRole } = await renderInTestApp(
+      <Stepper manifest={manifest} extensions={[]} onComplete={jest.fn()} />,
+    );
+
+    expect(getByRole('textbox', { name: 'firstName' })).toHaveValue('John');
+  });
+
   it('should initialize formState with undefined form values', async () => {
     const manifest: TemplateParameterSchema = {
       steps: [

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

@@ -38,6 +38,7 @@ import validator from '@rjsf/validator-ajv8';
 import { selectedTemplateRouteRef } from '../../../routes';
 import type { ErrorTransformer } from '@rjsf/utils';
 import { getDefaultFormState } from '@rjsf/utils';
+import { useFormData } from './useFormData';
 
 const useStyles = makeStyles(theme => ({
   backButton: {
@@ -72,7 +73,8 @@ export const Stepper = (props: StepperProps) => {
   const { steps } = useTemplateSchema(props.manifest);
   const apiHolder = useApiHolder();
   const [activeStep, setActiveStep] = useState(0);
-  const [formState, setFormState] = useState<Record<string, JsonValue>>({});
+  const [formState, setFormState] = useFormData();
+
   const [errors, setErrors] = useState<
     undefined | Record<string, FieldValidation>
   >();

plugins/scaffolder/src/next/TemplateWizardPage/Stepper/useFormData.ts

@@ -0,0 +1,32 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import qs from 'qs';
+import { useState } from 'react';
+
+export const useFormData = () => {
+  return useState<Record<string, any>>(() => {
+    const query = qs.parse(window.location.search, {
+      ignoreQueryPrefix: true,
+    });
+
+    try {
+      return JSON.parse(query.formData as string);
+    } catch (e) {
+      return {};
+    }
+  });
+};