Merge pull request #793 from objectstack-ai/copilot/align-sharing-export-options-pagination-again

Author: hotlong

ROADMAP.md

@@ -703,8 +703,9 @@ The `FlowDesigner` is a canvas-based flow editor that bridges the gap between th
 **P2 — Advanced Features:**
 - [x] `rowActions`: Row-level dropdown action menu per row in ObjectGrid. `schema.rowActions` string array items rendered as dropdown menu items, dispatched via `executeAction`.
 - [x] `bulkActions`: Bulk action bar rendered in ListView when rows are selected and `schema.bulkActions` is configured. Fires `onBulkAction` callback with action name and selected rows.
-- [x] `sharing` schema reconciliation: Supports both ObjectUI `{ visibility, enabled }` and spec `{ type: personal/collaborative, lockedBy }` models. Share button renders when either `enabled: true` or `type` is set.
-- [x] `pagination.pageSizeOptions` backend integration: Page size selector is now a controlled component that dynamically updates `effectivePageSize`, triggering data re-fetch.
+- [x] `sharing` schema reconciliation: Supports both ObjectUI `{ visibility, enabled }` and spec `{ type: personal/collaborative, lockedBy }` models. Share button renders when either `enabled: true` or `type` is set. Zod validator updated with `type` and `lockedBy` fields. Bridge normalizes spec format: `type: personal` → `visibility: private`, `type: collaborative` → `visibility: team`, auto-sets `enabled: true`.
+- [x] `exportOptions` schema reconciliation: Zod validator updated to accept both spec `string[]` format and ObjectUI object format via `z.union()`. ListView normalizes string[] to `{ formats }` at render time.
+- [x] `pagination.pageSizeOptions` backend integration: Page size selector is now a controlled component that dynamically updates `effectivePageSize`, triggering data re-fetch. `onPageSizeChange` callback fires on selection. Full test coverage for selector rendering, option enumeration, and data reload.
 
 ### P2.5 PWA & Offline (Real Sync)
 

packages/plugin-list/src/__tests__/Export.test.tsx

@@ -55,6 +55,25 @@ describe('ListView Export', () => {
     expect(exportButton).toBeInTheDocument();
   });
 
