947: Add formdefintion as JSON block

workfloworchestrator · May 21, 2024 · 89e943e · 89e943e
1 parent 5f84cbf
commit 89e943e
Showing 1 changed file with 22 additions and 10 deletions.
diff --git a/pages/example-form.tsx b/pages/example-form.tsx
@@ -8,8 +8,12 @@ import {
     EuiPageHeader,
     EuiSpacer,
 } from '@elastic/eui';
-import { WfoUserInputForm } from '@orchestrator-ui/orchestrator-ui-components';
+import {
+    WfoJsonCodeBlock,
+    WfoUserInputForm,
+} from '@orchestrator-ui/orchestrator-ui-components';
 import type { InputForm } from '@orchestrator-ui/orchestrator-ui-components';
+import { PROCESSES_ENDPOINT } from '@orchestrator-ui/orchestrator-ui-components';
 
 export function ExampleFormPage() {
     const router = useRouter();
@@ -120,22 +124,30 @@ export function ExampleFormPage() {
             },
         },
         type: 'object',
+        title: 'Example form',
     };
 
     return (
         <EuiFlexGroup>
             <EuiFlexItem>
                 <EuiPageHeader pageTitle="Example form" />
                 <EuiSpacer />
-                This page shows a sample of form fields that can be used to
-                automatically create forms when creating workflows in the
-                Workflow Orchestrator. For more information, see the
-                <a
-                    href="https://workfloworchestrator.org/orchestrator-core/reference-docs/forms/"
-                    target="_blank"
-                >
-                    Forms documentation
-                </a>
+                This page shows the form definition that a fictitious `$
+                {PROCESSES_ENDPOINT}`/test-name endpoint might return to request
+                userInput it needs and the form it is turned into. It shows the
+                form fields and their types, and how they are rendered in the
+                form.
+                <EuiSpacer />
+                <div>
+                    <a
+                        href="https://workfloworchestrator.org/orchestrator-core/reference-docs/forms/"
+                        target="_blank"
+                    >
+                        For more see the Forms documentation
+                    </a>
+                </div>
+                <EuiSpacer />
+                <WfoJsonCodeBlock data={formDefinition} />
                 <EuiSpacer />
                 <WfoUserInputForm
                     key={'key'}