@eeacms/volto-arcgis-block 0.1.421 → 0.1.423

package/CHANGELOG.md

@@ -4,7 +4,18 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
-### [0.1.421](https://github.com/eea/volto-arcgis-block/compare/0.1.420...0.1.421) - 26 January 2026
+### [0.1.423](https://github.com/eea/volto-arcgis-block/compare/0.1.422...0.1.423) - 29 January 2026
+
+#### :hammer_and_wrench: Others
+
+- (bug): Update url modifications to allow for correct proxy redirect in upload widget. Fix Styles to make WFS feature selection visibly checked. [Unai Bolivar - [`5a95ca9`](https://github.com/eea/volto-arcgis-block/commit/5a95ca919e825d95268bbd5746e3f7b9fc8a2c54)]
+### [0.1.422](https://github.com/eea/volto-arcgis-block/compare/0.1.421...0.1.422) - 28 January 2026
+
+#### :hammer_and_wrench: Others
+
+- (bug): Update upload widget to fetch from proxy endpoint [Unai Bolivar - [`bee63dc`](https://github.com/eea/volto-arcgis-block/commit/bee63dc12f97eb7e121962de6cc38293fe5fa594)]
+- (bug): Fix error popup for input text that is not valid url in upload widget [Unai Bolivar - [`2e03394`](https://github.com/eea/volto-arcgis-block/commit/2e03394aaa054530e30e312108fcfb5ce8452a5f)]
+### [0.1.421](https://github.com/eea/volto-arcgis-block/compare/0.1.420...0.1.421) - 27 January 2026
 
 #### :hammer_and_wrench: Others
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-arcgis-block",
-  "version": "0.1.421",
+  "version": "0.1.423",
   "description": "volto-arcgis-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: CodeSyntax",

package/src/components/MapViewer/MenuWidget.jsx

@@ -2295,7 +2295,7 @@ class MenuWidget extends React.Component {
         /\/(ows|ogc)(\b|\/)/i.test(baseUrl);
 
       if (serviceType === 'WMTS') {
-        resourceLayers = [new WMTSLayer({ url: viewService })];
+        resourceLayers = [new WMTSLayer({ url: baseUrl })];
       } else if (isWFS) {
         resourceLayers = Object.entries(serviceSelection || {})
           .map(([name, title]) => {
@@ -2324,7 +2324,10 @@ class MenuWidget extends React.Component {
           .filter(Boolean);
       } else {
         resourceLayers = [
-          new WMSLayer({ url: viewService, typename: serviceSelection || [] }),
+          new WMSLayer({
+            url: baseUrl,
+            typename: serviceSelection || [],
+          }),
         ];
       }
     } catch (error) {

package/src/components/MapViewer/UploadWidget.jsx

@@ -23,6 +23,7 @@ class UploadWidget extends React.Component {
       serviceUrl: '',
       selectedServiceType: '',
       wfsFeatures: {},
+      selectedFeatures: {},
     };
     this.menuClass =
       'esri-icon-sketch-rectangle esri-widget--button esri-widget esri-interactive';
@@ -31,7 +32,6 @@ class UploadWidget extends React.Component {
     this.uploadUrlServiceHandler = this.props.uploadUrlServiceHandler;
     this.uploadFileErrorHandler = this.props.uploadFileErrorHandler;
     this.errorPopup = this.errorPopup.bind(this);
-    this.selectedFeatures = {};
   }
 
   loader() {
@@ -175,9 +175,33 @@ class UploadWidget extends React.Component {
     return serviceUrl;
   };
 
+  isValidUrl = (url) => {
+    try {
+      new URL(url);
+      return true;
+    } catch (e) {
+      return false;
+    }
+  };
+
+  stripProtocol = (url) => {
+    return (url || '').replace(/^https?:\/\//i, '');
+  };
+
+  getProxyBase = () => {
+    const href = window.location.href || '';
+    return href.replace('/en/map-viewer', '/ogcproxy/');
+    // return 'https://clmsdemo.devel6cph.eea.europa.eu/ogcproxy/';
+  };
+
+  buildProxiedUrl = (url) => {
+    return this.getProxyBase() + this.stripProtocol(url);
+  };
+
   getCapabilities = (url, serviceType) => {
     // Get the coordinates of the click on the view
-    return esriRequest(url, {
+    const proxiedUrl = this.buildProxiedUrl(url);
+    return esriRequest(proxiedUrl, {
       responseType: 'html',
       sync: 'true',
       query: {
@@ -227,19 +251,20 @@ class UploadWidget extends React.Component {
 
   handleFeatureCheckboxChange = (event) => {
     const key = event.target.value;
-    const { wfsFeatures } = this.state;
+    const { wfsFeatures, selectedFeatures } = this.state;
+    const nextSelected = { ...selectedFeatures };
     if (event.target.checked) {
-      this.selectedFeatures[key] =
-        wfsFeatures && wfsFeatures[key] ? wfsFeatures[key] : key;
+      if (wfsFeatures && wfsFeatures[key]) {
+        nextSelected[key] = wfsFeatures[key];
+      } else {
+        nextSelected[key] = key;
+      }
     } else {
-      if (
-        this.selectedFeatures &&
-        Object.prototype.hasOwnProperty.call(this.selectedFeatures, key)
-      ) {
-        delete this.selectedFeatures[key];
+      if (Object.prototype.hasOwnProperty.call(nextSelected, key)) {
+        delete nextSelected[key];
       }
     }
-    this.setState({});
+    this.setState({ selectedFeatures: nextSelected });
   };
 
   handleSelectLayers = async () => {
@@ -247,7 +272,8 @@ class UploadWidget extends React.Component {
     if (
       selectedServiceType === 'WFS' &&
       serviceUrl &&
-      serviceUrl.trim() !== ''
+      serviceUrl.trim() !== '' &&
+      this.isValidUrl(serviceUrl)
     ) {
       const normalizedUrl = this.getNormalizedUrlForType(
         serviceUrl,
@@ -264,20 +290,30 @@ class UploadWidget extends React.Component {
   };
 
   handleUploadService = async () => {
-    const { serviceUrl, selectedServiceType } = this.state;
-    if (selectedServiceType && serviceUrl && serviceUrl.trim() !== '') {
+    const serviceUrl = this.state.serviceUrl;
+    const selectedServiceType = this.state.selectedServiceType;
+    const selectedFeatures = this.state.selectedFeatures;
+    if (
+      selectedServiceType &&
+      serviceUrl &&
+      serviceUrl.trim() !== '' &&
+      this.isValidUrl(serviceUrl)
+    ) {
       const normalizedUrl = this.getNormalizedUrlForType(
         serviceUrl,
         selectedServiceType,
       );
+      const proxiedUrl = this.buildProxiedUrl(normalizedUrl);
       if (selectedServiceType === 'WMS') {
-        this.uploadWMSService(normalizedUrl);
+        this.uploadUrlServiceHandler(proxiedUrl, 'WMS');
         this.setState({ serviceUrl: '' });
       } else if (selectedServiceType === 'WMTS') {
-        this.uploadWMTSService(normalizedUrl);
+        this.uploadUrlServiceHandler(proxiedUrl, 'WMTS');
         this.setState({ serviceUrl: '' });
       } else if (selectedServiceType === 'WFS') {
-        this.uploadWFSService(normalizedUrl);
+        this.uploadUrlServiceHandler(proxiedUrl, 'WFS', selectedFeatures);
+        this.setState({ wfsFeatures: {}, serviceUrl: '' });
+        this.setState({ selectedFeatures: {} });
       } else {
         this.errorPopup();
         this.setState({ serviceUrl: '' });
@@ -298,9 +334,8 @@ class UploadWidget extends React.Component {
   };
 
   uploadWFSService = (url) => {
-    this.uploadUrlServiceHandler(url, 'WFS', this.selectedFeatures);
-    this.selectedFeatures = {};
-    this.setState({ wfsFeatures: {}, serviceUrl: '' });
+    this.uploadUrlServiceHandler(url, 'WFS', this.state.selectedFeatures);
+    this.setState({ wfsFeatures: {}, serviceUrl: '', selectedFeatures: {} });
   };
 
   errorPopup = () => {
@@ -356,13 +391,16 @@ class UploadWidget extends React.Component {
    * @returns jsx
    */
   render() {
-    const { selectedServiceType, serviceUrl, wfsFeatures } = this.state;
+    const selectedServiceType = this.state.selectedServiceType;
+    const serviceUrl = this.state.serviceUrl;
+    const wfsFeatures = this.state.wfsFeatures;
+    const selectedFeatures = this.state.selectedFeatures;
     const isUploadDisabled =
       !selectedServiceType ||
       !(serviceUrl && serviceUrl.trim() !== '') ||
       (selectedServiceType === 'WFS' &&
         Object.keys(wfsFeatures || {}).length > 0 &&
-        Object.keys(this.selectedFeatures || {}).length === 0);
+        Object.keys(selectedFeatures || {}).length === 0);
     return (
       <>
         <div ref={this.container} className="upload-container">
@@ -490,7 +528,12 @@ class UploadWidget extends React.Component {
                               type="checkbox"
                               value={key}
                               onChange={this.handleFeatureCheckboxChange}
-                              checked={Boolean(this.selectedFeatures[key])}
+                              checked={
+                                this.state.selectedFeatures &&
+                                this.state.selectedFeatures[key]
+                                  ? true
+                                  : false
+                              }
                               style={{ width: '18px', height: '18px' }}
                             />
                             <span>{title || key}</span>

package/src/components/MapViewer/css/ArcgisMap.css

@@ -622,9 +622,20 @@ div.upload-container.esri-component
   font-size: 0.875rem;
 }
 
-.upload-container .esri-button:hover {
+.upload-container .esri-button {
   border: none;
+}
+
+.upload-container .esri-button:enabled {
   background-color: #a0b128;
+  color: white;
+  cursor: pointer;
+}
+
+.upload-container .esri-button:enabled:hover {
+  border: none;
+  background-color: #7c8921;
+  color: white;
 }
 
 div.upload-container div.wfs-features-list label.field input[type='checkbox'] {
@@ -646,12 +657,32 @@ div.upload-container div.wfs-features-list label.field input[type='checkbox'] {
   vertical-align: middle;
 }
 
+div.upload-container
+  div.wfs-features-list
+  label.field
+  input[type='checkbox']:checked {
+  border-color: #a0b128;
+  background-color: #a0b128;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M6.173 12.927L1.24 8l1.414-1.414 3.52 3.52 7.07-7.07L14.658 4.45z'/%3E%3C/svg%3E");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 12px 12px;
+}
+
 .upload-container .esri-button:disabled:hover,
 .upload-container .esri-button[disabled]:hover {
   border: 1px solid #999999;
   background-color: #cccccc;
   color: #666666;
-  cursor: not-allowed;
+  cursor: default;
+}
+
+.upload-container .esri-button:disabled,
+.upload-container .esri-button[disabled] {
+  border: 1px solid #999999;
+  background-color: #cccccc;
+  color: #666666;
+  cursor: default;
 }
 
 .upload-panel {