Merge pull request #997 from objectstack-ai/copilot/fix-related-subtable-issue

Author: hotlong

apps/console/src/components/RecordDetailView.tsx

@@ -335,6 +335,7 @@ export function RecordDetailView({ dataSource, objects, onEdit }: RecordDetailVi
   const related = childRelations.map(({ childObject, childLabel }) => ({
     title: childLabel,
     type: 'table' as const,
+    api: childObject,
     data: childRelatedData[childObject] || [],
   }));
 

packages/plugin-detail/src/RelatedList.tsx

@@ -76,13 +76,23 @@ export const RelatedList: React.FC<RelatedListProps> = ({
   const [sortField, setSortField] = React.useState<string | null>(null);
   const [sortDirection, setSortDirection] = React.useState<'asc' | 'desc'>('asc');
   const [filterText, setFilterText] = React.useState('');
+  const [objectSchema, setObjectSchema] = React.useState<any>(null);
   const { t } = useDetailTranslation();
 
   // Sync internal state when data prop changes (e.g., parent fetches async data)
   React.useEffect(() => {
     setRelatedData(data);
   }, [data]);
 
+  // Auto-fetch object schema when api/dataSource available but columns missing
+  React.useEffect(() => {
+    if (api && dataSource?.getObjectSchema && !columns?.length) {
+      dataSource.getObjectSchema(api).then(setObjectSchema).catch((err: unknown) => {
+        console.warn(`[RelatedList] Failed to fetch schema for ${api}:`, err);
+      });
+    }
+  }, [api, dataSource, columns]);
+
   React.useEffect(() => {
     if (api && !data.length) {
       setLoading(true);
@@ -166,6 +176,18 @@ export const RelatedList: React.FC<RelatedListProps> = ({
     }
   }, [onRowDelete, t]);
 
+  // Generate effective columns from explicit prop or object schema fields
+  const effectiveColumns = React.useMemo(() => {
+    if (columns && columns.length > 0) return columns;
+    if (!objectSchema?.fields) return [];
+    return Object.entries(objectSchema.fields)
+      .filter(([key]) => !key.startsWith('_'))
+      .map(([key, def]: [string, any]) => ({
+        accessorKey: key,
+        header: def.label || key,
+      }));
+  }, [columns, objectSchema]);
+
   const viewSchema = React.useMemo(() => {
     if (schema) return schema;
 
@@ -176,7 +198,7 @@ export const RelatedList: React.FC<RelatedListProps> = ({
         return {
           type: 'data-table',
           data: paginatedData,
-          columns: columns || [],
+          columns: effectiveColumns,
           pagination: false, // We handle pagination ourselves
           pageSize: effectivePageSize || 10,
         };
@@ -188,7 +210,7 @@ export const RelatedList: React.FC<RelatedListProps> = ({
       default:
         return { type: 'div', children: 'No view configured' };
     }
-  }, [type, paginatedData, columns, schema, effectivePageSize]);
+  }, [type, paginatedData, effectiveColumns, schema, effectivePageSize]);
 
   const recordCountText = relatedData.length === 1
     ? t('detail.relatedRecordOne', { count: relatedData.length })

packages/plugin-detail/src/__tests__/RelatedList.test.tsx

@@ -7,7 +7,7 @@
  */
 
 import { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import { RelatedList } from '../RelatedList';
 
 describe('RelatedList', () => {
@@ -63,4 +63,62 @@ describe('RelatedList', () => {
     expect(screen.queryByText('New')).not.toBeInTheDocument();
     expect(screen.queryByText('View All')).not.toBeInTheDocument();
   });
+
+  it('should auto-generate columns from object schema when api and dataSource provided but no columns', async () => {
+    const mockDataSource = {
+      getObjectSchema: vi.fn().mockResolvedValue({
+        name: 'order_item',
+        fields: {
+          product: { type: 'string', label: 'Product' },
+          quantity: { type: 'number', label: 'Quantity' },
+          _id: { type: 'string', label: 'ID' },
+        },
+      }),
+      find: vi.fn(),
+    } as any;
+
+    const data = [{ product: 'Widget', quantity: 5 }];
+    render(
+      <RelatedList
+        title="Order Items"
+        type="table"
+        api="order_item"
+        data={data}
+        dataSource={mockDataSource}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(mockDataSource.getObjectSchema).toHaveBeenCalledWith('order_item');
+    });
+
+    // Verify columns are generated from schema (excluding _id)
+    await waitFor(() => {
+      expect(screen.getByText('Product')).toBeInTheDocument();
+      expect(screen.getByText('Quantity')).toBeInTheDocument();
+    });
+    // _id should be filtered out
+    expect(screen.queryByText('ID')).not.toBeInTheDocument();
+  });
+
+  it('should not fetch object schema when explicit columns are provided', () => {
+    const mockDataSource = {
+      getObjectSchema: vi.fn(),
+      find: vi.fn(),
+    } as any;
+
+    const columns = [{ accessorKey: 'name', header: 'Name' }];
+    render(
+      <RelatedList
+        title="Contacts"
+        type="table"
+        api="contact"
+        data={[{ name: 'Alice' }]}
+        columns={columns}
+        dataSource={mockDataSource}
+      />,
+    );
+
+    expect(mockDataSource.getObjectSchema).not.toHaveBeenCalled();
+  });
 });