Configure show download button in embedding (#23479)

* Configure show download button in embedding

* Address review + fix tests

frontend/src/metabase/core/components/Toggle/Toggle.styled.tsx

@@ -41,6 +41,7 @@ export const ToggleRoot = styled.input<ToggleRootProps>`
   background-color: ${color("bg-medium")};
   background-color: ${getBackgroundColor};
   transition: background-color 0.3s;
+  flex-shrink: 0;
 
   &:after {
     content: "";

frontend/src/metabase/public/components/EmbedFrame.jsx

@@ -43,12 +43,13 @@ class EmbedFrame extends Component {
     } = this.props;
     const { innerScroll } = this.state;
 
-    const showFooter = !MetabaseSettings.hideEmbedBranding() || actionButtons;
-
-    const { bordered, titled, theme, hide_parameters } = {
+    const { bordered, titled, theme, hide_parameters, hide_download_button } = {
       ...DEFAULT_OPTIONS,
       ...parseHashOptions(location.hash),
     };
+    const showFooter =
+      !MetabaseSettings.hideEmbedBranding() ||
+      (!hide_download_button && actionButtons);
 
     const name = titled ? this.props.name : null;
 

frontend/src/metabase/public/components/widgets/DisplayOptionsPane.jsx

@@ -6,6 +6,8 @@ import { connect } from "react-redux";
 import Radio from "metabase/core/components/Radio/";
 import CheckBox from "metabase/core/components/CheckBox";
 import Select from "metabase/core/components/Select";
+import Toggle from "metabase/core/components/Toggle";
+import { useUniqueId } from "metabase/hooks/use-unique-id";
 import MetabaseSettings from "metabase/lib/settings";
 import { PLUGIN_SELECTORS } from "metabase/plugins";
 import { t } from "ttag";
@@ -14,6 +16,8 @@ import {
   StyleContainer,
   DisplayOption,
   DisplayOptionTitle,
+  ToggleContainer,
+  ToggleLabel,
 } from "./DisplayOptionsPane.styled";
 
 const THEME_OPTIONS = [
@@ -30,63 +34,88 @@ const DisplayOptionsPane = ({
   displayOptions,
   onChangeDisplayOptions,
   canWhitelabel,
-}) => (
-  <div className={className}>
-    <DisplayOptionSection title={t`Style`}>
-      <StyleContainer>
-        <CheckBox
-          label={t`Border`}
-          checked={displayOptions.bordered}
-          onChange={e =>
-            onChangeDisplayOptions({
-              ...displayOptions,
-              bordered: e.target.checked,
-            })
-          }
-        />
-        <CheckBox
-          label={t`Title`}
-          checked={displayOptions.titled}
-          onChange={e =>
-            onChangeDisplayOptions({
-              ...displayOptions,
-              titled: e.target.checked,
-            })
+}) => {
+  const toggleId = useUniqueId("show-download-data-button");
+
+  return (
+    <div className={className}>
+      <DisplayOptionSection title={t`Style`}>
+        <StyleContainer>
+          <CheckBox
+            label={t`Border`}
+            checked={displayOptions.bordered}
+            onChange={e =>
+              onChangeDisplayOptions({
+                ...displayOptions,
+                bordered: e.target.checked,
+              })
+            }
+          />
+          <CheckBox
+            label={t`Title`}
+            checked={displayOptions.titled}
+            onChange={e =>
+              onChangeDisplayOptions({
+                ...displayOptions,
+                titled: e.target.checked,
+              })
+            }
+          />
+        </StyleContainer>
+      </DisplayOptionSection>
+      <DisplayOptionSection title={t`Appearance`}>
+        <Radio
+          value={displayOptions.theme}
+          options={THEME_OPTIONS}
+          onChange={value =>
+            onChangeDisplayOptions({ ...displayOptions, theme: value })
           }
-        />
-      </StyleContainer>
-    </DisplayOptionSection>
-    <DisplayOptionSection title={t`Appearance`}>
-      <Radio
-        value={displayOptions.theme}
-        options={THEME_OPTIONS}
-        onChange={value =>
-          onChangeDisplayOptions({ ...displayOptions, theme: value })
-        }
-        variant="normal"
-        showButtons
-        vertical
-      />
-    </DisplayOptionSection>
-    {canWhitelabel && (
-      <DisplayOptionSection title={t`Font`}>
-        <Select
-          value={displayOptions.font}
-          options={MetabaseSettings.get("available-fonts").map(font => ({
-            name: font,
-            value: font,
-          }))}
-          onChange={e => {
-            onChangeDisplayOptions({
-              ...displayOptions,
-              font: e.target.value,
-            });
-          }}
+          variant="normal"
+          showButtons
+          vertical
         />
       </DisplayOptionSection>
-    )}
-  </div>
-);
+      {canWhitelabel && (
+        <>
+          <DisplayOptionSection title={t`Font`}>
+            <Select
+              value={displayOptions.font}
+              options={MetabaseSettings.get("available-fonts").map(font => ({
+                name: font,
+                value: font,
+              }))}
+              onChange={e => {
+                onChangeDisplayOptions({
+                  ...displayOptions,
+                  font: e.target.value,
+                });
+              }}
+            />
+          </DisplayOptionSection>
+          <DisplayOptionSection title={t`Download data`}>
+            <ToggleContainer>
+              <ToggleLabel
+                htmlFor={toggleId}
+              >{t`Enable users to download data from this embed?`}</ToggleLabel>
+              <Toggle
+                id={toggleId}
+                aria-checked={!displayOptions.hide_download_button}
+                role="switch"
+                value={!displayOptions.hide_download_button}
+                onChange={isEnabled => {
+                  onChangeDisplayOptions({
+                    ...displayOptions,
+                    hide_download_button: !isEnabled ? true : null,
+                  });
+                }}
+              />
+            </ToggleContainer>
+          </DisplayOptionSection>
+        </>
+      )}
+    </div>
+  );
+};
 
 const DisplayOptionSection = ({ title, children }) => (
   <DisplayOption>

frontend/src/metabase/public/components/widgets/DisplayOptionsPane.styled.jsx

 import styled from "@emotion/styled";
+import { space } from "metabase/styled-components/theme";
 
 export const StyleContainer = styled.div`
   display: flex;
@@ -18,3 +19,13 @@ export const DisplayOption = styled.div`
 export const DisplayOptionTitle = styled.h3`
   margin-bottom: 1rem;
 `;
+
+export const ToggleContainer = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+export const ToggleLabel = styled.label`
+  margin-right: ${space(3)};
+  line-height: 1.5;
+`;

frontend/test/metabase/scenarios/embedding/embedding-snippets.cy.spec.js

@@ -27,7 +27,17 @@ describe("scenarios > embedding > code snippets", () => {
     cy.get(".ace_content")
       .first()
       .invoke("text")
-      .should("match", JS_CODE(isEE));
+      .should("match", JS_CODE({ isEE }));
+
+    // hide download button for pro/enterprise users metabase#23477
+    cy.findByLabelText(
+      "Enable users to download data from this embed?",
+    ).click();
+
+    cy.get(".ace_content")
+      .first()
+      .invoke("text")
+      .should("match", JS_CODE({ isEE, hideDownloadButton: true }));
 
     cy.get(".ace_content")
       .last()

frontend/test/metabase/scenarios/embedding/embedding-snippets.js

-export const JS_CODE = isEE =>
+export const JS_CODE = ({ isEE, hideDownloadButton }) =>
   new RegExp(
     `// you will need to install via 'npm install jsonwebtoken' or in your package.json
 
@@ -13,9 +13,9 @@ var payload = {
 };
 var token = jwt.sign(payload, METABASE_SECRET_KEY);
 
-var iframeUrl = METABASE_SITE_URL + "/embed/dashboard/" + token + "#bordered=true&titled=true${
-      isEE ? "&font=Lato" : ""
-    }";`
+var iframeUrl = METABASE_SITE_URL + "/embed/dashboard/" + token + "#bordered=true&titled=true${getParameter(
+      { isEE, hideDownloadButton },
+    )}";`
       .split("\n")
       .join("")
       .replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&")
@@ -32,3 +32,17 @@ export const IFRAME_CODE = `<iframe
 ></iframe>`
   .split("\n")
   .join("");
+
+function getParameter({ isEE, hideDownloadButton }) {
+  let parameter = "";
+
+  if (isEE) {
+    parameter += "&font=Lato";
+  }
+
+  if (hideDownloadButton) {
+    parameter += "&hide_download_button=true";
+  }
+
+  return parameter;
+}