Clan-app: move expert field into advanced form

pkgs/webview-ui/app/src/components/FileInput.tsx

@@ -15,6 +15,7 @@ interface FileInputProps {
   class?: string;
   label?: string;
   error?: string;
+  helperText?: string;
 }
 
 /**
@@ -53,7 +54,9 @@ export function FileInput(props: FileInputProps) {
           {props.label}
         </span>
       </div>
-
+      <Show when={props.helperText}>
+        <span class="label-text-alt m-1">{props.helperText}</span>
+      </Show>
       <div
         class={cx(
           "relative flex min-h-[96px] w-full items-center justify-center rounded-2xl border-[3px] border-dashed p-8 text-center focus-within:ring-4 md:min-h-[112px] md:text-lg lg:min-h-[128px] lg:p-10 lg:text-xl",

pkgs/webview-ui/app/src/components/SelectInput.tsx

@@ -1,4 +1,5 @@
 import { FieldValues, FormStore, ResponseData } from "@modular-forms/solid";
+import { Show } from "solid-js";
 import { type JSX } from "solid-js";
 
 interface SelectInputProps<T extends FieldValues, R extends ResponseData> {
@@ -9,6 +10,7 @@ interface SelectInputProps<T extends FieldValues, R extends ResponseData> {
   label: JSX.Element;
   error?: string;
   required?: boolean;
+  topRightLabel?: JSX.Element;
 }
 
 export function SelectInput<T extends FieldValues, R extends ResponseData>(
@@ -29,8 +31,10 @@ export function SelectInput<T extends FieldValues, R extends ResponseData>(
         >
           {props.label}
         </span>
+        <Show when={props.topRightLabel}>
+          <span class="label-text-alt">{props.topRightLabel}</span>
+        </Show>
       </div>
-
       <select
         {...props.selectProps}
         required={props.required}

pkgs/webview-ui/app/src/components/TextInput.tsx

@@ -1,5 +1,6 @@
 import { FieldValues, FormStore, ResponseData } from "@modular-forms/solid";
-import { type JSX } from "solid-js";
+import { Show, type JSX } from "solid-js";
+import cx from "classnames";
 
 interface TextInputProps<T extends FieldValues, R extends ResponseData> {
   formStore: FormStore<T, R>;
@@ -10,6 +11,11 @@ interface TextInputProps<T extends FieldValues, R extends ResponseData> {
   required?: boolean;
   type?: string;
   inlineLabel?: JSX.Element;
+  class?: string;
+  adornment?: {
+    position: "start" | "end";
+    content: JSX.Element;
+  };
 }
 
 export function TextInput<T extends FieldValues, R extends ResponseData>(
@@ -17,7 +23,7 @@ export function TextInput<T extends FieldValues, R extends ResponseData>(
 ) {
   return (
     <label
-      class="form-control w-full"
+      class={cx("form-control w-full", props.class)}
       aria-disabled={props.formStore.submitting}
     >
       <div class="label">
@@ -33,6 +39,9 @@ export function TextInput<T extends FieldValues, R extends ResponseData>(
       </div>
 
       <div class="input input-bordered flex items-center gap-2">
+        <Show when={props.adornment && props.adornment.position === "start"}>
+          {props.adornment?.content}
+        </Show>
         {props.inlineLabel}
         <input
           {...props.inputProps}
@@ -46,6 +55,9 @@ export function TextInput<T extends FieldValues, R extends ResponseData>(
           required
           disabled={props.formStore.submitting}
         />
+        <Show when={props.adornment && props.adornment.position === "end"}>
+          {props.adornment?.content}
+        </Show>
       </div>
       {props.error && (
         <span class="label-text-alt font-bold text-error">{props.error}</span>

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

@@ -1,4 +1,4 @@
-import { callApi, OperationResponse } from "@/src/api";
+import { callApi } from "@/src/api";
 import { FileInput } from "@/src/components/FileInput";
 import { SelectInput } from "@/src/components/SelectInput";
 import { TextInput } from "@/src/components/TextInput";
@@ -10,7 +10,7 @@ import {
   getValue,
 } from "@modular-forms/solid";
 import { createQuery } from "@tanstack/solid-query";
-import { createEffect, createSignal, For } from "solid-js";
+import { createEffect, createSignal, For, Show } from "solid-js";
 import toast from "solid-toast";
 
 interface Wifi extends FieldValues {
@@ -97,7 +97,7 @@ export const Flash = () => {
       if (result.status === "error") throw new Error("Failed to fetch data");
       return result.data;
     },
-    staleTime: 1000 * 60 * 15, // 15 minutes
+    staleTime: Infinity,
   }));
 
   const langQuery = createQuery(() => ({
@@ -107,7 +107,7 @@ export const Flash = () => {
       if (result.status === "error") throw new Error("Failed to fetch data");
       return result.data;
     },
-    staleTime: 1000 * 60 * 15, // 15 minutes
+    staleTime: Infinity,
   }));
 
   /**
@@ -136,11 +136,7 @@ export const Flash = () => {
   };
 
   const handleSubmit = async (values: FlashFormValues) => {
-    console.log("Submit WiFi Networks:", values.wifi);
+    console.log("Submit:", values);
-    console.log(
-      "Submit SSH Keys:",
-      values.sshKeys.map((file) => file.name),
-    );
     try {
       await callApi("flash_machine", {
         machine: {
@@ -171,109 +167,9 @@ export const Flash = () => {
   };
 
   return (
-    <div class="px-2">
+    <div class="m-4 bg-slate-50 p-4 pt-8 shadow-sm shadow-slate-400 rounded-lg">
       <Form onSubmit={handleSubmit}>
-        <Field
+        <div class="my-4">
-          name="machine.flake"
-          validate={[required("This field is required")]}
-        >
-          {(field, props) => (
-            <>
-              <TextInput
-                formStore={formStore}
-                inputProps={props}
-                label="Installer (flake URL)"
-                value={String(field.value)}
-                inlineLabel={<span class="material-icons">file_download</span>}
-                error={field.error}
-                required
-              />
-            </>
-          )}
-        </Field>
-        <Field
-          name="machine.devicePath"
-          validate={[required("This field is required")]}
-        >
-          {(field, props) => (
-            <>
-              <TextInput
-                formStore={formStore}
-                inputProps={props}
-                label="Installer Image (attribute name)"
-                value={String(field.value)}
-                inlineLabel={<span class="material-icons">devices</span>}
-                error={field.error}
-                required
-              />
-            </>
-          )}
-        </Field>
-        <Field name="disk" validate={[required("This field is required")]}>
-          {(field, props) => (
-            <SelectInput
-              formStore={formStore}
-              selectProps={props}
-              label="Flash Disk"
-              value={String(field.value)}
-              error={field.error}
-              required
-              options={
-                <>
-                  <option value="" disabled>
-                    Select a disk
-                  </option>
-                  <For each={deviceQuery.data?.blockdevices}>
-                    {(device) => (
-                      <option value={device.path}>
-                        {device.path} -- {device.size} bytes
-                      </option>
-                    )}
-                  </For>
-                </>
-              }
-            />
-          )}
-        </Field>
-        <Field name="language" validate={[required("This field is required")]}>
-          {(field, props) => (
-            <>
-              <SelectInput
-                formStore={formStore}
-                selectProps={props}
-                label="Language"
-                value={String(field.value)}
-                error={field.error}
-                required
-                options={
-                  <For each={langQuery.data}>
-                    {(language) => <option value={language}>{language}</option>}
-                  </For>
-                }
-              />
-            </>
-          )}
-        </Field>
-        <Field name="keymap" validate={[required("This field is required")]}>
-          {(field, props) => (
-            <>
-              <SelectInput
-                formStore={formStore}
-                selectProps={props}
-                label="Keymap"
-                value={String(field.value)}
-                error={field.error}
-                required
-                options={
-                  <For each={keymapQuery.data}>
-                    {(keymap) => <option value={keymap}>{keymap}</option>}
-                  </For>
-                }
-              />
-            </>
-          )}
-        </Field>
-
           <Field name="sshKeys" type="File[]">
             {(field, props) => (
               <>
@@ -298,6 +194,7 @@ export const Flash = () => {
                   }}
                   value={field.value}
                   error={field.error}
+                  helperText="Provide your SSH public key. For secure and passwordless SSH connections."
                   label="Authorized SSH Keys"
                   multiple
                   required
@@ -305,13 +202,54 @@ export const Flash = () => {
               </>
             )}
           </Field>
+        </div>
+
+        <Field name="disk" validate={[required("This field is required")]}>
+          {(field, props) => (
+            <SelectInput
+              topRightLabel={
+                <button
+                  class="btn btn-ghost btn-sm"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    deviceQuery.refetch();
+                  }}
+                >
+                  <span class="material-icons text-sm">refresh</span>
+                </button>
+              }
+              formStore={formStore}
+              selectProps={props}
+              label="Flash Disk"
+              value={String(field.value)}
+              error={field.error}
+              required
+              options={
+                <>
+                  <option value="" disabled>
+                    Select a disk where the installer will be flashed to
+                  </option>
+
+                  <For each={deviceQuery.data?.blockdevices}>
+                    {(device) => (
+                      <option value={device.path}>
+                        {device.path} -- {device.size} bytes
+                      </option>
+                    )}
+                  </For>
+                </>
+              }
+            />
+          )}
+        </Field>
 
         {/* WiFi Networks */}
