Develop

package.json

@@ -17,6 +17,7 @@
     "react-dom": "^19.1.0",
     "react-scripts": "5.0.1",
     "reactflow": "^11.11.4",
+    "sonarqube-scanner": "^4.3.0",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },

src/App.test.tsx

@@ -1,8 +1,22 @@
 import { render, screen } from '@testing-library/react';
-import App from './App';
+import { Header } from './components/layout/Header';
 
 test('renders Vitruvius Modeler title', () => {
-  render(<App />);
-  const titleElement = screen.getByText(/vitruvius modeler/i);
+  render(<Header title="Vitruvius Modeler" />);
+  const titleElement = screen.getByText(/Vitruvius Modeler/i);
   expect(titleElement).toBeInTheDocument();
-});
+});
+
+// test('renders Button components when handlers are provided', () => {
+//   const mockHandlers = {
+//     onNew: jest.fn(),
+//     onLoad: jest.fn(),
+//     onSave: jest.fn(),
+//   };
+
+//   render(<Header {...mockHandlers} title="Test Title" />);
+
+//   expect(screen.getByText('New')).toBeInTheDocument();
+//   expect(screen.getByText('Load')).toBeInTheDocument();
+//   expect(screen.getByText('Save')).toBeInTheDocument();
+// });

src/components/flow/FlowCanvas.tsx

@@ -16,9 +16,10 @@ const nodeTypes = { editable: EditableNode };
 
 interface FlowCanvasProps {
   onDeploy?: (nodes: Node[], edges: Edge[]) => void;
+  sidebarOpen?: boolean;
 }
 
-export function FlowCanvas({ onDeploy }: FlowCanvasProps) {
+export function FlowCanvas({ onDeploy, sidebarOpen = true }: FlowCanvasProps) {
   const reactFlowWrapper = useRef<HTMLDivElement>(null);
   const [reactFlowInstance, setReactFlowInstance] = useState<ReactFlowInstance | null>(null);
 
@@ -51,10 +52,17 @@ export function FlowCanvas({ onDeploy }: FlowCanvasProps) {
   //   }
   // };
 
+  const containerStyle: React.CSSProperties = {
+    flexGrow: 1,
+    height: '100%',
+    width: '100%',
+    position: 'relative',
+  };
+
   return (
     <div
       ref={reactFlowWrapper}
-      style={{ flexGrow: 1, height: '100vh', marginLeft: 180 }}
+      style={containerStyle}
     > 
       <ReactFlow
         nodes={nodes.map(node => ({
@@ -70,6 +78,7 @@ export function FlowCanvas({ onDeploy }: FlowCanvasProps) {
         onDragOver={onDragOver}
         onInit={setReactFlowInstance}
         nodeTypes={nodeTypes}
+        style={{ width: '100%', height: '100%' }}
       >
         <MiniMap />
         <Controls />

src/components/index.ts

@@ -8,4 +8,5 @@ export { FlowCanvas } from './flow/FlowCanvas';
 export { EditableNode } from './flow/EditableNode';
 
 // UI components
-export { Button } from './ui/Button'; 
+export { Button } from './ui/Button';
+export { TreeMenu } from './ui/TreeMenu';