+  it('should render export button with spec string[] format', () => {
+    const schema: ListViewSchema = {
+      type: 'list-view',
+      objectName: 'contacts',
+      viewType: 'grid',
+      fields: ['name', 'email'],
+      exportOptions: ['csv', 'xlsx'],
+    };
+
+    renderWithProvider(<ListView schema={schema} />);
+    const exportButton = screen.getByRole('button', { name: /export/i });
+    expect(exportButton).toBeInTheDocument();
+
+    // Click to open the popover and verify formats
+    fireEvent.click(exportButton);
+    expect(screen.getByRole('button', { name: /export as csv/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /export as xlsx/i })).toBeInTheDocument();
+  });
+
   it('should handle export with complex object fields in CSV safely', async () => {
     const mockItems = [
       { _id: '1', name: 'Alice', tags: ['admin', 'user'], metadata: { role: 'lead' } },

packages/plugin-list/src/__tests__/ListView.test.tsx

@@ -1805,5 +1805,126 @@ describe('ListView', () => {
       const selector = screen.getByTestId('page-size-selector');
       expect(selector).toHaveValue('25');
     });
+
+    it('should re-fetch data when page size changes', async () => {
+      const mockItems = [
+        { _id: '1', name: 'Alice', email: 'alice@test.com' },
+        { _id: '2', name: 'Bob', email: 'bob@test.com' },
+      ];
+      mockDataSource.find.mockResolvedValue(mockItems);
+
+      const onPageSizeChange = vi.fn();
+      const schema: ListViewSchema = {
+        type: 'list-view',
+        objectName: 'contacts',
+        viewType: 'grid',
+        fields: ['name', 'email'],
+        pagination: { pageSize: 25, pageSizeOptions: [10, 25, 50, 100] },
+      };
+
+      renderWithProvider(<ListView schema={schema} dataSource={mockDataSource} onPageSizeChange={onPageSizeChange} />);
+
+      await vi.waitFor(() => {
+        expect(screen.getByTestId('page-size-selector')).toBeInTheDocument();
+      });
+
+      const fetchCountBefore = mockDataSource.find.mock.calls.length;
+
+      // Change page size to 50
+      const selector = screen.getByTestId('page-size-selector');
+      fireEvent.change(selector, { target: { value: '50' } });
+
+      expect(onPageSizeChange).toHaveBeenCalledWith(50);
+
+      // Data should be re-fetched with the new page size
+      await vi.waitFor(() => {
+        expect(mockDataSource.find.mock.calls.length).toBeGreaterThan(fetchCountBefore);
+      });
+    });
+
+    it('should render all page size options in the selector', async () => {
+      const mockItems = [
+        { _id: '1', name: 'Alice', email: 'alice@test.com' },
+      ];
+      mockDataSource.find.mockResolvedValue(mockItems);
+
+      const schema: ListViewSchema = {
+        type: 'list-view',
+        objectName: 'contacts',
+        viewType: 'grid',
+        fields: ['name', 'email'],
+        pagination: { pageSize: 10, pageSizeOptions: [10, 25, 50, 100] },
+      };
+
+      renderWithProvider(<ListView schema={schema} dataSource={mockDataSource} />);
+
+      await vi.waitFor(() => {
+        expect(screen.getByTestId('page-size-selector')).toBeInTheDocument();
+      });
+
+      const options = screen.getByTestId('page-size-selector').querySelectorAll('option');
+      expect(options).toHaveLength(4);
+      expect(options[0]).toHaveValue('10');
+      expect(options[1]).toHaveValue('25');
+      expect(options[2]).toHaveValue('50');
+      expect(options[3]).toHaveValue('100');
+    });
+
+    it('should not render page size selector when pageSizeOptions is not configured', async () => {
+      const mockItems = [
+        { _id: '1', name: 'Alice', email: 'alice@test.com' },
+      ];
+      mockDataSource.find.mockResolvedValue(mockItems);
+
+      const schema: ListViewSchema = {
+        type: 'list-view',
+        objectName: 'contacts',
+        viewType: 'grid',
+        fields: ['name', 'email'],
+        pagination: { pageSize: 25 },
+      };
+
+      renderWithProvider(<ListView schema={schema} dataSource={mockDataSource} />);
+
+      await vi.waitFor(() => {
+        expect(screen.getByTestId('record-count-bar')).toBeInTheDocument();
+      });
+
+      expect(screen.queryByTestId('page-size-selector')).not.toBeInTheDocument();
+    });
+  });
+
+  // ============================
+  // sharing spec format — additional tests
+  // ============================
+  describe('sharing spec format — additional', () => {
+    it('should render share button with spec personal type', () => {
+      const schema: ListViewSchema = {
+        type: 'list-view',
+        objectName: 'contacts',
+        viewType: 'grid',
+        fields: ['name', 'email'],
+        sharing: { type: 'personal' },
+      };
+
+      renderWithProvider(<ListView schema={schema} />);
+      const shareButton = screen.getByTestId('share-button');
+      expect(shareButton).toBeInTheDocument();
+    });
+
+    it('should display lockedBy in sharing tooltip when set', () => {
+      const schema: ListViewSchema = {
+        type: 'list-view',
+        objectName: 'contacts',
+        viewType: 'grid',
+        fields: ['name', 'email'],
+        sharing: { type: 'collaborative', lockedBy: 'admin@example.com' },
+      };
+
+      renderWithProvider(<ListView schema={schema} />);
+      const shareButton = screen.getByTestId('share-button');
+      expect(shareButton).toBeInTheDocument();
+      expect(shareButton).toHaveAttribute('title', 'Sharing: collaborative');
+    });
   });
 });

packages/react/src/spec-bridge/__tests__/P1SpecBridge.test.ts

@@ -766,4 +766,90 @@ describe('P1 SpecBridge Protocol Alignment', () => {
       expect(qf.defaultActive).toBe(true);
     });
   });
