From 8e20d72cd4f857c63ec5a818b2f66b640f2639c3 Mon Sep 17 00:00:00 2001
From: Phil Kuang <pkuang@factset.com>
Date: Tue, 21 Dec 2021 14:50:55 -0500
Subject: [PATCH] feat(TemplatePage): serialize form data into url for back
 navigation

Signed-off-by: Phil Kuang <pkuang@factset.com>
---
 .../components/TemplatePage/TemplatePage.tsx  | 23 +++++++++++++++----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx b/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx
index e4d2cea04e..9d1e7a3e2d 100644
--- a/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx
+++ b/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx
@@ -121,12 +121,13 @@ export const TemplatePage = ({
   const navigate = useNavigate();
   const rootLink = useRouteRef(rootRouteRef);
   const { schema, loading, error } = useTemplateParameterSchema(templateName);
-  const query = qs.parse(window.location.search, {
-    ignoreQueryPrefix: true,
+  const [formState, setFormState] = useState<Record<string, any>>(() => {
+    const query = qs.parse(window.location.search, {
+      ignoreQueryPrefix: true,
+    });
+
+    return query.formData ?? {};
   });
-  const [formState, setFormState] = useState(
-    (query.formData ?? {}) as Record<string, any>,
-  );
   const handleFormReset = () => setFormState({});
   const handleChange = useCallback(
     (e: IChangeEvent) => setFormState(e.formData),
@@ -135,6 +136,18 @@ export const TemplatePage = ({
 
   const handleCreate = async () => {
     const id = await scaffolderApi.scaffold(templateName, formState);
+
+    const formParams = qs.stringify(
+      { formData: formState },
+      { addQueryPrefix: true },
+    );
+    const newUrl = `${window.location.pathname}${formParams}`;
+    // We use direct history manipulation since useSearchParams and
+    // useNavigate in react-router-dom cause unnecessary extra rerenders.
+    // Also make sure to replace the state rather than pushing to avoid
+    // extra back/forward slots.
+    window.history?.replaceState(null, document.title, newUrl);
+
     navigate(generatePath(`${rootLink()}/tasks/:taskId`, { taskId: id }));
   };