Hit new API for reading GeoJSON data in custom map settings form (#16610)

frontend/src/metabase/admin/settings/components/widgets/CustomGeoJSONWidget.jsx

@@ -82,7 +82,6 @@ export default class CustomGeoJSONWidget extends Component {
     await this._saveMap(map.id, null);
   };
 
-  // This is a bit of a hack, but the /api/geojson endpoint only works if the map is saved in the custom-geojson setting
   _loadGeoJson = async () => {
     try {
       const { map } = this.state;
@@ -91,8 +90,9 @@ export default class CustomGeoJSONWidget extends Component {
         geoJsonLoading: true,
         geoJsonError: null,
       });
-      await this._saveMap(map.id, map);
-      const geoJson = await GeoJSONApi.get({ id: map.id });
+      const geoJson = await GeoJSONApi.load({
+        url: encodeURIComponent(map.url),
+      });
       this.setState({
         geoJson: geoJson,
         geoJsonLoading: false,

frontend/src/metabase/services.js

@@ -412,6 +412,7 @@ export const UtilApi = {
 };
 
 export const GeoJSONApi = {
+  load: GET("/api/geojson"),
   get: GET("/api/geojson/:id"),
 };
 

frontend/test/metabase/scenarios/admin/settings/maps.cy.spec.js

+import { restore } from "__support__/e2e/cypress";
+
+describe("scenarios > admin > settings > map settings", () => {
+  beforeEach(() => {
+    restore();
+    cy.signInAsAdmin();
+  });
+
+  it("should be able to load and save a custom map", () => {
+    cy.visit("/admin/settings/maps");
+    cy.findByText("Add a map").click();
+    cy.findByPlaceholderText("e.g. United Kingdom, Brazil, Mars").type(
+      "Test Map",
+    );
+    cy.findByPlaceholderText(
+      "Like https://my-mb-server.com/maps/my-map.json",
+    ).type(
+      "https://raw.githubusercontent.com/metabase/metabase/master/resources/frontend_client/app/assets/geojson/world.json",
+    );
+    cy.findByText("Load").click();
+    cy.wait(2000)
+      .findAllByText("Select…")
+      .first()
+      .click();
+    cy.findByText("NAME").click();
+    cy.findAllByText("Select…")
+      .last()
+      .click();
+    cy.findAllByText("NAME")
+      .last()
+      .click();
+    cy.findByText("Add map").click();
+    cy.wait(3000)
+      .findByText("NAME")
+      .should("not.exist");
+    cy.findByText("Test Map");
+  });
+
+  it("should be able to load a custom map even if a name has not been added yet (#14635)", () => {
+    cy.intercept("GET", "/api/geojson").as("load");
+    cy.visit("/admin/settings/maps");
+    cy.findByText("Add a map").click();
+    cy.findByPlaceholderText(
+      "Like https://my-mb-server.com/maps/my-map.json",
+    ).type(
+      "https://raw.githubusercontent.com/metabase/metabase/master/resources/frontend_client/app/assets/geojson/world.json",
+    );
+    cy.findByText("Load").click();
+    cy.wait("@load").then(interception => {
+      expect(interception.response.statusCode).to.eq(200);
+    });
+  });
+
+  it("should show an informative error when adding an invalid URL", () => {
+    cy.visit("/admin/settings/maps");
+    cy.findByText("Add a map").click();
+    cy.findByPlaceholderText(
+      "Like https://my-mb-server.com/maps/my-map.json",
+    ).type("bad-url");
+    cy.findByText("Load").click();
+    cy.findByText(
+      "Invalid GeoJSON file location: must either start with http:// or https:// or be a relative path to a file on the classpath. " +
+        "URLs referring to hosts that supply internal hosting metadata are prohibited.",
+    );
+  });
+});