+
+  // ========================================================================
+  // P2 Sharing / ExportOptions / Pagination Protocol Alignment
+  // ========================================================================
+  describe('P2 sharing/exportOptions/pagination alignment', () => {
+    it('should normalize spec sharing { type: personal } to { visibility: private, enabled: true }', () => {
+      const bridge = new SpecBridge();
+      const node = bridge.transformListView({
+        name: 'personal_view',
+        sharing: { type: 'personal', lockedBy: 'admin@example.com' },
+      });
+
+      expect(node.sharing).toBeDefined();
+      expect(node.sharing.visibility).toBe('private');
+      expect(node.sharing.enabled).toBe(true);
+      expect(node.sharing.type).toBe('personal');
+      expect(node.sharing.lockedBy).toBe('admin@example.com');
+    });
+
+    it('should normalize spec sharing { type: collaborative } to { visibility: team, enabled: true }', () => {
+      const bridge = new SpecBridge();
+      const node = bridge.transformListView({
+        name: 'collab_view',
+        sharing: { type: 'collaborative' },
+      });
+
+      expect(node.sharing.visibility).toBe('team');
+      expect(node.sharing.enabled).toBe(true);
+      expect(node.sharing.type).toBe('collaborative');
+    });
+
+    it('should preserve ObjectUI sharing format without overriding', () => {
+      const bridge = new SpecBridge();
+      const node = bridge.transformListView({
+        name: 'objectui_view',
+        sharing: { visibility: 'organization', enabled: true },
+      });
+
+      expect(node.sharing.visibility).toBe('organization');
+      expect(node.sharing.enabled).toBe(true);
+      expect(node.sharing.type).toBeUndefined();
+    });
+
+    it('should not override explicit visibility when type is set', () => {
+      const bridge = new SpecBridge();
+      const node = bridge.transformListView({
+        name: 'mixed_view',
+        sharing: { type: 'collaborative', visibility: 'public' },
+      });
+
+      expect(node.sharing.visibility).toBe('public');
+      expect(node.sharing.type).toBe('collaborative');
+    });
+
+    it('should pass through exportOptions string[] format', () => {
+      const bridge = new SpecBridge();
+      const node = bridge.transformListView({
+        name: 'export_spec',
+        exportOptions: ['csv', 'xlsx'],
+      });
+
+      expect(node.exportOptions).toEqual(['csv', 'xlsx']);
+    });
+
+    it('should pass through exportOptions object format', () => {
+      const bridge = new SpecBridge();
+      const node = bridge.transformListView({
+        name: 'export_obj',
+        exportOptions: { formats: ['csv', 'json'], maxRecords: 5000 },
+      });
+
+      expect(node.exportOptions.formats).toEqual(['csv', 'json']);
+      expect(node.exportOptions.maxRecords).toBe(5000);
+    });
+
+    it('should pass through pagination with pageSizeOptions', () => {
+      const bridge = new SpecBridge();
+      const node = bridge.transformListView({
+        name: 'paginated',
+        pagination: { pageSize: 25, pageSizeOptions: [10, 25, 50, 100] },
+      });
+
+      expect(node.pagination.pageSize).toBe(25);
+      expect(node.pagination.pageSizeOptions).toEqual([10, 25, 50, 100]);
+    });
+  });
 });

packages/react/src/spec-bridge/bridges/list-view.ts

