@object-ui/plugin-view 3.0.3 → 3.1.1

package/src/__tests__/FilterUI.test.tsx

@@ -541,4 +541,101 @@ describe('FilterUI', () => {
       window.removeEventListener('filter:changed', spy);
     });
   });
+
+  // -------------------------------------------------------------------------
+  // 9. Multi-select filter type
+  // -------------------------------------------------------------------------
+  describe('multi-select filter type', () => {
+    const multiSelectFilters: FilterUISchema['filters'] = [
+      {
+        field: 'tags',
+        label: 'Tags',
+        type: 'multi-select',
+        options: [
+          { label: 'Frontend', value: 'frontend' },
+          { label: 'Backend', value: 'backend' },
+          { label: 'DevOps', value: 'devops' },
+        ],
+      },
+    ];
+
+    it('renders checkboxes for multi-select type', () => {
+      render(
+        <FilterUI
+          schema={makeSchema({ filters: multiSelectFilters })}
+        />,
+      );
+
+      expect(screen.getByText('Tags')).toBeInTheDocument();
+      const checkboxes = screen.getAllByTestId('checkbox');
+      expect(checkboxes.length).toBe(3);
+      expect(screen.getByText('Frontend')).toBeInTheDocument();
+      expect(screen.getByText('Backend')).toBeInTheDocument();
+      expect(screen.getByText('DevOps')).toBeInTheDocument();
+    });
+
+    it('calls onChange with array when multi-select checkbox is toggled', () => {
+      const onChange = vi.fn();
+      render(
+        <FilterUI
+          schema={makeSchema({ filters: multiSelectFilters })}
+          onChange={onChange}
+        />,
+      );
+
+      const checkboxes = screen.getAllByTestId('checkbox');
+      fireEvent.click(checkboxes[0]); // Frontend
+      expect(onChange).toHaveBeenCalledWith({ tags: ['frontend'] });
+    });
+
+    it('adds to selection when another checkbox is checked', () => {
+      const onChange = vi.fn();
+      render(
+        <FilterUI
+          schema={makeSchema({
+            filters: multiSelectFilters,
+            values: { tags: ['frontend'] },
+          })}
+          onChange={onChange}
+        />,
+      );
+
+      const checkboxes = screen.getAllByTestId('checkbox');
+      fireEvent.click(checkboxes[1]); // Backend
+      expect(onChange).toHaveBeenCalledWith({ tags: ['frontend', 'backend'] });
+    });
+
+    it('removes from selection when checkbox is unchecked', () => {
+      const onChange = vi.fn();
+      render(
+        <FilterUI
+          schema={makeSchema({
+            filters: multiSelectFilters,
+            values: { tags: ['frontend', 'backend'] },
+          })}
+          onChange={onChange}
+        />,
+      );
+
+      // Uncheck Frontend (first checkbox)
+      const checkboxes = screen.getAllByTestId('checkbox');
+      fireEvent.click(checkboxes[0]); // Frontend
+      expect(onChange).toHaveBeenCalledWith({ tags: ['backend'] });
+    });
+
+    it('shows selected count in active badge for popover layout', () => {
+      render(
+        <FilterUI
+          schema={makeSchema({
+            layout: 'popover',
+            filters: multiSelectFilters,
+            values: { tags: ['frontend', 'backend'] },
+          })}
+        />,
+      );
+
+      // Active count should be 1 (tags field has a value)
+      expect(screen.getByText('1')).toBeInTheDocument();
+    });
+  });
 });

package/src/__tests__/ObjectView.test.tsx

@@ -288,6 +288,59 @@ describe('ObjectView', () => {
 
       expect(onNavigate).toHaveBeenCalledWith('1', 'view');
     });
