Merge pull request #939 from objectstack-ai/copilot/fix-inline-data-schema-loading

Author: hotlong

packages/plugin-grid/src/ObjectGrid.tsx

@@ -287,6 +287,34 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
     }
   }, [hasInlineData, dataConfig]);
 
+  // --- Inline data: still fetch objectSchema for type-aware rendering ---
+  // When data is inline (provider: 'value'), we skip the data fetch but still need
+  // the object schema to resolve field types (lookup, select, currency, etc.) and
+  // enable proper CellRenderer selection.
+  useEffect(() => {
+    if (!hasInlineData) return;
+    if (!objectName || !dataSource) return;
+
+    let cancelled = false;
+
+    const fetchSchema = async () => {
+      try {
+        const schemaData = await dataSource.getObjectSchema(objectName);
+        if (!cancelled) {
+          setObjectSchema(schemaData);
+        }
+      } catch (err) {
+        // Schema fetch failure for inline data is non-fatal; columns will
+        // still fall back to heuristic inference.
+        console.warn(`[ObjectGrid] Failed to fetch objectSchema for inline data (objectName: ${objectName}):`, err);
+      }
+    };
+
+    fetchSchema();
+
+    return () => { cancelled = true; };
+  }, [hasInlineData, objectName, dataSource]);
+
   // --- Unified async data loading effect ---
   // Combines schema fetch + data fetch into a single async flow with AbortController.
   // This avoids the fragile "chained effects" pattern where Effect 1 sets objectSchema,
@@ -823,10 +851,39 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
       const inlineData = dataConfig?.provider === 'value' ? dataConfig.items as any[] : [];
       if (inlineData.length > 0) {
         const fieldsToShow = schemaFields || Object.keys(inlineData[0]);
-        return fieldsToShow.map((fieldName) => ({
-          header: fieldName.charAt(0).toUpperCase() + fieldName.slice(1).replace(/_/g, ' '),
-          accessorKey: fieldName,
-        }));
+        return fieldsToShow.map((fieldName) => {
+          const fieldDef = objectSchema?.fields?.[fieldName];
+          const resolvedType = fieldDef?.type || inferColumnType({ field: fieldName }) || null;
+          const CellRenderer = resolvedType ? getCellRenderer(resolvedType) : null;
+          const header = fieldDef?.label || fieldName.charAt(0).toUpperCase() + fieldName.slice(1).replace(/_/g, ' ');
+
+          // Build field metadata with objectDef enrichment
+          const fieldMeta: Record<string, any> = { name: fieldName, type: resolvedType || 'text' };
+          if (fieldDef) {
+            if (fieldDef.label) fieldMeta.label = fieldDef.label;
+            if (fieldDef.currency) fieldMeta.currency = fieldDef.currency;
+            if (fieldDef.precision !== undefined) fieldMeta.precision = fieldDef.precision;
+            if (fieldDef.format) fieldMeta.format = fieldDef.format;
+            if (fieldDef.options) fieldMeta.options = fieldDef.options;
+          }
+          // Auto-generate select options from data when no options defined
+          if (resolvedType === 'select' && !fieldMeta.options) {
+            const uniqueValues = Array.from(new Set(data.map(row => row[fieldName]).filter(Boolean)));
+            fieldMeta.options = uniqueValues.map((v: any) => ({ value: v, label: humanizeLabel(String(v)) }));
+          }
+
+          const numericTypes = ['number', 'currency', 'percent'];
+          const inferredAlign = resolvedType && numericTypes.includes(resolvedType) ? 'right' as const : undefined;
+
+          return {
+            header,
+            accessorKey: fieldName,
+            ...(resolvedType && { headerIcon: getTypeIcon(resolvedType) }),
+            ...(inferredAlign && { align: inferredAlign }),
+            ...(CellRenderer && { cell: (value: any) => <CellRenderer value={value} field={fieldMeta as any} /> }),
+            sortable: fieldDef?.sortable !== false,
+          };
+        });
       }
     }
 

