From fe323a159e13e9fbe082cbd429d78311176b36dd Mon Sep 17 00:00:00 2001
From: Ben Potter <ben@coder.com>
Date: Thu, 27 Apr 2023 16:31:42 +0000
Subject: [PATCH] fix: keep "workspace create" form when rendering errors
 (#7289)

* fix: keep "workspace create" form when rendering errors

* fmt

* scroll to top if errors are present
---
 .../CreateWorkspacePageView.tsx               | 137 ++++++++++--------
 1 file changed, 73 insertions(+), 64 deletions(-)

diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
index 94957030eb..ba5a7e38eb 100644
--- 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={
-              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>
-    )
-  }
-
-  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}>
+        {Boolean(props.hasTemplateErrors) && (
+          <Stack>
+            {Boolean(
+              props.createWorkspaceErrors[
+                CreateWorkspaceErrors.GET_TEMPLATES_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.CREATE_WORKSPACE_ERROR
+          ],
+        ) && (
+          <AlertBanner
+            severity="error"
+            error={
+              props.createWorkspaceErrors[
+                CreateWorkspaceErrors.CREATE_WORKSPACE_ERROR
+              ]
+            }
+          />
+        )}
+
         {/* General info */}
         <FormSection
           title="General info"