fix geosolutions-it#9683: add Details Panel for MS dashboard

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

@@ -671,8 +671,18 @@
  "FeedbackMask"
  ],
  "dashboard": [
- "BurgerMenu",
- "Dashboard",
+ "Details",
+ "AddWidgetDashboard",
+ "MapConnectionDashboard",
+ {
+ "name": "SidebarMenu",
+ "cfg" : {
+ "containerPosition": "columns"
+ }
+ }, 
+ {
+ "name": "Dashboard"
+ },
  "Notifications",
  "Login",
  {

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

@@ -8,7 +8,7 @@
 
 import expect from 'expect';
 import {head} from 'lodash';
-import {loadMapConfigAndConfigureMap, loadMapInfoEpic, storeDetailsInfoEpic} from '../config';
+import {loadMapConfigAndConfigureMap, loadMapInfoEpic, storeDetailsInfoDashboardEpic, storeDetailsInfoEpic} from '../config';
 import {LOAD_USER_SESSION} from '../../actions/usersession';
 import {
  loadMapConfig,
@@ -30,6 +30,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})
@@ -345,7 +346,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:
@@ -379,5 +380,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);
  });
 });