From 00cbb211b4ab44d14f95551e00b74a271afebd01 Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Wed, 2 Aug 2023 14:36:35 -0300
Subject: [PATCH] fix(site): show error when user exists (#8864)

---
 .../CreateUserForm/CreateUserForm.stories.tsx | 52 ++++++++++---------
 .../CreateUserForm/CreateUserForm.tsx         |  5 ++
 .../CreateUserPage/CreateUserPage.tsx         |  1 +
 3 files changed, 34 insertions(+), 24 deletions(-)

diff --git a/site/src/components/CreateUserForm/CreateUserForm.stories.tsx b/site/src/components/CreateUserForm/CreateUserForm.stories.tsx
index 323a839ec8..1984fa0b75 100644
--- a/site/src/components/CreateUserForm/CreateUserForm.stories.tsx
+++ b/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,
+  },
 }
diff --git a/site/src/components/CreateUserForm/CreateUserForm.tsx b/site/src/components/CreateUserForm/CreateUserForm.tsx
index 0d3c7fcec7..c2f03155e7 100644
--- a/site/src/components/CreateUserForm/CreateUserForm.tsx
+++ b/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
diff --git a/site/src/pages/UsersPage/CreateUserPage/CreateUserPage.tsx b/site/src/pages/UsersPage/CreateUserPage/CreateUserPage.tsx
index 1855b81cdc..f65f0c5c58 100644
--- a/site/src/pages/UsersPage/CreateUserPage/CreateUserPage.tsx
+++ b/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) =>