#9025 add caching options to wms background settings

web/client/components/TOC/fragments/settings/WMSCacheOptions.jsx

@@ -26,15 +26,14 @@ const infoText = {
         supportFormatCache,
         selectedTileGridId,
         projection,
-        supportStyleCache,
         hasCustomParams,
         tileGridCacheSupport,
         layer
     }) => {
         return (
             <>
                 <p style={{ maxWidth: 400 }}>
-                    {(selectedTileGridId && supportFormatCache && supportStyleCache) &&
+                    {(selectedTileGridId && supportFormatCache) &&
                         <Message
                             msgId="layerProperties.tileGridInUse"
                             msgParams={{ id: selectedTileGridId }} />}
@@ -82,11 +81,10 @@ const infoText = {
                         ? <Alert bsStyle="warning">
                             <Message msgId="layerProperties.noTileGridMatchesConfiguration" />
                         </Alert>
-                        : (!supportFormatCache || !supportStyleCache)
+                        : (!supportFormatCache)
                             ? (
                                 <Alert bsStyle="warning">
                                     {!supportFormatCache && <Message msgId="layerProperties.notSupportedSelectedFormatCache" />}
-                                    {!supportStyleCache && <Message msgId="layerProperties.notSupportedSelectedStyleCache" />}
                                 </Alert>
                             )
                             : null}
@@ -105,7 +103,6 @@ const infoText = {
         layer,
         supportFormatCache,
         projection,
-        supportStyleCache,
         hasCustomParams
     }) => {
         const normalizedProjection = normalizeSRS(projection);
@@ -129,9 +126,6 @@ const infoText = {
                         <tr className={supportFormatCache ? 'bg-success' : 'bg-warning'}>
                             <td><Glyphicon className={supportFormatCache ? 'text-success' : 'text-danger'} glyph={supportFormatCache ? 'ok-sign' : 'remove-sign'}/>{' '}<Message msgId="layerProperties.format.title" /></td>
                         </tr>
-                        <tr className={supportStyleCache ? 'bg-success' : 'bg-warning'}>
-                            <td><Glyphicon className={supportStyleCache ? 'text-success' : 'text-danger'} glyph={supportStyleCache ? 'ok-sign' : 'remove-sign'}/>{' '}<Message msgId="layerProperties.style" /></td>
-                        </tr>
                     </tbody>
                 </Table>
                 {tileGrids && <>
@@ -216,7 +210,6 @@ function WMSCacheOptions({
 
     const cacheSupport = (layer.tileGridCacheSupport || standardTileGridInfo.tileGridCacheSupport);
     const supportFormatCache = !layer.format || !!((cacheSupport?.formats || []).includes(layer.format));
-    const supportStyleCache = !layer.style || !!((cacheSupport?.styles || []).includes(layer.style));
     const hasCustomParams = !!layer.localizedLayerStyles;
     const tiled = layer && layer.tiled !== undefined ? layer.tiled : true;
 
@@ -248,15 +241,14 @@ function WMSCacheOptions({
         setTileGridsResponseMsgId('');
         setTileGridsResponseMsgStyle('');
         return getLayerTileMatrixSetsInfo(requestUrl, options.name, options)
-            .then(({ tileGrids, styles, formats }) => {
+            .then(({ tileGrids, formats }) => {
                 const filteredTileGrids = tileGrids.filter(({ crs }) => isProjectionAvailable(normalizeSRS(crs)));
                 if (filteredTileGrids?.length === 0) {
                     setTileGridsResponseMsgId('layerProperties.noConfiguredGridSets');
                 }
                 return {
                     tileGrids: filteredTileGrids,
                     tileGridCacheSupport: filteredTileGrids?.length > 0 ? {
-                        styles,
                         formats
                     } : undefined
                 };
@@ -279,15 +271,15 @@ function WMSCacheOptions({
                 <Checkbox value="tiled" key="tiled"
                     disabled={!!layer.singleTile}
                     style={{ margin: 0 }}
-                    onChange={(e) => onChange('tiled', e.target.checked)}
+                    onChange={(e) => onChange({ tiled: e.target.checked })}
                     checked={tiled} >
                     <Message msgId="layerProperties.cached" />
                 </Checkbox>
                 {requestUrl && !disableTileGrids && <div className="ms-wms-cache-options-toolbar">
                     {(showInfo) && <InfoPopover
                         glyph="info-sign"
                         placement="right"
-                        bsStyle={(!supportFormatCache || !supportStyleCache || !selectedTileGridId)
+                        bsStyle={(!supportFormatCache || !selectedTileGridId)
                             ? 'danger'
                             : 'success'}
                         title={<Message msgId="layerProperties.tileGridInfoChecksTitle" />}
@@ -299,7 +291,6 @@ function WMSCacheOptions({
                             supportFormatCache={supportFormatCache}
                             selectedTileGridId={selectedTileGridId}
                             projection={projection}
-                            supportStyleCache={supportStyleCache}
                             hasCustomParams={hasCustomParams}
                         />}
                     />}

web/client/components/TOC/fragments/settings/__tests__/WMSCacheOptions-test.jsx

@@ -317,7 +317,6 @@ describe('WMSCacheOptions', () => {
                             tileSize: [256, 256]
                         }],
                         tileGridCacheSupport: {
-                            styles: ['population'],
                             formats: ['image/png', 'image/jpeg']
                         }
                     });
@@ -546,7 +545,6 @@ describe('WMSCacheOptions', () => {
                     tileSize: [256, 256]
                 }],
                 tileGridCacheSupport: {
-                    styles: ['population'],
                     formats: ['image/png', 'image/jpeg']
                 }
             }}
@@ -562,7 +560,6 @@ describe('WMSCacheOptions', () => {
                             tileSize: [256, 256]
                         }],
                         tileGridCacheSupport: {
-                            styles: ['population'],
                             formats: ['image/png', 'image/jpeg']
                         }
                     });
@@ -592,7 +589,6 @@ describe('WMSCacheOptions', () => {
             tileGridStrategy: 'custom',
             format: 'image/jpeg',
             tileGridCacheSupport: {
-                styles: ['population'],
                 formats: ['image/png']
             },
             tileGrids: [
@@ -641,62 +637,6 @@ describe('WMSCacheOptions', () => {
         const alert = document.querySelector('.alert');
         expect(alert.innerText).toBe('layerProperties.notSupportedSelectedFormatCache');
     });
-    it('should display the style cache warning if not listed in the supported ones', () => {
-        ReactDOM.render(<WMSCacheOptions layer={{
-            url: '/geoserver/wms',
-            name: 'topp:states',
-            tileGridStrategy: 'custom',
-            style: 'fill',
-            tileGridCacheSupport: {
-                styles: ['population'],
-                formats: ['image/png']
-            },
-            tileGrids: [
-                {
-                    id: 'EPSG:32122x2',
-                    crs: 'EPSG:32122',
-                    scales: [2557541.55271451, 1278770.776357255, 639385.3881786275],
-                    origins: [[403035.4105968763, 414783], [403035.4105968763, 414783], [403035.4105968763, 323121]],
-                    tileSize: [512, 512]
-                },
-                {
-                    id: 'EPSG:900913',
-                    crs: 'EPSG:900913',
-                    scales: [559082263.9508929, 279541131.97544646, 139770565.98772323],
-                    origin: [-20037508.34, 20037508],
-                    tileSize: [256, 256]
-                }
-            ]
-        }} projection="EPSG:3857" />, document.getElementById('container'));
-        expect(document.querySelector('.ms-wms-cache-options')).toBeTruthy();
-        const inputs = document.querySelectorAll('input[type="checkbox"]');
-        expect(inputs.length).toBe(1);
-        const buttons = document.querySelectorAll('button');
-        expect(buttons.length).toBe(2);
-        expect([...buttons].map(button => button.querySelector('.glyphicon').getAttribute('class'))).toEqual([
-            'glyphicon glyphicon-refresh',
-            'glyphicon glyphicon-grid-custom'
-        ]);
-        const info = document.querySelector('.glyphicon-info-sign');
-        expect(info).toBeTruthy();
-        expect(info.getAttribute('class')).toBe('text-danger glyphicon glyphicon-info-sign');
-
-        let table = document.querySelector('table');
-        expect(table).toBeFalsy();
-
-        Simulate.mouseOver(info);
-
-        table = document.querySelector('table');
-        expect(table).toBeTruthy();
-
-        const tableRows = table.querySelectorAll('tbody > tr');
-        expect([...tableRows].map((row) => row.innerText)).toEqual([
-            'EPSG:32122x2\tEPSG:32122\t512',
-            'EPSG:900913\tEPSG:900913\t256'
-        ]);
-        const alert = document.querySelector('.alert');
-        expect(alert.innerText).toBe('layerProperties.notSupportedSelectedStyleCache');
-    });
     it('should display the custom param cache warning if localized style is enabled', () => {
         ReactDOM.render(<WMSCacheOptions layer={{
             url: '/geoserver/wms',
@@ -967,8 +907,7 @@ describe('WMSCacheOptions', () => {
                 expect([...tables[0].querySelectorAll('tbody > tr')].map((row) => [row.querySelector('.glyphicon').getAttribute('class'), row.innerText])).toEqual([
                     [ 'text-success glyphicon glyphicon-ok-sign', 'layerProperties.projection' ],
                     [ 'text-success glyphicon glyphicon-ok-sign', 'layerProperties.tileSize' ],
-                    [ 'text-success glyphicon glyphicon-ok-sign', 'layerProperties.format.title' ],
-                    [ 'text-success glyphicon glyphicon-ok-sign', 'layerProperties.style' ]
+                    [ 'text-success glyphicon glyphicon-ok-sign', 'layerProperties.format.title' ]
                 ]);
 
                 expect([...tables[1].querySelectorAll('tbody > tr')].map((row) => [...row.querySelectorAll('td')].map(data => [data.getAttribute('class') || '', data.innerText]))).toEqual([
@@ -1089,8 +1028,7 @@ describe('WMSCacheOptions', () => {
                 expect([...tables[0].querySelectorAll('tbody > tr')].map((row) => [row.querySelector('.glyphicon').getAttribute('class'), row.innerText])).toEqual([
                     [ 'text-success glyphicon glyphicon-ok-sign', 'layerProperties.projection' ],
                     [ 'text-danger glyphicon glyphicon-remove-sign', 'layerProperties.tileSize' ],
-                    [ 'text-danger glyphicon glyphicon-remove-sign', 'layerProperties.format.title' ],
-                    [ 'text-success glyphicon glyphicon-ok-sign', 'layerProperties.style' ]
+                    [ 'text-danger glyphicon glyphicon-remove-sign', 'layerProperties.format.title' ]
                 ]);
 
                 expect([...tables[1].querySelectorAll('tbody > tr')].map((row) => [...row.querySelectorAll('td')].map(data => [data.getAttribute('class') || '', data.innerText]))).toEqual([

web/client/components/background/BackgroundDialog.jsx

@@ -24,6 +24,8 @@ import ResizableModal from '../misc/ResizableModal';
 import {Form, FormGroup, ControlLabel, FormControl, Glyphicon} from 'react-bootstrap';
 import ButtonRB from '../misc/Button';
 import Thumbnail from '../maps/forms/Thumbnail';
+import WMSCacheOptions from '../TOC/fragments/settings/WMSCacheOptions';
+import { ServerTypes } from '../../utils/LayersUtils';
 import {getMessageById} from '../../utils/LocaleUtils';
 import tooltip from '../misc/enhancers/tooltip';
 const Button = tooltip(ButtonRB);
@@ -53,7 +55,9 @@ export default class BackgroundDialog extends React.Component {
         defaultFormat: PropTypes.string,
         formatOptions: PropTypes.array,
         parameterTypeOptions: PropTypes.array,
-        booleanOptions: PropTypes.array
+        booleanOptions: PropTypes.array,
+        projection: PropTypes.string,
+        disableTileGrids: PropTypes.bool
     };
 
     static contextTypes = {
@@ -170,6 +174,14 @@ export default class BackgroundDialog extends React.Component {
                     />
                 </FormGroup>
                 {this.renderStyleSelector()}
+                {this.props.layer?.serverType !== ServerTypes.NO_VENDOR && <FormGroup>
+                    <WMSCacheOptions
+                        layer={{ ...this.props.layer, ...this.state }}
+                        projection={this.props.projection}
+                        onChange={value => this.setState(value)}
+                        disableTileGrids={this.props.disableTileGrids}
+                    />
+                </FormGroup>}
                 <Button>
                     <div style={{ display: 'flex', alignItems: 'center' }}>
                         <ControlLabel style={{ flex: 1 }}><Message msgId="backgroundDialog.additionalParameters" /></ControlLabel>

web/client/components/background/BackgroundSelector.jsx

@@ -57,7 +57,8 @@ class BackgroundSelector extends React.Component {
         updateNode: PropTypes.func,
         clearModal: PropTypes.func,
         allowDeletion: PropTypes.bool,
-        projection: PropTypes.string
+        projection: PropTypes.string,
+        disableTileGrids: PropTypes.bool
     };
 
     static defaultProps = {
@@ -256,6 +257,8 @@ class BackgroundSelector extends React.Component {
 
                     }}
                     updateThumbnail={this.props.onUpdateThumbnail}
+                    projection={this.props.projection}
+                    disableTileGrids={this.props.disableTileGrids}
                     {...backgroundDialogParams}
                     {...this.props.modalParams}
                 />}

web/client/components/background/__tests__/BackgroundDialog-test.jsx

@@ -67,4 +67,20 @@ describe('test BackgroundDialog', () => {
         expect(updateThumbnailSpy).toHaveBeenCalled();
         expect(onSaveSpy).toHaveBeenCalled();
     });
+    it('should render with WMS cache options', () => {
+        ReactDOM.render(<BackgroundDialog
+            layer={{
+                type: 'wms',
+                url: '/geoserver/wms',
+                name: 'workspace:name'
+            }}
+        />,
+        document.getElementById("container"));
+        const modalNode = document.querySelector('#ms-resizable-modal');
+        expect(modalNode).toBeTruthy();
+        const wmsCacheOptionsContent = document.querySelector('.ms-wms-cache-options-content');
+        expect(wmsCacheOptionsContent).toBeTruthy();
+        const wmsCacheOptionsToolbar = document.querySelector('.ms-wms-cache-options-toolbar');
+        expect(wmsCacheOptionsToolbar).toBeTruthy();
+    });
 });

web/client/plugins/BackgroundSelector.jsx

@@ -53,6 +53,7 @@ import controlsReducer from "../reducers/controls";
 import backgroundReducer from "../reducers/backgroundselector";
 import backgroundEpic from "../epics/backgroundselector";
 import BackgroundSelector from "../components/background/BackgroundSelector";
+import { isCesium } from '../selectors/maptype';
 
 const backgroundSelector = createSelector([
     projectionSelector,
@@ -70,8 +71,8 @@ const backgroundSelector = createSelector([
     state => state.controls && state.controls.metadataexplorer && state.controls.metadataexplorer.enabled,
     state => state.browser && state.browser.mobile ? 'mobile' : 'desktop',
     confirmDeleteBackgroundModalSelector,
-    allowBackgroundsDeletionSelector],
-(projection, modalParams, backgroundList, deletedId, backgrounds, map, mapIsEditable, layers, controls, currentLayer, tempLayer, style, enabledCatalog, mode, confirmDeleteBackgroundModalObj, allowDeletion) => ({
+    allowBackgroundsDeletionSelector, isCesium],
+(projection, modalParams, backgroundList, deletedId, backgrounds, map, mapIsEditable, layers, controls, currentLayer, tempLayer, style, enabledCatalog, mode, confirmDeleteBackgroundModalObj, allowDeletion, isCesiumViewer) => ({
     mode,
     modalParams,
     backgroundList,
@@ -88,7 +89,8 @@ const backgroundSelector = createSelector([
     enabledCatalog,
     confirmDeleteBackgroundModal: confirmDeleteBackgroundModalObj,
     allowDeletion,
-    projection
+    projection,
+    disableTileGrids: !!isCesiumViewer
 }));
 
 /**

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

@@ -130,7 +130,6 @@
             "noConfiguredGridSets": "Es ist nicht möglich, benutzerdefinierte Kachelraster abzurufen. Diese Ebene verfügt über keinen Rastersatz, der mit den verfügbaren Projektionen kompatibel ist. Bitte überprüfen Sie die Konfigurationsserverseite und versuchen Sie es erneut",
             "notPossibleToConnectToWMTSService": "Es war nicht möglich, die Kachelraster vom Server abzurufen. Die an {requestUrl} gesendete Anfrage löst einen Fehler aus.",
             "notSupportedSelectedFormatCache": "Das ausgewählte Format wird vom Cache nicht unterstützt",
-            "notSupportedSelectedStyleCache": "Der ausgewählte Stil wird vom Cache nicht unterstützt",
             "customParamsCacheWarning": "Für diese Ebene ist der lokalisierte Stil aktiviert. Bitte überprüfen Sie die Konfigurationsserverseite und stellen Sie sicher, dass sie den benutzerdefinierten ENV-Parameter unterstützt",
             "supportedFormats": "Unterstützte Formate",
             "checkAvailableTileGridsInfo": "Überprüfen Sie die verfügbaren Kachelgitterinformationen",

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

@@ -130,7 +130,6 @@
             "noConfiguredGridSets": "It is not possible to fetch custom tile grids. This layer do not have any grid set compatible with the available projections. Please review the configuration server side and retry",
             "notPossibleToConnectToWMTSService": "It was not possible to fetch the tile grids from the server. The request sent to {requestUrl} is throwing an error",
             "notSupportedSelectedFormatCache": "The selected format is not supported by the cache.",
-            "notSupportedSelectedStyleCache": "The selected style is not supported by the cache",
             "customParamsCacheWarning": "This layer has localized style enabled. Please verify the configuration server side and ensure it supports the custom ENV parameter",
             "supportedFormats": "Supported formats",
             "checkAvailableTileGridsInfo": "Check available tile grids information",

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

@@ -127,7 +127,6 @@
             "noConfiguredGridSets": "No es posible obtener cuadrículas de mosaico personalizadas. Esta capa no tiene ningún conjunto de cuadrícula compatible con las proyecciones disponibles. Revise el lado del servidor de configuración y vuelva a intentarlo",
             "notPossibleToConnectToWMTSService": "No fue posible obtener las cuadrículas de mosaicos del servidor. La solicitud enviada a {requestUrl} arroja un error",
             "notSupportedSelectedFormatCache": "El formato seleccionado no es compatible con el caché.",
-            "notSupportedSelectedStyleCache": "El estilo seleccionado no es compatible con el caché",
             "customParamsCacheWarning": "Esta capa tiene activado el estilo localizado. Verifique el lado del servidor de configuración y asegúrese de que sea compatible con el parámetro ENV personalizado",
             "supportedFormats": "Formatos compatibles",
             "checkAvailableTileGridsInfo": "Verificar la información de cuadrículas de mosaicos disponibles",