+
+    it('should open form in view mode when split navigation mode is clicked', () => {
+      const schema: ObjectViewSchema = {
+        type: 'object-view',
+        objectName: 'contacts',
+        navigation: { mode: 'split' },
+      };
+
+      render(<ObjectView schema={schema} dataSource={mockDataSource} />);
+
+      fireEvent.click(screen.getByTestId('grid-row'));
+
+      // Split mode renders NavigationOverlay with split panels including a close button
+      expect(screen.getByTestId('object-form')).toBeDefined();
+      expect(screen.getByLabelText('Close panel')).toBeDefined();
+    });
+
+    it('should open form in view mode when popover navigation mode is clicked', () => {
+      const schema: ObjectViewSchema = {
+        type: 'object-view',
+        objectName: 'contacts',
+        navigation: { mode: 'popover' },
+      };
+
+      render(<ObjectView schema={schema} dataSource={mockDataSource} />);
+
+      fireEvent.click(screen.getByTestId('grid-row'));
+
+      // Popover mode renders NavigationOverlay Dialog fallback (no popoverTrigger)
+      expect(screen.getByTestId('object-form')).toBeDefined();
+      expect(screen.getByRole('dialog')).toBeDefined();
+    });
+
+    it('should close split panel and return to normal view', () => {
+      const schema: ObjectViewSchema = {
+        type: 'object-view',
+        objectName: 'contacts',
+        navigation: { mode: 'split' },
+      };
+
+      render(<ObjectView schema={schema} dataSource={mockDataSource} />);
+
+      // Open split panel
+      fireEvent.click(screen.getByTestId('grid-row'));
+      expect(screen.getByLabelText('Close panel')).toBeDefined();
+
+      // Close split panel
+      fireEvent.click(screen.getByLabelText('Close panel'));
+
+      // Form should be gone, grid should remain
+      expect(screen.queryByLabelText('Close panel')).toBeNull();
+      expect(screen.getByTestId('object-grid')).toBeDefined();
+    });
   });
 
   // ============================
@@ -372,4 +425,241 @@ describe('ObjectView', () => {
       expect(screen.queryByText('Kanban')).toBeNull();
     });
   });
