Extract title header to TitleLegendHeader and use it in Funnel viz

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

@@ -5,6 +5,7 @@ import PropTypes from "prop-types";
 
 import CardRenderer from "./CardRenderer.jsx";
 import LegendHeader from "./LegendHeader.jsx";
+import { TitleLegendHeader } from "./TitleLegendHeader.jsx";
 
 import "./LineAreaBarChart.css";
 
@@ -186,48 +187,31 @@ export default class LineAreaBarChart extends Component {
 
         const settings = this.getSettings();
 
-        let titleHeaderSeries, multiseriesHeaderSeries;
-
-        // $FlowFixMe
-        let originalSeries = series._raw || series;
-        let cardIds = _.uniq(originalSeries.map(s => s.card.id))
-        const isComposedOfMultipleQuestions = cardIds.length > 1;
-
-        if (showTitle && settings["card.title"]) {
-            titleHeaderSeries = [{ card: {
-                name: settings["card.title"],
-                ...(isComposedOfMultipleQuestions ? {} : {
-                    id: cardIds[0],
-                    dataset_query: originalSeries[0].card.dataset_query
-                }),
-            }}];
-        }
-
+        let multiseriesHeaderSeries;
         if (series.length > 1) {
             multiseriesHeaderSeries = series;
         }
 
+        const hasTitle = showTitle && settings["card.title"];
+
         return (
             <div className={cx("LineAreaBarChart flex flex-column p1", this.getHoverClasses(), this.props.className)}>
-                { titleHeaderSeries ?
-                    <LegendHeader
-                        className="flex-no-shrink"
-                        series={titleHeaderSeries}
-                        description={settings["card.description"]}
+                { hasTitle &&
+                    <TitleLegendHeader
+                        series={series}
+                        settings={settings}
+                        onChangeCardAndRun={onChangeCardAndRun}
                         actionButtons={actionButtons}
-                        // If a dashboard card is composed of multiple questions, its custom card title
-                        // shouldn't act as a link as it's ambiguous that which question it should open
-                        onChangeCardAndRun={ isComposedOfMultipleQuestions ? null : onChangeCardAndRun }
                     />
-                : null }
-                { multiseriesHeaderSeries || (!titleHeaderSeries && actionButtons) ? // always show action buttons if we have them
+                }
+                { multiseriesHeaderSeries || (!hasTitle && actionButtons) ? // always show action buttons if we have them
                     <LegendHeader
                         className="flex-no-shrink"
                         series={multiseriesHeaderSeries}
                         settings={settings}
                         hovered={hovered}
                         onHoverChange={this.props.onHoverChange}
-                        actionButtons={!titleHeaderSeries ? actionButtons : null}
+                        actionButtons={!hasTitle ? actionButtons : null}
                         onChangeCardAndRun={onChangeCardAndRun}
                         onVisualizationClick={onVisualizationClick}
                         visualizationIsClickable={visualizationIsClickable}

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

+import React from "react";
+import LegendHeader from "./LegendHeader.jsx";
+import _ from "underscore";
+
+export const TitleLegendHeader = ({ series, settings, onChangeCardAndRun, actionButtons }) => {
+    // $FlowFixMe
+    let originalSeries = series._raw || series;
+    let cardIds = _.uniq(originalSeries.map(s => s.card.id))
+    const isComposedOfMultipleQuestions = cardIds.length > 1;
+
+    if (settings["card.title"]) {
+        const titleHeaderSeries = [{ card: {
+            name: settings["card.title"],
+            ...(isComposedOfMultipleQuestions ? {} : {
+                id: cardIds[0],
+                dataset_query: originalSeries[0].card.dataset_query
+            }),
+        }}];
+
+        return (
+            <LegendHeader
+            className="flex-no-shrink"
+            series={titleHeaderSeries}
+            description={settings["card.description"]}
+            actionButtons={actionButtons}
+            // If a dashboard card is composed of multiple questions, its custom card title
+            // shouldn't act as a link as it's ambiguous that which question it should open
+            onChangeCardAndRun={ isComposedOfMultipleQuestions ? null : onChangeCardAndRun }
+        />
+        )
+    } else {
+        // If the title isn't provided in settings, render nothing
+        return null
+    }
+}
+

frontend/src/metabase/visualizations/visualizations/Funnel.jsx

@@ -16,6 +16,7 @@ import _ from "underscore";
 import cx from "classnames";
 
 import type { VisualizationProps } from "metabase/meta/types/Visualization";
+import { TitleLegendHeader } from "metabase/visualizations/components/TitleLegendHeader";
 
 export default class Funnel extends Component {
     props: VisualizationProps;
@@ -108,17 +109,27 @@ export default class Funnel extends Component {
     render() {
         const { settings } = this.props;
 
+        const hasTitle = settings["card.title"];
+
         if (settings["funnel.type"] === "bar") {
             return <FunnelBar {...this.props} />
         } else {
             const { actionButtons, className, onChangeCardAndRun, series } = this.props;
             return (
                 <div className={cx(className, "flex flex-column p1")}>
+                    { hasTitle &&
+                        <TitleLegendHeader
+                            series={series}
+                            settings={settings}
+                            onChangeCardAndRun={onChangeCardAndRun}
+                            actionButtons={actionButtons}
+                        />
+                    }
                     <LegendHeader
                         className="flex-no-shrink"
                         // $FlowFixMe
                         series={series._raw || series}
-                        actionButtons={actionButtons}
+                        actionButtons={!hasTitle && actionButtons}
                         onChangeCardAndRun={onChangeCardAndRun}
                     />
                     <FunnelNormal {...this.props} className="flex-full" />