Merge pull request 'Webview: migrate create clan form to async api' (#1757) from hsjobeki/clan-core:hsjobeki-main into main

pkgs/webview-ui/app/src/Routes.tsx

@@ -7,6 +7,7 @@ import { BlockDevicesView } from "./routes/blockdevices/view";
 import { Flash } from "./routes/flash/view";
 import { Settings } from "./routes/settings";
 import { Welcome } from "./routes/welcome";
+import { Deploy } from "./routes/deploy";
 
 export type Route = keyof typeof routes;
 
@@ -51,6 +52,11 @@ export const routes = {
     label: "welcome",
     icon: "settings",
   },
+  deploy: {
+    child: Deploy,
+    label: "deploy",
+    icon: "content_copy",
+  },
 };
 
 interface RouterProps {

pkgs/webview-ui/app/src/layout/header.tsx

@@ -1,6 +1,21 @@
+import { createQuery } from "@tanstack/solid-query";
 import { activeURI, setRoute } from "../App";
+import { callApi } from "../api";
+import { Show } from "solid-js";
 
 export const Header = () => {
+  const { isLoading, data } = createQuery(() => ({
+    queryKey: [`${activeURI()}:meta`],
+    queryFn: async () => {
+      const currUri = activeURI();
+      if (currUri) {
+        const result = await callApi("show_clan_meta", { uri: currUri });
+        if (result.status === "error") throw new Error("Failed to fetch data");
+        return result.data;
+      }
+    },
+  }));
+
   return (
     <div class="navbar bg-base-100">
       <div class="flex-none">
@@ -14,7 +29,16 @@ export const Header = () => {
         </span>
       </div>
       <div class="flex-1">
-        <a class="text-xl">{activeURI()}</a>
+        <div class="tooltip tooltip-right" data-tip={data?.name || activeURI()}>
+          <div class="avatar placeholder online mx-4">
+            <div class="w-10 rounded-full bg-slate-700 text-neutral-content">
+              <span class="text-xl">C</span>
+              <Show when={data?.name}>
+                {(name) => <span class="text-xl">{name()}</span>}
+              </Show>
+            </div>
+          </div>
+        </div>
       </div>
       <div class="flex-none">
         <span class="tooltip tooltip-bottom" data-tip="Settings">

pkgs/webview-ui/app/src/routes/clan/clanDetails.tsx

@@ -1,26 +1,14 @@
-import { OperationResponse, pyApi } from "@/src/api";
-import {
-  For,
-  JSX,
-  Match,
-  Show,
-  Switch,
-  createEffect,
-  createSignal,
-} from "solid-js";
+import { OperationResponse, callApi, pyApi } from "@/src/api";
+import { Show } from "solid-js";
 import {
   SubmitHandler,
   createForm,
   required,
-  custom,
+  reset,
 } from "@modular-forms/solid";
 import toast from "solid-toast";
 import { setActiveURI, setRoute } from "@/src/App";
 
-interface ClanDetailsProps {
-  directory: string;
-}
-
 type CreateForm = Meta & {
   template_url: string;
 };
@@ -28,69 +16,44 @@ type CreateForm = Meta & {
 export const ClanForm = () => {
   const [formStore, { Form, Field }] = createForm<CreateForm>({
     initialValues: {
+      name: "",
+      description: "",
       template_url: "git+https://git.clan.lol/clan/clan-core#templates.minimal",
     },
   });
 
   const handleSubmit: SubmitHandler<CreateForm> = async (values, event) => {
     const { template_url, ...meta } = values;
-    pyApi.open_file.dispatch({
-      file_request: {
-        mode: "save",
-      },
 
-      op_key: "create_clan",
+    const response = await callApi("open_file", {
+      file_request: { mode: "save" },
     });
 
-    // await new Promise<void>((done) => {
-    //   pyApi.open_file.receive((r) => {
-    //     if (r.op_key !== "create_clan") {
-    //       done();
-    //       return;
-    //     }
-    //     if (r.status !== "success") {
-    //       toast.error("Cannot select clan directory");
-    //       done();
-    //       return;
-    //     }
-    //     const target_dir = r?.data;
-    //     if (!target_dir) {
-    //       toast.error("Cannot select clan directory");
-    //       done();
-    //       return;
-    //     }
+    if (response.status !== "success") {
+      toast.error("Cannot select clan directory");
+      return;
+    }
+    const target_dir = response?.data;
+    if (!target_dir) {
+      toast.error("Cannot select clan directory");
+      return;
+    }
 
-    //     console.log({ formStore });
-
-    //     toast.promise(
-    //       new Promise<void>((resolve, reject) => {
-    //         pyApi.create_clan.receive((r) => {
-    //           done();
-    //           if (r.status === "error") {
-    //             reject();
-    //             console.error(r.errors);
-    //             return;
-    //           }
-    //           resolve();
-
-    //           // Navigate to the new clan
-    //           setCurrClanURI(target_dir);
-    //           setRoute("machines");
-    //         });
-
-    //         pyApi.create_clan.dispatch({
-    //           options: { directory: target_dir, meta, template_url },
-    //           op_key: "create_clan",
-    //         });
-    //       }),
-    //       {
-    //         loading: "Creating clan...",
-    //         success: "Clan Successfully Created",
-    //         error: "Failed to create clan",
-    //       }
-    //     );
-    //   });
-    // });
+    await toast.promise(
+      (async () => {
+        await callApi("create_clan", {
+          options: { directory: target_dir, meta, template_url },
+        });
+        setActiveURI(target_dir);
+        setRoute("machines");
+      })(),
+      {
+        loading: "Creating clan...",
+        success: "Clan Successfully Created",
+        error: "Failed to create clan",
+      }
+    );
+    reset(formStore);
   };
 
   return (
@@ -135,6 +98,7 @@ export const ClanForm = () => {
 
                 <input
                   {...props}
+                  disabled={formStore.submitting}
                   required
                   placeholder="Clan Name"
                   class="input input-bordered"
@@ -158,6 +122,7 @@ export const ClanForm = () => {
 
                 <input
                   {...props}
+                  disabled={formStore.submitting}
                   required
                   type="text"
                   placeholder="Some words about your clan"
@@ -188,6 +153,7 @@ export const ClanForm = () => {
                     <input
                       {...props}
                       required
+                      disabled={formStore.submitting}
                       type="text"
                       placeholder="Template to use"
                       class="input input-bordered"

pkgs/webview-ui/app/src/routes/deploy/index.tsx

@@ -0,0 +1,6 @@
+import { callApi } from "@/src/api";
+import { createQuery } from "@tanstack/solid-query";
+
+export const Deploy = () => {
+  return <div>Deloy view</div>;
+};

pkgs/webview-ui/app/src/routes/flash/view.tsx

@@ -1,6 +1,7 @@
 import { route } from "@/src/App";
-import { OperationArgs, OperationResponse, pyApi } from "@/src/api";
+import { OperationArgs, OperationResponse, callApi, pyApi } from "@/src/api";
 import { SubmitHandler, createForm, required } from "@modular-forms/solid";
+import { createQuery } from "@tanstack/solid-query";
 import { For, createSignal } from "solid-js";
 import { effect } from "solid-js/web";
 
@@ -28,36 +29,35 @@ type BlockDevices = Extract<
 export const Flash = () => {
   const [formStore, { Form, Field }] = createForm<FlashFormValues>({});
 
-  const [devices, setDevices] = createSignal<BlockDevices>([]);
-  // pyApi.show_block_devices.receive((r) => {
-  //   console.log("block devices", r);
-  //   if (r.status === "success") {
-  //     setDevices(r.data.blockdevices);
-  //   }
-  // });
+  const {
+    data: devices,
+    refetch: loadDevices,
+    isFetching,
+  } = createQuery(() => ({
+    queryKey: ["TanStack Query"],
+    queryFn: async () => {
+      const result = await callApi("show_block_devices", {});
+      if (result.status === "error") throw new Error("Failed to fetch data");
+      return result.data;
+    },
+    staleTime: 1000 * 60 * 1, // 1 minutes
+  }));
 
-  const handleSubmit: SubmitHandler<FlashFormValues> = (values, event) => {
-    // pyApi.open_file.dispatch({ file_request: { mode: "save" } });
-    // pyApi.open_file.receive((r) => {
-    //   if (r.status === "success") {
-    //     if (r.data) {
-    //       pyApi.create_clan.dispatch({
-    //         options: { directory: r.data, meta: values },
-    //       });
-    //     }
-    //     return;
-    //   }
+  const handleSubmit = async (values: FlashFormValues) => {
+    // TODO: Rework Flash machine API
+    // Its unusable in its current state
+    // await callApi("flash_machine", {
+    //   machine: {
+    //     name: "",
+    //   },
+    //   disks:  {values.disk },
+    //   dry_run: true,
     // });
     console.log("submit", values);
   };
 
-  // effect(() => {
-  //   if (route() === "flash") {
-  //     pyApi.show_block_devices.dispatch({});
-  //   }
-  // });
   return (
-    <div class="">
+    <div class="px-2">
       <Form onSubmit={handleSubmit}>
         <Field
           name="machine.flake"
@@ -70,7 +70,7 @@ export const Flash = () => {
                 <input
                   type="text"
                   class="grow"
-                  placeholder="Clan URI"
+                  placeholder="machine.flake"
                   required
                   {...props}
                 />
@@ -96,7 +96,7 @@ export const Flash = () => {
                 <input
                   type="text"
                   class="grow"
-                  placeholder="Machine Name"
+                  placeholder="machine.name"
                   required
                   {...props}
                 />
@@ -115,9 +115,15 @@ export const Flash = () => {
           {(field, props) => (
             <>
               <label class="form-control input-bordered flex w-full items-center gap-2">
-                <select required class="select w-full" {...props}>
+                <select
+                  required
+                  class="select select-bordered w-full"
+                  {...props}
+                >
                   {/* <span class="material-icons">devices</span> */}
-                  <For each={devices()}>
+                  <option disabled>Select a disk</option>
+
+                  <For each={devices?.blockdevices}>
                     {(device) => (
                       <option value={device.name}>
                         {device.name} / {device.size} bytes
@@ -126,6 +132,11 @@ export const Flash = () => {
                   </For>
                 </select>
                 <div class="label">
+                  {isFetching && (
+                    <span class="label-text-alt">
+                      <span class="loading loading-bars"></span>
+                    </span>
+                  )}
                   {field.error && (
                     <span class="label-text-alt font-bold text-error">
                       {field.error}