Skip to content

Commit f52b7b9

Browse files
BrunoQuaresmaBrunoQuaresma
committed
Load settings from the API
1 parent b4a7cfb commit f52b7b9

File tree

11 files changed

+295
-110
lines changed

11 files changed

+295
-110
lines changed

‎site/src/AppRouter.tsx

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import { GeneralSettingsPage } from "pages/DeploySettingsPage/GeneralSettingsPag
2525
import { SecuritySettingsPage } from "pages/DeploySettingsPage/SecuritySettingsPage"
2626
import { MetricsSettingsPage } from "pages/DeploySettingsPage/MetricsSettingsPage"
2727
import { AuthSettingsPage } from "pages/DeploySettingsPage/AuthSettingsPage"
28+
import { DeploySettingsLayout } from "components/DeploySettingsLayout/DeploySettingsLayout"
2829

2930
// Lazy load pages
3031
// - Pages that are secondary, not in the main navigation or not usually accessed
@@ -246,31 +247,39 @@ export const AppRouter: FC = () => {
246247
path="general"
247248
element={
248249
<AuthAndFrame>
249-
<GeneralSettingsPage />
250+
<DeploySettingsLayout>
251+
<GeneralSettingsPage />
252+
</DeploySettingsLayout>
250253
</AuthAndFrame>
251254
}
252255
/>
253256
<Route
254257
path="security"
255258
element={
256259
<AuthAndFrame>
257-
<SecuritySettingsPage />
260+
<DeploySettingsLayout>
261+
<SecuritySettingsPage />
262+
</DeploySettingsLayout>
258263
</AuthAndFrame>
259264
}
260265
/>
261266
<Route
262267
path="metrics"
263268
element={
264269
<AuthAndFrame>
265-
<MetricsSettingsPage />
270+
<DeploySettingsLayout>
271+
<MetricsSettingsPage />
272+
</DeploySettingsLayout>
266273
</AuthAndFrame>
267274
}
268275
/>
269276
<Route
270277
path="auth"
271278
element={
272279
<AuthAndFrame>
273-
<AuthSettingsPage />
280+
<DeploySettingsLayout>
281+
<AuthSettingsPage />
282+
</DeploySettingsLayout>
274283
</AuthAndFrame>
275284
}
276285
/>

‎site/src/api/api.ts

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

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@ const useStyles = makeStyles((theme) => ({
5959
borderRadius: 9999,
6060
display: "flex",
6161
alignItems: "center",
62+
width: "fit-content",
6263
},
6364

6465
enterpriseBadge: {

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

Lines changed: 40 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,61 @@
1-
import Button from "@material-ui/core/Button"
21
import { makeStyles } from "@material-ui/core/styles"
3-
import LaunchOutlined from "@material-ui/icons/LaunchOutlined"
42
import { Margins } from "components/Margins/Margins"
53
import { Stack } from "components/Stack/Stack"
64
import { Sidebar } from "./Sidebar"
7-
import React, { PropsWithChildren } from "react"
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"
815

9-
export const SettingsHeader: React.FC<{
10-
title: string | JSX.Element
11-
description: string | JSX.Element
12-
docsHref: string
13-
}> = ({ title, description, docsHref }) => {
14-
const styles = useStyles()
16+
type DeploySettingsContextValue = { deploymentFlags: DeploymentFlags }
1517

16-
return (
17-
<Stack alignItems="baseline" direction="row" justifyContent="space-between">
18-
<div className={styles.headingGroup}>
19-
<h1 className={styles.title}>{title}</h1>
20-
<span className={styles.description}>{description}</span>
21-
</div>
18+
const DeploySettingsContext = createContext<
19+
DeploySettingsContextValue | undefined
20+
>(undefined)
2221

23-
<Button
24-
size="small"
25-
startIcon={<LaunchOutlined />}
26-
component="a"
27-
href={docsHref}
28-
target="_blank"
29-
variant="outlined"
30-
>
31-
Read the docs
32-
</Button>
33-
</Stack>
34-
)
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
3530
}
3631

3732
export const DeploySettingsLayout: React.FC<PropsWithChildren> = ({
3833
children,
3934
}) => {
35+
const xServices = useContext(XServiceContext)
36+
const [state, send] = useActor(xServices.deploymentFlagsXService)
4037
const styles = useStyles()
38+
const { deploymentFlags } = state.context
39+
40+
useEffect(() => {
41+
if (state.matches("idle")) {
42+
send("LOAD")
43+
}
44+
}, [send, state])
4145

4246
return (
4347
<Margins>
4448
<Stack className={styles.wrapper} direction="row" spacing={5}>
4549
<Sidebar />
46-
<main className={styles.content}>{children}</main>
50+
<main className={styles.content}>
51+
{deploymentFlags ? (
52+
<DeploySettingsContext.Provider value={{ deploymentFlags }}>
53+
{children}
54+
</DeploySettingsContext.Provider>
55+
) : (
56+
<Loader />
57+
)}
58+
</main>
4759
</Stack>
4860
</Margins>
4961
)
@@ -58,26 +70,4 @@ const useStyles = makeStyles((theme) => ({
5870
maxWidth: 800,
5971
width: "100%",
6072
},
61-
62-
headingGroup: {
63-
maxWidth: 420,
64-
marginBottom: theme.spacing(3),
65-
},
66-
67-
title: {
68-
fontSize: 32,
69-
fontWeight: 700,
70-
display: "flex",
71-
alignItems: "center",
72-
lineHeight: "initial",
73-
margin: 0,
74-
marginBottom: theme.spacing(0.5),
75-
gap: theme.spacing(1),
76-
},
77-
78-
description: {
79-
fontSize: 14,
80-
color: theme.palette.text.secondary,
81-
lineHeight: "160%",
82-
},
8373
}))

‎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/pages/DeploySettingsPage/AuthSettingsPage.tsx

Lines changed: 46 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,8 @@ import {
1010
EnabledBadge,
1111
EnterpriseBadge,
1212
} from "components/DeploySettingsLayout/Badges"
13-
import {
14-
DeploySettingsLayout,
15-
SettingsHeader,
16-
} from "components/DeploySettingsLayout/DeploySettingsLayout"
13+
import { useDeploySettings } from "components/DeploySettingsLayout/DeploySettingsLayout"
14+
import { Header } from "components/DeploySettingsLayout/Header"
1715
import {
1816
OptionDescription,
1917
OptionName,
@@ -23,18 +21,24 @@ import { Stack } from "components/Stack/Stack"
2321
import React from "react"
2422

2523
export const AuthSettingsPage: React.FC = () => {
24+
const { deploymentFlags } = useDeploySettings()
25+
2626
return (
27-
<DeploySettingsLayout>
27+
<>
2828
<Stack direction="column" spacing={6}>
2929
<div>
30-
<SettingsHeader
30+
<Header
3131
title="GitHub"
3232
description="Authentication settings for GitHub"
3333
docsHref="https://coder.com/docs/coder-oss/latest/admin/auth#openid-connect-with-google"
3434
/>
3535

3636
<Badges>
37-
<EnabledBadge />
37+
{deploymentFlags.oauth2_github_allow_signups.value ? (
38+
<EnabledBadge />
39+
) : (
40+
<DisabledBadge />
41+
)}
3842
</Badges>
3943

4044
<TableContainer>
@@ -48,27 +52,35 @@ export const AuthSettingsPage: React.FC = () => {
4852
<TableBody>
4953
<TableRow>
5054
<TableCell>
51-
<OptionName>Client ID</OptionName>
55+
<OptionName>
56+
{deploymentFlags.oauth2_github_client_id.name}
57+
</OptionName>
5258
<OptionDescription>
53-
GitHub client ID for OAuth
59+
{deploymentFlags.oauth2_github_client_id.description}
5460
</OptionDescription>
5561
</TableCell>
5662

5763
<TableCell>
58-
<OptionValue>asjdalsj-9u129jalksjlakjsd</OptionValue>
64+
<OptionValue>
65+
{deploymentFlags.oauth2_github_client_id.value}
66+
</OptionValue>
5967
</TableCell>
6068
</TableRow>
6169

6270
<TableRow>
6371
<TableCell>
64-
<OptionName>Client Secret</OptionName>
72+
<OptionName>
73+
{deploymentFlags.oauth2_github_client_secret.name}
74+
</OptionName>
6575
<OptionDescription>
66-
GitHub client secret for OAuth
76+
{deploymentFlags.oauth2_github_client_secret.description}
6777
</OptionDescription>
6878
</TableCell>
6979

7080
<TableCell>
71-
<OptionValue>Not available</OptionValue>
81+
<OptionValue>
82+
{deploymentFlags.oauth2_github_client_secret.value}
83+
</OptionValue>
7284
</TableCell>
7385
</TableRow>
7486
</TableBody>
@@ -77,14 +89,18 @@ export const AuthSettingsPage: React.FC = () => {
7789
</div>
7890

7991
<div>
80-
<SettingsHeader
92+
<Header
8193
title="OIDC"
8294
description="Authentication settings for GitHub"
8395
docsHref="https://coder.com/docs/coder-oss/latest/admin/auth#openid-connect-with-google"
8496
/>
8597

8698
<Badges>
87-
<DisabledBadge />
99+
{deploymentFlags.oidc_allow_signups.value ? (
100+
<EnabledBadge />
101+
) : (
102+
<DisabledBadge />
103+
)}
88104
<EnterpriseBadge />
89105
</Badges>
90106

@@ -99,34 +115,42 @@ export const AuthSettingsPage: React.FC = () => {
99115
<TableBody>
100116
<TableRow>
101117
<TableCell>
102-
<OptionName>Client ID</OptionName>
118+
<OptionName>
119+
{deploymentFlags.oidc_client_id.name}
120+
</OptionName>
103121
<OptionDescription>
104-
GitHub client ID for OAuth
122+
{deploymentFlags.oidc_client_id.description}
105123
</OptionDescription>
106124
</TableCell>
107125

108126
<TableCell>
109-
<OptionValue>asjdalsj-9u129jalksjlakjsd</OptionValue>
127+
<OptionValue>
128+
{deploymentFlags.oidc_client_id.value}
129+
</OptionValue>
110130
</TableCell>
111131
</TableRow>
112132

113133
<TableRow>
114134
<TableCell>
115-
<OptionName>Client Secret</OptionName>
135+
<OptionName>
136+
{deploymentFlags.oidc_cliet_secret.name}
137+
</OptionName>
116138
<OptionDescription>
117-
GitHub client secret for OAuth
139+
{deploymentFlags.oidc_cliet_secret.description}
118140
</OptionDescription>
119141
</TableCell>
120142

121143
<TableCell>
122-
<OptionValue>Not available</OptionValue>
144+
<OptionValue>
145+
{deploymentFlags.oidc_cliet_secret.value}
146+
</OptionValue>
123147
</TableCell>
124148
</TableRow>
125149
</TableBody>
126150
</Table>
127151
</TableContainer>
128152
</div>
129153
</Stack>
130-
</DeploySettingsLayout>
154+
</>
131155
)
132156
}

0 commit comments

Comments
 (0)