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

…expected (#10387) (#10393)
geosolutions-it · May 31, 2024 · 8f02473 · 8f02473
1 parent 7fbd031
commit 8f02473
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')),