fix funnel shows card title in the chart viewport in QB (#32992)

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

@@ -228,9 +228,8 @@ export default class Funnel extends Component {
   }
 
   render() {
-    const { headerIcon, settings } = this.props;
-
-    const hasTitle = settings["card.title"];
+    const { headerIcon, settings, showTitle } = this.props;
+    const hasTitle = showTitle && settings["card.title"];
 
     if (settings["funnel.type"] === "bar") {
       return <FunnelBar {...this.props} />;

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

+import { render, screen } from "__support__/ui";
+
+import {
+  createMockCard,
+  createMockColumn,
+  createMockDataset,
+  createMockDatasetData,
+  createMockSingleSeries,
+  createMockVisualizationSettings,
+} from "metabase-types/api/mocks";
+import Funnel from "./Funnel";
+
+const cardTitle = "cardTitle";
+
+const setup = funnelProps => {
+  const series = createMockSingleSeries(
+    createMockCard(),
+    createMockDataset({
+      data: createMockDatasetData({
+        cols: [
+          createMockColumn({ display_name: "foo" }),
+          createMockColumn({ display_name: "bar" }),
+        ],
+        rows: [
+          [10, 20],
+          [100, 200],
+        ],
+      }),
+    }),
+  );
+
+  const settings = createMockVisualizationSettings({
+    "card.title": cardTitle,
+    column: jest.fn(),
+  });
+
+  render(
+    <Funnel
+      series={[series]}
+      settings={settings}
+      visualizationIsClickable={jest.fn()}
+      {...funnelProps}
+    />,
+  );
+};
+
+describe("funnel", () => {
+  it("should not render the title when showTitle=false", async () => {
+    setup({ showTitle: false });
+    expect(screen.queryByText(cardTitle)).not.toBeInTheDocument();
+  });
+
+  it("should render the title when showTitle=true", async () => {
+    setup({ showTitle: true });
+    expect(screen.getByText(cardTitle)).toBeInTheDocument();
+  });
+});