Merge pull request #720 from objectstack-ai/copilot/fix-toolbar-toggle-issue

Author: hotlong

ROADMAP.md

@@ -216,12 +216,16 @@ ObjectUI is a universal Server-Driven UI (SDUI) engine built on React + Tailwind
 1. ~~**`generateViewSchema` (plugin-view):** Hardcodes `showSearch: false` for non-grid views~~ → Now propagates from `activeView`
 2. ~~**Console `renderListView`:** Omits toolbar/display flags from `fullSchema`~~ → Now passes all config properties
 3. ~~**`NamedListView` type:** Missing toolbar/display properties~~ → Added as first-class properties
-4. **No per-view-type integration tests:** Pending — tests verify config reaches `fullSchema`, but per-renderer integration tests still needed
+4. ~~**Plugin `renderListView` schema missing toolbar flags:** `renderContent` → `renderListView` schema did not include `showSearch`/`showFilters`/`showSort`~~ → Now propagated (PR #771)
+5. ~~**ListView toolbar unconditionally rendered:** Search/Filter/Sort buttons always visible regardless of schema flags~~ → Now conditionally rendered based on `schema.showSearch`/`showFilters`/`showSort` (PR #771)
+6. **No per-view-type integration tests:** Pending — tests verify config reaches `fullSchema`, but per-renderer integration tests still needed
 
 **Phase 1 — Grid/Table View (baseline, already complete):**
 - [x] `gridSchema` includes `striped`/`bordered` from `activeView`
 - [x] `showSort`/`showSearch`/`showFilters` passed via `ObjectViewSchema`
 - [x] `useMemo` dependency arrays cover all grid config
+- [x] ListView toolbar buttons conditionally rendered based on `schema.showSearch`/`showFilters`/`showSort` (PR #771)
+- [x] `renderListView` schema includes toolbar toggle flags (`showSearch`/`showFilters`/`showSort`) and display props (`striped`/`bordered`/`color`) (PR #771)
 
 **Phase 2 — Kanban Live Preview:**
 - [x] Propagate `showSort`/`showSearch`/`showFilters` through `generateViewSchema` kanban branch

packages/plugin-list/src/ListView.tsx

@@ -871,6 +871,7 @@ export const ListView: React.FC<ListViewProps> = ({
           </Popover>
 
           {/* Filter */}
+          {schema.showFilters !== false && (
           <Popover open={showFilters} onOpenChange={setShowFilters}>
             <PopoverTrigger asChild>
               <Button
@@ -906,6 +907,7 @@ export const ListView: React.FC<ListViewProps> = ({
               </div>
             </PopoverContent>
           </Popover>
+          )}
 
           {/* Group */}
           <Button
@@ -919,6 +921,7 @@ export const ListView: React.FC<ListViewProps> = ({
           </Button>
 
           {/* Sort */}
+          {schema.showSort !== false && (
           <Popover open={showSort} onOpenChange={setShowSort}>
             <PopoverTrigger asChild>
               <Button
@@ -954,6 +957,7 @@ export const ListView: React.FC<ListViewProps> = ({
               </div>
             </PopoverContent>
           </Popover>
+          )}
 
           {/* Color */}
           <Button
@@ -1026,6 +1030,7 @@ export const ListView: React.FC<ListViewProps> = ({
         </div>
 
         {/* Right: Search */}
+        {schema.showSearch !== false && (
         <div className="flex items-center gap-1">
           {searchExpanded ? (
             <div className="relative w-36 sm:w-48 lg:w-64">
@@ -1064,6 +1069,7 @@ export const ListView: React.FC<ListViewProps> = ({
             </Button>
           )}
         </div>
+        )}
       </div>
 
 

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

@@ -598,4 +598,99 @@ describe('ListView', () => {
       expect(screen.queryByTestId('user-filters')).not.toBeInTheDocument();
     });
   });
+
+  // ============================
+  // Toolbar Toggle Visibility
+  // ============================
+  describe('Toolbar Toggle Visibility', () => {
+    it('should hide Search button when showSearch is false', () => {
+      const schema: ListViewSchema = {
+        type: 'list-view',
+        objectName: 'contacts',
+        viewType: 'grid',
+        fields: ['name', 'email'],
+        showSearch: false,
+      };
+
+      renderWithProvider(<ListView schema={schema} />);
+      expect(screen.queryByRole('button', { name: /search/i })).not.toBeInTheDocument();
+    });
+
+    it('should show Search button when showSearch is true', () => {
+      const schema: ListViewSchema = {
+        type: 'list-view',
+        objectName: 'contacts',
+        viewType: 'grid',
+        fields: ['name', 'email'],
+        showSearch: true,
+      };
+
+      renderWithProvider(<ListView schema={schema} />);
+      expect(screen.getByRole('button', { name: /search/i })).toBeInTheDocument();
+    });
+
+    it('should show Search button when showSearch is undefined (default)', () => {
+      const schema: ListViewSchema = {
+        type: 'list-view',
+        objectName: 'contacts',
+        viewType: 'grid',
+        fields: ['name', 'email'],
+      };
+
+      renderWithProvider(<ListView schema={schema} />);
+      expect(screen.getByRole('button', { name: /search/i })).toBeInTheDocument();
+    });
+
+    it('should hide Filter button when showFilters is false', () => {
+      const schema: ListViewSchema = {
+        type: 'list-view',
+        objectName: 'contacts',
+        viewType: 'grid',
+        fields: ['name', 'email'],
+        showFilters: false,
+      };
+
+      renderWithProvider(<ListView schema={schema} />);
+      expect(screen.queryByRole('button', { name: /filter/i })).not.toBeInTheDocument();
+    });
+
+    it('should show Filter button when showFilters is true', () => {
+      const schema: ListViewSchema = {
+        type: 'list-view',
+        objectName: 'contacts',
+        viewType: 'grid',
+        fields: ['name', 'email'],
+        showFilters: true,
+      };
+
+      renderWithProvider(<ListView schema={schema} />);
+      expect(screen.getByRole('button', { name: /filter/i })).toBeInTheDocument();
+    });
+
+    it('should hide Sort button when showSort is false', () => {
+      const schema: ListViewSchema = {
+        type: 'list-view',
+        objectName: 'contacts',
+        viewType: 'grid',
+        fields: ['name', 'email'],
+        showSort: false,
+      };
+
+      renderWithProvider(<ListView schema={schema} />);
+      expect(screen.queryByRole('button', { name: /^sort$/i })).not.toBeInTheDocument();
+    });
+
+    it('should show Sort button when showSort is true', () => {
+      const schema: ListViewSchema = {
+        type: 'list-view',
+        objectName: 'contacts',
+        viewType: 'grid',
+        fields: ['name', 'email'],
+        showSort: true,
+      };
+
+      renderWithProvider(<ListView schema={schema} />);
+      expect(screen.getByRole('button', { name: /^sort$/i })).toBeInTheDocument();
+    });
+  });
 });

packages/plugin-view/src/ObjectView.tsx

@@ -813,6 +813,14 @@ export const ObjectView: React.FC<ObjectViewProps> = ({
           densityMode: activeView?.densityMode,
           groupBy: activeView?.groupBy,
           options: currentNamedViewConfig?.options || activeView,
+          // Propagate toolbar toggle flags
+          showSearch: activeView?.showSearch ?? schema.showSearch,
+          showFilters: activeView?.showFilters ?? schema.showFilters,
+          showSort: activeView?.showSort ?? schema.showSort,
+          // Propagate display properties
+          striped: activeView?.striped ?? (schema as any).striped,
+          bordered: activeView?.bordered ?? (schema as any).bordered,
+          color: activeView?.color ?? (schema as any).color,
         },
         dataSource,
         onEdit: handleEdit,

packages/plugin-view/src/__tests__/ObjectView.test.tsx

@@ -549,5 +549,64 @@ describe('ObjectView', () => {
       // 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);
+    });
   });
 });