From 3861d1c5550dfc185e70f166f29b776412878cbb Mon Sep 17 00:00:00 2001 From: Bruno Quaresma Date: Thu, 12 Jan 2023 17:08:31 -0300 Subject: [PATCH] refactor: Wrap forms into dashboard layout (#5697) --- site/src/AppRouter.tsx | 314 +++++++----------- .../CreateUserForm/CreateUserForm.tsx | 2 +- .../DashboardLayout.tsx} | 9 +- .../FullPageForm/FullPageForm.stories.tsx | 1 - .../components/FullPageForm/FullPageForm.tsx | 45 ++- .../FullPageForm/FullPageHorizontalForm.tsx | 55 ++- .../WorkspaceScheduleForm.tsx | 2 +- .../pages/GroupsPage/CreateGroupPageView.tsx | 2 +- .../GroupsPage/SettingsGroupPageView.tsx | 2 +- .../TemplateSettingsPageView.tsx | 2 +- .../WorkspaceChangeVersionPageView.tsx | 2 +- 11 files changed, 170 insertions(+), 266 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 bb472ca0ae..ee7522c05a 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 = () => { } /> } /> - {/* Authenticated routes */} + {/* Dashboard routes */} }> - } /> + }> + } /> - } /> - } /> + } /> + } /> - - - - } - /> + } /> - - - - - } - /> + + } /> + } /> + - - - - } - /> - - - - - - - } - /> - - } /> - - - + + } /> + } /> + + - - } - /> - + } + /> + - - } - /> - } /> - } /> - - - - } /> + } /> + } /> + + } /> + - - - + + - - } - /> - } /> - + } + /> + } /> + - - + + - - } - /> - } /> - - - - } - /> - } /> - + } + /> + } /> + } /> + } /> + - - + + { > - - } - /> - + } + /> + - - + + { - - } - /> - + } + /> + { - - } - /> - + } + /> + { - - } - /> - + } + /> + { - - } - /> - + } + /> + { - - } - /> - + } + /> + { - - } - /> - + } + /> + - - + + - - } - /> - + } + /> + - - } - /> - + } + /> + - - } - /> - - - - - - - } /> + - } /> - - } /> - - - - - } - /> - - } - /> + + + } /> + } /> + } /> + } + /> + } + /> + diff --git a/site/src/components/CreateUserForm/CreateUserForm.tsx b/site/src/components/CreateUserForm/CreateUserForm.tsx index e991c80fe1..dd14e5fbed 100644 --- a/site/src/components/CreateUserForm/CreateUserForm.tsx +++ b/site/src/components/CreateUserForm/CreateUserForm.tsx @@ -62,7 +62,7 @@ export const CreateUserForm: FC< ) return ( - +
= ({ 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 = ({ children }) => { )}
- }>{children} + }> + +
) diff --git a/site/src/components/FullPageForm/FullPageForm.stories.tsx b/site/src/components/FullPageForm/FullPageForm.stories.tsx index 65a5f19bf1..bd92ea6cc9 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 0887a5fe54..8604172948 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> = ({ title, detail, - onCancel, children, }) => { const styles = useStyles() - return ( -
- - - - {children} - -
+ return ( + + + {title} + {detail && {detail}} + + +
{children}
+ ) } + +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 704796f8e4..15c6b5ed78 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 ( - <> -
- - {title} - {detail && {detail}} - -
+ + + Cancel + + } + > + {title} + {detail && {detail}} + - - -
- {children} -
- +
{children}
+ ) } 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 index 56884e54cd..d41d1b9035 100644 --- a/site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx +++ b/site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx @@ -280,7 +280,7 @@ export const WorkspaceScheduleForm: FC< } return ( - + {Boolean(submitScheduleError) && ( diff --git a/site/src/pages/GroupsPage/CreateGroupPageView.tsx b/site/src/pages/GroupsPage/CreateGroupPageView.tsx index e025d6263e..ee0c0af65b 100644 --- a/site/src/pages/GroupsPage/CreateGroupPageView.tsx +++ b/site/src/pages/GroupsPage/CreateGroupPageView.tsx @@ -39,7 +39,7 @@ export const CreateGroupPageView: FC = ({ return ( - + + = ({ } return ( - + {Boolean(errors.getTemplateError) && ( diff --git a/site/src/pages/WorkspaceChangeVersionPage/WorkspaceChangeVersionPageView.tsx b/site/src/pages/WorkspaceChangeVersionPage/WorkspaceChangeVersionPageView.tsx index 0d0511d67b..c555fea764 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 ( - navigate(-1)}> +