fix(sdk): handle relative urls for metabaseInstance in loading maps (#50135) (#50190)

* fix(sdk): handle relative urls for metabaseInstance in loading maps

* addTrailingSlash  -> ensureTrailingSlash



---------

Co-authored-by: Nicolò Pretto <info@npretto.com>
Co-authored-by: Mahatthana (Kelvin) Nomsawadi <me@bboykelvin.dev>

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

@@ -110,10 +110,19 @@ const mapStateToProps = state => ({
 
 const connector = connect(mapStateToProps, null);
 
-function getMapUrl(details, props) {
+const ensureTrailingSlash = url => (url.endsWith("/") ? url : url + "/");
+
+export function getMapUrl(details, props) {
   if (details.builtin) {
     if (props?.isSdk && props?.sdkMetabaseInstanceUrl) {
-      return new URL(details.url, props.sdkMetabaseInstanceUrl).href;
+      const baseUrl = new URL(
+        props.sdkMetabaseInstanceUrl,
+        window.location.origin,
+      ).href;
+
+      // if the second parameter ends with a slash, it will join them together
+      // new URL("/sub-path", "http://example.org/proxy/") => "http://example.org/proxy/sub-path"
+      return new URL(details.url, ensureTrailingSlash(baseUrl)).href;
     }
     return details.url;
   }

frontend/src/metabase/visualizations/components/ChoroplethMap.unit.spec.js

-import { getLegendTitles } from "metabase/visualizations/components/ChoroplethMap";
+import {
+  getLegendTitles,
+  getMapUrl,
+} from "metabase/visualizations/components/ChoroplethMap";
 
 describe("getLegendTitles", () => {
   it("should not format short values compactly", () => {
@@ -36,4 +39,41 @@ describe("getLegendTitles", () => {
 
     expect(titles).toEqual(["$1.0k - $1.2k", "$2.0k - $2.5k", "$11.0k +"]);
   });
+
+  describe("getMapUrl", () => {
+    describe("when using the embedding SDK", () => {
+      const setup = ({ sdkMetabaseInstanceUrl }) => {
+        return getMapUrl(
+          { builtin: true, url: "api/geojson/world.json" },
+          { isSdk: true, sdkMetabaseInstanceUrl },
+        );
+      };
+
+      it("should handle relative paths for `sdkMetabaseInstanceUrl`", () => {
+        const url = setup({ sdkMetabaseInstanceUrl: "/proxy-to-mb" });
+
+        expect(url).toBe("http://localhost/proxy-to-mb/api/geojson/world.json");
+      });
+
+      it("should handle root absolute paths for `sdkMetabaseInstanceUrl`", () => {
+        const url = setup({
+          sdkMetabaseInstanceUrl: "http://mb-instance.example.com",
+        });
+
+        expect(url).toBe(
+          "http://mb-instance.example.com/api/geojson/world.json",
+        );
+      });
+
+      it("should handle absolute paths (with subpaths) for `sdkMetabaseInstanceUrl`", () => {
+        const url = setup({
+          sdkMetabaseInstanceUrl: "http://mb-instance.example.com/sub-path",
+        });
+
+        expect(url).toBe(
+          "http://mb-instance.example.com/sub-path/api/geojson/world.json",
+        );
+      });
+    });
+  });
 });