@object-ui/plugin-detail 3.1.0 → 3.1.2

package/src/RelatedList.tsx

@@ -7,11 +7,30 @@
  */
 
 import * as React from 'react';
-import { Card, CardHeader, CardTitle, CardContent, Button } from '@object-ui/components';
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+  Badge,
+  Button,
+  Input,
+} from '@object-ui/components';
 import { SchemaRenderer } from '@object-ui/react';
-import { Plus, ExternalLink } from 'lucide-react';
-import type { DataSource } from '@object-ui/types';
+import {
+  Plus,
+  ExternalLink,
+  Edit,
+  Trash2,
+  ChevronLeft,
+  ChevronRight,
+  ArrowUpDown,
+  ChevronDown,
+} from 'lucide-react';
+import type { DataSource, FieldMetadata } from '@object-ui/types';
+import { getCellRenderer } from '@object-ui/fields';
 import { useDetailTranslation } from './useDetailTranslation';
+import { useSafeFieldLabel } from '@object-ui/react';
 
 export interface RelatedListProps {
   title: string;
@@ -22,10 +41,26 @@ export interface RelatedListProps {
   columns?: any[];
   className?: string;
   dataSource?: DataSource;
+  /** Object name for i18n field label resolution */
+  objectName?: string;
   /** Callback when "New" button is clicked */
   onNew?: () => void;
   /** Callback when "View All" button is clicked */
   onViewAll?: () => void;
+  /** Callback when a row Edit action is clicked */
+  onRowEdit?: (row: any) => void;
+  /** Callback when a row Delete action is clicked */
+  onRowDelete?: (row: any) => void;
+  /** Page size for pagination (enables pagination when set) */
+  pageSize?: number;
+  /** Enable column sorting */
+  sortable?: boolean;
+  /** Enable text filtering */
+  filterable?: boolean;
+  /** Whether the card is collapsible */
+  collapsible?: boolean;
+  /** Whether the card starts collapsed (requires collapsible=true) */
+  defaultCollapsed?: boolean;
 }
 
 export const RelatedList: React.FC<RelatedListProps> = ({
@@ -37,12 +72,41 @@ export const RelatedList: React.FC<RelatedListProps> = ({
   columns,
   className,
   dataSource,
+  objectName,
   onNew,
   onViewAll,
+  onRowEdit,
+  onRowDelete,
+  pageSize,
+  sortable = false,
+  filterable = false,
+  collapsible = false,
+  defaultCollapsed = false,
 }) => {
   const [relatedData, setRelatedData] = React.useState(data);
   const [loading, setLoading] = React.useState(false);
+  const [currentPage, setCurrentPage] = React.useState(0);
+  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 [collapsed, setCollapsed] = React.useState(defaultCollapsed);
   const { t } = useDetailTranslation();
+  const { fieldLabel: resolveFieldLabel } = useSafeFieldLabel();
+
+  // 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) {
@@ -75,6 +139,97 @@ export const RelatedList: React.FC<RelatedListProps> = ({
     }
   }, [api, data, dataSource]);
 
+  // Filter data
+  const filteredData = React.useMemo(() => {
+    if (!filterText) return relatedData;
+    const lower = filterText.toLowerCase();
+    return relatedData.filter((row) =>
+      Object.values(row).some((val) =>
+        val !== null && val !== undefined && String(val).toLowerCase().includes(lower)
+      )
+    );
+  }, [relatedData, filterText]);
+
+  // Sort data
+  const sortedData = React.useMemo(() => {
+    if (!sortField) return filteredData;
+    return [...filteredData].sort((a, b) => {
+      const aVal = a[sortField];
+      const bVal = b[sortField];
+      if (aVal == null && bVal == null) return 0;
+      if (aVal == null) return 1;
+      if (bVal == null) return -1;
+      const cmp = String(aVal).localeCompare(String(bVal), undefined, { numeric: true });
+      return sortDirection === 'asc' ? cmp : -cmp;
+    });
+  }, [filteredData, sortField, sortDirection]);
+
+  // Paginate data
+  const effectivePageSize = pageSize && pageSize > 0 ? pageSize : 0;
+  const totalPages = effectivePageSize ? Math.max(1, Math.ceil(sortedData.length / effectivePageSize)) : 1;
+  const paginatedData = effectivePageSize
+    ? sortedData.slice(currentPage * effectivePageSize, (currentPage + 1) * effectivePageSize)
+    : sortedData;
+
+  // Reset to first page when filter/sort changes
+  React.useEffect(() => {
+    setCurrentPage(0);
+  }, [filterText, sortField, sortDirection]);
+
+  const handleSort = React.useCallback((field: string) => {
+    if (sortField === field) {
+      setSortDirection((d) => (d === 'asc' ? 'desc' : 'asc'));
+    } else {
+      setSortField(field);
+      setSortDirection('asc');
+    }
+  }, [sortField]);
+
+  const handleDeleteRow = React.useCallback((row: any) => {
+    if (window.confirm(t('detail.deleteRowConfirmation'))) {
+      onRowDelete?.(row);
+    }
+  }, [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 [];
+    const resolvedObjectName = objectName || api || '';
+    return Object.entries(objectSchema.fields)
+      .filter(([key]) => !key.startsWith('_'))
+      .map(([key, def]: [string, any]) => {
+        const col: any = {
+          accessorKey: key,
+          header: resolveFieldLabel(resolvedObjectName, key, def.label || key),
+        };
+        // Add type-aware cell renderer for typed fields
+        if (def.type) {
+          const CellRenderer = getCellRenderer(def.type);
+          if (CellRenderer) {
+            const fieldMeta: FieldMetadata = {
+              name: key,
+              label: def.label || key,
+              type: def.type,
+              ...(def.options && { options: def.options }),
+              ...(def.currency && { currency: def.currency }),
+              ...(def.precision !== undefined && { precision: def.precision }),
+              ...(def.format && { format: def.format }),
+              ...((def.reference_to || def.reference) && { reference_to: def.reference_to || def.reference }),
+              ...(def.reference_field && { reference_field: def.reference_field }),
+            };
+            col.cell = (value: any) => {
+              if (value === null || value === undefined) {
+                return React.createElement('span', { className: 'text-muted-foreground/50 text-xs italic' }, '—');
+              }
+              return React.createElement(CellRenderer, { value, field: fieldMeta });
+            };
+          }
+        }
+        return col;
+      });
+  }, [columns, objectSchema, objectName, api, resolveFieldLabel]);
+
   const viewSchema = React.useMemo(() => {
     if (schema) return schema;
 
@@ -84,44 +239,50 @@ export const RelatedList: React.FC<RelatedListProps> = ({
       case 'table':
         return {
           type: 'data-table',
-          data: relatedData,
-          columns: columns || [],
-          pagination: relatedData.length > 10,
-          pageSize: 10,
+          data: paginatedData,
+          columns: effectiveColumns,
+          pagination: false, // We handle pagination ourselves
+          pageSize: effectivePageSize || 10,
         };
       case 'list':
         return {
           type: 'data-list',
-          data: relatedData,
+          data: paginatedData,
         };
       default:
         return { type: 'div', children: 'No view configured' };
     }
-  }, [type, relatedData, columns, schema]);
+  }, [type, paginatedData, effectiveColumns, schema, effectivePageSize]);
 
-  const recordCountText = relatedData.length === 1
-    ? t('detail.relatedRecordOne', { count: relatedData.length })
-    : t('detail.relatedRecords', { count: relatedData.length });
+  const hasRowActions = !!onRowEdit || !!onRowDelete;
+
+  const headerClassName = collapsible ? 'cursor-pointer select-none' : undefined;
+  const handleHeaderClick = collapsible ? () => setCollapsed((c) => !c) : undefined;
 
   return (
     <Card className={className}>
-      <CardHeader>
+      <CardHeader className={headerClassName} onClick={handleHeaderClick}>
         <CardTitle className="flex items-center justify-between">
           <div className="flex items-center gap-2">
+            {collapsible && (
+              collapsed
+                ? (<ChevronRight className="h-4 w-4 text-muted-foreground" />)
+                : (<ChevronDown className="h-4 w-4 text-muted-foreground" />)
+            )}
             <span>{title}</span>
-            <span className="text-sm font-normal text-muted-foreground">
-              {recordCountText}
-            </span>
+            <Badge variant="secondary" className="text-xs font-normal" aria-label={`${relatedData.length} records`}>
+              {relatedData.length}
+            </Badge>
           </div>
           <div className="flex items-center gap-1">
             {onNew && (
-              <Button variant="ghost" size="sm" onClick={onNew} className="gap-1 h-7 text-xs">
+              <Button variant="ghost" size="sm" onClick={(e) => { e.stopPropagation(); onNew(); }} className="gap-1 h-7 text-xs">
                 <Plus className="h-3.5 w-3.5" />
                 {t('detail.new')}
               </Button>
             )}
             {onViewAll && (
-              <Button variant="ghost" size="sm" onClick={onViewAll} className="gap-1 h-7 text-xs">
+              <Button variant="ghost" size="sm" onClick={(e) => { e.stopPropagation(); onViewAll(); }} className="gap-1 h-7 text-xs">
                 {t('detail.viewAll')}
                 <ExternalLink className="h-3 w-3" />
               </Button>
@@ -129,7 +290,44 @@ export const RelatedList: React.FC<RelatedListProps> = ({
           </div>
         </CardTitle>
       </CardHeader>
-      <CardContent>
+      {!collapsed && <CardContent>
+        {/* Filter bar */}
+        {filterable && relatedData.length > 0 && (
+          <div className="mb-3">
+            <Input
+              placeholder={t('detail.filterPlaceholder')}
+              value={filterText}
+              onChange={(e) => setFilterText(e.target.value)}
+              className="h-8 text-sm"
+            />
+          </div>
+        )}
+
+        {/* Sortable column headers */}
+        {sortable && effectiveColumns && effectiveColumns.length > 0 && relatedData.length > 0 && (
+          <div className="flex flex-wrap gap-1 mb-3">
+            {effectiveColumns.map((col: any) => {
+              const field = col.accessorKey || col.field || col.name;
+              if (!field) return null;
+              const label = col.header || col.label || field;
+              const isActive = sortField === field;
+              return (
+                <Button
+                  key={field}
+                  variant={isActive ? 'secondary' : 'ghost'}
+                  size="sm"
+                  className="gap-1 h-7 text-xs"
+                  onClick={() => handleSort(field)}
+                >
+                  <ArrowUpDown className="h-3 w-3" />
+                  {label}
+                  {isActive && (sortDirection === 'asc' ? ' ↑' : ' ↓')}
+                </Button>
+              );
+            })}
+          </div>
+        )}
+
         {loading ? (
           <div className="flex items-center justify-center py-8 text-muted-foreground">
             {t('detail.loading')}
@@ -139,9 +337,77 @@ export const RelatedList: React.FC<RelatedListProps> = ({
             {t('detail.noRelatedRecords')}
           </div>
         ) : (
-          <SchemaRenderer schema={viewSchema} />
+          <>
+            <SchemaRenderer schema={viewSchema} />
+
+            {/* Row-level actions (rendered as a simple action list below data) */}
+            {hasRowActions && paginatedData.length > 0 && (
+              <div className="mt-2 space-y-1" data-testid="row-actions">
+                {paginatedData.map((row, idx) => (
+                  <div key={row.id || idx} className="flex items-center justify-between px-2 py-1 text-xs border-b last:border-b-0">
+                    <span className="truncate text-muted-foreground">
+                      {row.name || row.title || row.id || `Row ${idx + 1}`}
+                    </span>
+                    <div className="flex items-center gap-1">
+                      {onRowEdit && (
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="h-6 text-xs gap-1 px-2"
+                          onClick={() => onRowEdit(row)}
+                        >
+                          <Edit className="h-3 w-3" />
+                          {t('detail.editRow')}
+                        </Button>
+                      )}
+                      {onRowDelete && (
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="h-6 text-xs gap-1 px-2 text-destructive hover:text-destructive"
+                          onClick={() => handleDeleteRow(row)}
+                        >
+                          <Trash2 className="h-3 w-3" />
+                          {t('detail.deleteRow')}
+                        </Button>
+                      )}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </>
+        )}
+
+        {/* Pagination controls */}
+        {effectivePageSize > 0 && sortedData.length > effectivePageSize && (
+          <div className="flex items-center justify-between mt-3 pt-3 border-t">
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-7 text-xs gap-1"
+              disabled={currentPage === 0}
+              onClick={() => setCurrentPage((p) => Math.max(0, p - 1))}
+            >
+              <ChevronLeft className="h-3 w-3" />
+              {t('detail.previousPage')}
+            </Button>
+            <span className="text-xs text-muted-foreground">
+              {t('detail.pageOf', { current: currentPage + 1, total: totalPages })}
+            </span>
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-7 text-xs gap-1"
+              disabled={currentPage >= totalPages - 1}
+              onClick={() => setCurrentPage((p) => Math.min(totalPages - 1, p + 1))}
+            >
+              {t('detail.nextPage')}
+              <ChevronRight className="h-3 w-3" />
+            </Button>
+          </div>
         )}
-      </CardContent>
+      </CardContent>}
     </Card>
   );
 };

package/src/SectionGroup.tsx

@@ -0,0 +1,101 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as React from 'react';
+import {
+  cn,
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+} from '@object-ui/components';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import { DetailSection } from './DetailSection';
+import type { SectionGroup as SectionGroupType } from '@object-ui/types';
+
+export interface SectionGroupProps {
+  group: SectionGroupType;
+  data?: any;
+  className?: string;
+  objectSchema?: any;
+  /** Object name for i18n field label resolution */
+  objectName?: string;
+  isEditing?: boolean;
+  onFieldChange?: (field: string, value: any) => void;
+}
+
+export const SectionGroup: React.FC<SectionGroupProps> = ({
+  group,
+  data,
+  className,
+  objectSchema,
+  objectName,
+  isEditing = false,
+  onFieldChange,
+}) => {
+  const collapsible = group.collapsible ?? true;
+  const [isCollapsed, setIsCollapsed] = React.useState(group.defaultCollapsed ?? false);
+
+  const sectionsContent = (
+    <div className="space-y-3 sm:space-y-4">
+      {group.sections.map((section, index) => (
+        <DetailSection
+          key={index}
+          section={section}
+          data={data}
+          objectSchema={objectSchema}
+          objectName={objectName}
+          isEditing={isEditing}
+          onFieldChange={onFieldChange}
+        />
+      ))}
+    </div>
+  );
+
+  if (!collapsible) {
+    return (
+      <div className={cn('space-y-3', className)}>
+        <div className="flex items-center gap-2 pb-2 border-b">
+          {group.icon && <span className="text-muted-foreground">{group.icon}</span>}
+          <h3 className="text-lg font-semibold">{group.title}</h3>
+        </div>
+        {group.description && (
+          <p className="text-sm text-muted-foreground">{group.description}</p>
+        )}
+        {sectionsContent}
+      </div>
+    );
+  }
+
+  return (
+    <Collapsible
+      open={!isCollapsed}
+      onOpenChange={(open) => setIsCollapsed(!open)}
+      className={className}
+    >
+      <CollapsibleTrigger asChild>
+        <div className="flex items-center gap-2 pb-2 border-b cursor-pointer hover:bg-muted/50 transition-colors rounded-t-md px-2 py-1.5">
+          {isCollapsed ? (
+            <ChevronRight className="h-4 w-4 text-muted-foreground shrink-0" />
+          ) : (
+            <ChevronDown className="h-4 w-4 text-muted-foreground shrink-0" />
+          )}
+          {group.icon && <span className="text-muted-foreground">{group.icon}</span>}
+          <h3 className="text-lg font-semibold">{group.title}</h3>
+        </div>
+      </CollapsibleTrigger>
+      {group.description && !isCollapsed && (
+        <p className="text-sm text-muted-foreground mt-1">{group.description}</p>
+      )}
+      <CollapsibleContent>
+        <div className="mt-3">
+          {sectionsContent}
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+};

package/src/__tests__/DetailSection.test.tsx

@@ -8,7 +8,7 @@
 
 import { describe, it, expect } from 'vitest';
 import { render, screen } from '@testing-library/react';
-import { DetailSection } from '../DetailSection';
+import { DetailSection, getResponsiveSpanClass } from '../DetailSection';
 
 describe('DetailSection', () => {
   it('should render text fields as plain text', () => {
@@ -112,7 +112,7 @@ describe('DetailSection', () => {
     const { container } = render(
       <DetailSection section={section} data={{}} />
     );
-    // The grid container should have the sm:grid-cols-2 class
+    // The grid container should have the md:grid-cols-2 class
     const grid = container.querySelector('.grid');
     expect(grid).toBeTruthy();
     expect(grid!.className).toContain('md:grid-cols-2');
@@ -317,4 +317,113 @@ describe('DetailSection', () => {
     // Should use 'text' renderer, not 'number'
     expect(screen.getByText('Alice')).toBeInTheDocument();
   });
+
+  it('should use responsive span classes for wide fields in 3-column layout', () => {
+    const section = {
+      title: 'Wide Fields',
+      fields: Array.from({ length: 12 }, (_, i) => ({
+        name: `field_${i}`,
+        label: `Field ${i}`,
+        type: i === 5 ? 'textarea' : 'text',
+      })),
+    };
+    const { container } = render(
+      <DetailSection section={section} data={{}} />
+    );
+    const grid = container.querySelector('.grid');
+    expect(grid).toBeTruthy();
+    expect(grid!.className).toContain('lg:grid-cols-3');
+    // Wide field (textarea) should have responsive span, not bare col-span-3
+    const fields = container.querySelectorAll('[class*="col-span"]');
+    fields.forEach((field) => {
+      // No bare col-span-3 at base level — must be lg: prefixed
+      const classes = field.className.split(/\s+/);
+      const hasBareSpan3 = classes.some((c: string) => c === 'col-span-3');
+      expect(hasBareSpan3).toBe(false);
+    });
+  });
+
+  it('should use responsive span classes for wide fields in 2-column layout', () => {
+    const section = {
+      title: 'Wide Fields',
+      fields: [
+        { name: 'a', label: 'A', type: 'text' },
+        { name: 'b', label: 'B', type: 'text' },
+        { name: 'c', label: 'C', type: 'text' },
+        { name: 'd', label: 'D', type: 'text' },
+        { name: 'notes', label: 'Notes', type: 'textarea' },
+      ],
+    };
+    const { container } = render(
+      <DetailSection section={section} data={{}} />
+    );
+    const grid = container.querySelector('.grid');
+    expect(grid!.className).toContain('md:grid-cols-2');
+    // Wide field should have md:col-span-2, not bare col-span-2
+    const fields = container.querySelectorAll('[class*="col-span"]');
+    fields.forEach((field) => {
+      const classes = field.className.split(/\s+/);
+      const hasBareSpan2 = classes.some((c: string) => c === 'col-span-2');
+      expect(hasBareSpan2).toBe(false);
+    });
+  });
+
+  it('should not apply col-span at base breakpoint to prevent implicit grid columns on mobile', () => {
+    const section = {
+      title: 'Mobile Safe',
+      fields: Array.from({ length: 15 }, (_, i) => ({
+        name: `field_${i}`,
+        label: `Field ${i}`,
+        type: i === 0 ? 'textarea' : 'text',
+      })),
+    };
+    const { container } = render(
+      <DetailSection section={section} data={{}} />
+    );
+    // Ensure no bare col-span-N (N>1) classes without responsive prefix
+    const allElements = container.querySelectorAll('*');
+    allElements.forEach((el) => {
+      const classes = el.className?.split?.(/\s+/) || [];
+      classes.forEach((cls: string) => {
+        if (cls.match(/^col-span-[2-9]$/)) {
+          throw new Error(`Found bare "${cls}" class without responsive prefix — would break mobile single-column layout`);
+        }
+      });
+    });
+  });
+});
+
+describe('getResponsiveSpanClass', () => {
+  it('should return empty string for no span', () => {
+    expect(getResponsiveSpanClass(undefined, 2)).toBe('');
+  });
+
+  it('should return empty string for span=1', () => {
+    expect(getResponsiveSpanClass(1, 3)).toBe('');
+  });
+
+  it('should return empty string for 1-column layout', () => {
+    expect(getResponsiveSpanClass(3, 1)).toBe('');
+  });
+
+  it('should return md:col-span-2 for span=2 in 2-column layout', () => {
+    expect(getResponsiveSpanClass(2, 2)).toBe('md:col-span-2');
+  });
+
+  it('should cap span to 2 in 2-column layout', () => {
+    expect(getResponsiveSpanClass(3, 2)).toBe('md:col-span-2');
+    expect(getResponsiveSpanClass(6, 2)).toBe('md:col-span-2');
+  });
+
+  it('should return md:col-span-2 for span=2 in 3-column layout', () => {
+    expect(getResponsiveSpanClass(2, 3)).toBe('md:col-span-2');
+  });
+
+  it('should return responsive classes for span=3 in 3-column layout', () => {
+    expect(getResponsiveSpanClass(3, 3)).toBe('md:col-span-2 lg:col-span-3');
+  });
+
+  it('should cap span to 3 in 3-column layout', () => {
+    expect(getResponsiveSpanClass(6, 3)).toBe('md:col-span-2 lg:col-span-3');
+  });
 });

package/src/__tests__/DetailView.test.tsx

@@ -539,6 +539,37 @@ describe('DetailView', () => {
     expect(onBack).toHaveBeenCalled();
   });
 
+  it('should try fallback with alternate ID when first findOne throws an error', async () => {
+    let callCount = 0;
+    const mockDataSource = {
+      findOne: vi.fn().mockImplementation((_obj: string, id: string) => {
+        callCount++;
+        if (callCount === 1) {
+          // First call throws (simulate server error)
+          return Promise.reject(new Error('Server error'));
+        }
+        // Second call (fallback) succeeds
+        return Promise.resolve({ name: 'Alice' });
+      }),
+    } as any;
+
+    const schema: DetailViewSchema = {
+      type: 'detail-view',
+      title: 'Contact Details',
+      objectName: 'contact',
+      resourceId: 'contact-123',
+      fields: [{ name: 'name', label: 'Name' }],
+    };
+
+    const { findByText } = render(<DetailView schema={schema} dataSource={mockDataSource} />);
+    // The fallback should find the record using the stripped ID
+    expect(await findByText('Alice')).toBeInTheDocument();
+    // findOne should be called twice: first with original ID, then with stripped prefix
+    expect(mockDataSource.findOne).toHaveBeenCalledTimes(2);
+    expect(mockDataSource.findOne).toHaveBeenNthCalledWith(1, 'contact', 'contact-123');
+    expect(mockDataSource.findOne).toHaveBeenNthCalledWith(2, 'contact', '123');
+  });
+
   it('should call findOne with $expand when objectSchema has lookup fields', async () => {
     const mockDataSource = {
       getObjectSchema: vi.fn().mockResolvedValue({