Fix geosolutions-it#9982 dropdown style and toc configuration improve…

…ments (geosolutions-it#10128)

web/client/configs/localConfig.json

@@ -311,11 +311,8 @@
             }, "Home", {
                 "name": "TOC",
                 "cfg": {
-                    "activateMetedataTool": false,
                     "activateMapTitle": false,
-                    "activateSortLayer": false,
-                    "activateLayerFilterTool": false,
-                    "activateQueryTool": false
+                    "activateSortLayer": false
                 }
             }, "AddGroup", {
                 "name": "TOCItemsSettings",
@@ -452,7 +449,6 @@
             }, {
                 "name": "TOC",
                 "cfg": {
-                    "activateMetedataTool": false,
                     "layerOptions": {
                       "legendOptions": {
                         "WMSLegendOptions": "forceLabels:on",
@@ -655,9 +651,8 @@
                 "name": "TOC",
                 "cfg": {
                     "activateMapTitle": false,
-                    "activateSettingsTool": false,
-                    "activateMetedataTool": false,
-                    "activateRemoveLayer": false
+                    "activateRemoveLayer": false,
+                    "activateRemoveGroup": false
                 }
 
             }, "AddGroup", "MapFooter", {

web/client/hooks/__tests__/usePluginItems-test.js

@@ -0,0 +1,54 @@
+/*
+ * Copyright 2024, GeoSolutions Sas.
+ * 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 usePluginItems from "../usePluginItems";
+import { act } from 'react-dom/test-utils';
+
+describe('usePluginItems', () => {
+    const Component = ({ items = [] }) => {
+        const configuredItems = usePluginItems({
+            items,
+            loadedPlugins: {}
+        });
+        return <div id="component">{configuredItems.map(({ name }) => name).join(',')}</div>;
+    };
+
+    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 reload the list of confiugred items if they change', () => {
+        const plugin01 = {
+            name: 'Plugin01',
+            Component: () => null
+        };
+        const plugin02 = {
+            name: 'Plugin02',
+            Component: () => null
+        };
+        act(() => {
+            ReactDOM.render(<Component items={[plugin01, plugin02]}/>, document.getElementById('container'));
+        });
+
+        expect(document.querySelector('#component').innerText).toBe('Plugin02,Plugin01');
+
+        act(() => {
+            ReactDOM.render(<Component items={[plugin01]}/>, document.getElementById('container'));
+        });
+
+        expect(document.querySelector('#component').innerText).toBe('Plugin01');
+    });
+});

web/client/hooks/usePluginItems.js

@@ -60,8 +60,9 @@ const usePluginItems = ({
         loadedPlugins,
         loaderComponent
     };
+    const itemsKeys = items.map(({ name }) => name).join(',');
     const loadedPluginsKeys = join(Object.keys(loadedPlugins || {}), ',');
-    const configuredItems = useMemo(() => configurePluginItems(props.current), [loadedPluginsKeys, ...dependencies]);
+    const configuredItems = useMemo(() => configurePluginItems(props.current), [loadedPluginsKeys, itemsKeys, ...dependencies]);
     return configuredItems;
 };
 

web/client/themes/default/less/toc.less

@@ -170,8 +170,12 @@
     }
     .dropdown-menu {
         font-size: 12px;
+        width: 250px;
         > li > a {
             padding: 4px 8px;
+            display: flex;
+            word-break: break-word;
+            white-space: normal;
         }
     }
     .ms-toc-toolbar-dropdown {