From 11ba85eedd7826237e111b34b4e32d286045017e Mon Sep 17 00:00:00 2001
From: Johannes Kirschbauer <hsjobeki@gmail.com>
Date: Fri, 6 Dec 2024 19:53:03 +0100
Subject: [PATCH] UI: fix type breakages

---
 .../app/src/components/MachineListItem.tsx    | 24 +++++++++----------
 .../app/src/routes/machines/details.tsx       | 18 +++++++-------
 .../app/src/routes/machines/list.tsx          |  2 +-
 3 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/pkgs/webview-ui/app/src/components/MachineListItem.tsx b/pkgs/webview-ui/app/src/components/MachineListItem.tsx
index b2831ebb6..2ebd2ba76 100644
--- a/pkgs/webview-ui/app/src/components/MachineListItem.tsx
+++ b/pkgs/webview-ui/app/src/components/MachineListItem.tsx
@@ -29,7 +29,7 @@ export const MachineListItem = (props: MachineListItemProps) => {
   const navigate = useNavigate();
 
   const handleInstall = async () => {
-    if (!info?.deploy.targetHost || installing()) {
+    if (!info?.deploy?.targetHost || installing()) {
       return;
     }
 
@@ -38,9 +38,9 @@ export const MachineListItem = (props: MachineListItemProps) => {
       toast.error("No active clan selected");
       return;
     }
-    if (!info?.deploy.targetHost) {
+    if (!info?.deploy?.targetHost) {
       toast.error(
-        "Machine does not have a target host. Specify where the machine should be deployed.",
+        "Machine does not have a target host. Specify where the machine should be deployed."
       );
       return;
     }
@@ -63,13 +63,13 @@ export const MachineListItem = (props: MachineListItemProps) => {
         loading: "Installing...",
         success: "Installed",
         error: "Failed to install",
-      },
+      }
     );
     setInstalling(false);
   };
 
   const handleUpdate = async () => {
-    if (!info?.deploy.targetHost || installing()) {
+    if (!info?.deploy?.targetHost || installing()) {
       return;
     }
 
@@ -80,7 +80,7 @@ export const MachineListItem = (props: MachineListItemProps) => {
     }
     if (!info?.deploy.targetHost) {
       toast.error(
-        "Machine does not have a target host. Specify where the machine should be deployed.",
+        "Machine does not have a target host. Specify where the machine should be deployed."
       );
       return;
     }
@@ -101,7 +101,7 @@ export const MachineListItem = (props: MachineListItemProps) => {
         loading: "Updating...",
         success: "Updated",
         error: "Failed to update",
-      },
+      }
     );
     setUpdating(false);
   };
@@ -158,7 +158,7 @@ export const MachineListItem = (props: MachineListItemProps) => {
                         </span>
                       )}
                     </Show>
-                    {d()?.deploy.targetHost}
+                    {d()?.deploy?.targetHost}
                   </>
                 )}
               </Show>
