fix #46765 - Add dashboard filter popover does not close on click outside (#46771)

frontend/src/metabase/dashboard/components/DashboardHeader/buttons/AddFilterParameterButton.tsx → frontend/src/metabase/dashboard/components/DashboardHeader/buttons/AddFilterParameterButton/AddFilterParameterButton.tsx

@@ -16,7 +16,11 @@ export const AddFilterParameterButton = () => {
   const isAddParameterPopoverOpen = useSelector(getIsAddParameterPopoverOpen);
 
   return (
-    <Popover opened={isAddParameterPopoverOpen} position="bottom-end">
+    <Popover
+      opened={isAddParameterPopoverOpen}
+      onClose={() => dispatch(hideAddParameterPopover())}
+      position="bottom-end"
+    >
       <Popover.Target>
         <ToolbarButton
           icon="filter"
@@ -29,7 +33,7 @@ export const AddFilterParameterButton = () => {
           tooltipLabel={t`Add a filter`}
         />
       </Popover.Target>
-      <Popover.Dropdown>
+      <Popover.Dropdown data-testid="add-filter-parameter-dropdown">
         <ParametersPopover
           onAddParameter={parameter => dispatch(addParameter(parameter))}
           onClose={() => dispatch(hideAddParameterPopover())}

frontend/src/metabase/dashboard/components/DashboardHeader/buttons/AddFilterParameterButton/AddFilterParameterButton.unit.spec.tsx

+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { renderWithProviders } from "__support__/ui";
+import {
+  createMockDashboardState,
+  createMockState,
+} from "metabase-types/store/mocks";
+
+import { AddFilterParameterButton } from "./AddFilterParameterButton";
+
+const setup = ({ isAddParameterPopoverOpen = false } = {}) => {
+  const state = createMockState({
+    dashboard: createMockDashboardState({
+      isAddParameterPopoverOpen,
+    }),
+  });
+
+  return renderWithProviders(<AddFilterParameterButton />, {
+    storeInitialState: state,
+  });
+};
+
+describe("AddFilterParameterButton", () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should render the button with correct icon and tooltip", () => {
+    setup();
+    const button = screen.getByLabelText("Add a filter");
+    expect(button).toBeInTheDocument();
+    expect(screen.getByLabelText("filter icon")).toBeInTheDocument();
+  });
+
+  describe("when popover is open based on state", () => {
+    it("should render the popover when isAddParameterPopoverOpen is true", () => {
+      setup({ isAddParameterPopoverOpen: true });
+      expect(
+        screen.getByTestId("add-filter-parameter-dropdown"),
+      ).toBeInTheDocument();
+    });
+    it("should not render the popover when isAddParameterPopoverOpen is false", () => {
+      setup({ isAddParameterPopoverOpen: false });
+      expect(
+        screen.queryByTestId("add-filter-parameter-dropdown"),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  describe("when the popover is closed", () => {
+    it("should show the popover when the button is clicked", async () => {
+      setup();
+      expect(
+        screen.queryByTestId("add-filter-parameter-dropdown"),
+      ).not.toBeInTheDocument();
+      await userEvent.click(screen.getByLabelText("Add a filter"));
+      expect(
+        screen.getByTestId("add-filter-parameter-dropdown"),
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe("when the popover is open", () => {
+    it("should close the popover when the button is clicked", async () => {
+      setup({ isAddParameterPopoverOpen: true });
+      expect(
+        screen.getByTestId("add-filter-parameter-dropdown"),
+      ).toBeInTheDocument();
+      await userEvent.click(screen.getByLabelText("Add a filter"));
+      expect(
+        screen.queryByTestId("add-filter-parameter-dropdown"),
+      ).not.toBeInTheDocument();
+    });
+
+    it("should close the popover when the user clicks outside the popover", async () => {
+      setup({ isAddParameterPopoverOpen: true });
+      expect(
+        screen.getByTestId("add-filter-parameter-dropdown"),
+      ).toBeInTheDocument();
+      await userEvent.click(document.body);
+      expect(
+        screen.queryByTestId("add-filter-parameter-dropdown"),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  it("should show the popover when the button is clicked", async () => {
+    setup();
+
+    const button = screen.getByLabelText("Add a filter");
+    await userEvent.click(button);
+    expect(screen.getByText("What do you want to filter?")).toBeInTheDocument();
+  });
+});

frontend/src/metabase/dashboard/components/DashboardHeader/buttons/AddFilterParameterButton/index.ts

+export * from "./AddFilterParameterButton";

frontend/src/metabase/dashboard/components/ParametersPopover.tsx

@@ -35,28 +35,26 @@ type ParameterSection = typeof PARAMETER_SECTIONS[number];
 export const ParametersPopover = ({
   onClose,
   onAddParameter,
-}: ParametersPopoverProps) => {
-  return (
-    <ParameterOptionsSectionsPane
-      sections={PARAMETER_SECTIONS}
-      onSelectSection={selectedSection => {
-        const parameterSection = _.findWhere(PARAMETER_SECTIONS, {
-          id: selectedSection.id,
-        });
+}: ParametersPopoverProps) => (
+  <ParameterOptionsSectionsPane
+    sections={PARAMETER_SECTIONS}
+    onSelectSection={selectedSection => {
+      const parameterSection = _.findWhere(PARAMETER_SECTIONS, {
+        id: selectedSection.id,
+      });
 
-        if (parameterSection) {
-          const defaultOption =
-            defaultOptionForParameterSection[parameterSection.id];
+      if (parameterSection) {
+        const defaultOption =
+          defaultOptionForParameterSection[parameterSection.id];
 
-          if (defaultOption) {
-            onAddParameter(defaultOption);
-          }
-          onClose();
+        if (defaultOption) {
+          onAddParameter(defaultOption);
         }
-      }}
-    />
-  );
-};
+        onClose();
+      }
+    }}
+  />
+);
 
 const ParameterOptionsSection = ({
   section,