Apr 28, 2022 · Apr 22, 2022 · Apr 22, 2022 · Apr 22, 2022 · Apr 22, 2022 · Apr 25, 2022
diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx
 import { CreateWorkspacePage } from "./pages/TemplatesPages/OrganizationPage/TemplatePage/CreateWorkspacePage"
 import { TemplatePage } from "./pages/TemplatesPages/OrganizationPage/TemplatePage/TemplatePage"
 import { TemplatesPage } from "./pages/TemplatesPages/TemplatesPage"
 import { CreateUserPage } from "./pages/UsersPage/CreateUserPage/CreateUserPage"
 import { UsersPage } from "./pages/UsersPage/UsersPage"
 import { WorkspacePage } from "./pages/WorkspacesPage/WorkspacesPage"

        />
      </Route>

      <Route
        path="users"
        element={
          <AuthAndFrame>
            <UsersPage />
          </AuthAndFrame>
        }
      />
      <Route path="users">
        <Route
          index
          element={
            <AuthAndFrame>
              <UsersPage />
            </AuthAndFrame>
          }
        />
        <Route
          path="create"
          element={
            <RequireAuth>
              <CreateUserPage />
            </RequireAuth>
          }
        />
      </Route>
      <Route
        path="orgs"
        element={
diff --git a/site/src/api/errors.ts b/site/src/api/errors.ts
  detail: string
 }

 type FieldErrors = Record<FieldError["field"], FieldError["detail"]>
 exporttype FieldErrors = Record<FieldError["field"], FieldError["detail"]>

 export interface ApiErrorResponse {
  message: string
diff --git a/site/src/api/index.ts b/site/src/api/index.ts
  })
 }

 export const createUser = async (user: Types.CreateUserRequest): Promise<TypesGen.User> => {
  const response = await axios.post<TypesGen.User>("/api/v2/users", user)
  return response.data
 }

 export const getBuildInfo = async (): Promise<Types.BuildInfoResponse> => {
  const response = await axios.get("/api/v2/buildinfo")
  return response.data
diff --git a/site/src/api/types.ts b/site/src/api/types.ts
  session_token: string
 }

 export interface CreateUserRequest {
  username: string
  email: string
  password: string
  organization_id: string
 }

 export interface UserResponse {
  readonly id: string
  readonly username: string
  readonly email: string
  readonly created_at: string
  readonly status: "active" | "suspended"
  readonly organization_ids: string[]
 }

 /**
diff --git a/site/src/components/CreateUserForm/CreateUserForm.stories.tsx b/site/src/components/CreateUserForm/CreateUserForm.stories.tsx
 import { action } from "@storybook/addon-actions"
 import { Story } from "@storybook/react"
 import React from "react"
 import { CreateUserForm, CreateUserFormProps } from "./CreateUserForm"

 export default {
  title: "components/CreateUserForm",
  component: CreateUserForm,
 }

 const Template: Story<CreateUserFormProps> = (args: CreateUserFormProps) => <CreateUserForm {...args} />

 export const Ready = Template.bind({})
 Ready.args = {
  onCancel: action("cancel"),
  onSubmit: action("submit"),
  isLoading: false,
 }

 export const UnknownError = Template.bind({})
 UnknownError.args = {
  onCancel: action("cancel"),
  onSubmit: action("submit"),
  isLoading: false,
  error: "Something went wrong",
 }

 export const FormError = Template.bind({})
 FormError.args = {
  onCancel: action("cancel"),
  onSubmit: action("submit"),
  isLoading: false,
  formErrors: {
    username: "Username taken",
  },
 }

 export const Loading = Template.bind({})
 Loading.args = {
  onCancel: action("cancel"),
  onSubmit: action("submit"),
  isLoading: true,
 }
diff --git a/site/src/components/CreateUserForm/CreateUserForm.tsx b/site/src/components/CreateUserForm/CreateUserForm.tsx
 import FormHelperText from "@material-ui/core/FormHelperText"
 import TextField from "@material-ui/core/TextField"
 import { FormikContextType, FormikErrors, useFormik } from "formik"
 import React from "react"
 import * as Yup from "yup"
 import { CreateUserRequest } from "../../api/types"
 import { getFormHelpers, onChangeTrimmed } from "../../util/formUtils"
 import { FormFooter } from "../FormFooter/FormFooter"
 import { FullPageForm } from "../FullPageForm/FullPageForm"

 export const Language = {
  emailLabel: "Email",
  passwordLabel: "Password",
  usernameLabel: "Username",
  emailInvalid: "Please enter a valid email address.",
  emailRequired: "Please enter an email address.",
  passwordRequired: "Please enter a password.",
  usernameRequired: "Please enter a username.",
  createUser: "Create",
  cancel: "Cancel",
 }

 export interface CreateUserFormProps {
  onSubmit: (user: CreateUserRequest) => void
  onCancel: () => void
  formErrors?: FormikErrors<CreateUserRequest>
  isLoading: boolean
  error?: string
  myOrgId: string
 }

 const validationSchema = Yup.object({
  email: Yup.string().trim().email(Language.emailInvalid).required(Language.emailRequired),
  password: Yup.string().required(Language.passwordRequired),
  username: Yup.string().required(Language.usernameRequired),
 })

 export const CreateUserForm: React.FC<CreateUserFormProps> = ({
  onSubmit,
  onCancel,
  formErrors,
  isLoading,
  error,
  myOrgId,
 }) => {
  const form: FormikContextType<CreateUserRequest> = useFormik<CreateUserRequest>({
    initialValues: {
      email: "",
      password: "",
      username: "",
      organization_id: myOrgId,
    },
    validationSchema,
    onSubmit,
  })
  const getFieldHelpers = getFormHelpers<CreateUserRequest>(form, formErrors)

  return (
    <FullPageForm title="Create user" onCancel={onCancel}>
      <form onSubmit={form.handleSubmit}>
        <TextField
          {...getFieldHelpers("username")}
          onChange={onChangeTrimmed(form)}
          autoComplete="username"
          autoFocus
          fullWidth
          label={Language.usernameLabel}
          variant="outlined"
        />
        <TextField
          {...getFieldHelpers("email")}
          onChange={onChangeTrimmed(form)}
          autoComplete="email"
          fullWidth
          label={Language.emailLabel}
          variant="outlined"
        />
        <TextField
          {...getFieldHelpers("password")}
          autoComplete="current-password"
          fullWidth
          id="password"
          label={Language.passwordLabel}
          type="password"
          variant="outlined"
        />
        {error && <FormHelperText error>{error}</FormHelperText>}
        <FormFooter onCancel={onCancel} isLoading={isLoading} />
      </form>
    </FullPageForm>
  )
 }
diff --git a/site/src/components/FormFooter/FormFooter.tsx b/site/src/components/FormFooter/FormFooter.tsx
 import React from "react"
 import { LoadingButton } from "../LoadingButton/LoadingButton"

 const Language = {
 exportconst Language = {
  cancelLabel: "Cancel",
  defaultSubmitLabel: "Submit",
 }
diff --git a/site/src/pages/PreferencesPages/AccountPage/AccountPage.test.tsx b/site/src/pages/PreferencesPages/AccountPage/AccountPage.test.tsx
      jest.spyOn(API, "updateProfile").mockImplementationOnce((userId, data) =>
        Promise.resolve({
          id: userId,
          ...data,
          created_at: new Date().toString(),
          status: "active",
          organization_ids: ["123"],
          ...data,
        }),
      )
      const { user } = renderPage()
diff --git a/site/src/pages/UsersPage/CreateUserPage/CreateUserPage.test.tsx b/site/src/pages/UsersPage/CreateUserPage/CreateUserPage.test.tsx
 import { screen } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
 import { rest } from "msw"
 import React from "react"
 import * as API from "../../../api"
 import { Language as FormLanguage } from "../../../components/CreateUserForm/CreateUserForm"
 import { Language as FooterLanguage } from "../../../components/FormFooter/FormFooter"
 import { history, render } from "../../../testHelpers"
 import { server } from "../../../testHelpers/server"
 import { Language as UserLanguage } from "../../../xServices/users/usersXService"
 import { CreateUserPage, Language } from "./CreateUserPage"

 const fillForm = async ({
  username = "someuser",
  email = "someone@coder.com",
  password = "password",
 }: {
  username?: string
  email?: string
  password?: string
 }) => {
  const usernameField = screen.getByLabelText(FormLanguage.usernameLabel)
  const emailField = screen.getByLabelText(FormLanguage.emailLabel)
  const passwordField = screen.getByLabelText(FormLanguage.passwordLabel)
  await userEvent.type(usernameField, username)
  await userEvent.type(emailField, email)
  await userEvent.type(passwordField, password)
  const submitButton = await screen.findByText(FooterLanguage.defaultSubmitLabel)
  submitButton.click()
 }

 describe("Create User Page", () => {
  beforeEach(() => {
    history.replace("/users/create")
  })

  it("shows validation error message", async () => {
    render(<CreateUserPage />)
    await fillForm({ email: "test" })
    const errorMessage = await screen.findByText(FormLanguage.emailInvalid)
    expect(errorMessage).toBeDefined()
  })

  it("shows generic error message", async () => {
    jest.spyOn(API, "createUser").mockRejectedValueOnce({
      data: "unknown error",
    })
    render(<CreateUserPage />)
    await fillForm({})
    const errorMessage = await screen.findByText(Language.unknownError)
    expect(errorMessage).toBeDefined()
  })

  it("shows API error message", async () => {
    const fieldErrorMessage = "username already in use"
    server.use(
      rest.post("/api/v2/users", async (req, res, ctx) => {
        return res(
          ctx.status(400),
          ctx.json({
            message: "invalid field",
            errors: [
              {
                detail: fieldErrorMessage,
                field: "username",
              },
            ],
          }),
        )
      }),
    )
    render(<CreateUserPage />)
    await fillForm({})
    const errorMessage = await screen.findByText(fieldErrorMessage)
    expect(errorMessage).toBeDefined()
  })

  it("shows success notification and redirects to users page", async () => {
    render(<CreateUserPage />)
    await fillForm({})
    const successMessage = screen.findByText(UserLanguage.createUserSuccess)
    expect(successMessage).toBeDefined()
  })

  it("redirects to users page on cancel", async () => {
    render(<CreateUserPage />)
    const cancelButton = await screen.findByText(FooterLanguage.cancelLabel)
    cancelButton.click()
    expect(history.location.pathname).toEqual("/users")
  })

  it("redirects to users page on close", async () => {
    render(<CreateUserPage />)
    const closeButton = await screen.findByText("ESC")
    closeButton.click()
    expect(history.location.pathname).toEqual("/users")
  })
 })
diff --git a/site/src/pages/UsersPage/CreateUserPage/CreateUserPage.tsx b/site/src/pages/UsersPage/CreateUserPage/CreateUserPage.tsx
 import { useActor, useSelector } from "@xstate/react"
 import React, { useContext } from "react"
 import { useNavigate } from "react-router"
 import { CreateUserRequest } from "../../../api/types"
 import { CreateUserForm } from "../../../components/CreateUserForm/CreateUserForm"
 import { selectOrgId } from "../../../xServices/auth/authSelectors"
 import { XServiceContext } from "../../../xServices/StateContext"

 export const Language = {
  unknownError: "Oops, an unknown error occurred.",
 }

 export const CreateUserPage: React.FC = () => {
  const xServices = useContext(XServiceContext)
  const myOrgId = useSelector(xServices.authXService, selectOrgId)
  const [usersState, usersSend] = useActor(xServices.usersXService)
  const { createUserError, createUserFormErrors } = usersState.context
  const navigate = useNavigate()
  // There is no field for organization id in Community Edition, so handle its field error like a generic error
  const genericError =
    createUserError || createUserFormErrors?.organization_id || !myOrgId ? Language.unknownError : undefined

  return (
    <CreateUserForm
      formErrors={createUserFormErrors}
      onSubmit={(user: CreateUserRequest) => usersSend({ type: "CREATE", user })}
      onCancel={() => navigate("/users")}
      isLoading={usersState.hasTag("loading")}
      error={genericError}
      myOrgId={myOrgId ?? ""}
    />
  )
 }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -17,6 +17,7 @@ import { SettingsPage } from "./pages/SettingsPage/SettingsPage"
		import { CreateWorkspacePage } from "./pages/TemplatesPages/OrganizationPage/TemplatePage/CreateWorkspacePage"
		import { TemplatePage } from "./pages/TemplatesPages/OrganizationPage/TemplatePage/TemplatePage"
		import { TemplatesPage } from "./pages/TemplatesPages/TemplatesPage"
		import { CreateUserPage } from "./pages/UsersPage/CreateUserPage/CreateUserPage"
		import { UsersPage } from "./pages/UsersPage/UsersPage"
		import { WorkspacePage } from "./pages/WorkspacesPage/WorkspacesPage"

Expand DownExpand Up		@@ -83,14 +84,24 @@ export const AppRouter: React.FC = () => (
		/>
		</Route>

		<Route
		path="users"
		element={
		<AuthAndFrame>
		<UsersPage />
		</AuthAndFrame>
		}
		/>
		<Route path="users">
		<Route
		index
		element={
		<AuthAndFrame>
		<UsersPage />
		</AuthAndFrame>
		}
		/>
		<Route
		path="create"
		element={
		<RequireAuth>
		<CreateUserPage />
		</RequireAuth>
		}
		/>
		</Route>
		<Route
		path="orgs"
		element={
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -11,7 +11,7 @@ interface FieldError {
		detail: string
		}

		type FieldErrors = Record<FieldError["field"], FieldError["detail"]>
		exporttype FieldErrors = Record<FieldError["field"], FieldError["detail"]>

		export interface ApiErrorResponse {
		message: string
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -85,6 +85,11 @@ export const getUsers = async (): Promise<Types.PagedUsers> => {
		})
		}

		export const createUser = async (user: Types.CreateUserRequest): Promise<TypesGen.User> => {
		const response = await axios.post<TypesGen.User>("/api/v2/users", user)
		return response.data
		}

		export const getBuildInfo = async (): Promise<Types.BuildInfoResponse> => {
		const response = await axios.get("/api/v2/buildinfo")
		return response.data
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -10,11 +10,20 @@ export interface LoginResponse {
		session_token: string
		}

		export interface CreateUserRequest {
		username: string
		email: string
		password: string
		organization_id: string
		}
presleyp marked this conversation as resolved. Show resolvedHide resolved

		export interface UserResponse {
		readonly id: string
		readonly username: string
		readonly email: string
		readonly created_at: string
		readonly status: "active" \| "suspended"
		readonly organization_ids: string[]
		}

		/**
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,43 @@
		import { action } from "@storybook/addon-actions"
		import { Story } from "@storybook/react"
		import React from "react"
		import { CreateUserForm, CreateUserFormProps } from "./CreateUserForm"

		export default {
		title: "components/CreateUserForm",
		component: CreateUserForm,
		}

		const Template: Story<CreateUserFormProps> = (args: CreateUserFormProps) => <CreateUserForm {...args} />

		export const Ready = Template.bind({})
		Ready.args = {
		onCancel: action("cancel"),
		onSubmit: action("submit"),
		isLoading: false,
		}

		export const UnknownError = Template.bind({})
		UnknownError.args = {
		onCancel: action("cancel"),
		onSubmit: action("submit"),
		isLoading: false,
		error: "Something went wrong",
		}

		export const FormError = Template.bind({})
		FormError.args = {
		onCancel: action("cancel"),
		onSubmit: action("submit"),
		isLoading: false,
		formErrors: {
		username: "Username taken",
		},
		}

		export const Loading = Template.bind({})
		Loading.args = {
		onCancel: action("cancel"),
		onSubmit: action("submit"),
		isLoading: true,
		}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,92 @@
		import FormHelperText from "@material-ui/core/FormHelperText"
		import TextField from "@material-ui/core/TextField"
		import { FormikContextType, FormikErrors, useFormik } from "formik"
		import React from "react"
		import * as Yup from "yup"
		import { CreateUserRequest } from "../../api/types"
		import { getFormHelpers, onChangeTrimmed } from "../../util/formUtils"
		import { FormFooter } from "../FormFooter/FormFooter"
		import { FullPageForm } from "../FullPageForm/FullPageForm"

		export const Language = {
		emailLabel: "Email",
		passwordLabel: "Password",
		usernameLabel: "Username",
		emailInvalid: "Please enter a valid email address.",
		emailRequired: "Please enter an email address.",
		passwordRequired: "Please enter a password.",
		usernameRequired: "Please enter a username.",
		createUser: "Create",
		cancel: "Cancel",
		}

		export interface CreateUserFormProps {
		onSubmit: (user: CreateUserRequest) => void
		onCancel: () => void
		formErrors?: FormikErrors<CreateUserRequest>
		isLoading: boolean
		error?: string
		myOrgId: string
		}

		const validationSchema = Yup.object({
		email: Yup.string().trim().email(Language.emailInvalid).required(Language.emailRequired),
		password: Yup.string().required(Language.passwordRequired),
		username: Yup.string().required(Language.usernameRequired),
		})

		export const CreateUserForm: React.FC<CreateUserFormProps> = ({
		onSubmit,
		onCancel,
		formErrors,
		isLoading,
		error,
		myOrgId,
		}) => {
		const form: FormikContextType<CreateUserRequest> = useFormik<CreateUserRequest>({
		initialValues: {
		email: "",
		password: "",
		username: "",
		organization_id: myOrgId,
Copy link ContributorAuthor presleypApr 28, 2022 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. I just hard-coded the org id in here; in EE we'll need a drop-down field for it. greyscaled reacted with thumbs up emoji
		},
		validationSchema,
		onSubmit,
		})
		const getFieldHelpers = getFormHelpers<CreateUserRequest>(form, formErrors)

		return (
		<FullPageForm title="Create user" onCancel={onCancel}>
		<form onSubmit={form.handleSubmit}>
		<TextField
		{...getFieldHelpers("username")}
		onChange={onChangeTrimmed(form)}
		autoComplete="username"
		autoFocus
		fullWidth
		label={Language.usernameLabel}
		variant="outlined"
		/>
		<TextField
		{...getFieldHelpers("email")}
		onChange={onChangeTrimmed(form)}
		autoComplete="email"
		fullWidth
		label={Language.emailLabel}
		variant="outlined"
		/>
		<TextField
		{...getFieldHelpers("password")}
		autoComplete="current-password"
		fullWidth
		id="password"
		label={Language.passwordLabel}
		type="password"
		variant="outlined"
		/>
		{error && <FormHelperText error>{error}</FormHelperText>}
		<FormFooter onCancel={onCancel} isLoading={isLoading} />
		</form>
		</FullPageForm>
		)
		}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -3,7 +3,7 @@ import { makeStyles } from "@material-ui/core/styles"
		import React from "react"
		import { LoadingButton } from "../LoadingButton/LoadingButton"

		const Language = {
		exportconst Language = {
		cancelLabel: "Cancel",
		defaultSubmitLabel: "Submit",
		}
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -34,8 +34,10 @@ describe("AccountPage", () => {
		jest.spyOn(API, "updateProfile").mockImplementationOnce((userId, data) =>
		Promise.resolve({
		id: userId,
		...data,
		created_at: new Date().toString(),
		status: "active",
		organization_ids: ["123"],
		...data,
		}),
		)
		const { user } = renderPage()
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,98 @@
		import { screen } from "@testing-library/react"
		import userEvent from "@testing-library/user-event"
		import { rest } from "msw"
		import React from "react"
		import * as API from "../../../api"
		import { Language as FormLanguage } from "../../../components/CreateUserForm/CreateUserForm"
		import { Language as FooterLanguage } from "../../../components/FormFooter/FormFooter"
		import { history, render } from "../../../testHelpers"
		import { server } from "../../../testHelpers/server"
		import { Language as UserLanguage } from "../../../xServices/users/usersXService"
		import { CreateUserPage, Language } from "./CreateUserPage"

		const fillForm = async ({
		username = "someuser",
		email = "someone@coder.com",
		password = "password",
		}: {
		username?: string
		email?: string
		password?: string
		}) => {
		const usernameField = screen.getByLabelText(FormLanguage.usernameLabel)
		const emailField = screen.getByLabelText(FormLanguage.emailLabel)
		const passwordField = screen.getByLabelText(FormLanguage.passwordLabel)
		await userEvent.type(usernameField, username)
		await userEvent.type(emailField, email)
		await userEvent.type(passwordField, password)
		const submitButton = await screen.findByText(FooterLanguage.defaultSubmitLabel)
		submitButton.click()
		}

		describe("Create User Page", () => {
		beforeEach(() => {
		history.replace("/users/create")
		})

		it("shows validation error message", async () => {
		render(<CreateUserPage />)
		await fillForm({ email: "test" })
		const errorMessage = await screen.findByText(FormLanguage.emailInvalid)
		expect(errorMessage).toBeDefined()
		})

		it("shows generic error message", async () => {
presleyp marked this conversation as resolved. Show resolvedHide resolved
		jest.spyOn(API, "createUser").mockRejectedValueOnce({
		data: "unknown error",
		})
		render(<CreateUserPage />)
		await fillForm({})
		const errorMessage = await screen.findByText(Language.unknownError)
		expect(errorMessage).toBeDefined()
		})

		it("shows API error message", async () => {
presleyp marked this conversation as resolved. Show resolvedHide resolved
		const fieldErrorMessage = "username already in use"
		server.use(
		rest.post("/api/v2/users", async (req, res, ctx) => {
		return res(
		ctx.status(400),
		ctx.json({
		message: "invalid field",
		errors: [
		{
		detail: fieldErrorMessage,
		field: "username",
		},
		],
		}),
		)
		}),
		)
		render(<CreateUserPage />)
		await fillForm({})
		const errorMessage = await screen.findByText(fieldErrorMessage)
		expect(errorMessage).toBeDefined()
		})

		it("shows success notification and redirects to users page", async () => {
presleyp marked this conversation as resolved. Show resolvedHide resolved
		render(<CreateUserPage />)
		await fillForm({})
		const successMessage = screen.findByText(UserLanguage.createUserSuccess)
		expect(successMessage).toBeDefined()
		})

		it("redirects to users page on cancel", async () => {
presleyp marked this conversation as resolved. Show resolvedHide resolved
		render(<CreateUserPage />)
		const cancelButton = await screen.findByText(FooterLanguage.cancelLabel)
		cancelButton.click()
		expect(history.location.pathname).toEqual("/users")
		})

		it("redirects to users page on close", async () => {
presleyp marked this conversation as resolved. Show resolvedHide resolved
		render(<CreateUserPage />)
		const closeButton = await screen.findByText("ESC")
		closeButton.click()
		expect(history.location.pathname).toEqual("/users")
		})
		})
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,33 @@
		import { useActor, useSelector } from "@xstate/react"
		import React, { useContext } from "react"
		import { useNavigate } from "react-router"
		import { CreateUserRequest } from "../../../api/types"
		import { CreateUserForm } from "../../../components/CreateUserForm/CreateUserForm"
		import { selectOrgId } from "../../../xServices/auth/authSelectors"
		import { XServiceContext } from "../../../xServices/StateContext"

		export const Language = {
		unknownError: "Oops, an unknown error occurred.",
		}

		export const CreateUserPage: React.FC = () => {
		const xServices = useContext(XServiceContext)
		const myOrgId = useSelector(xServices.authXService, selectOrgId)
Copy link ContributorAuthor presleypApr 28, 2022 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. Doing this instead of getting`authState` using`useActor` means that this component will only re-render in response to changes in the org id, not all`authXService` changes. I haven't bothered with this approach in other places yet because so far it's been components that have a lot to do with the XService they're accessing and there probably won't be many irrelevant updates, but we should do this for cases where we only care about a little piece of some global state. greyscaled reacted with heart emoji
		const [usersState, usersSend] = useActor(xServices.usersXService)
		const { createUserError, createUserFormErrors } = usersState.context
		const navigate = useNavigate()
		// There is no field for organization id in Community Edition, so handle its field error like a generic error
		const genericError =
		createUserError \|\| createUserFormErrors?.organization_id \|\| !myOrgId ? Language.unknownError : undefined

		return (
		<CreateUserForm
		formErrors={createUserFormErrors}
		onSubmit={(user: CreateUserRequest) => usersSend({ type: "CREATE", user })}
		onCancel={() => navigate("/users")}
		isLoading={usersState.hasTag("loading")}
		error={genericError}
		myOrgId={myOrgId ?? ""}
		/>
		)
		}