MetaStore integration (#6315)

* MetaStore integration

* Fix lint error

* restructure embedding levels

* Rename updateSetting in setting widgets to onChange, add onChangeSetting

* embed flow images / spacing

* lint fix

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

@@ -195,7 +195,7 @@ export default class SettingsEmailForm extends Component {
                 <SettingsSetting
                     key={element.key}
                     setting={{ ...element, value }}
-                    updateSetting={this.handleChangeEvent.bind(this, element)}
+                    onChange={this.handleChangeEvent.bind(this, element)}
                     errorMessage={errorMessage}
                 />
             );

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

@@ -186,7 +186,7 @@ export default class SettingsLdapForm extends Component {
                     <SettingsSetting
                         key={element.key}
                         setting={{ ...element, value }}
-                        updateSetting={this.handleChangeEvent.bind(this, element)}
+                        onChange={this.handleChangeEvent.bind(this, element)}
                         mappings={formData['ldap-group-mappings']}
                         updateMappings={this.handleChangeEvent.bind(this, { key: 'ldap-group-mappings' })}
                         errorMessage={errorMessage}
@@ -198,7 +198,7 @@ export default class SettingsLdapForm extends Component {
                 <SettingsSetting
                     key={element.key}
                     setting={{ ...element, value }}
-                    updateSetting={this.handleChangeEvent.bind(this, element)}
+                    onChange={this.handleChangeEvent.bind(this, element)}
                     errorMessage={errorMessage}
                 />
             );

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

@@ -22,17 +22,18 @@ const SETTING_WIDGET_MAP = {
 
 const updatePlaceholderForEnvironmentVars = (props) => {
     if (props && props.setting && props.setting.is_env_setting){
-        return assocIn(props, ["setting", "placeholder"], "Using " + props.setting.env_name) 
+        return assocIn(props, ["setting", "placeholder"], "Using " + props.setting.env_name)
     }
     return props
 }
 
 export default class SettingsSetting extends Component {
-    
+
 
     static propTypes = {
         setting: PropTypes.object.isRequired,
-        updateSetting: PropTypes.func.isRequired,
+        onChange: PropTypes.func.isRequired,
+        onChangeSetting: PropTypes.func,
         autoFocus: PropTypes.bool,
         disabled: PropTypes.bool,
     };
@@ -50,7 +51,7 @@ export default class SettingsSetting extends Component {
                     <SettingHeader setting={setting} />
                 }
                 <div className="flex">
-                    <Widget {...updatePlaceholderForEnvironmentVars(this.props)} 
+                    <Widget {...updatePlaceholderForEnvironmentVars(this.props)}
                     />
                 </div>
                 { errorMessage &&

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

@@ -166,7 +166,7 @@ export default class SettingsSlackForm extends Component {
                     <SettingsSetting
                         key={element.key}
                         setting={{ ...element, value }}
-                        updateSetting={(value) => this.handleChangeEvent(element, value)}
+                        onChange={(value) => this.handleChangeEvent(element, value)}
                         errorMessage={errorMessage}
                         fireOnChange
                     />
@@ -176,7 +176,7 @@ export default class SettingsSlackForm extends Component {
                     <SettingsSetting
                         key={element.key}
                         setting={{ ...element, value }}
-                        updateSetting={(value) => this.handleChangeEvent(element, value)}
+                        onChange={(value) => this.handleChangeEvent(element, value)}
                         errorMessage={errorMessage}
                         disabled={!this.state.formData["slack-token"]}
                     />

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

@@ -103,7 +103,7 @@ export default class SettingsUpdatesForm extends Component {
             <SettingsSetting
                 key={setting.key}
                 setting={setting}
-                updateSetting={(value) => updateSetting(setting, value)}
+                onChange={(value) => updateSetting(setting, value)}
                 autoFocus={index === 0}
             />
         );

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

@@ -25,7 +25,7 @@ const SettingsXrayForm = ({ settings, elements, updateSetting }) => {
                 <SettingsSetting
                     key={enabled.key}
                     setting={enabled}
-                    updateSetting={(value) => updateSetting(enabled, value)}
+                    onChange={(value) => updateSetting(enabled, value)}
                 />
             </ol>
 

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

@@ -33,7 +33,6 @@ export default class CustomGeoJSONWidget extends Component {
 
     static propTypes = {
         setting: PropTypes.object.isRequired,
-        updateSetting: PropTypes.func.isRequired,
         reloadSettings: PropTypes.func.isRequired
     };
     static defaultProps = {};

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

 import React from 'react';
 import MetabaseAnalytics from 'metabase/lib/analytics';
 
-const EmbeddingLegalese = ({ updateSetting }) =>
+const EmbeddingLegalese = ({ onChange }) =>
     <div className="bordered rounded text-measure p4">
         <h3 className="text-brand">Using embedding</h3>
         <p className="text-grey-4" style={{ lineHeight: 1.48 }}>
             By enabling embedding you're agreeing to the embedding license located at <a className="link"  href="http://www.metabase.com/license/embedding" target="_blank">metabase.com/license/embedding</a>.
         </p>
-        <p className="text-grey-4" style={{ lineHeight: 1.48 }}>            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 className="text-grey-4" style={{ lineHeight: 1.48 }}>
+            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>
-        {/* TODO: contact form link */}
-        {/* <p className="text-grey-4" style={{ lineHeight: 1.48 }}>
-            If you want to hide the Metabase logo inside your own application we'd love to get in touch.
-        </p> */}
         <div className="flex layout-centered mt4">
             <button
                 className="Button Button--primary"
                 onClick={() => {
                     MetabaseAnalytics.trackEvent("Admin Embed Settings", "Embedding Enable Click");
-                    updateSetting(true);
+                    onChange(true);
                 }}
             >
                 Enable

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

+import React, { Component } from 'react'
+import ReactRetinaImage from 'react-retina-image'
+
+import SettingsInput from "./SettingInput"
+
+const PREMIUM_EMBEDDING_STORE_URL = 'https://store.metabase.com/product/embedding'
+const PREMIUM_EMBEDDING_SETTING_KEY = 'premium-embedding-token'
+
+const PremiumTokenInput = ({ token, onChangeSetting }) =>
+    <div className="mb3">
+        <h3 className="mb1">
+            { token
+                ? `Premium embedding enabled`
+                : `Enter the token you bought from the Metabase Store`
+            }
+        </h3>
+        <SettingsInput
+            onChange={(value) =>
+                onChangeSetting(PREMIUM_EMBEDDING_SETTING_KEY, value)
+            }
+            setting={{ value: token }}
+            autoFocus={!token}
+        />
+    </div>
+
+const PremiumExplanation = ({ showEnterScreen }) =>
+    <div>
+        <h2>Premium embedding</h2>
+        <p className="mt1">Premium embedding lets you disable "Powered by Metabase" on your embeded dashboards and questions.</p>
+        <div className="mt2 mb3">
+            <a className="link mx1" href={PREMIUM_EMBEDDING_STORE_URL} target="_blank">
+                Buy a token
+            </a>
+            <a className="link mx1" onClick={showEnterScreen}>
+                Enter a token
+            </a>
+        </div>
+    </div>
+
+class PremiumEmbedding extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            showEnterScreen: props.token
+        }
+    }
+    render () {
+        const { token, onChangeSetting } = this.props
+        const { showEnterScreen } = this.state
+
+        return (
+            <div className="text-centered text-paragraph">
+                { showEnterScreen
+                    ? (
+                        <PremiumTokenInput
+                            onChangeSetting={onChangeSetting}
+                            token={token}
+                        />
+                    )
+                    : (
+                        <PremiumExplanation
+                            showEnterScreen={() =>
+                                this.setState({ showEnterScreen: true })
+                            }
+                        />
+                    )
+                }
+            </div>
+        )
+    }
+}
+
+class EmbeddingLevel extends Component {
+    render () {
+        const { onChangeSetting, settingValues } = this.props
+
+        const premiumToken = settingValues[PREMIUM_EMBEDDING_SETTING_KEY]
+
+        return (
+            <div className="bordered rounded full text-centered" style={{ maxWidth: 820 }}>
+                <ReactRetinaImage src={`app/assets/img/${ premiumToken ? 'premium_embed_added' : 'premium_embed'}.png`}/>
+                <div className="flex align-center justify-center">
+                    <PremiumEmbedding
+                        token={premiumToken}
+                        onChangeSetting={onChangeSetting}
+                    />
+                </div>
+            </div>
+        )
+    }
+}
+
+export default EmbeddingLevel

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

@@ -20,7 +20,7 @@ import SettingToggle from './SettingToggle';
 
 type Props = {
     setting: any,
-    updateSetting: (value: any) => void,
+    onChange: (value: any) => void,
     mappings: { [string]: number[] },
     updateMappings: (value: { [string]: number[] }) => void
 };

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

+import React, { Component } from "react";
+
+import MetabaseSettings from "metabase/lib/settings";
+
+import SettingInput from "./SettingInput.jsx";
+
+export default class PremiumEmbeddingWidget extends Component {
+    render() {
+        return (
+            <div>
+                <SettingInput {...this.props} />
+                <h3 className="mt4 mb4">
+                    Getting your very own premium embedding token
+                </h3>
+                <a href={MetabaseSettings.metastoreUrl()} target="_blank">
+                    Visit the MetaStore
+                </a>
+            </div>
+        );
+    }
+}

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

@@ -170,17 +170,21 @@ export const PublicLinksQuestionListing = () =>
     />;
 
 export const EmbeddedDashboardListing = () =>
-    <PublicLinksListing
-        load={DashboardApi.listEmbeddable}
-        getUrl={({ id }) => Urls.dashboard(id)}
-        type='Embedded Dashboard Listing'
-        noLinksMessage="No dashboards have been embedded yet."
-    />;
+    <div className="bordered rounded full" style={{ maxWidth: 820 }}>
+        <PublicLinksListing
+            load={DashboardApi.listEmbeddable}
+            getUrl={({ id }) => Urls.dashboard(id)}
+            type='Embedded Dashboard Listing'
+            noLinksMessage="No dashboards have been embedded yet."
+        />
+    </div>
 
 export const EmbeddedQuestionListing = () =>
-    <PublicLinksListing
-        load={CardApi.listEmbeddable}
-        getUrl={({ id }) => Urls.question(id)}
-        type='Embedded Card Listing'
-        noLinksMessage="No questions have been embedded yet."
-    />;
+    <div className="bordered rounded full" style={{ maxWidth: 820 }}>
+        <PublicLinksListing
+            load={CardApi.listEmbeddable}
+            getUrl={({ id }) => Urls.question(id)}
+            type='Embedded Card Listing'
+            noLinksMessage="No questions have been embedded yet."
+        />
+    </div>

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

@@ -9,7 +9,7 @@ import Confirm from "metabase/components/Confirm";
 import { UtilApi } from "metabase/services";
 
 type Props = {
-    updateSetting: (value: any) => void,
+    onChange: (value: any) => void,
     setting: {}
 };
 
@@ -17,15 +17,15 @@ export default class SecretKeyWidget extends Component {
     props: Props;
 
     _generateToken = async () => {
-        const { updateSetting } = this.props;
+        const { onChange } = this.props;
         const result = await UtilApi.random_token();
-        updateSetting(result.token);
+        onChange(result.token);
     }
 
     render() {
         const { setting } = this.props;
         return (
-            <div className="flex align-center">
+            <div className="p2 flex align-center full bordered rounded" style={{ maxWidth: 820 }}>
                 <SettingInput {...this.props} />
                 { setting.value ?
                     <Confirm

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

@@ -3,7 +3,7 @@ import React from "react";
 import Input from "metabase/components/Input.jsx";
 import cx from "classnames";
 
-const SettingInput = ({ setting, updateSetting, disabled, autoFocus, errorMessage, fireOnChange, type = "text" }) =>
+const SettingInput = ({ setting, onChange, disabled, autoFocus, errorMessage, fireOnChange, type = "text" }) =>
     <Input
         className={cx(" AdminInput bordered rounded h3", {
             "SettingsInput": type !== "password",
@@ -13,8 +13,8 @@ const SettingInput = ({ setting, updateSetting, disabled, autoFocus, errorMessag
         type={type}
         value={setting.value || ""}
         placeholder={setting.placeholder}
-        onChange={fireOnChange ? (e) => updateSetting(e.target.value) : null }
-        onBlurChange={!fireOnChange ? (e) => updateSetting(e.target.value) : null }
+        onChange={fireOnChange ? (e) => onChange(e.target.value) : null }
+        onBlurChange={!fireOnChange ? (e) => onChange(e.target.value) : null }
         autoFocus={autoFocus}
     />
 

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

@@ -3,11 +3,11 @@ import React from "react";
 import Radio from "metabase/components/Radio";
 import cx from "classnames";
 
-const SettingRadio = ({ setting, updateSetting, disabled }) =>
+const SettingRadio = ({ setting, onChange, disabled }) =>
     <Radio
         className={cx({ "disabled": disabled })}
         value={setting.value}
-        onChange={(value) => updateSetting(value)}
+        onChange={(value) => onChange(value)}
         options={Object.entries(setting.options).map(([value, name]) => ({ name, value }))}
     />
 

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

@@ -3,13 +3,13 @@ import React from "react";
 import Select from "metabase/components/Select.jsx";
 import _ from "underscore";
 
-const SettingSelect = ({ setting, updateSetting, disabled }) =>
+const SettingSelect = ({ setting, onChange, disabled }) =>
     <Select
         className="full-width"
         placeholder={setting.placeholder}
         value={_.findWhere(setting.options, { value: setting.value }) || setting.value}
         options={setting.options}
-        onChange={updateSetting}
+        onChange={onChange}
         optionNameFn={option => typeof option === "object" ? option.name : option }
         optionValueFn={option => typeof option === "object" ? option.value : option }
     />

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

@@ -2,12 +2,12 @@ import React from "react";
 
 import Toggle from "metabase/components/Toggle.jsx";
 
-const SettingToggle = ({ setting, updateSetting, disabled }) => {
+const SettingToggle = ({ setting, onChange, disabled }) => {
     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 ? () => updateSetting(!on) : null}/>
+            <Toggle value={on} onChange={!disabled ? () => onChange(!on) : null}/>
             <span className="text-bold mx1">{on ? "Enabled" : "Disabled"}</span>
         </div>
     );

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

@@ -66,7 +66,7 @@ export default class SettingsEditorApp extends Component {
     }
 
     updateSetting = async (setting, newValue) => {
-        const { settings, settingValues, updateSetting } = this.props;
+        const { settingValues, updateSetting } = this.props;
 
         this.layout.setSaving();
 
@@ -78,14 +78,7 @@ export default class SettingsEditorApp extends Component {
             await updateSetting(setting);
 
             if (setting.onChanged) {
-                await setting.onChanged(oldValue, newValue, settingValues, (key, value) => {
-                    let setting = _.findWhere(settings, { key });
-                    if (!setting) {
-                        throw new Error("Unknown setting " + key);
-                    }
-                    setting.value = value;
-                    return updateSetting(setting);
-                })
+                await setting.onChanged(oldValue, newValue, settingValues, this.handleChangeSetting)
             }
 
             this.layout.setSaved();
@@ -106,6 +99,15 @@ export default class SettingsEditorApp extends Component {
         }
     }
 
+    handleChangeSetting = (key, value) => {
+        const { settings, updateSetting } = this.props;
+        const setting = _.findWhere(settings, { key });
+        if (!setting) {
+            throw new Error("Unknown setting " + key);
+        }
+        return updateSetting({ ...setting, value });
+    }
+
     renderSettingsPane() {
         const { activeSection, settingValues } = this.props;
 
@@ -187,7 +189,8 @@ export default class SettingsEditorApp extends Component {
                         <SettingsSetting
                             key={setting.key}
                             setting={setting}
-                            updateSetting={this.updateSetting.bind(this, setting)}
+                            onChange={this.updateSetting.bind(this, setting)}
+                            onChangeSetting={this.handleChangeSetting}
                             reloadSettings={this.props.reloadSettings}
                             autoFocus={index === 0}
                             settingValues={settingValues}

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

@@ -12,6 +12,7 @@ import {
 } from "./components/widgets/PublicLinksListing.jsx";
 import SecretKeyWidget from "./components/widgets/SecretKeyWidget.jsx";
 import EmbeddingLegalese from "./components/widgets/EmbeddingLegalese";
+import EmbeddingLevel from "./components/widgets/EmbeddingLevel";
 import LdapGroupMappingsWidget from "./components/widgets/LdapGroupMappingsWidget";
 
 import { UtilApi } from "metabase/services";
@@ -310,19 +311,23 @@ const SECTIONS = [
                 description: null,
                 widget: EmbeddingLegalese,
                 getHidden: (settings) => settings["enable-embedding"],
-                onChanged: async (oldValue, newValue, settingsValues, onChange) => {
+                onChanged: async (oldValue, newValue, settingsValues, onChangeSetting) => {
+                    // Generate a secret key if none already exists
                     if (!oldValue && newValue && !settingsValues["embedding-secret-key"]) {
                         let result = await UtilApi.random_token();
-                        await onChange("embedding-secret-key", result.token);
+                        await onChangeSetting("embedding-secret-key", result.token);
                     }
                 }
-            },
-            {
+            }, {
                 key: "enable-embedding",
                 display_name: "Enable Embedding Metabase in other Applications",
                 type: "boolean",
                 getHidden: (settings) => !settings["enable-embedding"]
             },
+            {
+                widget: EmbeddingLevel,
+                getHidden: (settings) => !settings["enable-embedding"]
+            },
             {
                 key: "embedding-secret-key",
                 display_name: "Embedding secret key",
@@ -390,7 +395,19 @@ const SECTIONS = [
 
             }
         ]
+    },
+    /*
+    {
+        name: "Premium Embedding",
+        settings: [
+            {
+                key: "premium-embedding-token",
+                display_name: "Premium Embedding Token",
+                widget: PremiumEmbeddingWidget
+            }
+        ]
     }
+    */
 ];
 for (const section of SECTIONS) {
     section.slug = slugify(section.name);

frontend/src/metabase/lib/settings.js

@@ -55,6 +55,10 @@ const MetabaseSettings = {
         return mb_settings.ldap_configured;
     },
 
+    hideEmbedBranding: () => mb_settings.hide_embed_branding,
+
+    metastoreUrl: () => mb_settings.metastore_url,
+
     newVersionAvailable: function(settings) {
         let versionInfo = _.findWhere(settings, {key: "version-info"}),
             currentVersion = MetabaseSettings.get("version").tag;