Fix can't select dashboard tabs in interactive embedding with parameter `header=false` (#39007)

* Remove full-app to a newer term

* Fix dashboard not loading in interactive embedding with header=false
header=false

* Fix can't choose dashboard tabs in interactive embedding w/ header=false

e2e/test/scenarios/embedding/embedding-full-app.cy.spec.js → e2e/test/scenarios/embedding/interactive-embedding.cy.spec.js

@@ -15,6 +15,9 @@ import {
   getTextCardDetails,
   updateDashboardCards,
   getNextUnsavedDashboardCardId,
+  dashboardGrid,
+  createDashboardWithTabs,
+  goToTab,
 } from "e2e/support/helpers";
 import { createMockDashboardCard } from "metabase-types/api/mocks";
 
@@ -306,6 +309,39 @@ describeEE("scenarios > embedding > full app", () => {
       cy.findByRole("heading", { name: "Orders in a dashboard" }).should(
         "not.exist",
       );
+      dashboardGrid().findByText("Rows 1-6 of first 2000").should("be.visible");
+    });
+
+    it("should hide the dashboard with multiple tabs header by a param and allow selecting tabs (metabase#38429, metabase#39002)", () => {
+      const FIRST_TAB = { id: 1, name: "Tab 1" };
+      const SECOND_TAB = { id: 2, name: "Tab 2" };
+      createDashboardWithTabs({
+        dashboard: {
+          name: "Dashboard with tabs",
+        },
+        tabs: [FIRST_TAB, SECOND_TAB],
+        dashcards: [
+          createMockDashboardCard({
+            dashboard_tab_id: FIRST_TAB.id,
+            card_id: ORDERS_QUESTION_ID,
+            size_x: 10,
+            size_y: 8,
+          }),
+        ],
+      }).then(dashboard => {
+        visitDashboardUrl({
+          url: `/dashboard/${dashboard.id}`,
+          qs: { header: false },
+        });
+      });
+      cy.findByRole("heading", { name: "Orders in a dashboard" }).should(
+        "not.exist",
+      );
+      dashboardGrid().findByText("Rows 1-6 of first 2000").should("be.visible");
+      goToTab(SECOND_TAB.name);
+      cy.findByTestId("dashboard-parameters-and-cards")
+        .findByText("There's nothing here, yet.")
+        .should("be.visible");
     });
 
     it("should hide the dashboard's additional info by a param", () => {

frontend/src/metabase/dashboard/components/Dashboard/Dashboard.tsx

@@ -205,7 +205,6 @@ function DashboardInner(props: DashboardProps) {
     isAutoApplyFilters,
     isEditing,
     isFullscreen,
-    isHeaderVisible,
     isNavigatingBackToDashboard,
     isNightMode,
     isSharing,
@@ -484,21 +483,24 @@ function DashboardInner(props: DashboardProps) {
     >
       {() => (
         <DashboardStyled>
-          {isHeaderVisible && (
-            <DashboardHeaderContainer
-              isFullscreen={isFullscreen}
-              isNightMode={shouldRenderAsNightMode}
-            >
-              <DashboardHeader
-                {...props}
-                onEditingChange={handleSetEditing}
-                setDashboardAttribute={handleSetDashboardAttribute}
-                addParameter={addParameter}
-                parametersWidget={parametersWidget}
-                onSharingClick={handleToggleSharing}
-              />
-            </DashboardHeaderContainer>
-          )}
+          <DashboardHeaderContainer
+            isFullscreen={isFullscreen}
+            isNightMode={shouldRenderAsNightMode}
+          >
+            {/**
+             * Do not conditionally render `<DashboardHeader />` as it calls
+             * `useDashboardTabs` under the hood. This hook sets `selectedTabId`
+             * in Redux state which kicks off a fetch for the dashboard cards.
+             */}
+            <DashboardHeader
+              {...props}
+              onEditingChange={handleSetEditing}
+              setDashboardAttribute={handleSetDashboardAttribute}
+              addParameter={addParameter}
+              parametersWidget={parametersWidget}
+              onSharingClick={handleToggleSharing}
+            />
+          </DashboardHeaderContainer>
 
           <DashboardBody isEditingOrSharing={isEditing || isSharing}>
             <ParametersAndCardsContainer

frontend/src/metabase/dashboard/components/DashboardHeader/DashboardHeaderView.tsx

@@ -6,7 +6,10 @@ import { t } from "ttag";
 
 import EditBar from "metabase/components/EditBar";
 import { updateDashboard } from "metabase/dashboard/actions";
-import { getIsSidebarOpen } from "metabase/dashboard/selectors";
+import {
+  getIsHeaderVisible,
+  getIsSidebarOpen,
+} from "metabase/dashboard/selectors";
 import { color } from "metabase/lib/colors";
 import { useDispatch, useSelector } from "metabase/lib/redux";
 import { PLUGIN_COLLECTION_COMPONENTS } from "metabase/plugins";
@@ -70,6 +73,7 @@ export function DashboardHeaderComponent({
   const dispatch = useDispatch();
 
   const isSidebarOpen = useSelector(getIsSidebarOpen);
+  const isDashboardHeaderVisible = useSelector(getIsHeaderVisible);
 
   const _headerButtons = useMemo(
     () => (
@@ -120,52 +124,54 @@ export function DashboardHeaderComponent({
         isFixedWidth={dashboard?.width === "fixed"}
         isSidebarOpen={isSidebarOpen}
       >
-        <HeaderRow
-          className={cx("QueryBuilder-section", headerClassName)}
-          data-testid="dashboard-header"
-          ref={header}
-        >
-          <HeaderFixedWidthContainer
-            data-testid="fixed-width-dashboard-header"
-            isNavBarOpen={isNavBarOpen}
-            isFixedWidth={dashboard?.width === "fixed"}
+        {isDashboardHeaderVisible && (
+          <HeaderRow
+            className={cx("QueryBuilder-section", headerClassName)}
+            data-testid="dashboard-header"
+            ref={header}
           >
-            <HeaderContent
-              role="heading"
-              hasSubHeader
-              showSubHeader={showSubHeader}
+            <HeaderFixedWidthContainer
+              data-testid="fixed-width-dashboard-header"
+              isNavBarOpen={isNavBarOpen}
+              isFixedWidth={dashboard?.width === "fixed"}
             >
-              <HeaderCaptionContainer>
-                <HeaderCaption
-                  key={dashboard.name}
-                  initialValue={dashboard.name}
-                  placeholder={t`Add title`}
-                  isDisabled={!dashboard.can_write}
-                  data-testid="dashboard-name-heading"
-                  onChange={handleUpdateCaption}
-                />
-                <PLUGIN_COLLECTION_COMPONENTS.CollectionInstanceAnalyticsIcon
-                  color={color("brand")}
-                  collection={collection}
-                  entity="dashboard"
-                />
-              </HeaderCaptionContainer>
-              <HeaderBadges>
-                {isLastEditInfoVisible && (
-                  <HeaderLastEditInfoLabel
-                    item={dashboard}
-                    onClick={onLastEditInfoClick}
-                    className=""
+              <HeaderContent
+                role="heading"
+                hasSubHeader
+                showSubHeader={showSubHeader}
+              >
+                <HeaderCaptionContainer>
+                  <HeaderCaption
+                    key={dashboard.name}
+                    initialValue={dashboard.name}
+                    placeholder={t`Add title`}
+                    isDisabled={!dashboard.can_write}
+                    data-testid="dashboard-name-heading"
+                    onChange={handleUpdateCaption}
                   />
-                )}
-              </HeaderBadges>
-            </HeaderContent>
+                  <PLUGIN_COLLECTION_COMPONENTS.CollectionInstanceAnalyticsIcon
+                    color={color("brand")}
+                    collection={collection}
+                    entity="dashboard"
+                  />
+                </HeaderCaptionContainer>
+                <HeaderBadges>
+                  {isLastEditInfoVisible && (
+                    <HeaderLastEditInfoLabel
+                      item={dashboard}
+                      onClick={onLastEditInfoClick}
+                      className=""
+                    />
+                  )}
+                </HeaderBadges>
+              </HeaderContent>
 
-            <HeaderButtonsContainer isNavBarOpen={isNavBarOpen}>
-              {_headerButtons}
-            </HeaderButtonsContainer>
-          </HeaderFixedWidthContainer>
-        </HeaderRow>
+              <HeaderButtonsContainer isNavBarOpen={isNavBarOpen}>
+                {_headerButtons}
+              </HeaderButtonsContainer>
+            </HeaderFixedWidthContainer>
+          </HeaderRow>
+        )}
         <HeaderRow>
           <HeaderFixedWidthContainer
             data-testid="fixed-width-dashboard-tabs"