geosolutions-it#10034: Include SortyBy parameter in the CSW catalog query (geosolutions-it#10055)

* geosolutions-it#10034: Include SortyBy parameter in the CSW catalog query

* Translation updated

* Code refactor

* Debounced FC

Author: dsuren1

web/client/api/CSW.js

@@ -44,6 +44,13 @@ const defaultDynamicFilter = "<ogc:PropertyIsLike wildCard='%' singleChar='_' es
     "<ogc:Literal>%${searchText}%</ogc:Literal> " +
     "</ogc:PropertyIsLike> ";
 
+export const sortBy = "<ogc:SortBy>" +
+"<ogc:SortProperty>" +
+  "<ogc:PropertyName>${name}</ogc:PropertyName>" +
+  "<ogc:SortOrder>${order}</ogc:SortOrder>" +
+"</ogc:SortProperty>" +
+"</ogc:SortBy>";
+
 export const cswGetRecordsXml = '<csw:GetRecords xmlns:csw="http://www.opengis.net/cat/csw/2.0.2" ' +
     'xmlns:ogc="http://www.opengis.net/ogc" ' +
     'xmlns:gml="http://www.opengis.net/gml" ' +
@@ -60,6 +67,7 @@ export const cswGetRecordsXml = '<csw:GetRecords xmlns:csw="http://www.opengis.n
     '${filterXml} ' +
     '</ogc:Filter> ' +
     '</csw:Constraint> ' +
+    '${sortBy} ' +
     '</csw:Query> ' +
     '</csw:GetRecords>';
 
@@ -74,13 +82,15 @@ export const cswGetRecordsXml = '<csw:GetRecords xmlns:csw="http://www.opengis.n
  * @param {object} filter.dynamicFilter filter when search text is present and is applied in conjunction with static filter
  * @return {string} constructed xml string
  */
