chore(site): replace deployment stats service by react-query (#9698)

site/src/api/queries/deployment.ts

@@ -13,3 +13,10 @@ export const deploymentDAUs = () => {
     queryFn: () => API.getDeploymentDAUs(),
   };
 };
+
+export const deploymentStats = () => {
+  return {
+    queryKey: ["deployment", "stats"],
+    queryFn: () => API.getDeploymentStats(),
+  };
+};

site/src/components/Dashboard/DeploymentBanner/DeploymentBanner.tsx

@@ -1,20 +1,20 @@
-import { useMachine } from "@xstate/react";
 import { usePermissions } from "hooks/usePermissions";
 import { DeploymentBannerView } from "./DeploymentBannerView";
-import { deploymentStatsMachine } from "xServices/deploymentStats/deploymentStatsMachine";
+import { useQuery } from "@tanstack/react-query";
+import { deploymentStats } from "api/queries/deployment";
 
 export const DeploymentBanner: React.FC = () => {
   const permissions = usePermissions();
-  const [state, sendEvent] = useMachine(deploymentStatsMachine);
+  const deploymentStatsQuery = useQuery(deploymentStats());
 
-  if (!permissions.viewDeploymentValues || !state.context.deploymentStats) {
+  if (!permissions.viewDeploymentValues || !deploymentStatsQuery.data) {
     return null;
   }
 
   return (
     <DeploymentBannerView
-      stats={state.context.deploymentStats}
-      fetchStats={() => sendEvent("RELOAD")}
+      stats={deploymentStatsQuery.data}
+      fetchStats={() => deploymentStatsQuery.refetch()}
     />
   );
 };

site/src/xServices/deploymentStats/deploymentStatsMachine.ts

@@ -1,60 +0,0 @@
-import { getDeploymentStats } from "api/api";
-import { DeploymentStats } from "api/typesGenerated";
-import { assign, createMachine } from "xstate";
-
-export const deploymentStatsMachine = createMachine(
-  {
-    /** @xstate-layout N4IgpgJg5mDOIC5QTABwDYHsCeBbMAdgC4DKRAhkbALLkDGAFgJYFgB0sFVAxBJq2xYA3TAGt2KDDnzEylGvWYDO8hMMx1KTfgG0ADAF19BxKFSZYTItoKmQAD0QBWAMwuANCGyIATAHYATgBfIM9JLDxCUi4FRhZ2FR4wACdkzGS2DEoAM3TcNnDpKLkqWjjlGLUCEU1rXUNjO3NLOtskB0QAvU9vBAAWVxCwtAiZaPkypXYmCHQwbgAlAFEAGQB5AEEAEUb25qsbO0cEAEY9AA4exDOANhDQkAJMFHh2wsjZGMn4posD-iOiD6Piup3ObCcQxA7zGJViUw4MV+LUO7WOfT03S81xOLihMOKX0U8UEszAyP+bVAxxc5z6oJ8AT6EPuQSAA */
-    id: "deploymentStatsMachine",
-    predictableActionArguments: true,
-
-    schema: {
-      context: {} as {
-        deploymentStats?: DeploymentStats;
-        getDeploymentStatsError?: unknown;
-      },
-      events: {} as { type: "RELOAD" },
-      services: {} as {
-        getDeploymentStats: {
-          data: DeploymentStats;
-        };
-      },
-    },
-    tsTypes: {} as import("./deploymentStatsMachine.typegen").Typegen0,
-    initial: "stats",
-    states: {
-      stats: {
-        invoke: {
-          src: "getDeploymentStats",
-          onDone: {
-            target: "idle",
-            actions: ["assignDeploymentStats"],
-          },
-          onError: {
-            target: "idle",
-            actions: ["assignDeploymentStatsError"],
-          },
-        },
-        tags: "loading",
-      },
-      idle: {
-        on: {
-          RELOAD: "stats",
-        },
-      },
-    },
-  },
-  {
-    services: {
-      getDeploymentStats: getDeploymentStats,
-    },
-    actions: {
-      assignDeploymentStats: assign({
-        deploymentStats: (_, { data }) => data,
-      }),
-      assignDeploymentStatsError: assign({
-        getDeploymentStatsError: (_, { data }) => data,
-      }),
-    },
-  },
-);