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 {