Hide header info icon when card is too small (#34929)

frontend/src/metabase/visualizations/components/ChartCaption.tsx

@@ -13,6 +13,7 @@ interface ChartCaptionProps {
   settings: VisualizationSettings;
   icon?: IconProps;
   actionButtons?: ReactNode;
+  width: number;
   onChangeCardAndRun: (data: Record<string, unknown>) => void;
 }
 
@@ -22,6 +23,7 @@ const ChartCaption = ({
   icon,
   actionButtons,
   onChangeCardAndRun,
+  width,
 }: ChartCaptionProps) => {
   const title = settings["card.title"] ?? series[0].card.name;
   const description = settings["card.description"];
@@ -48,6 +50,7 @@ const ChartCaption = ({
       icon={icon}
       actionButtons={actionButtons}
       onSelectTitle={canSelectTitle ? handleSelectTitle : undefined}
+      width={width}
     />
   );
 };

frontend/src/metabase/visualizations/components/ChartCaption.unit.spec.tsx

 import type { ComponentPropsWithoutRef } from "react";
 import _ from "underscore";
 import userEvent from "@testing-library/user-event";
-import { render, screen, getIcon } from "__support__/ui";
+import { render, screen, getIcon, queryIcon } from "__support__/ui";
 
 import type { Card, Series } from "metabase-types/api";
 import {
@@ -47,6 +47,7 @@ const setup = (props: Partial<Props> = {}) => {
     series = getSeries(),
     onChangeCardAndRun = _.noop,
     settings = {},
+    width = 200,
   } = props;
 
   render(
@@ -54,6 +55,7 @@ const setup = (props: Partial<Props> = {}) => {
       series={series}
       onChangeCardAndRun={onChangeCardAndRun}
       settings={settings}
+      width={width}
       {...props}
     />,
   );
@@ -87,4 +89,14 @@ describe("ChartCaption", () => {
     expect(tooltipContent).toBeInTheDocument();
     expect(tooltipContent).toHaveTextContent("link");
   });
+
+  it("should hide description icon if too narrow", () => {
+    setup({
+      width: 50,
+      series: getSeries({ card: createMockCard({ name: "card name" }) }),
+      settings: { "card.description": "description" },
+    });
+
+    expect(queryIcon("info")).not.toBeInTheDocument();
+  });
 });

frontend/src/metabase/visualizations/components/LineAreaBarChart.jsx

@@ -97,6 +97,7 @@ export default class LineAreaBarChart extends Component {
     showTitle: PropTypes.bool,
     isDashboard: PropTypes.bool,
     headerIcon: PropTypes.object,
+    width: PropTypes.number,
   };
 
   static defaultProps = {};
@@ -262,6 +263,7 @@ export default class LineAreaBarChart extends Component {
       onRemoveSeries,
       settings,
       canRemoveSeries,
+      width,
     } = this.props;
 
     // Note (EmmadUsmani): Stacked charts should be reversed so series are stacked
@@ -296,6 +298,7 @@ export default class LineAreaBarChart extends Component {
             icon={headerIcon}
             actionButtons={actionButtons}
             onSelectTitle={canSelectTitle ? this.handleSelectTitle : undefined}
+            width={width}
           />
         )}
         <LegendLayout

frontend/src/metabase/visualizations/components/Visualization/Visualization.jsx

@@ -466,6 +466,7 @@ class Visualization extends PureComponent {
                 settings={settings}
                 icon={headerIcon}
                 actionButtons={extra}
+                width={width}
                 onChangeCardAndRun={
                   this.props.onChangeCardAndRun && !replacementContent
                     ? this.handleOnChangeCardAndRun

frontend/src/metabase/visualizations/components/legend/LegendCaption.jsx

@@ -19,8 +19,14 @@ const propTypes = {
   icon: PropTypes.object,
   actionButtons: PropTypes.node,
   onSelectTitle: PropTypes.func,
+  width: PropTypes.number,
 };
 
+function shouldHideDescription(width) {
+  const HIDE_DESCRIPTION_THRESHOLD = 100;
+  return width != null && width < HIDE_DESCRIPTION_THRESHOLD;
+}
+
 const LegendCaption = ({
   className,
   title,
@@ -28,6 +34,7 @@ const LegendCaption = ({
   icon,
   actionButtons,
   onSelectTitle,
+  width,
 }) => {
   return (
     <LegendCaptionRoot className={className} data-testid="legend-caption">
@@ -39,7 +46,7 @@ const LegendCaption = ({
         <Ellipsified>{title}</Ellipsified>
       </LegendLabel>
       <LegendRightContent>
-        {description && (
+        {description && !shouldHideDescription(width) && (
           <Tooltip
             tooltip={
               <Markdown dark disallowHeading unstyleLinks>

frontend/src/metabase/visualizations/visualizations/RowChart/RowChart.tsx

@@ -101,6 +101,7 @@ const RowChartVisualization = ({
   rawSeries: rawMultipleSeries,
   series: multipleSeries,
   fontFamily,
+  width,
 }: VisualizationProps) => {
   const formatColumnValue = useMemo(() => {
     return getColumnValueFormatter();
@@ -266,6 +267,7 @@ const RowChartVisualization = ({
           icon={headerIcon}
           actionButtons={actionButtons}
           onSelectTitle={canSelectTitle ? openQuestion : undefined}
+          width={width}
         />
       )}
       <RowChartLegendLayout