Merge pull request #516 from objectstack-ai/copilot/implement-api-driven-metadata

Author: hotlong

apps/console/src/App.tsx

@@ -1,13 +1,13 @@
 import { BrowserRouter, Routes, Route, Navigate, useNavigate, useLocation, useSearchParams } from 'react-router-dom';
-import { useState, useEffect, lazy, Suspense, useMemo } from 'react';
+import { useState, useEffect, lazy, Suspense, useMemo, type ReactNode } from 'react';
 import { ObjectForm } from '@object-ui/plugin-form';
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, Empty, EmptyTitle } from '@object-ui/components';
 import { toast } from 'sonner';
 import { SchemaRendererProvider } from '@object-ui/react';
-import { ObjectStackAdapter } from './dataSource';
 import type { ConnectionState } from './dataSource';
-import appConfig from '../objectstack.shared';
 import { AuthGuard, useAuth, PreviewBanner } from '@object-ui/auth';
+import { MetadataProvider, useMetadata } from './context/MetadataProvider';
+import { AdapterProvider, useAdapter } from './context/AdapterProvider';
 
 // Components (eagerly loaded — always needed)
 import { ConsoleLayout } from './components/ConsoleLayout';
@@ -46,17 +46,42 @@ import { useParams } from 'react-router-dom';
 import { ThemeProvider } from './components/theme-provider';
 import { ConsoleToaster } from './components/ConsoleToaster';
 
