update the UI of the downloads toggle to make it look like the others… (#46409)

* update the UI of the downloads toggle to make it look like the others in the page

* make unit tests pass

* make e2e pass

e2e/test/scenarios/embedding/embedding-questions.cy.spec.js

@@ -268,9 +268,10 @@ describeEE("scenarios > embedding > questions > downloads", () => {
         cy.log(
           "Embedding settings page should not show option to disable downloads",
         );
-        cy.findByLabelText("Customizing look and feel")
-          .should("not.contain", "Download data")
-          .and("not.contain", "Enable users to download data from this embed");
+        cy.findByLabelText("Customizing look and feel").should(
+          "not.contain",
+          "Download buttons",
+        );
 
         cy.log('Use API to "publish" this question and to enable its filter');
         cy.request("PUT", `/api/card/${questionId}`, {
@@ -328,11 +329,11 @@ describeEE("scenarios > embedding > questions > downloads", () => {
         });
 
         cy.log("Disable downloads");
-        cy.findByLabelText("Download data")
+        cy.findByLabelText("Download buttons")
           .as("allow-download-toggle")
           .should("be.checked");
 
-        cy.findByText("Enable users to download data from this embed").click();
+        cy.findByText("Download buttons").click();
         cy.get("@allow-download-toggle").should("not.be.checked");
 
         cy.log('Use API to "publish" this question and to enable its filter');

e2e/test/scenarios/embedding/embedding-smoketests.cy.spec.js

@@ -166,7 +166,7 @@ describe("scenarios > embedding > smoke tests", { tags: "@OSS" }, () => {
               element.textContent ===
               "You can change the font with a paid plan.",
           );
-          cy.findByText("Download data").should("not.exist");
+          cy.findByText("Download buttons").should("not.exist");
 
           cy.findByRole("tab", { name: "Parameters" }).click();
 

e2e/test/scenarios/embedding/embedding-snippets.cy.spec.js

@@ -93,9 +93,7 @@ features.forEach(feature => {
           );
 
         if (feature === "all") {
-          cy.findByText(
-            "Enable users to download data from this embed",
-          ).click();
+          cy.findByText("Download buttons").click();
 
           cy.get(".ace_content")
             .first()
@@ -142,9 +140,7 @@ features.forEach(feature => {
 
         // hide download button for pro/enterprise users metabase#23477
         if (feature === "all") {
-          cy.findByText(
-            "Enable users to download data from this embed",
-          ).click();
+          cy.findByText("Download buttons").click();
 
           cy.get(".ace_content")
             .first()

e2e/test/scenarios/sharing/public-sharing-embed-button-behavior.cy.spec.js

@@ -638,7 +638,7 @@ describe("#39152 sharing an unsaved question", () => {
             cy.log(
               "Assert that it sends `downloads: false` when downloads are disabled",
             );
-            modal().findByLabelText("Download data").click({ force: true });
+            modal().findByLabelText("Download buttons").click({ force: true });
 
             cy.findByTestId("embed-backend")
               .findByTestId("copy-button")

frontend/src/metabase/public/components/EmbedModal/StaticEmbedSetupPane/LookAndFeelSettings.tsx

@@ -4,7 +4,6 @@ import { jt, t } from "ttag";
 import { UpsellMetabaseBanner } from "metabase/admin/upsells/UpsellMetabaseBanner";
 import { getPlan } from "metabase/common/utils/plan";
 import ExternalLink from "metabase/core/components/ExternalLink";
-import { useUniqueId } from "metabase/hooks/use-unique-id";
 import { color } from "metabase/lib/colors";
 import { useSelector } from "metabase/lib/redux";
 import type {
@@ -64,8 +63,6 @@ export const LookAndFeelSettings = ({
   );
   const utmTags = `?utm_source=${plan}&utm_media=static-embed-settings-appearance`;
 
-  const downloadDataId = useUniqueId("download-data");
-
   return (
     <>
       <StaticEmbedSetupPaneSettingsContentSection
@@ -180,26 +177,19 @@ export const LookAndFeelSettings = ({
           />
 
           {canWhitelabel && (
-            // We only show the "Download Data" toggle if the users are pro/enterprise
-            <DisplayOptionSection
-              title={t`Download data`}
-              titleId={downloadDataId}
-            >
-              <Switch
-                aria-labelledby={downloadDataId}
-                label={t`Enable users to download data from this embed`}
-                labelPosition="left"
-                size="sm"
-                variant="stretch"
-                checked={displayOptions.downloads ?? true}
-                onChange={e =>
-                  onChangeDisplayOptions({
-                    ...displayOptions,
-                    downloads: e.target.checked,
-                  })
-                }
-              />
-            </DisplayOptionSection>
+            <Switch
+              label={t`Download buttons`}
+              labelPosition="left"
+              size="sm"
+              variant="stretch"
+              checked={displayOptions.downloads ?? true}
+              onChange={e =>
+                onChangeDisplayOptions({
+                  ...displayOptions,
+                  downloads: e.target.checked,
+                })
+              }
+            />
           )}
         </Stack>
       </StaticEmbedSetupPaneSettingsContentSection>

frontend/src/metabase/public/components/EmbedModal/StaticEmbedSetupPane/tests/premium.unit.spec.tsx

@@ -104,28 +104,26 @@ describe("Static Embed Setup phase - EE, with token", () => {
         );
       });
 
-      if (resourceType === "question") {
-        it('should render "Download data" control', async () => {
-          await setup({
-            props: {
-              resourceType,
-              resource: getMockResource(resourceType, true),
-            },
-            activeTab: "Look and Feel",
-            hasEnterprisePlugins: true,
-            tokenFeatures: createMockTokenFeatures({ whitelabel: true }),
-          });
-
-          expect(screen.getByText("Download data")).toBeVisible();
-          expect(screen.getByLabelText("Download data")).toBeChecked();
-
-          await userEvent.click(screen.getByLabelText("Download data"));
-
-          expect(screen.getByTestId("text-editor-mock")).toHaveTextContent(
-            `downloads=false`,
-          );
+      it('should render "Download buttons" control', async () => {
+        await setup({
+          props: {
+            resourceType,
+            resource: getMockResource(resourceType, true),
+          },
+          activeTab: "Look and Feel",
+          hasEnterprisePlugins: true,
+          tokenFeatures: createMockTokenFeatures({ whitelabel: true }),
         });
-      }
+
+        expect(screen.getByText("Download buttons")).toBeVisible();
+        expect(screen.getByLabelText("Download buttons")).toBeChecked();
+
+        await userEvent.click(screen.getByLabelText("Download buttons"));
+
+        expect(screen.getByTestId("text-editor-mock")).toHaveTextContent(
+          `downloads=false`,
+        );
+      });
     });
   });
 });