diff --git a/e2e/support/helpers/e2e-embedding-helpers.js b/e2e/support/helpers/e2e-embedding-helpers.js
index a30f9e8cca33818aa110de2e2bd818afbe0067f9..4dc1a544d88f0be209c59e15e96de2d73aac2de5 100644
--- a/e2e/support/helpers/e2e-embedding-helpers.js
+++ b/e2e/support/helpers/e2e-embedding-helpers.js
@@ -155,10 +155,12 @@ export function openEmbedModalFromMenu() {
* @param {object} params
* @param {("overview"|"parameters"|"appearance")} [params.activeTab] - modal tab to open
* @param {("code"|"preview")} [params.previewMode] - preview mode type to activate
+ * @param {boolean} [params.acceptTerms] - whether we need to go through the legalese step
*/
export function openStaticEmbeddingModal({
activeTab,
previewMode,
+ acceptTerms = true,
confirmSave,
} = {}) {
openEmbedModalFromMenu();
@@ -169,6 +171,10 @@ export function openStaticEmbeddingModal({
cy.findByTestId("sharing-pane-static-embed-button").click();
+ if (acceptTerms) {
+ cy.findByTestId("accept-legalese-terms-button").click();
+ }
+
modal().within(() => {
if (activeTab) {
const tabKeyToNameMap = {
diff --git a/e2e/test/scenarios/embedding/embedding-dashboard.cy.spec.js b/e2e/test/scenarios/embedding/embedding-dashboard.cy.spec.js
index d11694f881bd8e03aec5516cad7b3aaa22741e3f..4f5cfa7f4113cc980a3f926c59b4590ca799e8f3 100644
--- a/e2e/test/scenarios/embedding/embedding-dashboard.cy.spec.js
+++ b/e2e/test/scenarios/embedding/embedding-dashboard.cy.spec.js
@@ -54,7 +54,7 @@ describe("scenarios > embedding > dashboard parameters", () => {
visitDashboard(dashboardId);
});
- openStaticEmbeddingModal({ activeTab: "parameters" });
+ openStaticEmbeddingModal({ activeTab: "parameters", acceptTerms: true });
cy.findByLabelText("Enable or lock parameters").as("allParameters");
@@ -137,7 +137,7 @@ describe("scenarios > embedding > dashboard parameters", () => {
visitDashboard(dashboardId);
});
- openStaticEmbeddingModal({ activeTab: "parameters" });
+ openStaticEmbeddingModal({ activeTab: "parameters", acceptTerms: false });
cy.get("@allParameters").findByText("Locked").click();
popover().contains("Disabled").click();
diff --git a/e2e/test/scenarios/embedding/embedding-downloads-questions.cy.spec.js b/e2e/test/scenarios/embedding/embedding-downloads-questions.cy.spec.js
index 7ac88490ef1ee14c3039fb1806496ce9e5810e6b..40fd5f0b5503bea44a384f3754c790389c09561b 100644
--- a/e2e/test/scenarios/embedding/embedding-downloads-questions.cy.spec.js
+++ b/e2e/test/scenarios/embedding/embedding-downloads-questions.cy.spec.js
@@ -103,7 +103,7 @@ describeEE("scenarios > embedding > questions > downloads", () => {
cy.get("@questionId").then(questionId => {
visitQuestion(questionId);
- openStaticEmbeddingModal({ activeTab: "appearance" });
+ openStaticEmbeddingModal({ activeTab: "appearance", acceptTerms: false });
cy.log("Disable downloads");
cy.findByLabelText("Enable users to download data from this embed?")
diff --git a/e2e/test/scenarios/embedding/embedding-smoketests.cy.spec.js b/e2e/test/scenarios/embedding/embedding-smoketests.cy.spec.js
index 95f06d1dee753079f80fd1d2118dc987b227ad0c..2e5b79646661b621195d2a54045e62afd30f8860 100644
--- a/e2e/test/scenarios/embedding/embedding-smoketests.cy.spec.js
+++ b/e2e/test/scenarios/embedding/embedding-smoketests.cy.spec.js
@@ -211,7 +211,7 @@ describe("scenarios > embedding > smoke tests", { tags: "@OSS" }, () => {
.and("contain", objectName);
cy.log(`Unpublish ${object}`);
- visitAndEnableSharing(object);
+ visitAndEnableSharing(object, false);
modal().within(() => {
cy.findByText(
@@ -331,7 +331,7 @@ function ensureEmbeddingIsDisabled() {
});
}
-function visitAndEnableSharing(object) {
+function visitAndEnableSharing(object, acceptTerms = true) {
if (object === "question") {
visitQuestion(ORDERS_QUESTION_ID);
}
@@ -340,7 +340,7 @@ function visitAndEnableSharing(object) {
visitDashboard(ORDERS_DASHBOARD_ID);
}
- openStaticEmbeddingModal();
+ openStaticEmbeddingModal({acceptTerms});
}
function sidebar() {
diff --git a/e2e/test/scenarios/embedding/embedding-snippets.cy.spec.js b/e2e/test/scenarios/embedding/embedding-snippets.cy.spec.js
index b0fbe75b647f3fb347a38271c5da2f0f0b2a2924..6662719cbc25ca307e8f6375ae0c4b573659fbf2 100644
--- a/e2e/test/scenarios/embedding/embedding-snippets.cy.spec.js
+++ b/e2e/test/scenarios/embedding/embedding-snippets.cy.spec.js
@@ -26,7 +26,8 @@ features.forEach(feature => {
it("dashboard should have the correct embed snippet", () => {
visitDashboard(ORDERS_DASHBOARD_ID);
- openStaticEmbeddingModal();
+ console.log("feature", feature);
+ openStaticEmbeddingModal({ acceptTerms: false });
modal().within(() => {
cy.findByText(
@@ -91,7 +92,8 @@ features.forEach(feature => {
it("question should have the correct embed snippet", () => {
visitQuestion(ORDERS_QUESTION_ID);
- openStaticEmbeddingModal();
+ console.log("feature", feature);
+ openStaticEmbeddingModal({ acceptTerms: false });
modal().within(() => {
cy.findByText(
diff --git a/e2e/test/scenarios/embedding/reproductions/30535-session-sandboxing.cy.spec.js b/e2e/test/scenarios/embedding/reproductions/30535-session-sandboxing.cy.spec.js
index 624a5093a646c1d8d3743455560307551975515e..2067a9e94a1cab3b0d451aa5919480e7e128a3de 100644
--- a/e2e/test/scenarios/embedding/reproductions/30535-session-sandboxing.cy.spec.js
+++ b/e2e/test/scenarios/embedding/reproductions/30535-session-sandboxing.cy.spec.js
@@ -41,6 +41,7 @@ describeEE("issue 30535", () => {
openStaticEmbeddingModal({
activeTab: "parameters",
previewMode: "preview",
+ acceptTerms: false,
});
cy.document().then(doc => {
diff --git a/e2e/test/scenarios/sharing/reproductions/26988-embedding-dynamic-settings.cy.spec.js b/e2e/test/scenarios/sharing/reproductions/26988-embedding-dynamic-settings.cy.spec.js
index 56adc7a5cfebac15d91efc023903badb10ad1f48..aa768c7049edec7b43d88e774f1bbf87e48dda44 100644
--- a/e2e/test/scenarios/sharing/reproductions/26988-embedding-dynamic-settings.cy.spec.js
+++ b/e2e/test/scenarios/sharing/reproductions/26988-embedding-dynamic-settings.cy.spec.js
@@ -37,6 +37,7 @@ describeEE("issue 26988", () => {
openStaticEmbeddingModal({
activeTab: "appearance",
previewMode: "preview",
+ acceptTerms: false
});
cy.wait("@dashboard");
diff --git a/enterprise/backend/test/metabase_enterprise/serialization/v2/e2e_test.clj b/enterprise/backend/test/metabase_enterprise/serialization/v2/e2e_test.clj
index 909a1ccf86923724cc46f2af9ee51182e7a130e7..b14cda6902c14f49a7f3fd8b13eb5e5b624e68e1 100644
--- a/enterprise/backend/test/metabase_enterprise/serialization/v2/e2e_test.clj
+++ b/enterprise/backend/test/metabase_enterprise/serialization/v2/e2e_test.clj
@@ -897,6 +897,7 @@
show-homepage-xrays
show-lighthouse-illustration
show-metabot
+ show-static-embed-terms
site-locale
site-name
source-address-header
diff --git a/frontend/src/metabase-types/api/mocks/settings.ts b/frontend/src/metabase-types/api/mocks/settings.ts
index ecd5b75012caea99874168bdd63e1fbd54f4f0fe..23d3067bfd21ecd00827028d4323f8a711ad1d0e 100644
--- a/frontend/src/metabase-types/api/mocks/settings.ts
+++ b/frontend/src/metabase-types/api/mocks/settings.ts
@@ -164,6 +164,7 @@ export const createMockSettings = (
engines: createMockEngines(),
"has-user-setup": true,
"hide-embed-branding?": true,
+ "show-static-embed-terms": true,
"ga-enabled": false,
"google-auth-auto-create-accounts-domain": null,
"google-auth-client-id": null,
diff --git a/frontend/src/metabase-types/api/settings.ts b/frontend/src/metabase-types/api/settings.ts
index a358cf69002b5434fb83fedab2c85e0627e581f4..2881cb4dcdb09e205490957375aa656244dff2b5 100644
--- a/frontend/src/metabase-types/api/settings.ts
+++ b/frontend/src/metabase-types/api/settings.ts
@@ -281,6 +281,7 @@ export interface Settings {
"uploads-table-prefix": string | null;
"user-visibility": string | null;
"last-acknowledged-version": string | null;
+ "show-static-embed-terms": boolean | null;
}
export type SettingKey = keyof Settings;
diff --git a/frontend/src/metabase/admin/settings/settings.js b/frontend/src/metabase/admin/settings/settings.js
index dbcca23184fe1cfcb3f4ed139e4e2668724da707..6cec320dd2de7874e1327db0abc4385f86b697e1 100644
--- a/frontend/src/metabase/admin/settings/settings.js
+++ b/frontend/src/metabase/admin/settings/settings.js
@@ -53,7 +53,7 @@ export const UPDATE_SETTING = "metabase/admin/settings/UPDATE_SETTING";
export const updateSetting = createThunkAction(
UPDATE_SETTING,
function (setting) {
- return async function (dispatch, getState) {
+ return async function (dispatch) {
try {
await SettingsApi.put(setting);
} catch (error) {
diff --git a/frontend/src/metabase/components/ModalContent/ModalContent.tsx b/frontend/src/metabase/components/ModalContent/ModalContent.tsx
index c64b0a7948e3e246179183fc68cafefe8251cd9c..ec05f468cc0f9fa57161a59213b2974a0981df98 100644
--- a/frontend/src/metabase/components/ModalContent/ModalContent.tsx
+++ b/frontend/src/metabase/components/ModalContent/ModalContent.tsx
@@ -35,7 +35,7 @@ export default class ModalContent extends Component<ModalContentProps> {
static propTypes = {
"data-testid": PropTypes.string,
id: PropTypes.string,
- title: PropTypes.string,
+ title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
centeredTitle: PropTypes.bool,
onClose: PropTypes.func,
// takes over the entire screen
diff --git a/frontend/src/metabase/dashboard/containers/DashboardSharingEmbeddingModal/DashboardSharingEmbeddingModal.tsx b/frontend/src/metabase/dashboard/containers/DashboardSharingEmbeddingModal/DashboardSharingEmbeddingModal.tsx
index 273051fcd7f21ca572715ec58dec85be2145cde3..5f60406796c7bdc5da24bdeb71b09ed0e5cc6e13 100644
--- a/frontend/src/metabase/dashboard/containers/DashboardSharingEmbeddingModal/DashboardSharingEmbeddingModal.tsx
+++ b/frontend/src/metabase/dashboard/containers/DashboardSharingEmbeddingModal/DashboardSharingEmbeddingModal.tsx
@@ -43,10 +43,10 @@ export const DashboardSharingEmbeddingModal = (
return (
<EmbedModal isOpen={isOpen} onClose={onClose}>
- {({ embedType, setEmbedType }) => (
+ {({ embedType, goToNextStep }) => (
<EmbedModalContent
embedType={embedType}
- setEmbedType={setEmbedType}
+ goToNextStep={goToNextStep}
className={className}
resource={dashboard}
resourceParameters={parameters}
diff --git a/frontend/src/metabase/public/components/EmbedModal/EmbedModal.styled.tsx b/frontend/src/metabase/public/components/EmbedModal/EmbedModal.styled.tsx
index f9f7c044b3d8700351ac94398b80fea33e05e041..7df65a86e755037a6334a89d1db1e2187a2de39e 100644
--- a/frontend/src/metabase/public/components/EmbedModal/EmbedModal.styled.tsx
+++ b/frontend/src/metabase/public/components/EmbedModal/EmbedModal.styled.tsx
@@ -1,6 +1,24 @@
+import { css } from "@emotion/react";
import styled from "@emotion/styled";
+import { Group } from "metabase/ui";
import { ModalContentActionIcon } from "metabase/components/ModalContent";
+export const EmbedTitleContainer = styled(Group)<{
+ onClick?: () => void;
+}>`
+ ${({ onClick, theme }) => {
+ return (
+ onClick &&
+ css`
+ &:hover * {
+ color: ${theme.colors.brand[1]};
+ cursor: pointer;
+ }
+ `
+ );
+ }}
+`;
+
export const EmbedModalHeaderBackIcon = styled(ModalContentActionIcon)`
- margin: -0.5rem 0 -0.5rem -0.5rem;
+ padding: 0;
`;
diff --git a/frontend/src/metabase/public/components/EmbedModal/EmbedModal.tsx b/frontend/src/metabase/public/components/EmbedModal/EmbedModal.tsx
index 2318cc829ea3def2ad4a42f9f44547162f4aacf8..7904c41a9a069be3410f0d375b2ce3e09d8a4acf 100644
--- a/frontend/src/metabase/public/components/EmbedModal/EmbedModal.tsx
+++ b/frontend/src/metabase/public/components/EmbedModal/EmbedModal.tsx
@@ -1,31 +1,68 @@
import { useState } from "react";
import { t } from "ttag";
+import {
+ EmbedModalHeaderBackIcon,
+ EmbedTitleContainer,
+} from "metabase/public/components/EmbedModal/EmbedModal.styled";
+import { getSetting } from "metabase/selectors/settings";
import { useSelector } from "metabase/lib/redux";
import { getApplicationName } from "metabase/selectors/whitelabel";
import Modal from "metabase/components/Modal";
-import { Divider } from "metabase/ui";
+import { Box, Divider, Text } from "metabase/ui";
import * as MetabaseAnalytics from "metabase/lib/analytics";
+import type { EmbedModalStep } from "./types";
-import { EmbedModalHeaderBackIcon } from "./EmbedModal.styled";
-import type { EmbedType } from "./types";
-
-interface EmbedModalProps {
+type EmbedModalProps = {
isOpen?: boolean;
onClose: () => void;
children: ({
embedType,
- setEmbedType,
+ goToNextStep,
+ goBackToEmbedModal,
}: {
- embedType: EmbedType;
- setEmbedType: (type: EmbedType) => void;
+ embedType: EmbedModalStep;
+ goToNextStep: () => void;
+ goBackToEmbedModal: () => void;
}) => JSX.Element;
-}
+};
+
+const EmbedTitle = ({
+ onClick,
+ label,
+}: {
+ label: string;
+ onClick?: () => void;
+}) => {
+ return (
+ <EmbedTitleContainer onClick={onClick}>
+ {onClick && (
+ <EmbedModalHeaderBackIcon name="chevronleft" onClick={onClick} />
+ )}
+ <Text fz="xl" c="text.1">
+ {label}
+ </Text>
+ </EmbedTitleContainer>
+ );
+};
export const EmbedModal = ({ children, isOpen, onClose }: EmbedModalProps) => {
- const [embedType, setEmbedType] = useState<EmbedType>(null);
+ const shouldShowEmbedTerms = useSelector(state =>
+ getSetting(state, "show-static-embed-terms"),
+ );
+ const [embedType, setEmbedType] = useState<EmbedModalStep>(null);
const applicationName = useSelector(getApplicationName);
- const isEmbeddingStage = embedType === "application";
+ const goToNextStep = () => {
+ if (embedType === null && shouldShowEmbedTerms) {
+ setEmbedType("legalese");
+ } else {
+ setEmbedType("application");
+ }
+ };
+
+ const goBackToEmbedModal = () => {
+ setEmbedType(null);
+ };
const onEmbedClose = () => {
MetabaseAnalytics.trackStructEvent("Sharing Modal", "Modal Closed");
@@ -33,28 +70,29 @@ export const EmbedModal = ({ children, isOpen, onClose }: EmbedModalProps) => {
setEmbedType(null);
};
+ const modalHeaderProps =
+ embedType === null
+ ? {
+ label: t`Embed ${applicationName}`,
+ onClick: undefined,
+ }
+ : {
+ label: t`Static embedding`,
+ onClick: goBackToEmbedModal,
+ };
+
return (
<Modal
isOpen={isOpen}
onClose={onEmbedClose}
- title={
- isEmbeddingStage ? (
- <>
- <EmbedModalHeaderBackIcon
- name="chevronleft"
- onClick={() => setEmbedType(null)}
- />
- {t`Static embedding`}
- </>
- ) : (
- t`Embed ${applicationName}`
- )
- }
+ title={<EmbedTitle {...modalHeaderProps} />}
fit
formModal={false}
>
<Divider />
- {children({ embedType, setEmbedType })}
+ <Box bg="bg.0" h="100%">
+ {children({ embedType, goToNextStep, goBackToEmbedModal })}
+ </Box>
</Modal>
);
};
diff --git a/frontend/src/metabase/public/components/EmbedModal/EmbedModal.unit.spec.tsx b/frontend/src/metabase/public/components/EmbedModal/EmbedModal.unit.spec.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..2c4fe7a8e83bc7966d5f392b0d245586a908ae04
--- /dev/null
+++ b/frontend/src/metabase/public/components/EmbedModal/EmbedModal.unit.spec.tsx
@@ -0,0 +1,117 @@
+import userEvent from "@testing-library/user-event";
+import { Route } from "react-router";
+import { mockSettings } from "__support__/settings";
+import { renderWithProviders, screen, within } from "__support__/ui";
+import { createMockState } from "metabase-types/store/mocks";
+import { Button, Group, Text } from "metabase/ui";
+import { EmbedModal } from "./EmbedModal";
+
+const TestEmbedModal = ({
+ onClose,
+ isOpen,
+}: {
+ onClose: () => void;
+ isOpen?: boolean;
+}): JSX.Element => {
+ return (
+ <EmbedModal isOpen={isOpen} onClose={onClose}>
+ {({ embedType, goToNextStep, goBackToEmbedModal }) => (
+ <Group data-testid="test-embed-modal-content">
+ <Button onClick={goBackToEmbedModal}>Previous</Button>
+ <Text data-testid="test-embed-step">
+ {embedType ?? "Embed Landing"}
+ </Text>
+ <Button onClick={goToNextStep}>Next</Button>
+ </Group>
+ )}
+ </EmbedModal>
+ );
+};
+
+const setup = ({ isOpen = true, showStaticEmbedTerms = true } = {}) => {
+ const onClose = jest.fn();
+
+ renderWithProviders(
+ <Route
+ path="*"
+ component={() => <TestEmbedModal isOpen={isOpen} onClose={onClose} />}
+ ></Route>,
+ {
+ storeInitialState: createMockState({
+ settings: mockSettings({
+ "application-name": "Embed Metabase",
+ "show-static-embed-terms": showStaticEmbedTerms,
+ }),
+ }),
+ initialRoute: "*",
+ withRouter: true,
+ },
+ );
+
+ return { onClose };
+};
+
+describe("EmbedModal", () => {
+ it("should render header and content", () => {
+ setup();
+
+ expect(
+ within(screen.getByTestId("modal-header")).getByText("Embed Metabase"),
+ ).toBeInTheDocument();
+
+ expect(screen.getByTestId("test-embed-modal-content")).toBeInTheDocument();
+
+ expect(screen.getByTestId("test-embed-step")).toHaveTextContent(
+ "Embed Landing",
+ );
+ });
+
+ it("should go to the legalese step when `Next` is clicked", () => {
+ setup();
+
+ userEvent.click(screen.getByText("Next"));
+
+ expect(screen.getByTestId("test-embed-step")).toHaveTextContent("legalese");
+ });
+
+ it("should go to the legalese step then the static embedding step if the user has not accepted the embedding terms", () => {
+ setup({ showStaticEmbedTerms: true });
+ userEvent.click(screen.getByText("Next"));
+ expect(screen.getByTestId("test-embed-step")).toHaveTextContent("legalese");
+
+ userEvent.click(screen.getByText("Next"));
+ expect(screen.getByTestId("test-embed-step")).toHaveTextContent(
+ "application",
+ );
+ });
+
+ it("should immediately go to the static embedding step if the user has accepted the terms", async () => {
+ setup({ showStaticEmbedTerms: false });
+
+ userEvent.click(screen.getByText("Next"));
+ expect(
+ within(screen.getByTestId("modal-header")).getByText("Static embedding"),
+ ).toBeInTheDocument();
+ expect(screen.getByTestId("test-embed-step")).toHaveTextContent(
+ "application",
+ );
+ });
+
+ it("returns to the initial embed modal landing when the user clicks the modal title", () => {
+ setup();
+
+ userEvent.click(screen.getByText("Next"));
+ expect(screen.getByTestId("test-embed-step")).toHaveTextContent("legalese");
+
+ userEvent.click(screen.getByText("Static embedding"));
+ expect(screen.getByTestId("test-embed-step")).toHaveTextContent(
+ "Embed Landing",
+ );
+ });
+
+ it("calls onClose when the modal is closed", () => {
+ const { onClose } = setup();
+ userEvent.click(screen.getByLabelText("close icon"));
+ expect(onClose).toHaveBeenCalled();
+ });
+});
diff --git a/frontend/src/metabase/public/components/EmbedModal/EmbedModalContent/EmbedModalContent.tsx b/frontend/src/metabase/public/components/EmbedModal/EmbedModalContent/EmbedModalContent.tsx
index 5e590c38a6dc96babd9135f5e8e6ecbc1d7aedba..bb51d168a860190721129fc719f85f7cca2784f1 100644
--- a/frontend/src/metabase/public/components/EmbedModal/EmbedModalContent/EmbedModalContent.tsx
+++ b/frontend/src/metabase/public/components/EmbedModal/EmbedModalContent/EmbedModalContent.tsx
@@ -1,5 +1,6 @@
import { useState } from "react";
import _ from "underscore";
+import { LegaleseStep } from "metabase/public/components/widgets/LegaleseStep/LegaleseStep";
import { getSignedPreviewUrl, getSignedToken } from "metabase/public/lib/embed";
import { getSetting } from "metabase/selectors/settings";
import { useSelector } from "metabase/lib/redux";
@@ -15,14 +16,14 @@ import type {
EmbedResource,
EmbedResourceParameter,
EmbedResourceType,
- EmbedType,
+ EmbedModalStep,
} from "../types";
import { SelectEmbedTypePane } from "../SelectEmbedTypePane";
import { EmbedModalContentStatusBar } from "./EmbedModalContentStatusBar";
export interface EmbedModalContentProps {
- embedType: EmbedType;
- setEmbedType: (type: EmbedType) => void;
+ embedType: EmbedModalStep;
+ goToNextStep: () => void;
resource: EmbedResource;
resourceType: EmbedResourceType;
@@ -43,7 +44,7 @@ export const EmbedModalContent = (
): JSX.Element => {
const {
embedType,
- setEmbedType,
+ goToNextStep,
resource,
resourceType,
resourceParameters,
@@ -125,7 +126,7 @@ export const EmbedModalContent = (
embeddingParams,
);
- if (!embedType) {
+ if (embedType == null) {
return (
<SelectEmbedTypePane
resource={resource}
@@ -133,11 +134,15 @@ export const EmbedModalContent = (
onCreatePublicLink={onCreatePublicLink}
onDeletePublicLink={onDeletePublicLink}
getPublicUrl={getPublicUrl}
- onChangeEmbedType={setEmbedType}
+ goToNextStep={goToNextStep}
/>
);
}
+ if (embedType === "legalese") {
+ return <LegaleseStep goToNextStep={goToNextStep} />;
+ }
+
const hasSettingsChanges = !_.isEqual(
resource.embedding_params,
embeddingParams,
diff --git a/frontend/src/metabase/public/components/EmbedModal/EmbedModalContent/EmbedModalContent.unit.spec.tsx b/frontend/src/metabase/public/components/EmbedModal/EmbedModalContent/EmbedModalContent.unit.spec.tsx
index 608b7f0cd9a0a3eb2149baa7c95250d966b3ea2e..2a92cb272feba1234d3d7c201ec4342be8d04f91 100644
--- a/frontend/src/metabase/public/components/EmbedModal/EmbedModalContent/EmbedModalContent.unit.spec.tsx
+++ b/frontend/src/metabase/public/components/EmbedModal/EmbedModalContent/EmbedModalContent.unit.spec.tsx
@@ -149,7 +149,7 @@ function setup({
resource = {} as EmbedResource,
resourceType = "dashboard",
resourceParameters = [],
- setEmbedType = jest.fn(),
+ goToNextStep = jest.fn(),
getPublicUrl = jest.fn(_resource => "some URL"),
onUpdateEmbeddingParams = jest.fn(),
onUpdateEnableEmbedding = jest.fn(),
@@ -159,7 +159,7 @@ function setup({
const view = renderWithProviders(
<EmbedModalContent
embedType={embedType}
- setEmbedType={setEmbedType}
+ goToNextStep={goToNextStep}
resource={resource}
resourceType={resourceType}
resourceParameters={resourceParameters}
@@ -182,7 +182,7 @@ function setup({
return {
...view,
- setEmbedType,
+ goToNextStep,
getPublicUrl,
onUpdateEmbeddingParams,
onUpdateEnableEmbedding,
diff --git a/frontend/src/metabase/public/components/EmbedModal/SelectEmbedTypePane/SelectEmbedTypePane.tsx b/frontend/src/metabase/public/components/EmbedModal/SelectEmbedTypePane/SelectEmbedTypePane.tsx
index 70f8acccdfce592f390618fb03afc90693edd12d..768c7143a46956b22513af1fffe0d2b692404b66 100644
--- a/frontend/src/metabase/public/components/EmbedModal/SelectEmbedTypePane/SelectEmbedTypePane.tsx
+++ b/frontend/src/metabase/public/components/EmbedModal/SelectEmbedTypePane/SelectEmbedTypePane.tsx
@@ -10,7 +10,7 @@ import * as MetabaseAnalytics from "metabase/lib/analytics";
import Link from "metabase/core/components/Link";
import type { ExportFormatType } from "metabase/dashboard/components/PublicLinkPopover/types";
-import type { EmbedResource, EmbedResourceType, EmbedType } from "../types";
+import type { EmbedResource, EmbedResourceType } from "../types";
import { SharingPaneActionButton } from "./SharingPaneButton/SharingPaneButton.styled";
import { SharingPaneButton } from "./SharingPaneButton/SharingPaneButton";
import { PublicEmbedIcon, StaticEmbedIcon } from "./icons";
@@ -22,7 +22,7 @@ interface SelectEmbedTypePaneProps {
onCreatePublicLink: () => void;
onDeletePublicLink: () => void;
getPublicUrl: (publicUuid: string, extension?: ExportFormatType) => string;
- onChangeEmbedType: (embedType: EmbedType) => void;
+ goToNextStep: () => void;
}
export function SelectEmbedTypePane({
@@ -31,7 +31,7 @@ export function SelectEmbedTypePane({
onCreatePublicLink,
onDeletePublicLink,
getPublicUrl,
- onChangeEmbedType,
+ goToNextStep,
}: SelectEmbedTypePaneProps) {
const hasPublicLink = resource.public_uuid != null;
@@ -115,12 +115,11 @@ export function SelectEmbedTypePane({
header={t`Static embed`}
description={t`Securely embed this dashboard in your own application’s server code.`}
illustration={<StaticEmbedIcon />}
- onClick={() => onChangeEmbedType("application")}
+ onClick={goToNextStep}
>
<SharingPaneActionButton
data-testid="sharing-pane-static-embed-button"
fullWidth
- onClick={() => onChangeEmbedType("application")}
>
{resource.enable_embedding ? t`Edit settings` : t`Set this up`}
</SharingPaneActionButton>
diff --git a/frontend/src/metabase/public/components/EmbedModal/SelectEmbedTypePane/SelectEmbedTypePane.unit.spec.tsx b/frontend/src/metabase/public/components/EmbedModal/SelectEmbedTypePane/SelectEmbedTypePane.unit.spec.tsx
index 77ae7ab085bccef43e48c2742eefbce4a1af019a..938f2576df9890d9939519dfa3a486b8b99daad6 100644
--- a/frontend/src/metabase/public/components/EmbedModal/SelectEmbedTypePane/SelectEmbedTypePane.unit.spec.tsx
+++ b/frontend/src/metabase/public/components/EmbedModal/SelectEmbedTypePane/SelectEmbedTypePane.unit.spec.tsx
@@ -29,7 +29,7 @@ const setup = ({
const onCreatePublicLink = jest.fn();
const onDeletePublicLink = jest.fn();
const getPublicUrl = jest.fn(uuid => uuid);
- const onChangeEmbedType = jest.fn();
+ const goToNextStep = jest.fn();
const { history } = renderWithProviders(
<Route
@@ -41,7 +41,7 @@ const setup = ({
onCreatePublicLink={onCreatePublicLink}
onDeletePublicLink={onDeletePublicLink}
getPublicUrl={getPublicUrl}
- onChangeEmbedType={onChangeEmbedType}
+ goToNextStep={goToNextStep}
/>
)}
></Route>,
@@ -58,7 +58,7 @@ const setup = ({
);
return {
- onChangeEmbedType,
+ goToNextStep,
onCreatePublicLink,
onDeletePublicLink,
getPublicUrl,
@@ -77,12 +77,12 @@ describe("SelectEmbedTypePane", () => {
).toBeInTheDocument();
});
- it("should call `onChangeEmbedType` with `application` when `Edit settings` is clicked", () => {
- const { onChangeEmbedType } = setup({ isResourcePublished: true });
+ it("should call `goToNextStep` with `application` when `Edit settings` is clicked", () => {
+ const { goToNextStep } = setup({ isResourcePublished: true });
userEvent.click(screen.getByRole("button", { name: "Edit settings" }));
- expect(onChangeEmbedType).toHaveBeenCalledWith("application");
+ expect(goToNextStep).toHaveBeenCalled();
});
});
@@ -95,12 +95,12 @@ describe("SelectEmbedTypePane", () => {
).toBeInTheDocument();
});
- it("should call `onChangeEmbedType` with `application` when `Set this up` is clicked", () => {
- const { onChangeEmbedType } = setup({ isResourcePublished: false });
+ it("should call `goToNextStep` with `application` when `Set this up` is clicked", () => {
+ const { goToNextStep } = setup({ isResourcePublished: false });
userEvent.click(screen.getByRole("button", { name: "Set this up" }));
- expect(onChangeEmbedType).toHaveBeenCalledWith("application");
+ expect(goToNextStep).toHaveBeenCalled();
});
});
});
diff --git a/frontend/src/metabase/public/components/EmbedModal/StaticEmbedSetupPane/AppearanceSettings.tsx b/frontend/src/metabase/public/components/EmbedModal/StaticEmbedSetupPane/AppearanceSettings.tsx
index db1318fba1927fb0b7c85c8d97d24498ffdb4d0b..bc7c3e464913137cebd2322ef4719eac1fe15a5f 100644
--- a/frontend/src/metabase/public/components/EmbedModal/StaticEmbedSetupPane/AppearanceSettings.tsx
+++ b/frontend/src/metabase/public/components/EmbedModal/StaticEmbedSetupPane/AppearanceSettings.tsx
@@ -15,7 +15,7 @@ import type {
EmbeddingParameters,
EmbedResource,
EmbedResourceType,
- EmbedType,
+ EmbedModalStep,
} from "../types";
import EmbedCodePane from "./EmbedCodePane";
import PreviewPane from "./PreviewPane";
@@ -35,7 +35,7 @@ const DEFAULT_THEME = THEME_OPTIONS[0].value;
export interface AppearanceSettingsProps {
activePane: ActivePreviewPane;
- embedType: EmbedType;
+ embedType: EmbedModalStep;
resource: EmbedResource;
resourceType: EmbedResourceType;
iframeUrl: string;
diff --git a/frontend/src/metabase/public/components/EmbedModal/StaticEmbedSetupPane/OverviewSettings.tsx b/frontend/src/metabase/public/components/EmbedModal/StaticEmbedSetupPane/OverviewSettings.tsx
index 529dd31e53df2f15a4de1ec2713fb312280b5bab..06c8afa3ebf187f1c85c36e8c9b5aac578aaa26c 100644
--- a/frontend/src/metabase/public/components/EmbedModal/StaticEmbedSetupPane/OverviewSettings.tsx
+++ b/frontend/src/metabase/public/components/EmbedModal/StaticEmbedSetupPane/OverviewSettings.tsx
@@ -8,7 +8,7 @@ import type {
EmbeddingParameters,
EmbedResource,
EmbedResourceType,
- EmbedType,
+ EmbedModalStep,
EmbeddingDisplayOptions,
} from "../types";
import EmbedCodePane from "./EmbedCodePane";
@@ -16,7 +16,7 @@ import { SettingsTabLayout } from "./StaticEmbedSetupPane.styled";
import { StaticEmbedSetupPaneSettingsContentSection } from "./StaticEmbedSetupPaneSettingsContentSection";
export interface OverviewSettingsProps {
- embedType: EmbedType;
+ embedType: EmbedModalStep;
resource: EmbedResource;
resourceType: EmbedResourceType;
iframeUrl: string;
diff --git a/frontend/src/metabase/public/components/EmbedModal/StaticEmbedSetupPane/ParametersSettings.tsx b/frontend/src/metabase/public/components/EmbedModal/StaticEmbedSetupPane/ParametersSettings.tsx
index 0a28be27eae89bdb4d8af1bb82d8150ffdca0c63..41b9d1f3d0816258c96dfeb2a78a171a15db7d2f 100644
--- a/frontend/src/metabase/public/components/EmbedModal/StaticEmbedSetupPane/ParametersSettings.tsx
+++ b/frontend/src/metabase/public/components/EmbedModal/StaticEmbedSetupPane/ParametersSettings.tsx
@@ -16,7 +16,7 @@ import type {
EmbeddingParametersValues,
EmbeddingDisplayOptions,
EmbedResource,
- EmbedType,
+ EmbedModalStep,
EmbedResourceParameterWithValue,
} from "../types";
import EmbedCodePane from "./EmbedCodePane";
@@ -35,7 +35,7 @@ export interface ParametersSettingsProps {
lockedParameters: EmbedResourceParameter[];
parameterValues: EmbeddingParametersValues;
- embedType: EmbedType;
+ embedType: EmbedModalStep;
iframeUrl: string;
token: string;
diff --git a/frontend/src/metabase/public/components/EmbedModal/types.ts b/frontend/src/metabase/public/components/EmbedModal/types.ts
index 8e40ae20cfd4caed56ef531d9a64ca035ba59b71..98c6dece3bacfbfccb2d72432c0aeab5c1e2949c 100644
--- a/frontend/src/metabase/public/components/EmbedModal/types.ts
+++ b/frontend/src/metabase/public/components/EmbedModal/types.ts
@@ -2,7 +2,7 @@ import type { Card, Dashboard } from "metabase-types/api";
export type ActivePreviewPane = "preview" | "code";
-export type EmbedType = "application" | null;
+export type EmbedModalStep = "application" | "legalese" | null;
export type EmbedResource = (Card | Dashboard) & {
embedding_params?: EmbeddingParameters | null;
diff --git a/frontend/src/metabase/public/components/widgets/LegaleseStep/LegaleseStep.styled.tsx b/frontend/src/metabase/public/components/widgets/LegaleseStep/LegaleseStep.styled.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..0465b5c76e4c427af870c37bc090d0435047e450
--- /dev/null
+++ b/frontend/src/metabase/public/components/widgets/LegaleseStep/LegaleseStep.styled.tsx
@@ -0,0 +1,10 @@
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { Stack } from "metabase/ui";
+
+export const LegaleseStepDetailsContainer = styled(Stack)`
+ ${({ theme }) => css`
+ border: 1px solid ${theme.colors.border[0]};
+ border-radius: ${theme.radius.md};
+ `}
+`;
diff --git a/frontend/src/metabase/public/components/widgets/LegaleseStep/LegaleseStep.tsx b/frontend/src/metabase/public/components/widgets/LegaleseStep/LegaleseStep.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ce01436ed15cc21c1153eec7712ea161de65612b
--- /dev/null
+++ b/frontend/src/metabase/public/components/widgets/LegaleseStep/LegaleseStep.tsx
@@ -0,0 +1,58 @@
+import { jt, t } from "ttag";
+import { updateSetting } from "metabase/admin/settings/settings";
+import { useDispatch } from "metabase/lib/redux";
+import ExternalLink from "metabase/core/components/ExternalLink";
+import { LegaleseStepDetailsContainer } from "metabase/public/components/widgets/LegaleseStep/LegaleseStep.styled";
+import { Text, Button, Center, Stack, Title } from "metabase/ui";
+
+export const LegaleseStep = ({
+ goToNextStep,
+}: {
+ goToNextStep: () => void;
+}) => {
+ const dispatch = useDispatch();
+
+ const onAcceptTerms = () => {
+ dispatch(
+ updateSetting({
+ key: "show-static-embed-terms",
+ value: false,
+ }),
+ );
+ goToNextStep();
+ };
+
+ return (
+ <Center bg="white" px="18rem" pt="6.25rem" pb="11.75rem">
+ <Stack align="center" spacing="3rem">
+ <Title order={2} fz="1.25rem">{t`First, some legalese`}</Title>
+
+ <LegaleseStepDetailsContainer p="lg" w="40rem">
+ <Text fw={700}>
+ {jt`By clicking "Agree and continue" you're agreeing to ${(
+ <ExternalLink
+ key="embed-license-link"
+ href="https://metabase.com/license/embedding"
+ target="_blank"
+ >
+ {t`our embedding license.`}
+ </ExternalLink>
+ )}`}
+ </Text>
+ <Text>
+ {t`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.`}
+ </Text>
+ <Text>
+ {t`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.`}
+ </Text>
+ </LegaleseStepDetailsContainer>
+
+ <Button
+ variant="filled"
+ onClick={onAcceptTerms}
+ data-testid="accept-legalese-terms-button"
+ >{t`Agree and continue`}</Button>
+ </Stack>
+ </Center>
+ );
+};
diff --git a/frontend/src/metabase/public/components/widgets/LegaleseStep/LegaleseStep.unit.spec.tsx b/frontend/src/metabase/public/components/widgets/LegaleseStep/LegaleseStep.unit.spec.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c6b30048a57e40c43cf5cd05a915f8ad295d975c
--- /dev/null
+++ b/frontend/src/metabase/public/components/widgets/LegaleseStep/LegaleseStep.unit.spec.tsx
@@ -0,0 +1,67 @@
+import userEvent from "@testing-library/user-event";
+import fetchMock from "fetch-mock";
+import {
+ setupPropertiesEndpoints,
+ setupSettingsEndpoints,
+} from "__support__/server-mocks";
+import { renderWithProviders, screen } from "__support__/ui";
+import {
+ createMockSettingDefinition,
+ createMockSettings,
+} from "metabase-types/api/mocks";
+import { LegaleseStep } from "./LegaleseStep";
+
+const setup = () => {
+ const goToNextStep = jest.fn();
+
+ setupSettingsEndpoints([
+ createMockSettingDefinition({
+ key: "show-static-embed-terms",
+ value: true,
+ }),
+ ]);
+
+ setupPropertiesEndpoints(createMockSettings());
+
+ renderWithProviders(<LegaleseStep goToNextStep={goToNextStep} />);
+
+ return { goToNextStep };
+};
+
+describe("LegaleseStep", () => {
+ it("should render", () => {
+ setup();
+
+ expect(screen.getByText("First, some legalese")).toBeInTheDocument();
+ expect(
+ screen.getByText('By clicking "Agree and continue" you\'re agreeing to'),
+ ).toBeInTheDocument();
+ expect(
+ screen.getByText(
+ `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.`,
+ ),
+ ).toBeInTheDocument();
+ expect(
+ screen.getByText(
+ "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.",
+ ),
+ ).toBeInTheDocument();
+ expect(screen.getByText("Agree and continue")).toBeInTheDocument();
+ });
+
+ it("calls goToNextStep and updates setting on clicking 'Agree and continue'", async () => {
+ const settingPutCalls = fetchMock.put(
+ "path:/api/setting/show-static-embed-terms",
+ {},
+ );
+
+ const { goToNextStep } = setup();
+ userEvent.click(screen.getByText("Agree and continue"));
+
+ expect(settingPutCalls.calls().length).toBe(1);
+ expect(await settingPutCalls.lastCall()?.request?.json()).toEqual({
+ value: false,
+ });
+ expect(goToNextStep).toHaveBeenCalled();
+ });
+});
diff --git a/frontend/src/metabase/query_builder/components/QuestionEmbedWidget/QuestionEmbedWidget.tsx b/frontend/src/metabase/query_builder/components/QuestionEmbedWidget/QuestionEmbedWidget.tsx
index 9d7406be4cf82bcb3393418d3574e2f832a77bf1..e4c23a50ef48e0918bb648bf1ed4d10e4c2548a2 100644
--- a/frontend/src/metabase/query_builder/components/QuestionEmbedWidget/QuestionEmbedWidget.tsx
+++ b/frontend/src/metabase/query_builder/components/QuestionEmbedWidget/QuestionEmbedWidget.tsx
@@ -42,10 +42,10 @@ export const QuestionEmbedWidget = (props: QuestionEmbedWidgetProps) => {
return (
<EmbedModal onClose={onClose}>
- {({ embedType, setEmbedType }) => (
+ {({ embedType, goToNextStep }) => (
<EmbedModalContent
embedType={embedType}
- setEmbedType={setEmbedType}
+ goToNextStep={goToNextStep}
className={className}
resource={card}
resourceType="question"
diff --git a/src/metabase/util/embed.clj b/src/metabase/util/embed.clj
index 701c7f02d3c33d094bde37a4d26bb343e8ab53ac..75dd068fd1ab740e37971e6cf04a67752c942813 100644
--- a/src/metabase/util/embed.clj
+++ b/src/metabase/util/embed.clj
@@ -6,8 +6,10 @@
[cheshire.core :as json]
[clojure.string :as str]
[hiccup.core :refer [html]]
- [metabase.models.setting :as setting]
+ [metabase.config :as config]
+ [metabase.models.setting :as setting :refer [defsetting]]
[metabase.public-settings :as public-settings]
+ [metabase.public-settings.premium-features :as premium-features]
[metabase.util :as u]
[metabase.util.i18n :refer [deferred-tru trs tru]]
[ring.util.codec :as codec]))
@@ -55,7 +57,7 @@
;;; ----------------------------------------------- EMBEDDING UTIL FNS -----------------------------------------------
-(setting/defsetting embedding-secret-key
+(defsetting embedding-secret-key
(deferred-tru "Secret key used to sign JSON Web Tokens for requests to `/api/embed` endpoints.")
:visibility :admin
:audit :no-value
@@ -105,3 +107,13 @@
[unsigned-token keyseq]
(or (get-in unsigned-token keyseq)
(throw (ex-info (tru "Token is missing value for keypath {0}" keyseq) {:status-code 400}))))
+
+(defsetting show-static-embed-terms
+ (deferred-tru "Check if the static embedding licensing should be hidden in the static embedding flow")
+ :type :boolean
+ :default true
+ :export? true
+ :getter (fn []
+ (if-not (and config/ee-available? (:valid (premium-features/token-status)))
+ (setting/get-value-of-type :boolean :show-static-embed-terms)
+ false)))
diff --git a/test/metabase/util/embed_test.clj b/test/metabase/util/embed_test.clj
index 5e26ada1bc69f4a0412529d77ae6d58b763d1adf..19a5648cbc384b08e57ce6cbe61aa64de98add08 100644
--- a/test/metabase/util/embed_test.clj
+++ b/test/metabase/util/embed_test.clj
@@ -3,6 +3,10 @@
[buddy.sign.jwt :as jwt]
[clojure.test :refer :all]
[crypto.random :as crypto-random]
+ [metabase.config :as config]
+ [metabase.public-settings.premium-features :as premium-features]
+ [metabase.public-settings.premium-features-test
+ :as premium-features-test]
[metabase.test :as mt]
[metabase.util.embed :as embed]))
@@ -21,3 +25,32 @@
clojure.lang.ExceptionInfo
#"JWT `alg` cannot be `none`"
(embed/unsign token-with-alg-none))))))
+
+(deftest show-static-embed-terms-test
+ (mt/with-test-user :crowberto
+ (mt/with-temporary-setting-values [show-static-embed-terms nil]
+ (testing "Check if the user needs to accept the embedding licensing terms before static embedding"
+ (when-not config/ee-available?
+ (testing "should return true when user is OSS and has not accepted licensing terms"
+ (is (= (embed/show-static-embed-terms) true)))
+ (testing "should return false when user is OSS and has already accepted licensing terms"
+ (embed/show-static-embed-terms! false)
+ (is (= (embed/show-static-embed-terms) false))))
+ (when config/ee-available?
+ (testing "should return false when an EE user has a valid token"
+ (with-redefs [premium-features/fetch-token-status (fn [_x]
+ {:valid true
+ :status "fake"
+ :features ["test" "fixture"]
+ :trial false})]
+ (mt/with-temporary-setting-values [premium-embedding-token premium-features-test/random-fake-token]
+ (is (= (embed/show-static-embed-terms) false))
+ (embed/show-static-embed-terms! false)
+ (is (= (embed/show-static-embed-terms) false)))))
+ (testing "when an EE user doesn't have a valid token"
+ (mt/with-temporary-setting-values [premium-embedding-token nil show-static-embed-terms nil]
+ (testing "should return true when the user has not accepted licensing terms"
+ (is (= (embed/show-static-embed-terms) true)))
+ (testing "should return false when the user has already accepted licensing terms"
+ (embed/show-static-embed-terms! false)
+ (is (= (embed/show-static-embed-terms) false))))))))))