-        <div class="mb-4">
+        <div class="my-4 py-2">
           <h3 class="mb-2 text-lg font-semibold">WiFi Networks</h3>
+          <span class="mb-2 text-sm">Add preconfigured networks</span>
           <For each={wifiNetworks()}>
             {(network, index) => (
-              <div class="mb-2 flex gap-2">
+              <div class="mb-2 grid grid-cols-7 gap-2">
                 <Field
                   name={`wifi.${index()}.ssid`}
                   validate={[required("SSID is required")]}
@@ -323,6 +261,7 @@ export const Flash = () => {
                       label="SSID"
                       value={field.value ?? ""}
                       error={field.error}
+                      class="col-span-3"
                       required
                     />
                   )}
@@ -332,7 +271,7 @@ export const Flash = () => {
                   validate={[required("Password is required")]}
                 >
                   {(field, props) => (
-                    <div class="relative w-full">
+                    <div class="relative col-span-3 w-full">
                       <TextInput
                         formStore={formStore}
                         inputProps={props}
@@ -342,11 +281,12 @@ export const Flash = () => {
                         label="Password"
                         value={field.value ?? ""}
                         error={field.error}
-                        required
+                        adornment={{
-                      />
+                          position: "end",
+                          content: (
                             <button
                               type="button"
-                        class="absolute inset-y-14 right-0 flex items-center pr-3 text-sm leading-5"
+                              class="flex justify-center opacity-70"
                               onClick={() => togglePasswordVisibility(index())}
                             >
                               <span class="material-icons">
@@ -355,30 +295,146 @@ export const Flash = () => {
                                   : "visibility"}
                               </span>
                             </button>
+                          ),
+                        }}
+                        required
+                      />
                     </div>
                   )}
                 </Field>
+                <div class="col-span-1 self-end">
                   <button
                     type="button"
-                  class="btn btn-error"
+                    class="btn btn-ghost "
                     onClick={() => removeWifiNetwork(index())}
                   >
                     <span class="material-icons">delete</span>
                   </button>
                 </div>
+              </div>
             )}
           </For>
+          <div class="">
             <button
               type="button"
-            class="btn btn-primary"
+              class="btn btn-ghost btn-sm"
               onClick={addWifiNetwork}
             >
-            <span class="material-icons">add</span> Add WiFi Network
+              <span class="material-icons">add</span>Add WiFi Network
             </button>
           </div>
+        </div>
 
+        <div class="collapse collapse-arrow" tabindex="0">
+          <input type="checkbox" />
+          <div class="collapse-title link font-medium ">Advanced Settings</div>
+          <div class="collapse-content">
+            <Field
+              name="machine.flake"
+              validate={[required("This field is required")]}
+            >
+              {(field, props) => (
+                <>
+                  <TextInput
+                    formStore={formStore}
+                    inputProps={props}
+                    label="Source (flake URL)"
+                    value={String(field.value)}
+                    inlineLabel={
+                      <span class="material-icons">file_download</span>
+                    }
+                    error={field.error}
+                    required
+                  />
+                </>
+              )}
+            </Field>
+            <Field
+              name="machine.devicePath"
+              validate={[required("This field is required")]}
+            >
+              {(field, props) => (
+                <>
+                  <TextInput
+                    formStore={formStore}
+                    inputProps={props}
+                    label="Image Name (attribute name)"
+                    value={String(field.value)}
+                    inlineLabel={<span class="material-icons">devices</span>}
+                    error={field.error}
+                    required
+                  />
+                </>
+              )}
+            </Field>
+            <div class="my-2 py-2">
+              <span class="text-sm text-neutral-600">Source URL: </span>
+              <span class="text-sm text-neutral-600">
+                {getValue(formStore, "machine.flake") +
+                  "#" +
+                  getValue(formStore, "machine.devicePath")}
+              </span>
+            </div>
+            <Field
+              name="language"
+              validate={[required("This field is required")]}
+            >
+              {(field, props) => (
+                <>
+                  <SelectInput
+                    formStore={formStore}
+                    selectProps={props}
+                    label="Language"
+                    value={String(field.value)}
+                    error={field.error}
+                    required
+                    options={
+                      <>
+                        <option value={"en_US.UTF-8"}>{"en_US.UTF-8"}</option>
+                        <For each={langQuery.data}>
+                          {(language) => (
+                            <option value={language}>{language}</option>
+                          )}
+                        </For>
+                      </>
+                    }
+                  />
+                </>
+              )}
+            </Field>
+
+            <Field
+              name="keymap"
+              validate={[required("This field is required")]}
+            >
+              {(field, props) => (
+                <>
+                  <SelectInput
+                    formStore={formStore}
+                    selectProps={props}
+                    label="Keymap"
+                    value={String(field.value)}
+                    error={field.error}
+                    required
+                    options={
+                      <>
+                        <option value={"en"}>{"en"}</option>
+                        <For each={keymapQuery.data}>
+                          {(keymap) => <option value={keymap}>{keymap}</option>}
+                        </For>
+                      </>
+                    }
+                  />
+                </>
+              )}
+            </Field>
+          </div>
+        </div>
+
+        <hr></hr>
+        <div class="mt-2 flex justify-end pt-2">
           <button
-          class="btn btn-error"
+            class="btn btn-error self-end"
             type="submit"
             disabled={formStore.submitting}
           >
@@ -389,6 +445,7 @@ export const Flash = () => {
             )}
             {formStore.submitting ? "Flashing..." : "Flash Installer"}
           </button>
+        </div>
       </Form>
     </div>
   );