chore(web): workflow property ordering (#29261)

* chore(web): workflow property ordering

* chore(web): extract schema property sorting to method

packages/plugin-core/manifest.json

@@ -278,7 +278,9 @@
             "title": "Album IDs",
             "array": true,
             "description": "Target album IDs",
-            "uiHint": "AlbumId"
+            "uiHint": {
+              "type": "AlbumId"
+            }
           },
           "albumName": {
             "type": "string",
@@ -368,14 +370,20 @@
             "type": "string",
             "title": "Album ID",
             "description": "Target album ID",
-            "uiHint": "AlbumId"
+            "uiHint": {
+              "type": "AlbumId",
+              "order": 1
+            }
           },
           "albumIds": {
             "type": "string",
             "title": "Album IDs",
             "description": "Target album IDs",
             "array": true,
-            "uiHint": "AlbumId"
+            "uiHint": {
+              "type": "AlbumId",
+              "order": 2
+            }
           }
         }
       }

server/src/dtos/json-schema.dto.ts

@@ -14,7 +14,12 @@ const JsonSchemaPropertySchema = z
     enum: z.array(z.string()).optional().describe('Valid choices for enum types'),
     array: z.boolean().optional().describe('Type is an array type'),
     required: z.array(z.string()).optional().describe('A list of required properties'),
-    uiHint: z.string().optional(),
+    uiHint: z
+      .object({
+        type: z.string().optional(),
+        order: z.int().optional(),
+      })
+      .optional(),
     get properties() {
       return z.record(z.string(), JsonSchemaPropertySchema).optional();
     },

web/src/lib/components/SchemaConfiguration.svelte

@@ -51,6 +51,8 @@
   };
 
   const setUiHintValue = (values: string[]) => setValue(schema.array ? values : values[0]);
+  const getSchemaProperties = (schema: JSONSchemaProperty) =>
+    Object.entries(schema.properties ?? {}).sort((a, b) => (a[1].uiHint?.order ?? 0) - (b[1].uiHint?.order ?? 0));
 
   const getBoolean = (defaultValue = false) => getValue<boolean>(defaultValue);
   const getString = () => getValue<string>();
@@ -72,11 +74,11 @@
     </div>
   {/if}
   <div class="flex flex-col gap-4 {root ? '' : 'border-l-4 border-gray-200 ps-2'}">
-    {#each Object.entries(schema.properties ?? {}) as [childKey, childSchema] (childKey)}
+    {#each getSchemaProperties(schema) as [childKey, childSchema] (childKey)}
       <Self schema={childSchema} key={childKey} bind:config={getValue, setValue} />
     {/each}
   </div>
-{:else if schema.uiHint === 'AlbumId'}
+{:else if schema.uiHint?.type === 'AlbumId'}
   <SchemaAlbumPicker {label} {description} array={schema.array} bind:albumIds={getUiHintValue, setUiHintValue} />
 {:else if schema.enum && schema.array}
   <Field {label} {description}>

web/src/lib/types.ts

@@ -96,7 +96,10 @@ export type JSONSchemaProperty = {
   array?: boolean;
   properties?: Record<string, JSONSchemaProperty>;
   required?: string[];
-  uiHint?: 'AlbumId' | 'AssetId' | 'PersonId';
+  uiHint?: {
+    type?: 'AlbumId' | 'AssetId' | 'PersonId';
+    order?: number;
+  };
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any

web/src/routes/(user)/workflows/[workflowId]/WorkflowStepCard.svelte

@@ -55,7 +55,7 @@
   );
   const isGhost = $derived(step.id === 'ghost');
 
-  const getUiHint = (key: string) => schema?.properties?.[key]?.uiHint;
+  const getUiHint = (key: string) => schema?.properties?.[key]?.uiHint?.type;
   const toIds = (value: unknown): string[] => (Array.isArray(value) ? value.map(String) : [String(value)]);
   let dragImage = $state<Element>();
   let isDropTarget = $state(false);