From d7126d79a664c169853685a2943c2639f9f9d8ef Mon Sep 17 00:00:00 2001
From: Maz Ameli <maz@metabase.com>
Date: Tue, 13 Sep 2022 12:14:38 -0700
Subject: [PATCH] Make the signed embedding CTA clearer (#25371)
---
.../components/widgets/SharingPane.styled.tsx | 4 ++--
.../public/components/widgets/SharingPane.tsx | 17 +++++++++++------
.../embedding/embedding-dashboard.cy.spec.js | 4 ++--
.../embedding/embedding-native.cy.spec.js | 2 +-
.../embedding/embedding-questions.cy.spec.js | 10 +++++-----
.../embedding/embedding-snippets.cy.spec.js | 4 ++--
...-locked-filters-same-source-table.cy.spec.js | 2 +-
...438-dashboard-filter-single-value.cy.spec.js | 2 +-
...d-parameters-in-embedded-question.cy.spec.js | 2 +-
9 files changed, 26 insertions(+), 21 deletions(-)
diff --git a/frontend/src/metabase/public/components/widgets/SharingPane.styled.tsx b/frontend/src/metabase/public/components/widgets/SharingPane.styled.tsx
index dc75360fa07..6831136bef4 100644
--- a/frontend/src/metabase/public/components/widgets/SharingPane.styled.tsx
+++ b/frontend/src/metabase/public/components/widgets/SharingPane.styled.tsx
@@ -27,11 +27,11 @@ export const PublicLinkHeader = styled(OptionHeader)`
`;
export const PublicEmbedHeader = styled(OptionHeader)`
- color: ${color("summarize")};
+ color: ${color("brand")};
`;
export const EmbedWidgetHeader = styled(OptionHeader)`
- color: ${color("filter")};
+ color: ${color("brand")};
`;
interface DescriptionProps {
diff --git a/frontend/src/metabase/public/components/widgets/SharingPane.tsx b/frontend/src/metabase/public/components/widgets/SharingPane.tsx
index 0d1f9f30e97..f479eefa6bc 100644
--- a/frontend/src/metabase/public/components/widgets/SharingPane.tsx
+++ b/frontend/src/metabase/public/components/widgets/SharingPane.tsx
@@ -1,6 +1,7 @@
import React, { ReactNode, useState } from "react";
import { t, jt } from "ttag";
import cx from "classnames";
+import Button from "metabase/core/components/Button";
import Icon from "metabase/components/Icon";
import Toggle from "metabase/core/components/Toggle";
import CopyWidget from "metabase/components/CopyWidget";
@@ -66,7 +67,7 @@ export default function SharingPane({
return (
<div className="pt2 ml-auto mr-auto" style={{ maxWidth: 600 }}>
{isAdmin && isPublicSharingEnabled && (
- <div className="pb2 mb4 border-bottom flex align-center">
+ <div className="px4 py3 mb4 bordered rounded flex align-center">
<Header>{t`Enable sharing`}</Header>
<div className="ml-auto">
{resource.public_uuid ? (
@@ -102,7 +103,7 @@ export default function SharingPane({
)}
<SharingOption
- className={cx({
+ className={cx("border-bottom", {
disabled: !resource.public_uuid,
})}
illustration={
@@ -137,7 +138,7 @@ export default function SharingPane({
</SharingOption>
<SharingOption
- className={cx({
+ className={cx("border-bottom", {
disabled: !resource.public_uuid,
})}
illustration={
@@ -163,11 +164,12 @@ export default function SharingPane({
}
}}
>
- <EmbedWidgetHeader>{t`Embed this ${resourceType} in an application`}</EmbedWidgetHeader>
- <Description>{t`By integrating with your application server code, you can provide a secure stats ${resourceType} limited to a specific user, customer, organization, etc.`}</Description>
+ <EmbedWidgetHeader>{t`Embed in your application`}</EmbedWidgetHeader>
+ <Description>{t`Add this ${resourceType} to your application server code. You’ll be able to preview the way it looks and behaves before making it securely visible for your users.`}</Description>
{embeddingHelperText && (
<Description enableMouseEvents>{embeddingHelperText}</Description>
)}
+ <Button primary>{t`Set up`}</Button>
</SharingOption>
</div>
);
@@ -187,7 +189,10 @@ function SharingOption({
children,
}: SharingOptionProps) {
return (
- <div className={cx("mb4 flex align-start", className)} onClick={onClick}>
+ <div
+ className={cx("pt1 pb4 mb3 flex align-start", className)}
+ onClick={onClick}
+ >
{illustration}
<div className="ml2">{children}</div>
</div>
diff --git a/frontend/test/metabase/scenarios/embedding/embedding-dashboard.cy.spec.js b/frontend/test/metabase/scenarios/embedding/embedding-dashboard.cy.spec.js
index cd3e872a018..1b7762947bf 100644
--- a/frontend/test/metabase/scenarios/embedding/embedding-dashboard.cy.spec.js
+++ b/frontend/test/metabase/scenarios/embedding/embedding-dashboard.cy.spec.js
@@ -48,7 +48,7 @@ describe("scenarios > embedding > dashboard parameters", () => {
});
cy.icon("share").click();
- cy.findByText("Embed this dashboard in an application").click();
+ cy.findByText("Embed in your application").click();
cy.findByRole("heading", { name: "Parameters" })
.parent()
@@ -134,7 +134,7 @@ describe("scenarios > embedding > dashboard parameters", () => {
});
cy.icon("share").click();
- cy.findByText("Embed this dashboard in an application").click();
+ cy.findByText("Embed in your application").click();
cy.findByText("Locked").click();
popover().contains("Disabled").click();
diff --git a/frontend/test/metabase/scenarios/embedding/embedding-native.cy.spec.js b/frontend/test/metabase/scenarios/embedding/embedding-native.cy.spec.js
index 251c187a41d..3374ec46619 100644
--- a/frontend/test/metabase/scenarios/embedding/embedding-native.cy.spec.js
+++ b/frontend/test/metabase/scenarios/embedding/embedding-native.cy.spec.js
@@ -250,7 +250,7 @@ function enableSharing() {
cy.intercept("GET", "/api/session/properties").as("sessionProperties");
cy.icon("share").click();
- cy.findByText("Embed this question in an application").click();
+ cy.findByText("Embed in your application").click();
cy.wait("@sessionProperties");
}
diff --git a/frontend/test/metabase/scenarios/embedding/embedding-questions.cy.spec.js b/frontend/test/metabase/scenarios/embedding/embedding-questions.cy.spec.js
index 217ce620604..1d415cd99bf 100644
--- a/frontend/test/metabase/scenarios/embedding/embedding-questions.cy.spec.js
+++ b/frontend/test/metabase/scenarios/embedding/embedding-questions.cy.spec.js
@@ -42,7 +42,7 @@ describe("scenarios > embedding > questions ", () => {
});
cy.icon("share").click();
- cy.findByText("Embed this question in an application").click();
+ cy.findByText("Embed in your application").click();
visitIframe();
@@ -78,7 +78,7 @@ describe("scenarios > embedding > questions ", () => {
});
cy.icon("share").click();
- cy.findByText("Embed this question in an application").click();
+ cy.findByText("Embed in your application").click();
visitIframe();
@@ -114,7 +114,7 @@ describe("scenarios > embedding > questions ", () => {
});
cy.icon("share").click();
- cy.findByText("Embed this question in an application").click();
+ cy.findByText("Embed in your application").click();
visitIframe();
@@ -144,7 +144,7 @@ describe("scenarios > embedding > questions ", () => {
});
cy.icon("share").click();
- cy.findByText("Embed this question in an application").click();
+ cy.findByText("Embed in your application").click();
visitIframe();
@@ -174,7 +174,7 @@ describe("scenarios > embedding > questions ", () => {
visitQuestion(CARD_ID);
cy.icon("share").click();
- cy.findByText("Embed this question in an application").click();
+ cy.findByText("Embed in your application").click();
visitIframe();
diff --git a/frontend/test/metabase/scenarios/embedding/embedding-snippets.cy.spec.js b/frontend/test/metabase/scenarios/embedding/embedding-snippets.cy.spec.js
index 99c2f8fca30..4507d70eeed 100644
--- a/frontend/test/metabase/scenarios/embedding/embedding-snippets.cy.spec.js
+++ b/frontend/test/metabase/scenarios/embedding/embedding-snippets.cy.spec.js
@@ -17,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 dashboard in an application").click();
+ cy.contains("Embed in your application").click();
cy.contains("Code").click();
cy.findByText("To embed this dashboard in your application:");
@@ -68,7 +68,7 @@ describe("scenarios > embedding > code snippets", () => {
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("Embed in your application").click();
cy.contains("Code").click();
cy.findByText("To embed this question in your application:");
diff --git a/frontend/test/metabase/scenarios/embedding/reproductions/15860-locked-filters-same-source-table.cy.spec.js b/frontend/test/metabase/scenarios/embedding/reproductions/15860-locked-filters-same-source-table.cy.spec.js
index 30977949132..f3f9b040cf8 100644
--- a/frontend/test/metabase/scenarios/embedding/reproductions/15860-locked-filters-same-source-table.cy.spec.js
+++ b/frontend/test/metabase/scenarios/embedding/reproductions/15860-locked-filters-same-source-table.cy.spec.js
@@ -141,7 +141,7 @@ describe.skip("issue 15860", () => {
it("should work for locked linked filters connected to different cards with the same source table (metabase#15860)", () => {
cy.icon("share").click();
- cy.findByText("Embed this dashboard in an application").click();
+ cy.findByText("Embed in your application").click();
setDefaultValueForLockedFilter("Q1 ID", 1);
setDefaultValueForLockedFilter("Q2 ID", 3);
diff --git a/frontend/test/metabase/scenarios/embedding/reproductions/20438-dashboard-filter-single-value.cy.spec.js b/frontend/test/metabase/scenarios/embedding/reproductions/20438-dashboard-filter-single-value.cy.spec.js
index 64bf8a08288..19848c4d032 100644
--- a/frontend/test/metabase/scenarios/embedding/reproductions/20438-dashboard-filter-single-value.cy.spec.js
+++ b/frontend/test/metabase/scenarios/embedding/reproductions/20438-dashboard-filter-single-value.cy.spec.js
@@ -81,7 +81,7 @@ describe("issue 20438", () => {
it("dashboard filter connected to the field filter should work with a single value in embedded dashboards (metabase#20438)", () => {
cy.icon("share").click();
- cy.findByText("Embed this dashboard in an application").click();
+ cy.findByText("Embed in your application").click();
visitIframe();
diff --git a/frontend/test/metabase/scenarios/embedding/reproductions/20634-locked-parameters-in-embedded-question.cy.spec.js b/frontend/test/metabase/scenarios/embedding/reproductions/20634-locked-parameters-in-embedded-question.cy.spec.js
index e297fcdb1cf..bb946cec875 100644
--- a/frontend/test/metabase/scenarios/embedding/reproductions/20634-locked-parameters-in-embedded-question.cy.spec.js
+++ b/frontend/test/metabase/scenarios/embedding/reproductions/20634-locked-parameters-in-embedded-question.cy.spec.js
@@ -27,7 +27,7 @@ describe("locked parameters in embedded question (metabase#20634)", () => {
it("should let the user lock parameters to specific values", () => {
cy.icon("share").click();
- cy.findByText("Embed this question in an application").click();
+ cy.findByText("Embed in your application").click();
cy.get(".Modal--full").within(() => {
// select the dropdown next to the Text parameter so that we can set the value to "Locked"
--
GitLab