Skip to content

feat: add storybook for /deployment/security #5610

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.

Sign up for GitHub

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 4 commits into from
Jan 9, 2023
Merged

feat: add storybook for /deployment/security #5610

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ea25d94
refactor: move securitysettings to dir
jsjoeio Jan 6, 2023
bffe1b3
refactor: split page view SecuritySettingsPage
jsjoeio Jan 6, 2023
8e0f2ea
feat: add storybook for security page
jsjoeio Jan 6, 2023
d83a44b
fixup
jsjoeio Jan 9, 2023
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
Prev Previous commit
Next Next commit
refactor: split page view SecuritySettingsPage
  • Loading branch information
@jsjoeio
jsjoeio committed Jan 6, 2023
commit bffe1b36635948463ec2c71b225ef59a21b6bd1e
5 changes: 4 additions & 1 deletion site/src/AppRouter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,10 @@ const GeneralSettingsPage = lazy(
),
)
const SecuritySettingsPage = lazy(
() => import("./pages/DeploySettingsPage/SecuritySettingsPage/SecuritySettingsPage"),
() =>
import(
"./pages/DeploySettingsPage/SecuritySettingsPage/SecuritySettingsPage"
),
)
const AppearanceSettingsPage = lazy(
() =>
Expand Down
93 changes: 13 additions & 80 deletions site/src/pages/DeploySettingsPage/SecuritySettingsPage/SecuritySettingsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,11 @@
import { useActor } from "@xstate/react"
import { FeatureNames } from "api/types"
import {
Badges,
DisabledBadge,
EnabledBadge,
EnterpriseBadge,
} from "components/DeploySettingsLayout/Badges"
import { useDeploySettings } from "components/DeploySettingsLayout/DeploySettingsLayout"
import { Header } from "components/DeploySettingsLayout/Header"
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"
import { SecuritySettingsPageView } from "./SecuritySettingsPageView"

const SecuritySettingsPage: React.FC = () => {
const { deploymentConfig: deploymentConfig } = useDeploySettings()
Expand All @@ -25,78 +17,19 @@ const SecuritySettingsPage: React.FC = () => {
<Helmet>
<title>{pageTitle("Security Settings")}</title>
</Helmet>
<Stack direction="column" spacing={6}>
<div>
<Header
title="Security"
description="Ensure your Coder deployment is secure."
/>

<OptionsTable
options={{
ssh_keygen_algorithm: deploymentConfig.ssh_keygen_algorithm,
secure_auth_cookie: deploymentConfig.secure_auth_cookie,
}}
/>
</div>

<div>
<Header
title="Audit Logging"
secondary
description="Allow auditors to monitor user operations in your deployment."
docsHref="https://coder.com/docs/coder-oss/latest/admin/audit-logs"
/>

<Badges>
{entitlementsState.context.entitlements.features[
FeatureNames.AuditLog
].enabled ? (
<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="https://coder.com/docs/coder-oss/latest/networking#browser-only-connections-enterprise"
/>

<Badges>
{entitlementsState.context.entitlements.features[
FeatureNames.BrowserOnly
].enabled ? (
<EnabledBadge />
) : (
<DisabledBadge />
)}
<EnterpriseBadge />
</Badges>
</div>

<div>
<Header
title="TLS"
secondary
description="Ensure TLS is properly configured for your Coder deployment."
/>

<OptionsTable
options={{
tls_enable: deploymentConfig.tls.enable,
tls_cert_files: deploymentConfig.tls.cert_file,
tls_key_files: deploymentConfig.tls.key_file,
tls_min_version: deploymentConfig.tls.min_version,
}}
/>
</div>
</Stack>
<SecuritySettingsPageView
deploymentConfig={deploymentConfig}
featureAuditLogEnabled={
entitlementsState.context.entitlements.features[FeatureNames.AuditLog]
.enabled
}
featureBrowserOnlyEnabled={
entitlementsState.context.entitlements.features[
FeatureNames.BrowserOnly
].enabled
}
/>
</>
)
}
Expand Down
92 changes: 92 additions & 0 deletions site/src/pages/DeploySettingsPage/SecuritySettingsPage/SecuritySettingsPageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
import { DeploymentConfig } from "api/typesGenerated"
import {
Badges,
DisabledBadge,
EnabledBadge,
EnterpriseBadge,
} from "components/DeploySettingsLayout/Badges"
import { Header } from "components/DeploySettingsLayout/Header"
import OptionsTable from "components/DeploySettingsLayout/OptionsTable"
import { Stack } from "components/Stack/Stack"
import { Helmet } from "react-helmet-async"
import { pageTitle } from "util/page"

type SecuritySettingsPageViewProps = {
deploymentConfig: Pick<
DeploymentConfig,
"tls" | "ssh_keygen_algorithm" | "secure_auth_cookie"
>
featureAuditLogEnabled: boolean
featureBrowserOnlyEnabled: boolean
}
export const SecuritySettingsPageView = ({
deploymentConfig,
featureAuditLogEnabled,
featureBrowserOnlyEnabled,
}: SecuritySettingsPageViewProps): JSX.Element => (
<>
<Helmet>
<title>{pageTitle("Security Settings")}</title>
</Helmet>
<Stack direction="column" spacing={6}>
<div>
<Header
title="Security"
description="Ensure your Coder deployment is secure."
/>

<OptionsTable
options={{
ssh_keygen_algorithm: deploymentConfig.ssh_keygen_algorithm,
secure_auth_cookie: deploymentConfig.secure_auth_cookie,
}}
/>
</div>

<div>
<Header
title="Audit Logging"
secondary
description="Allow auditors to monitor user operations in your deployment."
docsHref="https://coder.com/docs/coder-oss/latest/admin/audit-logs"
/>

<Badges>
{featureAuditLogEnabled ? <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="https://coder.com/docs/coder-oss/latest/networking#browser-only-connections-enterprise"
/>

<Badges>
{featureBrowserOnlyEnabled ? <EnabledBadge /> : <DisabledBadge />}
<EnterpriseBadge />
</Badges>
</div>

<div>
<Header
title="TLS"
secondary
description="Ensure TLS is properly configured for your Coder deployment."
/>

<OptionsTable
options={{
tls_enable: deploymentConfig.tls.enable,
tls_cert_files: deploymentConfig.tls.cert_file,
tls_key_files: deploymentConfig.tls.key_file,
tls_min_version: deploymentConfig.tls.min_version,
}}
/>
</div>
</Stack>
</>
)