feat(canvas): Split Canvas fallback component

Currently, the canvas fallback component that is loaded when a route
cannot be parsed, has a link to the SourceCode editor. The issue with
this approach is that some consumers won't have said source code editor.

This commit provides a default fallback component and moves the custom
fallback component to the DesignPage, which is Source Code editor aware.

packages/ui/src/components/Visualization/CanvasFallback/CanvasFallback.tsx

@@ -1,20 +1,7 @@
-import {
-  Bullseye,
-  Button,
-  EmptyState,
-  EmptyStateActions,
-  EmptyStateBody,
-  EmptyStateFooter,
-  EmptyStateHeader,
-  EmptyStateIcon,
-} from '@patternfly/react-core';
-import { ArrowLeftIcon, EyeSlashIcon } from '@patternfly/react-icons';
-import { Links } from '../../../router/links.models';
-import { useComponentLink } from '../../../hooks/ComponentLink';
+import { Bullseye, EmptyState, EmptyStateBody, EmptyStateHeader, EmptyStateIcon } from '@patternfly/react-core';
+import { EyeSlashIcon } from '@patternfly/react-icons';
 
 export const CanvasFallback = () => {
-  const backLink = useComponentLink(Links.SourceCode);
-
   return (
     <Bullseye>
       <EmptyState>
@@ -28,13 +15,6 @@ export const CanvasFallback = () => {
           <br />
           <p>Try to go back to the source code and check if the source code is valid.</p>
         </EmptyStateBody>
-        <EmptyStateFooter>
-          <EmptyStateActions>
-            <Button variant="primary" component={backLink} icon={<ArrowLeftIcon />}>
-              Go to the source code
-            </Button>
-          </EmptyStateActions>
-        </EmptyStateFooter>
       </EmptyState>
     </Bullseye>
   );

packages/ui/src/components/Visualization/CanvasFallback/__snapshots__/CanvasFallback.test.tsx.snap

@@ -52,41 +52,6 @@ exports[`CanvasFallback renders correctly 1`] = `
             Try to go back to the source code and check if the source code is valid.
           </p>
         </div>
-        <div
-          class="pf-v5-c-empty-state__footer"
-        >
-          <div
-            class="pf-v5-c-empty-state__actions"
-          >
-            <a
-              aria-disabled="false"
-              class="pf-v5-c-button pf-m-primary"
-              data-ouia-component-id="OUIA-Generated-Button-primary-1"
-              data-ouia-component-type="PF5/Button"
-              data-ouia-safe="true"
-              href="/code"
-            >
-              <span
-                class="pf-v5-c-button__icon pf-m-start"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v5-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  viewBox="0 0 448 512"
-                  width="1em"
-                >
-                  <path
-                    d="M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z"
-                  />
-                </svg>
-              </span>
-              Go to the source code
-            </a>
-          </div>
-        </div>
       </div>
     </div>
   </div>

packages/ui/src/components/Visualization/Visualization.tsx

@@ -1,4 +1,4 @@
-import { FunctionComponent, PropsWithChildren } from 'react';
+import { FunctionComponent, PropsWithChildren, ReactNode } from 'react';
 import { BaseVisualCamelEntity } from '../../models/visualization/base-visual-entity';
 import { ErrorBoundary } from '../ErrorBoundary';
 import { Canvas } from './Canvas';
@@ -10,12 +10,13 @@ import { VisibleFlowsProvider } from '../../providers/visible-flows.provider';
 interface CanvasProps {
   className?: string;
   entities: BaseVisualCamelEntity[];
+  fallback?: ReactNode;
 }
 
 export const Visualization: FunctionComponent<PropsWithChildren<CanvasProps>> = (props) => {
   return (
     <div className={`canvas-surface ${props.className ?? ''}`}>
-      <ErrorBoundary fallback={<CanvasFallback />}>
+      <ErrorBoundary fallback={props.fallback ?? <CanvasFallback />}>
         <VisibleFlowsProvider>
           <Canvas contextToolbar={<ContextToolbar />} entities={props.entities} />
         </VisibleFlowsProvider>

packages/ui/src/pages/Design/DesignPage.tsx

@@ -3,6 +3,7 @@ import { FunctionComponent, useContext } from 'react';
 import { Visualization } from '../../components/Visualization';
 import { CatalogModalProvider } from '../../providers/catalog-modal.provider';
 import { EntitiesContext } from '../../providers/entities.provider';
+import { ReturnToSourceCodeFallback } from './ReturnToSourceCodeFallback';
 import './DesignPage.scss';
 
 export const DesignPage: FunctionComponent = () => {
@@ -14,7 +15,11 @@ export const DesignPage: FunctionComponent = () => {
       <Title headingLevel="h1">Visualization</Title>
 
       <CatalogModalProvider>
-        <Visualization className="canvas-page__canvas" entities={visualEntities} />
+        <Visualization
+          className="canvas-page__canvas"
+          entities={visualEntities}
+          fallback={<ReturnToSourceCodeFallback />}
+        />
       </CatalogModalProvider>
     </div>
   );

packages/ui/src/pages/Design/ReturnToSourceCodeFallback/ReturnToSourceCodeFallback.test.tsx

@@ -0,0 +1,14 @@
+import { render } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { ReturnToSourceCodeFallback } from './ReturnToSourceCodeFallback';
+
+describe('ReturnToSourceCodeFallback', () => {
+  it('renders correctly', () => {
+    const wrapper = render(
+      <MemoryRouter>
+        <ReturnToSourceCodeFallback />
+      </MemoryRouter>,
+    );
+    expect(wrapper.asFragment()).toMatchSnapshot();
+  });
+});

packages/ui/src/pages/Design/ReturnToSourceCodeFallback/ReturnToSourceCodeFallback.tsx

@@ -0,0 +1,41 @@
+import {
+  Bullseye,
+  Button,
+  EmptyState,
+  EmptyStateActions,
+  EmptyStateBody,
+  EmptyStateFooter,
+  EmptyStateHeader,
+  EmptyStateIcon,
+} from '@patternfly/react-core';
+import { ArrowLeftIcon, EyeSlashIcon } from '@patternfly/react-icons';
+import { Links } from '../../../router/links.models';
+import { useComponentLink } from '../../../hooks/ComponentLink';
+
+export const ReturnToSourceCodeFallback = () => {
+  const backLink = useComponentLink(Links.SourceCode);
+
+  return (
+    <Bullseye>
+      <EmptyState>
+        <EmptyStateHeader
+          titleText="The provided source code cannot be shown"
+          headingLevel="h4"
+          icon={<EmptyStateIcon icon={EyeSlashIcon} />}
+        />
+        <EmptyStateBody>
+          <p>It might be that the source code is not available, or that the source code is not valid.</p>
+          <br />
+          <p>Try to go back to the source code and check if the source code is valid.</p>
+        </EmptyStateBody>
+        <EmptyStateFooter>
+          <EmptyStateActions>
+            <Button variant="primary" component={backLink} icon={<ArrowLeftIcon />}>
+              Go to the source code
+            </Button>
+          </EmptyStateActions>
+        </EmptyStateFooter>
+      </EmptyState>
+    </Bullseye>
+  );
+};

packages/ui/src/pages/Design/ReturnToSourceCodeFallback/__snapshots__/ReturnToSourceCodeFallback.test.tsx.snap

@@ -0,0 +1,94 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ReturnToSourceCodeFallback renders correctly 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-l-bullseye"
+  >
+    <div
+      class="pf-v5-c-empty-state"
+    >
+      <div
+        class="pf-v5-c-empty-state__content"
+      >
+        <div
+          class="pf-v5-c-empty-state__header"
+        >
+          <div
+            class="pf-v5-c-empty-state__icon"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              viewBox="0 0 640 512"
+              width="1em"
+            >
+              <path
+                d="M320 400c-75.85 0-137.25-58.71-142.9-133.11L72.2 185.82c-13.79 17.3-26.48 35.59-36.72 55.59a32.35 32.35 0 0 0 0 29.19C89.71 376.41 197.07 448 320 448c26.91 0 52.87-4 77.89-10.46L346 397.39a144.13 144.13 0 0 1-26 2.61zm313.82 58.1l-110.55-85.44a331.25 331.25 0 0 0 81.25-102.07 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64a308.15 308.15 0 0 0-147.32 37.7L45.46 3.37A16 16 0 0 0 23 6.18L3.37 31.45A16 16 0 0 0 6.18 53.9l588.36 454.73a16 16 0 0 0 22.46-2.81l19.64-25.27a16 16 0 0 0-2.82-22.45zm-183.72-142l-39.3-30.38A94.75 94.75 0 0 0 416 256a94.76 94.76 0 0 0-121.31-92.21A47.65 47.65 0 0 1 304 192a46.64 46.64 0 0 1-1.54 10l-73.61-56.89A142.31 142.31 0 0 1 320 112a143.92 143.92 0 0 1 144 144c0 21.63-5.29 41.79-13.9 60.11z"
+              />
+            </svg>
+          </div>
+          <div
+            class="pf-v5-c-empty-state__title"
+          >
+            <h4
+              class="pf-v5-c-empty-state__title-text"
+            >
+              The provided source code cannot be shown
+            </h4>
+          </div>
+        </div>
+        <div
+          class="pf-v5-c-empty-state__body"
+        >
+          <p>
+            It might be that the source code is not available, or that the source code is not valid.
+          </p>
+          <br />
+          <p>
+            Try to go back to the source code and check if the source code is valid.
+          </p>
+        </div>
+        <div
+          class="pf-v5-c-empty-state__footer"
+        >
+          <div
+            class="pf-v5-c-empty-state__actions"
+          >
+            <a
+              aria-disabled="false"
+              class="pf-v5-c-button pf-m-primary"
+              data-ouia-component-id="OUIA-Generated-Button-primary-1"
+              data-ouia-component-type="PF5/Button"
+              data-ouia-safe="true"
+              href="/code"
+            >
+              <span
+                class="pf-v5-c-button__icon pf-m-start"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="pf-v5-svg"
+                  fill="currentColor"
+                  height="1em"
+                  role="img"
+                  viewBox="0 0 448 512"
+                  width="1em"
+                >
+                  <path
+                    d="M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z"
+                  />
+                </svg>
+              </span>
+              Go to the source code
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

packages/ui/src/pages/Design/ReturnToSourceCodeFallback/index.ts

@@ -0,0 +1 @@
+export * from './ReturnToSourceCodeFallback';