fix: keep "workspace create" form when rendering errors (#7289)

bpmct · web-flow · commit fe323a159e13 · 2023-04-27T16:31:42.000Z
* fix: keep "workspace create" form when rendering errors

* fmt

* scroll to top if errors are present
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
@@ -75,6 +75,17 @@ export const CreateWorkspacePageView: FC<
     // to disappear.
     setGitAuthErrors({})
   }, [props.templateGitAuth])
+
+  const workspaceErrors =
+    props.createWorkspaceErrors[CreateWorkspaceErrors.CREATE_WORKSPACE_ERROR]
+
+  // Scroll to top of page if errors are present
+  useEffect(() => {
+    if (props.hasTemplateErrors || Boolean(workspaceErrors)) {
+      window.scrollTo(0, 0)
+    }
+  }, [props.hasTemplateErrors, workspaceErrors])
+
   const { t } = useTranslation("createWorkspacePage")
   const styles = useStyles()
 
@@ -149,73 +160,71 @@ export const CreateWorkspacePageView: FC<
     return <Loader />
   }
 
-  if (props.hasTemplateErrors) {
-    return (
-      <Stack>
-        {Boolean(
-          props.createWorkspaceErrors[
-            CreateWorkspaceErrors.GET_TEMPLATES_ERROR
-          ],
-        ) && (
-          <AlertBanner
-            severity="error"
-            error={
+  return (
+    <FullPageHorizontalForm title="New workspace" onCancel={props.onCancel}>
+      <HorizontalForm onSubmit={form.handleSubmit}>
+        {Boolean(props.hasTemplateErrors) && (
+          <Stack>
+            {Boolean(
               props.createWorkspaceErrors[
                 CreateWorkspaceErrors.GET_TEMPLATES_ERROR
-              ]
-            }
-          />
-        )}
-        {Boolean(
-          props.createWorkspaceErrors[
-            CreateWorkspaceErrors.GET_TEMPLATE_SCHEMA_ERROR
-          ],
-        ) && (
-          <AlertBanner
-            severity="error"
-            error={
+              ],
+            ) && (
+              <AlertBanner
+                severity="error"
+                error={
+                  props.createWorkspaceErrors[
+                    CreateWorkspaceErrors.GET_TEMPLATES_ERROR
+                  ]
+                }
+              />
+            )}
+            {Boolean(
               props.createWorkspaceErrors[
                 CreateWorkspaceErrors.GET_TEMPLATE_SCHEMA_ERROR
-              ]
-            }
-          />
+              ],
+            ) && (
+              <AlertBanner
+                severity="error"
+                error={
+                  props.createWorkspaceErrors[
+                    CreateWorkspaceErrors.GET_TEMPLATE_SCHEMA_ERROR
+                  ]
+                }
+              />
+            )}
+            {Boolean(
+              props.createWorkspaceErrors[
+                CreateWorkspaceErrors.GET_TEMPLATE_GITAUTH_ERROR
+              ],
+            ) && (
+              <AlertBanner
+                severity="error"
+                error={
+                  props.createWorkspaceErrors[
+                    CreateWorkspaceErrors.GET_TEMPLATE_GITAUTH_ERROR
+                  ]
+                }
+              />
+            )}
+          </Stack>
         )}
+
         {Boolean(
           props.createWorkspaceErrors[
-            CreateWorkspaceErrors.GET_TEMPLATE_GITAUTH_ERROR
+            CreateWorkspaceErrors.CREATE_WORKSPACE_ERROR
           ],
         ) && (
           <AlertBanner
             severity="error"
             error={
               props.createWorkspaceErrors[
-                CreateWorkspaceErrors.GET_TEMPLATE_GITAUTH_ERROR
+                CreateWorkspaceErrors.CREATE_WORKSPACE_ERROR
               ]
             }
           />
         )}
-      </Stack>
-    )
-  }
-
-  if (
-    props.createWorkspaceErrors[CreateWorkspaceErrors.CREATE_WORKSPACE_ERROR]
-  ) {
-    return (
-      <AlertBanner
-        severity="error"
-        error={
-          props.createWorkspaceErrors[
-            CreateWorkspaceErrors.CREATE_WORKSPACE_ERROR
-          ]
-        }
-      />
-    )
-  }
 
-  return (
-    <FullPageHorizontalForm title="New workspace" onCancel={props.onCancel}>
-      <HorizontalForm onSubmit={form.handleSubmit}>
         {/* General info */}
         <FormSection
           title="General info"
