chore(site): replace create user machine by react-query (#9810)

site/src/api/queries/users.ts

@@ -11,6 +11,12 @@ export const updatePassword = () => {
   };
 };
 
+export const createUser = () => {
+  return {
+    mutationFn: API.createUser,
+  };
+};
+
 export const createFirstUser = () => {
   return {
     mutationFn: API.createFirstUser,

site/src/pages/CreateUserPage/CreateUserPage.test.tsx

@@ -6,7 +6,6 @@ import {
   renderWithAuth,
   waitForLoaderToBeRemoved,
 } from "testHelpers/renderHelpers";
-import { Language as CreateUserLanguage } from "xServices/users/createUserXService";
 import { CreateUserPage } from "./CreateUserPage";
 
 const renderCreateUserPage = async () => {
@@ -47,7 +46,7 @@ describe("Create User Page", () => {
     await renderCreateUserPage();
     await fillForm({});
     const successMessage = await screen.findByText(
-      CreateUserLanguage.createUserSuccess,
+      "Successfully created user.",
     );
     expect(successMessage).toBeDefined();
   });

site/src/pages/CreateUserPage/CreateUserPage.tsx

@@ -1,15 +1,14 @@
-import { useMachine } from "@xstate/react";
 import { useOrganizationId } from "hooks/useOrganizationId";
 import { FC } from "react";
 import { Helmet } from "react-helmet-async";
 import { useNavigate } from "react-router-dom";
-import { createUserMachine } from "xServices/users/createUserXService";
-import * as TypesGen from "api/typesGenerated";
 import { CreateUserForm } from "./CreateUserForm";
 import { Margins } from "components/Margins/Margins";
 import { pageTitle } from "utils/page";
 import { getAuthMethods } from "api/api";
-import { useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { createUser } from "api/queries/users";
+import { displaySuccess } from "components/GlobalSnackbar/utils";
 
 export const Language = {
   unknownError: "Oops, an unknown error occurred.",
@@ -18,15 +17,7 @@ export const Language = {
 export const CreateUserPage: FC = () => {
   const myOrgId = useOrganizationId();
   const navigate = useNavigate();
-  const [createUserState, createUserSend] = useMachine(createUserMachine, {
-    actions: {
-      redirectToUsersPage: () => {
-        navigate("/users");
-      },
-    },
-  });
-  const { error } = createUserState.context;
-
+  const createUserMutation = useMutation(createUser());
   // TODO: We should probably place this somewhere else to reduce the number of calls.
   // This would be called each time this page is loaded.
   const { data: authMethods } = useQuery({
@@ -41,16 +32,17 @@ export const CreateUserPage: FC = () => {
       </Helmet>
 
       <CreateUserForm
-        error={error}
+        error={createUserMutation.error}
         authMethods={authMethods}
-        onSubmit={(user: TypesGen.CreateUserRequest) =>
-          createUserSend({ type: "CREATE", user })
-        }
-        onCancel={() => {
-          createUserSend("CANCEL_CREATE_USER");
+        onSubmit={async (user) => {
+          await createUserMutation.mutateAsync(user);
+          displaySuccess("Successfully created user.");
           navigate("/users");
         }}
-        isLoading={createUserState.hasTag("loading")}
+        onCancel={() => {
+          navigate("/users");
+        }}
+        isLoading={createUserMutation.isLoading}
         myOrgId={myOrgId}
       />
     </Margins>

site/src/xServices/users/createUserXService.ts

@@ -1,72 +0,0 @@
-import { assign, createMachine } from "xstate";
-import * as API from "../../api/api";
-import * as TypesGen from "../../api/typesGenerated";
-import { displaySuccess } from "../../components/GlobalSnackbar/utils";
-
-export const Language = {
-  createUserSuccess: "Successfully created user.",
-};
-
-export interface CreateUserContext {
-  error?: unknown;
-}
-
-export type CreateUserEvent =
-  | { type: "CREATE"; user: TypesGen.CreateUserRequest }
-  | { type: "CANCEL_CREATE_USER" };
-
-export const createUserMachine = createMachine(
-  {
-    id: "usersState",
-    predictableActionArguments: true,
-    tsTypes: {} as import("./createUserXService.typegen").Typegen0,
-    schema: {
-      context: {} as CreateUserContext,
-      events: {} as CreateUserEvent,
-      services: {} as {
-        createUser: {
-          data: TypesGen.User;
-        };
-      },
-    },
-    initial: "idle",
-    states: {
-      idle: {
-        on: {
-          CREATE: "creatingUser",
-          CANCEL_CREATE_USER: { actions: ["clearError"] },
-        },
-      },
-      creatingUser: {
-        entry: "clearError",
-        invoke: {
-          src: "createUser",
-          id: "createUser",
-          onDone: {
-            target: "idle",
-            actions: ["displayCreateUserSuccess", "redirectToUsersPage"],
-          },
-          onError: {
-            target: "idle",
-            actions: ["assignError"],
-          },
-        },
-        tags: "loading",
-      },
-    },
-  },
-  {
-    services: {
-      createUser: (_, event) => API.createUser(event.user),
-    },
-    actions: {
-      assignError: assign({
-        error: (_, event) => event.data,
-      }),
-      clearError: assign({ error: (_) => undefined }),
-      displayCreateUserSuccess: () => {
-        displaySuccess(Language.createUserSuccess);
-      },
-    },
-  },
-);