wip

pkgs/clan-app/ui/src/components/Form/MachineTags.tsx

@@ -26,7 +26,7 @@ export type MachineTagsProps = FieldProps & {
 };
 
 // tags which are applied to all machines and cannot be removed
-const staticOptions = [{ value: "All", disabled: true }];
+const staticOptions = [{ value: "all", disabled: true }];
 
 const uniqueOptions = (options: MachineTag[]) => {
   const record: Record<string, MachineTag> = {};

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

@@ -3,6 +3,8 @@ import { SidebarPane } from "@/src/components/Sidebar/SidebarPane";
 import { navigateToClan, useClanURI, useMachineName } from "@/src/hooks/clan";
 import { Show } from "solid-js";
 import { SectionGeneral } from "./SectionGeneral";
+import { useMachineQuery } from "@/src/hooks/queries";
+import { SectionTags } from "@/src/routes/Machine/SectionTags";
 
 export const Machine = (props: RouteSectionProps) => {
   const navigate = useNavigate();
@@ -14,11 +16,15 @@ export const Machine = (props: RouteSectionProps) => {
   };
 
   const machineName = useMachineName();
+  const machineQuery = useMachineQuery(clanURI, machineName);
+
+  const sectionProps = { clanURI, machineName, machineQuery };
 
   return (
     <Show when={useMachineName()} keyed>
       <SidebarPane title={useMachineName()} onClose={onClose}>
-        <SectionGeneral />
+        <SectionGeneral {...sectionProps} />
+        <SectionTags {...sectionProps} />
       </SidebarPane>
     </Show>
   );

pkgs/clan-app/ui/src/routes/Machine/SectionGeneral.tsx

@@ -3,11 +3,12 @@ import { TextInput } from "@/src/components/Form/TextInput";
 import { Divider } from "@/src/components/Divider/Divider";
 import { TextArea } from "@/src/components/Form/TextArea";
 import { Show, splitProps } from "solid-js";
-import { useMachineQuery } from "@/src/hooks/queries";
+import { Machine, useMachineQuery } from "@/src/hooks/queries";
 import { useClanURI, useMachineName } from "@/src/hooks/clan";
 import { callApi } from "@/src/hooks/api";
 import { SidebarSectionForm } from "@/src/components/Sidebar/SidebarSectionForm";
 import { pick } from "@/src/util";
+import { UseQueryResult } from "@tanstack/solid-query";
 
 const schema = v.object({
   name: v.pipe(v.optional(v.string()), v.readonly()),
@@ -17,11 +18,15 @@ const schema = v.object({
 
 type FormValues = v.InferInput<typeof schema>;
 
-export const SectionGeneral = () => {
-  const clanURI = useClanURI();
-  const machineName = useMachineName();
+export interface SectionGeneralProps {
+  clanURI: string;
+  machineName: string;
+  machineQuery: UseQueryResult<Machine>;
+}
 
-  const machineQuery = useMachineQuery(clanURI, machineName);
+export const SectionGeneral = (props: SectionGeneralProps) => {
+
+  const machineQuery = props.machineQuery;
 
   const initialValues = () => {
     if (!machineQuery.isSuccess) {
@@ -38,9 +43,9 @@ export const SectionGeneral = () => {
   const onSubmit = async (values: FormValues) => {
     const call = callApi("set_machine", {
       machine: {
-        name: machineName,
+        name: props.machineName,
         flake: {
-          identifier: clanURI,
+          identifier: props.clanURI,
         },
       },
       update: {

pkgs/clan-app/ui/src/routes/Machine/SectionTags.tsx

@@ -0,0 +1,89 @@
+import * as v from "valibot";
+import { TextInput } from "@/src/components/Form/TextInput";
+import { Divider } from "@/src/components/Divider/Divider";
+import { TextArea } from "@/src/components/Form/TextArea";
+import { Show, splitProps } from "solid-js";
+import { Machine } from "@/src/hooks/queries";
+import { callApi } from "@/src/hooks/api";
+import { SidebarSectionForm } from "@/src/components/Sidebar/SidebarSectionForm";
+import { pick } from "@/src/util";
+import { UseQueryResult } from "@tanstack/solid-query";
+import { MachineTags } from "@/src/components/Form/MachineTags";
+
+const schema = v.object({
+  tags: v.pipe(v.optional(v.array(v.string()))),
+});
+
+type FormValues = v.InferInput<typeof schema>;
+
+export interface SectionTags {
+  clanURI: string;
+  machineName: string;
+  machineQuery: UseQueryResult<Machine>;
+}
+
+export const SectionTags = (props: SectionTags) => {
+  const machineQuery = props.machineQuery;
+
+  const initialValues = () => {
+    if (!machineQuery.isSuccess) {
+      return {};
+    }
+
+    return pick(machineQuery.data, ["tags"]) satisfies FormValues;
+  };
+
+  const onSubmit = async (values: FormValues) => {
+    console.log("submitting tags", values);
+    const call = callApi("set_machine", {
+      machine: {
+        name: props.machineName,
+        flake: {
+          identifier: props.clanURI,
+        },
+      },
+      update: {
+        ...machineQuery.data,
+        ...values,
+      },
+    });
+
+    const result = await call.result;
+    if (result.status === "error") {
+      throw new Error(result.errors[0].message);
+    }
+
+    // refresh the query
+    await machineQuery.refetch();
+  };
+
+  return (
+    <Show when={machineQuery.isSuccess}>
+      <SidebarSectionForm
+        title="Tags"
+        schema={schema}
+        onSubmit={onSubmit}
+        initialValues={initialValues()}
+      >
+        {({ editing, Field }) => (
+          <div class="flex flex-col gap-3">
+            <Field name="tags" type="string[]">
+              {(field, input) => (
+                <MachineTags
+                  {...splitProps(field, ["value"])[1]}
+                  size="s"
+                  inverted
+                  required
+                  readOnly={!editing}
+                  orientation="horizontal"
+                  defaultValue={field.value}
+                  input={input}
+                />
+              )}
+            </Field>
+          </div>
+        )}
+      </SidebarSectionForm>
+    </Show>
+  );
+};