feat: mutate canonical drafts from workbench

web/apps/console/src/workspace/schema-form/SchemaForm.tsx

@@ -1,4 +1,4 @@
-import { useState, type FormEvent } from "react";
+import { useState, type FormEvent, type ReactNode } from "react";
 import { normalizeSchema, type FieldSource, type SchemaField } from "./schema-field.js";
 import { SchemaFieldControl } from "./SchemaFieldControl.js";
 import {
@@ -17,6 +17,8 @@ export type SchemaFormProps = {
   readonly initialSources?: FieldSources;
   readonly diagnostics?: ReadonlyArray<SchemaValueIssue>;
   readonly onSubmit?: (result: SchemaSerializationResult) => void;
+  readonly onDirtyChange?: (dirty: boolean) => void;
+  readonly renderBeforeFields?: ReactNode;
   readonly submitLabel?: string;
   readonly sourceSuggestions?: ReadonlyArray<string>;
 };
@@ -95,6 +97,8 @@ export const SchemaForm = ({
   initialSources = EMPTY_SOURCES,
   diagnostics = EMPTY_DIAGNOSTICS,
   onSubmit,
+  onDirtyChange,
+  renderBeforeFields,
   submitLabel = "Save form",
   sourceSuggestions = EMPTY_SUGGESTIONS,
 }: SchemaFormProps) => {
@@ -108,6 +112,7 @@ export const SchemaForm = ({
 
   const handleValueChange = (changedField: SchemaField, nextValue: unknown): void => {
     setValues((current: unknown) => setAtPath(current, changedField.path, nextValue));
+    onDirtyChange?.(true);
     const currentSource = sources[sourceKey(changedField)];
     if (currentSource?.mode === "literal") {
       setSources((current) => ({
@@ -118,6 +123,7 @@ export const SchemaForm = ({
   };
 
   const handleSourceChange = (changedField: SchemaField, source: FieldSource): void => {
+    onDirtyChange?.(true);
     if (source.mode === "literal") {
       setValues((current: unknown) => setAtPath(current, changedField.path, source.value));
     }
@@ -125,6 +131,7 @@ export const SchemaForm = ({
   };
 
   const handleArrayItemRemove = (arrayField: SchemaField, index: number): void => {
+    onDirtyChange?.(true);
     setValues((current: unknown) => {
       const arrayValue = readAtPath(current, arrayField.path);
       if (!Array.isArray(arrayValue)) return current;
@@ -151,6 +158,7 @@ export const SchemaForm = ({
 
   return (
     <form className="schema-form" onSubmit={handleSubmit}>
+      {renderBeforeFields}
       <SchemaFieldControl
         diagnostics={allDiagnostics}
         field={field}