show correct settings UI when MB_ENABLE_EMBEDDING env var specified (#22304)

frontend/src/metabase/admin/settings/components/SettingsSetting.jsx

@@ -60,6 +60,13 @@ export default class SettingsSetting extends Component {
       );
       Widget = SettingInput;
     }
+
+    const widgetProps = {
+      ...setting.getProps?.(setting),
+      ...setting.props,
+      ...updatePlaceholderForEnvironmentVars(this.props),
+    };
+
     return (
       // TODO - this formatting needs to be moved outside this component
       <li className="m2 mb4">
@@ -67,11 +74,7 @@ export default class SettingsSetting extends Component {
           <SettingHeader id={settingId} setting={setting} />
         )}
         <div className="flex">
-          <Widget
-            id={settingId}
-            {...(setting.props || {})}
-            {...updatePlaceholderForEnvironmentVars(this.props)}
-          />
+          <Widget id={settingId} {...widgetProps} />
         </div>
         {errorMessage && (
           <div className="text-error text-bold pt1">{errorMessage}</div>

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

@@ -3,8 +3,10 @@ import React from "react";
 import * as MetabaseAnalytics from "metabase/lib/analytics";
 import { t } from "ttag";
 import ExternalLink from "metabase/core/components/ExternalLink";
+import Tooltip from "metabase/components/Tooltip";
+import Button from "metabase/core/components/Button";
 
-const EmbeddingLegalese = ({ onChange }) => (
+const EmbeddingLegalese = ({ setting, onChange }) => (
   <div className="bordered rounded text-measure p4">
     <h3 className="text-brand">{t`Using embedding`}</h3>
     <p className="text-medium" style={{ lineHeight: 1.48 }}>
@@ -21,18 +23,23 @@ const EmbeddingLegalese = ({ onChange }) => (
       {t`In plain English, when you embed charts or dashboards from Metabase in your own application, that application isn't subject to the Affero General Public License that covers the rest of Metabase, provided you keep the Metabase logo and the "Powered by Metabase" visible on those embeds. You should, however, read the license text linked above as that is the actual license that you will be agreeing to by enabling this feature.`}
     </p>
     <div className="flex layout-centered mt4">
-      <button
-        className="Button Button--primary"
-        onClick={() => {
-          MetabaseAnalytics.trackStructEvent(
-            "Admin Embed Settings",
-            "Embedding Enable Click",
-          );
-          onChange(true);
-        }}
+      <Tooltip
+        tooltip={setting.placeholder}
+        isEnabled={setting.is_env_setting}
+        maxWidth={300}
       >
-        {t`Enable`}
-      </button>
+        <Button
+          primary
+          disabled={setting.is_env_setting}
+          onClick={() => {
+            MetabaseAnalytics.trackStructEvent(
+              "Admin Embed Settings",
+              "Embedding Enable Click",
+            );
+            onChange(true);
+          }}
+        >{t`Enable`}</Button>
+      </Tooltip>
     </div>
   </div>
 );

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

@@ -2,13 +2,16 @@
 import React from "react";
 import { t } from "ttag";
 import Toggle from "metabase/core/components/Toggle";
+import Tooltip from "metabase/components/Tooltip";
 
-const SettingToggle = ({ setting, onChange, disabled }) => {
+const SettingToggle = ({ setting, onChange, disabled, tooltip }) => {
   const value = setting.value == null ? setting.default : setting.value;
   const on = value === true || value === "true";
   return (
     <div className="flex align-center pt1">
-      <Toggle value={on} onChange={!disabled ? () => onChange(!on) : null} />
+      <Tooltip tooltip={tooltip} isEnabled={!!tooltip}>
+        <Toggle value={on} onChange={!disabled ? () => onChange(!on) : null} />
+      </Tooltip>
       <span className="text-bold mx1">{on ? t`Enabled` : t`Disabled`}</span>
     </div>
   );

frontend/src/metabase/admin/settings/containers/SettingsEditorApp.jsx

@@ -21,6 +21,7 @@ import cx from "classnames";
 import {
   getSettings,
   getSettingValues,
+  getDerivedSettingValues,
   getSections,
   getActiveSection,
   getActiveSectionName,
@@ -32,6 +33,7 @@ const mapStateToProps = (state, props) => {
   return {
     settings: getSettings(state, props),
     settingValues: getSettingValues(state, props),
+    derivedSettingValues: getDerivedSettingValues(state, props),
     sections: getSections(state, props),
     activeSection: getActiveSection(state, props),
     activeSectionName: getActiveSectionName(state, props),
@@ -136,7 +138,12 @@ export default class SettingsEditorApp extends Component {
   };
 
   renderSettingsPane() {
-    const { activeSection, settings, settingValues } = this.props;
+    const {
+      activeSection,
+      settings,
+      settingValues,
+      derivedSettingValues,
+    } = this.props;
     const isLoading = settings.length === 0;
 
     if (isLoading) {
@@ -160,7 +167,9 @@ export default class SettingsEditorApp extends Component {
         <ul>
           {activeSection.settings
             .filter(setting =>
-              setting.getHidden ? !setting.getHidden(settingValues) : true,
+              setting.getHidden
+                ? !setting.getHidden(settingValues, derivedSettingValues)
+                : true,
             )
             .map((setting, index) => (
               <SettingsSetting

frontend/src/metabase/admin/settings/selectors.js

@@ -309,7 +309,7 @@ const SECTIONS = updateSectionsWithPlugins({
         key: "enable-embedding",
         description: null,
         widget: EmbeddingLegalese,
-        getHidden: settings => settings["enable-embedding"],
+        getHidden: (_, derivedSettings) => derivedSettings["enable-embedding"],
         onChanged: async (
           oldValue,
           newValue,
@@ -331,35 +331,47 @@ const SECTIONS = updateSectionsWithPlugins({
         key: "enable-embedding",
         display_name: t`Enable Embedding Metabase in other Applications`,
         type: "boolean",
-        getHidden: settings => !settings["enable-embedding"],
+        showActualValue: true,
+        getProps: setting => {
+          if (setting.is_env_setting) {
+            return {
+              tooltip: setting.placeholder,
+              disabled: true,
+            };
+          }
+          return null;
+        },
+        getHidden: (_, derivedSettings) => !derivedSettings["enable-embedding"],
       },
       {
         widget: EmbeddingCustomizationInfo,
-        getHidden: settings =>
-          !settings["enable-embedding"] || MetabaseSettings.isEnterprise(),
+        getHidden: (_, derivedSettings) =>
+          !derivedSettings["enable-embedding"] ||
+          MetabaseSettings.isEnterprise(),
       },
       {
         key: "embedding-secret-key",
         display_name: t`Embedding secret key`,
         widget: SecretKeyWidget,
-        getHidden: settings => !settings["enable-embedding"],
+        getHidden: (_, derivedSettings) => !derivedSettings["enable-embedding"],
       },
       {
         key: "-embedded-dashboards",
         display_name: t`Embedded Dashboards`,
         widget: EmbeddedDashboardListing,
-        getHidden: settings => !settings["enable-embedding"],
+        getHidden: (_, derivedSettings) => !derivedSettings["enable-embedding"],
       },
       {
         key: "-embedded-questions",
         display_name: t`Embedded Questions`,
         widget: EmbeddedQuestionListing,
-        getHidden: settings => !settings["enable-embedding"],
+        getHidden: (_, derivedSettings) => !derivedSettings["enable-embedding"],
       },
       {
         widget: PremiumEmbeddingLinkWidget,
-        getHidden: settings =>
-          !settings["enable-embedding"] || MetabaseSettings.isEnterprise(),
+        getHidden: (_, derivedSettings) =>
+          !derivedSettings["enable-embedding"] ||
+          MetabaseSettings.isEnterprise(),
       },
     ],
   },
@@ -455,6 +467,11 @@ export const getSettings = createSelector(
     ),
 );
 
+// getSettings selector returns settings for admin setting page and values specified by
+// environment variables set to "null". Actual applied setting values are coming from
+// /api/session/properties API handler and getDerivedSettingValues returns them.
+export const getDerivedSettingValues = state => state.settings?.values ?? {};
+
 export const getSettingValues = createSelector(getSettings, settings => {
   const settingValues = {};
   for (const setting of settings) {
@@ -469,8 +486,9 @@ export const getNewVersionAvailable = createSelector(getSettings, settings => {
 
 export const getSections = createSelector(
   getSettings,
+  getDerivedSettingValues,
   getUserIsAdmin,
-  (settings, isAdmin) => {
+  (settings, derivedSettingValues, isAdmin) => {
     if (!settings || _.isEmpty(settings)) {
       return {};
     }
@@ -485,11 +503,16 @@ export const getSections = createSelector(
       const settings = section.settings.map(function(setting) {
         const apiSetting =
           settingsByKey[setting.key] && settingsByKey[setting.key][0];
+
         if (apiSetting) {
+          const value = setting.showActualValue
+            ? derivedSettingValues[setting.key]
+            : apiSetting.value;
           return {
             placeholder: apiSetting.default,
             ...apiSetting,
             ...setting,
+            value,
           };
         } else {
           return setting;