diff --git a/site/src/components/DeploySettingsLayout/Header.tsx b/site/src/components/DeploySettingsLayout/Header.tsx index ace8b79bf0b0d..638725fbd1070 100644 --- a/site/src/components/DeploySettingsLayout/Header.tsx +++ b/site/src/components/DeploySettingsLayout/Header.tsx @@ -6,7 +6,7 @@ import React from "react" export const Header: React.FC<{ title: string | JSX.Element - description: string | JSX.Element + description?: string | JSX.Element secondary?: boolean docsHref?: string }> = ({ title, description, docsHref, secondary }) => { @@ -18,7 +18,9 @@ export const Header: React.FC<{

{title}

- {description} + {description && ( + {description} + )} {docsHref && ( diff --git a/site/src/components/DeploySettingsLayout/Option.tsx b/site/src/components/DeploySettingsLayout/Option.tsx index 3d59f0e056659..d82aeff1d41d4 100644 --- a/site/src/components/DeploySettingsLayout/Option.tsx +++ b/site/src/components/DeploySettingsLayout/Option.tsx @@ -1,6 +1,7 @@ import { makeStyles } from "@material-ui/core/styles" import React, { PropsWithChildren } from "react" import { MONOSPACE_FONT_FAMILY } from "theme/constants" +import { DisabledBadge, EnabledBadge } from "./Badges" export const OptionName: React.FC = ({ children }) => { const styles = useStyles() @@ -14,8 +15,39 @@ export const OptionDescription: React.FC = ({ return {children} } +const NotSet: React.FC = () => { + const styles = useStyles() + + return Not set +} + export const OptionValue: React.FC = ({ children }) => { const styles = useStyles() + + if (typeof children === "boolean") { + return children ? : + } + + if (Array.isArray(children)) { + if (children.length === 0) { + return + } + + return ( +
    + {children.map((item) => ( +
  • + {item} +
    • + ))} +
+ ) + } + + if (children === "") { + return + } + return {children} } @@ -23,18 +55,31 @@ const useStyles = makeStyles((theme) => ({ optionName: { display: "block", }, + optionDescription: { display: "block", color: theme.palette.text.secondary, fontSize: 14, marginTop: theme.spacing(0.5), }, + optionValue: { fontSize: 14, fontFamily: MONOSPACE_FONT_FAMILY, + overflowWrap: "anywhere", + userSelect: "all", "& ul": { padding: theme.spacing(2), }, }, + + optionValueList: { + margin: 0, + padding: 0, + listStylePosition: "inside", + display: "flex", + flexDirection: "column", + gap: theme.spacing(0.5), + }, })) diff --git a/site/src/components/DeploySettingsLayout/OptionsTable.tsx b/site/src/components/DeploySettingsLayout/OptionsTable.tsx new file mode 100644 index 0000000000000..d54c614b48949 --- /dev/null +++ b/site/src/components/DeploySettingsLayout/OptionsTable.tsx @@ -0,0 +1,64 @@ +import { makeStyles } from "@material-ui/core/styles" +import Table from "@material-ui/core/Table" +import TableBody from "@material-ui/core/TableBody" +import TableCell from "@material-ui/core/TableCell" +import TableContainer from "@material-ui/core/TableContainer" +import TableHead from "@material-ui/core/TableHead" +import TableRow from "@material-ui/core/TableRow" +import { DeploymentFlags } from "api/typesGenerated" +import { + OptionDescription, + OptionName, + OptionValue, +} from "components/DeploySettingsLayout/Option" +import React from "react" + +const OptionsTable: React.FC<{ options: Partial }> = ({ + options, +}) => { + const styles = useStyles() + + return ( + + + + + Option + Value + + + + {Object.values(options).map((option) => { + return ( + + + {option.name} + {option.description} + + + + {option.value} + + + ) + })} + +
+ + ) +} + +const useStyles = makeStyles((theme) => ({ + table: { + "& td": { + paddingTop: theme.spacing(3), + paddingBottom: theme.spacing(3), + }, + + "& td:last-child, & th:last-child": { + paddingLeft: theme.spacing(4), + }, + }, +})) + +export default OptionsTable diff --git a/site/src/pages/DeploySettingsPage/AuthSettingsPage.tsx b/site/src/pages/DeploySettingsPage/AuthSettingsPage.tsx index 066ccfe447e43..008f9f25cbe22 100644 --- a/site/src/pages/DeploySettingsPage/AuthSettingsPage.tsx +++ b/site/src/pages/DeploySettingsPage/AuthSettingsPage.tsx @@ -1,9 +1,3 @@ -import Table from "@material-ui/core/Table" -import TableBody from "@material-ui/core/TableBody" -import TableCell from "@material-ui/core/TableCell" -import TableContainer from "@material-ui/core/TableContainer" -import TableHead from "@material-ui/core/TableHead" -import TableRow from "@material-ui/core/TableRow" import { Badges, DisabledBadge, @@ -11,21 +5,25 @@ import { } from "components/DeploySettingsLayout/Badges" import { useDeploySettings } from "components/DeploySettingsLayout/DeploySettingsLayout" import { Header } from "components/DeploySettingsLayout/Header" -import { - OptionDescription, - OptionName, - OptionValue, -} from "components/DeploySettingsLayout/Option" +import OptionsTable from "components/DeploySettingsLayout/OptionsTable" import { Stack } from "components/Stack/Stack" import React from "react" +import { Helmet } from "react-helmet-async" +import { pageTitle } from "util/page" const AuthSettingsPage: React.FC = () => { const { deploymentFlags } = useDeploySettings() return ( <> + + {pageTitle("Authentication Settings")} + +
+
+
{ )} - - - - - Option - Value - - - - - - - {deploymentFlags.oidc_client_id.name} - - - {deploymentFlags.oidc_client_id.description} - - - - - - {deploymentFlags.oidc_client_id.value} - - - - - - - - {deploymentFlags.oidc_client_secret.name} - - - {deploymentFlags.oidc_client_secret.description} - - - - - - {deploymentFlags.oidc_client_secret.value} - - - - - - - - {deploymentFlags.oidc_allow_signups.name} - - - {deploymentFlags.oidc_allow_signups.description} - - - - - - {deploymentFlags.oidc_allow_signups.value.toString()} - - - - - - - - {deploymentFlags.oidc_email_domain.name} - - - {deploymentFlags.oidc_email_domain.description} - - - - - - {deploymentFlags.oidc_email_domain.value} - - - - - - - - {deploymentFlags.oidc_issuer_url.name} - - - {deploymentFlags.oidc_issuer_url.description} - - - - - - {deploymentFlags.oidc_issuer_url.value} - - - - - - - {deploymentFlags.oidc_scopes.name} - - {deploymentFlags.oidc_scopes.description} - - - - - -
    - {deploymentFlags.oidc_scopes.value.map((scope) => ( -
  • {scope}
    • - ))} -
- - - - -
- +
@@ -174,137 +67,21 @@ const AuthSettingsPage: React.FC = () => { )} - - - - - Option - Value - - - - - - - {deploymentFlags.oauth2_github_client_id.name} - - - {deploymentFlags.oauth2_github_client_id.description} - - - - - - {deploymentFlags.oauth2_github_client_id.value} - - - - - - - - {deploymentFlags.oauth2_github_client_secret.name} - - - {deploymentFlags.oauth2_github_client_secret.description} - - - - - - {deploymentFlags.oauth2_github_client_secret.value} - - - - - - - - {deploymentFlags.oauth2_github_allow_signups.name} - - - {deploymentFlags.oauth2_github_allow_signups.description} - - - - - - {deploymentFlags.oauth2_github_allow_signups.value.toString()} - - - - - - - - {deploymentFlags.oauth2_github_allowed_organizations.name} - - - { - deploymentFlags.oauth2_github_allowed_organizations - .description - } - - - - - -
    - {deploymentFlags.oauth2_github_allowed_organizations.value.map( - (org) => ( -
  • {org}
    • - ), - )} -
- - - - - - - - {deploymentFlags.oauth2_github_allowed_teams.name} - - - {deploymentFlags.oauth2_github_allowed_teams.description} - - - - - -
    - {deploymentFlags.oauth2_github_allowed_teams.value.map( - (team) => ( -
  • {team}
    • - ), - )} -
- - - - - - - - {deploymentFlags.oauth2_github_enterprise_base_url.name} - - - { - deploymentFlags.oauth2_github_enterprise_base_url - .description - } - - - - - - {deploymentFlags.oauth2_github_enterprise_base_url.value} - - - - -
- +
diff --git a/site/src/pages/DeploySettingsPage/GeneralSettingsPage.tsx b/site/src/pages/DeploySettingsPage/GeneralSettingsPage.tsx index f98822c3a687b..ebf523fb0e5a7 100644 --- a/site/src/pages/DeploySettingsPage/GeneralSettingsPage.tsx +++ b/site/src/pages/DeploySettingsPage/GeneralSettingsPage.tsx @@ -1,83 +1,32 @@ -import Table from "@material-ui/core/Table" -import TableBody from "@material-ui/core/TableBody" -import TableCell from "@material-ui/core/TableCell" -import TableContainer from "@material-ui/core/TableContainer" -import TableHead from "@material-ui/core/TableHead" -import TableRow from "@material-ui/core/TableRow" import { useDeploySettings } from "components/DeploySettingsLayout/DeploySettingsLayout" import { Header } from "components/DeploySettingsLayout/Header" -import { - OptionDescription, - OptionName, - OptionValue, -} from "components/DeploySettingsLayout/Option" +import OptionsTable from "components/DeploySettingsLayout/OptionsTable" import React from "react" +import { Helmet } from "react-helmet-async" +import { pageTitle } from "util/page" const GeneralSettingsPage: React.FC = () => { const { deploymentFlags } = useDeploySettings() return ( <> + + {pageTitle("General Settings")} + +
- - - - - Option - Value - - - - - - {deploymentFlags.access_url.name} - - {deploymentFlags.access_url.description} - - - - - {deploymentFlags.access_url.value} - - - - - - {deploymentFlags.address.name} - - {deploymentFlags.address.description} - - - - - {deploymentFlags.address.value} - - - - - - - {deploymentFlags.wildcard_access_url.name} - - - {deploymentFlags.wildcard_access_url.description} - - - - - - {deploymentFlags.wildcard_access_url.value} - - - - -
- + ) } diff --git a/site/src/pages/DeploySettingsPage/NetworkSettingsPage.tsx b/site/src/pages/DeploySettingsPage/NetworkSettingsPage.tsx index d18d6391ecd0c..7bcf9cdede202 100644 --- a/site/src/pages/DeploySettingsPage/NetworkSettingsPage.tsx +++ b/site/src/pages/DeploySettingsPage/NetworkSettingsPage.tsx @@ -1,120 +1,34 @@ -import Table from "@material-ui/core/Table" -import TableBody from "@material-ui/core/TableBody" -import TableCell from "@material-ui/core/TableCell" -import TableContainer from "@material-ui/core/TableContainer" -import TableHead from "@material-ui/core/TableHead" -import TableRow from "@material-ui/core/TableRow" -import { - DisabledBadge, - EnabledBadge, -} from "components/DeploySettingsLayout/Badges" import { useDeploySettings } from "components/DeploySettingsLayout/DeploySettingsLayout" import { Header } from "components/DeploySettingsLayout/Header" -import { - OptionDescription, - OptionName, - OptionValue, -} from "components/DeploySettingsLayout/Option" -import { Stack } from "components/Stack/Stack" +import OptionsTable from "components/DeploySettingsLayout/OptionsTable" import React from "react" +import { Helmet } from "react-helmet-async" +import { pageTitle } from "util/page" const NetworkSettingsPage: React.FC = () => { const { deploymentFlags } = useDeploySettings() return ( - -
-
- - - - - - Option - Value - - - - - - - {deploymentFlags.derp_server_enabled.name} - - - {deploymentFlags.derp_server_enabled.description} - - - - - - {deploymentFlags.derp_server_enabled.value ? ( - - ) : ( - - )} - - - - - - - - {deploymentFlags.derp_server_region_name.name} - - - {deploymentFlags.derp_server_region_name.description} - - - - - - {deploymentFlags.derp_server_region_name.value} - - - - - - - - {deploymentFlags.derp_server_stun_address.name} - - - {deploymentFlags.derp_server_stun_address.description} - - - - - - {deploymentFlags.derp_server_stun_address.value} - - - - - - - - {deploymentFlags.derp_config_url.name} - - - {deploymentFlags.derp_config_url.description} - - - - - - {deploymentFlags.derp_config_url.value} - - - - -
- -
- + <> + + {pageTitle("Network Settings")} + + +
+ + + ) } diff --git a/site/src/pages/DeploySettingsPage/SecuritySettingsPage.tsx b/site/src/pages/DeploySettingsPage/SecuritySettingsPage.tsx index f0d36c098ef2b..987c61b93c85f 100644 --- a/site/src/pages/DeploySettingsPage/SecuritySettingsPage.tsx +++ b/site/src/pages/DeploySettingsPage/SecuritySettingsPage.tsx @@ -1,9 +1,3 @@ -import Table from "@material-ui/core/Table" -import TableBody from "@material-ui/core/TableBody" -import TableCell from "@material-ui/core/TableCell" -import TableContainer from "@material-ui/core/TableContainer" -import TableHead from "@material-ui/core/TableHead" -import TableRow from "@material-ui/core/TableRow" import { useActor } from "@xstate/react" import { FeatureNames } from "api/types" import { @@ -14,13 +8,11 @@ import { } from "components/DeploySettingsLayout/Badges" import { useDeploySettings } from "components/DeploySettingsLayout/DeploySettingsLayout" import { Header } from "components/DeploySettingsLayout/Header" -import { - OptionDescription, - OptionName, - OptionValue, -} from "components/DeploySettingsLayout/Option" +import OptionsTable from "components/DeploySettingsLayout/OptionsTable" import { Stack } from "components/Stack/Stack" import React, { useContext } from "react" +import { Helmet } from "react-helmet-async" +import { pageTitle } from "util/page" import { XServiceContext } from "xServices/StateContext" const SecuritySettingsPage: React.FC = () => { @@ -29,201 +21,83 @@ const SecuritySettingsPage: React.FC = () => { const [entitlementsState] = useActor(xServices.entitlementsXService) return ( - -
-
- - - - - - Option - Value - - - - - - - {deploymentFlags.ssh_keygen_algorithm.name} - - - {deploymentFlags.ssh_keygen_algorithm.description} - - - - - - {deploymentFlags.ssh_keygen_algorithm.value} - - - - - - - {deploymentFlags.secure_auth_cookie.name} - - - {deploymentFlags.secure_auth_cookie.description} - - - - - - {deploymentFlags.secure_auth_cookie.value ? ( - - ) : ( - - )} - - - - -
- -
- -
-
- - - {entitlementsState.context.entitlements.features[ - FeatureNames.AuditLog - ].enabled ? ( - - ) : ( - - )} - - -
- -
-
- - - {entitlementsState.context.entitlements.features[ - FeatureNames.BrowserOnly - ].enabled ? ( - - ) : ( - - )} - - -
- -
-
- - - - - - Option - Value - - - - - - {deploymentFlags.tls_enable.name} - - {deploymentFlags.tls_enable.description} - - - - - - {deploymentFlags.tls_enable.value ? ( - - ) : ( - - )} - - - - - - - {deploymentFlags.tls_cert_files.name} - - {deploymentFlags.tls_cert_files.description} - - - - - -
    - {deploymentFlags.tls_cert_files.value.map( - (file, index) => ( -
  • {file}
    • - ), - )} -
- - - - - - - {deploymentFlags.tls_key_files.name} - - {deploymentFlags.tls_key_files.description} - - - - - -
    - {deploymentFlags.tls_key_files.value.map( - (file, index) => ( -
  • {file}
    • - ), - )} -
- - - - - - - - {deploymentFlags.tls_min_version.name} - - - {deploymentFlags.tls_min_version.description} - - - - - - {deploymentFlags.tls_min_version.value} - - - - -
- -
- + <> + + {pageTitle("Security Settings")} + + +
+
+ + +
+ +
+
+ + + {entitlementsState.context.entitlements.features[ + FeatureNames.AuditLog + ].enabled ? ( + + ) : ( + + )} + + +
+ +
+
+ + + {entitlementsState.context.entitlements.features[ + FeatureNames.BrowserOnly + ].enabled ? ( + + ) : ( + + )} + + +
+ +
+
+ + +
+ + ) }