From d1c3b3b5b0d4f8f87c24a356811aec49ff1faaea Mon Sep 17 00:00:00 2001 From: tplevko Date: Tue, 6 Feb 2024 14:55:08 +0100 Subject: [PATCH] Add hint for unknown node type --- .../Visualization/Canvas/CanvasForm.tsx | 10 +- .../__snapshots__/CanvasForm.test.tsx.snap | 178 ++++++++++++++++-- .../Visualization/Custom/UnknownNode.tsx | 39 ++++ 3 files changed, 204 insertions(+), 23 deletions(-) create mode 100644 packages/ui/src/components/Visualization/Custom/UnknownNode.tsx diff --git a/packages/ui/src/components/Visualization/Canvas/CanvasForm.tsx b/packages/ui/src/components/Visualization/Canvas/CanvasForm.tsx index 1b30e26fc..bb6f0e242 100644 --- a/packages/ui/src/components/Visualization/Canvas/CanvasForm.tsx +++ b/packages/ui/src/components/Visualization/Canvas/CanvasForm.tsx @@ -1,16 +1,16 @@ import { AutoField, AutoFields, AutoForm, ErrorsField } from '@kaoto-next/uniforms-patternfly'; -import { CodeBlock, CodeBlockCode, Title } from '@patternfly/react-core'; +import { Title } from '@patternfly/react-core'; import set from 'lodash.set'; import { FunctionComponent, useCallback, useContext, useEffect, useMemo, useRef } from 'react'; -import { stringify } from 'yaml'; import { EntitiesContext } from '../../../providers/entities.provider'; import { ErrorBoundary } from '../../ErrorBoundary'; import { SchemaService } from '../../Form'; import { CustomAutoFieldDetector } from '../../Form/CustomAutoField'; -import './CanvasForm.scss'; import { DataFormatEditor } from '../../Form/dataFormat/DataFormatEditor'; import { LoadBalancerEditor } from '../../Form/loadBalancer/LoadBalancerEditor'; import { StepExpressionEditor } from '../../Form/stepExpression/StepExpressionEditor'; +import { UnknownNode } from '../Custom/UnknownNode'; +import './CanvasForm.scss'; import { CanvasNode } from './canvas.models'; interface CanvasFormProps { @@ -75,9 +75,7 @@ export const CanvasForm: FunctionComponent = (props) => { {componentName}
{isUnknownComponent ? ( - - {stringify(model)} - + ) : ( {isExpressionAwareStep && } diff --git a/packages/ui/src/components/Visualization/Canvas/__snapshots__/CanvasForm.test.tsx.snap b/packages/ui/src/components/Visualization/Canvas/__snapshots__/CanvasForm.test.tsx.snap index 619ecd12a..aae6b7303 100644 --- a/packages/ui/src/components/Visualization/Canvas/__snapshots__/CanvasForm.test.tsx.snap +++ b/packages/ui/src/components/Visualization/Canvas/__snapshots__/CanvasForm.test.tsx.snap @@ -96,21 +96,93 @@ exports[`CanvasForm should render nothing if no schema and no definition is avai class="canvas-form" >
- 
-          
-            null
+            

+              Node source
+            

+
+
+
+
+
+
+ 
+              
+                null
 
-          
-
+ + +
+
+
+
+
+
+ +
+

+ + Warning alert: + + Unknow node type +

+
+ The configuration for an unknown node cannot be changed in the configuration form. Please switch to the source code and correct the node type. Another option is to replace the step in the graphical editor but in that case you will probably lose the existing configuration. +
+
@@ -129,18 +201,90 @@ exports[`CanvasForm should render nothing if no schema is available 1`] = ` class="canvas-form" >
- 
-          
-
+
+
+ Node source +
+
+
+
+
+
+
+ 
+              
+
+
+
+
+
+
+
+ +
+

+ + Warning alert: + + Unknow node type +

+
+ The configuration for an unknown node cannot be changed in the configuration form. Please switch to the source code and correct the node type. Another option is to replace the step in the graphical editor but in that case you will probably lose the existing configuration. +
+
diff --git a/packages/ui/src/components/Visualization/Custom/UnknownNode.tsx b/packages/ui/src/components/Visualization/Custom/UnknownNode.tsx new file mode 100644 index 000000000..8b56542e8 --- /dev/null +++ b/packages/ui/src/components/Visualization/Custom/UnknownNode.tsx @@ -0,0 +1,39 @@ +import { + Alert, + Card, + CardBody, + CardFooter, + CardHeader, + CardTitle, + CodeBlock, + CodeBlockCode, +} from '@patternfly/react-core'; +import { stringify } from 'yaml'; +import { FunctionComponent } from 'react'; + +interface UnknownNodeProps { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + model: any; +} + +export const UnknownNode: FunctionComponent = (props) => { + return ( + + + Node source + + + + {stringify(props.model)} + + + + + The configuration for an unknown node cannot be changed in the configuration form. Please switch to the source + code and correct the node type. Another option is to replace the step in the graphical editor but in that case + you will probably lose the existing configuration. + + + + ); +};