Merge branch 'main' of https://github.com/finos/architecture-as-code into deeplink

aamanrebello · aamanrebello · commit 3b0b62c8b692 · 2026-03-09T09:34:31.000Z
diff --git a/calm-hub-ui/.prettierrc b/calm-hub-ui/.prettierrc
@@ -5,5 +5,5 @@
     "singleQuote": true,
     "bracketSpacing": true,
     "endOfLine": "auto",
-    "printWidth": 100
-}
+    "printWidth": 140
+}
diff --git a/calm-hub-ui/src/hub/Hub.test.tsx b/calm-hub-ui/src/hub/Hub.test.tsx
@@ -8,12 +8,19 @@ vi.mock('./components/tree-navigation/TreeNavigation', () => ({
     TreeNavigation: ({
         onDataLoad,
         onAdrLoad,
+        onCollapse,
     }: {
         onDataLoad: (data: unknown) => void;
         onAdrLoad: (adr: unknown) => void;
+        onCollapse?: () => void;
     }) => (
         <div data-testid="tree-navigation">
             <div>Tree Navigation</div>
+            {onCollapse && (
+                <button aria-label="Collapse sidebar" onClick={onCollapse}>
+                    Collapse
+                </button>
+            )}
             <button
                 onClick={() =>
                     onDataLoad({
diff --git a/calm-hub-ui/src/hub/Hub.tsx b/calm-hub-ui/src/hub/Hub.tsx
@@ -1,5 +1,5 @@
 import { useMemo, useState } from 'react';
-import { IoChevronBackOutline, IoChevronForwardOutline } from 'react-icons/io5';
+import { IoChevronForwardOutline } from 'react-icons/io5';
 import { TreeNavigation } from './components/tree-navigation/TreeNavigation.js';
 import { Data, Adr } from '../model/calm.js';
 import { Navbar } from '../components/navbar/Navbar.js';
@@ -33,20 +33,9 @@ export default function Hub() {
                 <div className={`${isSidebarOpen ? 'w-1/4' : 'w-12'} p-4 pr-2 transition-all duration-300`}>
                     <div className="h-full bg-base-100 rounded-2xl overflow-hidden shadow-xl flex flex-col">
                         {isSidebarOpen ? (
-                            <>
-                                <div className="flex items-center justify-end px-2 pt-2">
-                                    <button
-                                        aria-label="Collapse sidebar"
-                                        className="btn btn-ghost btn-xs btn-circle"
-                                        onClick={() => setIsSidebarOpen(false)}
-                                    >
-                                        <IoChevronBackOutline />
-                                    </button>
-                                </div>
-                                <div className="flex-1 min-h-0 overflow-hidden">
-                                    <TreeNavigation onDataLoad={memoizedDataLoad} onAdrLoad={memoizedAdrLoad} />
-                                </div>
-                            </>
+                            <div className="flex-1 min-h-0 overflow-hidden">
+                                <TreeNavigation onDataLoad={memoizedDataLoad} onAdrLoad={memoizedAdrLoad} onCollapse={() => setIsSidebarOpen(false)} />
+                            </div>
                         ) : (
                             <div className="flex items-center justify-center pt-3">
                                 <button
diff --git a/calm-hub-ui/src/hub/components/tree-navigation/TreeNavigation.tsx b/calm-hub-ui/src/hub/components/tree-navigation/TreeNavigation.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { IoCompassOutline } from 'react-icons/io5';
+import { IoCompassOutline, IoChevronBackOutline } from 'react-icons/io5';
 import {
     fetchNamespaces,
     fetchPatternIDs,
@@ -62,6 +62,7 @@ const EMPTY_STR_VALUE = '';
 interface TreeNavigationProps {
     onDataLoad: (data: Data) => void;
     onAdrLoad: (adr: Adr) => void;
+    onCollapse?: () => void;
 }
 
 interface VersionItemProps {
@@ -339,7 +340,7 @@ function loadResource({
     }
 }
 
-export function TreeNavigation({ onDataLoad, onAdrLoad }: TreeNavigationProps) {
+export function TreeNavigation({ onDataLoad, onAdrLoad, onCollapse }: TreeNavigationProps) {
     const navigate = useNavigate();
     const params = useParams<HubParams>();
     
@@ -481,11 +482,20 @@ export function TreeNavigation({ onDataLoad, onAdrLoad }: TreeNavigationProps) {
 
     return (
         <div className="h-full w-full flex flex-col">
-            <div className="bg-base-200 px-6 py-4 border-b border-base-300">
+            <div className="bg-base-200 px-6 py-4 border-b border-base-300 flex items-center justify-between">
                 <h2 className="text-xl font-semibold flex items-center gap-2">
                     <IoCompassOutline className="text-accent" />
                     Explore
                 </h2>
+                {onCollapse && (
+                    <button
+                        aria-label="Collapse sidebar"
+                        className="btn btn-ghost btn-xs btn-circle"
+                        onClick={onCollapse}
+                    >
+                        <IoChevronBackOutline />
+                    </button>
+                )}
             </div>
 
             <div className="flex-1 overflow-auto p-4">
diff --git a/calm-hub-ui/src/index.css b/calm-hub-ui/src/index.css
@@ -4,8 +4,8 @@
 }
 
 /*
- * Theme colors are defined in src/theme/colors.ts (TypeScript)
- * CSS styles below use hardcoded hex values matching that file.
+ * Brand colors (--color-primary, --color-accent, --color-accent-light)
+ * are set at runtime from src/theme/colors.ts via initThemeCssVars().
  */
 
 #root {
diff --git a/calm-hub-ui/src/index.tsx b/calm-hub-ui/src/index.tsx
@@ -4,8 +4,11 @@ import ReactDOM from 'react-dom/client';
 import ProtectedRoute from './ProtectedRoute.js';
 import { isAuthServiceEnabled } from './authService.js';
 import App from './App.js';
+import { initThemeCssVars } from './theme/colors.js';   
 import { LogoutButton } from './components/logout-button/LogoutButton.js';
 
+initThemeCssVars();
+
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 
 const isAuthenticationEnabled = isAuthServiceEnabled();
diff --git a/calm-hub-ui/src/service/calm-service.tsx b/calm-hub-ui/src/service/calm-service.tsx
@@ -12,10 +12,9 @@ export async function fetchNamespaces(setNamespaces: (namespaces: string[]) => v
             headers,
         });
         const data = await res.json();
-        const values = Array.isArray(data?.values) ? data.values : [];
-        const namespaces = values
+        const namespaces = (data?.values ?? [])
             .map((v: { name?: string }) => v?.name)
-            .filter((name): name is string => typeof name === 'string');
+            .filter((name: string | undefined): name is string => !!name);
         setNamespaces(namespaces);
     } catch (error) {
         console.error('Error fetching namespaces:', error);
diff --git a/calm-hub-ui/src/theme/colors.ts b/calm-hub-ui/src/theme/colors.ts
@@ -4,6 +4,9 @@
  * This file defines all color values used throughout the application.
  * Components should import from this file rather than defining colors inline.
  *
+ * Brand colors are also exposed as CSS custom properties via initThemeCssVars()
+ * called at app startup, so they can be used in Tailwind/DaisyUI contexts.
+ *
  * Note: ReactFlow and inline styles need direct hex values because:
  * 1. They can't use CSS variables in some contexts (e.g., SVG markers)
  * 2. We need to create transparent variants (e.g., `${color}20`)
@@ -109,3 +112,15 @@ export const colors = {
 } as const;
 
 export type Colors = typeof colors;
+
+/**
+ * Sets CSS custom properties on the document root from colors.brand,
+ * so Tailwind/DaisyUI classes can reference them without duplicating values.
+ * Call once at app startup (e.g., in index.tsx).
+ */
+export function initThemeCssVars(): void {
+    const root = document.documentElement;
+    root.style.setProperty('--color-primary', colors.brand.primary);
+    root.style.setProperty('--color-accent', colors.brand.accent);
+    root.style.setProperty('--color-accent-light', colors.brand.accentLight);
+}
diff --git a/calm-hub-ui/src/visualizer/components/drawer/Drawer.tsx b/calm-hub-ui/src/visualizer/components/drawer/Drawer.tsx
@@ -1,16 +1,11 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import {
-    CalmArchitectureSchema,
-    CalmNodeSchema,
-    CalmRelationshipSchema,
-} from '@finos/calm-models/types';
+import { CalmArchitectureSchema, CalmNodeSchema, CalmRelationshipSchema } from '@finos/calm-models/types';
 import { useDropzone } from 'react-dropzone';
 import { ReactFlowVisualizer } from '../reactflow/ReactFlowVisualizer.js';
 import { PatternVisualizer } from '../reactflow/PatternVisualizer.js';
 import { Sidebar } from '../sidebar/Sidebar.js';
 import { MetadataPanel } from '../reactflow/MetadataPanel.js';
 import { toSidebarNodeData, toSidebarEdgeData } from '../reactflow/utils/patternClickHandlers.js';
-import { THEME } from '../reactflow/theme.js';
 import type { DrawerProps, SelectedItem, Flow, Control } from '../../contracts/contracts.js';
 
 /**
@@ -21,8 +16,7 @@ function isPatternData(data: unknown): boolean {
     if (!data || typeof data !== 'object') return false;
     const obj = data as Record<string, unknown>;
     const props = obj['properties'] as Record<string, unknown> | undefined;
-    return !!(props?.['nodes'] && typeof props['nodes'] === 'object' &&
-        (props['nodes'] as Record<string, unknown>)['prefixItems']);
+    return !!(props?.['nodes'] && typeof props['nodes'] === 'object' && (props['nodes'] as Record<string, unknown>)['prefixItems']);
 }
 
 /**
@@ -37,7 +31,6 @@ export function Drawer({ data }: DrawerProps) {
     const [patternInstance, setPatternInstance] = useState<Record<string, unknown> | undefined>(undefined);
     const [fileInstance, setFileInstance] = useState<Record<string, unknown> | undefined>(undefined);
     const [selectedItem, setSelectedItem] = useState<SelectedItem>(null);
-    const [title, setTitle] = useState<string>('');
     // Default to collapsed as per user request
     const [isMetadataCollapsed, setIsMetadataCollapsed] = useState(true);
     // Height of the metadata panel when expanded (in pixels)
@@ -48,24 +41,17 @@ export function Drawer({ data }: DrawerProps) {
             const fileText = await acceptedFiles[0].text();
             const parsed = JSON.parse(fileText);
             setFileInstance(parsed);
-            setTitle(acceptedFiles[0].name);
         }
     }, []);
 
     const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
 
     useEffect(() => {
         const source = fileInstance ?? data?.data;
-        const isPattern = !!source && (
-            isPatternData(source) || (!fileInstance && data?.calmType === 'Patterns')
-        );
+        const isPattern = !!source && (isPatternData(source) || (!fileInstance && data?.calmType === 'Patterns'));
 
         setPatternInstance(isPattern ? (source as Record<string, unknown>) : undefined);
         setCALMInstance(isPattern ? undefined : (source as CalmArchitectureSchema | undefined));
-
-        if (data?.name && data?.id && data?.version) {
-            setTitle(`${data.name}/${data.id}/${data.version}`);
-        }
     }, [fileInstance, data]);
 
     // Extract flows from CALM data
@@ -76,7 +62,9 @@ export function Drawer({ data }: DrawerProps) {
 
     // Extract controls from CALM data (from root, nodes, and relationships)
     const controls = useMemo((): Record<string, Control> => {
-        const calmData = calmInstance as CalmArchitectureSchema & { controls?: Record<string, Control> };
+        const calmData = calmInstance as CalmArchitectureSchema & {
+            controls?: Record<string, Control>;
+        };
         if (!calmData) return {};
 
         const rootControls: Record<string, Control> = calmData.controls || {};
@@ -147,20 +135,26 @@ export function Drawer({ data }: DrawerProps) {
     }, []);
 
     // Handle transition click from flows panel - highlight the relationship
-    const handleTransitionClick = useCallback((relationshipId: string) => {
-        const relationship = calmInstance?.relationships?.find((r) => r['unique-id'] === relationshipId);
-        if (relationship) {
-            handleEdgeClick(relationship);
-        }
-    }, [calmInstance, handleEdgeClick]);
+    const handleTransitionClick = useCallback(
+        (relationshipId: string) => {
+            const relationship = calmInstance?.relationships?.find((r) => r['unique-id'] === relationshipId);
+            if (relationship) {
+                handleEdgeClick(relationship);
+            }
+        },
+        [calmInstance, handleEdgeClick]
+    );
 
     // Handle node click from controls panel
-    const handleControlNodeClick = useCallback((nodeId: string) => {
-        const node = calmInstance?.nodes?.find((n) => n['unique-id'] === nodeId);
-        if (node) {
-            handleNodeClick(node);
-        }
-    }, [calmInstance, handleNodeClick]);
+    const handleControlNodeClick = useCallback(
+        (nodeId: string) => {
+            const node = calmInstance?.nodes?.find((n) => n['unique-id'] === nodeId);
+            if (node) {
+                handleNodeClick(node);
+            }
+        },
+        [calmInstance, handleNodeClick]
+    );
 
     return (
         <div {...getRootProps()} className="flex-1 flex overflow-hidden h-full">
@@ -176,28 +170,11 @@ export function Drawer({ data }: DrawerProps) {
                 <div className="drawer-content h-full flex flex-col">
                     {hasContent ? (
                         <>
-                            {title && (
-                                <div
-                                    style={{
-                                        padding: '8px 16px',
-                                        borderBottom: `1px solid ${THEME.colors.border}`,
-                                        backgroundColor: THEME.colors.backgroundSecondary,
-                                        fontSize: '14px',
-                                        fontWeight: 500,
-                                        color: THEME.colors.foreground,
-                                        flexShrink: 0,
-                                    }}
-                                >
-                                    {title}
-                                </div>
-                            )}
                             <div
                                 style={{
                                     flex: 1,
                                     minHeight: 0,
-                                    ...(hasMetadata && !isMetadataCollapsed
-                                        ? { height: `calc(100% - ${metadataPanelHeight}px)` }
-                                        : {}),
+                                    ...(hasMetadata && !isMetadataCollapsed ? { height: `calc(100% - ${metadataPanelHeight}px)` } : {}),
                                 }}
                             >
                                 {patternInstance ? (

Original file line number	Diff line number	Diff line change
`@@ -4,8 +4,8 @@`
`4`	`4`	`}`
`5`	`5`
`6`	`6`	`/*`
`7`		`- * Theme colors are defined in src/theme/colors.ts (TypeScript)`
`8`		`- * CSS styles below use hardcoded hex values matching that file.`
	`7`	`+ * Brand colors (--color-primary, --color-accent, --color-accent-light)`
	`8`	`+ * are set at runtime from src/theme/colors.ts via initThemeCssVars().`
`9`	`9`	`*/`
`10`	`10`
`11`	`11`	`#root {`