fix header being rendered (with its border) on dashboard embedded wit…

…h titled=false and only one tab (#41399) (#41407)

* fix header being rendered (with its border) on dashboard embedded with titled=false and only one tab

* embedframe-header -> embed-frame-header

Co-authored-by: Nicolò Pretto <info@npretto.com>

frontend/src/metabase/public/components/EmbedFrame/EmbedFrame.tsx

@@ -181,7 +181,10 @@ function EmbedFrame({
     >
       <ContentContainer>
         {hasHeader && (
-          <Header className="EmbedFrame-header">
+          <Header
+            className="EmbedFrame-header"
+            data-testid="embed-frame-header"
+          >
             {finalName && (
               <TitleAndDescriptionContainer>
                 <FixedWidthContainer

frontend/src/metabase/public/containers/PublicDashboard/PublicDashboard.jsx

@@ -178,7 +178,11 @@ class PublicDashboardInner extends Component {
         actionButtons={
           buttons.length > 0 && <div className="flex">{buttons}</div>
         }
-        dashboardTabs={<DashboardTabs location={this.props.location} />}
+        dashboardTabs={
+          dashboard?.tabs?.length > 1 && (
+            <DashboardTabs location={this.props.location} />
+          )
+        }
       >
         <LoadingAndErrorWrapper
           className={cx({

frontend/src/metabase/public/containers/PublicDashboard/PublicDashboard.unit.spec.tsx

@@ -14,35 +14,51 @@ const MOCK_TOKEN =
   "eyJhbGciOiJIUzI1NiJ9.eyJyZXNvdXJjZSI6eyJkYXNoYm9hcmQiOjExfSwicGFyYW1zIjp7fSwiaWF0IjoxNzEyNjg0NTA1LCJfZW1iZWRkaW5nX3BhcmFtcyI6e319.WbZTB-cQYh4gjh61ZzoLOcFbJ6j6RlOY3GS4fwzv3W4";
 const DASHBOARD_TITLE = '"My test dash"';
 
-const DASHBOARD_WITH_TABS = createMockDashboard({
-  id: 1,
-  name: DASHBOARD_TITLE,
-  parameters: [],
-  dashcards: [],
-  tabs: [
-    createMockDashboardTab({ id: 1, name: "Tab 1" }),
-    createMockDashboardTab({ id: 2, name: "Tab 2" }),
-  ],
-});
-
 describe("PublicDashboard", () => {
   it("should display dashboard tabs", async () => {
-    await setup();
+    await setup({ numberOfTabs: 2 });
 
     expect(screen.getByText("Tab 1")).toBeInTheDocument();
     expect(screen.getByText("Tab 2")).toBeInTheDocument();
   });
 
   it("should display dashboard tabs if title is disabled (metabase#41195)", async () => {
-    await setup({ hash: "titled=false" });
+    await setup({ hash: "titled=false", numberOfTabs: 2 });
 
     expect(screen.getByText("Tab 1")).toBeInTheDocument();
     expect(screen.getByText("Tab 2")).toBeInTheDocument();
   });
+
+  it("should not display the header if title is disabled and there is only one tab (metabase#41393)", async () => {
+    await setup({ hash: "titled=false", numberOfTabs: 1 });
+
+    expect(screen.queryByText("Tab 1")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("embed-frame-header")).not.toBeInTheDocument();
+  });
+
+  it("should display the header if title is enabled and there is only one tab", async () => {
+    await setup({ numberOfTabs: 1, hash: "titled=true" });
+
+    expect(screen.getByTestId("embed-frame-header")).toBeInTheDocument();
+    expect(screen.queryByText("Tab 1")).not.toBeInTheDocument();
+  });
 });
 
-async function setup({ hash }: { hash?: string } = {}) {
-  setupEmbedDashboardEndpoints(MOCK_TOKEN, DASHBOARD_WITH_TABS);
+async function setup({
+  hash,
+  numberOfTabs = 1,
+}: { hash?: string; numberOfTabs?: number } = {}) {
+  const dashboard = createMockDashboard({
+    id: 1,
+    name: DASHBOARD_TITLE,
+    parameters: [],
+    dashcards: [],
+    tabs: Array.from({ length: numberOfTabs }, (_, i) =>
+      createMockDashboardTab({ id: i + 1, name: `Tab ${i + 1}` }),
+    ),
+  });
+
+  setupEmbedDashboardEndpoints(MOCK_TOKEN, dashboard);
 
   renderWithProviders(
     <Route path="embed/dashboard/:token" component={PublicDashboard} />,