Skip to content

Commit dee46ec

Browse files
kylecarbskylecarbs
committed
Merge branch 'bq/settings-page' into deployment
2 parents 2ba4a62 + f52b7b9 commit dee46ec

File tree

15 files changed

+878
-1
lines changed

15 files changed

+878
-1
lines changed

‎site/src/AppRouter.tsx

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,11 @@ import { XServiceContext } from "xServices/StateContext"
2121
import { AuthAndFrame } from "./components/AuthAndFrame/AuthAndFrame"
2222
import { RequireAuth } from "./components/RequireAuth/RequireAuth"
2323
import { SettingsLayout } from "./components/SettingsLayout/SettingsLayout"
24+
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"
28+
import { DeploySettingsLayout } from "components/DeploySettingsLayout/DeploySettingsLayout"
2429

2530
// Lazy load pages
2631
// - Pages that are secondary, not in the main navigation or not usually accessed
@@ -237,6 +242,49 @@ export const AppRouter: FC = () => {
237242
/>
238243
</Route>
239244

245+
<Route path="settings/deployment">
246+
<Route
247+
path="general"
248+
element={
249+
<AuthAndFrame>
250+
<DeploySettingsLayout>
251+
<GeneralSettingsPage />
252+
</DeploySettingsLayout>
253+
</AuthAndFrame>
254+
}
255+
/>
256+
<Route
257+
path="security"
258+
element={
259+
<AuthAndFrame>
260+
<DeploySettingsLayout>
261+
<SecuritySettingsPage />
262+
</DeploySettingsLayout>
263+
</AuthAndFrame>
264+
}
265+
/>
266+
<Route
267+
path="metrics"
268+
element={
269+
<AuthAndFrame>
270+
<DeploySettingsLayout>
271+
<MetricsSettingsPage />
272+
</DeploySettingsLayout>
273+
</AuthAndFrame>
274+
}
275+
/>
276+
<Route
277+
path="auth"
278+
element={
279+
<AuthAndFrame>
280+
<DeploySettingsLayout>
281+
<AuthSettingsPage />
282+
</DeploySettingsLayout>
283+
</AuthAndFrame>
284+
}
285+
/>
286+
</Route>
287+
240288
<Route path="settings" element={<SettingsLayout />}>
241289
<Route path="account" element={<AccountPage />} />
242290
<Route path="security" element={<SecurityPage />} />

‎site/src/api/api.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -641,3 +641,9 @@ export const getAgentListeningPorts = async (
641641
)
642642
return response.data
643643
}
644+
645+
export const getDeploymentFlags =
646+
async (): Promise<TypesGen.DeploymentFlags> => {
647+
const response = await axios.get(`/api/v2/flags/deployment`)
648+
return response.data
649+
}

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

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
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+
width: "fit-content",
63+
},
64+
65+
enterpriseBadge: {
66+
backgroundColor: theme.palette.info.dark,
67+
border: `1px solid ${theme.palette.info.light}`,
68+
},
69+
70+
enabledBadge: {
71+
border: `1px solid ${theme.palette.success.light}`,
72+
backgroundColor: theme.palette.success.dark,
73+
},
74+
75+
disabledBadge: {
76+
border: `1px solid ${theme.palette.divider}`,
77+
backgroundColor: theme.palette.background.paper,
78+
},
79+
}))

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

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import { makeStyles } from "@material-ui/core/styles"
2+
import { Margins } from "components/Margins/Margins"
3+
import { Stack } from "components/Stack/Stack"
4+
import { Sidebar } from "./Sidebar"
5+
import React, {
6+
createContext,
7+
PropsWithChildren,
8+
useContext,
9+
useEffect,
10+
} from "react"
11+
import { useActor } from "@xstate/react"
12+
import { XServiceContext } from "xServices/StateContext"
13+
import { Loader } from "components/Loader/Loader"
14+
import { DeploymentFlags } from "api/typesGenerated"
15+
16+
type DeploySettingsContextValue = { deploymentFlags: DeploymentFlags }
17+
18+
const DeploySettingsContext = createContext<
19+
DeploySettingsContextValue | undefined
20+
>(undefined)
21+
22+
export const useDeploySettings = (): DeploySettingsContextValue => {
23+
const context = useContext(DeploySettingsContext)
24+
if (!context) {
25+
throw new Error(
26+
"useDeploySettings should be used inside of DeploySettingsLayout",
27+
)
28+
}
29+
return context
30+
}
31+
32+
export const DeploySettingsLayout: React.FC<PropsWithChildren> = ({
33+
children,
34+
}) => {
35+
const xServices = useContext(XServiceContext)
36+
const [state, send] = useActor(xServices.deploymentFlagsXService)
37+
const styles = useStyles()
38+
const { deploymentFlags } = state.context
39+
40+
useEffect(() => {
41+
if (state.matches("idle")) {
42+
send("LOAD")
43+
}
44+
}, [send, state])
45+
46+
return (
47+
<Margins>
48+
<Stack className={styles.wrapper} direction="row" spacing={5}>
49+
<Sidebar />
50+
<main className={styles.content}>
51+
{deploymentFlags ? (
52+
<DeploySettingsContext.Provider value={{ deploymentFlags }}>
53+
{children}
54+
</DeploySettingsContext.Provider>
55+
) : (
56+
<Loader />
57+
)}
58+
</main>
59+
</Stack>
60+
</Margins>
61+
)
62+
}
63+
64+
const useStyles = makeStyles((theme) => ({
65+
wrapper: {
66+
padding: theme.spacing(6, 0),
67+
},
68+
69+
content: {
70+
maxWidth: 800,
71+
width: "100%",
72+
},
73+
}))

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

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import Button from "@material-ui/core/Button"
2+
import { makeStyles } from "@material-ui/core/styles"
3+
import LaunchOutlined from "@material-ui/icons/LaunchOutlined"
4+
import { Stack } from "components/Stack/Stack"
5+
import React from "react"
6+
7+
export const Header: React.FC<{
8+
title: string | JSX.Element
9+
description: string | JSX.Element
10+
docsHref: string
11+
}> = ({ title, description, docsHref }) => {
12+
const styles = useStyles()
13+
14+
return (
15+
<Stack alignItems="baseline" direction="row" justifyContent="space-between">
16+
<div className={styles.headingGroup}>
17+
<h1 className={styles.title}>{title}</h1>
18+
<span className={styles.description}>{description}</span>
19+
</div>
20+
21+
<Button
22+
size="small"
23+
startIcon={<LaunchOutlined />}
24+
component="a"
25+
href={docsHref}
26+
target="_blank"
27+
variant="outlined"
28+
>
29+
Read the docs
30+
</Button>
31+
</Stack>
32+
)
33+
}
34+
35+
const useStyles = makeStyles((theme) => ({
36+
headingGroup: {
37+
maxWidth: 420,
38+
marginBottom: theme.spacing(3),
39+
},
40+
41+
title: {
42+
fontSize: 32,
43+
fontWeight: 700,
44+
display: "flex",
45+
alignItems: "center",
46+
lineHeight: "initial",
47+
margin: 0,
48+
marginBottom: theme.spacing(0.5),
49+
gap: theme.spacing(1),
50+
},
51+
52+
description: {
53+
fontSize: 14,
54+
color: theme.palette.text.secondary,
55+
lineHeight: "160%",
56+
},
57+
}))

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

Lines changed: 36 additions & 0 deletions
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+
}))

0 commit comments

Comments
 (0)