console: add debug prop to form to access dev tools

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/8981
GitOrigin-RevId: 13c0340b24182fa5634e97f2f8d1a3a7675f922e

frontend/libs/console/legacy-ce/src/lib/new-components/Form/SimpleForm.stories.tsx

@@ -99,3 +99,34 @@ value for the \`inputFieldName\` input.`,
     },
   },
 };
+
+export const FormDebug: ComponentStory<typeof SimpleForm> = () => {
+  const validationSchema = z.object({
+    inputFieldName: z.string().min(1),
+  });
+
+  return (
+    <SimpleForm schema={validationSchema} onSubmit={action('onSubmit')} debug>
+      <div className="space-y-xs">
+        <h1 className="text-xl font-semibold mb-xs">Default value</h1>
+        <InputField
+          name="inputFieldName"
+          label="The input field label"
+          placeholder="Input field placeholder"
+          clearButton
+        />
+        <Button type="submit" mode="primary">
+          Submit
+        </Button>
+      </div>
+    </SimpleForm>
+  );
+};
+FormDebug.storyName = '💠 Form Debugger';
+FormDebug.parameters = {
+  docs: {
+    description: {
+      story: `In this example, a form debugger window is shown that displays form values and errors.`,
+    },
+  },
+};

frontend/libs/console/legacy-ce/src/lib/new-components/Form/hooks/form.types.ts

@@ -44,6 +44,10 @@ export type FormProps<TForm extends ZodInfer<Schema>> = {
    * The form ID
    */
   id?: string;
+  /**
+   * Enables a debug pane that outputs form values and errors
+   */
+  debug?: boolean;
 };
 
 // form wrapper props (combo of form component and FormProvider)

frontend/libs/console/legacy-ce/src/lib/new-components/Form/hooks/useConsoleForm.tsx

@@ -12,6 +12,7 @@ import {
   Schema,
   UseConsoleFormProps,
 } from './form.types';
+import { DevTool } from '@hookform/devtools';
 
 // available as a standlone if needed for advanced usage
 const ConsoleFormWrapper = <
@@ -22,7 +23,7 @@ const ConsoleFormWrapper = <
 >(
   props: FormWrapperProps<TFieldValues, TSchema, TContext>
 ) => {
-  const { id, className, onSubmit, children, ...methods } = props;
+  const { id, className, onSubmit, children, debug, ...methods } = props;
   return (
     <FormProvider {...methods}>
       <form
@@ -31,6 +32,10 @@ const ConsoleFormWrapper = <
         onSubmit={methods.handleSubmit(onSubmit)}
         data-non-regression="new-form-pattern"
       >
+        {debug && (
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          <DevTool control={methods.control as any} />
+        )}
         {children}
       </form>
     </FormProvider>