feat(console): dynamic form dropdowns via x-cozystack-options (DynamicOptionsWidget)

CLAUDE.md

@@ -96,10 +96,8 @@ schema). The pipeline in `apps/console/src/components/SchemaForm.tsx`:
 2. `keysOrderToUiSchema` reads `spec.dashboard.keysOrder` and emits per-level
    `ui:order` arrays.
 3. A chain of `addXxxWidgets(schema, uiSchema)` walks the schema and binds
-   widgets by **field name** convention:
-   - `storageClass` → `StorageClassWidget`
-   - `backupClassName` → `BackupClassWidget`
-   - `disks[].name` → `VMDiskWidget`
+   widgets:
+   - any field carrying the `x-cozystack-options` schema keyword → `DynamicOptionsWidget`, a runtime dropdown populated from the cluster's `Option` resource (`core.cozystack.io`) keyed by the keyword's `source`; `addDynamicOptionWidgets` (`lib/dynamic-options.ts`) recurses into `properties`, array `items` and `additionalProperties`, and replaces the former field-name-bound `StorageClassWidget` / `BackupClassWidget` / `VMDiskWidget`.
    - object with `additionalProperties: <schema>` → `AdditionalPropertiesField`
    - credential-shaped fields (`password`, `*token`, `*accessKey`, …) →
      `SensitiveStringWidget` — see `lib/sensitive-fields.ts` and its tests for

apps/console/src/components/AdditionalPropertiesField.tsx

@@ -3,15 +3,24 @@ import type { FieldProps, RJSFSchema, TemplatesType } from "@rjsf/utils"
 import Form from "@rjsf/core"
 import validator from "@rjsf/validator-ajv8"
 import { customTemplates, customWidgets } from "./rjsf-templates.tsx"
+import { addDynamicOptionWidgets } from "../lib/dynamic-options.ts"
 
 export function AdditionalPropertiesField(props: FieldProps) {
   const { schema, formData, onChange, readonly, disabled, name, required } = props
   const [newKey, setNewKey] = useState("")
 
   // Get the schema for items from additionalProperties
-  const itemSchema = (schema.additionalProperties as RJSFSchema) || {}
+  const itemSchema = useMemo(
+    () => (schema.additionalProperties as RJSFSchema) || {},
+    [schema.additionalProperties],
+  )
   const keys = Object.keys(formData || {})
 
+  // The nested <Form> renders its own subtree, so it needs its own uiSchema to
+  // bind x-cozystack-options fields (e.g. nodeGroups.*.instanceType) to the
+  // DynamicOptionsWidget — the parent SchemaForm's uiSchema does not reach here.
+  const itemUiSchema = useMemo(() => addDynamicOptionWidgets(itemSchema), [itemSchema])
+
   // Create templates without submit button for nested forms
   const templatesWithoutSubmit = useMemo<Partial<TemplatesType>>(() => {
     return {
@@ -79,6 +88,7 @@ export function AdditionalPropertiesField(props: FieldProps) {
               <Form
                 tagName="div"
                 schema={itemSchema}
+                uiSchema={itemUiSchema}
                 formData={formData[key]}
                 validator={validator}
                 templates={templatesWithoutSubmit}