geosolutions-it#9683: add Details Panel for MS dashboard (geosolution…

…s-it#9689)

* geosolutions-it#9683: add Details Panel for MS dashboard
-  The tool have the same options (eg. show as modal, show at startup etc.)
- The tool is defined in the same way of the corresponding one for maps.
- Edit the layout to put add widget & show/hide connection buttons to the sidebar menu

* geosolutions-it#9683: resolve the FE test

Update DashboardEditor.jsx

* geosolutions-it#9683: resolve review comments
* description:
- remove all dashboard selectors and pieces of code in generic components like sidebar plugin component that relevant to dashboard.
- add missing test for detailsLoaded action
- create new selectors, details uri selector and details settings se;ector that are used in many places in code
- move AddWidgetDashboard, MapConnedctionDashboard plugins to direct plugins folder
- Put global spinner in details plugin and remove it from sidebar plugin
-  edit in handleSave enhancer file to make update attributes of details just implemented for Map and Dashboard
- Add custom style in details.less as the lib of react-dock doesn't allow to override left css property
- remove unused added style from panels.less

* geosolutions-it#9683: remove unused comments in dashboard-test file

* geosolutions-it#9683: edit in details epics and selectors to fix FE test

* geosolutions-it#9683: Resolve review comments
Description:
- Reolve unused loading property from DashoardEditor file
- Add tooltip for save dashboard
- Remove custom style in BorderLayout and leave it with generic style

* geosolutions-it#9683: resolve review comments
Description:
- edit navbar.less files to fix going language selector behind body panel
- remove unused z-index in dashboard.less
# Conflicts:
#	web/client/epics/__tests__/config-test.js
#	web/client/epics/config.js

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

@@ -28,13 +28,21 @@ describe('details actions tests', () => {
         const a = closeDetailsPanel();
         expect(a.type).toBe(CLOSE_DETAILS_PANEL);
     });