@@ -182,24 +182,24 @@ export const MachineListItem = (props: MachineListItemProps) => {
                 </li>
                 <li
                   classList={{
-                    disabled: !info?.deploy.targetHost || installing(),
+                    disabled: !info?.deploy?.targetHost || installing(),
                   }}
                   onClick={handleInstall}
                 >
                   <a>
-                    <Show when={info?.deploy.targetHost} fallback={"Deploy"}>
+                    <Show when={info?.deploy?.targetHost} fallback={"Deploy"}>
                       {(d) => `Install to ${d()}`}
                     </Show>
                   </a>
                 </li>
                 <li
                   classList={{
-                    disabled: !info?.deploy.targetHost || updating(),
+                    disabled: !info?.deploy?.targetHost || updating(),
                   }}
                   onClick={handleUpdate}
                 >
                   <a>
-                    <Show when={info?.deploy.targetHost} fallback={"Deploy"}>
+                    <Show when={info?.deploy?.targetHost} fallback={"Deploy"}>
                       {(d) => `Update (${d()})`}
                     </Show>
                   </a>
diff --git a/pkgs/webview-ui/app/src/routes/machines/details.tsx b/pkgs/webview-ui/app/src/routes/machines/details.tsx
index 857966623..11c1298dd 100644
--- a/pkgs/webview-ui/app/src/routes/machines/details.tsx
+++ b/pkgs/webview-ui/app/src/routes/machines/details.tsx
@@ -65,7 +65,7 @@ const InstallMachine = (props: InstallMachineProps) => {
     }
 
     const loading_toast = toast.loading(
-      "Installing machine. Grab coffee (15min)...",
+      "Installing machine. Grab coffee (15min)..."
     );
     const r = await callApi("install_machine", {
       opts: {
@@ -243,18 +243,18 @@ const MachineForm = (props: MachineDetailsProps) => {
 
     const machine_response = await callApi("set_machine", {
       flake_url: curr_uri,
-      machine_name: props.initialData.machine.name,
+      machine_name: props.initialData.machine.name || "My machine",
       machine: {
         ...values.machine,
         // TODO: Remove this workaround
         tags: Array.from(
-          values.machine.tags || props.initialData.machine.tags || [],
+          values.machine.tags || props.initialData.machine.tags || []
         ),
       },
     });
     if (machine_response.status === "error") {
       toast.error(
-        `Failed to set machine: ${machine_response.errors[0].message}`,
+        `Failed to set machine: ${machine_response.errors[0].message}`
       );
     }
     if (machine_response.status === "success") {
@@ -316,7 +316,7 @@ const MachineForm = (props: MachineDetailsProps) => {
             }
           >
             <div class="w-32 rounded-lg border p-2 bg-def-4 border-inv-3">
-              <RndThumbnail name={machineName()} />
+              <RndThumbnail name={machineName() || "M"} />
             </div>
           </div>
         </figure>
@@ -342,7 +342,7 @@ const MachineForm = (props: MachineDetailsProps) => {
                 {(tag) => (
                   <label class="p-1">
                     Tags
-                    <span class="mx-2 rounded-full px-3 py-1 bg-inv-4 fg-inv-1 w-fit">
+                    <span class="mx-2 w-fit rounded-full px-3 py-1 bg-inv-4 fg-inv-1">
                       {tag}
                     </span>
                   </label>
@@ -455,7 +455,7 @@ const MachineForm = (props: MachineDetailsProps) => {
               // disabled={!online()}
               onClick={() => {
                 const modal = document.getElementById(
-                  "install_modal",
+                  "install_modal"
                 ) as HTMLDialogElement | null;
                 modal?.showModal();
               }}
@@ -561,7 +561,7 @@ function WifiModule(props: MachineWifiProps) {
   });
 
   const [nets, setNets] = createSignal<1[]>(
-    new Array(props.initialData.length || 1).fill(1),
+    new Array(props.initialData.length || 1).fill(1)
   );
 
   const handleSubmit = async (values: WifiForm) => {
@@ -572,7 +572,7 @@ function WifiModule(props: MachineWifiProps) {
           ...acc,
           [curr.ssid || ""]: { ssid: curr.ssid, password: curr.password },
         }),
-        {},
+        {}
       );
 
     console.log("submitting", values, networks);
diff --git a/pkgs/webview-ui/app/src/routes/machines/list.tsx b/pkgs/webview-ui/app/src/routes/machines/list.tsx
index f2c3f022c..5f858a661 100644
--- a/pkgs/webview-ui/app/src/routes/machines/list.tsx
+++ b/pkgs/webview-ui/app/src/routes/machines/list.tsx
@@ -84,7 +84,7 @@ export const MachineListView: Component = () => {
       </div>
       {/* <Show when={filter()}> */}
       <div class="my-1 flex w-full gap-2 p-2">
-        <div class="h-6 w-6 p-1">
+        <div class="size-6 p-1">
           <Icon icon="Filter" />
         </div>
         <For each={filter().tags.sort()}>