Hide download button visibility toggle on Pro/EE dashboard sharing (#23561)

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

@@ -52,6 +52,9 @@ const AdvancedSettingsPane = ({
           className="pt1"
           displayOptions={displayOptions}
           onChangeDisplayOptions={onChangeDisplayOptions}
+          // We only show the "Download Data" toggle if the users are pro/enterprise
+          // and they're sharing a question metabase#23477
+          showDownloadDataButtonVisibilityToggle={resourceType === "question"}
         />
       </Section>
       {embedType === "application" && (

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

@@ -35,6 +35,7 @@ const DisplayOptionsPane = ({
   displayOptions,
   onChangeDisplayOptions,
   canWhitelabel,
+  showDownloadDataButtonVisibilityToggle,
 }) => {
   const toggleId = useUniqueId("show-download-data-button");
 
@@ -93,25 +94,27 @@ const DisplayOptionsPane = ({
               }}
             />
           </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>
+          {showDownloadDataButtonVisibilityToggle && (
+            <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>

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

@@ -2,6 +2,7 @@ import {
   restore,
   popover,
   visitDashboard,
+  visitQuestion,
   isEE,
 } from "__support__/e2e/helpers";
 
@@ -16,7 +17,7 @@ describe("scenarios > embedding > code snippets", () => {
   it("dashboard should have the correct embed snippet", () => {
     visitDashboard(1);
     cy.icon("share").click();
-    cy.contains(/Embed this .* in an application/).click();
+    cy.contains("Embed this dashboard in an application").click();
     cy.contains("Code").click();
 
     cy.findByText("To embed this dashboard in your application:");
@@ -27,7 +28,73 @@ describe("scenarios > embedding > code snippets", () => {
     cy.get(".ace_content")
       .first()
       .invoke("text")
-      .should("match", JS_CODE({ isEE }));
+      .should("match", JS_CODE({ type: "dashboard", isEE }));
+
+    // set transparent background metabase#23477
+    cy.findByText("Transparent").click();
+    cy.get(".ace_content")
+      .first()
+      .invoke("text")
+      .should(
+        "match",
+        JS_CODE({ type: "dashboard", isEE, theme: "transparent" }),
+      );
+
+    // No download button for dashboards even for pro/enterprise users metabase#23477
+    cy.findByLabelText("Enable users to download data from this embed?").should(
+      "not.exist",
+    );
+
+    cy.get(".ace_content")
+      .last()
+      .should("have.text", IFRAME_CODE);
+
+    cy.findAllByTestId("embed-backend-select-button")
+      .should("contain", "Node.js")
+      .click();
+
+    popover()
+      .should("contain", "Node.js")
+      .and("contain", "Ruby")
+      .and("contain", "Python")
+      .and("contain", "Clojure");
+
+    cy.findAllByTestId("embed-frontend-select-button")
+      .should("contain", "Mustache")
+      .click();
+
+    popover()
+      .should("contain", "Mustache")
+      .and("contain", "Pug / Jade")
+      .and("contain", "ERB")
+      .and("contain", "JSX");
+  });
+
+  it("question should have the correct embed snippet", () => {
+    visitQuestion(1);
+    cy.icon("share").click();
+    cy.contains("Embed this question in an application").click();
+    cy.contains("Code").click();
+
+    cy.findByText("To embed this question in your application:");
+    cy.findByText(
+      "Insert this code snippet in your server code to generate the signed embedding URL",
+    );
+
+    cy.get(".ace_content")
+      .first()
+      .invoke("text")
+      .should("match", JS_CODE({ type: "question", isEE }));
+
+    // set transparent background metabase#23477
+    cy.findByText("Transparent").click();
+    cy.get(".ace_content")
+      .first()
+      .invoke("text")
+      .should(
+        "match",
+        JS_CODE({ type: "question", isEE, theme: "transparent" }),
+      );
 
     // hide download button for pro/enterprise users metabase#23477
     if (isEE) {
@@ -38,7 +105,15 @@ describe("scenarios > embedding > code snippets", () => {
       cy.get(".ace_content")
         .first()
         .invoke("text")
-        .should("match", JS_CODE({ isEE, hideDownloadButton: true }));
+        .should(
+          "match",
+          JS_CODE({
+            type: "question",
+            isEE,
+            theme: "transparent",
+            hideDownloadButton: true,
+          }),
+        );
     }
 
     cy.get(".ace_content")

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

-export const JS_CODE = ({ isEE, hideDownloadButton }) =>
-  new RegExp(
+export const JS_CODE = ({ type, isEE, hideDownloadButton, theme }) => {
+  return new RegExp(
     `// you will need to install via 'npm install jsonwebtoken' or in your package.json
 
 var jwt = require("jsonwebtoken");
@@ -7,21 +7,22 @@ var jwt = require("jsonwebtoken");
 var METABASE_SITE_URL = "http://localhost:PORTPORTPORT";
 var METABASE_SECRET_KEY = "KEYKEYKEY";
 var payload = {
-  resource: { dashboard: 1 },
+  resource: { ${type}: 1 },
   params: {},
   exp: Math.round(Date.now() / 1000) + (10 * 60) // 10 minute expiration
 };
 var token = jwt.sign(payload, METABASE_SECRET_KEY);
 
-var iframeUrl = METABASE_SITE_URL + "/embed/dashboard/" + token + "#bordered=true&titled=true${getParameter(
-      { isEE, hideDownloadButton },
-    )}";`
+var iframeUrl = METABASE_SITE_URL + "/embed/${type}/" + token + "#${getThemeParameter(
+      theme,
+    )}bordered=true&titled=true${getParameter({ isEE, hideDownloadButton })}";`
       .split("\n")
       .join("")
       .replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&")
       .replace("KEYKEYKEY", ".*")
       .replace("PORTPORTPORT", ".*"),
   );
+};
 
 export const IFRAME_CODE = `<iframe
     src="{{iframeUrl}}"
@@ -46,3 +47,7 @@ function getParameter({ isEE, hideDownloadButton }) {
 
   return parameter;
 }
+
+function getThemeParameter(theme) {
+  return theme ? `theme=${theme}&` : "";
+}