Add firewall info block when connecting to a database on Metabase Cloud (#18671)

frontend/src/metabase/admin/databases/containers/DatabaseEditApp.unit.spec.js

@@ -45,6 +45,9 @@ function mockSettings({ cachingEnabled = false }) {
     if (key === "is-hosted?") {
       return false;
     }
+    if (key === "cloud-gateway-ips") {
+      return [];
+    }
     return original(key);
   });
 }

frontend/src/metabase/components/form/FormWidget.jsx

@@ -3,6 +3,7 @@ import React from "react";
 
 import { PLUGIN_FORM_WIDGETS } from "metabase/plugins";
 
+import FormEmptyWidget from "./widgets/FormEmptyWidget";
 import FormInputWidget from "./widgets/FormInputWidget";
 import FormEmailWidget from "./widgets/FormEmailWidget";
 import FormTextAreaWidget from "./widgets/FormTextAreaWidget";
@@ -18,6 +19,7 @@ import FormHiddenWidget from "./widgets/FormHiddenWidget";
 import FormTextFileWidget from "./widgets/FormTextFileWidget";
 
 const WIDGETS = {
+  empty: FormEmptyWidget,
   input: FormInputWidget,
   email: FormEmailWidget,
   text: FormTextAreaWidget,

frontend/src/metabase/components/form/widgets/FormEmptyWidget.jsx

+const FormEmptyWidget = () => null;
+
+export default FormEmptyWidget;

frontend/src/metabase/entities/databases/forms.js

@@ -2,11 +2,12 @@ import React from "react";
 import { t, jt } from "ttag";
 
 import MetabaseSettings from "metabase/lib/settings";
+import { getEngineSupportsFirewall } from "metabase/lib/engine";
 import ExternalLink from "metabase/components/ExternalLink";
 import { PLUGIN_CACHING } from "metabase/plugins";
 import getFieldsForBigQuery from "./big-query-fields";
-import getFieldsForMongo from "./mongo-fields";
 
+import getFieldsForMongo from "./mongo-fields";
 import MetadataSyncScheduleWidget from "metabase/admin/databases/components/widgets/MetadataSyncScheduleWidget";
 import CacheFieldValuesScheduleWidget from "metabase/admin/databases/components/widgets/CacheFieldValuesScheduleWidget";
 
@@ -377,6 +378,19 @@ const forms = {
             t`When should Metabase automatically scan and cache field values?`,
           hidden: !engine || !details["let-user-control-scheduling"],
         },
+        {
+          name: "cloud.firewall_connection",
+          type: "empty",
+          title: t`Connecting from behind a firewall`,
+          description: t`In order to make sure Metabase can access your database,
+              configure your firewall to allow connections from these IP addresses:
+              ${MetabaseSettings.cloudGatewayIps().join(", ")}.`,
+          hidden:
+            !engine ||
+            !getEngineSupportsFirewall(engine) ||
+            !MetabaseSettings.isHosted() ||
+            !MetabaseSettings.cloudGatewayIps().length,
+        },
       ].filter(Boolean),
     normalize: function(database) {
       if (!database.details["let-user-control-scheduling"]) {

frontend/src/metabase/lib/engine.js

@@ -32,6 +32,10 @@ export function getEngineNativeRequiresTable(engine) {
   return engine === "mongo";
 }
 
+export function getEngineSupportsFirewall(engine) {
+  return engine !== "googleanalytics";
+}
+
 export function formatJsonQuery(query, engine) {
   if (engine === "googleanalytics") {
     return formatGAQuery(query);

frontend/src/metabase/lib/settings.ts

@@ -81,7 +81,8 @@ export type SettingName =
   | "version-info-last-checked"
   | "version-info"
   | "version"
-  | "subscription-allowed-domains";
+  | "subscription-allowed-domains"
+  | "cloud-gateway-ips";
 
 type SettingsMap = Record<SettingName, any>; // provides access to Metabase application settings
 
@@ -143,10 +144,14 @@ class Settings {
     return this.get("email-configured?");
   }
 
-  isHosted() {
+  isHosted(): boolean {
     return this.get("is-hosted?");
   }
 
+  cloudGatewayIps(): string[] {
+    return this.get("cloud-gateway-ips") || [];
+  }
+
   googleAuthEnabled() {
     return this.get("google-auth-client-id") != null;
   }