Skip to content

Commit 0e57abb

Browse files
BrunoQuaresmaBrunoQuaresma
committed
Abstract option
1 parent 2360e82 commit 0e57abb

File tree

4 files changed

+198
-131
lines changed

4 files changed

+198
-131
lines changed

‎site/src/components/DeploySettingsLayout/DeploySettingsLayout.tsx

+4-68
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,10 @@
11
import Button from "@material-ui/core/Button"
22
import { makeStyles } from "@material-ui/core/styles"
33
import LaunchOutlined from "@material-ui/icons/LaunchOutlined"
4-
import VpnKeyOutlined from "@material-ui/icons/VpnKeyOutlined"
5-
import LockRounded from "@material-ui/icons/LockRounded"
6-
import BarChartOutlined from "@material-ui/icons/BarChartOutlined"
74
import { Margins } from "components/Margins/Margins"
85
import { Stack } from "components/Stack/Stack"
9-
import React, { ElementType, PropsWithChildren, ReactNode } from "react"
10-
import { NavLink } from "react-router-dom"
11-
import { combineClasses } from "util/combineClasses"
12-
13-
const Sidebar: React.FC<PropsWithChildren> = ({ children }) => {
14-
const styles = useStyles()
15-
return <nav className={styles.sidebar}>{children}</nav>
16-
}
17-
18-
const SidebarNavItem: React.FC<
19-
PropsWithChildren<{ href: string; icon: ReactNode }>
20-
> = ({ children, href, icon }) => {
21-
const styles = useStyles()
22-
return (
23-
<NavLink
24-
to={href}
25-
className={({ isActive }) =>
26-
combineClasses([
27-
styles.sidebarNavItem,
28-
isActive ? styles.sidebarNavItemActive : undefined,
29-
])
30-
}
31-
>
32-
<Stack alignItems="center" spacing={1.5} direction="row">
33-
{icon}
34-
{children}
35-
</Stack>
36-
</NavLink>
37-
)
38-
}
39-
40-
const SidebarNavItemIcon: React.FC<{ icon: ElementType }> = ({
41-
icon: Icon,
42-
}) => {
43-
const styles = useStyles()
44-
return <Icon className={styles.sidebarNavItemIcon} />
45-
}
6+
import { Sidebar } from "./Sidebar"
7+
import React, { PropsWithChildren } from "react"
468

