Skip to content

Commit 5d71163

Browse files
BrunoQuaresmaBrunoQuaresma
committed
Add table
1 parent af7d38b commit 5d71163

File tree

2 files changed

+77
-129
lines changed

2 files changed

+77
-129
lines changed

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

+14-114
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import { Margins } from "components/Margins/Margins"
66
import { Stack } from "components/Stack/Stack"
77
import React, { ElementType, PropsWithChildren, ReactNode } from "react"
88
import { NavLink } from "react-router-dom"
9-
import { MONOSPACE_FONT_FAMILY } from "theme/constants"
109
import { combineClasses } from "util/combineClasses"
1110

1211
const Sidebar: React.FC<PropsWithChildren> = ({ children }) => {
@@ -48,24 +47,13 @@ const SidebarCaption: React.FC<PropsWithChildren> = ({ children }) => {
4847
export const SettingsHeader: React.FC<{
4948
title: string
5049
description: string | JSX.Element
51-
isEnterprise?: boolean
52-
isEnabled?: boolean
5350
docsHref: string
54-
}> = ({ title, description, isEnterprise, docsHref, isEnabled }) => {
51+
}> = ({ title, description, docsHref }) => {
5552
const styles = useStyles()
5653

5754
return (
5855
<Stack alignItems="baseline" direction="row" justifyContent="space-between">
5956
<div className={styles.headingGroup}>
60-
<Stack direction="row" alignItems="center" className={styles.badges} spacing={1}>
61-
{isEnabled ? (
62-
<span className={styles.enabledBadge}>Enabled</span>
63-
) : (
64-
<span className={styles.disabledBadge}>Enabled</span>
65-
)}
66-
{isEnterprise ? <span className={styles.enterpriseBadge}>Enterprise</span> : null}
67-
</Stack>
68-
6957
<h1 className={styles.title}>{title}</h1>
7058
<span className={styles.description}>{description}</span>
7159
</div>
@@ -84,60 +72,21 @@ export const SettingsHeader: React.FC<{
8472
)
8573
}
8674

87-
export const SettingsList: React.FC<PropsWithChildren> = ({ children }) => {
88-
const styles = useStyles()
89-
90-
return <div className={styles.settingsList}>{children}</div>
91-
}
92-
93-
const SettingsValue: React.FC<{ label: string; value: string; type?: "primary" | "secondary" }> = ({
94-
label,
95-
value,
96-
type = "primary",
75+
export const SettingsBadges: React.FC<{ isEnterprise?: boolean; isEnabled?: boolean }> = ({
76+
isEnterprise,
77+
isEnabled,
9778
}) => {
9879
const styles = useStyles()
9980

10081
return (
101-
<div>
102-
<span className={styles.settingsValueLabel}>{label}</span>
103-
<span
104-
className={combineClasses([
105-
styles.settingsValueValue,
106-
type === "secondary" ? styles.settingsValueSecondary : undefined,
107-
])}
108-
>
109-
{value}
110-
</span>
111-
</div>
112-
)
113-
}
114-
115-
export const SettingsItem: React.FC<{
116-
title: string
117-
description: string | JSX.Element
118-
values: { label: string; value: string }[]
119-
}> = ({ title, description, values }) => {
120-
const styles = useStyles()
121-
122-
return (
123-
<section className={styles.settingsItem}>
124-
<div>
125-
<h2 className={styles.settingsItemTitle}>{title}</h2>
126-
<span className={styles.settingsItemDescription}>{description}</span>
127-
</div>
128-
129-
<Stack alignItems="baseline" direction="row" className={styles.settingsValues} spacing={5}>
130-
{values.map(({ value, label }, index) => (
131-
<SettingsValue
132-
key={label}
133-
label={label}
134-
value={value}
135-
// The first value is primary and the other secondary
136-
type={index === 0 ? "primary" : "secondary"}
137-
/>
138-
))}
139-
</Stack>
140-
</section>
82+
<Stack direction="row" alignItems="center" className={styles.badges} spacing={1}>
83+
{isEnabled ? (
84+
<span className={styles.enabledBadge}>Enabled</span>
85+
) : (
86+
<span className={styles.disabledBadge}>Enabled</span>
87+
)}
88+
{isEnterprise ? <span className={styles.enterpriseBadge}>Enterprise</span> : null}
89+
</Stack>
14190
)
14291
}
14392

@@ -235,7 +184,6 @@ const useStyles = makeStyles((theme) => ({
235184
},
236185

237186
headingGroup: {
238-
marginBottom: theme.spacing(3),
239187
maxWidth: 420,
240188
},
241189

@@ -256,7 +204,8 @@ const useStyles = makeStyles((theme) => ({
256204
},
257205

258206
badges: {
259-
marginBottom: theme.spacing(2),
207+
marginTop: theme.spacing(3),
208+
marginBottom: theme.spacing(3),
260209
},
261210

262211
enterpriseBadge: {
@@ -294,53 +243,4 @@ const useStyles = makeStyles((theme) => ({
294243
border: `1px solid ${theme.palette.divider}`,
295244
lineHeight: "160%",
296245
},
297-
298-
settingsList: {
299-
background: theme.palette.background.paper,
300-
borderRadius: theme.shape.borderRadius,
301-
border: `1px solid ${theme.palette.divider}`,
302-
},
303-
304-
settingsItem: {
305-
padding: theme.spacing(4, 5),
306-
307-
"&:not(:last-child)": {
308-
borderBottom: `1px solid ${theme.palette.divider}`,
309-
},
310-
},
311-
312-
settingsItemTitle: {
313-
fontSize: 20,
314-
fontWeight: 400,
315-
lineHeight: "initial",
316-
margin: 0,
317-
marginBottom: theme.spacing(0.5),
318-
},
319-
320-
settingsItemDescription: {
321-
fontSize: 14,
322-
color: theme.palette.text.secondary,
323-
},
324-
325-
settingsValues: {
326-
marginTop: theme.spacing(3),
327-
},
328-
329-
settingsValueLabel: {
330-
fontSize: 14,
331-
fontWeight: 600,
332-
color: theme.palette.text.secondary,
333-
marginBottom: theme.spacing(0.5),
334-
display: "block",
335-
},
336-
337-
settingsValueValue: {
338-
display: "block",
339-
fontSize: 16,
340-
},
341-
342-
settingsValueSecondary: {
343-
fontFamily: MONOSPACE_FONT_FAMILY,
344-
color: theme.palette.text.secondary,
345-
},
346246
}))

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

+63-15
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,22 @@
1+
import { makeStyles } from "@material-ui/core/styles"
2+
import Table from "@material-ui/core/Table"
3+
import TableBody from "@material-ui/core/TableBody"
4+
import TableCell from "@material-ui/core/TableCell"
5+
import TableContainer from "@material-ui/core/TableContainer"
6+
import TableHead from "@material-ui/core/TableHead"
7+
import TableRow from "@material-ui/core/TableRow"
18
import { useActor } from "@xstate/react"
29
import {
310
DeploySettingsLayout,
11+
SettingsBadges,
412
SettingsHeader,
5-
SettingsItem,
6-
SettingsList,
713
} from "components/DeploySettingsLayout/DeploySettingsLayout"
814
import React, { useContext, useEffect } from "react"
15+
import { MONOSPACE_FONT_FAMILY } from "theme/constants"
916
import { XServiceContext } from "../../xServices/StateContext"
1017

1118
export const OIDCSettingsPage: React.FC = () => {
19+
const styles = useStyles()
1220
const xServices = useContext(XServiceContext)
1321
const [authState, authSend] = useActor(xServices.authXService)
1422
useEffect(() => {
@@ -18,23 +26,63 @@ export const OIDCSettingsPage: React.FC = () => {
1826
return (
1927
<DeploySettingsLayout>
2028
<SettingsHeader
21-
isEnabled={authState.context.methods?.oidc}
22-
isEnterprise
2329
title="OpenID Connect"
2430
description="Configure external authentication to sign in to Coder. Use the command-line options in our documentation."
2531
docsHref="https://coder.com/docs/coder-oss/latest/admin/auth#openid-connect-with-google"
2632
/>
27-
<SettingsList>
28-
<SettingsItem
29-
title="Address"
30-
description="The address to serve the API and dashboard."
31-
values={[
32-
{ label: "Value", value: "127.0.0.1:3000" },
33-
{ label: "Flag", value: "--address" },
34-
{ label: "Env. Variable", value: "CODER_ADDRESS" },
35-
]}
36-
/>
37-
</SettingsList>
33+
<SettingsBadges isEnabled={authState.context.methods?.oidc} />
34+
<TableContainer>
35+
<Table>
36+
<TableHead>
37+
<TableRow>
38+
<TableCell width="50%">Option</TableCell>
39+
<TableCell width="50%">Value</TableCell>
40+
</TableRow>
41+
</TableHead>
42+
<TableBody>
43+
<TableRow>
44+
<TableCell>
45+
<span className={styles.optionName}>Address</span>
46+
<span className={styles.optionDescription}>
47+
The address to serve the API and dashboard.
48+
</span>
49+
</TableCell>
50+
51+
<TableCell>
52+
<span className={styles.optionValue}>127.0.0.1:3000</span>
53+
</TableCell>
54+
</TableRow>
55+
<TableRow>
56+
<TableCell>
57+
<span className={styles.optionName}>Access URL</span>
58+
<span className={styles.optionDescription}>
59+
Specifies the external URL to access Coder.
60+
</span>
61+
</TableCell>
62+
63+
<TableCell>
64+
<span className={styles.optionValue}>https://www.dev.coder.com</span>
65+
</TableCell>
66+
</TableRow>
67+
</TableBody>
68+
</Table>
69+
</TableContainer>
3870
</DeploySettingsLayout>
3971
)
4072
}
73+
74+
const useStyles = makeStyles((theme) => ({
75+
optionName: {
76+
display: "block",
77+
},
78+
optionDescription: {
79+
display: "block",
80+
color: theme.palette.text.secondary,
81+
fontSize: 14,
82+
marginTop: theme.spacing(0.5),
83+
},
84+
optionValue: {
85+
fontSize: 14,
86+
fontFamily: MONOSPACE_FONT_FAMILY,
87+
},
88+
}))

0 commit comments

Comments
 (0)