fix(site): show error when user exists (#8864)

site/src/components/CreateUserForm/CreateUserForm.stories.tsx

@@ -1,37 +1,41 @@
 import { action } from "@storybook/addon-actions"
-import { Story } from "@storybook/react"
-import { CreateUserForm, CreateUserFormProps } from "./CreateUserForm"
+import { StoryObj, Meta } from "@storybook/react"
+import { CreateUserForm } from "./CreateUserForm"
 import { mockApiError } from "testHelpers/entities"
 
-export default {
+const meta: Meta<typeof CreateUserForm> = {
   title: "components/CreateUserForm",
   component: CreateUserForm,
+  args: {
+    onCancel: action("cancel"),
+    onSubmit: action("submit"),
+    isLoading: false,
+  },
 }
 
-const Template: Story<CreateUserFormProps> = (args: CreateUserFormProps) => (
-  <CreateUserForm {...args} />
-)
+export default meta
+type Story = StoryObj<typeof CreateUserForm>
 
-export const Ready = Template.bind({})
-Ready.args = {
-  onCancel: action("cancel"),
-  onSubmit: action("submit"),
-  isLoading: false,
+export const Ready: Story = {}
+
+export const FormError: Story = {
+  args: {
+    error: mockApiError({
+      validations: [{ field: "username", detail: "Username taken" }],
+    }),
+  },
 }
 
-export const FormError = Template.bind({})
-FormError.args = {
-  onCancel: action("cancel"),
-  onSubmit: action("submit"),
-  isLoading: false,
-  error: mockApiError({
-    validations: [{ field: "username", detail: "Username taken" }],
-  }),
+export const GeneralError: Story = {
+  args: {
+    error: mockApiError({
+      message: "User already exists",
+    }),
+  },
 }
 
-export const Loading = Template.bind({})
-Loading.args = {
-  onCancel: action("cancel"),
-  onSubmit: action("submit"),
-  isLoading: true,
+export const Loading: Story = {
+  args: {
+    isLoading: true,
+  },
 }

site/src/components/CreateUserForm/CreateUserForm.tsx

@@ -11,6 +11,8 @@ import {
 import { FormFooter } from "../FormFooter/FormFooter"
 import { FullPageForm } from "../FullPageForm/FullPageForm"
 import { Stack } from "../Stack/Stack"
+import { ErrorAlert } from "components/Alert/ErrorAlert"
+import { hasApiFieldErrors, isApiError } from "api/errors"
 
 export const Language = {
   emailLabel: "Email",
@@ -62,6 +64,9 @@ export const CreateUserForm: FC<
 
   return (
     <FullPageForm title="Create user">
+      {isApiError(error) && !hasApiFieldErrors(error) && (
+        <ErrorAlert error={error} sx={{ mb: 4 }} />
+      )}
       <form onSubmit={form.handleSubmit} autoComplete="off">
         <Stack spacing={2.5}>
           <TextField

site/src/pages/UsersPage/CreateUserPage/CreateUserPage.tsx

@@ -30,6 +30,7 @@ export const CreateUserPage: FC = () => {
       <Helmet>
         <title>{pageTitle("Create User")}</title>
       </Helmet>
+
       <CreateUserForm
         error={error}
         onSubmit={(user: TypesGen.CreateUserRequest) =>