Merge pull request 'feat(ui): refresh state after machine install or update' (#5081) from ui/refresh-state into main

Reviewed-on: https://git.clan.lol/clan/clan-core/pulls/5081

pkgs/clan-app/ui/src/workflows/InstallMachine/InstallMachine.tsx

@@ -13,6 +13,7 @@ import { installSteps } from "./steps/installSteps";
 import { ApiCall } from "@/src/hooks/api";
 
 import cx from "classnames";
+import { useClanContext } from "@/src/routes/Clan/Clan";
 
 interface InstallStepperProps {
   onDone: () => void;
@@ -66,6 +67,8 @@ export interface InstallStoreType {
 export type PromptValues = Record<string, Record<string, string>>;
 
 export const InstallModal = (props: InstallModalProps) => {
+  const ctx = useClanContext();
+
   const stepper = createStepper(
     {
       steps,
@@ -107,22 +110,27 @@ export const InstallModal = (props: InstallModalProps) => {
     }
   };
 
+  const onClose = async () => {
+    // refresh some queries
+    await ctx.machinesQuery.refetch();
+    await ctx.serviceInstancesQuery.refetch();
+
+    props.onClose?.();
+  };
+
   return (
     <StepperProvider stepper={stepper}>
       <Modal
         class={cx("w-screen", sizeClasses())}
         title="Install machine"
-        onClose={() => {
+        onClose={onClose}
-          console.log("Install modal closed");
-          props.onClose?.();
-        }}
         open={props.open}
         // @ts-expect-error some steps might not have
         metaHeader={stepper.currentStep()?.title ? <MetaHeader /> : undefined}
         // @ts-expect-error some steps might not have
         disablePadding={stepper.currentStep()?.isSplash}
       >
-        <InstallStepper onDone={() => props.onClose?.()} />
+        <InstallStepper onDone={onClose} />
       </Modal>
     </StepperProvider>
   );

pkgs/clan-app/ui/src/workflows/InstallMachine/UpdateMachine.tsx

@@ -19,6 +19,7 @@ import { LoadingBar } from "@/src/components/LoadingBar/LoadingBar";
 import { useApiClient } from "@/src/hooks/ApiClient";
 import { useClanURI } from "@/src/hooks/clan";
 import { AlertProps } from "@/src/components/Alert/Alert";
+import { useClanContext } from "@/src/routes/Clan/Clan";
 
 // TODO: Deduplicate
 interface UpdateStepperProps {
@@ -237,6 +238,8 @@ export type UpdateSteps = typeof steps;
 export type PromptValues = Record<string, Record<string, string>>;
 
 export const UpdateModal = (props: UpdateModalProps) => {
+  const ctx = useClanContext();
+
   const stepper = createStepper(
     {
       steps,
@@ -281,22 +284,27 @@ export const UpdateModal = (props: UpdateModalProps) => {
     }
   };
 
+  const onClose = async () => {
+    // refresh some queries
+    await ctx.machinesQuery.refetch();
+    await ctx.serviceInstancesQuery.refetch();
+
+    props.onClose?.();
+  };
+
   return (
     <StepperProvider stepper={stepper}>
       <Modal
         class={cx("w-screen", sizeClasses())}
         title="Update machine"
-        onClose={() => {
+        onClose={onClose}
-          console.log("Update modal closed");
-          props.onClose?.();
-        }}
         open={props.open}
         // @ts-expect-error some steps might not have
         metaHeader={stepper.currentStep()?.title ? <MetaHeader /> : undefined}
         // @ts-expect-error some steps might not have
         disablePadding={stepper.currentStep()?.isSplash}
       >
-        <UpdateStepper onDone={() => props.onClose?.()} />
+        <UpdateStepper onDone={onClose} />
       </Modal>
     </StepperProvider>
   );