+/**
+ * ConnectedShell
+ *
+ * Creates the ObjectStackAdapter (via AdapterProvider), waits for connection,
+ * then wraps children in MetadataProvider for API-driven metadata.
+ */
+function ConnectedShell({ children }: { children: ReactNode }) {
+  return (
+    <AdapterProvider>
+      <ConnectedShellInner>{children}</ConnectedShellInner>
+    </AdapterProvider>
+  );
+}
+
+function ConnectedShellInner({ children }: { children: ReactNode }) {
+  const adapter = useAdapter();
+  if (!adapter) return <LoadingScreen />;
+
+  return (
+    <MetadataProvider adapter={adapter}>
+      {children}
+    </MetadataProvider>
+  );
+}
+
 export function AppContent() {
-  const [dataSource, setDataSource] = useState<ObjectStackAdapter | null>(null);
   const [connectionState, setConnectionState] = useState<ConnectionState>('disconnected');
   const { user } = useAuth();
+  const dataSource = useAdapter();
 
   // App Selection
   const navigate = useNavigate();
   const location = useLocation();
   const [, setSearchParams] = useSearchParams();
   const { appName } = useParams();
-  const apps = appConfig.apps || [];
+  const { apps, objects: allObjects, loading: metadataLoading } = useMetadata();
 
   // Determine active app based on URL
   const activeApps = apps.filter((a: any) => a.active !== false);
@@ -70,48 +95,19 @@ export function AppContent() {
   // Branding is now applied by AppShell via ConsoleLayout
 
   useEffect(() => {
-    let cancelled = false;
-
-    async function initializeDataSource() {
-      try {
-        const adapter = new ObjectStackAdapter({
-          baseUrl: '',
-          autoReconnect: true,
-          maxReconnectAttempts: 5,
-          reconnectDelay: 1000,
-          cache: { maxSize: 50, ttl: 300_000 },
-        });
-
-        // Monitor connection state
-        adapter.onConnectionStateChange((event) => {
-          if (cancelled) return;
-          setConnectionState(event.state);
-          if (event.error) {
-            console.error('[Console] Connection error:', event.error);
-          }
-        });
-
-        await adapter.connect();
-
-        if (!cancelled) {
-          setDataSource(adapter);
-        }
-      } catch (err) {
-        if (!cancelled) {
-          console.error('[Console] Failed to initialize:', err);
-          setConnectionState('error');
-        }
+    if (!dataSource) return;
+    const unsub = dataSource.onConnectionStateChange((event) => {
+      setConnectionState(event.state);
+      if (event.error) {
+        console.error('[Console] Connection error:', event.error);
       }
-    }
-
-    initializeDataSource();
+    });
+    // Sync current state
+    setConnectionState(dataSource.getConnectionState());
+    return unsub;
+  }, [dataSource]);
 
-    return () => {
-      cancelled = true;
-    };
-  }, []);
-
-  const allObjects = appConfig.objects || [];
+  // allObjects already derived from useMetadata() above
 
   // Find current object for Dialog
   // Path is now relative to /apps/:appName/
@@ -140,7 +136,7 @@ export function AppContent() {
       objName = '';
     }
     const basePath = `/apps/${activeApp.name}`;
-    const objects = appConfig.objects || [];
+    const objects = allObjects;
     if (objName) {
       const obj = objects.find((o: any) => o.name === objName);
       if (obj) {
@@ -199,7 +195,7 @@ export function AppContent() {
     [user, activeApp, editingRecord]
   );
 
-  if (!dataSource) return <LoadingScreen />;
+  if (!dataSource || metadataLoading) return <LoadingScreen />;
   if (!activeApp) return (
     <div className="h-screen flex items-center justify-center">
       <Empty>
@@ -372,10 +368,11 @@ function findFirstRoute(items: any[]): string {
 
 // Redirect root to default app
 function RootRedirect() {
-    const apps = appConfig.apps || [];
+    const { apps, loading } = useMetadata();
     const activeApps = apps.filter((a: any) => a.active !== false);
     const defaultApp = activeApps.find((a: any) => a.isDefault === true) || activeApps[0];
 
+    if (loading) return <LoadingScreen />;
     if (defaultApp) {
         return <Navigate to={`/apps/${defaultApp.name}`} replace />;
     }
@@ -396,10 +393,16 @@ export function App() {
                 <Route path="/forgot-password" element={<ForgotPasswordPage />} />
                 <Route path="/apps/:appName/*" element={
                   <AuthGuard fallback={<Navigate to="/login" />} loadingFallback={<LoadingScreen />}>
-                    <AppContent />
+                    <ConnectedShell>
+                      <AppContent />
+                    </ConnectedShell>
                   </AuthGuard>
                 } />
-                <Route path="/" element={<RootRedirect />} />
+                <Route path="/" element={
+                  <ConnectedShell>
+                    <RootRedirect />
+                  </ConnectedShell>
+                } />
             </Routes>
             </Suspense>
         </BrowserRouter>

apps/console/src/__tests__/BrowserSimulation.test.tsx

@@ -59,7 +59,8 @@ const mocks = vi.hoisted(() => {
         async update(_: string, id: string, data: any) { return { ...data, id }; }
         async delete() { return true; }
         async connect() { return true; }
-        onConnectionStateChange() {}
+        onConnectionStateChange() { return () => {}; }
+        getConnectionState() { return 'connected'; }
         discovery = {};
     }
 
@@ -102,6 +103,31 @@ vi.mock('../dataSource', () => ({
     ObjectStackDataSource: mocks.MockDataSource,
 }));
 
+// Mock AdapterProvider to provide a mock adapter directly
+vi.mock('../context/AdapterProvider', () => ({
+    AdapterProvider: ({ children }: any) => <>{children}</>,
+    useAdapter: () => new mocks.MockDataSource(),
+}));
+
+// Mock MetadataProvider to use the real objectstack.shared config as metadata
+vi.mock('../context/MetadataProvider', async () => {
+    const config = await import('../../objectstack.shared');
+    const appConfig = (config.default as any).default || config.default;
+    return {
+        MetadataProvider: ({ children }: any) => <>{children}</>,
+        useMetadata: () => ({
+            apps: appConfig.apps || [],
+            objects: appConfig.objects || [],
+            dashboards: appConfig.dashboards || [],
+            reports: (appConfig as any).reports || [],
+            pages: appConfig.pages || [],
+            loading: false,
+            error: null,
+            refresh: vi.fn(),
+        }),
+    };
+});
+
 // --- 2. Import AppContent ---
 import { AppContent } from '../App';
 

apps/console/src/__tests__/ConsoleApp.test.tsx

@@ -6,7 +6,7 @@ import { MemoryRouter, Routes, Route } from 'react-router-dom';
 
 // --- Mocks ---
 
-// Mock ObjectStack Config
+// Mock ObjectStack Config (still used by MSW mock setup)
 vi.mock('../../objectstack.shared', () => ({
     default: {
         apps: [
@@ -33,6 +33,39 @@ vi.mock('../../objectstack.shared', () => ({
     }
 }));
 
+// Mock MetadataProvider to return static metadata (replaces objectstack.shared in components)
+vi.mock('../context/MetadataProvider', () => ({
+    MetadataProvider: ({ children }: any) => <>{children}</>,
+    useMetadata: () => ({
+        apps: [
+            {
+                name: 'sales',
+                label: 'Sales App',
+                active: true,
+                icon: 'briefcase',
+                navigation: [
+                    { id: 'nav_opp', label: 'Opportunities', type: 'object', objectName: 'opportunity' }
+                ]
+            },
+            {
+                name: 'admin',
+                label: 'Admin',
+                active: true,
+                navigation: []
+            }
+        ],
+        objects: [
+            { name: 'opportunity', label: 'Opportunity', fields: {} }
+        ],
+        dashboards: [],
+        reports: [],
+        pages: [],
+        loading: false,
+        error: null,
+        refresh: vi.fn(),
+    }),
+}));
+
 // Mock Client and DataSource
 vi.mock('@objectstack/client', () => {
     return {
@@ -42,6 +75,18 @@ vi.mock('@objectstack/client', () => {
     };
 });
 
+const MockAdapterInstance = {
+    find: vi.fn().mockResolvedValue([]),
+    findOne: vi.fn(),
+    create: vi.fn(),
+    update: vi.fn(),
+    delete: vi.fn(),
+    connect: vi.fn().mockResolvedValue(true),
+    onConnectionStateChange: vi.fn().mockReturnValue(() => {}),
+    getConnectionState: vi.fn().mockReturnValue('connected'),
+    discovery: {},
+};
+
 vi.mock('../dataSource', () => {
     const MockAdapter = class {
         find = vi.fn().mockResolvedValue([]);
@@ -50,7 +95,8 @@ vi.mock('../dataSource', () => {
         update = vi.fn();
         delete = vi.fn();
         connect = vi.fn().mockResolvedValue(true);
-        onConnectionStateChange = vi.fn();
+        onConnectionStateChange = vi.fn().mockReturnValue(() => {});
+        getConnectionState = vi.fn().mockReturnValue('connected');
         discovery = {};
     };
     return {
@@ -59,6 +105,12 @@ vi.mock('../dataSource', () => {
     };
 });
 
+// Mock AdapterProvider to provide mock adapter directly
+vi.mock('../context/AdapterProvider', () => ({
+    AdapterProvider: ({ children }: any) => <>{children}</>,
+    useAdapter: () => MockAdapterInstance,
+}));
+
 // Mock Child Components (Integration level)
 // We want to verify routing, so we mock the "Page" components but keep Layout structure mostly
 vi.mock('../components/ObjectView', () => ({
@@ -136,17 +188,12 @@ describe('Console App Integration', () => {
     it('initializes and renders default app layout', async () => {
         renderApp();
 
-        // 1. Should show loading initially
-        expect(screen.getByText(/Initializing/i)).toBeInTheDocument();
-
-        // 2. Should eventually show Main Layout (header/sidebar)
+        // With mocked adapter and metadata, the app renders immediately
+        // Check for App Name in sidebar/header config
         await waitFor(() => {
-            expect(screen.queryByText(/Initializing/i)).not.toBeInTheDocument();
+            const appLabels = screen.getAllByText('Sales App');
+            expect(appLabels.length).toBeGreaterThan(0);
         }, { timeout: 10000 });
-
-        // Check for App Name in sidebar/header config
-        const appLabels = screen.getAllByText('Sales App');
-        expect(appLabels.length).toBeGreaterThan(0);
 
         // Check for Navigation Items
         expect(screen.getByText('Opportunities')).toBeInTheDocument();

apps/console/src/__tests__/PageView.test.tsx

@@ -4,14 +4,16 @@ import { render, screen } from '@testing-library/react';
 import { MemoryRouter, Route, Routes } from 'react-router-dom';
 import { PageView } from '../components/PageView';
 
-// Mock appConfig
-vi.mock('../../objectstack.shared', () => ({
-  default: {
+// Mock MetadataProvider to return static page metadata
+vi.mock('../context/MetadataProvider', () => ({
+  useMetadata: () => ({
+    apps: [],
+    objects: [],
+    dashboards: [],
+    reports: [],
     pages: [
       {
         name: 'help_page',
-        // This simulates the fix: ensuring 'app' type renders correctly config-side
-        // But the real component registry needs to support it (which we improved in packages/components)
         type: 'app', 
         label: 'Help Guide',
         regions: [
@@ -30,8 +32,11 @@ vi.mock('../../objectstack.shared', () => ({
             { type: 'text', value: 'Standard Page Content' }
         ]
       }
-    ]
-  }
+    ],
+    loading: false,
+    error: null,
+    refresh: vi.fn(),
+  }),
 }));
 
 // Mock SchemaRenderer to avoid complex component tree rendering

apps/console/src/components/AppSidebar.tsx

@@ -48,7 +48,7 @@ import {
   Star,
   StarOff,
 } from 'lucide-react';
-import appConfig from '../../objectstack.shared';
+import { useMetadata } from '../context/MetadataProvider';
 import { useExpressionContext, evaluateVisibility } from '../context/ExpressionProvider';
 import { useAuth, getUserInitials } from '@object-ui/auth';
 import { usePermissions } from '@object-ui/permissions';
@@ -185,7 +185,8 @@ export function AppSidebar({ activeAppName, onAppChange }: { activeAppName: stri
   const { recentItems } = useRecentItems();
   const { favorites, removeFavorite } = useFavorites();
 
-  const apps = appConfig.apps || [];
+  const { apps: metadataApps } = useMetadata();
+  const apps = metadataApps || [];
   // Filter out inactive apps
   const activeApps = apps.filter((a: any) => a.active !== false);
   const activeApp = activeApps.find((a: any) => a.name === activeAppName) || activeApps[0];