479
export const SettingsHeader: React.FC<{
4810
title: string
@@ -105,33 +67,7 @@ export const DeploySettingsLayout: React.FC<PropsWithChildren> = ({
10567
return (
10668
<Margins>
10769
<Stack className={styles.wrapper} direction="row" spacing={5}>
108-
<Sidebar>
109-
<SidebarNavItem
110-
href="/settings/general"
111-
icon={<SidebarNavItemIcon icon={LaunchOutlined} />}
112-
>
113-
General
114-
</SidebarNavItem>
115-
<SidebarNavItem
116-
href="/settings/security"
117-
icon={<SidebarNavItemIcon icon={LockRounded} />}
118-
>
119-
Security
120-
</SidebarNavItem>
121-
<SidebarNavItem
122-
href="/settings/metrics"
123-
icon={<SidebarNavItemIcon icon={BarChartOutlined} />}
124-
>
125-
Metrics / observability
126-
</SidebarNavItem>
127-
<SidebarNavItem
128-
href="/settings/auth"
129-
icon={<SidebarNavItemIcon icon={VpnKeyOutlined} />}
130-
>
131-
Authentication
132-
</SidebarNavItem>
133-
</Sidebar>
134-
70+
<Sidebar />
13571
<main className={styles.content}>{children}</main>
13672
</Stack>
13773
</Margins>
@@ -191,7 +127,7 @@ const useStyles = makeStyles((theme) => ({
191127

192128
headingGroup: {
193129
maxWidth: 420,
194-
marginBottom: theme.spacing(4),
130+
marginBottom: theme.spacing(2),
195131
},
196132

197133
title: {

‎site/src/components/DeploySettingsLayout/Option.tsx

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { makeStyles } from "@material-ui/core/styles"
2+
import React, { PropsWithChildren } from "react"
3+
import { MONOSPACE_FONT_FAMILY } from "theme/constants"
4+
5+
export const OptionName: React.FC<PropsWithChildren> = ({ children }) => {
6+
const styles = useStyles()
7+
return <span className={styles.optionName}>{children}</span>
8+
}
9+
10+
export const OptionDescription: React.FC<PropsWithChildren> = ({
11+
children,
12+
}) => {
13+
const styles = useStyles()
14+
return <span className={styles.optionDescription}>{children}</span>
15+
}
16+
17+
export const OptionValue: React.FC<PropsWithChildren> = ({ children }) => {
18+
const styles = useStyles()
19+
return <span className={styles.optionValue}>{children}</span>
20+
}
21+
22+
const useStyles = makeStyles((theme) => ({
23+
optionName: {
24+
display: "block",
25+
},
26+
optionDescription: {
27+
display: "block",
28+
color: theme.palette.text.secondary,
29+
fontSize: 14,
30+
marginTop: theme.spacing(0.5),
31+
},
32+
optionValue: {
33+
fontSize: 14,
34+
fontFamily: MONOSPACE_FONT_FAMILY,
35+
},
36+
}))

‎site/src/components/DeploySettingsLayout/Sidebar.tsx

+114
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
import { makeStyles } from "@material-ui/core/styles"
2+
import LaunchOutlined from "@material-ui/icons/LaunchOutlined"
3+
import VpnKeyOutlined from "@material-ui/icons/VpnKeyOutlined"
4+
import LockRounded from "@material-ui/icons/LockRounded"
5+
import BarChartOutlined from "@material-ui/icons/BarChartOutlined"
6+
import { Stack } from "components/Stack/Stack"
7+
import React, { ElementType, PropsWithChildren, ReactNode } from "react"
8+
import { NavLink } from "react-router-dom"
9+
import { combineClasses } from "util/combineClasses"
10+
11+
const SidebarNavItem: React.FC<
12+
PropsWithChildren<{ href: string; icon: ReactNode }>
13+
> = ({ children, href, icon }) => {
14+
const styles = useStyles()
15+
return (
16+
<NavLink
17+
to={href}
18+
className={({ isActive }) =>
19+
combineClasses([
20+
styles.sidebarNavItem,
21+
isActive ? styles.sidebarNavItemActive : undefined,
22+
])
23+
}
24+
>
25+
<Stack alignItems="center" spacing={1.5} direction="row">
26+
{icon}
27+
{children}
28+
</Stack>
29+
</NavLink>
30+
)
31+
}
32+
33+
const SidebarNavItemIcon: React.FC<{ icon: ElementType }> = ({
34+
icon: Icon,
35+
}) => {
36+
const styles = useStyles()
37+
return <Icon className={styles.sidebarNavItemIcon} />
38+
}
39+
40+
export const Sidebar: React.FC = () => {
41+
const styles = useStyles()
42+
43+
return (
44+
<nav className={styles.sidebar}>
45+
<SidebarNavItem
46+
href="/settings/general"
47+
icon={<SidebarNavItemIcon icon={LaunchOutlined} />}
48+
>
49+
General
50+
</SidebarNavItem>
51+
<SidebarNavItem
52+
href="/settings/security"
53+
icon={<SidebarNavItemIcon icon={LockRounded} />}
54+
>
55+
Security
56+
</SidebarNavItem>
57+
<SidebarNavItem
58+
href="/settings/metrics"
59+
icon={<SidebarNavItemIcon icon={BarChartOutlined} />}
60+
>
61+
Metrics / observability
62+
</SidebarNavItem>
63+
<SidebarNavItem
64+
href="/settings/auth"
65+
icon={<SidebarNavItemIcon icon={VpnKeyOutlined} />}
66+
>
67+
Authentication
68+
</SidebarNavItem>
69+
</nav>
70+
)
71+
}
72+
73+
const useStyles = makeStyles((theme) => ({
74+
sidebar: {
75+
width: 245,
76+
},
77+
78+
sidebarNavItem: {
79+
color: "inherit",
80+
display: "block",
81+
fontSize: 16,
82+
textDecoration: "none",
83+
padding: theme.spacing(1.5, 1.5, 1.5, 3),
84+
borderRadius: theme.shape.borderRadius / 2,
85+
transition: "background-color 0.15s ease-in-out",
86+
marginBottom: 1,
87+
position: "relative",
88+
89+
"&:hover": {
90+
backgroundColor: theme.palette.action.hover,
91+
},
92+
},
93+
94+
sidebarNavItemActive: {
95+
backgroundColor: theme.palette.action.hover,
96+
97+
"&:before": {
98+
content: '""',
99+
display: "block",
100+
width: 3,
101+
height: "100%",
102+
position: "absolute",
103+
left: 0,
104+
top: 0,
105+
backgroundColor: theme.palette.secondary.dark,
106+
borderRadius: theme.shape.borderRadius,
107+
},
108+
},
109+
110+
sidebarNavItemIcon: {
111+
width: theme.spacing(2),
112+
height: theme.spacing(2),
113+
},
114+
}))

‎site/src/pages/DeploySettingsPage/GeneralSettingsPage.tsx

+44-63
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { makeStyles } from "@material-ui/core/styles"
21
import Table from "@material-ui/core/Table"
32
import TableBody from "@material-ui/core/TableBody"
43
import TableCell from "@material-ui/core/TableCell"
@@ -9,76 +8,58 @@ import {
98
DeploySettingsLayout,
109
SettingsHeader,
1110
} from "components/DeploySettingsLayout/DeploySettingsLayout"
11+
import {
12+
OptionDescription,
13+
OptionName,
14+
OptionValue,
15+
} from "components/DeploySettingsLayout/Option"
1216
import React from "react"
13-
import { MONOSPACE_FONT_FAMILY } from "theme/constants"
1417

1518
export const GeneralSettingsPage: React.FC = () => {
16-
const styles = useStyles()
17-
1819
return (
1920
<DeploySettingsLayout>
20-
<div>
21-
<SettingsHeader
22-
title="General"
23-
description="Deployment and networking settings"
24-
docsHref="https://coder.com/docs/coder-oss/latest/admin/auth#openid-connect-with-google"
25-
/>
21+
<SettingsHeader
22+
title="General"
23+
description="Deployment and networking settings"
24+
docsHref="https://coder.com/docs/coder-oss/latest/admin/auth#openid-connect-with-google"
25+
/>
2626

27-
<TableContainer>
28-
<Table>
29-
<TableHead>
30-
<TableRow>
31-
<TableCell width="50%">Option</TableCell>
32-
<TableCell width="50%">Value</TableCell>
33-
</TableRow>
34-
</TableHead>
35-
<TableBody>
36-
<TableRow>
37-
<TableCell>
38-
<span className={styles.optionName}>Access URL</span>
39-
<span className={styles.optionDescription}>
40-
The address to serve the API and dashboard.
41-
</span>
42-
</TableCell>
27+
<TableContainer>
28+
<Table>
29+
<TableHead>
30+
<TableRow>
31+
<TableCell width="50%">Option</TableCell>
32+
<TableCell width="50%">Value</TableCell>
33+
</TableRow>
34+
</TableHead>
35+
<TableBody>
36+
<TableRow>
37+
<TableCell>
38+
<OptionName>Access URL</OptionName>
39+
<OptionDescription>
40+
The address to serve the API and dashboard.
41+
</OptionDescription>
42+
</TableCell>
4343

44-
<TableCell>
45-
<span className={styles.optionValue}>127.0.0.1:3000</span>
46-
</TableCell>
47-
</TableRow>
48-
<TableRow>
49-
<TableCell>
50-
<span className={styles.optionName}>Wildcard Access URL</span>
51-
<span className={styles.optionDescription}>
52-
Specifies the external URL to access Coder.
53-
</span>
54-
</TableCell>
44+
<TableCell>
45+
<OptionValue>127.0.0.1:3000</OptionValue>
46+
</TableCell>
47+
</TableRow>
48+
<TableRow>
49+
<TableCell>
50+
<OptionName>Wildcard Access URL</OptionName>
51+
<OptionDescription>
52+
Specifies the external URL to access Coder.
53+
</OptionDescription>
54+
</TableCell>
5555

56-
<TableCell>
57-
<span className={styles.optionValue}>
58-
https://www.dev.coder.com
59-
</span>
60-
</TableCell>
61-
</TableRow>
62-
</TableBody>
63-
</Table>
64-
</TableContainer>
65-
</div>
56+
<TableCell>
57+
<OptionValue>https://www.dev.coder.com</OptionValue>
58+
</TableCell>
59+
</TableRow>
60+
</TableBody>
61+
</Table>
62+
</TableContainer>
6663
</DeploySettingsLayout>
6764
)
6865
}
69-
70-
const useStyles = makeStyles((theme) => ({
71-
optionName: {
72-
display: "block",
73-
},
74-
optionDescription: {
75-
display: "block",
76-
color: theme.palette.text.secondary,
77-
fontSize: 14,
78-
marginTop: theme.spacing(0.5),
79-
},
80-
optionValue: {
81-
fontSize: 14,
82-
fontFamily: MONOSPACE_FONT_FAMILY,
83-
},
84-
}))

0 commit comments

Comments
 (0)