Merge branch 'main' of https://github.com/objectstack-ai/objectui

Author: hotlong

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

@@ -2,7 +2,6 @@
 import { describe, it, expect, vi } from 'vitest';
 import { render, screen, waitFor, fireEvent } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
-import React from 'react';
 
 // -----------------------------------------------------------------------------
 // SYSTEM INTEGRATION TEST: Console Application
@@ -225,9 +224,9 @@ describe('Console Application Simulation', () => {
             name: 'kitchen_sink',
             fields: {
                 name: { type: 'text', label: 'Name Field' },
-                amount: { type: 'number', label: 'Amount Field' }
+                amount: { type: 'number', label: 'Amount Field', scale: 0 }
             }
-        });
+        } as any);
 
         renderApp('/kitchen_sink');
         await waitFor(() => {
@@ -424,7 +423,7 @@ describe('Kanban Integration', () => {
             }
         };
 
-        vi.spyOn(mocks.MockDataSource.prototype, 'getObjectSchema').mockResolvedValue(mockSchema);
+        vi.spyOn(mocks.MockDataSource.prototype, 'getObjectSchema').mockResolvedValue(mockSchema as any);
 
         // Mock data for the kanban
         const mockTaskData = [
@@ -433,7 +432,7 @@ describe('Kanban Integration', () => {
             { id: '3', title: 'Task 3', description: 'Third task', status: 'done', priority: 'low' }
         ];
 
-        vi.spyOn(mocks.MockDataSource.prototype, 'find').mockResolvedValue({ data: mockTaskData });
+        vi.spyOn(mocks.MockDataSource.prototype, 'find').mockResolvedValue({ data: mockTaskData } as any);
 
         // Create a mock data source
         const dataSource = new mocks.MockDataSource();
@@ -538,7 +537,7 @@ describe('Kanban Integration', () => {
             }
         ];
 
-        vi.spyOn(mocks.MockDataSource.prototype, 'find').mockResolvedValue({ data: seedData });
+        vi.spyOn(mocks.MockDataSource.prototype, 'find').mockResolvedValue({ data: seedData } as any);
         vi.spyOn(mocks.MockDataSource.prototype, 'getObjectSchema').mockResolvedValue({
             name: 'project_task',
             fields: {
@@ -547,7 +546,7 @@ describe('Kanban Integration', () => {
                 status: { type: 'picklist', label: 'Status' },
                 priority: { type: 'picklist', label: 'Priority' }
             }
-        });
+        } as any);
 
         // Create a mock data source
         const dataSource = new mocks.MockDataSource();
@@ -588,7 +587,6 @@ describe('Kanban Integration', () => {
         const { KanbanRenderer } = await import('@object-ui/plugin-kanban');
 
         // Setup: Spy on update method (though drag-drop in JSDOM is complex)
-        const updateSpy = vi.fn().mockResolvedValue({ id: 'task-1', status: 'done' });
         const onCardMoveSpy = vi.fn();
 
         // Simple static data test with event binding
@@ -689,7 +687,7 @@ describe('Kanban Integration', () => {
 
         const findSpy = vi.spyOn(mocks.MockDataSource.prototype, 'find').mockResolvedValue({ 
             data: initialData 
-        });
+        } as any);
 
         vi.spyOn(mocks.MockDataSource.prototype, 'getObjectSchema').mockResolvedValue({
             name: 'project_task',
@@ -698,11 +696,11 @@ describe('Kanban Integration', () => {
                 status: { type: 'picklist', label: 'Status' },
                 priority: { type: 'picklist', label: 'Priority' }
             }
-        });
+        } as any);
 
         const dataSource = new mocks.MockDataSource();
 
-        const { rerender } = render(
+        render(
             <ObjectKanban
                 schema={{
                     type: 'kanban',
@@ -812,6 +810,7 @@ describe('Dashboard Integration', () => {
     });
 
     it('Scenario C: Component Registry Check', async () => {
+        // @ts-expect-error - Importing from transitive dependency for testing
         const { ComponentRegistry } = await import('@object-ui/core');
 
         const dashboardRenderer = ComponentRegistry.get('dashboard');

packages/plugin-dashboard/src/DashboardRenderer.tsx

@@ -6,7 +6,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { ComponentRegistry } from '@object-ui/core';
 import type { DashboardSchema, DashboardWidgetSchema } from '@object-ui/types';
 import { SchemaRenderer } from '@object-ui/react';
 import { cn } from '@object-ui/components';

packages/plugin-dashboard/src/ReportRenderer.tsx

@@ -17,10 +17,14 @@ export interface ReportRendererProps {
 
 export const ReportRenderer: React.FC<ReportRendererProps> = ({ schema }) => {
   const { title, description, data, columns } = schema;
-  const ChartComponent = schema.chart ? ComponentRegistry.get(schema.chart.type || 'chart') : null;
+  
+  // Get chart component type but don't store the component itself
+  const chartType = schema.chart?.type || 'chart';
+  const hasChart = !!schema.chart;
+  
   // In test environment, force fallback to simple table to avoid AG Grid complexity in JSDOM
   const isTest = process.env.NODE_ENV === 'test';
-  const GridComponent = isTest ? null : (ComponentRegistry.get('aggrid') || ComponentRegistry.get('table'));
+  const showGrid = !isTest;
 
   return (
     <Card className={`h-full flex flex-col ${schema.className || ''}`}>
@@ -30,47 +34,53 @@ export const ReportRenderer: React.FC<ReportRendererProps> = ({ schema }) => {
       </CardHeader>
       <CardContent className="flex-1 overflow-auto space-y-4">
         {/* Render Chart Section if present */}
-        {schema.chart && ChartComponent && (
-          <div className="min-h-[300px] border rounded-md p-4 bg-white/50">
-            <ChartComponent schema={{ ...schema.chart, data }} />
-          </div>
-        )}
+        {hasChart && (() => {
+          const ChartComponent = ComponentRegistry.get(chartType);
+          return ChartComponent ? (
+            <div className="min-h-[300px] border rounded-md p-4 bg-white/50">
+              <ChartComponent schema={{ ...schema.chart, data }} />
+            </div>
+          ) : null;
+        })()}
 
         {/* Render Data Grid Section */}
         {data && data.length > 0 && (
           <div className="border rounded-md">
-             {GridComponent ? (
-                 <GridComponent 
+             {(() => {
+               const GridComponent = showGrid ? (ComponentRegistry.get('aggrid') || ComponentRegistry.get('table')) : null;
+               return GridComponent ? (
+                  <GridComponent 
                     schema={{ 
-                        type: 'aggrid', 
-                        rowData: data, 
-                        columnDefs: columns,
-                        domLayout: 'autoHeight'
-                    }} 
-                 />
-             ) : (
-                // Simple Fallback Table if Grid plugin missing
-                <div className="overflow-x-auto">
-                    <table className="w-full text-sm text-left">
-                        <thead className="text-xs uppercase bg-gray-50">
-                            <tr>
-                                {columns?.map((col: any) => (
-                                    <th key={col.field} className="px-6 py-3">{col.headerName || col.label || col.field}</th>
-                                ))}
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {data.map((row: any, i: number) => (
-                                <tr key={i} className="bg-white border-b">
-                                    {columns?.map((col: any) => (
-                                        <td key={col.field} className="px-6 py-4">{row[col.field]}</td>
-                                    ))}
-                                </tr>
-                            ))}
-                        </tbody>
-                    </table>
-                </div>
-             )}
+                      type: 'aggrid', 
+                      rowData: data, 
+                      columnDefs: columns,
+                      domLayout: 'autoHeight'
+                    }}
+                  />
+              ) : (
+                 // Simple Fallback Table if Grid plugin missing
+                 <div className="overflow-x-auto">
+                     <table className="w-full text-sm text-left">
+                         <thead className="text-xs uppercase bg-gray-50">
+                             <tr>
+                                 {columns?.map((col: any) => (
+                                     <th key={col.field} className="px-6 py-3">{col.headerName || col.label || col.field}</th>
+                                 ))}
+                             </tr>
+                         </thead>
+                         <tbody>
+                             {data.map((row: any, i: number) => (
+                                 <tr key={i} className="bg-white border-b">
+                                     {columns?.map((col: any) => (
+                                         <td key={col.field} className="px-6 py-4">{row[col.field]}</td>
+                                     ))}
+                                 </tr>
+                             ))}
+                         </tbody>
+                     </table>
+                 </div>
+              );
+             })()}
           </div>
         )}
       </CardContent>