Skip to content

Commit b4a7cfb

Browse files
BrunoQuaresmaBrunoQuaresma
committed
Refactor badges
1 parent 0e57abb commit b4a7cfb

File tree

7 files changed

+366
-121
lines changed

7 files changed

+366
-121
lines changed

‎site/src/AppRouter.tsx

+34-7
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,9 @@ import { AuthAndFrame } from "./components/AuthAndFrame/AuthAndFrame"
2222
import { RequireAuth } from "./components/RequireAuth/RequireAuth"
2323
import { SettingsLayout } from "./components/SettingsLayout/SettingsLayout"
2424
import { GeneralSettingsPage } from "pages/DeploySettingsPage/GeneralSettingsPage"
25+
import { SecuritySettingsPage } from "pages/DeploySettingsPage/SecuritySettingsPage"
26+
import { MetricsSettingsPage } from "pages/DeploySettingsPage/MetricsSettingsPage"
27+
import { AuthSettingsPage } from "pages/DeploySettingsPage/AuthSettingsPage"
2528

2629
// Lazy load pages
2730
// - Pages that are secondary, not in the main navigation or not usually accessed
@@ -238,16 +241,40 @@ export const AppRouter: FC = () => {
238241
/>
239242
</Route>
240243

241-
<Route
242-
path="settings/general"
243-
element={
244-
<RequireAuth>
244+
<Route path="settings/deployment">
245+
<Route
246+
path="general"
247+
element={
245248
<AuthAndFrame>
246249
<GeneralSettingsPage />
247250
</AuthAndFrame>
248-
</RequireAuth>
249-
}
250-
/>
251+
}
252+
/>
253+
<Route
254+
path="security"
255+
element={
256+
<AuthAndFrame>
257+
<SecuritySettingsPage />
258+
</AuthAndFrame>
259+
}
260+
/>
261+
<Route
262+
path="metrics"
263+
element={
264+
<AuthAndFrame>
265+
<MetricsSettingsPage />
266+
</AuthAndFrame>
267+
}
268+
/>
269+
<Route
270+
path="auth"
271+
element={
272+
<AuthAndFrame>
273+
<AuthSettingsPage />
274+
</AuthAndFrame>
275+
}
276+
/>
277+
</Route>
251278

252279
<Route path="settings" element={<SettingsLayout />}>
253280
<Route path="account" element={<AccountPage />} />

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

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import { makeStyles } from "@material-ui/core/styles"
2+
import { Stack } from "components/Stack/Stack"
3+
import React, { PropsWithChildren } from "react"
4+
import { combineClasses } from "util/combineClasses"
5+
6+
export const EnabledBadge: React.FC = () => {
7+
const styles = useStyles()
8+
return (
9+
<span className={combineClasses([styles.badge, styles.enabledBadge])}>
10+
Enabled
11+
</span>
12+
)
13+
}
14+
15+
export const DisabledBadge: React.FC = () => {
16+
const styles = useStyles()
17+
return (
18+
<span className={combineClasses([styles.badge, styles.disabledBadge])}>
19+
Disabled
20+
</span>
21+
)
22+
}
23+
24+
export const EnterpriseBadge: React.FC = () => {
25+
const styles = useStyles()
26+
return (
27+
<span className={combineClasses([styles.badge, styles.enterpriseBadge])}>
28+
Enterprise
29+
</span>
30+
)
31+
}
32+
33+
export const Badges: React.FC<PropsWithChildren> = ({ children }) => {
34+
const styles = useStyles()
35+
return (
36+
<Stack
37+
className={styles.badges}
38+
direction="row"
39+
alignItems="center"
40+
spacing={1}
41+
>
42+
{children}
43+
</Stack>
44+
)
45+
}
46+
47+
const useStyles = makeStyles((theme) => ({
48+
badges: {
49+
margin: theme.spacing(0, 0, 2),
50+
},
51+
52+
badge: {
53+
fontSize: 10,
54+
height: 24,
55+
fontWeight: 600,
56+
textTransform: "uppercase",
57+
letterSpacing: "0.085em",
58+
padding: theme.spacing(0, 1.5),
59+
borderRadius: 9999,
60+
display: "flex",
61+
alignItems: "center",
62+
},
63+
64+
enterpriseBadge: {
65+
backgroundColor: theme.palette.info.dark,
66+
border: `1px solid ${theme.palette.info.light}`,
67+
},
68+
69+
enabledBadge: {
70+
border: `1px solid ${theme.palette.success.light}`,
71+
backgroundColor: theme.palette.success.dark,
72+
},
73+
74+
disabledBadge: {
75+
border: `1px solid ${theme.palette.divider}`,
76+
backgroundColor: theme.palette.background.paper,
77+
},
78+
}))

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

+4-110
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { Sidebar } from "./Sidebar"
77
import React, { PropsWithChildren } from "react"
88

99
export const SettingsHeader: React.FC<{
10-
title: string
10+
title: string | JSX.Element
1111
description: string | JSX.Element
1212
docsHref: string
1313
}> = ({ title, description, docsHref }) => {
@@ -34,31 +34,6 @@ export const SettingsHeader: React.FC<{
3434
)
3535
}
3636

37-
export const SettingsBadges: React.FC<{
38-
isEnterprise?: boolean
39-
isEnabled?: boolean
40-
}> = ({ isEnterprise, isEnabled }) => {
41-
const styles = useStyles()
42-
43-
return (
44-
<Stack
45-
direction="row"
46-
alignItems="center"
47-
className={styles.badges}
48-
spacing={1}
49-
>
50-
{isEnabled ? (
51-
<span className={styles.enabledBadge}>Enabled</span>
52-
) : (
53-
<span className={styles.disabledBadge}>Enabled</span>
54-
)}
55-
{isEnterprise ? (
56-
<span className={styles.enterpriseBadge}>Enterprise</span>
57-
) : null}
58-
</Stack>
59-
)
60-
}
61-
6237
export const DeploySettingsLayout: React.FC<PropsWithChildren> = ({
6338
children,
6439
}) => {
@@ -79,111 +54,30 @@ const useStyles = makeStyles((theme) => ({
7954
padding: theme.spacing(6, 0),
8055
},
8156

82-
sidebar: {
83-
width: 245,
84-
},
85-
86-
sidebarNavItem: {
87-
color: "inherit",
88-
display: "block",
89-
fontSize: 16,
90-
textDecoration: "none",
91-
padding: theme.spacing(1.5, 1.5, 1.5, 3),
92-
borderRadius: theme.shape.borderRadius / 2,
93-
transition: "background-color 0.15s ease-in-out",
94-
marginBottom: 1,
95-
position: "relative",
96-
97-
"&:hover": {
98-
backgroundColor: theme.palette.action.hover,
99-
},
100-
},
101-
102-
sidebarNavItemActive: {
103-
backgroundColor: theme.palette.action.hover,
104-
105-
"&:before": {
106-
content: '""',
107-
display: "block",
108-
width: 3,
109-
height: "100%",
110-
position: "absolute",
111-
left: 0,
112-
top: 0,
113-
backgroundColor: theme.palette.secondary.dark,
114-
borderRadius: theme.shape.borderRadius,
115-
},
116-
},
117-
118-
sidebarNavItemIcon: {
119-
width: theme.spacing(2),
120-
height: theme.spacing(2),
121-
},
122-
12357
content: {
12458
maxWidth: 800,
12559
width: "100%",
12660
},
12761

12862
headingGroup: {
12963
maxWidth: 420,
130-
marginBottom: theme.spacing(2),
64+
marginBottom: theme.spacing(3),
13165
},
13266

13367
title: {
134-
fontSize: 36,
68+
fontSize: 32,
13569
fontWeight: 700,
13670
display: "flex",
13771
alignItems: "center",
13872
lineHeight: "initial",
13973
margin: 0,
14074
marginBottom: theme.spacing(0.5),
75+
gap: theme.spacing(1),
14176
},
14277

14378
description: {
14479
fontSize: 14,
14580
color: theme.palette.text.secondary,
14681
lineHeight: "160%",
14782
},
148-
149-
badges: {
150-
marginTop: theme.spacing(3),
151-
marginBottom: theme.spacing(3),
152-
},
153-
154-
enterpriseBadge: {
155-
fontSize: 10,
156-
fontWeight: 600,
157-
textTransform: "uppercase",
158-
letterSpacing: "0.085em",
159-
backgroundColor: theme.palette.info.dark,
160-
padding: theme.spacing(0.5, 2),
161-
borderRadius: 9999,
162-
border: `1px solid ${theme.palette.info.light}`,
163-
lineHeight: "160%",
164-
},
165-
166-
enabledBadge: {
167-
fontSize: 10,
168-
fontWeight: 600,
169-
textTransform: "uppercase",
170-
letterSpacing: "0.085em",
171-
backgroundColor: theme.palette.success.dark,
172-
padding: theme.spacing(0.5, 2),
173-
borderRadius: 9999,
174-
border: `1px solid ${theme.palette.success.light}`,
175-
lineHeight: "160%",
176-
},
177-
178-
disabledBadge: {
179-
fontSize: 10,
180-
fontWeight: 600,
181-
textTransform: "uppercase",
182-
letterSpacing: "0.085em",
183-
backgroundColor: theme.palette.background.paper,
184-
padding: theme.spacing(0.5, 2),
185-
borderRadius: 9999,
186-
border: `1px solid ${theme.palette.divider}`,
187-
lineHeight: "160%",
188-
},
18983
}))

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

+4-4
Original file line numberDiff line numberDiff line change
@@ -43,25 +43,25 @@ export const Sidebar: React.FC = () => {
4343
return (
4444
<nav className={styles.sidebar}>
4545
<SidebarNavItem
46-
href="/settings/general"
46+
href="../general"
4747
icon={<SidebarNavItemIcon icon={LaunchOutlined} />}
4848
>
4949
General
5050
</SidebarNavItem>
5151
<SidebarNavItem
52-
href="/settings/security"
52+
href="../security"
5353
icon={<SidebarNavItemIcon icon={LockRounded} />}
5454
>
5555
Security
5656
</SidebarNavItem>
5757
<SidebarNavItem
58-
href="/settings/metrics"
58+
href="../metrics"
5959
icon={<SidebarNavItemIcon icon={BarChartOutlined} />}
6060
>
6161
Metrics / observability
6262
</SidebarNavItem>
6363
<SidebarNavItem
64-
href="/settings/auth"
64+
href="../auth"
6565
icon={<SidebarNavItemIcon icon={VpnKeyOutlined} />}
6666
>
6767
Authentication

0 commit comments

Comments
 (0)