Skip to content

Commit fa7deaa

Browse files
jsjoeiojsjoeio
authored
feat: add storybook for /deployment/security (#5610)
* refactor: move securitysettings to dir * refactor: split page view SecuritySettingsPage * feat: add storybook for security page * fixup
1 parent f70726b commit fa7deaa

File tree

5 files changed

+187
-105
lines changed

5 files changed

+187
-105
lines changed

‎site/src/AppRouter.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,10 @@ const GeneralSettingsPage = lazy(
7777
),
7878
)
7979
const SecuritySettingsPage = lazy(
80-
() => import("./pages/DeploySettingsPage/SecuritySettingsPage"),
80+
() =>
81+
import(
82+
"./pages/DeploySettingsPage/SecuritySettingsPage/SecuritySettingsPage"
83+
),
8184
)
8285
const AppearanceSettingsPage = lazy(
8386
() =>

‎site/src/pages/DeploySettingsPage/SecuritySettingsPage.tsx

-104
This file was deleted.

‎site/src/pages/DeploySettingsPage/SecuritySettingsPage/SecuritySettingsPage.tsx

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { useActor } from "@xstate/react"
2+
import { FeatureNames } from "api/types"
3+
import { useDeploySettings } from "components/DeploySettingsLayout/DeploySettingsLayout"
4+
import React, { useContext } from "react"
5+
import { Helmet } from "react-helmet-async"
6+
import { pageTitle } from "util/page"
7+
import { XServiceContext } from "xServices/StateContext"
8+
import { SecuritySettingsPageView } from "./SecuritySettingsPageView"
9+
10+
const SecuritySettingsPage: React.FC = () => {
11+
const { deploymentConfig: deploymentConfig } = useDeploySettings()
12+
const xServices = useContext(XServiceContext)
13+
const [entitlementsState] = useActor(xServices.entitlementsXService)
14+
15+
return (
16+
<>
17+
<Helmet>
18+
<title>{pageTitle("Security Settings")}</title>
19+
</Helmet>
20+
21+
<SecuritySettingsPageView
22+
deploymentConfig={deploymentConfig}
23+
featureAuditLogEnabled={
24+
entitlementsState.context.entitlements.features[FeatureNames.AuditLog]
25+
.enabled
26+
}
27+
featureBrowserOnlyEnabled={
28+
entitlementsState.context.entitlements.features[
29+
FeatureNames.BrowserOnly
30+
].enabled
31+
}
32+
/>
33+
</>
34+
)
35+
}
36+
37+
export default SecuritySettingsPage

‎site/src/pages/DeploySettingsPage/SecuritySettingsPage/SecuritySettingsPageView.stories.tsx

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import { ComponentMeta, Story } from "@storybook/react"
2+
import {
3+
SecuritySettingsPageView,
4+
SecuritySettingsPageViewProps,
5+
} from "./SecuritySettingsPageView"
6+
7+
export default {
8+
title: "pages/SecuritySettingsPageView",
9+
component: SecuritySettingsPageView,
10+
argTypes: {
11+
deploymentConfig: {
12+
defaultValue: {
13+
ssh_keygen_algorithm: {
14+
name: "key",
15+
usage: "something",
16+
value: "1234",
17+
},
18+
secure_auth_cookie: {
19+
name: "key",
20+
usage: "something",
21+
value: "1234",
22+
},
23+
tls: {
24+
enable: {
25+
name: "yes or no",
26+
usage: "something",
27+
value: true,
28+
},
29+
cert_file: {
30+
name: "yes or no",
31+
usage: "something",
32+
value: ["something"],
33+
},
34+
key_file: {
35+
name: "yes or no",
36+
usage: "something",
37+
value: ["something"],
38+
},
39+
min_version: {
40+
name: "yes or no",
41+
usage: "something",
42+
value: "something",
43+
},
44+
},
45+
},
46+
},
47+
featureAuditLogEnabled: {
48+
defaultValue: true,
49+
},
50+
featureBrowserOnlyEnabled: {
51+
defaultValue: true,
52+
},
53+
},
54+
} as ComponentMeta<typeof SecuritySettingsPageView>
55+
56+
const Template: Story<SecuritySettingsPageViewProps> = (args) => (
57+
<SecuritySettingsPageView {...args} />
58+
)
59+
export const Page = Template.bind({})

‎site/src/pages/DeploySettingsPage/SecuritySettingsPage/SecuritySettingsPageView.tsx

+87
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import { DeploymentConfig } from "api/typesGenerated"
2+
import {
3+
Badges,
4+
DisabledBadge,
5+
EnabledBadge,
6+
EnterpriseBadge,
7+
} from "components/DeploySettingsLayout/Badges"
8+
import { Header } from "components/DeploySettingsLayout/Header"
9+
import OptionsTable from "components/DeploySettingsLayout/OptionsTable"
10+
import { Stack } from "components/Stack/Stack"
11+
12+
export type SecuritySettingsPageViewProps = {
13+
deploymentConfig: Pick<
14+
DeploymentConfig,
15+
"tls" | "ssh_keygen_algorithm" | "secure_auth_cookie"
16+
>
17+
featureAuditLogEnabled: boolean
18+
featureBrowserOnlyEnabled: boolean
19+
}
20+
export const SecuritySettingsPageView = ({
21+
deploymentConfig,
22+
featureAuditLogEnabled,
23+
featureBrowserOnlyEnabled,
24+
}: SecuritySettingsPageViewProps): JSX.Element => (
25+
<>
26+
<Stack direction="column" spacing={6}>
27+
<div>
28+
<Header
29+
title="Security"
30+
description="Ensure your Coder deployment is secure."
31+
/>
32+
33+
<OptionsTable
34+
options={{
35+
ssh_keygen_algorithm: deploymentConfig.ssh_keygen_algorithm,
36+
secure_auth_cookie: deploymentConfig.secure_auth_cookie,
37+
}}
38+
/>
39+
</div>
40+
41+
<div>
42+
<Header
43+
title="Audit Logging"
44+
secondary
45+
description="Allow auditors to monitor user operations in your deployment."
46+
docsHref="https://coder.com/docs/coder-oss/latest/admin/audit-logs"
47+
/>
48+
49+
<Badges>
50+
{featureAuditLogEnabled ? <EnabledBadge /> : <DisabledBadge />}
51+
<EnterpriseBadge />
52+
</Badges>
53+
</div>
54+
55+
<div>
56+
<Header
57+
title="Browser Only Connections"
58+
secondary
59+
description="Block all workspace access via SSH, port forward, and other non-browser connections."
60+
docsHref="https://coder.com/docs/coder-oss/latest/networking#browser-only-connections-enterprise"
61+
/>
62+
63+
<Badges>
64+
{featureBrowserOnlyEnabled ? <EnabledBadge /> : <DisabledBadge />}
65+
<EnterpriseBadge />
66+
</Badges>
67+
</div>
68+
69+
<div>
70+
<Header
71+
title="TLS"
72+
secondary
73+
description="Ensure TLS is properly configured for your Coder deployment."
74+
/>
75+
76+
<OptionsTable
77+
options={{
78+
tls_enable: deploymentConfig.tls.enable,
79+
tls_cert_files: deploymentConfig.tls.cert_file,
80+
tls_key_files: deploymentConfig.tls.key_file,
81+
tls_min_version: deploymentConfig.tls.min_version,
82+
}}
83+
/>
84+
</div>
85+
</Stack>
86+
</>
87+
)

0 commit comments

Comments
 (0)