coder · BrunoQuaresma · Jan 12, 2023 · Jan 12, 2023 · Jan 12, 2023
diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx
diff --git 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/.../components/NavbarLayout/NavbarLayout.tsx → ...nents/DashboardLayout/DashboardLayout.tsx b/.../components/NavbarLayout/NavbarLayout.tsx → ...nents/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
@@ -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
@@ -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
@@ -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),
   },
 }))
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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} />