feat(ui): integrate tags info from field schema into tags section

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

@@ -1,9 +1,9 @@
-import { FieldSchema } from "@/src/hooks/queries";
+import { SuccessData } from "@/src/hooks/api";
 import { Maybe } from "@modular-forms/solid";
 
-export const tooltipText = <T extends object, K extends keyof T>(
-  name: K,
-  schema: FieldSchema<T>,
+export const tooltipText = (
+  name: string,
+  schema: SuccessData<"get_machine_fields_schema">,
   staticValue: Maybe<string> = undefined,
 ): Maybe<string> => {
   const entry = schema[name];

pkgs/clan-app/ui/src/hooks/queries.ts

@@ -6,13 +6,6 @@ import { useApiClient } from "./ApiClient";
 export type ClanDetails = SuccessData<"get_clan_details">;
 export type ClanDetailsWithURI = ClanDetails & { uri: string };
 
-export type FieldSchema<T> = {
-  [K in keyof T]: {
-    readonly: boolean;
-    reason?: string;
-  };
-};
-
 export type Tags = SuccessData<"list_tags">;
 export type Machine = SuccessData<"get_machine">;
 export type ListMachines = SuccessData<"list_machines">;
@@ -21,7 +14,7 @@ export type MachineDetails = SuccessData<"get_machine_details">;
 export interface MachineDetail {
   tags: Tags;
   machine: Machine;
-  fieldsSchema: FieldSchema<Machine>;
+  fieldsSchema: SuccessData<"get_machine_fields_schema">;
 }
 
 export type MachinesQueryResult = UseQueryResult<ListMachines>;

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

@@ -4,8 +4,7 @@ import { MachineDetail } from "@/src/hooks/queries";
 import { SidebarSectionForm } from "@/src/components/Sidebar/SidebarSectionForm";
 import { pick } from "@/src/util";
 import { UseQueryResult } from "@tanstack/solid-query";
-import { MachineTag, MachineTags } from "@/src/components/Form/MachineTags";
-import { machineNameParam } from "@/src/hooks/clan";
+import { MachineTags } from "@/src/components/Form/MachineTags";
 
 const schema = v.object({
   tags: v.pipe(v.optional(v.array(v.string()))),
@@ -31,26 +30,24 @@ export const SectionTags = (props: SectionTags) => {
     return pick(machineQuery.data.machine, ["tags"]) satisfies FormValues;
   };
 
-  const readonlyOptions = () => {
+  const options = () => {
     if (!machineQuery.isSuccess) {
-      return [];
+      return [[], []];
     }
 
-    const result: string[] = ["all"];
+    // these are static values or values which have been configured in nix and
+    // cannot be modified in the UI
+    const readonlyOptions =
+      machineQuery.data.fieldsSchema.tags?.readonly_members || [];
 
-    if (machineQuery.data.machine.machineClass) {
-      result.push(machineQuery.data.machine.machineClass);
-    }
+    // filter out the read-only options from the superset of clan-wide options
+    const readonlySet = new Set(readonlyOptions);
 
-    return result;
-  };
+    const defaultOptions = (machineQuery.data.tags.options || []).filter(
+      (tag) => !readonlySet.has(tag),
+    );
 
-  const defaultOptions = () => {
-    if (!machineQuery.isSuccess) {
-      return [];
-    }
-
-    return machineQuery.data.tags?.options ?? [];
+    return [defaultOptions, readonlyOptions];
   };
 
   return (
@@ -73,8 +70,8 @@ export const SectionTags = (props: SectionTags) => {
                   readOnly={!editing}
                   orientation="horizontal"
                   defaultValue={field.value}
-                  defaultOptions={defaultOptions()}
-                  readonlyOptions={readonlyOptions()}
+                  defaultOptions={options()[0]}
+                  readonlyOptions={options()[1]}
                   input={input}
                 />
               )}