From ec0881d789ce3385bd38ebddc6a26cd715b7ddba Mon Sep 17 00:00:00 2001
From: Igor Dykhta <igorDykhta@users.noreply.github.com>
Date: Tue, 10 Oct 2023 22:41:14 +0300
Subject: [PATCH] [fix] Fix react-map-gl mapbox api props (#2362)

Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com>
---
 babel-register.js                                 | 3 +++
 jest.setup.js                                     | 4 ++++
 src/components/src/map-container.tsx              | 8 ++++++--
 src/components/src/modals/add-map-style-modal.tsx | 5 +++--
 4 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/babel-register.js b/babel-register.js
index bed4b51948..5070d8ab42 100644
--- a/babel-register.js
+++ b/babel-register.js
@@ -44,6 +44,9 @@ require('@babel/polyfill');
 var path = require('path');
 var glob = require('glob');
 
+// Requiring mapbox-gl here prevents polyfilling errors during tests.
+require('mapbox-gl');
+
 // eslint-disable-next-line func-names
 process.argv.slice(2).forEach(function(arg) {
   // eslint-disable-next-line func-names
diff --git a/jest.setup.js b/jest.setup.js
index 084cb42993..a61e30567d 100644
--- a/jest.setup.js
+++ b/jest.setup.js
@@ -21,6 +21,10 @@
 import '@testing-library/jest-dom';
 import * as Utils from '@kepler.gl/utils';
 
+jest.mock('mapbox-gl/dist/mapbox-gl', () => ({
+  Map: () => ({})
+}));
+
 jest.mock('@kepler.gl/utils', () => ({
   ...jest.requireActual('@kepler.gl/utils'),
   hasPortableWidth: jest.fn(),
diff --git a/src/components/src/map-container.tsx b/src/components/src/map-container.tsx
index fcbcbb3929..cfad940dc9 100644
--- a/src/components/src/map-container.tsx
+++ b/src/components/src/map-container.tsx
@@ -979,8 +979,9 @@ export default function MapContainerFactory(
       const mapProps = {
         ...internalViewState,
         preserveDrawingBuffer: true,
-        mapboxApiAccessToken: currentStyle?.accessToken || mapboxApiAccessToken,
-        mapboxApiUrl,
+        mapboxAccessToken: currentStyle?.accessToken || mapboxApiAccessToken,
+        baseApiUrl: mapboxApiUrl,
+        mapLib: mapboxgl,
         transformRequest: this.props.transformRequest || transformRequest
       };
 
@@ -1065,6 +1066,9 @@ export default function MapContainerFactory(
               viewState={internalViewState}
               mapStyle={mapStyle.topMapStyle}
               style={MAP_STYLE.top}
+              mapboxAccessToken={mapProps.mapboxAccessToken}
+              baseApiUrl={mapProps.baseApiUrl}
+              mapLib={mapboxgl}
               {...topMapContainerProps}
             />
           ) : null}
diff --git a/src/components/src/modals/add-map-style-modal.tsx b/src/components/src/modals/add-map-style-modal.tsx
index e612a1b4f3..29a4f3cf60 100644
--- a/src/components/src/modals/add-map-style-modal.tsx
+++ b/src/components/src/modals/add-map-style-modal.tsx
@@ -175,8 +175,9 @@ function AddMapStyleModalFactory() {
       const mapboxApiAccessToken = inputStyle.accessToken || this.props.mapboxApiAccessToken;
       const mapProps = {
         ...mapState,
-        mapboxApiUrl,
-        mapboxApiAccessToken,
+        baseApiUrl: mapboxApiUrl,
+        mapboxAccessToken: mapboxApiAccessToken,
+        mapLib: mapboxgl,
         preserveDrawingBuffer: true,
         transformRequest
       };