bugfix/MIG-6835 Set title prop correctly and co-erce isConnectable value

src/components/canvas/canvas.tsx

@@ -67,7 +67,6 @@ export const Canvas = ({ title, nodes: externalNodes, edges: externalEdges, onCo
       <ReactFlow
         id={id}
         deleteKeyCode={null}
-        title={title}
         proOptions={PRO_OPTIONS}
         maxZoom={MAX_ZOOM}
         minZoom={MIN_ZOOM}

src/components/diagram.test.tsx

@@ -1,15 +1,22 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, within } from '@testing-library/react';
 import { ReactFlowProvider } from '@xyflow/react';
 
 import { Diagram } from '@/components/diagram';
+import { EMPLOYEES_NODE } from '@/mocks/datasets/nodes';
+import { EMPLOYEES_TO_EMPLOYEES_EDGE } from '@/mocks/datasets/edges';
 
 describe('Diagram', () => {
   it('Should render diagram', () => {
     render(
       <ReactFlowProvider>
-        <Diagram title={'MongoDB Diagram'} nodes={[]} edges={[]} />
+        <Diagram title={'MongoDB Diagram'} nodes={[EMPLOYEES_NODE]} edges={[EMPLOYEES_TO_EMPLOYEES_EDGE]} />
       </ReactFlowProvider>,
     );
-    expect(screen.getByTitle('MongoDB Diagram')).toBeInTheDocument();
+    const controls = screen.getByTestId('rf__controls');
+    expect(within(controls).getByRole('button', { name: /Plus/ })).toBeInTheDocument();
+    expect(within(controls).getByRole('button', { name: /Minus/ })).toBeInTheDocument();
+    expect(within(controls).getByRole('button', { name: /Full Screen/ })).toBeInTheDocument();
+    expect(screen.getByTestId('rf__minimap')).toBeInTheDocument();
+    expect(screen.getByTestId('rf__node-employees')).toBeInTheDocument();
   });
 });

src/components/node/node.tsx

@@ -78,7 +78,7 @@ const NodeHeaderTitle = styled.div`
   ${ellipsisTruncation}
 `;
 
-const NodeHandle = styled(Handle)<{ zIndex?: number }>`
+const NodeHandle = styled(Handle)<{ ['z-index']?: number }>`
   width: 100%;
   height: 100%;
   position: absolute;
@@ -87,7 +87,7 @@ const NodeHandle = styled(Handle)<{ zIndex?: number }>`
   border-radius: 0;
   transform: none;
   opacity: 0;
-  z-index: ${props => props.zIndex};
+  z-index: ${props => props['z-index']};
 `;
 
 export const Node = ({
@@ -139,21 +139,21 @@ export const Node = ({
   };
 
   return (
-    <div onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
+    <div title={title} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
       <NodeBorder variant={selected ? 'selected' : borderVariant}>
         <NodeHandle
           id="source"
-          isConnectable={isConnectable}
           position={Position.Right}
           type="source"
-          zIndex={fromHandle ? 0 : 1}
+          isConnectable={isConnectable ?? false}
+          z-index={fromHandle ? 0 : 1}
         />
         <NodeHandle
           id="target"
-          isConnectable={isConnectable}
           position={Position.Left}
           type="target"
-          zIndex={fromHandle ? 1 : 0}
+          isConnectable={isConnectable ?? false}
+          z-index={fromHandle ? 1 : 0}
         />
         <NodeWrapper accent={getAccent()} color={getNodeColor()}>
           <NodeHeader background={getHeaderBackground()}>