Add hint for unknown node type

KaotoIO · Feb 6, 2024 · 9f8c624 · 9f8c624
1 parent 498ea65
commit 9f8c624
Show file tree

Hide file tree

Showing 2 changed files with 149 additions and 21 deletions.
diff --git a/packages/ui/src/components/Visualization/Canvas/CanvasForm.tsx b/packages/ui/src/components/Visualization/Canvas/CanvasForm.tsx
@@ -1,16 +1,28 @@
 import { AutoField, AutoFields, AutoForm, ErrorsField } from '@kaoto-next/uniforms-patternfly';
-import { CodeBlock, CodeBlockCode, Title } from '@patternfly/react-core';
+import {
+  Card,
+  CardBody,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  CodeBlock,
+  CodeBlockCode,
+  Hint,
+  HintBody,
+  HintTitle,
+  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 './CanvasForm.scss';
 import { CanvasNode } from './canvas.models';
 
 interface CanvasFormProps {
@@ -88,9 +100,25 @@ export const CanvasForm: FunctionComponent<CanvasFormProps> = (props) => {
       <Title headingLevel="h1">{componentName}</Title>
       <div className="canvas-form">
         {isUnknownComponent ? (
-          <CodeBlock>
-            <CodeBlockCode>{stringify(model)}</CodeBlockCode>
-          </CodeBlock>
+          <Card>
+            <CardHeader>
+              <CardTitle>Node source</CardTitle>
+            </CardHeader>
+            <CardBody>
+              <CodeBlock>
+                <CodeBlockCode>{stringify(model)}</CodeBlockCode>
+              </CodeBlock>
+            </CardBody>
+            <CardFooter>
+              <Hint>
+                <HintTitle>Node is not a known type</HintTitle>
+                <HintBody>
+                  Configuration properties are not available when the node is not a known type. Delete, or replace this
+                  node with valid node.
+                </HintBody>
+              </Hint>
+            </CardFooter>
+          </Card>
         ) : (
           <AutoField.componentDetectorContext.Provider value={CustomAutoFieldDetector}>
             {isExpressionAwareStep && <StepExpressionEditor selectedNode={props.selectedNode} />}

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
@@ -96,21 +96,71 @@ exports[`CanvasForm should render nothing if no schema and no definition is avai
     class="canvas-form"
   >
     <div
-      class="pf-v5-c-code-block"
+      class="pf-v5-c-card"
+      data-ouia-component-id="OUIA-Generated-Card-2"
+      data-ouia-component-type="PF5/Card"
+      data-ouia-safe="true"
+      id=""
     >
       <div
-        class="pf-v5-c-code-block__content"
+        class="pf-v5-c-card__header"
       >
-        <pre
-          class="pf-v5-c-code-block__pre"
+        <div
+          class="pf-v5-c-card__header-main"
+        >
+          <div
+            class="pf-v5-c-card__title"
+          >
+            <div
+              class="pf-v5-c-card__title-text"
+            >
+              Node source
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="pf-v5-c-card__body"
+      >
+        <div
+          class="pf-v5-c-code-block"
         >
-          <code
-            class="pf-v5-c-code-block__code"
+          <div
+            class="pf-v5-c-code-block__content"
           >
-            null
+            <pre
+              class="pf-v5-c-code-block__pre"
+            >
+              <code
+                class="pf-v5-c-code-block__code"
+              >
+                null
 
-          </code>
-        </pre>
+              </code>
+            </pre>
+          </div>
+        </div>
+      </div>
+      <div
+        class="pf-v5-c-card__footer"
+      >
+        <div
+          class="pf-v5-c-hint"
+        >
+          <div
+            class="pf-v5-c-hint__actions"
+          />
+          <div
+            class="pf-v5-c-hint__title"
+          >
+            Node is not a known type
+          </div>
+          <div
+            class="pf-v5-c-hint__body"
+          >
+            Configuration properties are not available when the node is not a known type. Delete, or replace this node with valid node.
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -129,18 +179,68 @@ exports[`CanvasForm should render nothing if no schema is available 1`] = `
     class="canvas-form"
   >
     <div
-      class="pf-v5-c-code-block"
+      class="pf-v5-c-card"
+      data-ouia-component-id="OUIA-Generated-Card-1"
+      data-ouia-component-type="PF5/Card"
+      data-ouia-safe="true"
+      id=""
     >
       <div
-        class="pf-v5-c-code-block__content"
+        class="pf-v5-c-card__header"
       >
-        <pre
-          class="pf-v5-c-code-block__pre"
+        <div
+          class="pf-v5-c-card__header-main"
+        >
+          <div
+            class="pf-v5-c-card__title"
+          >
+            <div
+              class="pf-v5-c-card__title-text"
+            >
+              Node source
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="pf-v5-c-card__body"
+      >
+        <div
+          class="pf-v5-c-code-block"
+        >
+          <div
+            class="pf-v5-c-code-block__content"
+          >
+            <pre
+              class="pf-v5-c-code-block__pre"
+            >
+              <code
+                class="pf-v5-c-code-block__code"
+              />
+            </pre>
+          </div>
+        </div>
+      </div>
+      <div
+        class="pf-v5-c-card__footer"
+      >
+        <div
+          class="pf-v5-c-hint"
         >
-          <code
-            class="pf-v5-c-code-block__code"
+          <div
+            class="pf-v5-c-hint__actions"
           />
-        </pre>
+          <div
+            class="pf-v5-c-hint__title"
+          >
+            Node is not a known type
+          </div>
+          <div
+            class="pf-v5-c-hint__body"
+          >
+            Configuration properties are not available when the node is not a known type. Delete, or replace this node with valid node.
+          </div>
+        </div>
       </div>
     </div>
   </div>