Move update roles to react-query

coder · BrunoQuaresma · Oct 2, 2023 · Sep 28, 2023 · Sep 28, 2023 · Sep 29, 2023
commit 269f67fe7cbae0eb7955af9d83bfeedb89d57d82
diff --git a/site/src/api/queries/users.ts b/site/src/api/queries/users.ts
@@ -60,3 +60,13 @@ export const deleteUser = (queryClient: QueryClient) => {
     },
   };
 };
+
+export const updateRoles = (queryClient: QueryClient) => {
+  return {
+    mutationFn: ({ userId, roles }: { userId: string; roles: string[] }) =>
+      API.updateUserRoles(roles, userId),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries(["users"]);
+    },
+  };
+};
diff --git a/site/src/pages/UsersPage/UsersPage.test.tsx b/site/src/pages/UsersPage/UsersPage.test.tsx
@@ -8,7 +8,6 @@ import {
   MockAuditorRole,
   MockOwnerRole,
 } from "testHelpers/entities";
-import { Language as usersXServiceLanguage } from "xServices/users/usersXService";
 import * as API from "api/api";
 import { Role } from "api/typesGenerated";
 import { Language as ResetPasswordDialogLanguage } from "./ResetPasswordDialog";
@@ -406,10 +405,7 @@ describe("UsersPage", () => {
         }, MockAuditorRole);
 
         // Check if the error message is displayed
-        const errorMessage = await screen.findByText(
-          usersXServiceLanguage.updateUserRolesError,
-        );
-        await waitFor(() => expect(errorMessage).toBeDefined());
+        await waitFor(() => expect("Error updating user roles").toBeDefined());
 
         // Check if the API was called correctly
         const currentRoles = MockUser.roles.map((r) => r.name);

diff --git a/site/src/pages/UsersPage/UsersPage.tsx b/site/src/pages/UsersPage/UsersPage.tsx
@@ -1,4 +1,3 @@
-import { useMachine } from "@xstate/react";
 import { User } from "api/typesGenerated";
 import { DeleteDialog } from "components/Dialogs/DeleteDialog/DeleteDialog";
 import { nonInitialPage } from "components/PaginationWidget/utils";
@@ -7,7 +6,6 @@ import { usePermissions } from "hooks/usePermissions";
 import { FC, ReactNode, useState } from "react";
 import { Helmet } from "react-helmet-async";
 import { useSearchParams, useNavigate } from "react-router-dom";
-import { usersMachine } from "xServices/users/usersXService";
 import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog";
 import { ResetPasswordDialog } from "./ResetPasswordDialog";
 import { pageTitle } from "utils/page";
@@ -27,6 +25,7 @@ import {
   activateUser,
   deleteUser,
   updatePassword,
+  updateRoles,
 } from "api/queries/users";
 import { displayError, displaySuccess } from "components/GlobalSnackbar/utils";
 import { getErrorMessage } from "api/errors";
@@ -48,7 +47,6 @@ export const UsersPage: FC<{ children?: ReactNode }> = () => {
   const { entitlements } = useDashboard();
   const [searchParams] = searchParamsResult;
   const filter = searchParams.get("filter") ?? "";
-  const [usersState, usersSend] = useMachine(usersMachine);
   const pagination = usePagination({
     searchParamsResult,
   });
@@ -108,6 +106,8 @@ export const UsersPage: FC<{ children?: ReactNode }> = () => {
     newPassword: string;
   }>();
   const updatePasswordMutation = useMutation(updatePassword());
+  // Update roles
+  const updateRolesMutation = useMutation(updateRoles(queryClient));
 
   return (
     <>
@@ -139,14 +139,18 @@ export const UsersPage: FC<{ children?: ReactNode }> = () => {
             newPassword: generateRandomString(12),
           });
         }}
-        onUpdateUserRoles={(user, roles) => {
-          usersSend({
-            type: "UPDATE_USER_ROLES",
-            userId: user.id,
-            roles,
-          });
+        onUpdateUserRoles={async (user, roles) => {
+          try {
+            await updateRolesMutation.mutateAsync({
+              userId: user.id,
+              roles,
+            });
+            displaySuccess("User roles updated");
+          } catch (e) {
+            displayError(getErrorMessage(e, "Error updating user roles"));
+          }
         }}
-        isUpdatingUserRoles={usersState.matches("updatingUserRoles")}
+        isUpdatingUserRoles={updateRolesMutation.isLoading}
         isLoading={isLoading}
         canEditUsers={canEditUsers}
         canViewActivity={entitlements.features.audit_log.enabled}

diff --git a/site/src/pages/UsersPage/UsersTable/EditRolesButton.tsx b/site/src/pages/UsersPage/UsersTable/EditRolesButton.tsx
@@ -188,7 +188,7 @@ const useStyles = makeStyles((theme) => ({
     padding: 0,
 
     "&:disabled": {
-      opacity: 0,
+      opacity: 0.5,
     },
   },
   options: {

diff --git a/site/src/xServices/users/usersXService.ts b/site/src/xServices/users/usersXService.ts