Dynamic filter UI/UX Review geosolutions-it#11963 (geosolutions-it#11969)

Author: rowheat02

web/client/components/misc/switch/__tests__/SwitchButton-test.jsx

@@ -29,6 +29,12 @@ describe('SwitchButton component', () => {
         const el = container.querySelector('.mapstore-switch-btn');
         expect(el).toExist();
     });
+    it('applies custom className', () => {
+        ReactDOM.render(<SwitchButton className="mapstore-switch-btn-xs" />, document.getElementById("container"));
+        const container = document.getElementById('container');
+        const el = container.querySelector('.mapstore-switch-btn.mapstore-switch-btn-xs');
+        expect(el).toExist();
+    });
     it('Test SwitchButton onChange', () => {
         const actions = {
             onChange: () => {}

web/client/components/widgets/builder/wizard/FilterWizard.jsx

@@ -125,6 +125,7 @@ const FilterWizard = ({
                                     key={`ms-filter-tab-${tab.id}`}
                                     eventKey={tab.id}
                                     onClick={() => setActiveTab(tab.id)}
+                                    className="ms-filter-tab-item"
                                 >
                                     <span>{<Message msgId={tab.labelKey} />}</span>
                                 </NavItem>

web/client/components/widgets/builder/wizard/common/interactions/InteractionEventsSelector.jsx

@@ -42,7 +42,7 @@ const InteractionEventsSelector = ({target, expanded, toggleExpanded = () => {},
                     }
                 </Button>
                 <Glyphicon glyph={target?.glyph} />
-                <Text className="ms-flex-fill" fontSize="md"><Message msgId={targetTitleTranslationMap[target.title] || ""} /></Text>
+                <Text className="ms-flex-fill"><Message msgId={targetTitleTranslationMap[target.title] || ""} /></Text>
 
 
             </FlexBox>

web/client/components/widgets/builder/wizard/common/interactions/InteractionsRow.jsx

@@ -122,7 +122,7 @@ const InteractionsRow = ({item, target, interactions, sourceWidgetId, interactio
                     </Button>
                 )}
                 <Glyphicon glyph={item.icon}/>
-                <Text className="ms-flex-fill">{itemTitleTranslationMap[item.title] ? <Message msgId={itemTitleTranslationMap[item.title] } /> : <LocalizedString value={item.title}/> }</Text>
+                <Text className="ms-flex-fill ">{itemTitleTranslationMap[item.title] ? <Message msgId={itemTitleTranslationMap[item.title] } /> : <LocalizedString value={item.title}/> }</Text>
                 {item.interactionMetadata && item.type === "element" && (
                     <InteractionButtons
                         item={item}

web/client/components/widgets/builder/wizard/filter/FilterDropdownList.jsx

@@ -9,13 +9,15 @@ import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { FormGroup } from 'react-bootstrap';
 import Select from 'react-select';
+import './FilterDropdownList.less';
 
 const FilterDropdownList = ({
     items = [],
     selectionMode = 'multiple',
     selectedValues,
     placeholder = 'Select...',
-    onSelectionChange = () => {}
+    onSelectionChange = () => {},
+    layoutMaxHeight
 }) => {
     const isSingle = selectionMode === 'single';
     const normalizedValues = Array.isArray(selectedValues)
@@ -46,10 +48,16 @@ const FilterDropdownList = ({
         onSelectionChange(nextValues);
     };
 
+    const hasScrollableValues = typeof layoutMaxHeight === 'number' && normalizedValues.length > 0;
+    const valueContainerStyle = hasScrollableValues
+        ? { ['--filter-widget-dropdown-value-max-height']: `${layoutMaxHeight}px` }
+        : undefined;
+    const listClassName = ['ms-filter-widget-dropdown-list', hasScrollableValues && 'ms-filter-widget-dropdown-list--scrollable-values'].filter(Boolean).join(' ');
+
     return (
-        <FormGroup className="ms-filter-dropdown-list">
+        <FormGroup className={listClassName} style={valueContainerStyle}>
             <Select
-                className="ms-filter-dropdown"
+                className="ms-filter-widget-dropdown"
                 clearable={isSingle}
                 multi={!isSingle}
                 closeOnSelect={isSingle}
@@ -73,7 +81,8 @@ FilterDropdownList.propTypes = {
         PropTypes.oneOfType([PropTypes.string, PropTypes.number])
     ),
     placeholder: PropTypes.string,
-    onSelectionChange: PropTypes.func
+    onSelectionChange: PropTypes.func,
+    layoutMaxHeight: PropTypes.number
 };
 
 export default FilterDropdownList;

web/client/components/widgets/builder/wizard/filter/FilterDropdownList.less

@@ -0,0 +1,15 @@
+/*
+ * Copyright 2026, GeoSolutions.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/* Value container: selected tags area - max height + scroll only when there are selected values */
+.ms-filter-widget-dropdown-list {
+    &.ms-filter-widget-dropdown-list--scrollable-values .Select-multi-value-wrapper {
+        max-height: var(--filter-widget-dropdown-value-max-height);
+        overflow-y: auto;
+    }
+}

web/client/components/widgets/builder/wizard/filter/FilterLayoutTab.jsx

@@ -66,7 +66,7 @@ const FilterLayoutTab = ({
                     <FlexBox style={{ width: '100%' }}>
                         <div
                             onClick={() => handlePanelToggle('title')}
-                            style={{ cursor: 'pointer' }}
+                            className="accordion-title"
                         >
                             <Glyphicon glyph={expandedPanel === 'title' ? 'bottom' : 'next'} style={{ marginRight: 8 }} />
                             <strong style={{ color: 'inherit' }}><Message msgId="widgets.filterWidget.title" /></strong>
@@ -76,6 +76,7 @@ const FilterLayoutTab = ({
                             <SwitchButton
                                 checked={!layout.titleDisabled}
                                 onChange={(checked) => onChange('layout.titleDisabled', !checked)}
+                                className="mapstore-switch-btn-xs"
                             />
                         </div>
                     </FlexBox>
@@ -171,7 +172,7 @@ const FilterLayoutTab = ({
                 header={
                     <div
                         onClick={() => handlePanelToggle('items')}
-                        style={{ cursor: 'pointer' }}
+                        className="accordion-title"
                     >
                         <Glyphicon glyph={expandedPanel === 'items' ? 'bottom' : 'next'} style={{ marginRight: 8 }} />
                         <strong ><Message msgId="widgets.filterWidget.items" /></strong>

web/client/components/widgets/builder/wizard/filter/FilterSwitchList.jsx

@@ -61,6 +61,7 @@ const FilterSwitchList = ({
                                 checked={isChecked}
                                 disabled={disabled}
                                 onChange={() => handleToggle(id, isChecked)}
+                                className="mapstore-switch-btn-xs"
                             />
                             <span className="ms-filter-switch-list-item-label">{label}</span>
                         </div>

web/client/components/widgets/builder/wizard/filter/__tests__/FilterDropdownList-test.jsx

@@ -0,0 +1,91 @@
+/*
+ * Copyright 2026, GeoSolutions
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import expect from 'expect';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import FilterDropdownList from '../FilterDropdownList';
+
+describe('FilterDropdownList', () => {
+    beforeEach((done) => {
+        document.body.innerHTML = '<div id="container"></div>';
+        setTimeout(done);
+    });
+
+    afterEach((done) => {
+        ReactDOM.unmountComponentAtNode(document.getElementById("container"));
+        document.body.innerHTML = '';
+        setTimeout(done);
+    });
+
+    it('should apply scrollable values styles only when there are selected values', () => {
+        const container = document.getElementById("container");
+        const items = [
+            { id: '1', label: 'Alabama' },
+            { id: '2', label: 'Arizona' }
+        ];
+
+        // empty selection => no modifier class and no CSS variable
+        ReactDOM.render(
+            <FilterDropdownList
+                items={items}
+                selectionMode="multiple"
+                selectedValues={[]}
+                layoutMaxHeight={100}
+                onSelectionChange={() => {}}
+            />,
+            container
+        );
+        const listNodeEmpty = container.querySelector('.ms-filter-widget-dropdown-list');
+        expect(listNodeEmpty).toExist();
+        expect(listNodeEmpty.className).toNotContain('ms-filter-widget-dropdown-list--scrollable-values');
+        expect(listNodeEmpty.style.getPropertyValue('--filter-widget-dropdown-value-max-height')).toBe('');
+
+        // with selection => modifier class and CSS variable set
+        ReactDOM.render(
+            <FilterDropdownList
+                items={items}
+                selectionMode="multiple"
+                selectedValues={['1']}
+                layoutMaxHeight={100}
+                onSelectionChange={() => {}}
+            />,
+            container
+        );
+        const listNodeSelected = container.querySelector('.ms-filter-widget-dropdown-list');
+        expect(listNodeSelected).toExist();
+        expect(listNodeSelected.className).toContain('ms-filter-widget-dropdown-list--scrollable-values');
+        expect(listNodeSelected.style.getPropertyValue('--filter-widget-dropdown-value-max-height')).toBe('100px');
+        // sanity: react-select wrapper uses passed className + multi modifier
+        expect(container.querySelector('.ms-filter-widget-dropdown.Select--multi')).toExist();
+    });
+
+    it('should not apply scrollable styles when layoutMaxHeight is missing', () => {
+        const container = document.getElementById("container");
+        const items = [
+            { id: '1', label: 'Alabama' },
+            { id: '2', label: 'Arizona' }
+        ];
+
+        ReactDOM.render(
+            <FilterDropdownList
+                items={items}
+                selectionMode="multiple"
+                selectedValues={['1']}
+                onSelectionChange={() => {}}
+            />,
+            container
+        );
+
+        const listNode = container.querySelector('.ms-filter-widget-dropdown-list');
+        expect(listNode).toExist();
+        expect(listNode.className).toNotContain('ms-filter-widget-dropdown-list--scrollable-values');
+        expect(listNode.style.getPropertyValue('--filter-widget-dropdown-value-max-height')).toBe('');
+        expect(container.querySelector('.ms-filter-widget-dropdown.Select--multi')).toExist();
+    });
+});
+

web/client/components/widgets/builder/wizard/filter/__tests__/FilterLayoutTab-test.jsx

@@ -52,7 +52,8 @@ describe('FilterLayoutTab component', () => {
         const titleSpan = titlePanelHeader.querySelector('span');
         expect(titleSpan).toExist();
 
-        const titleToggle = titlePanelHeader.querySelector('div[style*="cursor: pointer"]');
+        const titleToggle = titlePanelHeader.querySelector('.accordion-title');
+        expect(titleToggle).toExist();
         Simulate.click(titleToggle);
 
         // Verify there are 6 input groups in title panel