Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 3861d1c

Browse files
BrunoQuaresmaBrunoQuaresma
authored
refactor: Wrap forms into dashboard layout (#5697)
1 parent bef6f67 commit 3861d1c

File tree

11 files changed

+169
-265
lines changed

11 files changed

+169
-265
lines changed

‎site/src/AppRouter.tsx

Lines changed: 113 additions & 199 deletions
Large diffs are not rendered by default.

‎site/src/components/CreateUserForm/CreateUserForm.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ export const CreateUserForm: FC<
6262
)
6363

6464
return (
65-
<FullPageForm title="Create user" onCancel={onCancel}>
65+
<FullPageForm title="Create user">
6666
<form onSubmit={form.handleSubmit} autoComplete="off">
6767
<Stack spacing={1}>
6868
<TextField

‎site/src/components/NavbarLayout/NavbarLayout.tsx renamed to ‎site/src/components/DashboardLayout/DashboardLayout.tsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import { makeStyles } from "@material-ui/core/styles"
22
import { useActor } from "@xstate/react"
33
import { Loader } from "components/Loader/Loader"
4-
import { FC, PropsWithChildren, Suspense, useContext, useEffect } from "react"
4+
import { FC, Suspense, useContext, useEffect } from "react"
55
import { XServiceContext } from "../../xServices/StateContext"
66
import { Navbar } from "../Navbar/Navbar"
77
import { UpdateCheckBanner } from "components/UpdateCheckBanner/UpdateCheckBanner"
88
import { Margins } from "components/Margins/Margins"
9+
import { Outlet } from "react-router-dom"
910

10-
export const NavbarLayout: FC<PropsWithChildren> = ({ children }) => {
11+
export const DashboardLayout: FC = () => {
1112
const styles = useStyles()
1213
const xServices = useContext(XServiceContext)
1314
const [authState] = useActor(xServices.authXService)
@@ -38,7 +39,9 @@ export const NavbarLayout: FC<PropsWithChildren> = ({ children }) => {
3839
</div>
3940
)}
4041
<div className={styles.siteContent}>
41-
<Suspense fallback={<Loader />}>{children}</Suspense>
42+
<Suspense fallback={<Loader />}>
43+
<Outlet />
44+
</Suspense>
4245
</div>
4346
</div>
4447
)

‎site/src/components/FullPageForm/FullPageForm.stories.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,5 +30,4 @@ export const Example = Template.bind({})
3030
Example.args = {
3131
title: "My Form",
3232
detail: "Lorem ipsum dolor",
33-
onCancel: action("cancel"),
3433
}

‎site/src/components/FullPageForm/FullPageForm.tsx

Lines changed: 21 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,38 @@
1-
import { makeStyles } from "@material-ui/core/styles"
1+
import { Margins } from "components/Margins/Margins"
22
import { FC, ReactNode } from "react"
3-
import { FormCloseButton } from "../FormCloseButton/FormCloseButton"
4-
import { FormTitle } from "../FormTitle/FormTitle"
5-
import { Margins } from "../Margins/Margins"
3+
import {
4+
PageHeader,
5+
PageHeaderTitle,
6+
PageHeaderSubtitle,
7+
} from "components/PageHeader/PageHeader"
8+
import { makeStyles } from "@material-ui/core/styles"
69

710
export interface FullPageFormProps {
811
title: string
912
detail?: ReactNode
10-
onCancel: () => void
1113
}
1214

13-
const useStyles = makeStyles(() => ({
14-
root: {
15-
width: "100%",
16-
display: "flex",
17-
flexDirection: "column",
18-
alignItems: "center",
19-
},
20-
}))
21-
2215
export const FullPageForm: FC<React.PropsWithChildren<FullPageFormProps>> = ({
2316
title,
2417
detail,
25-
onCancel,
2618
children,
2719
}) => {
2820
const styles = useStyles()
21+
2922
return (
30-
<main className={styles.root}>
31-
<Margins size="small">
32-
<FormTitle title={title} detail={detail} />
33-
<FormCloseButton onClose={onCancel} />
23+
<Margins size="small">
24+
<PageHeader className={styles.pageHeader}>
25+
<PageHeaderTitle>{title}</PageHeaderTitle>
26+
{detail && <PageHeaderSubtitle>{detail}</PageHeaderSubtitle>}
27+
</PageHeader>
3428

35-
{children}
36-
</Margins>
37-
</main>
29+
<main>{children}</main>
30+
</Margins>
3831
)
3932
}
33+
34+
const useStyles = makeStyles((theme) => ({
35+
pageHeader: {
36+
paddingBottom: theme.spacing(2),
37+
},
38+
}))

‎site/src/components/FullPageForm/FullPageHorizontalForm.tsx

Lines changed: 23 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
1-
import { FormCloseButton } from "../FormCloseButton/FormCloseButton"
2-
import { makeStyles } from "@material-ui/core/styles"
3-
import Typography from "@material-ui/core/Typography"
41
import { Margins } from "components/Margins/Margins"
52
import { FC, ReactNode } from "react"
6-
7-
export interface FormTitleProps {
8-
title: string
9-
detail?: ReactNode
10-
}
3+
import {
4+
PageHeader,
5+
PageHeaderTitle,
6+
PageHeaderSubtitle,
7+
} from "components/PageHeader/PageHeader"
8+
import Button from "@material-ui/core/Button"
9+
import { makeStyles } from "@material-ui/core/styles"
1110

1211
export interface FullPageHorizontalFormProps {
1312
title: string
@@ -21,35 +20,25 @@ export const FullPageHorizontalForm: FC<
2120
const styles = useStyles()
2221

2322
return (
24-
<>
25-
<header className={styles.title}>
26-
<Margins size="medium">
27-
<Typography variant="h3">{title}</Typography>
28-
{detail && <Typography variant="caption">{detail}</Typography>}
29-
</Margins>
30-
</header>
31-
32-
<FormCloseButton onClose={onCancel} />
33-
34-
<main className={styles.main}>
35-
<Margins size="medium">{children}</Margins>
36-
</main>
37-
</>
23+
<Margins size="medium">
24+
<PageHeader
25+
actions={
26+
<Button size="small" onClick={onCancel}>
27+
Cancel
28+
</Button>
29+
}
30+
>
31+
<PageHeaderTitle>{title}</PageHeaderTitle>
32+
{detail && <PageHeaderSubtitle>{detail}</PageHeaderSubtitle>}
33+
</PageHeader>
34+
35+
<main className={styles.form}>{children}</main>
36+
</Margins>
3837
)
3938
}
4039

4140
const useStyles = makeStyles((theme) => ({
42-
title: {
43-
paddingTop: theme.spacing(6),
44-
paddingBottom: theme.spacing(8),
45-
46-
[theme.breakpoints.down("sm")]: {
47-
paddingTop: theme.spacing(4),
48-
paddingBottom: theme.spacing(4),
49-
},
50-
},
51-
52-
main: {
53-
paddingBottom: theme.spacing(10),
41+
form: {
42+
marginTop: theme.spacing(1),
5443
},
5544
}))

‎site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -280,7 +280,7 @@ export const WorkspaceScheduleForm: FC<
280280
}
281281

282282
return (
283-
<FullPageForm onCancel={onCancel} title={Language.formTitle}>
283+
<FullPageForm title={Language.formTitle}>
284284
<form onSubmit={form.handleSubmit} className={styles.form}>
285285
<Stack>
286286
{Boolean(submitScheduleError) && (

‎site/src/pages/GroupsPage/CreateGroupPageView.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export const CreateGroupPageView: FC<CreateGroupPageViewProps> = ({
3939

4040
return (
4141
<Margins>
42-
<FullPageForm title="Create group" onCancel={onCancel}>
42+
<FullPageForm title="Create group">
4343
<form onSubmit={form.handleSubmit}>
4444
<TextField
4545
{...getFieldHelpers("name")}

‎site/src/pages/GroupsPage/SettingsGroupPageView.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ const UpdateGroupForm: FC<{
5454
const { t } = useTranslation("common")
5555

5656
return (
57-
<FullPageForm title="Group settings" onCancel={onCancel}>
57+
<FullPageForm title="Group settings">
5858
<form onSubmit={form.handleSubmit}>
5959
<TextField
6060
{...getFieldHelpers("name")}

‎site/src/pages/TemplateSettingsPage/TemplateSettingsPageView.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ export const TemplateSettingsPageView: FC<TemplateSettingsPageViewProps> = ({
5454
}
5555

5656
return (
57-
<FullPageForm title={t("title")} onCancel={onCancel}>
57+
<FullPageForm title={t("title")}>
5858
{Boolean(errors.getTemplateError) && (
5959
<Stack className={classes.errorContainer}>
6060
<AlertBanner severity="error" error={errors.getTemplateError} />

‎site/src/pages/WorkspaceChangeVersionPage/WorkspaceChangeVersionPageView.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export const WorkspaceChangeVersionPageView: FC<
2121
const { workspace, templateVersions, template, error } = context
2222

2323
return (
24-
<FullPageForm title="Change version" onCancel={() => navigate(-1)}>
24+
<FullPageForm title="Change version">
2525
<Stack>
2626
<Maybe condition={Boolean(error)}>
2727
<AlertBanner severity="error" error={error} />

0 commit comments

Comments
 (0)