#12479 Prevent reload of current layer catalog page when switching layout (#12507)

#Fix #12479 Prevent reload of current layer catalog page when switching layout

Author: Binabh

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

@@ -64,30 +64,226 @@ describe('Test Catalog panel', () => {
             }}
         />, document.getElementById("container"));
     });
-    it('resets new service status before autoload search', (done) => {
+    it('clears new service status without duplicate autoload search', (done) => {
         const SERVICE = {
             type: "csw",
             url: "http://sample.service/catalog",
             title: "csw",
             autoload: true
         };
         const actions = {
-            setNewServiceStatus: () => {}
+            setNewServiceStatus: () => {},
+            onSearch: () => {}
         };
         const spyOnStatus = expect.spyOn(actions, 'setNewServiceStatus');
-        actions.onSearch = () => {
+        const spyOnSearch = expect.spyOn(actions, 'onSearch');
+        ReactDOM.render(<Catalog
+            services={{ "csw": SERVICE}}
+            selectedService="csw"
+            selectedFormat="csw"
+            onSearch={actions.onSearch}
+            isNewServiceAdded
+            setNewServiceStatus={actions.setNewServiceStatus}
+        />, document.getElementById("container"));
+
+        setTimeout(() => {
+            expect(spyOnSearch.calls.length).toBe(0);
             expect(spyOnStatus).toHaveBeenCalled();
             expect(spyOnStatus.calls[0].arguments[0]).toBe(false);
             done();
+        }, 0);
+    });
+    it('does not autoload again when the current service already has results', (done) => {
+        const SERVICE = {
+            type: "csw",
+            url: "http://sample.service/catalog",
+            title: "csw",
+            autoload: true
         };
+        const actions = {
+            onSearch: () => {},
+            clearSelection: () => {}
+        };
+        const spyOnSearch = expect.spyOn(actions, 'onSearch');
+        const spyOnClearSelection = expect.spyOn(actions, 'clearSelection');
         ReactDOM.render(<Catalog
             services={{ "csw": SERVICE}}
             selectedService="csw"
             selectedFormat="csw"
+            result={{ numberOfRecordsMatched: 24 }}
+            searchOptions={{ url: 'http://sample.service/catalog', startPosition: 13 }}
+            records={[{ identifier: 'csw-1', title: 'Catalog Layer', references: [] }]}
+            selected={[]}
+            layers={[]}
+            loadingLayers={[]}
+            onSelect={() => {}}
+            onAddSelected={() => {}}
+            onAddLayer={() => {}}
+            onSearch={actions.onSearch}
+            clearSelection={actions.clearSelection}
+        />, document.getElementById("container"));
+
+        setTimeout(() => {
+            const activePage = document.querySelector('.pagination .active a, .pagination .active span');
+            expect(spyOnSearch.calls.length).toBe(0);
+            expect(spyOnClearSelection.calls.length).toBe(0);
+            expect(activePage.textContent).toBe('2');
+            done();
+        }, 0);
+    });
+    it('does not clear selected records on initial render', (done) => {
+        const SERVICE = {
+            type: "csw",
+            url: "http://sample.service/catalog",
+            title: "csw"
+        };
+        const actions = {
+            clearSelection: () => {}
+        };
+        const spyOnClearSelection = expect.spyOn(actions, 'clearSelection');
+        ReactDOM.render(<Catalog
+            services={{ "csw": SERVICE}}
+            selectedService="csw"
+            selectedFormat="csw"
+            records={[{ identifier: 'csw-1', title: 'Catalog Layer', references: [] }]}
+            selected={[{ identifier: 'csw-1', title: 'Catalog Layer', references: [] }]}
+            layers={[]}
+            loadingLayers={[]}
+            onSelect={() => {}}
+            onAddSelected={() => {}}
+            onAddLayer={() => {}}
+            clearSelection={actions.clearSelection}
+        />, document.getElementById("container"));
+
+        setTimeout(() => {
+            expect(spyOnClearSelection.calls.length).toBe(0);
+            done();
+        }, 0);
+    });
+    it('uses filters and sort from current search options after remount', (done) => {
+        const SERVICE = {
+            type: "geonode",
+            url: "http://sample.service/geonode",
+            title: "GeoNode"
+        };
+        const filters = {'filter{category.identifier.in}': ['environment']};
+        const actions = {
+            onSearch: () => {}
+        };
+        const spyOnSearch = expect.spyOn(actions, 'onSearch');
+        ReactDOM.render(<Catalog
+            services={{ "geonode": SERVICE}}
+            selectedService="geonode"
+            selectedFormat="geonode"
+            result={{ numberOfRecordsMatched: 24 }}
+            searchOptions={{
+                url: 'http://sample.service/geonode',
+                startPosition: 1,
+                filters,
+                sort: 'title'
+            }}
+            records={[{ identifier: 'geo-1', title: 'Geo Layer', references: [], isValid: true }]}
+            selected={[]}
+            layers={[]}
+            loadingLayers={[]}
+            onSelect={() => {}}
+            onAddSelected={() => {}}
+            onAddLayer={() => {}}
+            onSearch={actions.onSearch}
+        />, document.getElementById("container"));
+
+        setTimeout(() => {
+            const page2 = [...document.querySelectorAll('.pagination a')]
+                .find((node) => node.textContent === '2');
+            TestUtils.Simulate.click(page2);
+            expect(spyOnSearch.calls.length).toBe(1);
+            expect(spyOnSearch.calls[0].arguments[0]).toEqual({
+                format: 'geonode',
+                url: 'http://sample.service/geonode',
+                startPosition: 13,
+                maxRecords: 12,
+                text: '',
+                options: {
+                    filters,
+                    sort: 'title',
+                    service: SERVICE
+                }
+            });
+            done();
+        }, 0);
+    });
+    it('does not autoload again while catalog is loading', (done) => {
+        const SERVICE = {
+            type: "csw",
+            url: "http://sample.service/catalog",
+            title: "csw",
+            autoload: true
+        };
+        const actions = {
+            onSearch: () => {}
+        };
+        const spyOnSearch = expect.spyOn(actions, 'onSearch');
+        ReactDOM.render(<Catalog
+            services={{ "csw": SERVICE}}
+            selectedService="csw"
+            selectedFormat="csw"
+            loading
+            onSearch={actions.onSearch}
+        />, document.getElementById("container"));
+
+        setTimeout(() => {
+            expect(spyOnSearch.calls.length).toBe(0);
+            done();
+        }, 0);
+    });
+    it('does not autoload again when current catalog has a loading error', (done) => {
+        const SERVICE = {
+            type: "csw",
+            url: "http://sample.service/catalog",
+            title: "csw",
+            autoload: true
+        };
+        const actions = {
+            onSearch: () => {}
+        };
+        const spyOnSearch = expect.spyOn(actions, 'onSearch');
+        ReactDOM.render(<Catalog
+            services={{ "csw": SERVICE}}
+            selectedService="csw"
+            selectedFormat="csw"
+            loadingError="error"
+            onSearch={actions.onSearch}
+        />, document.getElementById("container"));
+
+        setTimeout(() => {
+            expect(spyOnSearch.calls.length).toBe(0);
+            done();
+        }, 0);
+    });
+    it('does not autoload in edit mode', (done) => {
+        const SERVICE = {
+            type: "csw",
+            url: "http://sample.service/catalog",
+            title: "csw",
+            autoload: true
+        };
+        const actions = {
+            onSearch: () => {}
+        };
+        const spyOnSearch = expect.spyOn(actions, 'onSearch');
+        ReactDOM.render(<Catalog
+            services={{ "csw": SERVICE}}
+            selectedService="csw"
+            selectedFormat="csw"
+            mode="edit"
             onSearch={actions.onSearch}
-            isNewServiceAdded
-            setNewServiceStatus={actions.setNewServiceStatus}
         />, document.getElementById("container"));
+
+        setTimeout(() => {
+            expect(spyOnSearch.calls.length).toBe(0);
+            expect(document.querySelector('.ms-catalog-service-editor')).toBeTruthy();
+            done();
+        }, 0);
     });
     it('renders editor in edit mode', () => {
         const SERVICE = {

web/client/components/catalog/datasets/Catalog.jsx

@@ -5,7 +5,7 @@
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React, { useState, useEffect, useMemo } from 'react';
+import React, { useState, useEffect, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 import castArray from 'lodash/castArray';
 import { buildServiceUrl } from '../../../utils/CatalogUtils';
@@ -35,6 +35,32 @@ const shouldAutoload = (service, services) => {
         services[service].autoload;
 };
 
+const getCurrentSearchOptions = ({
+    searchOptions,
+    selectedService,
+    services
+}) => {
+    const service = selectedService && services?.[selectedService];
+    return service && searchOptions?.url === buildServiceUrl(service)
+        ? searchOptions
+        : {};
+};
+
+const shouldPreserveCurrentRequest = ({
+    loading,
+    isNewServiceAdded,
+    loadingError,
+    result,
+    searchOptions,
+    selectedService,
+    services
+}) => {
+    if (loading || isNewServiceAdded || (loadingError !== undefined && loadingError !== null)) {
+        return true;
+    }
+    return !!(result && getCurrentSearchOptions({ searchOptions, selectedService, services })?.url);
+};
+
 const Catalog = ({
     serviceTypes = [
         { name: "csw", label: "CSW" },
@@ -121,10 +147,12 @@ const Catalog = ({
     API = defaultAPI
 }, context) => {
     const { messages } = context;
+    const currentSearchOptions = getCurrentSearchOptions({ searchOptions, selectedService, services });
     const [showFilters, setShowFilters] = useState(false);
-    const [filters, setFilters] = useState({});
-    const [sort, setSort] = useState('-date');
+    const [filters, setFilters] = useState(currentSearchOptions.filters || {});
+    const [sort, setSort] = useState(currentSearchOptions.sort || '-date');
     const [selectedServiceInitialized, setSelectedServiceInitialized] = useState(false);
+    const servicesEffectInitialized = useRef(false);
     const serviceCapabilities = API[selectedFormat]?.getCapabilities?.() || {
         filterSupport: false,
         orderBySupport: false
@@ -149,8 +177,23 @@ const Catalog = ({
     };
 
     useEffect(() => {
-        clearSelection?.();
-        if (shouldAutoload(selectedService, services)) {
+        const preserveCurrentRequest = shouldPreserveCurrentRequest({
+            loading,
+            isNewServiceAdded,
+            loadingError,
+            result,
+            searchOptions,
+            selectedService,
+            services
+        });
+        if (!preserveCurrentRequest && servicesEffectInitialized.current) {
+            clearSelection?.();
+        }
+        servicesEffectInitialized.current = true;
+        if (isNewServiceAdded) {
+            setNewServiceStatus(false);
+        }
+        if (!preserveCurrentRequest && mode === 'view' && shouldAutoload(selectedService, services)) {
             search({ searchText, filters, sort });
         }
         setShowFilters(false);

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

@@ -406,6 +406,42 @@ describe('catalog Epics', () => {
             newService: service
         } });
     });
+    it('newCatalogServiceAdded preserves current search options when editing a service', (done) => {
+        const NUM_ACTIONS = 2;
+        const filters = {'filter{category.identifier.in}': ['environment']};
+        const service = {
+            type: "csw",
+            url: "base/web/client/test-resources/csw/getRecordsResponseDC.xml",
+            oldService: "cswCatalog"
+        };
+        testEpic(addTimeoutEpic(newCatalogServiceAdded), NUM_ACTIONS, addService(), (actions) => {
+            expect(actions.length).toBe(NUM_ACTIONS);
+            actions.map((action) => {
+                switch (action.type) {
+                case TEXT_SEARCH:
+                    expect(action.format).toBe(service.type);
+                    expect(action.url).toBe(service.url);
+                    expect(action.startPosition).toBe(1);
+                    expect(action.maxRecords).toBe(12);
+                    expect(action.text).toBe("roads");
+                    expect(action.options).toEqual({service, isNewService: true, filters, sort: "-date"});
+                    break;
+                case TEST_TIMEOUT:
+                    break;
+                default:
+                    expect(true).toBe(false);
+                }
+            });
+            done();
+        }, { catalog: {
+            newService: service,
+            searchOptions: {
+                text: "roads",
+                filters,
+                sort: "-date"
+            }
+        } });
+    });
     it('recordSearchEpic with network error', (done) => {
         const NUM_ACTIONS = 2;
         testEpic(addTimeoutEpic(recordSearchEpic), NUM_ACTIONS, textSearch({

web/client/epics/catalog.js

@@ -431,11 +431,19 @@ export default (API) => ({
                 const state = store.getState();
                 const newService = newServiceSelector(state);
                 const maxRecords = pageSizeSelector(state);
+                const currentSearchOptions = searchOptionsSelector(state) || {};
                 return Rx.Observable.of(newService)
                     // validate
                     .switchMap((service) => API[service.type]?.preprocess?.(service) ?? ( Rx.Observable.of(service)))
                     .switchMap((service) => API[service.type]?.validate?.(service) ?? ( Rx.Observable.of(service)))
                     .switchMap((service) => {
+                        const preserveCurrentRequest = !!service.oldService;
+                        const preservedSearchOptions = preserveCurrentRequest
+                            ? {
+                                ...(currentSearchOptions.filters !== undefined && { filters: currentSearchOptions.filters }),
+                                ...(currentSearchOptions.sort !== undefined && { sort: currentSearchOptions.sort })
+                            }
+                            : {};
                         // Dispatch action to test service and add records to catalog after successful saving of the service,
                         // this prevents duplicate calls being fired for all the services
                         return Rx.Observable.of(
@@ -444,8 +452,8 @@ export default (API) => ({
                                 url: service.url,
                                 startPosition: 1,
                                 maxRecords,
-                                text: "",
-                                options: {service, isNewService: true, ...options}
+                                text: preserveCurrentRequest ? currentSearchOptions.text || "" : "",
+                                options: {service, isNewService: true, ...preservedSearchOptions, ...options}
                             })
                         );
                     })