chore(CanvasSideBar): Cleanup and add missing tests

packages/ui/src/components/Visualization/Canvas/CanvasSideBar.test.tsx

@@ -0,0 +1,54 @@
+import { act, fireEvent, render } from '@testing-library/react';
+import { FunctionComponent, PropsWithChildren } from 'react';
+import { CamelRouteResource } from '../../../models/camel';
+import { EntityType } from '../../../models/camel/entities';
+import { TestProvidersWrapper } from '../../../stubs/TestProvidersWrapper';
+import { CanvasNode } from './canvas.models';
+import { CanvasSideBar } from './CanvasSideBar';
+import { FlowService } from './flow.service';
+
+describe('CanvasSideBar', () => {
+  let selectedNode: CanvasNode;
+  let Provider: FunctionComponent<PropsWithChildren>;
+
+  beforeAll(() => {
+    const camelResource = new CamelRouteResource();
+    camelResource.addNewEntity(EntityType.Route);
+    const visualEntity = camelResource.getVisualEntities()[0];
+    selectedNode = FlowService.getFlowDiagram(visualEntity.toVizNode()).nodes[0];
+    Provider = TestProvidersWrapper({ camelResource }).Provider;
+  });
+
+  it('does not render anything if there is no selectedNode', () => {
+    const wrapper = render(<CanvasSideBar selectedNode={undefined} onClose={() => {}} />);
+
+    expect(wrapper.container).toBeEmptyDOMElement();
+  });
+
+  it('displays selected node information', () => {
+    const wrapper = render(
+      <Provider>
+        <CanvasSideBar selectedNode={selectedNode} onClose={() => {}} />
+      </Provider>,
+    );
+
+    expect(wrapper.asFragment()).toMatchSnapshot();
+  });
+
+  it('should propagate onClose callback', () => {
+    const onCloseSpy = jest.fn();
+
+    const wrapper = render(
+      <Provider>
+        <CanvasSideBar selectedNode={selectedNode} onClose={onCloseSpy} />
+      </Provider>,
+    );
+
+    act(() => {
+      const closeButton = wrapper.getByTestId('close-side-bar');
+      fireEvent.click(closeButton);
+    });
+
+    expect(onCloseSpy).toHaveBeenCalledTimes(1);
+  });
+});

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

@@ -12,19 +12,21 @@ interface CanvasSideBarProps {
 }
 
 export const CanvasSideBar: FunctionComponent<CanvasSideBarProps> = (props) => {
+  if (props.selectedNode === undefined) {
+    return null;
+  }
+
   return (
     /**
      * We cannot use the onClose property since the button has 'position: absolute'
      * and doesn't take into account the sidebar children.
      */
-    <TopologySideBar show={props.selectedNode !== undefined} resizable={true}>
-      {props.selectedNode === undefined ? null : (
-        <ErrorBoundary key={props.selectedNode.id} fallback={<p>Something didn't work as expected</p>}>
-          <FilteredFieldProvider>
-            <CanvasForm selectedNode={props.selectedNode} onClose={props.onClose} />
-          </FilteredFieldProvider>
-        </ErrorBoundary>
-      )}
+    <TopologySideBar resizable>
+      <ErrorBoundary key={props.selectedNode.id} fallback={<p>Something didn't work as expected</p>}>
+        <FilteredFieldProvider>
+          <CanvasForm selectedNode={props.selectedNode} onClose={props.onClose} />
+        </FilteredFieldProvider>
+      </ErrorBoundary>
     </TopologySideBar>
   );
 };

packages/ui/src/components/Visualization/Canvas/Form/CanvasForm.tsx

@@ -12,48 +12,44 @@ interface CanvasFormProps {
   onClose?: () => void;
 }
 
-export const CanvasForm: FunctionComponent<CanvasFormProps> = (props) => {
+export const CanvasForm: FunctionComponent<CanvasFormProps> = ({ selectedNode, onClose }) => {
   const { visualFlowsApi } = useContext(VisibleFlowsContext)!;
   const flowIdRef = useRef<string | undefined>(undefined);
+  const vizNode = selectedNode.data?.vizNode;
 
   const visualComponentSchema = useMemo(() => {
-    const answer = props.selectedNode.data?.vizNode?.getComponentSchema();
+    const answer = vizNode?.getComponentSchema();
     // Overriding parameters with an empty object When the parameters property is mistakenly set to null
     if (answer?.definition?.parameters === null) {
       answer!.definition.parameters = {};
     }
     return answer;
-  }, [props.selectedNode.data?.vizNode]);
+  }, [vizNode]);
   const title = visualComponentSchema?.title;
 
   /** Store the flow's initial Id */
   useEffect(() => {
-    flowIdRef.current = props.selectedNode.data?.vizNode?.getId();
+    flowIdRef.current = vizNode?.getId();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const onClose = useCallback(() => {
-    props.onClose?.();
-    const newId = props.selectedNode.data?.vizNode?.getId();
+  const onCloseFn = useCallback(() => {
+    onClose?.();
+    const newId = vizNode?.getId();
     if (typeof flowIdRef.current === 'string' && typeof newId === 'string' && flowIdRef.current !== newId) {
       visualFlowsApi.renameFlow(flowIdRef.current, newId);
     }
-  }, [props, visualFlowsApi]);
+  }, [onClose, visualFlowsApi, vizNode]);
 
   return (
-    <ErrorBoundary key={props.selectedNode.id} fallback={<p>This node cannot be configured yet</p>}>
+    <ErrorBoundary key={selectedNode.id} fallback={<p>This node cannot be configured yet</p>}>
       <Card className="canvas-form">
         <CardHeader>
-          <CanvasFormHeader
-            nodeId={props.selectedNode.id}
-            title={title}
-            onClose={onClose}
-            nodeIcon={props.selectedNode.data?.vizNode?.data?.icon}
-          />
+          <CanvasFormHeader nodeId={selectedNode.id} title={title} onClose={onCloseFn} nodeIcon={vizNode?.data?.icon} />
         </CardHeader>
 
         <CardBody className="canvas-form__body">
-          <CanvasFormBody selectedNode={props.selectedNode} />
+          <CanvasFormBody selectedNode={selectedNode} />
         </CardBody>
       </Card>
     </ErrorBoundary>