From 594a6b0c495460f746f9f041787d10699b209a3a Mon Sep 17 00:00:00 2001 From: stefano bovio Date: Fri, 31 May 2024 15:04:49 +0200 Subject: [PATCH] Fix #10371 TOC - Open on map initialization options does not work as expected (#10387) --- web/client/plugins/TOC/index.js | 21 +++++++------------ .../TOC/reducers/__tests__/toc-test.js | 6 +++--- web/client/plugins/TOC/reducers/toc.js | 4 ++-- web/client/product/plugins.js | 3 ++- 4 files changed, 15 insertions(+), 19 deletions(-) diff --git a/web/client/plugins/TOC/index.js b/web/client/plugins/TOC/index.js index 4ea2bd86ef..7ea8b64786 100644 --- 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 index 092d0da713..f63c98cd71 100644 --- 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 index d45bb3f3a4..cfd541cc7b 100644 --- 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 index 1f528562fc..86d449081d 100644 --- 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')),