mirror of
https://github.com/coder/coder.git
synced 2025-07-13 21:36:50 +00:00
feat: add storybook for /deployment/security (#5610)
* refactor: move securitysettings to dir * refactor: split page view SecuritySettingsPage * feat: add storybook for security page * fixup
This commit is contained in:
Joe Previte
GitHub
@ -77,7 +77,10 @@ const GeneralSettingsPage = lazy(
|
|||||||
),
|
),
|
||||||
)
|
)
|
||||||
const SecuritySettingsPage = lazy(
|
const SecuritySettingsPage = lazy(
|
||||||
() => import("./pages/DeploySettingsPage/SecuritySettingsPage"),
|
() =>
|
||||||
|
import(
|
||||||
|
"./pages/DeploySettingsPage/SecuritySettingsPage/SecuritySettingsPage"
|
||||||
|
),
|
||||||
)
|
)
|
||||||
const AppearanceSettingsPage = lazy(
|
const AppearanceSettingsPage = lazy(
|
||||||
() =>
|
() =>
|
||||||
|
|||||||
@ -1,104 +0,0 @@
|
|||||||
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"
|
|
||||||
|
|
||||||
const SecuritySettingsPage: React.FC = () => {
|
|
||||||
const { deploymentConfig: deploymentConfig } = useDeploySettings()
|
|
||||||
const xServices = useContext(XServiceContext)
|
|
||||||
const [entitlementsState] = useActor(xServices.entitlementsXService)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<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>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default SecuritySettingsPage
|
|
||||||
@ -0,0 +1,37 @@
|
|||||||
|
import { useActor } from "@xstate/react"
|
||||||
|
import { FeatureNames } from "api/types"
|
||||||
|
import { useDeploySettings } from "components/DeploySettingsLayout/DeploySettingsLayout"
|
||||||
|
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()
|
||||||
|
const xServices = useContext(XServiceContext)
|
||||||
|
const [entitlementsState] = useActor(xServices.entitlementsXService)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Helmet>
|
||||||
|
<title>{pageTitle("Security Settings")}</title>
|
||||||
|
</Helmet>
|
||||||
|
|
||||||
|
<SecuritySettingsPageView
|
||||||
|
deploymentConfig={deploymentConfig}
|
||||||
|
featureAuditLogEnabled={
|
||||||
|
entitlementsState.context.entitlements.features[FeatureNames.AuditLog]
|
||||||
|
.enabled
|
||||||
|
}
|
||||||
|
featureBrowserOnlyEnabled={
|
||||||
|
entitlementsState.context.entitlements.features[
|
||||||
|
FeatureNames.BrowserOnly
|
||||||
|
].enabled
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SecuritySettingsPage
|
||||||
@ -0,0 +1,59 @@
|
|||||||
|
import { ComponentMeta, Story } from "@storybook/react"
|
||||||
|
import {
|
||||||
|
SecuritySettingsPageView,
|
||||||
|
SecuritySettingsPageViewProps,
|
||||||
|
} from "./SecuritySettingsPageView"
|
||||||
|
|
||||||
|
export default {
|
||||||
|
title: "pages/SecuritySettingsPageView",
|
||||||
|
component: SecuritySettingsPageView,
|
||||||
|
argTypes: {
|
||||||
|
deploymentConfig: {
|
||||||
|
defaultValue: {
|
||||||
|
ssh_keygen_algorithm: {
|
||||||
|
name: "key",
|
||||||
|
usage: "something",
|
||||||
|
value: "1234",
|
||||||
|
},
|
||||||
|
secure_auth_cookie: {
|
||||||
|
name: "key",
|
||||||
|
usage: "something",
|
||||||
|
value: "1234",
|
||||||
|
},
|
||||||
|
tls: {
|
||||||
|
enable: {
|
||||||
|
name: "yes or no",
|
||||||
|
usage: "something",
|
||||||
|
value: true,
|
||||||
|
},
|
||||||
|
cert_file: {
|
||||||
|
name: "yes or no",
|
||||||
|
usage: "something",
|
||||||
|
value: ["something"],
|
||||||
|
},
|
||||||
|
key_file: {
|
||||||
|
name: "yes or no",
|
||||||
|
usage: "something",
|
||||||
|
value: ["something"],
|
||||||
|
},
|
||||||
|
min_version: {
|
||||||
|
name: "yes or no",
|
||||||
|
usage: "something",
|
||||||
|
value: "something",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
featureAuditLogEnabled: {
|
||||||
|
defaultValue: true,
|
||||||
|
},
|
||||||
|
featureBrowserOnlyEnabled: {
|
||||||
|
defaultValue: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
} as ComponentMeta<typeof SecuritySettingsPageView>
|
||||||
|
|
||||||
|
const Template: Story<SecuritySettingsPageViewProps> = (args) => (
|
||||||
|
<SecuritySettingsPageView {...args} />
|
||||||
|
)
|
||||||
|
export const Page = Template.bind({})
|
||||||
@ -0,0 +1,87 @@
|
|||||||
|
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"
|
||||||
|
|
||||||
|
export 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 => (
|
||||||
|
<>
|
||||||
|
<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>
|
||||||
|
</>
|
||||||
|
)
|
||||||
Reference in New Issue
Block a user