fix(sdk): Fix map visualizations breaking (#43491)

enterprise/frontend/src/embedding-sdk/components/public/MetabaseProvider.tsx

@@ -9,6 +9,7 @@ import { store } from "embedding-sdk/store";
 import {
   setErrorComponent,
   setLoaderComponent,
+  setMetabaseClientUrl,
   setPlugins,
 } from "embedding-sdk/store/reducer";
 import type { SDKConfig } from "embedding-sdk/types";
@@ -54,6 +55,10 @@ const MetabaseProviderInternal = ({
     store.dispatch(setErrorComponent(config.errorComponent ?? null));
   }, [config.errorComponent]);
 
+  useEffect(() => {
+    store.dispatch(setMetabaseClientUrl(config.metabaseInstanceUrl));
+  }, [config.metabaseInstanceUrl]);
+
   return (
     <Provider store={store}>
       <EmotionCacheProvider>

enterprise/frontend/src/embedding-sdk/store/reducer.ts

@@ -12,10 +12,14 @@ import { createAsyncThunk } from "metabase/lib/redux";
 import { getSessionTokenState } from "./selectors";
 
 const SET_LOGIN_STATUS = "sdk/SET_LOGIN_STATUS";
+const SET_METABASE_CLIENT_URL = "sdk/SET_METABASE_CLIENT_URL";
 const SET_LOADER_COMPONENT = "sdk/SET_LOADER_COMPONENT";
 const SET_ERROR_COMPONENT = "sdk/SET_ERROR_COMPONENT";
 
 export const setLoginStatus = createAction<LoginStatus>(SET_LOGIN_STATUS);
+export const setMetabaseClientUrl = createAction<string>(
+  SET_METABASE_CLIENT_URL,
+);
 export const setLoaderComponent = createAction<null | (() => JSX.Element)>(
   SET_LOADER_COMPONENT,
 );
@@ -57,6 +61,7 @@ const SET_PLUGINS = "sdk/SET_PLUGINS";
 export const setPlugins = createAction<SdkPluginsConfig | null>(SET_PLUGINS);
 
 const initialState: SdkState = {
+  metabaseInstanceUrl: "",
   token: {
     token: null,
     loading: false,
@@ -114,4 +119,9 @@ export const sdk = createReducer(initialState, builder => {
     ...state,
     errorComponent: action.payload,
   }));
+
+  builder.addCase(setMetabaseClientUrl, (state, action) => ({
+    ...state,
+    metabaseInstanceUrl: action.payload,
+  }));
 });

enterprise/frontend/src/embedding-sdk/store/selectors.ts

@@ -17,3 +17,6 @@ export const getLoaderComponent = (state: SdkStoreState) =>
 
 export const getErrorComponent = (state: SdkStoreState) =>
   state.sdk.errorComponent;
+
+export const getMetabaseInstanceUrl = (state: SdkStoreState) =>
+  state.sdk?.metabaseInstanceUrl;

enterprise/frontend/src/embedding-sdk/store/types.ts

@@ -5,6 +5,7 @@ import type {
 } from "@reduxjs/toolkit";
 import type { JSX } from "react";
 
+import type { SDKConfig } from "embedding-sdk";
 import type { SdkPluginsConfig } from "embedding-sdk/lib/plugins";
 import type { State } from "metabase-types/store";
 
@@ -44,6 +45,7 @@ export type LoginStatus =
 export type SdkDispatch = ThunkDispatch<SdkStoreState, void, AnyAction>;
 
 export type SdkState = {
+  metabaseInstanceUrl: SDKConfig["metabaseInstanceUrl"];
   token: EmbeddingSessionTokenState;
   loginStatus: LoginStatus;
   plugins: null | SdkPluginsConfig;

enterprise/frontend/src/embedding-sdk/test/mocks/state.ts

@@ -27,6 +27,7 @@ export const createMockSdkState = ({
   ...opts
 }: Partial<SdkState> = {}): SdkState => {
   return {
+    metabaseInstanceUrl: "",
     loginStatus: createMockLoginStatusState(),
     token: createMockTokenState(),
     plugins: {},

frontend/src/metabase/visualizations/components/ChoroplethMap.jsx

@@ -3,14 +3,17 @@ import cx from "classnames";
 import Color from "color";
 import d3 from "d3";
 import { Component } from "react";
+import { connect } from "react-redux";
 import ss from "simple-statistics";
 import { t } from "ttag";
 import _ from "underscore";
 
+import { getMetabaseInstanceUrl } from "embedding-sdk/store/selectors";
 import LoadingSpinner from "metabase/components/LoadingSpinner";
 import CS from "metabase/css/core/index.css";
 import { formatValue } from "metabase/lib/formatting";
 import MetabaseSettings from "metabase/lib/settings";
+import { getIsEmbeddingSdk } from "metabase/selectors/embed";
 import { MinColumnsError } from "metabase/visualizations/lib/errors";
 import {
   computeMinimalBounds,
@@ -99,7 +102,24 @@ function shouldUseCompactFormatting(groups, formatMetric) {
   return averageLength > AVERAGE_LENGTH_CUTOFF;
 }
 
-export default class ChoroplethMap extends Component {
+const mapStateToProps = state => ({
+  isSdk: getIsEmbeddingSdk(state),
+  sdkMetabaseInstanceUrl: getMetabaseInstanceUrl(state),
+});
+
+const connector = connect(mapStateToProps, null);
+
+function getMapUrl(details, props) {
+  if (details.builtin) {
+    if (props?.isSdk && props?.sdkMetabaseInstanceUrl) {
+      return new URL(details.url, props.sdkMetabaseInstanceUrl).href;
+    }
+    return details.url;
+  }
+  return "api/geojson/" + props.settings["map.region"];
+}
+
+class ChoroplethMapInner extends Component {
   static propTypes = {};
 
   static minSize = getMinSize("map");
@@ -139,13 +159,10 @@ export default class ChoroplethMap extends Component {
 
   UNSAFE_componentWillReceiveProps(nextProps) {
     const details = this._getDetails(nextProps);
+
     if (details) {
-      let geoJsonPath;
-      if (details.builtin) {
-        geoJsonPath = details.url;
-      } else {
-        geoJsonPath = "api/geojson/" + nextProps.settings["map.region"];
-      }
+      const geoJsonPath = getMapUrl(details, nextProps);
+
       if (this.state.geoJsonPath !== geoJsonPath) {
         this.setState({
           geoJson: null,
@@ -386,3 +403,5 @@ export default class ChoroplethMap extends Component {
     );
   }
 }
+
+export default connector(ChoroplethMapInner);