118 show current map url (#123)

* Add component to show the current map url; show the url for the saved map when it has an id
* Use MapTitle as link title, use Paper from material-ui

Author: milafrerichs

src/components/geonode.jsx

@@ -23,6 +23,7 @@ import enMessages from 'boundless-sdk/locale/en.js';
 global.enMessages = enMessages;
 
 import Save from './save';
+import MapUrlLink from '../containers/MapUrlLink';
 
 import '../css/app.css'
 import 'boundless-sdk/dist/css/components.css';
@@ -109,14 +110,15 @@ class GeoNodeViewer extends React.Component {
         onRequestClose={this._handleRequestClose.bind(this)}
       />);
     }
-    let layerList, save = undefined;
+    let layerList, save, mapUrl;
     if(this.edit) {
       layerList = {
         sources: this.props.addLayerSources,
         allowUserInput: true
       };
       if(this.props.server) {
         save = (<div id='save-button' className='geonode-save'><Save map={map} /></div>);
+        mapUrl = (<MapUrlLink />);
       }
     }
     return (
@@ -131,6 +133,7 @@ class GeoNodeViewer extends React.Component {
         <div id='rotate-button'><Rotate autoHide={true} tooltipPosition='right' map={map} /></div>
         <div id='popup' className='ol-popup'><InfoPopup toggleGroup='navigation' toolId='nav' infoFormat='application/vnd.ogc.gml' map={map} /></div>
         {save}
+        {mapUrl}
       </div>
     );
   }

src/components/mapUrl.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import Paper from 'material-ui/Paper'
+import muiThemeable from 'material-ui/styles/muiThemeable';
+
+export class MapUrl extends React.Component {
+  render() {
+    const showHideClass = this.props.show ? '' : 'hide';
+    const content=[(<a key="link" href={this.props.url} className='map-url'>{this.props.text}</a>)];
+    const style = {
+      background: this.props.muiTheme.palette.primary1Color,
+      color: this.props.muiTheme.palette.alternateTextColor,
+      padding: '5px'
+    }
+    return (
+      <Paper className={'map-url-wrapper ' + showHideClass} children={content} style={style}/>
+    )
+  }
+}
+MapUrl.propTypes = {
+  url: React.PropTypes.string.isRequired,
+  text: React.PropTypes.string.isRequired,
+  show: React.PropTypes.bool
+}
+MapUrl.contextTypes = {
+  muiTheme: React.PropTypes.object
+};
+export default muiThemeable()(MapUrl);

src/constants/server.js

@@ -0,0 +1,6 @@
+export const NEW_MAP_ENDPOINT = '/maps/new/data';
+export const VIEW_MAP_ENDPOINT = '/maps/';
+
+export const edit_map_endpoint = (id) => {
+  return `/maps/${id}/data`;
+};

src/containers/MapUrlLink.js

@@ -0,0 +1,18 @@
+import {connect} from 'react-redux';
+import MapUrl from '../components/mapUrl';
+import {getMapId, getMapViewUrl} from '../state/map/selectors';
+import {getMapTitle} from '../state/mapConfig/selectors';
+
+const mapStateToProps = (state) => {
+  return {
+    url: getMapViewUrl(state),
+    show: getMapId(state) ? true : false,
+    text: getMapTitle(state) || ''
+  };
+};
+
+const MapUrlLink = connect(
+  mapStateToProps
+)(MapUrl);
+
+export default MapUrlLink;

src/css/app.css

@@ -72,6 +72,22 @@ html, body {
 .layer-tree-panel {
   max-height: 94vh !important;
 }
+.map-url-wrapper {
+	position: absolute;
+  top: 0;
+  width: 50%;
+  left: 25%;
+	height: 25px;
+  text-align: center;
+}
+.map-url-wrapper.hide {
+	display: none;
+}
+.map-url-wrapper a {
+	padding: 10px;
+	color: #fff;
+	font-size: 0.8em;
+}
 #debug {
   position: absolute;
   top: 0;

src/services/geonode.js

@@ -1,7 +1,7 @@
 import MapConfigTransformService from 'boundless-sdk/services/MapConfigTransformService';
 import MapConfigService from 'boundless-sdk/services/MapConfigService';
 import {getCRSFToken, removeTrailingSlash} from '../helper';
-const NEW_MAP_ENDPOINT = '/maps/new/data';
+import {edit_map_endpoint, NEW_MAP_ENDPOINT} from '../constants/server'
 
 import 'whatwg-fetch';
 
@@ -17,7 +17,7 @@ const createRequestObject = function(method, body) {
   };
 };
 const saveEndPoint = (id = undefined) => {
-  return id ? `/maps/${id}/data` : NEW_MAP_ENDPOINT;
+  return id ? edit_map_endpoint(id) : NEW_MAP_ENDPOINT;
 };
 const saveMethod = (id = undefined) => {
   return id ? 'PUT' : 'POST';

src/state/map/selectors.js

@@ -1,3 +1,6 @@
+import {getServerUrl} from '../server/selectors'
+import {removeTrailingSlash} from '../../helper';
+import {VIEW_MAP_ENDPOINT} from '../../constants/server';
 
 function isError(state) {
   return (state.map.save.error && !state.map.save.success) ? true : false;
@@ -17,3 +20,6 @@ export function errorMessage(state) {
 export function getMapId(state) {
   return state.map.id;
 }
+export function getMapViewUrl(state) {
+  return `${removeTrailingSlash(getServerUrl(state))}${VIEW_MAP_ENDPOINT}${getMapId(state)}`;
+}

src/state/server/selectors.js

@@ -0,0 +1,3 @@
+export function getServerUrl(state) {
+  return state.server.url;
+}

tests/components/mapUrl.test.js

@@ -0,0 +1,24 @@
+import {MapUrl} from '../../src/components/mapUrl';
+import {shallowRender, shallowRenderOutput } from '../testhelper';
+import ReactTestUtils from 'react-addons-test-utils';
+
+describe('mapUrl', () => {
+  let mapUrlComponent, url, muiTheme;
+  beforeEach(function() {
+    url = 'http://geonode.org';
+    muiTheme = { palette: { primary1Color: '', alternateTextColor: ''}};
+		mapUrlComponent = shallowRenderOutput( <MapUrl text='Test' url={url} muiTheme={muiTheme}/> );
+  });
+	it('exists', () => {
+		mapUrlComponent = shallowRender( <MapUrl muiTheme={muiTheme} url='' text=''/> );
+		assert.isDefined(ReactTestUtils.isCompositeComponent(mapUrlComponent));
+	});
+	it('has a link with class map-url', () => {
+    const urlWrapper = mapUrlComponent.props.children[0];
+		assert.equal(urlWrapper.props.className, 'map-url');
+	});
+	it('has the correct link', () => {
+    const urlWrapper = mapUrlComponent.props.children[0];
+		assert.equal(urlWrapper.props.href, url);
+	});
+});

tests/state/map/selectors.test.js

@@ -1,4 +1,4 @@
-import {isSaving, success, error, errorMessage} from '../../../src/state/map/selectors';
+import {isSaving, success, error, errorMessage, getMapId, getMapViewUrl} from '../../../src/state/map/selectors';
 
 describe('mapSelectors', () => {
   describe('#isSaving', () => {
@@ -74,4 +74,9 @@ describe('mapSelectors', () => {
       });
     });
   });
+  describe('#getMapViewUrl', () => {
+    it('returns the url', () => {
+      assert.equal(getMapViewUrl({map: {id: 1},server: {url: 'http://geonode.org'}}), 'http://geonode.org/maps/1');
+    });
+  });
 });