configurable Search plugin layout menu

[stefanocudini]

Description

Fix issue #11546

What kind of change does this PR introduce? (check one with "x", remove the others)

• Feature

Issue

What is the current behavior?
All custom services are show only to the side menu introduced here: #11144

What is the new behavior?
This new option for plugin Search in localConfig:
cfg.searchOptions.bottomMenuServices (default false to maintain old config)
if true allows you to move the side menu below the main menu, keeping it at the same level. Vertical scrolling is maintained for very long lists.

search_new_layout.mp4

Breaking change

No.
one style Less class added this preserve compatibility with old themes 'search-services-submenus-bottom`

Other useful information

localConfig in section plugins.desktop, example to enable feature working with public GS:

{
        "name": "Search",
        "cfg": {
          "searchOptions": {
            "bottomMenuServices": true,
            "services": [
              {
                "type": "wfs",
                "name": "US States",
                "displayName": "${properties.state_name}",
                "subTitle": "level: mapstore:states",
                "priority": 1,
                "options": {
                  "url": "https://gs-stable.geo-solutions.it/geoserver/wfs",
                  "typeName": "mapstore:states",
                  "queriableAttributes": [
                    "state_name"
                  ],
                  "sortBy": "",
                  "maxFeatures": 5
                }
              },
              {
                "type": "wfs",
                "name": "Cleveland Metro Trails",
                "displayName": "${properties.name}",
                "subTitle": "level: clevelandmetro:cm_regional_trails_with_routes",
                "priority": 1,
                "options": {
                  "url": "https://gs-stable.geo-solutions.it/geoserver/wfs",
                  "typeName": "clevelandmetro:cm_regional_trails_with_routes",
                  "queriableAttributes": [
                    "name"
                  ],
                  "sortBy": "",
                  "maxFeatures": 5
                }
              }
            ]
          }
        }
      }

[anup39]

@stefanocudini The changes in layout seems okay. One thing that I find missing is relevant test case .

Can you add a related test to check if the class or layout is correct when the property bottomMenuServices (true) exists in searchOptions.

Something like

it("Submenu container when multiple services and bottomMenuServices ", () => {
        ReactDOM.render(<SearchBar searchOptions={{"bottomMenuServices": true,  services: [{type: "nominatim"}, {type: "wfs", name: "test"}]}}/>, 
        .......
        ......
        .....
 });

SearchBar-test.jsx

[anup39]

#11581 (comment)