From deef357093912b5e9879b42c3622468671903c5d Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Mon, 11 Sep 2023 17:48:04 +0000
Subject: [PATCH 1/2] chore(site): use react-query to fetch roles

---
 site/src/api/api.ts                           |  4 +-
 site/src/api/queries/roles.ts                 | 10 +++
 site/src/pages/UsersPage/UsersPage.tsx        | 13 +--
 site/src/xServices/roles/siteRolesXService.ts | 79 -------------------
 4 files changed, 15 insertions(+), 91 deletions(-)
 create mode 100644 site/src/api/queries/roles.ts
 delete mode 100644 site/src/xServices/roles/siteRolesXService.ts

diff --git a/site/src/api/api.ts b/site/src/api/api.ts
index 8bc258e072d1c..38329fb5cd137 100644
--- a/site/src/api/api.ts
+++ b/site/src/api/api.ts
@@ -721,9 +721,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`,
   );
diff --git a/site/src/api/queries/roles.ts b/site/src/api/queries/roles.ts
new file mode 100644
index 0000000000000..51833b976d432
--- /dev/null
+++ b/site/src/api/queries/roles.ts
@@ -0,0 +1,10 @@
+import { useQuery } from "@tanstack/react-query";
+import * as API from "api/api";
+
+export const useRoles = ({ enabled }: { enabled: boolean }) => {
+  return useQuery({
+    queryKey: ["roles"],
+    queryFn: API.getRoles,
+    enabled,
+  });
+};
diff --git a/site/src/pages/UsersPage/UsersPage.tsx b/site/src/pages/UsersPage/UsersPage.tsx
index 809b14c6836b7..e0dc81e0a7d49 100644
--- a/site/src/pages/UsersPage/UsersPage.tsx
+++ b/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 { useRoles } 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 = useRoles({ 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}
diff --git a/site/src/xServices/roles/siteRolesXService.ts b/site/src/xServices/roles/siteRolesXService.ts
deleted file mode 100644
index 6fe7b96d8ca62..0000000000000
--- a/site/src/xServices/roles/siteRolesXService.ts
+++ /dev/null
@@ -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,
-    },
-  },
-);

From c6a833d01d7664c6a663a0e477a9577cde1c714e Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Tue, 12 Sep 2023 17:59:37 +0000
Subject: [PATCH 2/2] Refactor roles

---
 site/src/api/queries/roles.ts          | 8 +++-----
 site/src/pages/UsersPage/UsersPage.tsx | 4 ++--
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/site/src/api/queries/roles.ts b/site/src/api/queries/roles.ts
index 51833b976d432..37b2af49f3e74 100644
--- a/site/src/api/queries/roles.ts
+++ b/site/src/api/queries/roles.ts
@@ -1,10 +1,8 @@
-import { useQuery } from "@tanstack/react-query";
 import * as API from "api/api";
 
-export const useRoles = ({ enabled }: { enabled: boolean }) => {
-  return useQuery({
+export const roles = () => {
+  return {
     queryKey: ["roles"],
     queryFn: API.getRoles,
-    enabled,
-  });
+  };
 };
diff --git a/site/src/pages/UsersPage/UsersPage.tsx b/site/src/pages/UsersPage/UsersPage.tsx
index e0dc81e0a7d49..4e279290817da 100644
--- a/site/src/pages/UsersPage/UsersPage.tsx
+++ b/site/src/pages/UsersPage/UsersPage.tsx
@@ -21,7 +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 { useRoles } from "api/queries/roles";
+import { roles } from "api/queries/roles";
 
 export const Language = {
   suspendDialogTitle: "Suspend user",
@@ -64,7 +64,7 @@ export const UsersPage: FC<{ children?: ReactNode }> = () => {
   } = usersState.context;
 
   const { updateUsers: canEditUsers, viewDeploymentValues } = usePermissions();
-  const rolesQuery = useRoles({ enabled: canEditUsers });
+  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.