From 616d8abe2a43ee0f936289851488a09bc71b8213 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Tue, 22 Aug 2023 17:54:00 +0000 Subject: [PATCH 1/7] feat(site): add descriptions for each auth method to the selection menu --- .../CreateUserForm/CreateUserForm.tsx | 146 +++++++++++------- 1 file changed, 88 insertions(+), 58 deletions(-) diff --git a/site/src/components/CreateUserForm/CreateUserForm.tsx b/site/src/components/CreateUserForm/CreateUserForm.tsx index 6270f0ca88799..57aa1862cbd71 100644 --- a/site/src/components/CreateUserForm/CreateUserForm.tsx +++ b/site/src/components/CreateUserForm/CreateUserForm.tsx @@ -14,6 +14,10 @@ import { Stack } from "../Stack/Stack" import { ErrorAlert } from "components/Alert/ErrorAlert" import { hasApiFieldErrors, isApiError } from "api/errors" import MenuItem from "@mui/material/MenuItem" +import { makeStyles } from "@mui/styles" +import { Theme } from "@mui/material/styles" +import { Link } from "@mui/material" +import { Link as RouterLink } from "react-router-dom" export const Language = { emailLabel: "Email", @@ -26,6 +30,38 @@ export const Language = { cancel: "Cancel", } +export const authMethodLanguage = { + password: { + displayName: "Password", + description: "Use an email address and password to login", + }, + oidc: { + displayName: "OpenID Connect", + description: "Use an OpenID Connect provider for authentication", + }, + github: { + displayName: "Github", + description: "Use Github OAuth for authentication", + }, + none: { + displayName: "None", + description: ( + <> + Disable authentication for this user (See the{" "} + + documentation + {" "} + for more details) + + ), + }, +} + export interface CreateUserFormProps { onSubmit: (user: TypesGen.CreateUserRequest) => void onCancel: () => void @@ -46,22 +82,9 @@ const validationSchema = Yup.object({ otherwise: (schema) => schema, }), username: nameValidator(Language.usernameLabel), + login_type: Yup.string().oneOf(Object.keys(authMethodLanguage)), }) -const authMethodSelect = ( - title: string, - value: string, - // eslint-disable-next-line @typescript-eslint/no-unused-vars -- future will use this - description: string, -) => { - return ( - - {title} - {/* TODO: Add description */} - - ) -} - export const CreateUserForm: FC< React.PropsWithChildren > = ({ onSubmit, onCancel, error, isLoading, myOrgId, authMethods }) => { @@ -73,7 +96,7 @@ export const CreateUserForm: FC< username: "", organization_id: myOrgId, disable_login: false, - login_type: "password", + login_type: "", }, validationSchema, onSubmit, @@ -83,41 +106,34 @@ export const CreateUserForm: FC< error, ) + const styles = useStyles() + // This, unfortunately, cannot be an actual component because mui requires + // that all `MenuItem`s but be direct children of the `Select` the belong to + const authMethodSelect = (value: keyof typeof authMethodLanguage) => { + const language = authMethodLanguage[value] + return ( + + + {language.displayName} + + {language.description} + + + + ) + } + const methods = [] if (authMethods?.password.enabled) { - methods.push( - authMethodSelect( - "Password", - "password", - "User can provide their email and password to login.", - ), - ) + methods.push(authMethodSelect("password")) } if (authMethods?.oidc.enabled) { - methods.push( - authMethodSelect( - "OpenID Connect", - "oidc", - "Uses an OpenID connect provider to authenticate the user.", - ), - ) + methods.push(authMethodSelect("oidc")) } if (authMethods?.github.enabled) { - methods.push( - authMethodSelect( - "Github", - "github", - "Uses github oauth to authenticate the user.", - ), - ) + methods.push(authMethodSelect("github")) } - methods.push( - authMethodSelect( - "None", - "none", - "User authentication is disabled. This user an only be used if an api token is created for them.", - ), - ) + methods.push(authMethodSelect("none")) return ( @@ -141,21 +157,6 @@ export const CreateUserForm: FC< fullWidth label={Language.emailLabel} /> - + authMethodLanguage[selected as keyof typeof authMethodLanguage] + ?.displayName ?? "", + }} > {methods} + ) } + +const useStyles = makeStyles((theme) => ({ + labelDescription: { + fontSize: 14, + color: theme.palette.text.secondary, + wordWrap: "normal", + whiteSpace: "break-spaces", + }, +})) From 899e6aac0e14ef040ded6c74ef5e42db474bee49 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Tue, 22 Aug 2023 18:04:25 +0000 Subject: [PATCH 2/7] tweak link stuff --- site/src/components/CreateUserForm/CreateUserForm.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/site/src/components/CreateUserForm/CreateUserForm.tsx b/site/src/components/CreateUserForm/CreateUserForm.tsx index 57aa1862cbd71..6f1200b145c3e 100644 --- a/site/src/components/CreateUserForm/CreateUserForm.tsx +++ b/site/src/components/CreateUserForm/CreateUserForm.tsx @@ -16,8 +16,7 @@ import { hasApiFieldErrors, isApiError } from "api/errors" import MenuItem from "@mui/material/MenuItem" import { makeStyles } from "@mui/styles" import { Theme } from "@mui/material/styles" -import { Link } from "@mui/material" -import { Link as RouterLink } from "react-router-dom" +import { Link } from "@mui/material/Link" export const Language = { emailLabel: "Email", @@ -49,7 +48,6 @@ export const authMethodLanguage = { <> Disable authentication for this user (See the{" "} Date: Tue, 22 Aug 2023 18:08:39 +0000 Subject: [PATCH 3/7] ...again --- site/src/components/CreateUserForm/CreateUserForm.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/components/CreateUserForm/CreateUserForm.tsx b/site/src/components/CreateUserForm/CreateUserForm.tsx index 6f1200b145c3e..f821dcfc309a3 100644 --- a/site/src/components/CreateUserForm/CreateUserForm.tsx +++ b/site/src/components/CreateUserForm/CreateUserForm.tsx @@ -16,7 +16,7 @@ import { hasApiFieldErrors, isApiError } from "api/errors" import MenuItem from "@mui/material/MenuItem" import { makeStyles } from "@mui/styles" import { Theme } from "@mui/material/styles" -import { Link } from "@mui/material/Link" +import Link from "@mui/material/Link" export const Language = { emailLabel: "Email", From a1e1bba516aa8771464ce7ed643ff2dfaaf0596f Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Tue, 22 Aug 2023 18:09:45 +0000 Subject: [PATCH 4/7] cries --- site/src/components/CreateUserForm/CreateUserForm.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/components/CreateUserForm/CreateUserForm.tsx b/site/src/components/CreateUserForm/CreateUserForm.tsx index f821dcfc309a3..bbbdd9208fc89 100644 --- a/site/src/components/CreateUserForm/CreateUserForm.tsx +++ b/site/src/components/CreateUserForm/CreateUserForm.tsx @@ -50,7 +50,7 @@ export const authMethodLanguage = { documentation {" "} From e9443518639eb798f069310eec81bc31603be094 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Tue, 22 Aug 2023 18:11:21 +0000 Subject: [PATCH 5/7] typo --- site/src/components/CreateUserForm/CreateUserForm.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/components/CreateUserForm/CreateUserForm.tsx b/site/src/components/CreateUserForm/CreateUserForm.tsx index bbbdd9208fc89..798c81ae847ac 100644 --- a/site/src/components/CreateUserForm/CreateUserForm.tsx +++ b/site/src/components/CreateUserForm/CreateUserForm.tsx @@ -106,7 +106,7 @@ export const CreateUserForm: FC< const styles = useStyles() // This, unfortunately, cannot be an actual component because mui requires - // that all `MenuItem`s but be direct children of the `Select` the belong to + // that all `MenuItem`s but be direct children of the `Select` they belong to const authMethodSelect = (value: keyof typeof authMethodLanguage) => { const language = authMethodLanguage[value] return ( From 618a3a77042ca38c1fe7f120d6f0abf8845313b6 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Tue, 22 Aug 2023 18:11:51 +0000 Subject: [PATCH 6/7] typo --- site/src/components/CreateUserForm/CreateUserForm.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/components/CreateUserForm/CreateUserForm.tsx b/site/src/components/CreateUserForm/CreateUserForm.tsx index 798c81ae847ac..ffde5025b37da 100644 --- a/site/src/components/CreateUserForm/CreateUserForm.tsx +++ b/site/src/components/CreateUserForm/CreateUserForm.tsx @@ -106,7 +106,7 @@ export const CreateUserForm: FC< const styles = useStyles() // This, unfortunately, cannot be an actual component because mui requires - // that all `MenuItem`s but be direct children of the `Select` they belong to + // that all `MenuItem`s must be direct children of the `Select` they belong to const authMethodSelect = (value: keyof typeof authMethodLanguage) => { const language = authMethodLanguage[value] return ( From 0a5c7d39355669f08eabca35a74fc7c93e99f215 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Wed, 23 Aug 2023 14:39:42 +0000 Subject: [PATCH 7/7] refactor to a map --- .../CreateUserForm/CreateUserForm.tsx | 46 ++++++++----------- 1 file changed, 19 insertions(+), 27 deletions(-) diff --git a/site/src/components/CreateUserForm/CreateUserForm.tsx b/site/src/components/CreateUserForm/CreateUserForm.tsx index ffde5025b37da..c0423bfc5101f 100644 --- a/site/src/components/CreateUserForm/CreateUserForm.tsx +++ b/site/src/components/CreateUserForm/CreateUserForm.tsx @@ -105,33 +105,13 @@ export const CreateUserForm: FC< ) const styles = useStyles() - // This, unfortunately, cannot be an actual component because mui requires - // that all `MenuItem`s must be direct children of the `Select` they belong to - const authMethodSelect = (value: keyof typeof authMethodLanguage) => { - const language = authMethodLanguage[value] - return ( - - - {language.displayName} - - {language.description} - - - - ) - } - const methods = [] - if (authMethods?.password.enabled) { - methods.push(authMethodSelect("password")) - } - if (authMethods?.oidc.enabled) { - methods.push(authMethodSelect("oidc")) - } - if (authMethods?.github.enabled) { - methods.push(authMethodSelect("github")) - } - methods.push(authMethodSelect("none")) + const methods = [ + authMethods?.password.enabled && "password", + authMethods?.oidc.enabled && "oidc", + authMethods?.github.enabled && "github", + "none", + ].filter(Boolean) as Array return ( @@ -177,7 +157,19 @@ export const CreateUserForm: FC< ?.displayName ?? "", }} > - {methods} + {methods.map((value) => { + const language = authMethodLanguage[value] + return ( + + + {language.displayName} + + {language.description} + + + + ) + })}