From ece51565ca8ec662f92a91ac84591b30a4b573ef Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Thu, 12 Jan 2023 19:41:20 +0000
Subject: [PATCH 1/2] refactor: Wrap forms into dashboard layout

---
 site/src/AppRouter.tsx                        | 312 +++++++-----------
 .../DashboardLayout.tsx}                      |   9 +-
 .../FullPageForm/FullPageForm.stories.tsx     |   1 -
 .../components/FullPageForm/FullPageForm.tsx  |  43 ++-
 .../FullPageForm/FullPageHorizontalForm.tsx   |  57 ++--
 5 files changed, 163 insertions(+), 259 deletions(-)
 rename site/src/components/{NavbarLayout/NavbarLayout.tsx => DashboardLayout/DashboardLayout.tsx} (89%)

diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx
index bb472ca0ae91a..ee7522c05a323 100644
--- a/site/src/AppRouter.tsx
+++ b/site/src/AppRouter.tsx
@@ -18,7 +18,7 @@ import { Route, Routes } from "react-router-dom"
 import { selectPermissions } from "xServices/auth/authSelectors"
 import { selectFeatureVisibility } from "xServices/entitlements/entitlementsSelectors"
 import { XServiceContext } from "xServices/StateContext"
-import { NavbarLayout } from "./components/NavbarLayout/NavbarLayout"
+import { DashboardLayout } from "./components/DashboardLayout/DashboardLayout"
 import { RequireAuth } from "./components/RequireAuth/RequireAuth"
 import { SettingsLayout } from "./components/SettingsLayout/SettingsLayout"
 import { DeploySettingsLayout } from "components/DeploySettingsLayout/DeploySettingsLayout"
