mirror of https://github.com/coder/coder.git
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
parent
f70726b43c
commit
fa7deaaa5c
|
|
@ -77,7 +77,10 @@ const GeneralSettingsPage = lazy(
|
|||
),
|
||||
)
|
||||
const SecuritySettingsPage = lazy(
|
||||
() => import("./pages/DeploySettingsPage/SecuritySettingsPage"),
|
||||
() =>
|
||||
import(
|
||||
"./pages/DeploySettingsPage/SecuritySettingsPage/SecuritySettingsPage"
|
||||
),
|
||||
)
|
||||
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>
|
||||
</>
|
||||
)
|
||||
Loading…
Reference in New Issue