Merge pull request 'Add vars step to UI' (#2710) from hsjobeki/clan-core:hsjobeki-main into main

2025-01-10 12:15:33 +00:00
parent b02dc42b0a a3f6fb21c8
commit aa762a7301
7 changed files with 463 additions and 313 deletions
--- a/pkgs/webview-ui/app/src/Form/fields/Select.tsx
+++ b/pkgs/webview-ui/app/src/Form/fields/Select.tsx
@@ -5,6 +5,7 @@ import {
  type JSX,
  For,
  createMemo,
+  Accessor,
 } from "solid-js";
 import { Portal } from "solid-js/web";
 import { useFloating } from "../base";
@@ -46,11 +47,12 @@ interface SelectInputpProps {
  placeholder?: string;
  multiple?: boolean;
  loading?: boolean;
-  dialogContextId?: string;
+  portalRef?: Accessor<HTMLElement | null>;
 }

 export function SelectInput(props: SelectInputpProps) {
-  const dialogContext = useContext(props.dialogContextId);
+  const dialogContext = (dialogContextId?: string) =>
+    useContext(dialogContextId);

  const _id = createUniqueId();

@@ -228,7 +230,11 @@ export function SelectInput(props: SelectInputpProps) {
        }
      />

-      <Portal mount={dialogContext.contentRef?.() || document.body}>
+      <Portal
+        mount={
+          props.portalRef ? props.portalRef() || document.body : document.body
+        }
+      >
        <div
          id={_id}
          popover
--- a/pkgs/webview-ui/app/src/components/modal/index.tsx
+++ b/pkgs/webview-ui/app/src/components/modal/index.tsx
@@ -28,11 +28,20 @@ export const Modal = (props: ModalProps) => {

  const handleMouseMove = (e: MouseEvent) => {
    if (dragging()) {
-      const newTop = e.clientY - startOffset().y;
-      const newLeft = e.clientX - startOffset().x;
+      let newTop = e.clientY - startOffset().y;
+      let newLeft = e.clientX - startOffset().x;

+      if (newTop < 0) {
+        newTop = 0;
+      }
+      if (newLeft < 0) {
+        newLeft = 0;
+      }
      dialogRef.style.top = `${newTop}px`;
      dialogRef.style.left = `${newLeft}px`;
+
+      // dialogRef.style.maxHeight = `calc(100vh - ${newTop}px - 2rem)`;
+      // dialogRef.style.maxHeight = `calc(100vh - ${newTop}px - 2rem)`;
    }
  };

@@ -53,7 +62,7 @@ export const Modal = (props: ModalProps) => {
          )}
          classList={{
            "!cursor-grabbing": dragging(),
-            [cx("scale-105 transition-transform")]: dragging(),
+            [cx("scale-[101%] transition-transform")]: dragging(),
          }}
          ref={(el) => {
            dialogRef = el;
@@ -112,7 +121,10 @@ export const Modal = (props: ModalProps) => {
              />
            </div>
          </Dialog.Label>
-          <Dialog.Description class="flex flex-col bg-def-1" as="div">
+          <Dialog.Description
+            class="flex max-h-[90vh] flex-col overflow-y-hidden bg-def-1"
+            as="div"
+          >
            {props.children}
          </Dialog.Description>
        </Dialog.Content>
--- a/pkgs/webview-ui/app/src/routes/machines/details.tsx
+++ b/pkgs/webview-ui/app/src/routes/machines/details.tsx
@@ -25,7 +25,7 @@ import { HardwareValues, HWStep } from "./install/hardware-step";
 import { DiskStep, DiskValues } from "./install/disk-step";
 import { SummaryStep } from "./install/summary-step";
 import cx from "classnames";
-import { SectionHeader } from "@/src/components/group";
+import { VarsStep, VarsValues } from "./install/vars-step";

 type MachineFormInterface = MachineData & {
  sshKey?: File;
@@ -37,7 +37,8 @@ type MachineData = SuccessData<"get_inventory_machine_details">;
 const steps: Record<StepIdx, string> = {
  "1": "Hardware detection",
  "2": "Disk schema",
-  "3": "Installation",
+  "3": "Credentials & Data",
+  "4": "Installation",
 };

 type StepIdx = keyof AllStepsValues;
@@ -45,7 +46,8 @@ type StepIdx = keyof AllStepsValues;
 export interface AllStepsValues extends FieldValues {
  "1": HardwareValues;
  "2": DiskValues;
-  "3": NonNullable<unknown>;
+  "3": VarsValues;
+  "4": NonNullable<unknown>;
 }

 const LoadingBar = () => (
@@ -190,7 +192,7 @@ const InstallMachine = (props: InstallMachineProps) => {
  };

  const Footer = () => (
-    <div class="flex justify-between">
+    <div class="flex justify-between p-4">
      <Button
        startIcon={<Icon icon="ArrowLeft" />}
        variant="light"
@@ -214,7 +216,10 @@ const InstallMachine = (props: InstallMachineProps) => {
  return (
    <Switch
      fallback={
-        <Form onSubmit={handleInstall}>
+        <Form
+          onSubmit={handleInstall}
+          class="relative top-0 flex h-full flex-col gap-0"
+        >
          {/* Register each step as form field */}
          {/* @ts-expect-error: object type is not statically supported */}
          <Field name="1">{(field, fieldProps) => <></>}</Field>
@@ -269,11 +274,7 @@ const InstallMachine = (props: InstallMachineProps) => {
              )}
            </For>
          </div>
-
-          <div class="flex flex-col gap-6 p-6">
-            <Switch
-              fallback={"Undefined content. This Step seems to not exist."}
-            >
+          <Switch fallback={"Undefined content. This Step seems to not exist."}>
            <Match when={step() === "1"}>
              <HWStep
                // @ts-expect-error: This cannot be undefined in this context.
@@ -315,6 +316,23 @@ const InstallMachine = (props: InstallMachineProps) => {
              />
            </Match>
            <Match when={step() === "3"}>
+              <VarsStep
+                // @ts-expect-error: This cannot be undefined in this context.
+                machine_id={props.name}
+                // @ts-expect-error: This cannot be undefined in this context.
+                dir={activeURI()}
+                footer={<Footer />}
+                handleNext={(data) => {
+                  // const prev = getValue(formStore, "2");
+                  // setValue(formStore, "2", { ...prev, ...data });
+                  handleNext();
+                }}
+                initial={{
+                  ...getValue(formStore, "3"),
+                }}
+              />
+            </Match>
+            <Match when={step() === "4"}>
              <SummaryStep
                // @ts-expect-error: This cannot be undefined in this context.
                machine_id={props.name}
@@ -324,7 +342,7 @@ const InstallMachine = (props: InstallMachineProps) => {
                // @ts-expect-error: This cannot be known.
                initial={getValues(formStore)}
                footer={
-                    <div class="flex justify-between">
+                  <div class="flex justify-between p-4">
                    <Button
                      startIcon={<Icon icon="ArrowLeft" />}
                      variant="light"
@@ -340,7 +358,6 @@ const InstallMachine = (props: InstallMachineProps) => {
              />
            </Match>
          </Switch>
-          </div>
        </Form>
      }
    >
--- a/pkgs/webview-ui/app/src/routes/machines/install/disk-step.tsx
+++ b/pkgs/webview-ui/app/src/routes/machines/install/disk-step.tsx
@@ -11,6 +11,7 @@ import { StepProps } from "./hardware-step";
 import { SelectInput } from "@/src/Form/fields/Select";
 import { Typography } from "@/src/components/Typography";
 import { Group } from "@/src/components/group";
+import { useContext } from "corvu/dialog";

 export interface DiskValues extends FieldValues {
  placeholders: {
@@ -44,14 +45,22 @@ export const DiskStep = (props: StepProps<DiskValues>) => {
    },
  }));

+  const modalContext = useContext();
+
  return (
+    <>
      <Form
        onSubmit={handleSubmit}
        class="flex flex-col gap-6"
        noValidate={false}
      >
+        <div class="max-h-[calc(100vh-20rem)] overflow-y-scroll">
+          <div class="flex h-full flex-col gap-6 p-4">
            <span class="flex flex-col gap-4">
-        <Field name="schema" validate={required("Schema must be provided")}>
+              <Field
+                name="schema"
+                validate={required("Schema must be provided")}
+              >
                {(field, fieldProps) => (
                  <>
                    <Typography
@@ -60,7 +69,9 @@ export const DiskStep = (props: StepProps<DiskValues>) => {
                      weight="bold"
                      class="capitalize"
                    >
-                {(field.value || "No schema selected").split("-").join(" ")}
+                      {(field.value || "No schema selected")
+                        .split("-")
+                        .join(" ")}
                    </Typography>
                    <Typography
                      hierarchy="body"
@@ -75,7 +86,8 @@ export const DiskStep = (props: StepProps<DiskValues>) => {
              </Field>
            </span>
            <Group>
-        {props.initial?.initialized && "Disk has been initialized already"}
+              {props.initial?.initialized &&
+                "Disk has been initialized already"}
              <Field
                name="placeholders.mainDisk"
                validate={
@@ -100,11 +112,15 @@ export const DiskStep = (props: StepProps<DiskValues>) => {
                    placeholder="Select a disk"
                    selectProps={fieldProps}
                    required={!props.initial?.initialized}
+                    portalRef={modalContext.contentRef}
                  />
                )}
              </Field>
            </Group>
+          </div>
+        </div>
        {props.footer}
      </Form>
+    </>
  );
 };
--- a/pkgs/webview-ui/app/src/routes/machines/install/hardware-step.tsx
+++ b/pkgs/webview-ui/app/src/routes/machines/install/hardware-step.tsx
@@ -105,6 +105,8 @@ export const HWStep = (props: StepProps<HardwareValues>) => {

  return (
    <Form onSubmit={handleSubmit} class="flex flex-col gap-6">
+      <div class="max-h-[calc(100vh-20rem)] overflow-y-scroll">
+        <div class="flex h-full flex-col gap-6 p-4">
          <Group>
            <Field name="target" validate={required("Target must be provided")}>
              {(field, fieldProps) => (
@@ -200,6 +202,8 @@ export const HWStep = (props: StepProps<HardwareValues>) => {
              )}
            </Field>
          </Group>
+        </div>
+      </div>
      {props.footer}
    </Form>
  );
--- a/pkgs/webview-ui/app/src/routes/machines/install/summary-step.tsx
+++ b/pkgs/webview-ui/app/src/routes/machines/install/summary-step.tsx
@@ -12,6 +12,8 @@ export const SummaryStep = (props: StepProps<AllStepsValues>) => {
  const diskValues = () => props.initial?.["2"];
  return (
    <>
+      <div class="max-h-[calc(100vh-20rem)] overflow-y-scroll">
+        <div class="flex h-full flex-col gap-6 p-4">
          <Section>
            <Typography
              hierarchy="label"
@@ -79,7 +81,12 @@ export const SummaryStep = (props: StepProps<AllStepsValues>) => {
            variant="danger"
            headline={
              <span>
-            <Typography hierarchy="body" size="s" weight="bold" color="inherit">
+                <Typography
+                  hierarchy="body"
+                  size="s"
+                  weight="bold"
+                  color="inherit"
+                >
                  Setup your device.
                </Typography>
                <Typography
@@ -93,6 +100,8 @@ export const SummaryStep = (props: StepProps<AllStepsValues>) => {
              </span>
            }
          />
+        </div>
+      </div>
      {props.footer}
    </>
  );
--- a/pkgs/webview-ui/app/src/routes/machines/install/vars-step.tsx
+++ b/pkgs/webview-ui/app/src/routes/machines/install/vars-step.tsx
@@ -0,0 +1,86 @@
+import { callApi } from "@/src/api";
+import {
+  createForm,
+  SubmitHandler,
+  validate,
+  FieldValues,
+} from "@modular-forms/solid";
+import { createQuery } from "@tanstack/solid-query";
+import { StepProps } from "./hardware-step";
+import { Typography } from "@/src/components/Typography";
+import { Group } from "@/src/components/group";
+import { For, Match, Show, Switch } from "solid-js";
+
+export type VarsValues = FieldValues & Record<string, string>;
+
+export const VarsStep = (props: StepProps<VarsValues>) => {
+  const [formStore, { Form, Field }] = createForm<VarsValues>({
+    initialValues: { ...props.initial, schema: "single-disk" },
+  });
+
+  const handleSubmit: SubmitHandler<VarsValues> = async (values, event) => {
+    console.log("Submit Disk", { values });
+    const valid = await validate(formStore);
+    console.log("Valid", valid);
+    if (!valid) return;
+    props.handleNext(values);
+  };
+
+  const generatorsQuery = createQuery(() => ({
+    queryKey: [props.dir, props.machine_id, "generators"],
+    queryFn: async () => {
+      const result = await callApi("get_generators", {
+        base_dir: props.dir,
+        machine_name: props.machine_id,
+      });
+      if (result.status === "error") throw new Error("Failed to fetch data");
+      return result.data;
+    },
+  }));
+
+  return (
+    <Form
+      onSubmit={handleSubmit}
+      class="flex h-full flex-col gap-6"
+      noValidate={false}
+    >
+      <div class="max-h-[calc(100vh-20rem)] overflow-y-scroll">
+        <div class="flex h-full flex-col gap-6 p-4">
+          <Switch>
+            <Match when={generatorsQuery.isLoading}>Loading ...</Match>
+            <Match when={generatorsQuery.data}>
+              {(generators) => (
+                <For each={generators()}>
+                  {(generator) => (
+                    <Group>
+                      <Typography hierarchy="label" size="default">
+                        {generator.name}
+                      </Typography>
+                      <div>
+                        Bound to module (shared):{" "}
+                        {generator.share ? "True" : "False"}
+                      </div>
+                      <For each={generator.prompts}>
+                        {(f) => (
+                          <Group>
+                            <Typography hierarchy="label" size="s">
+                              {!f.previous_value ? "Required" : "Optional"}
+                            </Typography>
+                            <Typography hierarchy="label" size="s">
+                              {f.name}
+                            </Typography>
+                          </Group>
+                        )}
+                      </For>
+                    </Group>
+                  )}
+                </For>
+              )}
+            </Match>
+          </Switch>
+        </div>
+      </div>
+      <Show when={generatorsQuery.isFetched}>{props.footer}</Show>
+    </Form>
+  );
+};