Merge pull request 'ui/clan: wire up service create' (#5016) from search into main

Reviewed-on: https://git.clan.lol/clan/clan-core/pulls/5016

pkgs/clan-app/ui/src/components/Search/TagSelect.tsx

@@ -55,7 +55,6 @@ export function TagSelect<T extends { value: unknown }>(
       >
         <Combobox.Control<T> aria-label="Fruits">
           {(state) => {
-            console.log("combobox state selected", state.selectedOptions());
             return (
               <Combobox.Trigger
                 tabIndex={1}

pkgs/clan-app/ui/src/routes/Clan/Clan.tsx

@@ -36,6 +36,11 @@ import { createForm, FieldValues, reset } from "@modular-forms/solid";
 import { Sidebar } from "@/src/components/Sidebar/Sidebar";
 import { UseQueryResult } from "@tanstack/solid-query";
 import { ListClansModal } from "@/src/modals/ListClansModal/ListClansModal";
+import {
+  InventoryInstance,
+  ServiceWorkflow,
+} from "@/src/workflows/Service/Service";
+import { useApiClient } from "@/src/hooks/ApiClient";
 
 interface ClanContextProps {
   clanURI: string;
@@ -179,7 +184,10 @@ const ClanSceneController = (props: RouteSectionProps) => {
 
   const navigate = useNavigate();
 
-  const [dialogHandlers, setDialogHandlers] = createSignal<{
+  const [showService, setShowService] = createSignal(false);
+
+  const [showModal, setShowModal] = createSignal(false);
+  const [currentPromise, setCurrentPromise] = createSignal<{
     resolve: ({ id }: { id: string }) => void;
     reject: (err: unknown) => void;
   } | null>(null);
@@ -187,7 +195,15 @@ const ClanSceneController = (props: RouteSectionProps) => {
   const onCreate = async (): Promise<{ id: string }> => {
     return new Promise((resolve, reject) => {
       setShowModal(true);
-      setDialogHandlers({ resolve, reject });
+      setCurrentPromise({ resolve, reject });
+    });
+  };
+
+  const onAddService = async (): Promise<{ id: string }> => {
+    return new Promise((resolve, reject) => {
+      setShowService(true);
+      console.log("setting current promise");
+      setCurrentPromise({ resolve, reject });
     });
   };
 
@@ -217,8 +233,6 @@ const ClanSceneController = (props: RouteSectionProps) => {
     return { id: values.name };
   };
 
-  const [showModal, setShowModal] = createSignal(false);
-
   const [loadingError, setLoadingError] = createSignal<
     { title: string; description: string } | undefined
   >();
@@ -265,6 +279,26 @@ const ClanSceneController = (props: RouteSectionProps) => {
     }),
   );
 
+  const client = useApiClient();
+  const handleSubmitService = async (instance: InventoryInstance) => {
+    console.log("Create Instance", instance);
+    const call = client.fetch("create_service_instance", {
+      flake: {
+        identifier: ctx.clanURI,
+      },
+      module_ref: instance.module,
+      roles: instance.roles,
+    });
+    const result = await call.result;
+
+    if (result.status === "error") {
+      console.error("Error creating service instance", result.errors);
+    }
+    //
+    currentPromise()?.resolve({ id: "0" });
+    setShowService(false);
+  };
+
   return (
     <>
       <Show when={loadingError()}>
@@ -274,15 +308,15 @@ const ClanSceneController = (props: RouteSectionProps) => {
         <MockCreateMachine
           onClose={() => {
             setShowModal(false);
-            dialogHandlers()?.reject(new Error("User cancelled"));
+            currentPromise()?.reject(new Error("User cancelled"));
           }}
           onSubmit={async (values) => {
             try {
               const result = await sendCreate(values);
-              dialogHandlers()?.resolve(result);
+              currentPromise()?.resolve(result);
               setShowModal(false);
             } catch (err) {
-              dialogHandlers()?.reject(err);
+              currentPromise()?.reject(err);
               setShowModal(false);
             }
           }}
@@ -297,10 +331,22 @@ const ClanSceneController = (props: RouteSectionProps) => {
       </div>
 
       <CubeScene
+        onAddService={onAddService}
         selectedIds={selectedIds}
         onSelect={onMachineSelect}
         isLoading={ctx.isLoading()}
         cubesQuery={ctx.machinesQuery}
+        toolbarPopup={
+          <Show when={showService()}>
+            <ServiceWorkflow
+              handleSubmit={handleSubmitService}
+              onClose={() => {
+                setShowService(false);
+                currentPromise()?.resolve({ id: "0" });
+              }}
+            />
+          </Show>
+        }
         onCreate={onCreate}
         clanURI={ctx.clanURI}
         sceneStore={() => store.sceneData?.[ctx.clanURI]}

pkgs/clan-app/ui/src/scene/cubes.css

@@ -4,6 +4,8 @@
   cursor: pointer;
 }
 
+/* <div class="absolute bottom-4 left-1/2 flex -translate-x-1/2 flex-col items-center">
+        <Show when={show()}> */
 .toolbar-container {
   @apply absolute bottom-10 z-10 w-full;
   @apply flex justify-center items-center;

pkgs/clan-app/ui/src/scene/cubes.tsx

@@ -1,4 +1,11 @@
-import { createSignal, createEffect, onCleanup, onMount, on } from "solid-js";
+import {
+  createSignal,
+  createEffect,
+  onCleanup,
+  onMount,
+  on,
+  JSX,
+} from "solid-js";
 import "./cubes.css";
 
 import * as THREE from "three";
@@ -34,12 +41,14 @@ function garbageCollectGroup(group: THREE.Group) {
 export function CubeScene(props: {
   cubesQuery: MachinesQueryResult;
   onCreate: () => Promise<{ id: string }>;
+  onAddService: () => Promise<{ id: string }>;
   selectedIds: Accessor<Set<string>>;
   onSelect: (v: Set<string>) => void;
   sceneStore: Accessor<SceneData>;
   setMachinePos: (machineId: string, pos: [number, number] | null) => void;
   isLoading: boolean;
   clanURI: string;
+  toolbarPopup?: JSX.Element;
 }) {
   let container: HTMLDivElement;
   let scene: THREE.Scene;
@@ -213,7 +222,7 @@ export function CubeScene(props: {
     controls = new MapControls(camera, renderer.domElement);
     controls.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled
     controls.mouseButtons.RIGHT = null;
-    controls.enableRotate = false;
+    // controls.enableRotate = false;
     controls.minZoom = 1.2;
     controls.maxZoom = 3.5;
     controls.addEventListener("change", () => {
@@ -543,6 +552,9 @@ export function CubeScene(props: {
     <>
       <div class="cubes-scene-container" ref={(el) => (container = el)} />
       <div class="toolbar-container">
+        <div class="absolute bottom-full left-1/2 mb-2 -translate-x-1/2">
+          {props.toolbarPopup}
+        </div>
         <Toolbar>
           <ToolbarButton
             description="Select machine"
@@ -563,7 +575,8 @@ export function CubeScene(props: {
           <ToolbarButton
             description="Add new Service"
             name="modules"
-            icon="Modules"
+            icon="Services"
+            onClick={props.onAddService}
           />
           <ToolbarButton
             icon="Reload"

pkgs/clan-app/ui/src/workflows/Service/Service.stories.tsx

@@ -166,6 +166,9 @@ export const Default: Story = {
 export const SelectRoleMembers: Story = {
   render: () => (
     <ServiceWorkflow
+      handleSubmit={(instance) => {
+        console.log("Submitted instance:", instance);
+      }}
       initialStep="select:members"
       initialStore={{
         currentRole: "peer",

pkgs/clan-app/ui/src/workflows/Service/Service.tsx

@@ -18,8 +18,6 @@ import { Search } from "@/src/components/Search/Search";
 import Icon from "@/src/components/Icon/Icon";
 import { Combobox } from "@kobalte/core/combobox";
 import { Typography } from "@/src/components/Typography/Typography";
-import { Toolbar } from "@/src/components/Toolbar/Toolbar";
-import { ToolbarButton } from "@/src/components/Toolbar/ToolbarButton";
 import { TagSelect } from "@/src/components/Search/TagSelect";
 import { Tag } from "@/src/components/Tag/Tag";
 import { createForm, FieldValues, setValue } from "@modular-forms/solid";
@@ -145,7 +143,6 @@ const ConfigureService = () => {
   const [store, set] = getStepStore<ServiceStoreType>(stepper);
 
   const [formStore, { Form, Field }] = createForm<RolesForm>({
-    // initialValues: props.initialValues,
     initialValues: {
       instanceName: "backup-instance-1",
     },
@@ -157,7 +154,28 @@ const ConfigureService = () => {
   const options = useOptions(tagsQuery, machinesQuery);
 
   const handleSubmit = (values: RolesForm) => {
-    console.log("Create service submitted with values:", values);
+    const roles: Record<string, RoleType> = Object.fromEntries(
+      Object.entries(store.roles).map(([key, value]) => [
+        key,
+        {
+          machines: Object.fromEntries(
+            value.filter((v) => v.type === "machine").map((v) => [v.label, {}]),
+          ),
+          tags: Object.fromEntries(
+            value.filter((v) => v.type === "tag").map((v) => [v.label, {}]),
+          ),
+        },
+      ]),
+    );
+
+    store.handleSubmit({
+      name: values.instanceName,
+      module: {
+        name: store.module.name,
+        input: store.module.input,
+      },
+      roles,
+    });
   };
 
   return (
@@ -185,13 +203,19 @@ const ConfigureService = () => {
             )}
           </Field>
         </div>
-        <Button icon="Close" color="primary" ghost size="s" class="ml-auto" />
+        <Button
+          icon="Close"
+          color="primary"
+          ghost
+          size="s"
+          class="ml-auto"
+          onClick={store.close}
+        />
       </div>
       <div class={styles.content}>
         <For each={Object.keys(store.module.raw?.info.roles || {})}>
           {(role) => {
             const values = store.roles?.[role] || [];
-            console.log("Role members:", role, values, "from", options());
             return (
               <TagSelect<TagType>
                 label={role}
@@ -221,7 +245,9 @@ const ConfigureService = () => {
         </For>
       </div>
       <div class={cx(styles.footer, styles.backgroundAlt)}>
-        <Button hierarchy="secondary">Add Service</Button>
+        <Button hierarchy="secondary" type="submit">
+          Add Service
+        </Button>
       </div>
     </Form>
   );
@@ -269,8 +295,6 @@ const ConfigureRole = () => {
       set("roles", {});
     }
     set("roles", (r) => ({ ...r, [store.currentRole as string]: members }));
-    console.log("Roles form submitted ", members);
-
     stepper.setActiveStep("view:members");
   };
 
@@ -381,6 +405,21 @@ const steps = [
 
 export type ServiceSteps = typeof steps;
 
+// TODO: Ideally we would impot this from a backend model package
+export interface InventoryInstance {
+  name: string;
+  module: {
+    name: string;
+    input: string;
+  };
+  roles: Record<string, RoleType>;
+}
+
+interface RoleType {
+  machines: Record<string, { settings?: unknown }>;
+  tags: Record<string, unknown>;
+}
+
 export interface ServiceStoreType {
   module: {
     name: string;
@@ -390,45 +429,36 @@ export interface ServiceStoreType {
   roles: Record<string, TagType[]>;
   currentRole?: string;
   close: () => void;
+  handleSubmit: (values: InventoryInstance) => void;
 }
 
 interface ServiceWorkflowProps {
   initialStep?: ServiceSteps[number]["id"];
   initialStore?: Partial<ServiceStoreType>;
+  onClose?: () => void;
+  handleSubmit: (values: InventoryInstance) => void;
 }
+
 export const ServiceWorkflow = (props: ServiceWorkflowProps) => {
-  const [show, setShow] = createSignal(false);
   const stepper = createStepper(
     { steps },
     {
       initialStep: props.initialStep || "select:service",
       initialStoreData: {
         ...props.initialStore,
-        close: () => setShow(false),
+        close: () => props.onClose?.(),
+        handleSubmit: props.handleSubmit,
       } satisfies Partial<ServiceStoreType>,
     },
   );
   return (
-    <>
+    <div
-      <div class="absolute bottom-4 left-1/2 flex -translate-x-1/2 flex-col items-center">
+      id="add-service"
-        <Show when={show()}>
+      class="absolute bottom-full left-1/2 mb-2 -translate-x-1/2"
-          <div class="absolute bottom-full left-1/2 mb-2 -translate-x-1/2">
+    >
-            <StepperProvider stepper={stepper}>
+      <StepperProvider stepper={stepper}>
-              <div class="w-[30rem]">{stepper.currentStep().content()}</div>
+        <div class="w-[30rem]">{stepper.currentStep().content()}</div>
-            </StepperProvider>
+      </StepperProvider>
-          </div>
+    </div>
-        </Show>
-        <div class="flex justify-center space-x-4">
-          <Toolbar>
-            <ToolbarButton
-              onClick={() => setShow(!show())}
-              description="Add new Service"
-              name="modules"
-              icon="Modules"
-            />
-          </Toolbar>
-        </div>
-      </div>
-    </>
   );
 };