chore(site): use react-query to fetch roles (#9630)

site/src/api/api.ts

@@ -719,9 +719,7 @@ export const updateUserPassword = async (
 ): Promise<undefined> =>
   axios.put(`/api/v2/users/${userId}/password`, updatePassword);
 
-export const getSiteRoles = async (): Promise<
-  Array<TypesGen.AssignableRoles>
-> => {
+export const getRoles = async (): Promise<Array<TypesGen.AssignableRoles>> => {
   const response = await axios.get<Array<TypesGen.AssignableRoles>>(
     `/api/v2/users/roles`,
   );

site/src/api/queries/roles.ts

@@ -0,0 +1,8 @@
+import * as API from "api/api";
+
+export const roles = () => {
+  return {
+    queryKey: ["roles"],
+    queryFn: API.getRoles,
+  };
+};

site/src/pages/UsersPage/UsersPage.tsx

@@ -10,7 +10,6 @@ import { usePermissions } from "hooks/usePermissions";
 import { FC, ReactNode, useEffect } from "react";
 import { Helmet } from "react-helmet-async";
 import { useSearchParams, useNavigate } from "react-router-dom";
-import { siteRolesMachine } from "xServices/roles/siteRolesXService";
 import { usersMachine } from "xServices/users/usersXService";
 import { ConfirmDialog } from "../../components/Dialogs/ConfirmDialog/ConfirmDialog";
 import { ResetPasswordDialog } from "./ResetPasswordDialog";
@@ -22,6 +21,7 @@ import { useDashboard } from "components/Dashboard/DashboardProvider";
 import { deploymentConfigMachine } from "xServices/deploymentConfig/deploymentConfigMachine";
 import { useQuery } from "@tanstack/react-query";
 import { getAuthMethods } from "api/api";
+import { roles } from "api/queries/roles";
 
 export const Language = {
   suspendDialogTitle: "Suspend user",
@@ -64,12 +64,7 @@ export const UsersPage: FC<{ children?: ReactNode }> = () => {
   } = usersState.context;
 
   const { updateUsers: canEditUsers, viewDeploymentValues } = usePermissions();
-  const [rolesState] = useMachine(siteRolesMachine, {
-    context: {
-      hasPermission: canEditUsers,
-    },
-  });
-  const { roles } = rolesState.context;
+  const rolesQuery = useQuery({ ...roles(), enabled: canEditUsers });
 
   // Ideally this only runs if 'canViewDeployment' is true.
   // TODO: Prevent api call if the user does not have the perms.
@@ -109,7 +104,7 @@ export const UsersPage: FC<{ children?: ReactNode }> = () => {
   // - the user can edit the users but the roles are loading
   const isLoading =
     usersState.matches("gettingUsers") ||
-    (canEditUsers && rolesState.matches("gettingRoles")) ||
+    rolesQuery.isLoading ||
     authMethods.isLoading;
 
   return (
@@ -119,7 +114,7 @@ export const UsersPage: FC<{ children?: ReactNode }> = () => {
       </Helmet>
       <UsersPageView
         oidcRoleSyncEnabled={oidcRoleSyncEnabled}
-        roles={roles}
+        roles={rolesQuery.data}
         users={users}
         authMethods={authMethods.data}
         count={count}

site/src/xServices/roles/siteRolesXService.ts

@@ -1,79 +0,0 @@
-import { assign, createMachine } from "xstate";
-import * as API from "../../api/api";
-import * as TypesGen from "../../api/typesGenerated";
-import { displayError } from "../../components/GlobalSnackbar/utils";
-
-export const Language = {
-  getRolesError: "Error on get the roles.",
-};
-
-type SiteRolesContext = {
-  hasPermission: boolean;
-  roles?: TypesGen.AssignableRoles[];
-  getRolesError: unknown;
-};
-
-export const siteRolesMachine = createMachine(
-  {
-    id: "siteRolesState",
-    predictableActionArguments: true,
-    tsTypes: {} as import("./siteRolesXService.typegen").Typegen0,
-    schema: {
-      context: {} as SiteRolesContext,
-      services: {
-        getRoles: {
-          data: {} as TypesGen.AssignableRoles[],
-        },
-      },
-    },
-    initial: "initializing",
-    states: {
-      initializing: {
-        always: [
-          { target: "gettingRoles", cond: "hasPermission" },
-          { target: "done" },
-        ],
-      },
-      gettingRoles: {
-        entry: "clearGetRolesError",
-        invoke: {
-          id: "getRoles",
-          src: "getRoles",
-          onDone: {
-            target: "done",
-            actions: ["assignRoles"],
-          },
-          onError: {
-            target: "done",
-            actions: ["assignGetRolesError", "displayGetRolesError"],
-          },
-        },
-      },
-      done: {
-        type: "final",
-      },
-    },
-  },
-  {
-    actions: {
-      assignRoles: assign({
-        roles: (_, event) => event.data,
-      }),
-      assignGetRolesError: assign({
-        getRolesError: (_, event) => event.data,
-      }),
-      displayGetRolesError: () => {
-        displayError(Language.getRolesError);
-      },
-      clearGetRolesError: assign({
-        getRolesError: (_) => undefined,
-      }),
-    },
-    services: {
-      getRoles: () => API.getSiteRoles(),
-    },
-    guards: {
-      hasPermission: ({ hasPermission }) => hasPermission,
-    },
-  },
-);