refactor: Move deploy settings machine to the layout (#5693)

site/src/components/DeploySettingsLayout/DeploySettingsLayout.tsx

@@ -7,13 +7,12 @@ import {
   PropsWithChildren,
   Suspense,
   useContext,
-  useEffect,
   FC,
 } from "react"
-import { useActor } from "@xstate/react"
-import { XServiceContext } from "xServices/StateContext"
+import { useMachine } from "@xstate/react"
 import { Loader } from "components/Loader/Loader"
 import { DeploymentConfig } from "api/typesGenerated"
+import { deploymentConfigMachine } from "xServices/deploymentConfig/deploymentConfigMachine"
 
 type DeploySettingsContextValue = { deploymentConfig: DeploymentConfig }
 
@@ -32,17 +31,10 @@ export const useDeploySettings = (): DeploySettingsContextValue => {
 }
 
 export const DeploySettingsLayout: FC<PropsWithChildren> = ({ children }) => {
-  const xServices = useContext(XServiceContext)
-  const [state, send] = useActor(xServices.deploymentConfigXService)
+  const [state] = useMachine(deploymentConfigMachine)
   const styles = useStyles()
   const { deploymentConfig } = state.context
 
-  useEffect(() => {
-    if (state.matches("idle")) {
-      send("LOAD")
-    }
-  }, [send, state])
-
   return (
     <Margins>
       <Stack className={styles.wrapper} direction="row" spacing={6}>

site/src/xServices/StateContext.tsx

@@ -4,7 +4,6 @@ import { ActorRefFrom } from "xstate"
 import { authMachine } from "./auth/authXService"
 import { buildInfoMachine } from "./buildInfo/buildInfoXService"
 import { updateCheckMachine } from "./updateCheck/updateCheckXService"
-import { deploymentConfigMachine } from "./deploymentConfig/deploymentConfigMachine"
 import { entitlementsMachine } from "./entitlements/entitlementsXService"
 import { appearanceMachine } from "./appearance/appearanceXService"
 
@@ -13,8 +12,6 @@ interface XServiceContextType {
   buildInfoXService: ActorRefFrom<typeof buildInfoMachine>
   entitlementsXService: ActorRefFrom<typeof entitlementsMachine>
   appearanceXService: ActorRefFrom<typeof appearanceMachine>
-  // 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>
 }
 
@@ -36,7 +33,6 @@ export const XServiceProvider: FC<{ children: ReactNode }> = ({ children }) => {
         buildInfoXService: useInterpret(buildInfoMachine),
         entitlementsXService: useInterpret(entitlementsMachine),
         appearanceXService: useInterpret(appearanceMachine),
-        deploymentConfigXService: useInterpret(deploymentConfigMachine),
         updateCheckXService: useInterpret(updateCheckMachine),
       }}
     >

site/src/xServices/deploymentConfig/deploymentConfigMachine.ts

@@ -6,7 +6,7 @@ export const deploymentConfigMachine = createMachine(
   {
     id: "deploymentConfigMachine",
     predictableActionArguments: true,
-    initial: "idle",
+
     schema: {
       context: {} as {
         deploymentConfig?: DeploymentConfig
@@ -20,28 +20,22 @@ export const deploymentConfigMachine = createMachine(
       },
     },
     tsTypes: {} as import("./deploymentConfigMachine.typegen").Typegen0,
+    initial: "loading",
     states: {
-      idle: {
-        on: {
-          LOAD: {
-            target: "loading",
-          },
-        },
-      },
       loading: {
         invoke: {
           src: "getDeploymentConfig",
           onDone: {
-            target: "loaded",
+            target: "done",
             actions: ["assignDeploymentConfig"],
           },
           onError: {
-            target: "idle",
+            target: "done",
             actions: ["assignGetDeploymentConfigError"],
           },
         },
       },
-      loaded: {
+      done: {
         type: "final",
       },
     },