+
+  // ============================
+  // Live Preview — viewConfig sync
+  // ============================
+  describe('Live Preview', () => {
+    it('should re-render grid when views prop updates with new columns', async () => {
+      const schema: ObjectViewSchema = {
+        type: 'object-view',
+        objectName: 'contacts',
+      };
+
+      const initialViews = [
+        { id: 'all', label: 'All', type: 'grid' as const, columns: ['name', 'email'] },
+      ];
+
+      const { rerender } = render(
+        <ObjectView schema={schema} dataSource={mockDataSource} views={initialViews} activeViewId="all" />,
+      );
+
+      expect(screen.getByTestId('object-grid')).toBeInTheDocument();
+
+      // Simulate live preview: update views prop with new columns (as parent would after viewDraft change)
+      const updatedViews = [
+        { id: 'all', label: 'All', type: 'grid' as const, columns: ['name', 'email', 'status'] },
+      ];
+
+      rerender(
+        <ObjectView schema={schema} dataSource={mockDataSource} views={updatedViews} activeViewId="all" />,
+      );
+
+      // Grid should still render (component did not crash on prop update)
+      expect(screen.getByTestId('object-grid')).toBeInTheDocument();
+    });
+
+    it('should re-render when views prop updates with new sort config', async () => {
+      const schema: ObjectViewSchema = {
+        type: 'object-view',
+        objectName: 'contacts',
+      };
+
+      const initialViews = [
+        { id: 'all', label: 'All', type: 'grid' as const, columns: ['name'] },
+      ];
+
+      const { rerender } = render(
+        <ObjectView schema={schema} dataSource={mockDataSource} views={initialViews} activeViewId="all" />,
+      );
+
+      // Update with sort config — simulates live preview of sort changes
+      const updatedViews = [
+        { id: 'all', label: 'All', type: 'grid' as const, columns: ['name'], sort: [{ field: 'name', direction: 'desc' as const }] },
+      ];
+
+      rerender(
+        <ObjectView schema={schema} dataSource={mockDataSource} views={updatedViews} activeViewId="all" />,
+      );
+
+      expect(screen.getByTestId('object-grid')).toBeInTheDocument();
+    });
+
+    it('should re-render when views prop updates with new filter', async () => {
+      const schema: ObjectViewSchema = {
+        type: 'object-view',
+        objectName: 'contacts',
+      };
+
+      const initialViews = [
+        { id: 'all', label: 'All', type: 'grid' as const, columns: ['name'] },
+      ];
+
+      const { rerender } = render(
+        <ObjectView schema={schema} dataSource={mockDataSource} views={initialViews} activeViewId="all" />,
+      );
+
+      // Update with filter — simulates live preview of filter changes
+      const updatedViews = [
+        { id: 'all', label: 'All', type: 'grid' as const, columns: ['name'], filter: [['status', '=', 'active']] },
+      ];
+
+      rerender(
+        <ObjectView schema={schema} dataSource={mockDataSource} views={updatedViews} activeViewId="all" />,
+      );
+
+      expect(screen.getByTestId('object-grid')).toBeInTheDocument();
+    });
+
+    it('should re-render when views prop updates with appearance properties', async () => {
+      const schema: ObjectViewSchema = {
+        type: 'object-view',
+        objectName: 'contacts',
+      };
+
+      const initialViews = [
+        { id: 'all', label: 'All', type: 'grid' as const, columns: ['name'] },
+      ];
+
+      const { rerender } = render(
+        <ObjectView schema={schema} dataSource={mockDataSource} views={initialViews} activeViewId="all" />,
+      );
+
+      // Update with appearance changes — simulates live preview of rowHeight/striped/bordered
+      const updatedViews = [
+        { id: 'all', label: 'All', type: 'grid' as const, columns: ['name'], striped: true, bordered: true },
+      ];
+
+      rerender(
+        <ObjectView schema={schema} dataSource={mockDataSource} views={updatedViews} activeViewId="all" />,
+      );
+
+      expect(screen.getByTestId('object-grid')).toBeInTheDocument();
+    });
+
+    it('should pass renderListView with updated schema when views change', async () => {
+      const schema: ObjectViewSchema = {
+        type: 'object-view',
+        objectName: 'contacts',
+      };
+
+      const renderListViewSpy = vi.fn(({ schema: listSchema }: any) => (
+        <div data-testid="custom-list" data-fields={JSON.stringify(listSchema.fields)}>
+          Custom ListView
+        </div>
+      ));
+
+      const initialViews = [
+        { id: 'all', label: 'All', type: 'grid' as const, columns: ['name'] },
+      ];
+
+      const { rerender } = render(
+        <ObjectView
+          schema={schema}
+          dataSource={mockDataSource}
+          views={initialViews}
+          activeViewId="all"
+          renderListView={renderListViewSpy}
+        />,
+      );
+
+      expect(screen.getByTestId('custom-list')).toBeInTheDocument();
+      const firstCallSchema = renderListViewSpy.mock.calls[0]?.[0]?.schema;
+      expect(firstCallSchema?.fields).toEqual(['name']);
+
+      // Update views — simulate live preview change
+      const updatedViews = [
+        { id: 'all', label: 'All', type: 'grid' as const, columns: ['name', 'email', 'status'] },
+      ];
+
+      rerender(
+        <ObjectView
+          schema={schema}
+          dataSource={mockDataSource}
+          views={updatedViews}
+          activeViewId="all"
+          renderListView={renderListViewSpy}
+        />,
+      );
+
+      // renderListView should have been called again with the updated columns
+      const lastCallIndex = renderListViewSpy.mock.calls.length - 1;
+      const lastCallSchema = renderListViewSpy.mock.calls[lastCallIndex]?.[0]?.schema;
+      expect(lastCallSchema?.fields).toEqual(['name', 'email', 'status']);
+    });
+
+    it('should pass showSort=false through schema to suppress sort UI', async () => {
+      const schema: ObjectViewSchema = {
+        type: 'object-view',
+        objectName: 'contacts',
+        showSort: false,
+      };
+
+      render(
+        <ObjectView schema={schema} dataSource={mockDataSource} />,
+      );
+
+      // Component renders without crash — showSort is respected
+      expect(screen.getByTestId('object-grid')).toBeInTheDocument();
+    });
+
+    it('should include showSearch/showFilters/showSort in renderListView schema', async () => {
+      const schema: ObjectViewSchema = {
+        type: 'object-view',
+        objectName: 'contacts',
+        showSearch: false,
+        showFilters: false,
+        showSort: false,
+      };
+
+      const renderListViewSpy = vi.fn(({ schema: listSchema }: any) => (
+        <div data-testid="custom-list">Custom ListView</div>
+      ));
+
+      render(
+        <ObjectView
+          schema={schema}
+          dataSource={mockDataSource}
+          renderListView={renderListViewSpy}
+        />,
+      );
+
+      expect(renderListViewSpy).toHaveBeenCalled();
+      const callSchema = renderListViewSpy.mock.calls[0]?.[0]?.schema;
+      expect(callSchema?.showSearch).toBe(false);
+      expect(callSchema?.showFilters).toBe(false);
+      expect(callSchema?.showSort).toBe(false);
+    });
+
+    it('should propagate showSearch/showFilters/showSort from activeView in renderListView', async () => {
+      const schema: ObjectViewSchema = {
+        type: 'object-view',
+        objectName: 'contacts',
+      };
+
+      const renderListViewSpy = vi.fn(({ schema: listSchema }: any) => (
+        <div data-testid="custom-list">Custom ListView</div>
+      ));
+
+      const views = [
+        { id: 'v1', label: 'View 1', type: 'grid' as const, showSearch: false, showFilters: false, showSort: false },
+      ];
+
+      render(
+        <ObjectView
+          schema={schema}
+          dataSource={mockDataSource}
+          views={views}
+          activeViewId="v1"
+          renderListView={renderListViewSpy}
+        />,
+      );
+
+      expect(renderListViewSpy).toHaveBeenCalled();
+      const callSchema = renderListViewSpy.mock.calls[0]?.[0]?.schema;
+      expect(callSchema?.showSearch).toBe(false);
+      expect(callSchema?.showFilters).toBe(false);
+      expect(callSchema?.showSort).toBe(false);
+    });
+  });
 });

