geosolutions-it#11973: fix issue of MetadataExplorer plugin config - hideThumbnails value setting has no effect (geosolutions-it#11975)

* geosolutions-it#11973: fix issue of MetadataExplorer plugin config - hideThumbnails value setting has no effect
- fix issue of not reflect cfg value for hideThumbnail in MetadataExplorer plugin
- handle use priority for hideThumbnail of service if configred/set then global cfg hideThumbnail from plugin
- add unit tests

* - rename TOGGLE_THUMBNAIL to SET_THUMBNAIL_FLAG  for clarity and consistency in catalog action/reducer
- edit unit tests due to above change

* - Enhance JSDoc for cfg.hideThumbnail prop: clarify global vs service configuration behavior.

Author: mahmoudadel54

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

@@ -57,7 +57,7 @@ import {
     CHANGE_TEXT,
     TOGGLE_ADVANCED_SETTINGS,
     toggleAdvancedSettings,
-    TOGGLE_THUMBNAIL,
+    SET_THUMBNAIL_FLAG,
     toggleThumbnail,
     TOGGLE_TEMPLATE,
     toggleTemplate,
@@ -353,9 +353,15 @@ describe('Test correctness of the catalog actions', () => {
         const action = toggleTemplate();
         expect(action.type).toBe(TOGGLE_TEMPLATE);
     });
-    it('test toggleThumbnail action', () => {
-        const action = toggleThumbnail();
-        expect(action.type).toBe(TOGGLE_THUMBNAIL);
+    it('test toggleThumbnail action if toggleValue = true', () => {
+        const action = toggleThumbnail(true);
+        expect(action.type).toBe(SET_THUMBNAIL_FLAG);
+        expect(action.toggleValue).toEqual(true);
+    });
+    it('test toggleThumbnail action if toggleValue = false', () => {
+        const action = toggleThumbnail(false);
+        expect(action.type).toBe(SET_THUMBNAIL_FLAG);
+        expect(action.toggleValue).toEqual(false);
     });
     it('test changeMetadataTemplate action', () => {
         const action = changeMetadataTemplate("${title}");

web/client/actions/catalog.js

@@ -48,7 +48,7 @@ export const GET_METADATA_RECORD_BY_ID = 'CATALOG:GET_METADATA_RECORD_BY_ID';
 export const SET_LOADING = 'CATALOG:SET_LOADING';
 export const SHOW_FORMAT_ERROR = 'CATALOG:SHOW_FORMAT_ERROR';
 export const TOGGLE_TEMPLATE = 'CATALOG:TOGGLE_TEMPLATE';
-export const TOGGLE_THUMBNAIL = 'CATALOG:TOGGLE_THUMBNAIL';
+export const SET_THUMBNAIL_FLAG = 'CATALOG:SET_THUMBNAIL_FLAG';
 export const TOGGLE_ADVANCED_SETTINGS = 'CATALOG:TOGGLE_ADVANCED_SETTINGS';
 export const FORMAT_OPTIONS_FETCH = 'CATALOG:FORMAT_OPTIONS_FETCH';
 export const FORMAT_OPTIONS_LOADING = 'CATALOG:FORMAT_OPTIONS_LOADING';
@@ -294,7 +294,7 @@ export function getMetadataRecordById(metadataOptions) {
 export const changeMetadataTemplate = (metadataTemplate) => ({type: CHANGE_METADATA_TEMPLATE, metadataTemplate});
 export const toggleAdvancedSettings = () => ({type: TOGGLE_ADVANCED_SETTINGS});
 export const toggleTemplate = () => ({type: TOGGLE_TEMPLATE});
-export const toggleThumbnail = () => ({type: TOGGLE_THUMBNAIL});
+export const toggleThumbnail = (currentVal) => ({type: SET_THUMBNAIL_FLAG, toggleValue: currentVal});
 export const formatOptionsFetch = (url, force) => ({type: FORMAT_OPTIONS_FETCH, url, force});
 export const formatsLoading = (loading) => ({type: FORMAT_OPTIONS_LOADING, loading});
 export const setSupportedFormats = (formats, url) => ({type: SET_FORMAT_OPTIONS, formats, url});

web/client/components/catalog/Catalog.jsx

@@ -227,7 +227,7 @@ class Catalog extends React.Component {
         // defaults for recordItem elements
         let metadataTemplate = "";
         let showTemplate = false;
-        let hideThumbnail = false;
+        let hideThumbnail = this.props.hideThumbnail;
 
         if (this.props.services && this.props.services[this.props.selectedService]) {
             const selectedService = this.props.services[this.props.selectedService];

web/client/components/catalog/CatalogServiceEditor.jsx

@@ -66,7 +66,8 @@ const CatalogServiceEditor = ({
     infoFormatOptions,
     services,
     autoSetVisibilityLimits = false,
-    disabled
+    disabled,
+    hideThumbnail
 }) => {
     const [valid, setValid] = useState(true);
     return (<BorderLayout
@@ -107,6 +108,7 @@ const CatalogServiceEditor = ({
                 formatsLoading={formatsLoading}
                 infoFormatOptions={infoFormatOptions}
                 autoSetVisibilityLimits={autoSetVisibilityLimits}
+                globalHideThumbnail={hideThumbnail}
             />
             <FormGroup controlId="buttons" key="buttons">
                 <Col xs={12}>

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

@@ -73,6 +73,30 @@ describe('Test Catalog panel', () => {
         const expandButton = document.querySelector(expandClass);
         expect(expandButton).toExist(`${expandClass} does not exist`);
     });
+    it('renders records without thumbnail for all services', () => {
+        const title = "title";
+        const description = "description";
+        const item = ReactDOM.render(<Catalog
+            services={{"csw": {
+                type: "csw",
+                url: "url",
+                title: "csw",
+                format: "image/png8",
+                metadataTemplate: "<p>${title} and ${description}</p>"
+            }}}
+            searchOptions={{}}
+            selectedService="csw"
+            loading={false}
+            mode="view"
+            result={{numberOfRecordsMatched: 3}}
+            records={[{title, description, references: []}, {title, description, references: []}, {title, description, references: []}]}
+            hideThumbnail
+        />, document.getElementById("container"));
+        expect(item).toExist();
+        const previewClassName = ".mapstore-side-preview";
+        const preview = document.querySelectorAll(previewClassName);
+        expect(preview.length).toEqual(0);
+    });
     it('renders records without thumbnail for a specific service', () => {
         const title = "title";
         const description = "description";

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

@@ -18,13 +18,19 @@ import InfoPopover from '../../../widgets/widget/InfoPopover';
  * - autoload: Option allows the automatic fetching of the results upon selecting the service from Service dropdown
  * - hideThumbnail: Options allows to hide the thumbnail on the result
  *
+ * @prop {boolean} globalHideThumbnail - Global default cfg for thumbnail visibility.
+ * @prop {object} service the service to edit
+ * @prop {function} onChangeServiceProperty handler (key, value) to change a property of service.
+ * @prop {function} onToggleThumbnail - Thumbnail toggle handler.
  */
 export default ({
     children,
+    globalHideThumbnail,
     service,
     onChangeServiceProperty = () => { },
     onToggleThumbnail = () => { }
 }) => {
+    const showThumbnailValue = !isNil(service.hideThumbnail) ? !service.hideThumbnail : !isNil(globalHideThumbnail) ? !globalHideThumbnail : true;
     return (
         <>
             <FormGroup controlId="autoload" key="autoload">
@@ -35,8 +41,8 @@ export default ({
             </FormGroup>
             <FormGroup controlId="thumbnail" key="thumbnail">
                 <Checkbox
-                    onChange={() => onToggleThumbnail()}
-                    checked={!isNil(service.hideThumbnail) ? !service.hideThumbnail : true}>
+                    onChange={(evt) => onToggleThumbnail(!evt.target.checked)}
+                    checked={showThumbnailValue}>
                     <Message msgId="catalog.showPreview" />
                 </Checkbox>
             </FormGroup>

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

@@ -29,11 +29,14 @@ const INITIAL_CODE_VALUE = {
  * - *forceDefaultTileGrid*: When `provider` is `tms`, the option allows to force the usage of global projection's tile grid rather than one provided by server.
  *  Useful for TMS services that advertise wrong origin or resolutions
  * - *customTMSConfiguration*: Allows user to configure the tile URL template manually. For more info [Custom TMS](https://mapstore.readthedocs.io/en/latest/user-guide/catalog/#custom-tms)
- *
+ * @prop {boolean} globalHideThumbnail - Global default for thumbnail visibility.
  * @prop {object} service the service to edit
+ * @prop {function} setValid - Validity state callback.
+ * @prop {function} onToggleThumbnail - Thumbnail toggle handler.
  * @prop {function} onChangeServiceProperty handler (key, value) to change a property of service.
  */
 export default ({
+    globalHideThumbnail,
     service = {},
     setValid = () => { },
     onToggleThumbnail = () => {},
@@ -62,6 +65,8 @@ export default ({
         }
         setValid(false);
     };
+    const showThumbnailValue = !isNil(service.hideThumbnail) ? !service.hideThumbnail : !isNil(globalHideThumbnail) ? !globalHideThumbnail : true;
+
     return (<div>
         <FormGroup controlId="autoload" key="autoload">
             {service.autoload !== undefined && <Checkbox key="autoload" value="autoload"
@@ -70,8 +75,8 @@ export default ({
                 <Message msgId="catalog.autoload" />
             </Checkbox>}
             <Checkbox key="thumbnail" value="thumbnail"
-                onChange={() => onToggleThumbnail()}
-                checked={!isNil(service.hideThumbnail) ? !service.hideThumbnail : true}>
+                onChange={(evt) => onToggleThumbnail(!evt.target.checked)}
+                checked={showThumbnailValue}>
                 <Message msgId="catalog.showPreview" />
             </Checkbox>
             {service.provider === "tms"

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

@@ -105,4 +105,51 @@ describe('Test common advanced settings', () => {
         expect(interactiveLegendLabel).toBeTruthy();
         expect(interactiveLegendLabel.innerHTML).toEqual('layerProperties.enableInteractiveLegendInfo.label');
     });
+
+    it('test if thumbnail checkbox is checked when globalHideThumbnail is true', () => {
+        ReactDOM.render(
+            <CommonAdvancedSettings
+                globalHideThumbnail
+                service={{ type: "csw" }}
+            />, document.getElementById("container"));
+
+        const thumbnailCheckbox = document.querySelector('.checkbox input');
+        expect(thumbnailCheckbox).toBeTruthy();
+        expect(thumbnailCheckbox.checked).toBeFalsy();
+    });
+    it('test if thumbnail checkbox is checked when globalHideThumbnail is false', () => {
+        ReactDOM.render(
+            <CommonAdvancedSettings
+                globalHideThumbnail={false}
+                service={{ type: "csw" }}
+            />, document.getElementById("container"));
+
+        const thumbnailCheckbox = document.querySelector('.checkbox input');
+        expect(thumbnailCheckbox).toBeTruthy();
+        expect(thumbnailCheckbox.checked).toBeTruthy();
+    });
+    it('test if thumbnail checkbox is checked when service.hideThumbnail is false', () => {
+        ReactDOM.render(
+            <CommonAdvancedSettings
+                globalHideThumbnail
+                service={{ type: "csw", hideThumbnail: false }}
+            />, document.getElementById("container"));
+
+        const thumbnailCheckbox = document.querySelector('.checkbox input');
+        expect(thumbnailCheckbox).toBeTruthy();
+        expect(thumbnailCheckbox.checked).toBeTruthy();
+    });
+    it('test if thumbnail checkbox is not checked when service.hideThumbnail is true', () => {
+        ReactDOM.render(
+            <CommonAdvancedSettings
+                globalHideThumbnail
+                service={{ type: "csw", hideThumbnail: true }}
+            />, document.getElementById("container"));
+
+        const thumbnailCheckbox = document.querySelector('.checkbox input');
+        expect(thumbnailCheckbox).toBeTruthy();
+        // here the priority for service hideThumbnail
+        expect(thumbnailCheckbox.checked).toBeFalsy();
+    });
+
 });

web/client/plugins/MetadataExplorer.jsx

@@ -370,7 +370,9 @@ export const BackgroundSelectorAdd = connect(
  * @class
  * @name MetadataExplorer
  * @memberof plugins
- * @prop {string} cfg.hideThumbnail shows/hides thumbnail
+ * @prop {string} cfg.hideThumbnail - Global configuration for thumbnail visibility.
+ *   - **Value**: `true` to hide thumbnails globally, `false` to show thumbnails in catalog.
+ *   - **Overrides**: Service-specific configurations take precedence.
  * @prop {object[]} cfg.serviceTypes Service types available to add a new catalog. default: `[{ name: "csw", label: "CSW" }, { name: "wms", label: "WMS" }, { name: "wmts", label: "WMTS" }, { name: "tms", label: "TMS", allowedProviders },{ name: "wfs", label: "WFS" },{ name: "flatgeobuf", label: "FlatGeobuf" }]`.
  * `allowedProviders` is a whitelist of tileProviders from ConfigProvider.js. you can set a global variable allowedProviders in localConfig.json to set it up globally. You can configure it to "ALL" to get all the list (at your own risk, some services could change or not be available anymore)
  * @prop {object} cfg.hideIdentifier shows/hides identifier

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

@@ -49,7 +49,7 @@ import {
     DELETE_CATALOG_SERVICE,
     SAVING_SERVICE,
     CHANGE_METADATA_TEMPLATE,
-    TOGGLE_THUMBNAIL,
+    SET_THUMBNAIL_FLAG,
     TOGGLE_TEMPLATE,
     TOGGLE_ADVANCED_SETTINGS,
     addCatalogService,
@@ -292,14 +292,14 @@ describe('Test the catalog reducer', () => {
         }}, {type: CHANGE_CATALOG_MODE, mode, isNew});
         expect(state2.newService.title).toBe("tit");
     });
-    it('TOGGLE_THUMBNAIL ', () => {
+    it('SET_THUMBNAIL_FLAG ', () => {
         const state = catalog({
             newService: {}
-        }, {type: TOGGLE_THUMBNAIL});
+        }, {type: SET_THUMBNAIL_FLAG, toggleValue: true});
         expect(state.newService.hideThumbnail).toBe(true);
         const state2 = catalog({
             newService: {hideThumbnail: true}
-        }, {type: TOGGLE_THUMBNAIL});
+        }, {type: SET_THUMBNAIL_FLAG, toggleValue: false});
         expect(state2.newService.hideThumbnail).toBe(false);
     });
     it('TOGGLE_TEMPLATE toggling on the template', () => {