Integrate SchemaRendererProvider into AppContent; update tests to ensure field registration and improve ObjectView logic

Author: hotlong

apps/console/src/App.tsx

@@ -3,6 +3,7 @@ import { useState, useEffect } from 'react';
 import { ObjectStackClient } from '@objectstack/client';
 import { ObjectForm } from '@object-ui/plugin-form';
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, Empty, EmptyTitle } from '@object-ui/components';
+import { SchemaRendererProvider } from '@object-ui/react';
 import { ObjectStackDataSource } from './dataSource';
 import appConfig from '../objectstack.config';
 
@@ -105,6 +106,7 @@ export function AppContent() {
         onAppChange={handleAppChange}
         objects={allObjects}
     >
+      <SchemaRendererProvider dataSource={dataSource || {}}>
       <Routes>
         <Route path="/" element={
              <Navigate to={findFirstRoute(activeApp.navigation)} replace />
@@ -155,6 +157,7 @@ export function AppContent() {
              </div>
           </DialogContent>
        </Dialog>
+      </SchemaRendererProvider>
     </ConsoleLayout>
   );
 }

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

@@ -2,6 +2,7 @@
 import { describe, it, expect, vi } from 'vitest';
 import { render, screen, waitFor, fireEvent } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
+import '@object-ui/fields'; // Ensure fields are registered for ObjectForm tests
 
 // -----------------------------------------------------------------------------
 // SYSTEM INTEGRATION TEST: Console Application
@@ -175,6 +176,9 @@ describe('Console Application Simulation', () => {
         // 3. Verify Dialog Opens
         await waitFor(() => {
             expect(screen.getByRole('dialog')).toBeInTheDocument();
+            // Verify title to ensure object definition was found
+            const title = screen.getByRole('heading', { name: /Create.*Sink/i });
+            expect(title).toBeInTheDocument();
         });
 
         // 4. Verify Field Inputs

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

@@ -56,7 +56,7 @@ vi.mock('../dataSource', () => {
 // 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', () => ({
-    ObjectView: ({ objects }: any) => <div data-testid="object-view">Object View</div>
+    ObjectView: () => <div data-testid="object-view">Object View</div>
 }));
 
 vi.mock('../components/DashboardView', () => ({

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

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { ObjectView } from '../components/ObjectView';
 import { MemoryRouter, Route, Routes } from 'react-router-dom';

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

@@ -19,7 +19,9 @@ vi.mock('@object-ui/plugin-calendar', () => ({
 // Mock UI Components to allow interaction testing without Radix complexity
 vi.mock('@object-ui/components', async () => {
     return {
+        cn: (...inputs: any[]) => inputs.filter(Boolean).join(' '),
         Button: ({ children, onClick }: any) => <button onClick={onClick}>{children}</button>,
+        Input: (props: any) => <input {...props} data-testid="mock-input" />,
         Tabs: ({ value, onValueChange, children }: any) => (
             <div data-testid="tabs" data-value={value} onClick={(e: any) => {
                  // Simple event delegation for testing

apps/console/src/components/ObjectView.tsx

@@ -1,4 +1,4 @@
-import { useState, useMemo } from 'react';
+import { useMemo } from 'react';
 import { useParams, useSearchParams } from 'react-router-dom';
 import { ObjectGantt } from '@object-ui/plugin-gantt';
 import { ListView } from '@object-ui/plugin-list';
@@ -13,7 +13,6 @@ import type { ListViewSchema } from '@object-ui/types';
 export function ObjectView({ dataSource, objects, onEdit }: any) {
     const { objectName } = useParams();
     const [searchParams, setSearchParams] = useSearchParams();
-    const [refreshKey, setRefreshKey] = useState(0);
 
     // Get Object Definition
     const objectDef = objects.find((o: any) => o.name === objectName);
@@ -54,29 +53,12 @@ export function ObjectView({ dataSource, objects, onEdit }: any) {
     const activeViewId = searchParams.get('view') || views[0]?.id;
     const activeView = views.find((v: any) => v.id === activeViewId) || views[0];
 
-    // Helper: Normalize Columns for Grid
-    const getGridColumns = (view: any) => {
-        if (!view.columns) return [];
-        return view.columns.map((colName: string) => {
-             // Find field definition
-             const fieldDef = Array.isArray(objectDef.fields) 
-                ? objectDef.fields.find((f: any) => f.name === colName)
-                : objectDef.fields?.[colName];
-             
-             return {
-                 field: colName,
-                 label: fieldDef?.label || colName,
-                 width: 150
-             };
-        });
-    };
-
     const handleViewChange = (viewId: string) => {
         setSearchParams({ view: viewId });
     };
 
     const renderCurrentView = () => {
-        const key = `${objectName}-${activeView.id}-${refreshKey}`;
+        const key = `${objectName}-${activeView.id}`;
         const commonProps = {
             dataSource,
             className: "h-full border-none"