packages/plugin-grid/src/__tests__/objectdef-enrichment.test.tsx

@@ -352,3 +352,215 @@ describe('ListColumn[] with DataSource objectDef merge', () => {
     expect(wonBadge).toHaveClass('bg-blue-100');
   });
 });
+
+// =========================================================================
+// Inline data + DataSource: schema should be fetched for type-aware rendering
+// (Regression test for: inline data skipping objectSchema load)
+// =========================================================================
+describe('Inline data with DataSource schema fetch', () => {
+  it('should fetch objectSchema even when data is inline (provider: value)', async () => {
+    const mockDataSource = createMockDataSource(opportunitySchema, []);
+
+    const schema: any = {
+      type: 'object-grid' as const,
+      objectName: 'opportunity',
+      data: { provider: 'value', items: opportunityData },
+      columns: ['name', 'amount', 'stage', 'close_date', 'probability'],
+    };
+
+    render(
+      <ActionProvider>
+        <ObjectGrid schema={schema} dataSource={mockDataSource} />
+      </ActionProvider>
+    );
+
+    // Schema should be fetched even with inline data
+    await waitFor(() => {
+      expect(mockDataSource.getObjectSchema).toHaveBeenCalledWith('opportunity');
+    });
+
+    // Data should render
+    await waitFor(() => {
+      expect(screen.getByText('Enterprise License')).toBeInTheDocument();
+    });
+
+    // Amount should be formatted as currency using objectSchema field type
+    await waitFor(() => {
+      expect(screen.getByText('$150,000.00')).toBeInTheDocument();
+    });
+
+    // Stage should render with labels from objectSchema options
+    await waitFor(() => {
+      expect(screen.getByText('Closed Won')).toBeInTheDocument();
+    });
+
+    // Stage badge should have color from objectSchema
+    const closedWonBadge = screen.getByText('Closed Won');
+    expect(closedWonBadge).toHaveClass('bg-green-100');
+
+    // find() should NOT have been called (data is inline)
+    expect(mockDataSource.find).not.toHaveBeenCalled();
+  });
+
+  it('should use objectSchema labels for column headers with inline data', async () => {
+    const mockDataSource = createMockDataSource(opportunitySchema, []);
+
+    const schema: any = {
+      type: 'object-grid' as const,
+      objectName: 'opportunity',
+      data: { provider: 'value', items: opportunityData },
+      columns: ['name', 'amount', 'close_date'],
+    };
+
+    render(
+      <ActionProvider>
+        <ObjectGrid schema={schema} dataSource={mockDataSource} />
+      </ActionProvider>
+    );
+
+    await waitFor(() => {
+      expect(mockDataSource.getObjectSchema).toHaveBeenCalledWith('opportunity');
+    });
+
+    // Headers should use objectSchema labels (not raw field names)
+    await waitFor(() => {
+      expect(screen.getByText('Opportunity Name')).toBeInTheDocument();
+    });
+    expect(screen.getByText('Amount')).toBeInTheDocument();
+    expect(screen.getByText('Close Date')).toBeInTheDocument();
+  });
+
+  it('should render lookup/select fields with CellRenderers when inline data + objectSchema', async () => {
+    const lookupSchema = {
+      name: 'order',
+      fields: {
+        name: { name: 'name', type: 'text', label: 'Order' },
+        status: {
+          name: 'status', type: 'select', label: 'Status',
+          options: [
+            { value: 'pending', label: 'Pending', color: 'yellow' },
+            { value: 'shipped', label: 'Shipped', color: 'blue' },
+            { value: 'delivered', label: 'Delivered', color: 'green' },
+          ],
+        },
+        assigned_to: { name: 'assigned_to', type: 'lookup', label: 'Assigned To' },
+      },
+    };
+
+    const inlineOrderData = [
+      { _id: 'o1', name: 'Order 001', status: 'pending', assigned_to: 'Alice' },
+      { _id: 'o2', name: 'Order 002', status: 'shipped', assigned_to: 'Bob' },
+      { _id: 'o3', name: 'Order 003', status: 'delivered', assigned_to: 'Charlie' },
+    ];
+
+    const mockDataSource = createMockDataSource(lookupSchema, []);
+
+    const schema: any = {
+      type: 'object-grid' as const,
+      objectName: 'order',
+      data: { provider: 'value', items: inlineOrderData },
+      columns: ['name', 'status', 'assigned_to'],
+    };
+
+    render(
+      <ActionProvider>
+        <ObjectGrid schema={schema} dataSource={mockDataSource} />
+      </ActionProvider>
+    );
+
+    // Schema should be fetched
+    await waitFor(() => {
+      expect(mockDataSource.getObjectSchema).toHaveBeenCalledWith('order');
+    });
+
+    // Status should render with select renderer (colored badges)
+    await waitFor(() => {
+      expect(screen.getByText('Pending')).toBeInTheDocument();
+    });
+
+    const pendingBadge = screen.getByText('Pending');
+    expect(pendingBadge).toHaveClass('bg-yellow-100');
+
+    const shippedBadge = screen.getByText('Shipped');
+    expect(shippedBadge).toHaveClass('bg-blue-100');
+
+    // find() should NOT be called
+    expect(mockDataSource.find).not.toHaveBeenCalled();
+  });
+
+  it('should enrich legacy inline data fallback (no columns) with objectSchema', async () => {
+    const mockDataSource = createMockDataSource(opportunitySchema, []);
+
+    const schema: any = {
+      type: 'object-grid' as const,
+      objectName: 'opportunity',
+      data: { provider: 'value', items: opportunityData },
+      // No columns specified — should auto-derive from data keys + objectSchema
+    };
+
+    render(
+      <ActionProvider>
+        <ObjectGrid schema={schema} dataSource={mockDataSource} />
+      </ActionProvider>
+    );
+
+    // Schema should still be fetched
+    await waitFor(() => {
+      expect(mockDataSource.getObjectSchema).toHaveBeenCalledWith('opportunity');
+    });
+
+    // Data should render with objectSchema-enriched columns
+    await waitFor(() => {
+      expect(screen.getByText('Enterprise License')).toBeInTheDocument();
+    });
+
+    // Amount should be formatted (objectSchema type: currency)
+    await waitFor(() => {
+      expect(screen.getByText('$150,000.00')).toBeInTheDocument();
+    });
+
+    // find() should NOT be called
+    expect(mockDataSource.find).not.toHaveBeenCalled();
+  });
+
+  it('should enrich ListColumn[] with objectSchema types when inline data + dataSource', async () => {
+    const mockDataSource = createMockDataSource(opportunitySchema, []);
+
+    const schema: any = {
+      type: 'object-grid' as const,
+      objectName: 'opportunity',
+      data: { provider: 'value', items: opportunityData },
+      // ListColumn[] without explicit type — objectSchema should provide types
+      columns: [
+        { field: 'name', label: 'Name' },
+        { field: 'stage', label: 'Stage' },
+        { field: 'amount', label: 'Amount' },
+      ],
+    };
+
+    render(
+      <ActionProvider>
+        <ObjectGrid schema={schema} dataSource={mockDataSource} />
+      </ActionProvider>
+    );
+
+    // Schema should be fetched
+    await waitFor(() => {
+      expect(mockDataSource.getObjectSchema).toHaveBeenCalledWith('opportunity');
+    });
+
+    // Stage should render with colored badge from objectSchema select options
+    await waitFor(() => {
+      const closedWonBadge = screen.getByText('Closed Won');
+      expect(closedWonBadge).toHaveClass('bg-green-100');
+    });
+
+    // Amount should be formatted as currency from objectSchema type
+    await waitFor(() => {
+      expect(screen.getByText('$150,000.00')).toBeInTheDocument();
+    });
+
+    // find() should NOT be called
+    expect(mockDataSource.find).not.toHaveBeenCalled();
+  });
+});