Issue #9311 - populate search bar on select

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

@@ -73,11 +73,12 @@ describe('Test correctness of the search actions', () => {
  expect(retval2.append).toBe(true);
  });
  it('search item selected', () => {
- const retval = selectSearchItem("A", "B", {color: '#ff0000'});
+ const retval = selectSearchItem("A", "B", "C", {color: '#ff0000'});
  expect(retval).toExist();
  expect(retval.type).toBe(TEXT_SEARCH_ITEM_SELECTED);
  expect(retval.item).toEqual("A");
  expect(retval.mapConfig).toBe("B");
+ expect(retval.service).toBe("C");
  expect(retval.resultsStyle).toEqual({color: '#ff0000'});
  });
  it('search item cancelled', () => {

web/client/actions/search.js

@@ -214,13 +214,15 @@ export function textSearch(searchText, {services = null} = {}, maxResults = 15)
  * @memberof actions.search
  * @param {object} item the selected item
  * @param {object} mapConfig the current map configuration (with size, projection...)
+ * @param {object} service the selected item results generating service (nominatim, wfs, etc.)
  * @param {object} resultsStyle style to apply to results geometries
  */
-export function selectSearchItem(item, mapConfig, resultsStyle) {
+export function selectSearchItem(item, mapConfig, service, resultsStyle) {
  return {
  type: TEXT_SEARCH_ITEM_SELECTED,
  item,
  mapConfig,
+ service,
  resultsStyle
  };
 

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

@@ -47,8 +47,8 @@ export default class SearchResultList extends React.Component {
  showGFI: () => {}
  };
 
- onItemClick = (item) => {
- this.props.onItemClick(item, this.props.mapConfig);
+ onItemClick = (item, service) => {
+ this.props.onItemClick(item, this.props.mapConfig, service);
  };
 
  renderResults = () => {
@@ -63,7 +63,7 @@ export default class SearchResultList extends React.Component {
  displayName={service.displayName}
  key={item.osm_id || item.id || "res_" + idx}
  item={item}
- onItemClick={this.onItemClick}
+ onItemClick={() => this.onItemClick(item, service)}
  tools={[{
  id: 'open-gfi',
  keyProp: 'open-gfi',

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

@@ -132,7 +132,10 @@ describe("test the SearchResultList", () => {
  var items = [{
  osm_id: 1,
  display_name: "Name",
- boundingbox: [1, 2, 3, 4]
+ boundingbox: [1, 2, 3, 4],
+ __SERVICE__: {
+ type: 'nominatim'
+ }
  }];
  const spy = expect.spyOn(testHandlers, 'clickHandler');
  const mapConfig = {size: 100, projection: "EPSG:4326"};
@@ -145,7 +148,7 @@ describe("test the SearchResultList", () => {
  let elem1 = TestUtils.findRenderedDOMComponentWithClass(elem[0], "search-result");
  ReactDOM.findDOMNode(elem1).click();
  expect(spy.calls.length).toEqual(1);
- expect(spy).toHaveBeenCalledWith(items[0], mapConfig);
+ expect(spy).toHaveBeenCalledWith(items[0], mapConfig, items[0].__SERVICE__);
  });
 
  it('test showGFI button is enabled when openFeatureInfoButton=true', () => {

web/client/reducers/__tests__/search-test.js

@@ -18,6 +18,7 @@ import {
  TEXT_SEARCH_CANCEL_ITEM,
  UPDATE_RESULTS_STYLE,
  resetSearch,
+ selectSearchItem,
  changeFormat,
  changeCoord,
  changeActiveSearchTool,
@@ -178,6 +179,40 @@ describe('Test the search reducer', () => {
  state = search({}, resetSearch());
  expect(state).toEqual({style: {}});
  });
+ it('TEXT_SEARCH_ITEM_SELECTED - wfs service', () => {
+ let service = {
+ type: 'wfs',
+ displayName: '${properties.DISPLAY_NAME}'
+ };
+ let item = {
+ properties: {
+ DISPLAY_NAME: 'Display Name'
+ }
+ };
+ const state = search({}, selectSearchItem(item, {}, service, {}));
+ expect(state.searchText).toBe('Display Name');
+ });
+ it('TEXT_SEARCH_ITEM_SELECTED - Nominatim service', () => {
+ let service = {
+ type: 'nominatim'
+ };
+ let item = {
+ properties: {
+ display_name: 'Display Name'
+ }
+ };
+ const state = search({}, selectSearchItem(item, {}, service, {}));
+ expect(state.searchText).toBe('Display Name');
+ });
+ it('TEXT_SEARCH_ITEM_SELECTED - undefined service', () => {
+ let item = {
+ properties: {
+ display_name: 'Display Name'
+ }
+ };
+ const state = search({ searchText: 'Displ' }, selectSearchItem(item, {}, undefined, {}));
+ expect(state.searchText).toBe('Displ');
+ });
  it('RESET_CONTROLS', () => {
 
  const state = search({style: {

web/client/reducers/search.js

@@ -7,6 +7,7 @@
  */
 
 import {
+ TEXT_SEARCH_ITEM_SELECTED,
  TEXT_SEARCH_RESULTS_LOADED,
  TEXT_SEARCH_RESULTS_PURGE,
  TEXT_SEARCH_RESET,
@@ -25,6 +26,7 @@ import {
 } from '../actions/search';
 
 import { RESET_CONTROLS } from '../actions/controls';
+import { generateTemplateString } from '../utils/TemplateUtils';
 import assign from 'object-assign';
 /**
  * Manages the state of the map search with it's results
@@ -88,6 +90,12 @@ import assign from 'object-assign';
  */
 function search(state = null, action) {
  switch (action.type) {
+ case TEXT_SEARCH_ITEM_SELECTED: {
+ const { type: serviceType } = action.service || {};
+ const displayName = serviceType === 'nominatim' ? action.item.properties?.display_name : serviceType === 'wfs' ?
+ generateTemplateString(action.service?.displayName || '')(action.item) : state.searchText;
+ return {...state, searchText: displayName || state.searchText || '' };
+ }
  case TEXT_SEARCH_LOADING: {
  return assign({}, state, {loading: action.loading});
  }