@@ -134,132 +134,79 @@ export const AppRouter: FC = () => {
         <Route path="login" element={<LoginPage />} />
         <Route path="setup" element={<SetupPage />} />
 
-        {/* Authenticated routes */}
+        {/* Dashboard routes */}
         <Route element={<RequireAuth />}>
-          <Route index element={<IndexPage />} />
+          <Route element={<DashboardLayout />}>
+            <Route index element={<IndexPage />} />
 
-          <Route path="cli-auth" element={<CliAuthenticationPage />} />
-          <Route path="gitauth" element={<GitAuthPage />} />
+            <Route path="cli-auth" element={<CliAuthenticationPage />} />
+            <Route path="gitauth" element={<GitAuthPage />} />
 
-          <Route
-            path="workspaces"
-            element={
-              <NavbarLayout>
-                <WorkspacesPage />
-              </NavbarLayout>
-            }
-          />
+            <Route path="workspaces" element={<WorkspacesPage />} />
 
-          <Route path="starter-templates">
-            <Route
-              index
-              element={
-                <NavbarLayout>
-                  <StarterTemplatesPage />
-                </NavbarLayout>
-              }
-            />
-
-            <Route
-              path=":exampleId"
-              element={
-                <NavbarLayout>
-                  <StarterTemplatePage />
-                </NavbarLayout>
-              }
-            />
-          </Route>
-
-          <Route path="templates">
-            <Route
-              index
-              element={
-                <NavbarLayout>
-                  <TemplatesPage />
-                </NavbarLayout>
-              }
-            />
-
-            <Route path="new" element={<CreateTemplatePage />} />
+            <Route path="starter-templates">
+              <Route index element={<StarterTemplatesPage />} />
+              <Route path=":exampleId" element={<StarterTemplatePage />} />
+            </Route>
 
-            <Route path=":template">
-              <Route
-                index
-                element={
-                  <NavbarLayout>
+            <Route path="templates">
+              <Route index element={<TemplatesPage />} />
+              <Route path="new" element={<CreateTemplatePage />} />
+              <Route path=":template">
+                <Route
+                  index
+                  element={
                     <TemplateLayout>
                       <TemplateSummaryPage />
                     </TemplateLayout>
-                  </NavbarLayout>
-                }
-              />
-              <Route
-                path="permissions"
-                element={
-                  <NavbarLayout>
+                  }
+                />
+                <Route
+                  path="permissions"
+                  element={
                     <TemplateLayout>
                       <TemplatePermissionsPage />
                     </TemplateLayout>
-                  </NavbarLayout>
-                }
-              />
-              <Route path="workspace" element={<CreateWorkspacePage />} />
-              <Route path="settings" element={<TemplateSettingsPage />} />
-              <Route path="versions">
-                <Route
-                  path=":version"
-                  element={
-                    <NavbarLayout>
-                      <TemplateVersionPage />
-                    </NavbarLayout>
                   }
                 />
+                <Route path="workspace" element={<CreateWorkspacePage />} />
+                <Route path="settings" element={<TemplateSettingsPage />} />
+                <Route path="versions">
+                  <Route path=":version" element={<TemplateVersionPage />} />
+                </Route>
               </Route>
             </Route>
-          </Route>
 
-          <Route path="users">
-            <Route
-              index
-              element={
-                <NavbarLayout>
+            <Route path="users">
+              <Route
+                index
+                element={
                   <UsersLayout>
                     <UsersPage />
                   </UsersLayout>
-                </NavbarLayout>
-              }
-            />
-            <Route path="create" element={<CreateUserPage />} />
-          </Route>
+                }
+              />
+              <Route path="create" element={<CreateUserPage />} />
+            </Route>
 
-          <Route path="/groups">
-            <Route
-              index
-              element={
-                <NavbarLayout>
+            <Route path="/groups">
+              <Route
+                index
+                element={
                   <UsersLayout>
                     <GroupsPage />
                   </UsersLayout>
-                </NavbarLayout>
-              }
-            />
-            <Route path="create" element={<CreateGroupPage />} />
-            <Route
-              path=":groupId"
-              element={
-                <NavbarLayout>
-                  <GroupPage />
-                </NavbarLayout>
-              }
-            />
-            <Route path=":groupId/settings" element={<SettingsGroupPage />} />
-          </Route>
+                }
+              />
+              <Route path="create" element={<CreateGroupPage />} />
+              <Route path=":groupId" element={<GroupPage />} />
+              <Route path=":groupId/settings" element={<SettingsGroupPage />} />
+            </Route>
 
-          <Route path="/audit">
-            <Route
-              index
-              element={
-                <NavbarLayout>
+            <Route path="/audit">
+              <Route
+                index
+                element={
                   <RequirePermission
                     isFeatureVisible={
                       featureVisibility[FeatureNames.AuditLog] &&
@@ -268,16 +215,14 @@ export const AppRouter: FC = () => {
                   >
                     <AuditPage />
                   </RequirePermission>
-                </NavbarLayout>
-              }
-            />
-          </Route>
+                }
+              />
+            </Route>
 
-          <Route path="/settings/deployment">
-            <Route
-              path="general"
-              element={
-                <NavbarLayout>
+            <Route path="/settings/deployment">
+              <Route
+                path="general"
+                element={
                   <RequirePermission
                     isFeatureVisible={Boolean(
                       permissions?.viewDeploymentConfig,
@@ -287,13 +232,11 @@ export const AppRouter: FC = () => {
                       <GeneralSettingsPage />
                     </DeploySettingsLayout>
                   </RequirePermission>
-                </NavbarLayout>
-              }
-            />
-            <Route
-              path="security"
-              element={
-                <NavbarLayout>
+                }
+              />
+              <Route
+                path="security"
+                element={
                   <RequirePermission
                     isFeatureVisible={Boolean(
                       permissions?.viewDeploymentConfig,
@@ -303,13 +246,11 @@ export const AppRouter: FC = () => {
                       <SecuritySettingsPage />
                     </DeploySettingsLayout>
                   </RequirePermission>
-                </NavbarLayout>
-              }
-            />
-            <Route
-              path="appearance"
-              element={
-                <NavbarLayout>
+                }
+              />
+              <Route
+                path="appearance"
+                element={
                   <RequirePermission
                     isFeatureVisible={Boolean(
                       permissions?.viewDeploymentConfig,
@@ -319,13 +260,11 @@ export const AppRouter: FC = () => {
                       <AppearanceSettingsPage />
                     </DeploySettingsLayout>
                   </RequirePermission>
-                </NavbarLayout>
-              }
-            />
-            <Route
-              path="network"
-              element={
-                <NavbarLayout>
+                }
+              />
+              <Route
+                path="network"
+                element={
                   <RequirePermission
                     isFeatureVisible={Boolean(
                       permissions?.viewDeploymentConfig,
@@ -335,13 +274,11 @@ export const AppRouter: FC = () => {
                       <NetworkSettingsPage />
                     </DeploySettingsLayout>
                   </RequirePermission>
-                </NavbarLayout>
-              }
-            />
-            <Route
-              path="userauth"
-              element={
-                <NavbarLayout>
+                }
+              />
+              <Route
+                path="userauth"
+                element={
                   <RequirePermission
                     isFeatureVisible={Boolean(
                       permissions?.viewDeploymentConfig,
@@ -351,13 +288,11 @@ export const AppRouter: FC = () => {
                       <UserAuthSettingsPage />
                     </DeploySettingsLayout>
                   </RequirePermission>
-                </NavbarLayout>
-              }
-            />
-            <Route
-              path="gitauth"
-              element={
-                <NavbarLayout>
+                }
+              />
+              <Route
+                path="gitauth"
+                element={
                   <RequirePermission
                     isFeatureVisible={Boolean(
                       permissions?.viewDeploymentConfig,
@@ -367,72 +302,51 @@ export const AppRouter: FC = () => {
                       <GitAuthSettingsPage />
                     </DeploySettingsLayout>
                   </RequirePermission>
-                </NavbarLayout>
-              }
-            />
-          </Route>
+                }
+              />
+            </Route>
 
-          <Route path="settings">
-            <Route
-              path="account"
-              element={
-                <NavbarLayout>
+            <Route path="settings">
+              <Route
+                path="account"
+                element={
                   <SettingsLayout>
                     <AccountPage />
                   </SettingsLayout>
-                </NavbarLayout>
-              }
-            />
-            <Route
-              path="security"
-              element={
-                <NavbarLayout>
+                }
+              />
+              <Route
+                path="security"
+                element={
                   <SettingsLayout>
                     <SecurityPage />
                   </SettingsLayout>
-                </NavbarLayout>
-              }
-            />
-            <Route
-              path="ssh-keys"
-              element={
-                <NavbarLayout>
-                  <SettingsLayout>
-                    <SSHKeysPage />
-                  </SettingsLayout>
-                </NavbarLayout>
-              }
-            />
-          </Route>
-
-          <Route path="/@:username">
-            <Route path=":workspace">
-              <Route
-                index
-                element={
-                  <NavbarLayout>
-                    <WorkspacePage />
-                  </NavbarLayout>
                 }
               />
-
-              <Route path="schedule" element={<WorkspaceSchedulePage />} />
-
-              <Route path="terminal" element={<TerminalPage />} />
-
               <Route
-                path="builds/:buildNumber"
+                path="ssh-keys"
                 element={
-                  <NavbarLayout>
-                    <WorkspaceBuildPage />
-                  </NavbarLayout>
+                  <SettingsLayout>
+                    <SSHKeysPage />
+                  </SettingsLayout>
                 }
               />
+            </Route>
 
-              <Route
-                path="change-version"
-                element={<WorkspaceChangeVersionPage />}
-              />
+            <Route path="/@:username">
+              <Route path=":workspace">
+                <Route index element={<WorkspacePage />} />
+                <Route path="schedule" element={<WorkspaceSchedulePage />} />
+                <Route path="terminal" element={<TerminalPage />} />
+                <Route
+                  path="builds/:buildNumber"
+                  element={<WorkspaceBuildPage />}
+                />
+                <Route
+                  path="change-version"
+                  element={<WorkspaceChangeVersionPage />}
+                />
+              </Route>
             </Route>
           </Route>
         </Route>
diff --git a/site/src/components/NavbarLayout/NavbarLayout.tsx b/site/src/components/DashboardLayout/DashboardLayout.tsx
similarity index 89%
rename from site/src/components/NavbarLayout/NavbarLayout.tsx
rename to site/src/components/DashboardLayout/DashboardLayout.tsx
index eb900dadf1bab..b55ad39978944 100644
--- a/site/src/components/NavbarLayout/NavbarLayout.tsx
+++ b/site/src/components/DashboardLayout/DashboardLayout.tsx
@@ -1,13 +1,14 @@
 import { makeStyles } from "@material-ui/core/styles"
 import { useActor } from "@xstate/react"
 import { Loader } from "components/Loader/Loader"
-import { FC, PropsWithChildren, Suspense, useContext, useEffect } from "react"
+import { FC, Suspense, useContext, useEffect } from "react"
 import { XServiceContext } from "../../xServices/StateContext"
 import { Navbar } from "../Navbar/Navbar"
 import { UpdateCheckBanner } from "components/UpdateCheckBanner/UpdateCheckBanner"
 import { Margins } from "components/Margins/Margins"
+import { Outlet } from "react-router-dom"
 
-export const NavbarLayout: FC<PropsWithChildren> = ({ children }) => {
+export const DashboardLayout: FC = () => {
   const styles = useStyles()
   const xServices = useContext(XServiceContext)
   const [authState] = useActor(xServices.authXService)
@@ -38,7 +39,9 @@ export const NavbarLayout: FC<PropsWithChildren> = ({ children }) => {
         </div>
       )}
       <div className={styles.siteContent}>
-        <Suspense fallback={<Loader />}>{children}</Suspense>
+        <Suspense fallback={<Loader />}>
+          <Outlet />
+        </Suspense>
       </div>
     </div>
   )
diff --git a/site/src/components/FullPageForm/FullPageForm.stories.tsx b/site/src/components/FullPageForm/FullPageForm.stories.tsx
index 65a5f19bf1cea..bd92ea6cc974e 100644
--- a/site/src/components/FullPageForm/FullPageForm.stories.tsx
+++ b/site/src/components/FullPageForm/FullPageForm.stories.tsx
@@ -30,5 +30,4 @@ export const Example = Template.bind({})
 Example.args = {
   title: "My Form",
   detail: "Lorem ipsum dolor",
-  onCancel: action("cancel"),
 }
diff --git a/site/src/components/FullPageForm/FullPageForm.tsx b/site/src/components/FullPageForm/FullPageForm.tsx
index 0887a5fe54495..8604172948117 100644
--- a/site/src/components/FullPageForm/FullPageForm.tsx
+++ b/site/src/components/FullPageForm/FullPageForm.tsx
@@ -1,39 +1,38 @@
-import { makeStyles } from "@material-ui/core/styles"
+import { Margins } from "components/Margins/Margins"
 import { FC, ReactNode } from "react"
-import { FormCloseButton } from "../FormCloseButton/FormCloseButton"
-import { FormTitle } from "../FormTitle/FormTitle"
-import { Margins } from "../Margins/Margins"
+import {
+  PageHeader,
+  PageHeaderTitle,
+  PageHeaderSubtitle,
+} from "components/PageHeader/PageHeader"
+import { makeStyles } from "@material-ui/core/styles"
 
 export interface FullPageFormProps {
   title: string
   detail?: ReactNode
-  onCancel: () => void
 }
 
-const useStyles = makeStyles(() => ({
-  root: {
-    width: "100%",
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-  },
-}))
-
 export const FullPageForm: FC<React.PropsWithChildren<FullPageFormProps>> = ({
   title,
   detail,
-  onCancel,
   children,
 }) => {
   const styles = useStyles()
+
   return (
-    <main className={styles.root}>
-      <Margins size="small">
-        <FormTitle title={title} detail={detail} />
-        <FormCloseButton onClose={onCancel} />
+    <Margins size="small">
+      <PageHeader className={styles.pageHeader}>
+        <PageHeaderTitle>{title}</PageHeaderTitle>
+        {detail && <PageHeaderSubtitle>{detail}</PageHeaderSubtitle>}
+      </PageHeader>
 
-        {children}
-      </Margins>
-    </main>
+      <main>{children}</main>
+    </Margins>
   )
 }
+
+const useStyles = makeStyles((theme) => ({
+  pageHeader: {
+    paddingBottom: theme.spacing(2),
+  },
+}))
diff --git a/site/src/components/FullPageForm/FullPageHorizontalForm.tsx b/site/src/components/FullPageForm/FullPageHorizontalForm.tsx
index 704796f8e49d8..15c6b5ed78430 100644
--- a/site/src/components/FullPageForm/FullPageHorizontalForm.tsx
+++ b/site/src/components/FullPageForm/FullPageHorizontalForm.tsx
@@ -1,13 +1,12 @@
-import { FormCloseButton } from "../FormCloseButton/FormCloseButton"
-import { makeStyles } from "@material-ui/core/styles"
-import Typography from "@material-ui/core/Typography"
 import { Margins } from "components/Margins/Margins"
 import { FC, ReactNode } from "react"
-
-export interface FormTitleProps {
-  title: string
-  detail?: ReactNode
-}
+import {
+  PageHeader,
+  PageHeaderTitle,
+  PageHeaderSubtitle,
+} from "components/PageHeader/PageHeader"
+import Button from "@material-ui/core/Button"
+import { makeStyles } from "@material-ui/core/styles"
 
 export interface FullPageHorizontalFormProps {
   title: string
@@ -21,35 +20,25 @@ export const FullPageHorizontalForm: FC<
   const styles = useStyles()
 
   return (
-    <>
-      <header className={styles.title}>
-        <Margins size="medium">
-          <Typography variant="h3">{title}</Typography>
-          {detail && <Typography variant="caption">{detail}</Typography>}
-        </Margins>
-      </header>
-
-      <FormCloseButton onClose={onCancel} />
-
-      <main className={styles.main}>
-        <Margins size="medium">{children}</Margins>
-      </main>
-    </>
+    <Margins size="medium">
+      <PageHeader
+        actions={
+          <Button size="small" onClick={onCancel}>
+            Cancel
+          </Button>
+        }
+      >
+        <PageHeaderTitle>{title}</PageHeaderTitle>
+        {detail && <PageHeaderSubtitle>{detail}</PageHeaderSubtitle>}
+      </PageHeader>
+
+      <main className={styles.form}>{children}</main>
+    </Margins>
   )
 }
 
 const useStyles = makeStyles((theme) => ({
-  title: {
-    paddingTop: theme.spacing(6),
-    paddingBottom: theme.spacing(8),
-
-    [theme.breakpoints.down("sm")]: {
-      paddingTop: theme.spacing(4),
-      paddingBottom: theme.spacing(4),
-    },
-  },
-
-  main: {
-    paddingBottom: theme.spacing(10),
+  form: {
+    marginTop: theme.spacing(1),
   },
 }))

From 7c78e9d836bb8ec11d60f18fe0f400739ae213e3 Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Thu, 12 Jan 2023 19:56:55 +0000
Subject: [PATCH 2/2] Remove unused onCancel

---
 site/src/components/CreateUserForm/CreateUserForm.tsx           | 2 +-
 .../components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx  | 2 +-
 site/src/pages/GroupsPage/CreateGroupPageView.tsx               | 2 +-
 site/src/pages/GroupsPage/SettingsGroupPageView.tsx             | 2 +-
 .../src/pages/TemplateSettingsPage/TemplateSettingsPageView.tsx | 2 +-
 .../WorkspaceChangeVersionPageView.tsx                          | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/site/src/components/CreateUserForm/CreateUserForm.tsx b/site/src/components/CreateUserForm/CreateUserForm.tsx
index e991c80fe1f41..dd14e5fbed95f 100644
--- a/site/src/components/CreateUserForm/CreateUserForm.tsx
+++ b/site/src/components/CreateUserForm/CreateUserForm.tsx
@@ -62,7 +62,7 @@ export const CreateUserForm: FC<
   )
 
   return (
-    <FullPageForm title="Create user" onCancel={onCancel}>
+    <FullPageForm title="Create user">
       <form onSubmit={form.handleSubmit} autoComplete="off">
         <Stack spacing={1}>
           <TextField
diff --git a/site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx b/site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx
index 56884e54cda94..d41d1b9035a3f 100644
--- a/site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx
+++ b/site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx
@@ -280,7 +280,7 @@ export const WorkspaceScheduleForm: FC<
   }
 
   return (
-    <FullPageForm onCancel={onCancel} title={Language.formTitle}>
+    <FullPageForm title={Language.formTitle}>
       <form onSubmit={form.handleSubmit} className={styles.form}>
         <Stack>
           {Boolean(submitScheduleError) && (
diff --git a/site/src/pages/GroupsPage/CreateGroupPageView.tsx b/site/src/pages/GroupsPage/CreateGroupPageView.tsx
index e025d6263e2d8..ee0c0af65b8c2 100644
--- a/site/src/pages/GroupsPage/CreateGroupPageView.tsx
+++ b/site/src/pages/GroupsPage/CreateGroupPageView.tsx
@@ -39,7 +39,7 @@ export const CreateGroupPageView: FC<CreateGroupPageViewProps> = ({
 
   return (
     <Margins>
-      <FullPageForm title="Create group" onCancel={onCancel}>
+      <FullPageForm title="Create group">
         <form onSubmit={form.handleSubmit}>
           <TextField
             {...getFieldHelpers("name")}
diff --git a/site/src/pages/GroupsPage/SettingsGroupPageView.tsx b/site/src/pages/GroupsPage/SettingsGroupPageView.tsx
index dd1cf83abb20e..32ccc2f78dd56 100644
--- a/site/src/pages/GroupsPage/SettingsGroupPageView.tsx
+++ b/site/src/pages/GroupsPage/SettingsGroupPageView.tsx
@@ -54,7 +54,7 @@ const UpdateGroupForm: FC<{
   const { t } = useTranslation("common")
 
   return (
-    <FullPageForm title="Group settings" onCancel={onCancel}>
+    <FullPageForm title="Group settings">
       <form onSubmit={form.handleSubmit}>
         <TextField
           {...getFieldHelpers("name")}
diff --git a/site/src/pages/TemplateSettingsPage/TemplateSettingsPageView.tsx b/site/src/pages/TemplateSettingsPage/TemplateSettingsPageView.tsx
index 148b8013b2581..eb4baffa5c7af 100644
--- a/site/src/pages/TemplateSettingsPage/TemplateSettingsPageView.tsx
+++ b/site/src/pages/TemplateSettingsPage/TemplateSettingsPageView.tsx
@@ -54,7 +54,7 @@ export const TemplateSettingsPageView: FC<TemplateSettingsPageViewProps> = ({
   }
 
   return (
-    <FullPageForm title={t("title")} onCancel={onCancel}>
+    <FullPageForm title={t("title")}>
       {Boolean(errors.getTemplateError) && (
         <Stack className={classes.errorContainer}>
           <AlertBanner severity="error" error={errors.getTemplateError} />
diff --git a/site/src/pages/WorkspaceChangeVersionPage/WorkspaceChangeVersionPageView.tsx b/site/src/pages/WorkspaceChangeVersionPage/WorkspaceChangeVersionPageView.tsx
index 0d0511d67be5a..c555fea7640c9 100644
--- a/site/src/pages/WorkspaceChangeVersionPage/WorkspaceChangeVersionPageView.tsx
+++ b/site/src/pages/WorkspaceChangeVersionPage/WorkspaceChangeVersionPageView.tsx
@@ -21,7 +21,7 @@ export const WorkspaceChangeVersionPageView: FC<
   const { workspace, templateVersions, template, error } = context
 
   return (
-    <FullPageForm title="Change version" onCancel={() => navigate(-1)}>
+    <FullPageForm title="Change version">
       <Stack>
         <Maybe condition={Boolean(error)}>
           <AlertBanner severity="error" error={error} />