-    it('detailsLoaded', () => {
+    it('detailsLoaded for map', () => {
         const mapId = 1;
         const detailsUri = "sada/da/";
         const a = detailsLoaded(mapId, detailsUri);
         expect(a.type).toBe(DETAILS_LOADED);
         expect(a.detailsUri).toBe(detailsUri);
-        expect(a.mapId).toBe(mapId);
+        expect(a.id).toBe(mapId);
+    });
+    it('detailsLoaded for dashboard', () => {
+        const dashboardId = 1;
+        const detailsUri = "sada/da/";
+        const a = detailsLoaded(dashboardId, detailsUri);
+        expect(a.type).toBe(DETAILS_LOADED);
+        expect(a.detailsUri).toBe(detailsUri);
+        expect(a.id).toBe(dashboardId);
     });
     it('updateDetails', () => {
         const a = updateDetails('text');

web/client/actions/details.js

@@ -17,19 +17,19 @@ export const NO_DETAILS_AVAILABLE = "NO_DETAILS_AVAILABLE";
  * @memberof actions.details
  * @return {action}        type `UPDATE_DETAILS`
 */
-export const updateDetails = (detailsText) => ({
+export const updateDetails = (detailsText, resourceId) => ({
     type: UPDATE_DETAILS,
-    detailsText
+    detailsText, id: resourceId
 });
 
 /**
  * detailsLoaded
  * @memberof actions.details
  * @return {action}        type `DETAILS_LOADED`
 */
-export const detailsLoaded = (mapId, detailsUri, detailsSettings) => ({
+export const detailsLoaded = (resourceId, detailsUri, detailsSettings) => ({
     type: DETAILS_LOADED,
-    mapId,
+    id: resourceId,
     detailsUri,
     detailsSettings
 });

web/client/components/details/DetailsPanel.jsx

@@ -22,7 +22,8 @@ class DetailsPanel extends React.Component {
         panelClassName: PropTypes.string,
         style: PropTypes.object,
         onClose: PropTypes.func,
-        width: PropTypes.number
+        width: PropTypes.number,
+        isDashboard: PropTypes.bool
     };
 
     static contextTypes = {
@@ -41,14 +42,15 @@ class DetailsPanel extends React.Component {
         },
         active: false,
         panelClassName: "details-panel",
-        width: 550
+        width: 550,
+        isDashboard: false
     };
 
     render() {
         return (
             <ResponsivePanel
                 containerId="details-container"
-                containerClassName="dock-container"
+                containerClassName={` dock-container ${this.props.isDashboard ? "leftZeroPanel" : ""}`}
                 containerStyle={this.props.dockStyle}
                 open={this.props.active}
                 size={this.props.width}

web/client/components/layout/BorderLayout.jsx

@@ -19,7 +19,7 @@ import React from 'react';
  *  /></BorderLayout>
  *
  */
-export default ({id, children, header, footer, columns, height, style = {}, className, bodyClassName = "ms2-border-layout-body"}) =>
+export default ({id, children, header, footer, columns, height, style = {}, className, bodyClassName = "ms2-border-layout-body" }) =>
     (<div id={id} className={className} style={{
         display: "flex",
         flexDirection: "column",

web/client/components/resources/ResourceGrid.jsx

@@ -113,7 +113,7 @@ export default ({
                 edit,
                 nameFieldFilter,
                 category: categoryName,
-                enableDetails: categoryName === 'MAP',
+                enableDetails: categoryName === 'MAP' || categoryName === 'DASHBOARD',
                 onResourceLoad
                 // resource
             })}

web/client/components/resources/modals/enhancers/handleSave.js

@@ -18,11 +18,12 @@ export default mapPropsStream(props$ => {
             .withLatestFrom(props$)
             .switchMap(([resource, props]) =>
                 updateResource(resource)
-                    .flatMap(rid => resource.category === 'MAP' ? updateResourceAttribute({
-                        id: rid,
-                        name: 'detailsSettings',
-                        value: JSON.stringify(resource.attributes?.detailsSettings || {})
-                    }) : Rx.Observable.of(rid))
+                    .flatMap(rid => (['MAP', 'DASHBOARD'].includes(resource.categoryName)) ?
+                        updateResourceAttribute({
+                            id: rid,
+                            name: 'detailsSettings',
+                            value: JSON.stringify(resource.attributes?.detailsSettings || {})
+                        }) : Rx.Observable.of(rid))
                     .do(() => {
                         if (props) {
                             if (props.onClose) {

web/client/configs/localConfig.json

@@ -676,7 +676,15 @@
           "FeedbackMask"
         ],
         "dashboard": [
-          "BurgerMenu",
+          "Details",
+          "AddWidgetDashboard",
+          "MapConnectionDashboard",
+          {
+            "name": "SidebarMenu",
+            "cfg" : {
+              "containerPosition": "columns"
+              }
+          },                  
           {
             "name": "Dashboard",
             "cfg": {

web/client/epics/__tests__/config-test.js

@@ -8,7 +8,8 @@
 
 import expect from 'expect';
 import {head} from 'lodash';
-import {loadMapConfigAndConfigureMap, loadMapInfoEpic, storeDetailsInfoEpic, backgroundsListInitEpic} from '../config';
+import {loadMapConfigAndConfigureMap, loadMapInfoEpic, storeDetailsInfoDashboardEpic, storeDetailsInfoEpic, backgroundsListInitEpic} from '../config';
+
 import {LOAD_USER_SESSION} from '../../actions/usersession';
 import {
     loadMapConfig,
@@ -31,6 +32,7 @@ import testConfigEPSG31468 from "raw-loader!../../test-resources/testConfigEPSG3
 import ConfigUtils from "../../utils/ConfigUtils";
 import { DETAILS_LOADED } from '../../actions/details';
 import { EMPTY_RESOURCE_VALUE } from '../../utils/MapInfoUtils';
+import { dashboardLoaded } from '../../actions/dashboard';
 
 const api = {
     getResource: () => Promise.resolve({mapId: 1234})
@@ -346,7 +348,7 @@ describe('config epics', () => {
 
                     switch (action.type) {
                     case DETAILS_LOADED:
-                        expect(action.mapId).toBe(mapId);
+                        expect(action.id).toBe(mapId);
                         expect(action.detailsUri).toBe("rest/geostore/data/1/raw?decode=datauri");
                         break;
                     default:
@@ -457,5 +459,107 @@ describe('config epics', () => {
             }, {});
         });
     });
+
+    describe("storeDetailsInfoDashboardEpic", () => {
+        beforeEach(done => {
+            mockAxios = new MockAdapter(axios);
+            setTimeout(done);
+        });
+
+        afterEach(done => {
+            mockAxios.restore();
+            setTimeout(done);
+        });
+        const dashboardId = 1;
+        const dashboardAttributesEmptyDetails = {
+            "AttributeList": {
+                "Attribute": [
+                    {
+                        "name": "details",
+                        "type": "STRING",
+                        "value": EMPTY_RESOURCE_VALUE
+                    }
+                ]
+            }
+        };
+
+        const dashboardAttributesWithoutDetails = {
+            "AttributeList": {
+                "Attribute": []
+            }
+        };
+
+        const dashboardAttributesWithDetails = {
+            AttributeList: {
+                Attribute: [
+                    {
+                        name: 'details',
+                        type: 'STRING',
+                        value: 'rest\/geostore\/data\/1\/raw?decode=datauri'
+                    },
+                    {
+                        name: "thumbnail",
+                        type: "STRING",
+                        value: 'rest\/geostore\/data\/1\/raw?decode=datauri'
+                    },
+                    {
+                        name: 'owner',
+                        type: 'STRING',
+                        value: 'admin'
+                    }
+                ]
+            }
+        };
+        it('test storeDetailsInfoDashboardEpic', (done) => {
+            mockAxios.onGet().reply(200, dashboardAttributesWithDetails);
+            testEpic(addTimeoutEpic(storeDetailsInfoDashboardEpic), 1, dashboardLoaded("RES", "DATA"), actions => {
+                expect(actions.length).toBe(1);
+                actions.map((action) => {
+
+                    switch (action.type) {
+                    case DETAILS_LOADED:
+                        expect(action.id).toBe(dashboardId);
+                        expect(action.detailsUri).toBe("rest/geostore/data/1/raw?decode=datauri");
+                        break;
+                    default:
+                        expect(true).toBe(false);
+                    }
+                });
+                done();
+            }, {dashboard: {
+                resource: {
+                    id: dashboardId,
+                    attributes: {}
+                }
+            }});
+        });
+        it('test storeDetailsInfoDashboardEpic when api returns NODATA value', (done) => {
+            // const mock = new MockAdapter(axios);
+            mockAxios.onGet().reply(200, dashboardAttributesWithoutDetails);
+            testEpic(addTimeoutEpic(storeDetailsInfoDashboardEpic), 1, dashboardLoaded("RES", "DATA"), actions => {
+                expect(actions.length).toBe(1);
+                actions.map((action) => expect(action.type).toBe(TEST_TIMEOUT));
+                done();
+            }, {dashboard: {
+                resource: {
+                    id: dashboardId,
+                    attributes: {}
+                }
+            }});
+        });
+        it('test storeDetailsInfoDashboardEpic when api doesnt return details', (done) => {
+            mockAxios.onGet().reply(200, dashboardAttributesEmptyDetails);
+            testEpic(addTimeoutEpic(storeDetailsInfoDashboardEpic), 1, dashboardLoaded("RES", "DATA"), actions => {
+                expect(actions.length).toBe(1);
+                actions.map((action) => expect(action.type).toBe(TEST_TIMEOUT));
+                done();
+            }, {dashboard: {
+                resource: {
+                    id: dashboardId,
+                    attributes: {}
+                }
+            }});
+        });
+    });
 });
 

web/client/epics/__tests__/dashboard-test.js

@@ -338,16 +338,14 @@ describe('saveDashboard', () => {
 
         const startActions = [saveDashboard(RESOURCE)];
         testEpic(saveDashboardMethod, actionsCount, startActions, actions => {
-            expect(actions.length).toBe(actionsCount);
-            expect(actions[0].type).toBe(DASHBOARD_LOADING);
-            expect(actions[0].value).toBe(true);
-            expect(actions[1].type).toBe(SAVE_ERROR);
+            expect(actions.length).toBe(2);
+            expect(actions[0].type).toBe(SAVE_ERROR);
             expect(
-                actions[1].error.status === 403
-                 || actions[1].error.status === 404
+                actions[0].error.status === 403
+                 || actions[0].error.status === 404
             ).toBeTruthy();
-            expect(actions[2].type).toBe(DASHBOARD_LOADING);
-            expect(actions[2].value).toBe(false);
+            expect(actions[1].type).toBe(DASHBOARD_LOADING);
+            expect(actions[1].value).toBe(false);
         }, BASE_STATE, done);
     });
 
@@ -364,13 +362,11 @@ describe('saveDashboard', () => {
 
         const startActions = [saveDashboard(withoutMetadata)];
         testEpic(saveDashboardMethod, actionsCount, startActions, actions => {
-            expect(actions.length).toBe(3);
-            expect(actions[0].type).toBe(DASHBOARD_LOADING);
-            expect(actions[0].value).toBe(true);
-            expect(actions[1].type).toBe(SAVE_ERROR);
-            expect(typeof(actions[1].error) === 'string').toBeTruthy();
-            expect(actions[2].type).toBe(DASHBOARD_LOADING);
-            expect(actions[2].value).toBe(false);
+            expect(actions.length).toBe(2);
+            expect(actions[0].type).toBe(SAVE_ERROR);
+            expect(typeof(actions[0].error) === 'string').toBeTruthy();
+            expect(actions[1].type).toBe(DASHBOARD_LOADING);
+            expect(actions[1].value).toBe(false);
         }, BASE_STATE, done);
     });
 });