Disable table header info popover when viz is clicked (#19559)

frontend/src/metabase/components/MetadataInfo/DimensionInfoPopover/DimensionInfoPopover.tsx

@@ -16,16 +16,22 @@ const propTypes = {
   dimension: PropTypes.instanceOf(Dimension),
   children: PropTypes.node,
   placement: PropTypes.string,
+  disabled: PropTypes.bool,
 };
 
 type Props = { dimension: Dimension } & Pick<
   ITippyPopoverProps,
-  "children" | "placement"
+  "children" | "placement" | "disabled"
 >;
 
 const className = "dimension-info-popover";
 
-function DimensionInfoPopover({ dimension, children, placement }: Props) {
+function DimensionInfoPopover({
+  dimension,
+  children,
+  placement,
+  disabled,
+}: Props) {
   // avoid a scenario where we may have a Dimension instance but not enough metadata
   // to even show a display name (probably indicative of a bug)
   const hasMetadata = !!(dimension && dimension.displayName());
@@ -36,6 +42,7 @@ function DimensionInfoPopover({ dimension, children, placement }: Props) {
       delay={isCypressActive ? 0 : POPOVER_DELAY}
       interactive
       placement={placement || "left-start"}
+      disabled={disabled}
       content={<WidthBoundDimensionInfo dimension={dimension} />}
       onTrigger={instance => {
         const dimensionInfoPopovers = document.querySelectorAll(

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

@@ -131,7 +131,7 @@ export default class TableInteractive extends Component {
   }
 
   shouldComponentUpdate(nextProps, nextState) {
-    const PROP_KEYS = ["width", "height", "settings", "data"];
+    const PROP_KEYS = ["width", "height", "settings", "data", "clicked"];
     // compare specific props and state to determine if we should re-render
     return (
       !_.isEqual(
@@ -650,6 +650,7 @@ export default class TableInteractive extends Component {
           <DimensionInfoPopover
             placement="bottom-start"
             dimension={this.getDimension(column, this.props.query)}
+            disabled={this.props.clicked != null}
           >
             {renderTableHeaderWrapper(
               <Ellipsified tooltip={columnTitle}>

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

@@ -503,6 +503,7 @@ export default class Visualization extends React.PureComponent {
             card={series[0].card} // convenience for single-series visualizations
             data={series[0].data} // convenience for single-series visualizations
             hovered={hovered}
+            clicked={clicked}
             headerIcon={hasHeader ? null : headerIcon}
             onHoverChange={this.handleHoverChange}
             onVisualizationClick={this.handleVisualizationClick}