Skip to content

feat: add storybook for /deployment/userauth #5609

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/userauth #5609

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2184520
refactor: move deploysettingspage to dir
jsjoeio Jan 6, 2023
e530461
refactor: split page/view UserAuthSettings
jsjoeio Jan 6, 2023
d66bfa1
feat: add storybook for user auth
jsjoeio Jan 6, 2023
2453193
Update site/src/components/DeploySettingsLayout/OptionsTable.tsx
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
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 @@ -86,7 +86,10 @@ const AppearanceSettingsPage = lazy(
),
)
const UserAuthSettingsPage = lazy(
() => import("./pages/DeploySettingsPage/UserAuthSettingsPage"),
() =>
import(
"./pages/DeploySettingsPage/UserAuthSettingsPage/UserAuthSettingsPage"
),
)
const GitAuthSettingsPage = lazy(
() =>
Expand Down
85 changes: 0 additions & 85 deletions site/src/pages/DeploySettingsPage/UserAuthSettingsPage.tsx
View file
Open in desktop

This file was deleted.

21 changes: 21 additions & 0 deletions site/src/pages/DeploySettingsPage/UserAuthSettingsPage/UserAuthSettingsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { useDeploySettings } from "components/DeploySettingsLayout/DeploySettingsLayout"
import React from "react"
import { Helmet } from "react-helmet-async"
import { pageTitle } from "util/page"
import { UserAuthSettingsPageView } from "./UserAuthSettingsPageView"

const UserAuthSettingsPage: React.FC = () => {
const { deploymentConfig: deploymentConfig } = useDeploySettings()

return (
<>
<Helmet>
<title>{pageTitle("User Authentication Settings")}</title>
</Helmet>

<UserAuthSettingsPageView deploymentConfig={deploymentConfig} />
</>
)
}

export default UserAuthSettingsPage
81 changes: 81 additions & 0 deletions site/src/pages/DeploySettingsPage/UserAuthSettingsPage/UserAuthSettingsPageView.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
import { ComponentMeta, Story } from "@storybook/react"
import {
UserAuthSettingsPageView,
UserAuthSettingsPageViewProps,
} from "./UserAuthSettingsPageView"

export default {
title: "pages/UserAuthSettingsPageView",
component: UserAuthSettingsPageView,
argTypes: {
deploymentConfig: {
defaultValue: {
oidc: {
client_id: {
name: "OIDC Client ID",
usage: "Client ID to use for Login with OIDC.",
value: "1234",
},
allow_signups: {
name: "OIDC Allow Signups",
usage: "Whether new users can sign up with OIDC.",
value: true,
},
email_domain: {
name: "OIDC Email Domain",
usage:
"Email domains that clients logging in with OIDC must match.",
value: "@coder.com",
},
issuer_url: {
name: "OIDC Issuer URL",
usage: "Issuer URL to use for Login with OIDC.",
value: "https://coder.com",
},
scopes: {
name: "OIDC Scopes",
usage: "Scopes to grant when authenticating with OIDC.",
value: ["idk"],
},
},
oauth2: {
github: {
client_id: {
name: "OAuth2 GitHub Client ID",
usage: "Client ID for Login with GitHub.",
value: "1224",
},
allow_signups: {
name: "OAuth2 GitHub Allow Signups",
usage: "Whether new users can sign up with GitHub.",
value: true,
},
enterprise_base_url: {
name: "OAuth2 GitHub Enterprise Base URL",
usage:
"Base URL of a GitHub Enterprise deployment to use for Login with GitHub.",
value: "https://google.com",
},
allowed_orgs: {
name: "OAuth2 GitHub Allowed Orgs",
usage:
"Organizations the user must be a member of to Login with GitHub.",
value: true,
},
allowed_teams: {
name: "OAuth2 GitHub Allowed Teams",
usage:
"Teams inside organizations the user must be a member of to Login with GitHub. Structured as: <organization-name>/<team-slug>.",
value: true,
},
},
},
},
},
},
} as ComponentMeta<typeof UserAuthSettingsPageView>

const Template: Story<UserAuthSettingsPageViewProps> = (args) => (
<UserAuthSettingsPageView {...args} />
)
export const Page = Template.bind({})
78 changes: 78 additions & 0 deletions site/src/pages/DeploySettingsPage/UserAuthSettingsPage/UserAuthSettingsPageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
import { DeploymentConfig } from "api/typesGenerated"
import {
Badges,
DisabledBadge,
EnabledBadge,
} from "components/DeploySettingsLayout/Badges"
import { Header } from "components/DeploySettingsLayout/Header"
import OptionsTable from "components/DeploySettingsLayout/OptionsTable"
import { Stack } from "components/Stack/Stack"

export type UserAuthSettingsPageViewProps = {
deploymentConfig: Pick<DeploymentConfig, "oidc" | "oauth2">
}

export const UserAuthSettingsPageView = ({
deploymentConfig,
}: UserAuthSettingsPageViewProps): JSX.Element => (
<>
<Stack direction="column" spacing={6}>
<div>
<Header title="User Authentication" />

<Header
title="Login with OpenID Connect"
secondary
description="Set up authentication to login with OpenID Connect."
docsHref="https://coder.com/docs/coder-oss/latest/admin/auth#openid-connect-with-google"
/>

<Badges>
{deploymentConfig.oidc.client_id.value ? (
<EnabledBadge />
) : (
<DisabledBadge />
)}
</Badges>

<OptionsTable
options={{
client_id: deploymentConfig.oidc.client_id,
allow_signups: deploymentConfig.oidc.allow_signups,
email_domain: deploymentConfig.oidc.email_domain,
issuer_url: deploymentConfig.oidc.issuer_url,
scopes: deploymentConfig.oidc.scopes,
}}
/>
</div>

<div>
<Header
title="Login with GitHub"
secondary
description="Set up authentication to login with GitHub."
docsHref="https://coder.com/docs/coder-oss/latest/admin/auth#github"
/>

<Badges>
{deploymentConfig.oauth2.github.client_id.value ? (
<EnabledBadge />
) : (
<DisabledBadge />
)}
</Badges>

<OptionsTable
options={{
client_id: deploymentConfig.oauth2.github.client_id,
allow_signups: deploymentConfig.oauth2.github.allow_signups,
allowed_orgs: deploymentConfig.oauth2.github.allowed_orgs,
allowed_teams: deploymentConfig.oauth2.github.allowed_teams,
enterprise_base_url:
deploymentConfig.oauth2.github.enterprise_base_url,
}}
/>
</div>
</Stack>
</>
)