Fix #10371 TOC - Open on map initialization options does not work as …

…expected (#10387)
geosolutions-it · May 31, 2024 · 6bef5bd · 6bef5bd
1 parent efe9ac2
commit 6bef5bd
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 19 deletions.
diff --git a/web/client/plugins/TOC/index.js b/web/client/plugins/TOC/index.js
@@ -44,7 +44,6 @@ import localizedProps from '../../components/misc/enhancers/localizedProps';
 import { registerCustomSaveHandler } from '../../selectors/mapsave';
 import toc from './reducers/toc';
 import { setControlProperty } from '../../actions/controls';
-import { updateTOCConfig } from './actions/toc';
 import Message from '../../components/I18N/Message';
 const Button = tooltip(ButtonRB);
 const FormControl = localizedProps('placeholder')(FormControlRB);
@@ -364,8 +363,7 @@ function TOC({
     visualizationMode,
     toolbarButtonProps,
     init,
-    onOpen,
-    onResetInit
+    onOpen
 }, context) {
     const activateParameter = (allow, activate) => {
         const isUserAdmin = user && user.role === 'ADMIN' || false;
@@ -431,13 +429,8 @@ function TOC({
     // automatically open the toc
     // when default open is true
     useEffect(() => {
-        if (init) {
-            if (defaultOpen) {
-                onOpen();
-                // we need to reset init to false
-                // so if we navigate to a new map we can initialize it again
-                onResetInit();
-            }
+        if (init && defaultOpen) {
+            onOpen();
         }
     }, [init]);
 
@@ -566,8 +559,11 @@ const getResolutionsProps = (state) => {
 const getTOCConfig = (state, props) => {
     const config = state?.toc?.config || {};
     const layers = layersSelector(state).filter(({ group }) => group !== 'background');
+    const mapLoadedCount = state?.toc?.mapLoadedCount;
+    const defaultOpen = config.defaultOpen ?? props?.defaultOpen;
     return {
-        init: config.init,
+        // use the mapLoadedCount as trigger for the toc initialization
+        init: mapLoadedCount ? `${mapLoadedCount}:${!!defaultOpen}` : false,
         defaultOpen: config.defaultOpen ?? props?.defaultOpen,
         theme: config.theme ?? props?.theme,
         hideOpacitySlider: config.hideOpacitySlider ?? props?.hideOpacitySlider ?? props?.activateOpacityTool,
@@ -621,8 +617,7 @@ const ConnectedTOC = connect(tocSelector, {
     onSort: moveNode,
     onChange: updateNode,
     onSelectNode: selectNode,
-    onOpen: setControlProperty.bind(null, 'drawer', 'enabled', true),
-    onResetInit: updateTOCConfig.bind(null, { init: false })
+    onOpen: setControlProperty.bind(null, 'drawer', 'enabled', true)
 })(TOC);
 
 export default createPlugin('TOC', {

diff --git a/web/client/plugins/TOC/reducers/__tests__/toc-test.js b/web/client/plugins/TOC/reducers/__tests__/toc-test.js
@@ -15,10 +15,10 @@ import toc from '../toc';
 describe('toc reducer', () => {
     it('should init with configureMap', () => {
         const state = toc({}, configureMap());
-        expect(state.config.init).toBe(true);
+        expect(state.mapLoadedCount).toBe(1);
     });
     it('should update config with updateTOCConfig', () => {
-        const state = toc({ config: { init: true }}, updateTOCConfig({ init: false }));
-        expect(state.config.init).toBe(false);
+        const state = toc({ config: { defaultOpen: true }}, updateTOCConfig({ defaultOpen: false }));
+        expect(state.config.defaultOpen).toBe(false);
     });
 });
diff --git a/web/client/plugins/TOC/reducers/toc.js b/web/client/plugins/TOC/reducers/toc.js
@@ -14,9 +14,9 @@ function toc(state = {}, action) {
     case MAP_CONFIG_LOADED: {
         return {
             ...state,
+            mapLoadedCount: (state.mapLoadedCount || 0) + 1,
             config: {
-                ...action?.config?.toc,
-                init: true
+                ...action?.config?.toc
             }
         };
     }

diff --git a/web/client/product/plugins.js b/web/client/product/plugins.js
@@ -22,6 +22,7 @@ import RulesManagerFooter from "../plugins/RulesManagerFooter";
 import UserSession from "../plugins/UserSession";
 import FeatureEditor from '../plugins/FeatureEditor';
 import MetadataInfo from '../plugins/MetadataInfo';
+import TOC from '../plugins/TOC';
 
 import {toModulePlugin} from "../utils/ModulePluginsUtils";
 
@@ -47,6 +48,7 @@ export const plugins = {
     UserSessionPlugin: UserSession,
     FeatureEditorPlugin: FeatureEditor,
     MetadataInfoPlugin: MetadataInfo,
+    TOCPlugin: TOC,
 
     // ### DYNAMIC PLUGINS ### //
     // product plugins
@@ -145,7 +147,6 @@ export const plugins = {
     StyleEditor: toModulePlugin('StyleEditor', () => import(/* webpackChunkName: 'plugins/styleEditor' */ '../plugins/StyleEditor')),
     SwipePlugin: toModulePlugin('Swipe', () => import(/* webpackChunkName: 'plugins/swipe' */ '../plugins/Swipe')),
     TOCItemsSettingsPlugin: toModulePlugin('TOCItemsSettings', () => import(/* webpackChunkName: 'plugins/TOCItemsSettings' */ '../plugins/TOCItemsSettings')),
-    TOCPlugin: toModulePlugin('TOC', () => import(/* webpackChunkName: 'plugins/TOC' */ '../plugins/TOC')),
     ThematicLayerPlugin: toModulePlugin('ThematicLayer', () => import(/* webpackChunkName: 'plugins/thematicLayer' */ '../plugins/ThematicLayer')),
     ThemeSwitcherPlugin: toModulePlugin('ThemeSwitcher', () => import(/* webpackChunkName: 'plugins/themeSwitcher' */ '../plugins/ThemeSwitcher')),
     TimelinePlugin: toModulePlugin('Timeline', () => import(/* webpackChunkName: 'plugins/timeline' */ '../plugins/Timeline')),