Fix #2798 search clickable

docma-config.json

@@ -199,6 +199,7 @@
                 "web/client/plugins/GlobeViewSwitcher.jsx",
                 "web/client/plugins/GoFull.jsx",
                 "web/client/plugins/Map.jsx",
+                "web/client/plugins/MapSearch.jsx",
                 "web/client/plugins/Measure.jsx",
                 "web/client/plugins/MeasurePanel.jsx",
                 "web/client/plugins/MeasureResults.jsx",

web/client/components/mapcontrols/search/SearchBar.jsx

@@ -1,20 +1,20 @@
-const PropTypes = require('prop-types');
 /*
  * Copyright 2015, 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.
- */
+*/
 
-var React = require('react');
-var {FormControl, FormGroup, Glyphicon, Tooltip} = require('react-bootstrap');
+const PropTypes = require('prop-types');
+const React = require('react');
+const {FormControl, FormGroup, Glyphicon, Tooltip} = require('react-bootstrap');
 const OverlayTrigger = require('../../misc/OverlayTrigger');
-var LocaleUtils = require('../../../utils/LocaleUtils');
-var Spinner = require('react-spinkit');
+const LocaleUtils = require('../../../utils/LocaleUtils');
+const Spinner = require('react-spinkit');
 
 
-var delay = (
+const delay = (
     function() {
         var timer = 0;
         return function(callback, ms) {
@@ -43,6 +43,7 @@ require('./searchbar.css');
  * @prop {searchText} the text to display in the component
  * @prop {object[]} selectedItems the items selected. Must have `text` property to display
  * @prop {boolean} autoFocusOnSelect if true, the component gets focus when items are added, or deleted but some item is still selected. Useful for continue writing after selecting an item (with nested services for instance)
+ * @prop {boolean} splitTools if false, the search and reset can appear both at the same time, otherwise the search appear only with empty text, the reset if a text is entered
  * @prop {boolean} loading if true, shows the loading tool
  * @prop {object} error if not null, an error icon will be display
  * @prop {object} style css style to apply to the component
@@ -66,6 +67,7 @@ class SearchBar extends React.Component {
         searchText: PropTypes.string,
         selectedItems: PropTypes.array,
         autoFocusOnSelect: PropTypes.bool,
+        splitTools: PropTypes.bool,
         loading: PropTypes.bool,
         error: PropTypes.object,
         style: PropTypes.object,
@@ -87,6 +89,7 @@ class SearchBar extends React.Component {
         delay: 1000,
         blurResetDelay: 300,
         autoFocusOnSelect: true,
+        splitTools: true,
         hideOnBlur: true,
         typeAhead: true,
         searchText: ""
@@ -145,14 +148,15 @@ class SearchBar extends React.Component {
     };
 
     renderAddonAfter = () => {
-        const remove = <Glyphicon className="searchclear" glyph="remove" onClick={this.clearSearch} key="searchbar_remove_glyphicon"/>;
-        var showRemove = this.props.searchText !== "" || this.props.selectedItems && this.props.selectedItems.length > 0;
-        let addonAfter = showRemove ? [remove] : [<Glyphicon glyph="search" key="searchbar_search_glyphicon"/>];
+        const remove = <Glyphicon className="searchclear" glyph="1-close" onClick={this.clearSearch} key="searchbar_remove_glyphicon"/>;
+        const search = <Glyphicon className="magnifying-glass" glyph="search" key="searchbar_search_glyphicon" onClick={this.search}/>;
+        const showRemove = this.props.searchText !== "" || this.props.selectedItems && this.props.selectedItems.length > 0;
+        let addonAfter = showRemove ? (this.props.splitTools ? [remove] : [remove, search]) : [search];
         if (this.props.loading) {
             addonAfter = [<Spinner style={{
                 position: "absolute",
-                right: "16px",
-                top: "12px"
+                right: "19px",
+                top: "7px"
             }} spinnerName="pulse" noFadeIn/>, addonAfter];
         }
         if (this.props.error) {

web/client/components/mapcontrols/search/__tests__/SearchBar-test.jsx

@@ -197,4 +197,39 @@ describe("test the SearchBar", () => {
             done();
         }, 10);
     });
+
+    it('test search and reset buttons both present, splitTools=false', () => {
+        const tb = ReactDOM.render(<SearchBar splitTools={false} searchText={"some val"} delay={0} typeAhead={false} />, document.getElementById("container"));
+        let reset = TestUtils.findRenderedDOMComponentWithClass(tb, "searchclear");
+        let search = TestUtils.findRenderedDOMComponentWithClass(tb, "magnifying-glass");
+        expect(reset).toExist();
+        expect(search).toExist();
+    });
+    it('test only search present, splitTools=false', () => {
+        const tb = ReactDOM.render(<SearchBar splitTools={false} searchText={""} delay={0} typeAhead={false} />, document.getElementById("container"));
+        let reset = TestUtils.scryRenderedDOMComponentsWithClass(tb, "searchclear");
+        expect(reset.length).toBe(0);
+
+        let search = TestUtils.findRenderedDOMComponentWithClass(tb, "magnifying-glass");
+        expect(search).toExist();
+    });
+
+
+    it('test only search present, splitTools=true', () => {
+        const tb = ReactDOM.render(<SearchBar splitTools searchText={""} delay={0} typeAhead={false} />, document.getElementById("container"));
+        let reset = TestUtils.scryRenderedDOMComponentsWithClass(tb, "searchclear");
+        expect(reset.length).toBe(0);
+
+        let search = TestUtils.findRenderedDOMComponentWithClass(tb, "magnifying-glass");
+        expect(search).toExist();
+    });
+
+    it('test only reset present, splitTools=true', () => {
+        const tb = ReactDOM.render(<SearchBar splitTools searchText={"va"} delay={0} typeAhead={false} />, document.getElementById("container"));
+        let reset = TestUtils.findRenderedDOMComponentWithClass(tb, "searchclear");
+        expect(reset).toExist();
+
+        let search = TestUtils.scryRenderedDOMComponentsWithClass(tb, "magnifying-glass");
+        expect(search.length).toBe(0);
+    });
 });

web/client/plugins/MapSearch.jsx

@@ -1,16 +1,27 @@
-/**
+/*
  * Copyright 2016, 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.
- */
+*/
 const {connect} = require('react-redux');
-
-
 const {loadMaps, mapsSearchTextChanged} = require('../actions/maps');
 const ConfigUtils = require('../utils/ConfigUtils');
-
+/**
+* MapSearch Plugin is a plugin that allows to make a search, reset its content, show a loading spinner while search is going on and can be
+* used for different purpose (maps, wfs services)
+* @name MapSearch
+* @memberof plugins
+* @class
+* @example
+* {
+*   "name": "MapSearch",
+*   "cfg": {
+*     "splitTools": true
+*   }
+* }
+*/
 const SearchBar = connect((state) => ({
     className: "maps-search",
     hideOnBlur: false,
@@ -26,10 +37,11 @@ const SearchBar = connect((state) => ({
         return loadMaps(ConfigUtils.getDefaults().geoStoreUrl, searchText, options);
     },
     onSearchReset: loadMaps.bind(null, ConfigUtils.getDefaults().geoStoreUrl, ConfigUtils.getDefaults().initialMapFilter || "*")
-}, (stateProps, dispatchProps) => {
+}, (stateProps, dispatchProps, ownProps) => {
 
     return {
         ...stateProps,
+        ...ownProps,
         onSearch: (text) => {
             let limit = stateProps.limit;
             dispatchProps.onSearch(text, {start: 0, limit});

web/client/themes/default/less/map-search-bar.less

@@ -17,10 +17,16 @@ div.MapSearchBar .input-group-addon {
 	font-size: @icon-size;
 }
 
+.MapSearchBar .input-group-addon .magnifying-glass:hover,
+.MapSearchBar .input-group-addon .searchclear:hover {
+    opacity: 0.75
+}
+
+.MapSearchBar .input-group-addon .magnifying-glass,
 .MapSearchBar .input-group-addon .searchclear,
 .MapSearchBar .input-group-addon .searcherror {
-	font-size: @icon-size-md;
     margin-right: 4px;
+    cursor: pointer
 }
 
 .MapSearchBar .input-group-addon .searcherror {