#8086 Layout changes and other improvements

docs/developer-guide/mapstore-migration-guide.md

@@ -91,12 +91,90 @@ formats:
   - '*'
 ```
 
+### Replacing BurgerMenu with SidebarMenu
+There were several changes applied to the application layout, one of them is the Sidebar Menu that comes to replace Burger menu on map viewer and in contexts.
+Following actions need to be applied to make a switch:
+- Update localConfig.json and add "SidebarMenu" entry to the "desktop" section:
+```json
+{
+    "desktop": [
+        ...
+        "SidebarMenu",
+        ...
+    ]
+}
+```
+- Remove "BurgerMenu" entry from "desktop" section.
+
+#### Updating contexts to use Sidebar Menu
+
+Contents of your `pluginsConfig.json` need to be reviewed to allow usage of new "SidebarMenu" in contexts.
+
+- Find "BurgerMenu" plugin confuguration in `pluginsConfig.json` and remove `"hidden": true` line from it:
+
+```json
+    {
+    "name": "BurgerMenu",
+    "glyph": "menu-hamburger",
+    "title": "plugins.BurgerMenu.title",
+    "description": "plugins.BurgerMenu.description",
+    "dependencies": [
+        "OmniBar"
+    ]
+}
+```
+
+- Add `SidebarMenu` entry to the "plugins" array:
+
+```json
+{
+    "plugins": [
+        ...
+        {
+            "name": "SidebarMenu",
+            "hidden": true
+        }
+        ...
+    ]
+}
+```
+
+- Go through all plugins definitions and replace `BurgerMenu` dependency with `SidebarMenu`, e.g.:
+
+```json
+    {
+      "name": "MapExport",
+      "glyph": "download",
+      "title": "plugins.MapExport.title",
+      "description": "plugins.MapExport.description",
+      "dependencies": [
+        "SidebarMenu"
+      ]
+    }
+```
+
+- Also the `StreetView` plugin needs to depend from `SidebarMenu`.
+
+```json
+{
+      "name": "StreetView",
+      "glyph": "road",
+      "title": "plugins.StreetView.title",
+      "description": "plugins.StreetView.description",
+      "dependencies": [
+        "SidebarMenu"
+      ]
+}
+```
+
+
 ## Migration from 2022.01.00 to 2022.01.01
 
 ### MailingLists plugin has been removed
 
 `MailingLists` plugin has ben removed from the core of MapStore. This means you can remove it from your `localConfig.json` (if present, it will be anyway ignored by the plugin system).
 
+
 ## Migration from 2021.02.02 to 2022.01.00
 
 This release includes several libraries upgrade on the backend side,

package.json

@@ -221,7 +221,7 @@
     "react-codemirror2": "4.0.0",
     "react-color": "2.17.0",
     "react-confirm-button": "0.0.2",
-    "react-container-dimensions": "1.3.2",
+    "react-container-dimensions": "1.4.1",
     "react-contenteditable": "3.3.2",
     "react-copy-to-clipboard": "5.0.0",
     "react-data-grid": "5.0.4",

web/client/actions/__tests__/sidebarmenu-test.js

@@ -0,0 +1,19 @@
+/**
+ * Copyright 2022, 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 {SET_LAST_ACTIVE_ITEM, setLastActiveItem} from "../sidebarmenu";
+
+describe('Test correctness of the sidebar actions', () => {
+
+    it('test setLastActiveItem', () => {
+        const action = setLastActiveItem("annotations");
+        expect(action.type).toBe(SET_LAST_ACTIVE_ITEM);
+        expect(action.value).toBe("annotations");
+    });
+});

web/client/actions/sidebarmenu.js

@@ -0,0 +1,16 @@
+/*
+ * Copyright 2022, 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.
+*/
+
+export const SET_LAST_ACTIVE_ITEM = 'SIDEBARMENU:SET_LAST_ACTIVE_ITEM';
+
+export function setLastActiveItem(value) {
+    return {
+        type: SET_LAST_ACTIVE_ITEM,
+        value
+    };
+}

web/client/components/TOC/Toolbar.jsx

@@ -23,6 +23,7 @@ class Toolbar extends React.Component {
     static propTypes = {
         groups: PropTypes.array,
         items: PropTypes.array,
+        layers: PropTypes.array,
         selectedLayers: PropTypes.array,
         generalInfoFormat: PropTypes.string,
         selectedGroups: PropTypes.array,
@@ -41,6 +42,7 @@ class Toolbar extends React.Component {
     static defaultProps = {
         groups: [],
         items: [],
+        layers: [],
         selectedLayers: [],
         selectedGroups: [],
         onToolsActions: {

web/client/components/data/identify/IdentifyContainer.jsx

@@ -8,17 +8,17 @@
 
 import React from 'react';
 
-import { Row } from 'react-bootstrap';
+import {Row} from 'react-bootstrap';
 import { get } from 'lodash';
 import Toolbar from '../../misc/toolbar/Toolbar';
 import Message from '../../I18N/Message';
-import DockablePanel from '../../misc/panels/DockablePanel';
 import GeocodeViewer from './GeocodeViewer';
 import ResizableModal from '../../misc/ResizableModal';
 import Portal from '../../misc/Portal';
 import Coordinate from './coordinates/Coordinate';
 import { responseValidForEdit } from '../../../utils/IdentifyUtils';
 import LayerSelector from './LayerSelector';
+import ResponsivePanel from "../../misc/panels/ResponsivePanel";
 
 /**
  * Component for rendering Identify Container inside a Dockable container
@@ -108,102 +108,106 @@ export default props => {
     const missingResponses = requests.length - responses.length;
     const revGeocodeDisplayName = reverseGeocodeData.error ? <Message msgId="identifyRevGeocodeError"/> : reverseGeocodeData.display_name;
     return (
-        <div id="identify-container" className={enabled && requests.length !== 0 ? "identify-active" : ""}>
-            <DockablePanel
-                bsStyle="primary"
-                glyph="map-marker"
-                open={enabled && requests.length !== 0}
-                size={size}
-                fluid={fluid}
-                position={position}
-                draggable={draggable}
-                onClose={() => {
-                    onClose();
-                    toggleHighlightFeature(false);
-                }}
-                dock={dock}
-                style={dockStyle}
-                showFullscreen={showFullscreen}
-                zIndex={zIndex}
-                header={[
-                    <Row className="layer-select-row">
-                        <div className="layer-col">
-                            <span className="identify-icon glyphicon glyphicon-1-layer"/>
-                            <LayerSelector
-                                responses={responses}
-                                index={index}
-                                loaded={loaded}
-                                setIndex={setIndex}
-                                missingResponses={missingResponses}
-                                emptyResponses={emptyResponses}
-                                validator={validator}
-                                format={format}
-                            />
-                            <Toolbar
-                                btnDefaultProps={{ bsStyle: 'primary', className: 'square-button-md' }}
-                                buttons={getFeatureButtons(props)}
-                                transitionProps={null}
-                            />
-                        </div>
-                    </Row>,
-                    !disableCoordinatesRow &&
-                    (<Row className="coordinates-edit-row">
-                        <span className="identify-icon glyphicon glyphicon-point"/>
-                        <div style={showCoordinateEditor ? {zIndex: 1} : {}} className={"coordinate-editor"}>
-                            <Coordinate
-                                key="coordinate-editor"
-                                formatCoord={formatCoord}
-                                enabledCoordEditorButton={enabledCoordEditorButton}
-                                onSubmit={onSubmitClickPoint}
-                                onChangeFormat={onChangeFormat}
-                                edit={showCoordinateEditor}
-                                coordinate={{
-                                    lat: latlng && latlng.lat,
-                                    lon: lngCorrected
-                                }}
-                            />
-                        </div>
-                        <GeocodeViewer latlng={latlng} revGeocodeDisplayName={revGeocodeDisplayName} {...props}/>
+        <ResponsivePanel
+            containerStyle={dockStyle}
+            containerId="identify-container"
+            containerClassName={enabled && requests.length !== 0 ? "identify-active" : ""}
+            bsStyle="primary"
+            glyph="map-marker"
+            open={enabled && requests.length !== 0}
+            size={size}
+            fluid={fluid}
+            position={position}
+            draggable={draggable}
+            onClose={() => {
+                onClose();
+                toggleHighlightFeature(false);
+            }}
+            dock={dock}
+            style={dockStyle}
+            showFullscreen={showFullscreen}
+            zIndex={zIndex}
+            header={[
+                <Row className="layer-select-row">
+                    <div className="layer-col">
+                        <span className="identify-icon glyphicon glyphicon-1-layer"/>
+                        <LayerSelector
+                            responses={responses}
+                            index={index}
+                            loaded={loaded}
+                            setIndex={setIndex}
+                            missingResponses={missingResponses}
+                            emptyResponses={emptyResponses}
+                            validator={validator}
+                            format={format}
+                        />
                         <Toolbar
                             btnDefaultProps={{ bsStyle: 'primary', className: 'square-button-md' }}
-                            buttons={toolButtons}
-                            transitionProps={null
+                            buttons={getFeatureButtons(props)}
+                            transitionProps={null}
+                        />
+                    </div>
+                </Row>,
+                !disableCoordinatesRow &&
+                (<Row className="coordinates-edit-row">
+                    <span className="identify-icon glyphicon glyphicon-point"/>
+                    <div style={showCoordinateEditor ? {zIndex: 1} : {}} className={"coordinate-editor"}>
+                        <Coordinate
+                            key="coordinate-editor"
+                            formatCoord={formatCoord}
+                            enabledCoordEditorButton={enabledCoordEditorButton}
+                            onSubmit={onSubmitClickPoint}
+                            onChangeFormat={onChangeFormat}
+                            edit={showCoordinateEditor}
+                            coordinate={{
+                                lat: latlng && latlng.lat,
+                                lon: lngCorrected
+                            }}
+                        />
+                    </div>
+                    <GeocodeViewer latlng={latlng} revGeocodeDisplayName={revGeocodeDisplayName} {...props}/>
+                    <Toolbar
+                        btnDefaultProps={{ bsStyle: 'primary', className: 'square-button-md' }}
+                        buttons={toolButtons}
+                        transitionProps={null
                             /* transitions was causing a bad rendering of toolbar present in the identify panel
                                  * for this reason they ahve been disabled
                                 */
-                            }/>
-                    </Row>)
-                ].filter(headRow => headRow)}>
-                <Viewer
-                    index={index}
-                    setIndex={setIndex}
-                    format={format}
-                    missingResponses={missingResponses}
-                    responses={responses}
-                    requests={requests}
-                    showEmptyMessageGFI={showEmptyMessageGFI}
-                    disableInfoAlert={disableInfoAlert}
-                    {...viewerOptions}/>
-            </DockablePanel>
-            <Portal>
-                <ResizableModal
-                    fade
-                    title={<Message msgId="warning"/>}
-                    size="xs"
-                    show={warning}
-                    onClose={clearWarning}
-                    buttons={[{
-                        text: <Message msgId="close"/>,
-                        onClick: clearWarning,
-                        bsStyle: 'primary'
-                    }]}>
-                    <div className="ms-alert" style={{padding: 15}}>
-                        <div className="ms-alert-center text-center">
-                            <Message msgId="identifyNoQueryableLayers"/>
+                        }/>
+                </Row>)
+            ].filter(headRow => headRow)}
+            siblings={
+                <Portal>
+                    <ResizableModal
+                        fade
+                        title={<Message msgId="warning"/>}
+                        size="xs"
+                        show={warning}
+                        onClose={clearWarning}
+                        buttons={[{
+                            text: <Message msgId="close"/>,
+                            onClick: clearWarning,
+                            bsStyle: 'primary'
+                        }]}>
+                        <div className="ms-alert" style={{padding: 15}}>
+                            <div className="ms-alert-center text-center">
+                                <Message msgId="identifyNoQueryableLayers"/>
+                            </div>
                         </div>
-                    </div>
-                </ResizableModal>
-            </Portal>
-        </div>
+                    </ResizableModal>
+                </Portal>
+            }
+        >
+            <Viewer
+                index={index}
+                setIndex={setIndex}
+                format={format}
+                missingResponses={missingResponses}
+                responses={responses}
+                requests={requests}
+                showEmptyMessageGFI={showEmptyMessageGFI}
+                disableInfoAlert={disableInfoAlert}
+                {...viewerOptions}/>
+        </ResponsivePanel>
     );
 };