From 3e19aebce4efba98ccf264976a264875196bb3c2 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..10303af7f 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: + + Node is not a known 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: + + Node is not a known 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..b5f81f07d --- /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. + + + + ); +};