Skip to content

Commit 10d156b

Browse files
hotlonghotlong
authored
Merge pull request #915 from objectstack-ai/copilot/upgrade-config-panel-ui
2 parents 16149eb + 33d65a5 commit 10d156b

File tree

21 files changed

+338
-12
lines changed

21 files changed

+338
-12
lines changed

‎apps/console/src/__tests__/ObjectView.test.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -475,6 +475,7 @@ describe('ObjectView Component', () => {
475475
expect(screen.getByTestId('view-config-panel')).toBeInTheDocument();
476476

477477
// Toggle showSearch off — our mock Switch fires onCheckedChange with opposite of aria-checked
478+
fireEvent.click(screen.getByTestId('section-header-toolbar')); // Expand toolbar (defaultCollapsed)
478479
const searchSwitch = screen.getByTestId('toggle-showSearch');
479480
fireEvent.click(searchSwitch);
480481

@@ -500,6 +501,7 @@ describe('ObjectView Component', () => {
500501
fireEvent.click(screen.getByText('console.objectView.editView'));
501502

502503
// Toggle showSort off
504+
fireEvent.click(screen.getByTestId('section-header-toolbar')); // Expand toolbar (defaultCollapsed)
503505
const sortSwitch = screen.getByTestId('toggle-showSort');
504506
fireEvent.click(sortSwitch);
505507

@@ -643,6 +645,7 @@ describe('ObjectView Component', () => {
643645
fireEvent.click(screen.getByText('console.objectView.editView'));
644646

645647
// Toggle showSearch off
648+
fireEvent.click(screen.getByTestId('section-header-toolbar')); // Expand toolbar (defaultCollapsed)
646649
const searchSwitch = screen.getByTestId('toggle-showSearch');
647650
fireEvent.click(searchSwitch);
648651

@@ -699,6 +702,7 @@ describe('ObjectView Component', () => {
699702
fireEvent.click(screen.getByText('console.objectView.editView'));
700703

701704
// Change selection mode to 'single'
705+
fireEvent.click(screen.getByTestId('section-header-records')); // Expand records (defaultCollapsed)
702706
const selectionSelect = screen.getByTestId('select-selection-type');
703707
fireEvent.change(selectionSelect, { target: { value: 'single' } });
704708

@@ -722,6 +726,7 @@ describe('ObjectView Component', () => {
722726
fireEvent.click(screen.getByText('console.objectView.editView'));
723727

724728
// Toggle addRecord on
729+
fireEvent.click(screen.getByTestId('section-header-records')); // Expand records (defaultCollapsed)
725730
const addRecordSwitch = screen.getByTestId('toggle-addRecord-enabled');
726731
fireEvent.click(addRecordSwitch);
727732

@@ -746,6 +751,7 @@ describe('ObjectView Component', () => {
746751
fireEvent.click(screen.getByText('console.objectView.editView'));
747752

748753
// Change navigation mode to 'modal'
754+
fireEvent.click(screen.getByTestId('section-header-navigation')); // Expand navigation (defaultCollapsed)
749755
const navSelect = screen.getByTestId('select-navigation-mode');
750756
fireEvent.change(navSelect, { target: { value: 'modal' } });
751757

‎apps/console/src/__tests__/ViewConfigPanel.test.tsx‎

Lines changed: 56 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -520,6 +520,9 @@ describe('ViewConfigPanel', () => {
520520
// Initially no footer (not dirty)
521521
expect(screen.queryByTestId('view-config-footer')).not.toBeInTheDocument();
522522

523+
// Expand toolbar section (defaultCollapsed)
524+
fireEvent.click(screen.getByTestId('section-toolbar'));
525+
523526
// Toggle showSearch switch (default is on → turn off)
524527
const searchSwitch = screen.getByTestId('toggle-showSearch');
525528
fireEvent.click(searchSwitch);
@@ -541,6 +544,7 @@ describe('ViewConfigPanel', () => {
541544
/>
542545
);
543546

547+
fireEvent.click(screen.getByTestId('section-toolbar'));
544548
const filterSwitch = screen.getByTestId('toggle-showFilters');
545549
fireEvent.click(filterSwitch);
546550
expect(onViewUpdate).toHaveBeenCalledWith('showFilters', false);
@@ -558,6 +562,7 @@ describe('ViewConfigPanel', () => {
558562
/>
559563
);
560564

565+
fireEvent.click(screen.getByTestId('section-toolbar'));
561566
const sortSwitch = screen.getByTestId('toggle-showSort');
562567
fireEvent.click(sortSwitch);
563568
expect(onViewUpdate).toHaveBeenCalledWith('showSort', false);
@@ -593,6 +598,7 @@ describe('ViewConfigPanel', () => {
593598
/>
594599
);
595600

601+
fireEvent.click(screen.getByTestId('section-records'));
596602
const formSwitch = screen.getByTestId('toggle-addRecord-enabled');
597603
fireEvent.click(formSwitch);
598604
expect(onViewUpdate).toHaveBeenCalledWith('addRecordViaForm', true);
@@ -815,6 +821,8 @@ describe('ViewConfigPanel', () => {
815821
/>
816822
);
817823

824+
fireEvent.click(screen.getByTestId('section-toolbar'));
825+
fireEvent.click(screen.getByTestId('section-records'));
818826
expect(screen.getByTestId('toggle-showSearch')).toHaveAttribute('aria-checked', 'false');
819827
expect(screen.getByTestId('toggle-showFilters')).toHaveAttribute('aria-checked', 'true');
820828
expect(screen.getByTestId('toggle-showSort')).toHaveAttribute('aria-checked', 'false');
@@ -838,6 +846,7 @@ describe('ViewConfigPanel', () => {
838846
);
839847

840848
// Toggle showSearch — panel becomes dirty
849+
fireEvent.click(screen.getByTestId('section-toolbar'));
841850
fireEvent.click(screen.getByTestId('toggle-showSearch'));
842851
expect(screen.getByTestId('view-config-footer')).toBeInTheDocument();
843852

@@ -868,6 +877,7 @@ describe('ViewConfigPanel', () => {
868877
);
869878

870879
// Make the panel dirty
880+
fireEvent.click(screen.getByTestId('section-toolbar'));
871881
fireEvent.click(screen.getByTestId('toggle-showSearch'));
872882
expect(screen.getByTestId('view-config-footer')).toBeInTheDocument();
873883

@@ -898,6 +908,7 @@ describe('ViewConfigPanel', () => {
898908
);
899909

900910
// Toggle multiple switches
911+
fireEvent.click(screen.getByTestId('section-toolbar'));
901912
fireEvent.click(screen.getByTestId('toggle-showSearch'));
902913
fireEvent.click(screen.getByTestId('toggle-showFilters'));
903914

@@ -1274,13 +1285,19 @@ describe('ViewConfigPanel', () => {
12741285
/>
12751286
);
12761287

1277-
// Appearance section is expanded by default
1288+
// Appearance section starts collapsed by default
1289+
expect(screen.queryByTestId('toggle-showDescription')).not.toBeInTheDocument();
1290+
1291+
// Click section header to expand
1292+
fireEvent.click(screen.getByTestId('section-appearance'));
1293+
1294+
// Toggle should now be visible
12781295
expect(screen.getByTestId('toggle-showDescription')).toBeInTheDocument();
12791296

1280-
// Click section header to collapse
1297+
// Click again to collapse
12811298
fireEvent.click(screen.getByTestId('section-appearance'));
12821299

1283-
// Toggle should be hidden
1300+
// Toggle should be hidden again
12841301
expect(screen.queryByTestId('toggle-showDescription')).not.toBeInTheDocument();
12851302
});
12861303

@@ -1296,6 +1313,7 @@ describe('ViewConfigPanel', () => {
12961313
/>
12971314
);
12981315

1316+
fireEvent.click(screen.getByTestId('section-appearance'));
12991317
expect(screen.getByTestId('appearance-color')).toBeInTheDocument();
13001318
expect(screen.getByTestId('appearance-rowHeight')).toBeInTheDocument();
13011319
expect(screen.getByTestId('toggle-wrapHeaders')).toBeInTheDocument();
@@ -1313,6 +1331,7 @@ describe('ViewConfigPanel', () => {
13131331
/>
13141332
);
13151333

1334+
fireEvent.click(screen.getByTestId('section-appearance'));
13161335
const mediumBtn = screen.getByTestId('row-height-medium');
13171336
fireEvent.click(mediumBtn);
13181337
expect(onViewUpdate).toHaveBeenCalledWith('rowHeight', 'medium');
@@ -1330,6 +1349,7 @@ describe('ViewConfigPanel', () => {
13301349
/>
13311350
);
13321351

1352+
fireEvent.click(screen.getByTestId('section-appearance'));
13331353
fireEvent.click(screen.getByTestId('toggle-wrapHeaders'));
13341354
expect(onViewUpdate).toHaveBeenCalledWith('wrapHeaders', true);
13351355
});
@@ -1350,6 +1370,7 @@ describe('ViewConfigPanel', () => {
13501370
fireEvent.click(screen.getByTestId('section-userActions'));
13511371
expect(screen.getByTestId('toggle-inlineEdit')).toBeInTheDocument();
13521372
expect(screen.getByTestId('toggle-addDeleteRecordsInline')).toBeInTheDocument();
1373+
fireEvent.click(screen.getByTestId('section-navigation'));
13531374
expect(screen.getByTestId('select-navigation-mode')).toBeInTheDocument();
13541375
});
13551376

@@ -1688,7 +1709,12 @@ describe('ViewConfigPanel', () => {
16881709
const panel = screen.getByTestId('view-config-panel');
16891710
expect(panel).toBeInTheDocument();
16901711

1691-
// These toggles should be rendered in the page section (always visible, not behind a collapsible)
1712+
// Expand collapsed sections
1713+
fireEvent.click(screen.getByTestId('section-toolbar'));
1714+
fireEvent.click(screen.getByTestId('section-navigation'));
1715+
fireEvent.click(screen.getByTestId('section-records'));
1716+
1717+
// These toggles should be rendered in the page section
16921718
expect(screen.getByTestId('toggle-showSearch')).toBeInTheDocument();
16931719
expect(screen.getByTestId('toggle-showFilters')).toBeInTheDocument();
16941720
expect(screen.getByTestId('toggle-showSort')).toBeInTheDocument();
@@ -1741,6 +1767,11 @@ describe('ViewConfigPanel', () => {
17411767
/>
17421768
);
17431769

1770+
// Expand collapsed sections
1771+
fireEvent.click(screen.getByTestId('section-toolbar'));
1772+
fireEvent.click(screen.getByTestId('section-navigation'));
1773+
fireEvent.click(screen.getByTestId('section-records'));
1774+
17441775
// Toggle showSearch off
17451776
fireEvent.click(screen.getByTestId('toggle-showSearch'));
17461777
expect(onViewUpdate).toHaveBeenCalledWith('showSearch', false);
@@ -1779,6 +1810,8 @@ describe('ViewConfigPanel', () => {
17791810
/>
17801811
);
17811812

1813+
fireEvent.click(screen.getByTestId('section-toolbar'));
1814+
17821815
// Toggle showHideFields off
17831816
fireEvent.click(screen.getByTestId('toggle-showHideFields'));
17841817
expect(onViewUpdate).toHaveBeenCalledWith('showHideFields', false);
@@ -1853,6 +1886,7 @@ describe('ViewConfigPanel', () => {
18531886
/>
18541887
);
18551888

1889+
fireEvent.click(screen.getByTestId('section-navigation'));
18561890
const navSelect = screen.getByTestId('select-navigation-mode');
18571891
expect(navSelect).toBeInTheDocument();
18581892
expect(navSelect).toHaveValue('page');
@@ -1870,6 +1904,7 @@ describe('ViewConfigPanel', () => {
18701904
/>
18711905
);
18721906

1907+
fireEvent.click(screen.getByTestId('section-navigation'));
18731908
expect(screen.getByTestId('input-navigation-width')).toBeInTheDocument();
18741909
});
18751910

@@ -1883,6 +1918,7 @@ describe('ViewConfigPanel', () => {
18831918
/>
18841919
);
18851920

1921+
fireEvent.click(screen.getByTestId('section-navigation'));
18861922
expect(screen.getByTestId('toggle-navigation-openNewTab')).toBeInTheDocument();
18871923
});
18881924

@@ -1898,6 +1934,7 @@ describe('ViewConfigPanel', () => {
18981934
/>
18991935
);
19001936

1937+
fireEvent.click(screen.getByTestId('section-navigation'));
19011938
fireEvent.change(screen.getByTestId('select-navigation-mode'), { target: { value: 'none' } });
19021939
expect(onViewUpdate).toHaveBeenCalledWith('navigation', expect.objectContaining({ mode: 'none' }));
19031940
expect(onViewUpdate).toHaveBeenCalledWith('clickIntoRecordDetails', false);
@@ -1913,6 +1950,7 @@ describe('ViewConfigPanel', () => {
19131950
/>
19141951
);
19151952

1953+
fireEvent.click(screen.getByTestId('section-records'));
19161954
expect(screen.getByTestId('select-selection-type')).toBeInTheDocument();
19171955
});
19181956

@@ -1928,6 +1966,7 @@ describe('ViewConfigPanel', () => {
19281966
/>
19291967
);
19301968

1969+
fireEvent.click(screen.getByTestId('section-records'));
19311970
fireEvent.change(screen.getByTestId('select-selection-type'), { target: { value: 'single' } });
19321971
expect(onViewUpdate).toHaveBeenCalledWith('selection', { type: 'single' });
19331972
});
@@ -2090,6 +2129,7 @@ describe('ViewConfigPanel', () => {
20902129
/>
20912130
);
20922131

2132+
fireEvent.click(screen.getByTestId('section-appearance'));
20932133
expect(screen.getByTestId('toggle-resizable')).toBeInTheDocument();
20942134
});
20952135

@@ -2105,6 +2145,7 @@ describe('ViewConfigPanel', () => {
21052145
/>
21062146
);
21072147

2148+
fireEvent.click(screen.getByTestId('section-appearance'));
21082149
fireEvent.click(screen.getByTestId('toggle-resizable'));
21092150
expect(onViewUpdate).toHaveBeenCalledWith('resizable', true);
21102151
});
@@ -2121,6 +2162,7 @@ describe('ViewConfigPanel', () => {
21212162
/>
21222163
);
21232164

2165+
fireEvent.click(screen.getByTestId('section-appearance'));
21242166
fireEvent.click(screen.getByText('console.objectView.conditionalFormatting'));
21252167
expect(screen.getByTestId('conditional-formatting-editor')).toBeInTheDocument();
21262168
expect(screen.getByTestId('add-conditional-rule')).toBeInTheDocument();
@@ -2138,6 +2180,7 @@ describe('ViewConfigPanel', () => {
21382180
/>
21392181
);
21402182

2183+
fireEvent.click(screen.getByTestId('section-appearance'));
21412184
fireEvent.click(screen.getByText('console.objectView.conditionalFormatting'));
21422185
fireEvent.click(screen.getByTestId('add-conditional-rule'));
21432186
expect(onViewUpdate).toHaveBeenCalledWith('conditionalFormatting', expect.arrayContaining([
@@ -2189,6 +2232,7 @@ describe('ViewConfigPanel', () => {
21892232
/>
21902233
);
21912234

2235+
fireEvent.click(screen.getByTestId('section-appearance'));
21922236
expect(screen.getByTestId('input-emptyState-title')).toBeInTheDocument();
21932237
expect(screen.getByTestId('input-emptyState-message')).toBeInTheDocument();
21942238
expect(screen.getByTestId('input-emptyState-icon')).toBeInTheDocument();
@@ -2266,6 +2310,7 @@ describe('ViewConfigPanel', () => {
22662310
/>
22672311
);
22682312

2313+
fireEvent.click(screen.getByTestId('section-records'));
22692314
expect(screen.getByTestId('select-addRecord-position')).toBeInTheDocument();
22702315
expect(screen.getByTestId('select-addRecord-mode')).toBeInTheDocument();
22712316
expect(screen.getByTestId('input-addRecord-formView')).toBeInTheDocument();
@@ -2313,6 +2358,7 @@ describe('ViewConfigPanel', () => {
23132358
/>
23142359
);
23152360

2361+
fireEvent.click(screen.getByTestId('section-appearance'));
23162362
expect(screen.getByTestId('row-height-compact')).toBeInTheDocument();
23172363
expect(screen.getByTestId('row-height-short')).toBeInTheDocument();
23182364
expect(screen.getByTestId('row-height-medium')).toBeInTheDocument();
@@ -2342,6 +2388,7 @@ describe('ViewConfigPanel', () => {
23422388
/>
23432389
);
23442390

2391+
fireEvent.click(screen.getByTestId('section-appearance'));
23452392
fireEvent.change(screen.getByTestId('input-emptyState-title'), { target: { value: 'No data' } });
23462393
expect(onViewUpdate).toHaveBeenCalledWith('emptyState', expect.objectContaining({ title: 'No data' }));
23472394
});
@@ -2358,6 +2405,7 @@ describe('ViewConfigPanel', () => {
23582405
/>
23592406
);
23602407

2408+
fireEvent.click(screen.getByTestId('section-appearance'));
23612409
fireEvent.change(screen.getByTestId('input-emptyState-message'), { target: { value: 'Try adding records' } });
23622410
expect(onViewUpdate).toHaveBeenCalledWith('emptyState', expect.objectContaining({ message: 'Try adding records' }));
23632411
});
@@ -2374,6 +2422,7 @@ describe('ViewConfigPanel', () => {
23742422
/>
23752423
);
23762424

2425+
fireEvent.click(screen.getByTestId('section-appearance'));
23772426
fireEvent.change(screen.getByTestId('input-emptyState-icon'), { target: { value: 'inbox' } });
23782427
expect(onViewUpdate).toHaveBeenCalledWith('emptyState', expect.objectContaining({ icon: 'inbox' }));
23792428
});
@@ -2529,6 +2578,7 @@ describe('ViewConfigPanel', () => {
25292578
/>
25302579
);
25312580

2581+
fireEvent.click(screen.getByTestId('section-appearance'));
25322582
fireEvent.click(screen.getByTestId('toggle-showDescription'));
25332583
expect(onViewUpdate).toHaveBeenCalledWith('showDescription', false);
25342584
});
@@ -2623,6 +2673,7 @@ describe('ViewConfigPanel', () => {
26232673
/>
26242674
);
26252675

2676+
fireEvent.click(screen.getByTestId('section-appearance'));
26262677
const heights = ['compact', 'short', 'medium', 'tall', 'extra_tall'];
26272678
heights.forEach((h) => {
26282679
fireEvent.click(screen.getByTestId(`row-height-${h}`));
@@ -2701,6 +2752,7 @@ describe('ViewConfigPanel', () => {
27012752
/>
27022753
);
27032754

2755+
fireEvent.click(screen.getByTestId('section-appearance'));
27042756
fireEvent.change(screen.getByTestId('input-emptyState-title'), { target: { value: '<script>alert("xss")</script>' } });
27052757
expect(onViewUpdate).toHaveBeenCalledWith('emptyState', expect.objectContaining({
27062758
title: '<script>alert("xss")</script>',

‎apps/console/src/__tests__/view-config-schema.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -394,7 +394,7 @@ describe('buildViewConfigSchema', () => {
394394
const section = schema.sections.find((s: any) => s.key === 'toolbar')!;
395395
const fieldKeys = section.fields.map((f: any) => f.key);
396396
expect(fieldKeys).toEqual([
397-
'showSearch', 'showSort', 'showFilters', 'showHideFields', 'showGroup', 'showColor', 'showDensity',
397+
'_toolbarSummary', 'showSearch', 'showSort', 'showFilters', 'showHideFields', 'showGroup', 'showColor', 'showDensity',
398398
]);
399399
});
400400

0 commit comments

Comments
 (0)