Add Extension to Docks panels not works

[Gaetanbrl]

Ref ML : https://groups.google.com/u/1/g/mapstore-developers/c/McOPpqDhf-0

Description

I try to create a new Extension with ResponsivePanel.
To do that, :

• Clone MapStoreExtension template
• Follow Working with Extension doc

My Extension is available but mapLayoutValuesSelector seems not update correctly because main toolbar is behind my ResponsivePanel and searchToolbar is in front of my ReponsivePanel header !

Even if i add My dockPanel to the list and use mapLayout, i get the same result :

https://github.com/jdev-org/MapStoreExtension/blob/76de2e067abf40a7429887dc4def3f2d09ffbfd2/js/extension/plugins/Module.jsx#L25-L28

https://github.com/jdev-org/MapStoreExtension/blob/76de2e067abf40a7429887dc4def3f2d09ffbfd2/js/extension/epics/main.js#L10-L20

How to reproduce

Ty this branch :

https://github.com/jdev-org/MapStoreExtension/tree/SampleComponent

Expected Result

If i insert a ResponsiveResult panel, i need to update map layout to keep searchToolbar and main toolbar

Current Result

Map layout is not updated.

• Not browser related

Browser info

(use this site: https://www.whatsmybrowser.org/ for non expert users)

Browser Affected	Version
Internet Explorer
Edge
Chrome
Firefox
Safari

Other useful information

[Gaetanbrl]

To get more info, when i open catalog right panel, the rightPanels size is correctly detected here :

MapStore2/web/client/epics/maplayout.js

Lines 122 to 130 in b697b85

	const rightPanels = head([
	get(state, "controls.details.enabled") && !mapInfoDetailsSettingsFromIdSelector(state)?.showAsModal && {right: mapLayout.right.md} || null,
	get(state, "controls.metadataexplorer.enabled") && {right: mapLayout.right.md} || null,
	get(state, "controls.measure.enabled") && showCoordinateEditorSelector(state) && {right: mapLayout.right.md} || null,
	get(state, "controls.userExtensions.enabled") && { right: mapLayout.right.md } || null,
	get(state, "controls.mapTemplates.enabled") && { right: mapLayout.right.md } || null,
	get(state, "controls.mapCatalog.enabled") && { right: mapLayout.right.md } || null,
	mapInfoEnabledSelector(state) && isMapInfoOpen(state) && !isMouseMoveIdentifyActiveSelector(state) && {right: mapLayout.right.md} || null
	].filter(panel => panel)) || {right: 0};

But with my SampleComponent panel, the right value is 40px instead of 550px (my panel heigth) and this dockable panel seems not detected in the right panel list (not parsed in previous righPanel filter) :

... indeed, store state seems not update and doesn't contain extension dock panel.

Here, we pass the additional dockPanel :

MapStore2/web/client/reducers/maplayout.js

Line 36 in b50227c

right: location === 'right' ? ((state.dockPanels.right).includes(name) ? state.dockPanels.right : [...state.dockPanels.right, name]) : state.dockPanels.right

location === 'right' ? state.dockPanels.right.includes(name) ? state.dockPanels.right : [...state.dockPanels.right, name] : state.dockPanels.right
(6) ['mapCatalog', 'mapTemplates', 'metadataexplorer', 'userExtensions', 'details', 'SampleComponent']

... and here, he is not in rightPanel list :

https://github.com/geosolutions-it/MapStore2/blob/master/web/client/epics/maplayout.js#L66

store.getState().maplayout.dockPanels.right
(5) ['mapCatalog', 'mapTemplates', 'metadataexplorer', 'userExtensions', 'details']

[Gaetanbrl]

if i force UPDATE_MAP_LAYOUT (epics) this works and i can access to toolbar and search bar :

export const updateTbarSearchBarPositions = (action$, store) =>
    action$.ofType(UPDATE_MAP_LAYOUT)
        .filter(() => {
            return enable(store.getState());
        })
        .filter(({ source }) => {
            return source !== name;
        })
        .map(({ layout }) => {
            const action = updateMapLayout({
                ...layout,
                right: SIZE + (layout?.boundingSidebarRect?.right ?? 0),
                boundingMapRect: {
                    ...(layout.boundingMapRect || {}),
                    right: SIZE + (layout?.boundingSidebarRect?.right ?? 0)
                },
                rightPanel: true
            });
            return { ...action, source: name }; // add an argument to avoid infinite loop.
        });

For me, this is a real issue for some reasons :

1. if we have to force UPDATE_MAP_LAYOUT doc need some detail about that (so, updateDockPanelsList is useless...)

2. if we have to use updateDockPanelsList (as explain in the doc), this action don't works and map layout is not update with extension ResponsivePanel.

Do you agree with that @tdipisa @allyoucanmap or the code used in the branch is wrong and need something to avoid to force UPDATE_MAP_LAYOUT action ?

Thanks.