From 4e60e80c0bdf6344157fb7715b7c4a66de593c91 Mon Sep 17 00:00:00 2001
From: stefano bovio <stefano.bovio@geosolutionsgroup.com>
Date: Wed, 27 Mar 2024 10:04:31 +0100
Subject: [PATCH] Fix #9982 dropdown style and toc configuration improvements
 (#10128)

---
 web/client/configs/localConfig.json           | 11 ++--
 .../hooks/__tests__/usePluginItems-test.js    | 54 +++++++++++++++++++
 web/client/hooks/usePluginItems.js            |  3 +-
 web/client/themes/default/less/toc.less       |  4 ++
 4 files changed, 63 insertions(+), 9 deletions(-)
 create mode 100644 web/client/hooks/__tests__/usePluginItems-test.js

diff --git a/web/client/configs/localConfig.json b/web/client/configs/localConfig.json
index e726f83a4e..203c33fd9e 100644
--- a/web/client/configs/localConfig.json
+++ b/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", {
diff --git a/web/client/hooks/__tests__/usePluginItems-test.js b/web/client/hooks/__tests__/usePluginItems-test.js
new file mode 100644
index 0000000000..cc6dc856fd
--- /dev/null
+++ b/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');
+    });
+});
diff --git a/web/client/hooks/usePluginItems.js b/web/client/hooks/usePluginItems.js
index 0b7afffcdc..8cf3ccbdf0 100644
--- a/web/client/hooks/usePluginItems.js
+++ b/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;
 };
 
diff --git a/web/client/themes/default/less/toc.less b/web/client/themes/default/less/toc.less
index eca601c2e0..dca1918ee5 100644
--- a/web/client/themes/default/less/toc.less
+++ b/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 {