-export const constructXMLBody = (startPosition, maxRecords, searchText, { filter } = {}) => {
+export const constructXMLBody = (startPosition, maxRecords, searchText, { options: { service } = {} } = {}) => {
+    const { filter, sortBy: sortObj } = service ?? {};
     const staticFilter = filter?.staticFilter || defaultStaticFilter;
     const dynamicFilter = `<ogc:And>
         ${template(filter?.dynamicFilter || defaultDynamicFilter)({ searchText })}
         ${staticFilter}
     </ogc:And>`;
-    return template(cswGetRecordsXml)({ filterXml: !searchText ? staticFilter : dynamicFilter, startPosition, maxRecords });
+    const sortExp = sortObj?.name ? template(sortBy)({ name: sortObj?.name, order: sortObj?.order ?? "ASC"}) : '';
+    return template(cswGetRecordsXml)({ filterXml: !searchText ? staticFilter : dynamicFilter, startPosition, maxRecords, sortBy: sortExp});
 };
 
 // Extract the relevant information from the wms URL for (RNDT / INSPIRE)

web/client/api/__tests__/CSW-test.js

@@ -402,7 +402,7 @@ describe("constructXMLBody", () => {
             dynamicFilter: "<ogc:PropertyIsLike wildCard='*' singleChar='_' escapeChar='\\'><ogc:PropertyName>csw:AnyText</ogc:PropertyName><ogc:Literal>${searchText}*</ogc:Literal></ogc:PropertyIsLike>"
         };
         // With search text
-        let body = constructXMLBody(1, 5, "text", {filter});
+        let body = constructXMLBody(1, 5, "text", {options: {service: {filter}}});
 
         expect(body.indexOf("text*")).toNotBe(-1); // Dynamic filter
 
@@ -411,6 +411,11 @@ describe("constructXMLBody", () => {
         expect(body.indexOf("dc:type")).toNotBe(-1); // Static filter
         expect(body.indexOf("text*")).toBe(-1); // Dynamic filter
     });
+    it("construct body with sortBy properties", () => {
+        const body = constructXMLBody(1, 5, "text", {options: {service: {sortBy: {name: "dc:title", order: "DESC"}}}});
+        expect(body.indexOf("dc:title")).toNotBe(-1);
+        expect(body.indexOf("DESC")).toNotBe(-1);
+    });
 });
 
 describe("getLayerReferenceFromDc", () => {

web/client/components/catalog/CompactCatalog.jsx

@@ -75,12 +75,9 @@ const PAGE_SIZE = 10;
  */
 const loadPage = ({text, catalog = {}}, page = 0) => {
     const type = catalog.type;
-    const _tempOption = {options: {service: catalog}};
     let options = {};
-    if (type === 'csw') {
-        options = {..._tempOption, filter: catalog.filter};
-    } else if (type === 'tms') {
-        options = _tempOption;
+    if (['csw', 'tms'].includes(type)) {
+        options = {options: {service: catalog}};
     }
     return Rx.Observable
         .fromPromise(API[type].textSearch(catalog.url, page * PAGE_SIZE + (type === "csw" ? 1 : 0), PAGE_SIZE, text, options))

web/client/components/catalog/__tests__/CatalogServiceEditor-test.jsx

@@ -59,7 +59,7 @@ describe('Test CatalogServiceEditor', () => {
         />, document.getElementById("container"));
 
         const formatFormGroups = [...document.querySelectorAll('.form-group-flex')];
-        expect(formatFormGroups.length).toBe(5);
+        expect(formatFormGroups.length).toBe(6);
         const formatSelect = formatFormGroups[2].querySelector('.Select-value-label');
         expect(formatSelect).toExist();
         expect(formatSelect.textContent).toBe('image/png8');

web/client/components/catalog/editor/AdvancedSettings/CSWFilters.jsx

@@ -91,7 +91,8 @@ export default ({
         const _filter = template(cswGetRecordsXml)({
             filterXml: value,
             startPosition: 1,
-            maxRecords: 4
+            maxRecords: 4,
+            sortBy: ''
         });
         return !new DOMParser()
             .parseFromString(_filter, "application/xml")

web/client/components/catalog/editor/AdvancedSettings/RasterAdvancedSettings.js

@@ -6,7 +6,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, {useEffect} from 'react';
-import {FormGroup, ControlLabel, Checkbox, Button as ButtonRB, Glyphicon, InputGroup } from "react-bootstrap";
+import { FormGroup, ControlLabel, Checkbox, Button as ButtonRB, Glyphicon, InputGroup, Tooltip } from "react-bootstrap";
 import RS from 'react-select';
 import {isNil, camelCase} from "lodash";
 
@@ -19,6 +19,8 @@ import CSWFilters from "./CSWFilters";
 import Message from "../../../I18N/Message";
 import WMSDomainAliases from "./WMSDomainAliases";
 import tooltip from '../../../misc/enhancers/buttonTooltip';
+import OverlayTrigger from '../../../misc/OverlayTrigger';
+import FormControl from '../../../misc/DebouncedFormControl';
 
 const Button = tooltip(ButtonRB);
 const Select = localizedProps('noResultsText')(RS);
@@ -48,6 +50,7 @@ const getServerTypeOptions = () => {
  * - Filters (Option allows user to configure the ogcFilter with custom filtering conditions
  *   *staticFilter: filter to fetch all record applied always i.e even when no search text is present
  *   *dynamicFilter: filter when search text is present and is applied in conjunction with static filter
+ * - sortBy: Configure sort by operation using the propert name (with namespace prefixed) and the sort order. By default the sort order is 'ASC'
  *
  * **WMS|CSW**
  * - tileSize: Option allows to select and configure the default tile size of the layer to be requested with
@@ -218,9 +221,40 @@ export default ({
                     onChange={event => onChangeServiceProperty("layerOptions", { ...service.layerOptions, tileSize: event && event.value })} />
             </InputGroup>
         </FormGroup>
+
         {!isNil(service.type) && service.type === "csw" &&
-        <CSWFilters filter={service?.filter} onChangeServiceProperty={onChangeServiceProperty}/>
-        }
+        <>
+            <hr style={{margin: "8px 0"}}/>
+            <FormGroup className="form-group-flex sort-by">
+                <ControlLabel className="strong" style={{ display: 'flex', alignItems: "center" }}>
+                    <Message msgId="catalog.sortBy.label" />
+                    <OverlayTrigger placement={"bottom"} overlay={<Tooltip id={"sortby"}>
+                        <Message msgId={"catalog.sortBy.tooltip"} />
+                    </Tooltip>}>
+                        <Glyphicon
+                            style={{ marginLeft: 4 }}
+                            glyph={"info-sign"}
+                        />
+                    </OverlayTrigger>
+                </ControlLabel>
+                <InputGroup style={{display: "flex"}}>
+                    <FormControl
+                        type="text"
+                        placeholder={"catalog.sortBy.placeholder"}
+                        style={{ textOverflow: "ellipsis", flex: 1.5 }}
+                        value={service?.sortBy?.name}
+                        onChange={value => onChangeServiceProperty("sortBy", {...service?.sortBy, name: value})}
+                    />
+                    <Select
+                        clearable={false}
+                        wrapperStyle={{ flex: 1 }}
+                        value={service?.sortBy?.order ?? "ASC"}
+                        options={["ASC", "DESC"].map(value => ({value, label: value}))}
+                        onChange={event => onChangeServiceProperty("sortBy", {...service?.sortBy, order: event && event.value})} />
+                </InputGroup>
+            </FormGroup>
+            <CSWFilters filter={service?.filter} onChangeServiceProperty={onChangeServiceProperty}/>
+        </>}
         {!isNil(service.type) && service.type === "wms" && (<WMSDomainAliases service={service} onChangeServiceProperty={onChangeServiceProperty} />)}
     </CommonAdvancedSettings>);
 };

web/client/components/catalog/editor/AdvancedSettings/__tests__/RasterAdvancedSettings-test.js

@@ -41,8 +41,10 @@ describe('Test Raster advanced settings', () => {
         expect(advancedSettingPanel).toBeTruthy();
         const fields = document.querySelectorAll(".form-group");
         const cswFilters = document.getElementsByClassName("catalog-csw-filters");
-        expect(fields.length).toBe(11);
+        const sortBy = document.getElementsByClassName("sort-by");
+        expect(fields.length).toBe(12);
         expect(cswFilters).toBeTruthy();
+        expect(sortBy).toBeTruthy();
     });
     it('test component onChangeServiceProperty autoload', () => {
         const action = {
@@ -262,4 +264,45 @@ describe('Test Raster advanced settings', () => {
         expect(spyOn).toHaveBeenCalled();
         expect(spyOn.calls[0].arguments).toEqual([ 'infoFormat', 'application/json' ]);
     });
+    it('test component onChangeServiceProperty sortBy change property name', (done) => {
+        TestUtils.act(() => {
+            ReactDOM.render(<RasterAdvancedSettings
+                onChangeServiceProperty={(field, value) => {
+                    try {
+                        expect(field).toBe('sortBy');
+                        expect(value).toEqual({ name: "dc:value", order: 'DESC' });
+                    } catch (e) {
+                        done(e);
+                    }
+                    done();
+                }}
+                service={{type: "csw", sortBy: {name: "dc:title", order: "DESC"}}}/>, document.getElementById("container"));
+        });
+
+        const advancedSettingsPanel = document.getElementsByClassName("mapstore-switch-panel");
+        expect(advancedSettingsPanel).toBeTruthy();
+        const sortOrder = document.querySelectorAll('input[role="combobox"]')[4];
+        const sortName = document.querySelectorAll('input[type="text"]')[0];
+        expect(sortOrder).toBeTruthy();
+        TestUtils.Simulate.focus(sortName);
+        TestUtils.Simulate.change(sortName, { target: { value: "dc:value" }});
+    });
+    it('test component onChangeServiceProperty sortBy, change sort order', () => {
+        const action = {
+            onChangeServiceProperty: () => {}
+        };
+        const spyOn = expect.spyOn(action, 'onChangeServiceProperty');
+        ReactDOM.render(<RasterAdvancedSettings
+            onChangeServiceProperty={action.onChangeServiceProperty}
+            service={{type: "csw", sortBy: {name: "dc:title", order: "DESC"}}}/>, document.getElementById("container"));
+
+        const advancedSettingsPanel = document.getElementsByClassName("mapstore-switch-panel");
+        expect(advancedSettingsPanel).toBeTruthy();
+        const sortOrder = document.querySelectorAll('input[role="combobox"]')[4];
+        expect(sortOrder).toBeTruthy();
+        TestUtils.Simulate.change(sortOrder, { target: { value: "ASC" }});
+        TestUtils.Simulate.keyDown(sortOrder, { keyCode: 9, key: 'Tab' });
+        expect(spyOn).toHaveBeenCalled();
+        expect(spyOn.calls[0].arguments).toEqual([ 'sortBy', { name: "dc:title", order: 'ASC' } ]);
+    });
 });

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

@@ -165,7 +165,6 @@ describe('catalog Epics', () => {
             expect(actions.length).toBe(NUM_ACTIONS);
             expect(actions[0].type).toBe(TEXT_SEARCH);
             expect(actions[0].options).toEqual({
-                filter: "test",
                 service: {
                     type: "csw",
                     url: "url",

web/client/epics/catalog.js

@@ -101,10 +101,9 @@ export default (API) => ({
     recordSearchEpic: (action$, store) =>
         action$.ofType(TEXT_SEARCH)
             .switchMap(({ format, url, startPosition, maxRecords, text, options }) => {
-                const filter = get(options, 'service.filter') || get(options, 'filter');
                 const isNewService = get(options, 'isNewService', false);
                 return Rx.Observable.defer(() =>
-                    API[format].textSearch(url, startPosition, maxRecords, text, { options, filter, ...catalogSearchInfoSelector(store.getState()) })
+                    API[format].textSearch(url, startPosition, maxRecords, text, { options, ...catalogSearchInfoSelector(store.getState()) })
                 )
                     .switchMap((result) => {
                         if (result.error) {
@@ -539,8 +538,8 @@ export default (API) => ({
                 const state = getState();
                 const pageSize = pageSizeSelector(state);
                 const service = selectedCatalogSelector(state);
-                const { type, url, filter } = service;
-                return Rx.Observable.of(textSearch({ format: type, url, startPosition: 1, maxRecords: pageSize, text, options: { service, filter }}));
+                const { type, url } = service;
+                return Rx.Observable.of(textSearch({ format: type, url, startPosition: 1, maxRecords: pageSize, text, options: { service }}));
             }),
 
     catalogCloseEpic: (action$, store) =>

web/client/translations/data.de-DE.json

@@ -1687,6 +1687,11 @@
           "allowUnsecureLayers": {
               "label": "Nicht sichere Ebenen zulassen",
               "tooltip": "Das Hinzufügen einer Ebene zur Karte mit aktivierter Option zwingt die Anwendung, Proxy anzuwenden"
+          },
+          "sortBy": {
+            "label": "Sortiere nach",
+            "tooltip": "Namespace-Präfix zur Namenseigenschaft hinzufügen. d.h. ${namespace}:${name}",
+            "placeholder": "Name eingeben"
           }
         },
         "uploader": {

web/client/translations/data.en-US.json

@@ -1648,6 +1648,11 @@
             "helpTooltip": "This option is used to split content across multiple subdomains",
             "addAliasTooltip": "Add alias",
             "removeAliasTooltip": "Remove alias"
+          },
+          "sortBy": {
+            "label": "Sort By",
+            "tooltip": "Add namespace prefix to name property. i.e. ${namespace}:${name}",
+            "placeholder": "Enter a name"
           }
         },
         "uploader": {

web/client/translations/data.es-ES.json

@@ -1649,7 +1649,12 @@
             "allowUnsecureLayers": {
               "label": "Permitir capas no seguras",
               "tooltip": "Agregar una capa al mapa con esta opción habilitada obliga a la aplicación a aplicar proxy"
-            }
+            },
+            "sortBy": {
+                "label": "Ordenar por",
+                "tooltip": "Agregue el prefijo del espacio de nombres a la propiedad del nombre. es decir, ${namespace}:${name}",
+                "placeholder": "Ingresar nombre"
+              }
         },
         "uploader": {
             "filename": "Nombre del fichero",

web/client/translations/data.fr-FR.json

@@ -1649,7 +1649,12 @@
             "allowUnsecureLayers": {
               "label": "Autoriser les couches non sécurisées",
               "tooltip": "L'ajout d'une couche à la carte avec cette option activée force l'application à appliquer un proxy"
-            }
+            },
+            "sortBy": {
+                "label": "Trier par",
+                "tooltip": "Ajoutez un préfixe d’espace de noms à la propriété name. c'est-à-dire ${namespace}:${name}",
+                "placeholder": "Entrer un nom"
+              }
         },
         "uploader": {
             "filename": "Nom du fichier",

web/client/translations/data.it-IT.json

@@ -1648,7 +1648,12 @@
             "allowUnsecureLayers": {
               "label": "Consenti livelli non sicuri",
               "tooltip": "L'aggiunta di un livello da mappare con questa opzione abilitata, costringe l'applicazione ad applicare il proxy"
-            }
+            },
+            "sortBy": {
+                "label": "Ordina per",
+                "tooltip": "Aggiungi il prefisso dello spazio dei nomi alla proprietà del nome. cioè ${namespace}:${name}",
+                "placeholder": "Inserisci un nome"
+              }
         },
         "uploader": {
             "filename": "File Name",