ui/install: hook up {cancel, close} method

pkgs/clan-app/ui/src/workflows/Install/install.tsx

@@ -6,38 +6,25 @@ import {
   useStepper,
 } from "@/src/hooks/stepper";
 import { createForm, FieldValues, SubmitHandler } from "@modular-forms/solid";
-import { Show } from "solid-js";
+import { onMount, Show } from "solid-js";
 import { Dynamic } from "solid-js/web";
 import { initialSteps } from "./steps/Initial";
 import { createInstallerSteps } from "./steps/createInstaller";
 import { installSteps } from "./steps/installSteps";
 import { ApiCall } from "@/src/hooks/api";
 
-interface InstallForm extends FieldValues {
-  data_from_step_1: string;
-  data_from_step_2?: string;
-  data_from_step_3?: string;
+interface InstallStepperProps {
+  onDone: () => void;
 }
-
-const InstallStepper = () => {
+const InstallStepper = (props: InstallStepperProps) => {
   const stepSignal = useStepper<InstallSteps>();
+  const [store, set] = getStepStore<InstallStoreType>(stepSignal);
 
-  const [formStore, { Form, Field, FieldArray }] = createForm<InstallForm>();
+  onMount(() => {
+    set("done", props.onDone);
+  });
 
-  const handleSubmit: SubmitHandler<InstallForm> = (values, event) => {
-    console.log("Installation started (submit)", values);
-    stepSignal.setActiveStep("install:progress");
-  };
-  return (
-    <Form onSubmit={handleSubmit}>
-      <div class="gap-6">
-        <Dynamic
-          component={stepSignal.currentStep().content}
-          machineName={"karl"}
-        />
-      </div>
-    </Form>
-  );
+  return <Dynamic component={stepSignal.currentStep().content} />;
 };
 
 export interface InstallModalProps {
@@ -108,7 +95,7 @@ export const InstallModal = (props: InstallModalProps) => {
         // @ts-expect-error some steps might not have
         disablePadding={stepper.currentStep()?.isSplash}
       >
-        {(ctx) => <InstallStepper />}
+        {(ctx) => <InstallStepper onDone={ctx.close} />}
       </Modal>
     </StepperProvider>
   );

pkgs/clan-app/ui/src/workflows/Install/steps/createInstaller.tsx

@@ -308,6 +308,14 @@ const FlashProgress = () => {
     stepSignal.next();
   });
 
+  const handleCancel = async () => {
+    const progress = store.flash.progress;
+    if (progress) {
+      await progress.cancel();
+    }
+    stepSignal.previous();
+  };
+
   return (
     <div class="flex h-60 w-full flex-col items-center justify-end bg-inv-4">
       <div class="mb-6 flex w-full max-w-md flex-col items-center gap-3 fg-inv-1">
@@ -320,7 +328,12 @@ const FlashProgress = () => {
           USB stick is being flashed
         </Typography>
         <LoadingBar />
-        <Button hierarchy="primary" class="w-fit" size="s">
+        <Button
+          hierarchy="primary"
+          class="w-fit"
+          size="s"
+          onClick={handleCancel}
+        >
           Cancel
         </Button>
       </div>

pkgs/clan-app/ui/src/workflows/Install/steps/installSteps.tsx

@@ -537,6 +537,13 @@ const InstallProgress = () => {
   const stepSignal = useStepper<InstallSteps>();
   const [store, get] = getStepStore<InstallStoreType>(stepSignal);
 
+  const handleCancel = async () => {
+    const progress = store.install.progress;
+    if (progress) {
+      await progress.cancel();
+    }
+    store.done();
+  };
   return (
     <div class="flex h-60 w-full flex-col items-center justify-end bg-inv-4">
       <div class="mb-6 flex w-full max-w-md flex-col items-center gap-3 fg-inv-1">
@@ -549,7 +556,12 @@ const InstallProgress = () => {
           Machine is beeing installed
         </Typography>
         <LoadingBar />
-        <Button hierarchy="primary" class="w-fit" size="s">
+        <Button
+          hierarchy="primary"
+          class="w-fit"
+          size="s"
+          onClick={handleCancel}
+        >
           Cancel
         </Button>
       </div>