package/src/__tests__/SharedViewLinkPassword.test.tsx

@@ -0,0 +1,172 @@
+/**
+ * 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 { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+
+vi.mock('@object-ui/components', () => ({
+  cn: (...args: any[]) => args.filter(Boolean).join(' '),
+  Button: ({ children, onClick, ...props }: any) => (
+    <button onClick={onClick} {...props}>{children}</button>
+  ),
+  Badge: ({ children, ...props }: any) => <span {...props}>{children}</span>,
+  Input: React.forwardRef(({ ...props }: any, ref: any) => <input ref={ref} {...props} />),
+  Popover: ({ children }: any) => <div>{children}</div>,
+  PopoverContent: ({ children, ...props }: any) => <div {...props}>{children}</div>,
+  PopoverTrigger: ({ children, asChild }: any) => <>{children}</>,
+}));
+
+vi.mock('lucide-react', () => ({
+  Share2: () => <span>ShareIcon</span>,
+  Copy: () => <span>CopyIcon</span>,
+  Check: () => <span>CheckIcon</span>,
+  Lock: () => <span>LockIcon</span>,
+  Calendar: () => <span>CalendarIcon</span>,
+}));
+
+import { SharedViewLink } from '../SharedViewLink';
+
+describe('SharedViewLink - Password & Expiration', () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('renders the Share button', () => {
+    render(<SharedViewLink objectName="tasks" />);
+    expect(screen.getByText('Share')).toBeInTheDocument();
+  });
+
+  it('renders password input field in the popover', () => {
+    render(<SharedViewLink objectName="tasks" />);
+    const passwordInput = screen.getByPlaceholderText('Enter password...');
+    expect(passwordInput).toBeInTheDocument();
+    expect(passwordInput).toHaveAttribute('type', 'password');
+  });
+
+  it('renders expiration dropdown with options', () => {
+    render(<SharedViewLink objectName="tasks" />);
+
+    const select = screen.getByRole('combobox');
+    expect(select).toBeInTheDocument();
+
+    // Verify options are present
+    const options = screen.getAllByRole('option');
+    const optionTexts = options.map(o => o.textContent);
+    expect(optionTexts).toContain('Never');
+    expect(optionTexts).toContain('1 day');
+    expect(optionTexts).toContain('7 days');
+    expect(optionTexts).toContain('30 days');
+    expect(optionTexts).toContain('90 days');
+  });
+
+  it('shows "Password protected" badge after generating link with a password', async () => {
+    render(<SharedViewLink objectName="tasks" baseUrl="https://example.com" />);
+
+    // Type a password
+    const passwordInput = screen.getByPlaceholderText('Enter password...');
+    fireEvent.change(passwordInput, { target: { value: 'secret123' } });
+
+    // Click Generate Link
+    const generateBtn = screen.getByText('Generate Link');
+    fireEvent.click(generateBtn);
+
+    // After link is generated, "Password protected" badge should appear
+    await waitFor(() => {
+      expect(screen.getByText('Password protected')).toBeInTheDocument();
+    });
+  });
+
+  it('shows expiration badge after generating link with expiration set', async () => {
+    render(<SharedViewLink objectName="tasks" baseUrl="https://example.com" />);
+
+    // Select 7 days expiration
+    const select = screen.getByRole('combobox');
+    fireEvent.change(select, { target: { value: '7' } });
+
+    // Click Generate Link
+    const generateBtn = screen.getByText('Generate Link');
+    fireEvent.click(generateBtn);
+
+    // After link is generated, expiration badge should appear
+    await waitFor(() => {
+      expect(screen.getByText(/Expires in 7 days/)).toBeInTheDocument();
+    });
+  });
+
+  it('shows singular "day" for 1 day expiration', async () => {
+    render(<SharedViewLink objectName="tasks" baseUrl="https://example.com" />);
+
+    const select = screen.getByRole('combobox');
+    fireEvent.change(select, { target: { value: '1' } });
+
+    const generateBtn = screen.getByText('Generate Link');
+    fireEvent.click(generateBtn);
+
+    await waitFor(() => {
+      expect(screen.getByText(/Expires in 1 day$/)).toBeInTheDocument();
+    });
+  });
+
+  it('calls onShare callback with password and expiresAt options', async () => {
+    const onShare = vi.fn();
+    render(
+      <SharedViewLink
+        objectName="tasks"
+        baseUrl="https://example.com"
+        onShare={onShare}
+      />
+    );
+
+    // Set password
+    const passwordInput = screen.getByPlaceholderText('Enter password...');
+    fireEvent.change(passwordInput, { target: { value: 'mypass' } });
+
+    // Set expiration to 30 days
+    const select = screen.getByRole('combobox');
+    fireEvent.change(select, { target: { value: '30' } });
+
+    // Generate
+    const generateBtn = screen.getByText('Generate Link');
+    fireEvent.click(generateBtn);
+
+    expect(onShare).toHaveBeenCalledTimes(1);
+    const [url, options] = onShare.mock.calls[0];
+
+    // URL should contain share path
+    expect(url).toContain('/share/tasks/');
+    expect(url).toContain('token=');
+
+    // Options should include password and expiresAt
+    expect(options.password).toBe('mypass');
+    expect(options.expiresAt).toBeDefined();
+    // expiresAt should be a valid ISO date string roughly 30 days from now
+    const expiresAt = new Date(options.expiresAt);
+    expect(expiresAt.getTime()).toBeGreaterThan(Date.now());
+  });
+
+  it('calls onShare without password and expiresAt when neither is set', () => {
+    const onShare = vi.fn();
+    render(
+      <SharedViewLink
+        objectName="tasks"
+        baseUrl="https://example.com"
+        onShare={onShare}
+      />
+    );
+
+    const generateBtn = screen.getByText('Generate Link');
+    fireEvent.click(generateBtn);
+
+    expect(onShare).toHaveBeenCalledTimes(1);
+    const [, options] = onShare.mock.calls[0];
+    expect(options.password).toBeUndefined();
+    expect(options.expiresAt).toBeUndefined();
+  });
+});