Skip to content

Commit 6807ad0

Browse files
jsjoeiojsjoeio
authored
feat: add storybook for /deployment/userauth (#5609)
* refactor: move deploysettingspage to dir * refactor: split page/view UserAuthSettings * feat: add storybook for user auth * Update site/src/components/DeploySettingsLayout/OptionsTable.tsx
1 parent a4ca8ff commit 6807ad0

File tree

5 files changed

+184
-86
lines changed

5 files changed

+184
-86
lines changed

‎site/src/AppRouter.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,10 @@ const AppearanceSettingsPage = lazy(
8686
),
8787
)
8888
const UserAuthSettingsPage = lazy(
89-
() => import("./pages/DeploySettingsPage/UserAuthSettingsPage"),
89+
() =>
90+
import(
91+
"./pages/DeploySettingsPage/UserAuthSettingsPage/UserAuthSettingsPage"
92+
),
9093
)
9194
const GitAuthSettingsPage = lazy(
9295
() =>

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

-85
This file was deleted.

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

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { useDeploySettings } from "components/DeploySettingsLayout/DeploySettingsLayout"
2+
import React from "react"
3+
import { Helmet } from "react-helmet-async"
4+
import { pageTitle } from "util/page"
5+
import { UserAuthSettingsPageView } from "./UserAuthSettingsPageView"
6+
7+
const UserAuthSettingsPage: React.FC = () => {
8+
const { deploymentConfig: deploymentConfig } = useDeploySettings()
9+
10+
return (
11+
<>
12+
<Helmet>
13+
<title>{pageTitle("User Authentication Settings")}</title>
14+
</Helmet>
15+
16+
<UserAuthSettingsPageView deploymentConfig={deploymentConfig} />
17+
</>
18+
)
19+
}
20+
21+
export default UserAuthSettingsPage

‎site/src/pages/DeploySettingsPage/UserAuthSettingsPage/UserAuthSettingsPageView.stories.tsx

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import { ComponentMeta, Story } from "@storybook/react"
2+
import {
3+
UserAuthSettingsPageView,
4+
UserAuthSettingsPageViewProps,
5+
} from "./UserAuthSettingsPageView"
6+
7+
export default {
8+
title: "pages/UserAuthSettingsPageView",
9+
component: UserAuthSettingsPageView,
10+
argTypes: {
11+
deploymentConfig: {
12+
defaultValue: {
13+
oidc: {
14+
client_id: {
15+
name: "OIDC Client ID",
16+
usage: "Client ID to use for Login with OIDC.",
17+
value: "1234",
18+
},
19+
allow_signups: {
20+
name: "OIDC Allow Signups",
21+
usage: "Whether new users can sign up with OIDC.",
22+
value: true,
23+
},
24+
email_domain: {
25+
name: "OIDC Email Domain",
26+
usage:
27+
"Email domains that clients logging in with OIDC must match.",
28+
value: "@coder.com",
29+
},
30+
issuer_url: {
31+
name: "OIDC Issuer URL",
32+
usage: "Issuer URL to use for Login with OIDC.",
33+
value: "https://coder.com",
34+
},
35+
scopes: {
36+
name: "OIDC Scopes",
37+
usage: "Scopes to grant when authenticating with OIDC.",
38+
value: ["idk"],
39+
},
40+
},
41+
oauth2: {
42+
github: {
43+
client_id: {
44+
name: "OAuth2 GitHub Client ID",
45+
usage: "Client ID for Login with GitHub.",
46+
value: "1224",
47+
},
48+
allow_signups: {
49+
name: "OAuth2 GitHub Allow Signups",
50+
usage: "Whether new users can sign up with GitHub.",
51+
value: true,
52+
},
53+
enterprise_base_url: {
54+
name: "OAuth2 GitHub Enterprise Base URL",
55+
usage:
56+
"Base URL of a GitHub Enterprise deployment to use for Login with GitHub.",
57+
value: "https://google.com",
58+
},
59+
allowed_orgs: {
60+
name: "OAuth2 GitHub Allowed Orgs",
61+
usage:
62+
"Organizations the user must be a member of to Login with GitHub.",
63+
value: true,
64+
},
65+
allowed_teams: {
66+
name: "OAuth2 GitHub Allowed Teams",
67+
usage:
68+
"Teams inside organizations the user must be a member of to Login with GitHub. Structured as: <organization-name>/<team-slug>.",
69+
value: true,
70+
},
71+
},
72+
},
73+
},
74+
},
75+
},
76+
} as ComponentMeta<typeof UserAuthSettingsPageView>
77+
78+
const Template: Story<UserAuthSettingsPageViewProps> = (args) => (
79+
<UserAuthSettingsPageView {...args} />
80+
)
81+
export const Page = Template.bind({})

‎site/src/pages/DeploySettingsPage/UserAuthSettingsPage/UserAuthSettingsPageView.tsx

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import { DeploymentConfig } from "api/typesGenerated"
2+
import {
3+
Badges,
4+
DisabledBadge,
5+
EnabledBadge,
6+
} from "components/DeploySettingsLayout/Badges"
7+
import { Header } from "components/DeploySettingsLayout/Header"
8+
import OptionsTable from "components/DeploySettingsLayout/OptionsTable"
9+
import { Stack } from "components/Stack/Stack"
10+
11+
export type UserAuthSettingsPageViewProps = {
12+
deploymentConfig: Pick<DeploymentConfig, "oidc" | "oauth2">
13+
}
14+
15+
export const UserAuthSettingsPageView = ({
16+
deploymentConfig,
17+
}: UserAuthSettingsPageViewProps): JSX.Element => (
18+
<>
19+
<Stack direction="column" spacing={6}>
20+
<div>
21+
<Header title="User Authentication" />
22+
23+
<Header
24+
title="Login with OpenID Connect"
25+
secondary
26+
description="Set up authentication to login with OpenID Connect."
27+
docsHref="https://coder.com/docs/coder-oss/latest/admin/auth#openid-connect-with-google"
28+
/>
29+
30+
<Badges>
31+
{deploymentConfig.oidc.client_id.value ? (
32+
<EnabledBadge />
33+
) : (
34+
<DisabledBadge />
35+
)}
36+
</Badges>
37+
38+
<OptionsTable
39+
options={{
40+
client_id: deploymentConfig.oidc.client_id,
41+
allow_signups: deploymentConfig.oidc.allow_signups,
42+
email_domain: deploymentConfig.oidc.email_domain,
43+
issuer_url: deploymentConfig.oidc.issuer_url,
44+
scopes: deploymentConfig.oidc.scopes,
45+
}}
46+
/>
47+
</div>
48+
49+
<div>
50+
<Header
51+
title="Login with GitHub"
52+
secondary
53+
description="Set up authentication to login with GitHub."
54+
docsHref="https://coder.com/docs/coder-oss/latest/admin/auth#github"
55+
/>
56+
57+
<Badges>
58+
{deploymentConfig.oauth2.github.client_id.value ? (
59+
<EnabledBadge />
60+
) : (
61+
<DisabledBadge />
62+
)}
63+
</Badges>
64+
65+
<OptionsTable
66+
options={{
67+
client_id: deploymentConfig.oauth2.github.client_id,
68+
allow_signups: deploymentConfig.oauth2.github.allow_signups,
69+
allowed_orgs: deploymentConfig.oauth2.github.allowed_orgs,
70+
allowed_teams: deploymentConfig.oauth2.github.allowed_teams,
71+
enterprise_base_url:
72+
deploymentConfig.oauth2.github.enterprise_base_url,
73+
}}
74+
/>
75+
</div>
76+
</Stack>
77+
</>
78+
)

0 commit comments

Comments
 (0)