hiding Card Parameter Mapper header on small cards (#32272)

* hiding Card Parameter Mapper header on small cards

* adjusting for mobile, changing font size

* moving size map to sizes.ts

frontend/src/metabase/dashboard/components/DashCard/DashCardParameterMapper/DashCardCardParameterMapper.jsx

@@ -4,6 +4,11 @@ import { connect } from "react-redux";
 import _ from "underscore";
 import { t } from "ttag";
 
+import {
+  MOBILE_HEIGHT_BY_DISPLAY_TYPE,
+  MOBILE_DEFAULT_CARD_HEIGHT,
+} from "metabase/visualizations/shared/utils/sizes";
+
 import { Icon } from "metabase/core/components/Icon";
 import Tooltip from "metabase/core/components/Tooltip";
 import TippyPopover from "metabase/components/Popover/TippyPopover";
@@ -172,13 +177,19 @@ export function DashCardCardParameterMapper({
     ]);
 
   const headerContent = useMemo(() => {
-    if (!isVirtual && !(isNative && isDisabled)) {
-      return t`Column to filter on`;
-    } else if (dashcard.size_y !== 1 || isMobile) {
-      return t`Variable to map to`;
-    } else {
-      return null;
+    const layoutHeight = isMobile
+      ? MOBILE_HEIGHT_BY_DISPLAY_TYPE[dashcard.card.display] ||
+        MOBILE_DEFAULT_CARD_HEIGHT
+      : dashcard.size_y;
+
+    if (layoutHeight > 2) {
+      if (!isVirtual && !(isNative && isDisabled)) {
+        return t`Column to filter on`;
+      } else {
+        return t`Variable to map to`;
+      }
     }
+    return null;
   }, [dashcard, isVirtual, isNative, isDisabled, isMobile]);
 
   const mappingInfoText =
@@ -189,7 +200,7 @@ export function DashCardCardParameterMapper({
     }[virtualCardType] ?? "";
 
   return (
-    <Container>
+    <Container isSmall={!isMobile && dashcard.size_y < 2}>
       {hasSeries && <CardLabel>{card.name}</CardLabel>}
       {isVirtual && isDisabled ? (
         showVirtualDashCardInfoText(dashcard, isMobile) ? (

frontend/src/metabase/dashboard/components/DashCard/DashCardParameterMapper/DashCardCardParameterMapper.styled.tsx

@@ -7,8 +7,8 @@ import { Icon } from "metabase/core/components/Icon";
 import Button from "metabase/core/components/Button";
 import ExternalLink from "metabase/core/components/ExternalLink";
 
-export const Container = styled.div`
-  margin: ${space(1)} 0;
+export const Container = styled.div<{ isSmall: boolean }>`
+  margin: ${({ isSmall }) => (isSmall ? 0 : space(1))} 0;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -76,7 +76,6 @@ export const TargetButton = styled.div<{ variant: string }>`
   background-color: ${color("white")};
   text-weight: bold;
   cursor: pointer;
-  font-size: 1.2em;
   border: 2px solid ${color("brand")};
   border-radius: 8px;
   min-height: 30px;

frontend/src/metabase/dashboard/components/DashCard/DashCardParameterMapper/DashCardCardParameterMapper.unit.spec.jsx

@@ -5,6 +5,7 @@ import {
   createMockCard,
   createMockDashboardOrderedCard,
   createMockActionDashboardCard,
+  createMockStructuredDatasetQuery,
 } from "metabase-types/api/mocks";
 
 import { getMetadata } from "metabase/selectors/metadata";
@@ -89,4 +90,88 @@ describe("DashCardParameterMapper", () => {
     expect(getIcon("info")).toBeInTheDocument();
     expect(screen.getByLabelText(/in text cards/i)).toBeInTheDocument();
   });
+
+  it("should render a different header for virtual cards", () => {
+    const textCard = createMockCard({ dataset_query: {}, display: "text" });
+    setup({
+      card: textCard,
+      dashcard: createMockDashboardOrderedCard({
+        card: textCard,
+        size_y: 3,
+        visualization_settings: {
+          virtual_card: textCard,
+        },
+      }),
+      mappingOptions: ["foo", "bar"],
+    });
+    expect(screen.getByText(/Variable to map to/i)).toBeInTheDocument();
+  });
+
+  it("should show header content when card is more than 2 units high", () => {
+    const numberCard = createMockCard({
+      dataset_query: createMockStructuredDatasetQuery({}),
+      display: "scalar",
+    });
+    setup({
+      card: numberCard,
+      dashcard: createMockDashboardOrderedCard({
+        card: numberCard,
+        size_y: 3,
+      }),
+      mappingOptions: ["foo", "bar"],
+    });
+    expect(screen.getByText(/Column to filter on/i)).toBeInTheDocument();
+  });
+
+  it("should hide header content when card is less than 3 units high", () => {
+    const numberCard = createMockCard({
+      dataset_query: createMockStructuredDatasetQuery({}),
+      display: "scalar",
+    });
+    setup({
+      card: numberCard,
+      dashcard: createMockDashboardOrderedCard({
+        card: numberCard,
+        size_y: 2,
+      }),
+      mappingOptions: ["foo", "bar"],
+    });
+    expect(screen.queryByText(/Column to filter on/i)).not.toBeInTheDocument();
+  });
+
+  describe("mobile", () => {
+    it("should show header content when card is more than 2 units high", () => {
+      const numberCard = createMockCard({
+        dataset_query: createMockStructuredDatasetQuery({}),
+        display: "scalar",
+      });
+      setup({
+        card: numberCard,
+        dashcard: createMockDashboardOrderedCard({
+          card: numberCard,
+          size_y: 2,
+        }),
+        mappingOptions: ["foo", "bar"],
+        isMobile: true,
+      });
+      expect(screen.getByText(/Column to filter on/i)).toBeInTheDocument();
+    });
+
+    it("should hide header content when card is less than 3 units high", () => {
+      const textCard = createMockCard({ dataset_query: {}, display: "text" });
+      setup({
+        card: textCard,
+        dashcard: createMockDashboardOrderedCard({
+          card: textCard,
+          size_y: 3,
+          visualization_settings: {
+            virtual_card: textCard,
+          },
+        }),
+        mappingOptions: ["foo", "bar"],
+        isMobile: true,
+      });
+      expect(screen.queryByText(/Variable to map to/i)).not.toBeInTheDocument();
+    });
+  });
 });

frontend/src/metabase/dashboard/components/DashboardGrid.jsx

@@ -27,10 +27,16 @@ import {
 } from "metabase/lib/dashboard_grid";
 import { ContentViewportContext } from "metabase/core/context/ContentViewportContext";
 import { addUndo } from "metabase/redux/undo";
+import {
+  MOBILE_HEIGHT_BY_DISPLAY_TYPE,
+  MOBILE_DEFAULT_CARD_HEIGHT,
+} from "metabase/visualizations/shared/utils/sizes";
+
 import { DashboardCard } from "./DashboardGrid.styled";
 
 import GridLayout from "./grid/GridLayout";
 import { generateMobileLayout } from "./grid/utils";
+
 import AddSeriesModal from "./AddSeriesModal/AddSeriesModal";
 import DashCard from "./DashCard";
 
@@ -233,14 +239,8 @@ class DashboardGrid extends Component {
     const desktop = cards.map(this.getLayoutForDashCard);
     const mobile = generateMobileLayout({
       desktopLayout: desktop,
-      defaultCardHeight: 6,
-      heightByDisplayType: {
-        action: 1,
-        link: 1,
-        text: 2,
-        heading: 2,
-        scalar: 4,
-      },
+      defaultCardHeight: MOBILE_DEFAULT_CARD_HEIGHT,
+      heightByDisplayType: MOBILE_HEIGHT_BY_DISPLAY_TYPE,
     });
     return { desktop, mobile };
   }

frontend/src/metabase/dashboard/components/grid/utils.js

@@ -16,7 +16,6 @@ export function sortCardsForMobile(a, b) {
   // for items on the same row, sort by x position
   return a.x - b.x;
 }
-
 export function generateMobileLayout({
   desktopLayout,
   defaultCardHeight,

frontend/src/metabase/visualizations/shared/utils/sizes.ts

@@ -116,3 +116,13 @@ export const getMinSize = (
 export const getDefaultSize = (
   visualizationType: CardDisplayType,
 ): VisualizationSize => getSize(visualizationType, "default");
+
+export const MOBILE_HEIGHT_BY_DISPLAY_TYPE = {
+  action: 1,
+  link: 1,
+  text: 2,
+  heading: 2,
+  scalar: 4,
+};
+
+export const MOBILE_DEFAULT_CARD_HEIGHT = 6;