@@ -168,7 +168,17 @@ export const bridgeListView: BridgeFn<ListViewSpec> = (
 
   // P1.6 — i18n & ARIA
   if (spec.aria) node.aria = spec.aria;
-  if (spec.sharing) node.sharing = spec.sharing;
+  if (spec.sharing) {
+    // Normalize spec sharing format: map type → visibility, set enabled = true
+    const sharing: Record<string, any> = { ...spec.sharing };
+    if (sharing.type && !sharing.visibility) {
+      sharing.visibility = sharing.type === 'collaborative' ? 'team' : 'private';
+    }
+    if (sharing.type && sharing.enabled == null) {
+      sharing.enabled = true;
+    }
+    node.sharing = sharing;
+  }
   if (spec.hiddenFields) node.hiddenFields = spec.hiddenFields;
   if (spec.fieldOrder) node.fieldOrder = spec.fieldOrder;
   if (spec.description) node.description = spec.description;

packages/types/src/__tests__/p1-spec-alignment.test.ts

@@ -144,6 +144,90 @@ describe('P1.1 ListView Spec Alignment', () => {
     expect(schema.virtualScroll).toBe(true);
     expect(schema.rowSpecActions).toEqual(['edit', 'delete']);
   });
+
+  // P2: Sharing / ExportOptions / Pagination protocol alignment tests
+  it('should accept sharing in spec format { type, lockedBy }', () => {
+    const schema: ListViewSchema = {
+      type: 'list-view',
+      objectName: 'Account',
+      sharing: {
+        type: 'collaborative',
+        lockedBy: 'admin@example.com',
+      },
+    };
+    expect(schema.sharing?.type).toBe('collaborative');
+    expect(schema.sharing?.lockedBy).toBe('admin@example.com');
+  });
+
+  it('should accept sharing in ObjectUI format { visibility, enabled }', () => {
+    const schema: ListViewSchema = {
+      type: 'list-view',
+      objectName: 'Account',
+      sharing: {
+        visibility: 'team',
+        enabled: true,
+      },
+    };
+    expect(schema.sharing?.visibility).toBe('team');
+    expect(schema.sharing?.enabled).toBe(true);
+  });
+
+  it('should accept sharing with both spec and ObjectUI fields merged', () => {
+    const schema: ListViewSchema = {
+      type: 'list-view',
+      objectName: 'Account',
+      sharing: {
+        type: 'personal',
+        visibility: 'private',
+        enabled: true,
+        lockedBy: 'user@example.com',
+      },
+    };
+    expect(schema.sharing?.type).toBe('personal');
+    expect(schema.sharing?.visibility).toBe('private');
+    expect(schema.sharing?.enabled).toBe(true);
+    expect(schema.sharing?.lockedBy).toBe('user@example.com');
+  });
+
+  it('should accept exportOptions as spec string[] format', () => {
+    const schema: ListViewSchema = {
+      type: 'list-view',
+      objectName: 'Account',
+      exportOptions: ['csv', 'xlsx'],
+    };
+    expect(Array.isArray(schema.exportOptions)).toBe(true);
+    expect(schema.exportOptions).toEqual(['csv', 'xlsx']);
+  });
+
+  it('should accept exportOptions as ObjectUI object format', () => {
+    const schema: ListViewSchema = {
+      type: 'list-view',
+      objectName: 'Account',
+      exportOptions: {
+        formats: ['csv', 'json', 'pdf'],
+        maxRecords: 5000,
+        includeHeaders: true,
+        fileNamePrefix: 'accounts_export',
+      },
+    };
+    expect(Array.isArray(schema.exportOptions)).toBe(false);
+    const opts = schema.exportOptions as { formats?: string[]; maxRecords?: number };
+    expect(opts.formats).toEqual(['csv', 'json', 'pdf']);
+    expect(opts.maxRecords).toBe(5000);
+  });
+
+  it('should accept pagination with pageSizeOptions', () => {
+    const schema: ListViewSchema = {
+      type: 'list-view',
+      objectName: 'Account',
+      pagination: {
+        pageSize: 25,
+        pageSizeOptions: [10, 25, 50, 100],
+      },
+    };
+    expect(schema.pagination?.pageSize).toBe(25);
+    expect(schema.pagination?.pageSizeOptions).toEqual([10, 25, 50, 100]);
+  });
 });
 
 // ============================================================================

packages/types/src/zod/objectql.zod.ts

@@ -297,17 +297,22 @@ export const ListViewSchema = BaseSchema.extend({
   densityMode: z.enum(['compact', 'comfortable', 'spacious']).optional().describe('Density mode'),
   rowHeight: z.enum(['compact', 'short', 'medium', 'tall', 'extra_tall']).optional().describe('Row height'),
   hiddenFields: z.array(z.string()).optional().describe('Hidden fields'),
-  exportOptions: z.object({
-    formats: z.array(z.enum(['csv', 'xlsx', 'json', 'pdf'])).optional(),
-    maxRecords: z.number().optional(),
-    includeHeaders: z.boolean().optional(),
-    fileNamePrefix: z.string().optional(),
-  }).optional().describe('Export options'),
+  exportOptions: z.union([
+    z.array(z.enum(['csv', 'xlsx', 'json', 'pdf'])),
+    z.object({
+      formats: z.array(z.enum(['csv', 'xlsx', 'json', 'pdf'])).optional(),
+      maxRecords: z.number().optional(),
+      includeHeaders: z.boolean().optional(),
+      fileNamePrefix: z.string().optional(),
+    }),
+  ]).optional().describe('Export options'),
   rowActions: z.array(z.string()).optional().describe('Row action identifiers'),
   bulkActions: z.array(z.string()).optional().describe('Bulk action identifiers'),
   sharing: z.object({
     visibility: z.enum(['private', 'team', 'organization', 'public']).optional(),
     enabled: z.boolean().optional(),
+    type: z.enum(['personal', 'collaborative']).optional(),
+    lockedBy: z.string().optional(),
   }).optional().describe('Sharing configuration'),
   addRecord: z.object({
     enabled: z.boolean().optional(),