Skip to content

fix: hide OIDC and Github auth settings when they are disabled #9447

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Aug 30, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions site/src/components/DeploySettingsLayout/OptionsTable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import {
OptionValue,
} from "components/DeploySettingsLayout/Option"
import { FC } from "react"
import { DisabledBadge } from "./Badges"
import { intervalToDuration, formatDuration } from "date-fns"

const OptionsTable: FC<{
Expand All @@ -21,7 +20,7 @@ const OptionsTable: FC<{
const styles = useStyles()

if (options.length === 0) {
return <DisabledBadge></DisabledBadge>
return <p>No options to configure</p>
}

return (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,66 +23,70 @@ export const SecuritySettingsPageView = ({
options: options,
featureAuditLogEnabled,
featureBrowserOnlyEnabled,
}: SecuritySettingsPageViewProps): JSX.Element => (
<>
<Stack direction="column" spacing={6}>
<div>
<Header
title="Security"
description="Ensure your Coder deployment is secure."
/>
}: SecuritySettingsPageViewProps): JSX.Element => {
const tlsOptions = options.filter((o) =>
deploymentGroupHasParent(o.group, "TLS"),
)

<OptionsTable
options={useDeploymentOptions(
options,
"SSH Keygen Algorithm",
"Secure Auth Cookie",
"Disable Owner Workspace Access",
)}
/>
</div>
return (
<>
<Stack direction="column" spacing={6}>
<div>
<Header
title="Security"
description="Ensure your Coder deployment is secure."
/>

<div>
<Header
title="Audit Logging"
secondary
description="Allow auditors to monitor user operations in your deployment."
docsHref={docs("/admin/audit-logs")}
/>
<OptionsTable
options={useDeploymentOptions(
options,
"SSH Keygen Algorithm",
"Secure Auth Cookie",
"Disable Owner Workspace Access",
)}
/>
</div>

<Badges>
{featureAuditLogEnabled ? <EnabledBadge /> : <DisabledBadge />}
<EnterpriseBadge />
</Badges>
</div>
<div>
<Header
title="Audit Logging"
secondary
description="Allow auditors to monitor user operations in your deployment."
docsHref={docs("/admin/audit-logs")}
/>

<div>
<Header
title="Browser Only Connections"
secondary
description="Block all workspace access via SSH, port forward, and other non-browser connections."
docsHref={docs("/networking#browser-only-connections-enterprise")}
/>
<Badges>
{featureAuditLogEnabled ? <EnabledBadge /> : <DisabledBadge />}
<EnterpriseBadge />
</Badges>
</div>

<Badges>
{featureBrowserOnlyEnabled ? <EnabledBadge /> : <DisabledBadge />}
<EnterpriseBadge />
</Badges>
</div>
<div>
<Header
title="Browser Only Connections"
secondary
description="Block all workspace access via SSH, port forward, and other non-browser connections."
docsHref={docs("/networking#browser-only-connections-enterprise")}
/>

<div>
<Header
title="TLS"
secondary
description="Ensure TLS is properly configured for your Coder deployment."
/>
<Badges>
{featureBrowserOnlyEnabled ? <EnabledBadge /> : <DisabledBadge />}
<EnterpriseBadge />
</Badges>
</div>

<OptionsTable
options={options.filter((o) =>
deploymentGroupHasParent(o.group, "TLS"),
)}
/>
</div>
</Stack>
</>
)
{tlsOptions.length > 0 && (
<div>
<Header
title="TLS"
secondary
description="Ensure TLS is properly configured for your Coder deployment."
/>

<OptionsTable options={tlsOptions} />
</div>
)}
</Stack>
</>
)
}
Original file line number Diff line number Diff line change
Expand Up @@ -19,56 +19,59 @@ export type UserAuthSettingsPageViewProps = {

export const UserAuthSettingsPageView = ({
options,
}: UserAuthSettingsPageViewProps): JSX.Element => (
<>
<Stack direction="column" spacing={6}>
<div>
<Header title="User Authentication" />
}: UserAuthSettingsPageViewProps): JSX.Element => {
const oidcEnabled = Boolean(
useDeploymentOptions(options, "OIDC Client ID")[0].value,
)
const githubEnabled = Boolean(
useDeploymentOptions(options, "OAuth2 GitHub Client ID")[0].value,
)

<Header
title="Login with OpenID Connect"
secondary
description="Set up authentication to login with OpenID Connect."
docsHref={docs("/admin/auth#openid-connect-with-google")}
/>
return (
<>
<Stack direction="column" spacing={6}>
<div>
<Header title="User Authentication" />

<Badges>
{useDeploymentOptions(options, "OIDC Client ID")[0].value ? (
<EnabledBadge />
) : (
<DisabledBadge />
)}
</Badges>
<Header
title="Login with OpenID Connect"
secondary
description="Set up authentication to login with OpenID Connect."
docsHref={docs("/admin/auth#openid-connect-with-google")}
/>

<Badges>{oidcEnabled ? <EnabledBadge /> : <DisabledBadge />}</Badges>

<OptionsTable
options={options.filter((o) =>
deploymentGroupHasParent(o.group, "OIDC"),
{oidcEnabled && (
<OptionsTable
options={options.filter((o) =>
deploymentGroupHasParent(o.group, "OIDC"),
)}
/>
)}
/>
</div>
</div>

<div>
<Header
title="Login with GitHub"
secondary
description="Set up authentication to login with GitHub."
docsHref={docs("/admin/auth#github")}
/>
<div>
<Header
title="Login with GitHub"
secondary
description="Set up authentication to login with GitHub."
docsHref={docs("/admin/auth#github")}
/>

<Badges>
{useDeploymentOptions(options, "OAuth2 GitHub Client ID")[0].value ? (
<EnabledBadge />
) : (
<DisabledBadge />
)}
</Badges>
<Badges>
{githubEnabled ? <EnabledBadge /> : <DisabledBadge />}
</Badges>

<OptionsTable
options={options.filter((o) =>
deploymentGroupHasParent(o.group, "GitHub"),
{githubEnabled && (
<OptionsTable
options={options.filter((o) =>
deploymentGroupHasParent(o.group, "GitHub"),
)}
/>
)}
/>
</div>
</Stack>
</>
)
</div>
</Stack>
</>
)
}