From 3581d49b16ab58d4bd5734555bb956c089aea8ce Mon Sep 17 00:00:00 2001 From: Ruben van Leeuwen Date: Wed, 15 May 2024 14:43:45 +0200 Subject: [PATCH 1/5] 947: Create example form page and add it to the menu --- pages/_app.tsx | 27 +++++++++++++++++++++++++++ pages/forms.tsx | 27 --------------------------- 2 files changed, 27 insertions(+), 27 deletions(-) delete mode 100644 pages/forms.tsx diff --git a/pages/_app.tsx b/pages/_app.tsx index 95479fe..4213815 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -8,10 +8,13 @@ import { SessionProvider } from "next-auth/react"; import { NextAdapter } from "next-query-params"; import App, { AppContext, AppInitialProps, AppProps } from "next/app"; import Head from "next/head"; +import { useRouter } from "next/router"; import { QueryParamProvider } from "use-query-params"; +import type { EuiSideNavItemType } from "@elastic/eui"; import { EuiProvider, EuiThemeColorMode } from "@elastic/eui"; import "@elastic/eui/dist/eui_theme_light.min.css"; + import { ColorModes, ConfirmationDialogContextWrapper, @@ -20,6 +23,7 @@ import { StoreProvider, WfoAuth, WfoErrorBoundary, + WfoMenuItemLink, WfoPageTemplate, WfoToastsList, defaultOrchestratorTheme, @@ -47,6 +51,7 @@ function CustomApp({ pageProps, orchestratorConfig, }: AppProps & AppOwnProps) { + const router = useRouter(); const [queryClient] = useState(() => new QueryClient(queryClientConfig)); const [themeMode, setThemeMode] = useState( @@ -70,6 +75,25 @@ function CustomApp({ } }, []); + const addMenuItems = ( + defaultMenuItems: EuiSideNavItemType[] + ): EuiSideNavItemType[] => [ + ...defaultMenuItems, + { + name: "Example form", + id: "10", + isSelected: router.pathname === "/example-form", + href: "/example-form", + renderItem: () => ( + + ), + }, + ]; + return ( { - // eslint-disable-next-line no-console - console.log('Submitted: ', userInputs); - }; - - return ( - <> - - - - - - - ); -} - -export default FormsPage; From ecc457fe8a412b465536593bc3734033b05269f9 Mon Sep 17 00:00:00 2001 From: Ruben van Leeuwen Date: Thu, 16 May 2024 15:38:52 +0200 Subject: [PATCH 2/5] 947: Update imports --- pages/example-form.tsx | 146 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 146 insertions(+) create mode 100644 pages/example-form.tsx diff --git a/pages/example-form.tsx b/pages/example-form.tsx new file mode 100644 index 0000000..54a7e1b --- /dev/null +++ b/pages/example-form.tsx @@ -0,0 +1,146 @@ +import React from 'react'; + +import { useRouter } from 'next/router'; + +import { EuiSpacer } from '@elastic/eui'; +import { WfoUserInputForm } from '@orchestrator-ui/orchestrator-ui-components'; +import type { InputForm } from '@orchestrator-ui/orchestrator-ui-components'; + +export function ExampleFormPage() { + const router = useRouter(); + + const submit = (userInput: { [index: string]: unknown }) => { + // eslint-disable-next-line no-console + console.log(userInput); + alert('See console for submitted form data'); + return Promise.resolve(); + }; + + const cancel = () => { + alert('the form is cancelled'); + }; + + const formDefinition = { + additionalProperties: false, + $defs: { + listItem: { + properties: { + listItemText: { + type: 'string', + title: 'List item text', + }, + listItemNumber: { + type: 'number', + title: 'List item number', + }, + }, + title: 'List item', + type: 'object', + }, + additionalProperties: false, + }, + properties: { + textField: { + default: 'default value', + title: 'Text field', + type: 'string', + }, + longText: { + format: 'long', + title: 'Long text field', + type: 'string', + }, + number: { + title: 'Number field', + type: 'number', + }, + boolean: { + title: 'Boolean field', + type: 'boolean', + }, + label: { + title: '-- Label followed by a divider --', + type: 'string', + format: 'label', + }, + divider: { + type: 'string', + format: 'divider', + }, + selectField: { + title: 'Select field', + enum: ['option1', 'option2', 'option3'], + }, + radioField: { + title: 'Radio field', + enum: ['option1', 'option2', 'option3'], + checkboxes: true, + }, + acceptField: { + title: 'Accept field', + type: 'string', + format: 'accept', + }, + timestampField: { + default: new Date().getTime(), + format: 'timestamp', + title: 'Timestamp field', + type: 'number', + uniforms: { + dateFormat: 'DD-MMM-YYYY HH:mm z', + locale: 'nl-nl', + max: null, + min: 1715860884, + showTimeSelect: true, + timeFormat: 'HH:mm', + }, + }, + listField: { + default: [], + items: { + $ref: '#/$defs/listItem', + }, + title: 'List field', + type: 'array', + minCount: 1, + }, + summaryField: { + type: 'string', + format: 'summary', + data: { + headers: ['Header 1', 'Header 2'], + labels: ['Label 1', 'Label 2'], + columns: [ + ['Column 1 - Row 1', 'Column 1 - Row 2'], + ['Column 2 - Row 1', 'Column 2 - Row 2'], + ], + }, + }, + customerField: { + type: 'string', + format: 'customerId', + }, + }, + title: 'Example form', + type: 'object', + }; + + return ( + <> + + + + ); +} + +export default ExampleFormPage; From 11c68eba64c217c32c55eec7c5576100fc82ad20 Mon Sep 17 00:00:00 2001 From: Ruben van Leeuwen Date: Thu, 16 May 2024 17:03:30 +0200 Subject: [PATCH 3/5] 947: Add some information text on the example form --- pages/example-form.tsx | 62 ++++++++++++++++++++++++------------------ 1 file changed, 36 insertions(+), 26 deletions(-) diff --git a/pages/example-form.tsx b/pages/example-form.tsx index 54a7e1b..5b979c1 100644 --- a/pages/example-form.tsx +++ b/pages/example-form.tsx @@ -2,22 +2,25 @@ import React from 'react'; import { useRouter } from 'next/router'; -import { EuiSpacer } from '@elastic/eui'; +import { + EuiFlexGroup, + EuiFlexItem, + EuiPageHeader, + EuiSpacer, +} from '@elastic/eui'; import { WfoUserInputForm } from '@orchestrator-ui/orchestrator-ui-components'; import type { InputForm } from '@orchestrator-ui/orchestrator-ui-components'; export function ExampleFormPage() { const router = useRouter(); - const submit = (userInput: { [index: string]: unknown }) => { - // eslint-disable-next-line no-console - console.log(userInput); - alert('See console for submitted form data'); + const submit = () => { + alert('The form is submitted'); return Promise.resolve(); }; const cancel = () => { - alert('the form is cancelled'); + alert('The form is cancelled'); }; const formDefinition = { @@ -76,11 +79,6 @@ export function ExampleFormPage() { enum: ['option1', 'option2', 'option3'], checkboxes: true, }, - acceptField: { - title: 'Accept field', - type: 'string', - format: 'accept', - }, timestampField: { default: new Date().getTime(), format: 'timestamp', @@ -121,25 +119,37 @@ export function ExampleFormPage() { format: 'customerId', }, }, - title: 'Example form', type: 'object', }; return ( - <> - - - + + + + + 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 + + Forms documentation + + + + + ); } From a2f394749d56cfb1b8ffccbad1d8eb8f2868d396 Mon Sep 17 00:00:00 2001 From: Ruben van Leeuwen Date: Tue, 21 May 2024 11:15:03 +0200 Subject: [PATCH 4/5] 947: Add formdefintion as JSON block --- pages/example-form.tsx | 32 ++++++++++++++++++++++---------- 1 file changed, 22 insertions(+), 10 deletions(-) diff --git a/pages/example-form.tsx b/pages/example-form.tsx index 5b979c1..6c62959 100644 --- 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,6 +124,7 @@ export function ExampleFormPage() { }, }, type: 'object', + title: 'Example form', }; return ( @@ -127,15 +132,22 @@ export function ExampleFormPage() { - 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 - - Forms documentation - + 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. + + + + Date: Tue, 21 May 2024 11:21:23 +0200 Subject: [PATCH 5/5] 947: Smaal layout improvement --- pages/example-form.tsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/pages/example-form.tsx b/pages/example-form.tsx index 6c62959..5bde2a1 100644 --- a/pages/example-form.tsx +++ b/pages/example-form.tsx @@ -7,13 +7,13 @@ import { EuiFlexItem, EuiPageHeader, EuiSpacer, + EuiText, } from '@elastic/eui'; 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(); @@ -132,11 +132,12 @@ export function ExampleFormPage() { - 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. + + This page shows the form definition that a fictitious + /example-form endpoint might return to request user input it + needs. It shows the form fields and their types, and how + they are rendered in the form. +