chore(site): replace xstate by react-query on update password (#9696)

site/src/api/queries/users.ts

@@ -0,0 +1,12 @@
+import * as API from "api/api";
+import { UpdateUserPasswordRequest } from "api/typesGenerated";
+
+export const updatePassword = () => {
+  return {
+    mutationFn: ({
+      userId,
+      ...request
+    }: UpdateUserPasswordRequest & { userId: string }) =>
+      API.updateUserPassword(userId, request),
+  };
+};

site/src/pages/UserSettingsPage/SecurityPage/SecurityPage.tsx

@@ -1,10 +1,8 @@
-import { useMachine } from "@xstate/react";
 import { useMe } from "hooks/useMe";
 import { ComponentProps, FC } from "react";
-import { userSecuritySettingsMachine } from "xServices/userSecuritySettings/userSecuritySettingsXService";
-import { Section } from "../../../components/SettingsLayout/Section";
+import { Section } from "components/SettingsLayout/Section";
 import { SecurityForm } from "./SettingsSecurityForm";
-import { useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery } from "@tanstack/react-query";
 import { getAuthMethods, getUserLoginType } from "api/api";
 import {
   SingleSignOnSection,
@@ -12,18 +10,12 @@ import {
 } from "./SingleSignOnSection";
 import { Loader } from "components/Loader/Loader";
 import { Stack } from "components/Stack/Stack";
+import { updatePassword } from "api/queries/users";
+import { displaySuccess } from "components/GlobalSnackbar/utils";
 
 export const SecurityPage: FC = () => {
   const me = useMe();
-  const [securityState, securitySend] = useMachine(
-    userSecuritySettingsMachine,
-    {
-      context: {
-        userId: me.id,
-      },
-    },
-  );
-  const { error } = securityState.context;
+  const updatePasswordMutation = useMutation(updatePassword());
   const { data: authMethods } = useQuery({
     queryKey: ["authMethods"],
     queryFn: getAuthMethods,
@@ -43,13 +35,17 @@ export const SecurityPage: FC = () => {
       security={{
         form: {
           disabled: userLoginType.login_type !== "password",
-          error,
-          isLoading: securityState.matches("updatingSecurity"),
-          onSubmit: (data) => {
-            securitySend({
-              type: "UPDATE_SECURITY",
-              data,
+          error: updatePasswordMutation.error,
+          isLoading: updatePasswordMutation.isLoading,
+          onSubmit: async (data) => {
+            await updatePasswordMutation.mutateAsync({
+              userId: me.id,
+              ...data,
             });
+            displaySuccess("Updated password.");
+            // Refresh the browser session. We need to improve the AuthProvider
+            // to include better API to handle these scenarios
+            window.location.href = location.origin;
           },
         },
       }}

site/src/xServices/userSecuritySettings/userSecuritySettingsXService.ts

@@ -1,71 +0,0 @@
-import { assign, createMachine } from "xstate";
-import * as API from "api/api";
-import { UpdateUserPasswordRequest } from "api/typesGenerated";
-import { displaySuccess } from "components/GlobalSnackbar/utils";
-
-interface Context {
-  userId: string;
-  error?: unknown;
-}
-
-type Events = { type: "UPDATE_SECURITY"; data: UpdateUserPasswordRequest };
-
-export const userSecuritySettingsMachine = createMachine(
-  {
-    id: "userSecuritySettings",
-    predictableActionArguments: true,
-    schema: {
-      context: {} as Context,
-      events: {} as Events,
-    },
-    tsTypes: {} as import("./userSecuritySettingsXService.typegen").Typegen0,
-    initial: "idle",
-    states: {
-      idle: {
-        on: {
-          UPDATE_SECURITY: {
-            target: "updatingSecurity",
-          },
-        },
-      },
-      updatingSecurity: {
-        entry: "clearError",
-        invoke: {
-          src: "updateSecurity",
-          onDone: [
-            {
-              actions: ["notifyUpdate", "redirectToHome"],
-              target: "idle",
-            },
-          ],
-          onError: [
-            {
-              actions: "assignError",
-              target: "idle",
-            },
-          ],
-        },
-      },
-    },
-  },
-  {
-    services: {
-      updateSecurity: async ({ userId }, { data }) =>
-        API.updateUserPassword(userId, data),
-    },
-    actions: {
-      clearError: assign({
-        error: (_) => undefined,
-      }),
-      notifyUpdate: () => {
-        displaySuccess("Updated password.");
-      },
-      assignError: assign({
-        error: (_, event) => event.data,
-      }),
-      redirectToHome: () => {
-        window.location.href = location.origin;
-      },
-    },
-  },
-);