Merge pull request finos#1744 from aidanm3341/panel

feat(calm-hub-ui): add icons and panels to organise ui

Author: markscott-ms

calm-hub-ui/src/hub/Hub.test.tsx

@@ -66,14 +66,14 @@ describe('Hub', () => {
     it('renders JsonRenderer when data is loaded', () => {
         renderWithRouter(<Hub />);
 
-        // Initially, JsonRenderer should be present but empty
-        expect(screen.getByTestId('json-renderer')).toBeInTheDocument();
-        expect(screen.getByTestId('json-renderer')).toHaveTextContent('');
+        // Initially, no content should be rendered
+        expect(screen.queryByTestId('json-renderer')).not.toBeInTheDocument();
 
         // Click the Load Test Data button to simulate data loading
         fireEvent.click(screen.getByText('Load Test Data'));
 
-        // Now JsonRenderer should show JSON content
+        // Now JsonRenderer should be visible and show JSON content
+        expect(screen.getByTestId('json-renderer')).toBeInTheDocument();
         expect(screen.getByTestId('json-renderer')).toHaveTextContent('JSON');
     });
 

calm-hub-ui/src/hub/Hub.tsx

@@ -1,11 +1,11 @@
 import { useState } from 'react';
-import { JsonRenderer } from './components/json-renderer/JsonRenderer.js';
 import { TreeNavigation } from './components/tree-navigation/TreeNavigation.js';
 import { Data, Adr } from '../model/calm.js';
 import { Navbar } from '../components/navbar/Navbar.js';
 import { AdrRenderer } from './components/adr-renderer/AdrRenderer.js';
+import { DocumentDetailSection } from './components/document-detail-section/DocumentDetailSection.js';
+import { ArchitectureSection } from './components/architecture-section/ArchitectureSection.js';
 import './Hub.css';
-import { Drawer } from '../visualizer/components/drawer/Drawer.js';
 
 export default function Hub() {
     const [data, setData] = useState<Data | undefined>();
@@ -22,54 +22,27 @@ export default function Hub() {
     }
 
     return (
-        <div className="flex flex-col h-screen">
+        <div className="flex flex-col h-screen overflow-hidden">
             <Navbar />
-            <div className="flex flex-row flex-1 overflow-hidden">
-                <div className="w-1/4">
-                    <TreeNavigation onDataLoad={handleDataLoad} onAdrLoad={handleAdrLoad} />
-                </div>
-                {adrData ? (
-                    <AdrRenderer adrDetails={adrData} />
-                ) : (
-                    <div className="w-full h-full overflow-auto">
-                        {adrData && <AdrRenderer adrDetails={adrData} />}
-                        {data?.calmType === 'Architectures' && <ArchitectureSection data={data} />}
-                        {data?.calmType !== 'Architectures' && !adrData && (
-                            <div className="p-5 bg-base-200 h-full">
-                                <JsonRenderer json={data} />
-                            </div>
-                        )}
-                    </div>
-                )}
-            </div>
-        </div>
-    );
-}
-
-function ArchitectureSection({ data }: { data: Data & { calmType: 'Architectures' } }) {
-    return (
-        <div className="relative w-full h-full flex flex-col">
-            <div className="tabs w-full flex-1 flex flex-col">
-                <input
-                    type="radio"
-                    name="view-tabs"
-                    className="tab absolute top-4 right-25 z-[100] backdrop-blur-sm shadow-lg rounded-lg px-4 py-2 border border-base-300 bg-base-100/90 checked:!bg-[#007dff] checked:!text-white hover:bg-base-200/90"
-                    aria-label="JSON"
-                />
-                <div className="tab-content flex-1">
-                    <div className="h-full bg-base-200">
-                        <JsonRenderer json={data} />
+            <div className="flex flex-row flex-1 overflow-hidden bg-base-300">
+                <div className="w-1/4 p-4 pr-2">
+                    <div className="h-full bg-base-100 rounded-2xl overflow-hidden shadow-xl">
+                        <TreeNavigation onDataLoad={handleDataLoad} onAdrLoad={handleAdrLoad} />
                     </div>
                 </div>
-                <input
-                    type="radio"
-                    name="view-tabs"
-                    className="tab absolute top-4 right-4 z-[100] backdrop-blur-sm shadow-lg rounded-lg px-4 py-2 border border-base-300 bg-base-100/90 checked:!bg-[#007dff] checked:!text-white hover:bg-base-200/90"
-                    aria-label="Diagram"
-                    defaultChecked
-                />
-                <div className="tab-content flex-1">
-                    <Drawer data={data} />
+                <div className="flex-1 overflow-auto">
+                    {adrData ? (
+                        <AdrRenderer adrDetails={adrData} />
+                    ) : (
+                        <>
+                            {data?.calmType === 'Architectures' && (
+                                <ArchitectureSection data={data} />
+                            )}
+                            {data?.calmType !== 'Architectures' && !adrData && (
+                                <DocumentDetailSection data={data} />
+                            )}
+                        </>
+                    )}
                 </div>
             </div>
         </div>

calm-hub-ui/src/hub/components/architecture-section/ArchitectureSection.test.tsx

@@ -0,0 +1,124 @@
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import userEvent from '@testing-library/user-event';
+import { ArchitectureSection } from './ArchitectureSection.js';
+import { describe, it, expect, vi } from 'vitest';
+import { Data } from '../../../model/calm.js';
+
+vi.mock('react-router-dom', async () => {
+    const actual = await vi.importActual('react-router-dom');
+    return {
+        ...actual,
+        useNavigate: vi.fn(() => vi.fn()),
+    };
+});
+
+vi.mock('@monaco-editor/react', () => ({
+    Editor: ({ value }: { value: string }) => <textarea value={value} readOnly data-testid="monaco-editor" />
+}));
+
+vi.mock('../../../visualizer/components/drawer/Drawer.js', () => ({
+    Drawer: ({ data }: { data: Data }) => <div data-testid="drawer">Drawer for {data.id}</div>
+}));
+
+describe('ArchitectureSection', () => {
+    const architectureData: Data & { calmType: 'Architectures' } = {
+        id: 'test-arch',
+        version: '1.0.0',
+        name: 'arch-namespace',
+        calmType: 'Architectures',
+        data: undefined,
+    };
+
+    it('renders architecture title with namespace, id, and version', () => {
+        render(
+            <MemoryRouter>
+                <ArchitectureSection data={architectureData} />
+            </MemoryRouter>
+        );
+
+        const heading = screen.getByRole('heading');
+        expect(heading).toHaveTextContent('arch-namespace');
+        expect(heading).toHaveTextContent('test-arch');
+        expect(heading).toHaveTextContent('1.0.0');
+    });
+
+    it('renders tabs with icons', () => {
+        render(
+            <MemoryRouter>
+                <ArchitectureSection data={architectureData} />
+            </MemoryRouter>
+        );
+
+        expect(screen.getByRole('tab', { name: /diagram/i })).toBeInTheDocument();
+        expect(screen.getByRole('tab', { name: /json/i })).toBeInTheDocument();
+    });
+
+    it('shows diagram tab by default', () => {
+        render(
+            <MemoryRouter>
+                <ArchitectureSection data={architectureData} />
+            </MemoryRouter>
+        );
+
+        expect(screen.getByTestId('drawer')).toBeInTheDocument();
+        expect(screen.getByTestId('drawer')).toHaveTextContent('Drawer for test-arch');
+    });
+
+    it('switches to JSON tab when clicked', async () => {
+        const user = userEvent.setup();
+        render(
+            <MemoryRouter>
+                <ArchitectureSection data={architectureData} />
+            </MemoryRouter>
+        );
+
+        const jsonTab = screen.getByRole('tab', { name: /json/i });
+        await user.click(jsonTab);
+
+        expect(screen.getByTestId('monaco-editor')).toBeInTheDocument();
+        expect(screen.queryByTestId('drawer')).not.toBeInTheDocument();
+    });
+
+    it('switches back to diagram tab when clicked', async () => {
+        const user = userEvent.setup();
+        render(
+            <MemoryRouter>
+                <ArchitectureSection data={architectureData} />
+            </MemoryRouter>
+        );
+
+        const jsonTab = screen.getByRole('tab', { name: /json/i });
+        await user.click(jsonTab);
+
+        expect(screen.getByTestId('monaco-editor')).toBeInTheDocument();
+
+        const diagramTab = screen.getByRole('tab', { name: /diagram/i });
+        await user.click(diagramTab);
+
+        expect(screen.getByTestId('drawer')).toBeInTheDocument();
+        expect(screen.queryByTestId('monaco-editor')).not.toBeInTheDocument();
+    });
+
+    it('applies active styles to the selected tab', async () => {
+        const user = userEvent.setup();
+        render(
+            <MemoryRouter>
+                <ArchitectureSection data={architectureData} />
+            </MemoryRouter>
+        );
+
+        const diagramTab = screen.getByRole('tab', { name: /diagram/i });
+        const jsonTab = screen.getByRole('tab', { name: /json/i });
+
+        // Diagram tab should be active by default
+        expect(diagramTab).toHaveClass('tab-active');
+        expect(jsonTab).not.toHaveClass('tab-active');
+
+        // Click JSON tab
+        await user.click(jsonTab);
+
+        expect(jsonTab).toHaveClass('tab-active');
+        expect(diagramTab).not.toHaveClass('tab-active');
+    });
+});

calm-hub-ui/src/hub/components/architecture-section/ArchitectureSection.tsx

@@ -0,0 +1,61 @@
+import { useState } from 'react';
+import { IoConstructOutline, IoEyeOutline, IoCodeOutline } from 'react-icons/io5';
+import { Data } from '../../../model/calm.js';
+import { JsonRenderer } from '../json-renderer/JsonRenderer.js';
+import { Drawer } from '../../../visualizer/components/drawer/Drawer.js';
+import { SectionHeader } from '../section-header/SectionHeader.js';
+
+interface ArchitectureSectionProps {
+    data: Data & { calmType: 'Architectures' };
+}
+
+export function ArchitectureSection({ data }: ArchitectureSectionProps) {
+    const [activeTab, setActiveTab] = useState<'diagram' | 'json'>('diagram');
+
+    const tabs = (
+        <div role="tablist" className="tabs tabs-boxed tabs-sm bg-base-100">
+            <button
+                role="tab"
+                className={`tab gap-1 rounded-lg ${activeTab === 'diagram' ? 'tab-active !bg-accent !text-white' : ''}`}
+                onClick={() => setActiveTab('diagram')}
+            >
+                <IoEyeOutline />
+                Diagram
+            </button>
+            <button
+                role="tab"
+                className={`tab gap-1 rounded-lg ${activeTab === 'json' ? 'tab-active !bg-accent !text-white' : ''}`}
+                onClick={() => setActiveTab('json')}
+            >
+                <IoCodeOutline />
+                JSON
+            </button>
+        </div>
+    );
+
+    return (
+        <div className="w-full h-full py-4 pl-2 pr-4">
+            <div className="h-full bg-base-100 rounded-2xl overflow-hidden flex flex-col shadow-xl">
+                <SectionHeader
+                    icon={<IoConstructOutline className="text-accent" />}
+                    namespace={data.name}
+                    id={data.id}
+                    version={data.version}
+                    rightContent={tabs}
+                />
+
+                <div className="flex-1 min-h-0 overflow-hidden">
+                    {activeTab === 'diagram' ? (
+                        <div className="w-full h-full">
+                            <Drawer data={data} />
+                        </div>
+                    ) : (
+                        <div className="h-full bg-base-200 overflow-auto">
+                            <JsonRenderer json={data} />
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+}

calm-hub-ui/src/hub/components/document-detail-section/DocumentDetailSection.test.tsx

@@ -0,0 +1,89 @@
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { DocumentDetailSection } from './DocumentDetailSection.js';
+import { describe, it, expect, vi } from 'vitest';
+import { Data } from '../../../model/calm.js';
+
+vi.mock('react-router-dom', async () => {
+    const actual = await vi.importActual('react-router-dom');
+    return {
+        ...actual,
+        useNavigate: vi.fn(() => vi.fn()),
+    };
+});
+
+vi.mock('@monaco-editor/react', () => ({
+    Editor: ({ value }: { value: string }) => <textarea value={value} readOnly data-testid="monaco-editor" />
+}));
+
+describe('DocumentDetailSection', () => {
+    it('renders null when data is undefined', () => {
+        const { container } = render(
+            <MemoryRouter>
+                <DocumentDetailSection data={undefined} />
+            </MemoryRouter>
+        );
+        expect(container.firstChild).toBeNull();
+    });
+
+    it('renders Patterns with correct icon', () => {
+        const data: Data = {
+            id: 'test-pattern',
+            version: '1.0.0',
+            name: 'my-namespace',
+            calmType: 'Patterns',
+            data: undefined,
+        };
+
+        render(
+            <MemoryRouter>
+                <DocumentDetailSection data={data} />
+            </MemoryRouter>
+        );
+
+        const heading = screen.getByRole('heading');
+        expect(heading).toHaveTextContent('my-namespace');
+        expect(heading).toHaveTextContent('test-pattern');
+        expect(heading).toHaveTextContent('1.0.0');
+    });
+
+    it('renders Flows with correct icon', () => {
+        const data: Data = {
+            id: 'test-flow',
+            version: '2.0.0',
+            name: 'flow-namespace',
+            calmType: 'Flows',
+            data: undefined,
+        };
+
+        render(
+            <MemoryRouter>
+                <DocumentDetailSection data={data} />
+            </MemoryRouter>
+        );
+
+        const heading = screen.getByRole('heading');
+        expect(heading).toHaveTextContent('flow-namespace');
+        expect(heading).toHaveTextContent('test-flow');
+        expect(heading).toHaveTextContent('2.0.0');
+    });
+
+    it('renders JsonRenderer with correct data', () => {
+        const data: Data = {
+            id: 'test-id',
+            version: '1.0.0',
+            name: 'test-namespace',
+            calmType: 'Patterns',
+            data: undefined,
+        };
+
+        render(
+            <MemoryRouter>
+                <DocumentDetailSection data={data} />
+            </MemoryRouter>
+        );
+
+        const textarea = screen.getByTestId('monaco-editor');
+        expect(textarea).toHaveValue(JSON.stringify(data, null, 2));
+    });
+});