[fix] fixes for style editor preview and error (#2919)

- fix style preview 
- take into account basemap library switching in add-map-style-modal
- trigger new Map components with url, token or library change in order to clear cache of loaded styles. Otherwise 'style.load' events aren't triggered when input changes from correct > wrong > correct config.

Signed-off-by: Ihor Dykhta <[email protected]>

Author: igorDykhta

src/components/src/modal-container.tsx

@@ -466,7 +466,10 @@ export default function ModalContainerFactory(
               onConfirm: this._onAddCustomMapStyle,
               confirmButton: {
                 large: true,
-                disabled: !mapStyle.inputStyle.url || !mapStyle.inputStyle.label,
+                disabled:
+                  mapStyle.inputStyle.error ||
+                  !mapStyle.inputStyle.url ||
+                  !mapStyle.inputStyle.label,
                 children: 'modal.button.addStyle'
               }
             };

src/components/src/modals/add-map-style-modal.tsx

@@ -46,6 +46,7 @@ const PreviewMap = styled.div`
 
   .preview-title.error {
     color: ${props => props.theme.errorColor};
+    max-width: 250px;
   }
 
   ${media.portable`
@@ -89,6 +90,10 @@ const InlineLink = styled.a`
   }
 `;
 
+const nop = () => {
+  return;
+};
+
 interface AddMapStyleModalProps {
   inputMapStyle: ActionHandler<typeof inputMapStyle>;
   inputStyle: InputStyle;
@@ -131,11 +136,20 @@ function AddMapStyleModalFactory() {
       return null;
     }
 
-    mapRef: MapRef | null | undefined;
-    _map: MapboxMap | undefined;
+    _map: MapboxMap | undefined | null;
+
+    _setMapRef = (mapRef: MapRef) => {
+      // Handle change of the basemap library
+      if (this._map && mapRef) {
+        const map = mapRef.getMap();
+        if (map && this._map !== map) {
+          this._map.off('style.load', nop);
+          this._map.off('error', nop);
+          this._map = null;
+        }
+      }
 
-    componentDidUpdate() {
-      const map = this.mapRef && this.mapRef.getMap();
+      const map = mapRef && mapRef.getMap();
       if (map && this._map !== map) {
         this._map = map;
 
@@ -148,7 +162,7 @@ function AddMapStyleModalFactory() {
           this.loadMapStyleError();
         });
       }
-    }
+    };
 
     loadMapStyleJson = style => {
       this.props.loadCustomMapStyle({style, error: false});
@@ -280,16 +294,15 @@ function AddMapStyleModalFactory() {
                   : (inputStyle.style && inputStyle.style.name) || ''}
               </div>
               <StyledPreviewImage className="preview-image">
+                {/** Note, we need the Map to render with errored params to get style.error messages */}
                 {!inputStyle.isValid ? (
                   <div className="preview-image-spinner" />
                 ) : (
                   <StyledMapContainer>
                     <Map
                       {...mapProps}
-                      ref={el => {
-                        this.mapRef = el;
-                      }}
-                      key={this.state.reRenderKey}
+                      ref={this._setMapRef}
+                      key={`${baseMapLibraryName}-${this.state.reRenderKey}-${inputStyle.url}-${mapboxApiAccessToken}`}
                       style={{
                         width: MapW,
                         height: MapH

src/reducers/src/map-style-updaters.ts

@@ -676,7 +676,7 @@ export const loadCustomMapStyleUpdater = (
         }
       : {}),
     ...(icon ? {icon} : {}),
-    ...(error ? {error} : {})
+    ...(error !== undefined ? {error} : {})
   }
 });
 
@@ -697,7 +697,6 @@ export const inputMapStyleUpdater = (
   // differentiate between either a url to hosted style json that needs an icon url,
   // or an icon already available client-side as a data uri
   const isUpdatedIconDataUri = updated.icon?.startsWith('data:image');
-  const isValid = Boolean(updated.uploadedFile);
   const isMapboxStyleUrl =
     updated.url?.startsWith('mapbox://') || updated.url?.includes('mapbox.com');
 
@@ -716,7 +715,7 @@ export const inputMapStyleUpdater = (
     ...state,
     inputStyle: {
       ...updated,
-      isValid,
+      isValid: true,
       icon
     }
   };

test/node/reducers/map-style-test.js

@@ -839,7 +839,7 @@ test('#mapStyleReducer -> EDIT_CUSTOM_MAP_STYLE', t => {
 
   t.deepEqual(
     nextState.inputStyle,
-    {...inputMapStyleToEdit, error: false, isValid: false, style: null, uploadedFile: null},
+    {...inputMapStyleToEdit, error: false, isValid: true, style: null, uploadedFile: null},
     'should set the inputStyle'
   );