From 489edea4ad523023a238b594c1e180547b74d1eb Mon Sep 17 00:00:00 2001
From: Oisin Coveney <oisin@metabase.com>
Date: Wed, 10 Apr 2024 13:14:06 +0300
Subject: [PATCH] Convert PreviewPane to TS (#40961)

---
 .../{ => PreviewPane}/PreviewPane.styled.tsx  |  0
 .../PreviewPane.tsx}                          | 25 ++++++-----
 .../PreviewPane/PreviewPane.unit.spec.tsx     | 43 +++++++++++++++++++
 .../StaticEmbedSetupPane/PreviewPane/index.ts |  1 +
 4 files changed, 58 insertions(+), 11 deletions(-)
 rename frontend/src/metabase/public/components/EmbedModal/StaticEmbedSetupPane/{ => PreviewPane}/PreviewPane.styled.tsx (100%)
 rename frontend/src/metabase/public/components/EmbedModal/StaticEmbedSetupPane/{PreviewPane.jsx => PreviewPane/PreviewPane.tsx} (59%)
 create mode 100644 frontend/src/metabase/public/components/EmbedModal/StaticEmbedSetupPane/PreviewPane/PreviewPane.unit.spec.tsx
 create mode 100644 frontend/src/metabase/public/components/EmbedModal/StaticEmbedSetupPane/PreviewPane/index.ts

diff --git a/frontend/src/metabase/public/components/EmbedModal/StaticEmbedSetupPane/PreviewPane.styled.tsx b/frontend/src/metabase/public/components/EmbedModal/StaticEmbedSetupPane/PreviewPane/PreviewPane.styled.tsx
similarity index 100%
rename from frontend/src/metabase/public/components/EmbedModal/StaticEmbedSetupPane/PreviewPane.styled.tsx
rename to frontend/src/metabase/public/components/EmbedModal/StaticEmbedSetupPane/PreviewPane/PreviewPane.styled.tsx
diff --git a/frontend/src/metabase/public/components/EmbedModal/StaticEmbedSetupPane/PreviewPane.jsx b/frontend/src/metabase/public/components/EmbedModal/StaticEmbedSetupPane/PreviewPane/PreviewPane.tsx
similarity index 59%
rename from frontend/src/metabase/public/components/EmbedModal/StaticEmbedSetupPane/PreviewPane.jsx
rename to frontend/src/metabase/public/components/EmbedModal/StaticEmbedSetupPane/PreviewPane/PreviewPane.tsx
index 467d69dd333..401934de060 100644
--- a/frontend/src/metabase/public/components/EmbedModal/StaticEmbedSetupPane/PreviewPane.jsx
+++ b/frontend/src/metabase/public/components/EmbedModal/StaticEmbedSetupPane/PreviewPane/PreviewPane.tsx
@@ -4,19 +4,22 @@ import CS from "metabase/css/core/index.css";
 
 import { PreviewPaneContainer } from "./PreviewPane.styled";
 
-/**
- *
- * @param {object} props
- * @param {string=} props.className
- * @param {string} props.previewUrl
- * @param {boolean} props.isTransparent
- * @param {boolean} props.hidden
- * @returns
- */
-// eslint-disable-next-line react/prop-types
-export function PreviewPane({ className, previewUrl, isTransparent, hidden }) {
+type PreviewPaneProps = {
+  className?: string;
+  previewUrl: string;
+  isTransparent: boolean;
+  hidden: boolean;
+};
+
+export function PreviewPane({
+  className,
+  previewUrl,
+  isTransparent,
+  hidden,
+}: PreviewPaneProps) {
   return (
     <PreviewPaneContainer
+      data-testid="preview-pane-container"
       hidden={hidden}
       isTransparent={isTransparent}
       className={cx(className, CS.flex, CS.relative)}
diff --git a/frontend/src/metabase/public/components/EmbedModal/StaticEmbedSetupPane/PreviewPane/PreviewPane.unit.spec.tsx b/frontend/src/metabase/public/components/EmbedModal/StaticEmbedSetupPane/PreviewPane/PreviewPane.unit.spec.tsx
new file mode 100644
index 00000000000..74382a8b95a
--- /dev/null
+++ b/frontend/src/metabase/public/components/EmbedModal/StaticEmbedSetupPane/PreviewPane/PreviewPane.unit.spec.tsx
@@ -0,0 +1,43 @@
+import { render, screen } from "__support__/ui";
+
+import { PreviewPane } from "./PreviewPane";
+
+const MOCK_PREVIEW_URL = "https://www.example.com/";
+
+type MockPreviewPaneProps = {
+  isTransparent?: boolean;
+  hidden?: boolean;
+};
+
+const setup = ({
+  isTransparent = false,
+  hidden = false,
+}: MockPreviewPaneProps = {}) => {
+  render(
+    <PreviewPane
+      previewUrl={MOCK_PREVIEW_URL}
+      isTransparent={isTransparent}
+      hidden={hidden}
+    />,
+  );
+};
+
+describe("PreviewPane", () => {
+  it("should render the iframe with the provided previewUrl", () => {
+    setup();
+    const iframe = screen.getByTestId("embed-preview-iframe");
+    expect(iframe).toBeInTheDocument();
+    expect(iframe).toHaveAttribute("src", MOCK_PREVIEW_URL);
+  });
+
+  it("should set the iframe attributes correctly", () => {
+    setup();
+    const iframe = screen.getByTestId("embed-preview-iframe");
+    expect(iframe).toHaveAttribute("frameBorder", "0");
+  });
+
+  it("should not render the container if hidden is true", () => {
+    setup({ hidden: true });
+    expect(screen.getByTestId("preview-pane-container")).not.toBeVisible();
+  });
+});
diff --git a/frontend/src/metabase/public/components/EmbedModal/StaticEmbedSetupPane/PreviewPane/index.ts b/frontend/src/metabase/public/components/EmbedModal/StaticEmbedSetupPane/PreviewPane/index.ts
new file mode 100644
index 00000000000..9aef870efbe
--- /dev/null
+++ b/frontend/src/metabase/public/components/EmbedModal/StaticEmbedSetupPane/PreviewPane/index.ts
@@ -0,0 +1 @@
+export * from "./PreviewPane";
-- 
GitLab