refactor: Refactor site roles machine to be used in the page (#5692)

site/src/pages/UsersPage/UsersPage.tsx

@@ -1,4 +1,4 @@
-import { useActor, useMachine } from "@xstate/react"
+import { useMachine } from "@xstate/react"
 import { User } from "api/typesGenerated"
 import { DeleteDialog } from "components/Dialogs/DeleteDialog/DeleteDialog"
 import {
@@ -6,15 +6,15 @@ import {
   nonInitialPage,
 } from "components/PaginationWidget/utils"
 import { usePermissions } from "hooks/usePermissions"
-import { FC, ReactNode, useContext, useEffect } from "react"
+import { FC, ReactNode } from "react"
 import { Helmet } from "react-helmet-async"
 import { useNavigate } from "react-router"
 import { useSearchParams } 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 "../../components/Dialogs/ResetPasswordDialog/ResetPasswordDialog"
 import { pageTitle } from "../../util/page"
-import { XServiceContext } from "../../xServices/StateContext"
 import { UsersPageView } from "./UsersPageView"
 
 export const Language = {
@@ -30,7 +30,6 @@ const getSelectedUser = (id: string, users?: User[]) =>
   users?.find((u) => u.id === id)
 
 export const UsersPage: FC<{ children?: ReactNode }> = () => {
-  const xServices = useContext(XServiceContext)
   const navigate = useNavigate()
   const [searchParams, setSearchParams] = useSearchParams()
   const filter = searchParams.get("filter") ?? ""
@@ -57,7 +56,11 @@ export const UsersPage: FC<{ children?: ReactNode }> = () => {
   } = usersState.context
 
   const { updateUsers: canEditUsers } = usePermissions()
-  const [rolesState, rolesSend] = useActor(xServices.siteRolesXService)
+  const [rolesState] = useMachine(siteRolesMachine, {
+    context: {
+      hasPermission: canEditUsers,
+    },
+  })
   const { roles } = rolesState.context
 
   // Is loading if
@@ -67,16 +70,6 @@ export const UsersPage: FC<{ children?: ReactNode }> = () => {
     usersState.matches("gettingUsers") ||
     (canEditUsers && rolesState.matches("gettingRoles"))
 
-  // Fetch roles on component mount
-  useEffect(() => {
-    // Only fetch the roles if the user has permission for it
-    if (canEditUsers) {
-      rolesSend({
-        type: "GET_ROLES",
-      })
-    }
-  }, [canEditUsers, rolesSend])
-
   return (
     <>
       <Helmet>

site/src/xServices/StateContext.tsx

@@ -6,7 +6,6 @@ import { buildInfoMachine } from "./buildInfo/buildInfoXService"
 import { updateCheckMachine } from "./updateCheck/updateCheckXService"
 import { deploymentConfigMachine } from "./deploymentConfig/deploymentConfigMachine"
 import { entitlementsMachine } from "./entitlements/entitlementsXService"
-import { siteRolesMachine } from "./roles/siteRolesXService"
 import { appearanceMachine } from "./appearance/appearanceXService"
 
 interface XServiceContextType {
@@ -14,7 +13,6 @@ interface XServiceContextType {
   buildInfoXService: ActorRefFrom<typeof buildInfoMachine>
   entitlementsXService: ActorRefFrom<typeof entitlementsMachine>
   appearanceXService: ActorRefFrom<typeof appearanceMachine>
-  siteRolesXService: ActorRefFrom<typeof siteRolesMachine>
   // Since the info here is used by multiple deployment settings page and we don't want to refetch them every time
   deploymentConfigXService: ActorRefFrom<typeof deploymentConfigMachine>
   updateCheckXService: ActorRefFrom<typeof updateCheckMachine>
@@ -38,7 +36,6 @@ export const XServiceProvider: FC<{ children: ReactNode }> = ({ children }) => {
         buildInfoXService: useInterpret(buildInfoMachine),
         entitlementsXService: useInterpret(entitlementsMachine),
         appearanceXService: useInterpret(appearanceMachine),
-        siteRolesXService: useInterpret(siteRolesMachine),
         deploymentConfigXService: useInterpret(deploymentConfigMachine),
         updateCheckXService: useInterpret(updateCheckMachine),
       }}

site/src/xServices/roles/siteRolesXService.ts

@@ -8,14 +8,11 @@ export const Language = {
 }
 
 type SiteRolesContext = {
+  hasPermission: boolean
   roles?: TypesGen.AssignableRoles[]
   getRolesError: Error | unknown
 }
 
-type SiteRolesEvent = {
-  type: "GET_ROLES"
-}
-
 export const siteRolesMachine = createMachine(
   {
     id: "siteRolesState",
@@ -23,19 +20,19 @@ export const siteRolesMachine = createMachine(
     tsTypes: {} as import("./siteRolesXService.typegen").Typegen0,
     schema: {
       context: {} as SiteRolesContext,
-      events: {} as SiteRolesEvent,
       services: {
         getRoles: {
           data: {} as TypesGen.AssignableRoles[],
         },
       },
     },
-    initial: "idle",
+    initial: "initializing",
     states: {
-      idle: {
-        on: {
-          GET_ROLES: "gettingRoles",
-        },
+      initializing: {
+        always: [
+          { target: "gettingRoles", cond: "hasPermission" },
+          { target: "done" },
+        ],
       },
       gettingRoles: {
         entry: "clearGetRolesError",
@@ -43,15 +40,18 @@ export const siteRolesMachine = createMachine(
           id: "getRoles",
           src: "getRoles",
           onDone: {
-            target: "idle",
+            target: "done",
             actions: ["assignRoles"],
           },
           onError: {
-            target: "idle",
+            target: "done",
             actions: ["assignGetRolesError", "displayGetRolesError"],
           },
         },
       },
+      done: {
+        type: "final",
+      },
     },
   },
   {
@@ -72,5 +72,8 @@ export const siteRolesMachine = createMachine(
     services: {
       getRoles: () => API.getSiteRoles(),
     },
+    guards: {
+      hasPermission: ({ hasPermission }) => hasPermission,
+    },
   },
 )