Restore icons in the new filter popup (#44025)

* Restore icons in the new filter popup

* it.each

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

@@ -13,6 +13,7 @@ import {
   getDashboardParameterSections,
   getDefaultOptionForParameterSectionMap,
 } from "metabase/parameters/utils/dashboard-options";
+import { getParameterIconName } from "metabase/parameters/utils/ui";
 import { Icon } from "metabase/ui";
 import type { ParameterMappingOptions } from "metabase-types/api";
 
@@ -69,7 +70,11 @@ const ParameterOptionsSection = ({
       className={cx(CS.textBold, CS.flex, CS.alignCenter)}
       style={{ marginBottom: 4 }}
     >
-      <Icon size="16" name="label" className={CS.mr1} />
+      <Icon
+        size="16"
+        name={getParameterIconName(section.id)}
+        className={CS.mr1}
+      />
       {section.name}
     </OptionItemTitle>
     <OptionItemDescription>{section.description}</OptionItemDescription>

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

+import { render, screen, within } from "__support__/ui";
+
+import { ParametersPopover } from "./ParametersPopover";
+
+const options = [
+  {
+    title: "Time",
+    subtitle: "Date range, relative date, time of day, etc.",
+    icon: "calendar",
+  },
+  {
+    title: "Location",
+    subtitle: "City, State, Country, ZIP code.",
+    icon: "location",
+  },
+  {
+    title: "ID",
+    subtitle: "User ID, Product ID, Event ID, etc.",
+    icon: "label",
+  },
+  {
+    title: "Number",
+    subtitle: "Subtotal, Age, Price, Quantity, etc.",
+    icon: "number",
+  },
+  {
+    title: "Text or Category",
+    subtitle: "Name, Rating, Description, etc.",
+    icon: "label",
+  },
+];
+
+describe("ParameterPopover", () => {
+  it.each(options)(
+    "should render '$title' option with icon '$icon'",
+    ({ title, subtitle, icon }) => {
+      render(
+        <ParametersPopover onClose={jest.fn()} onAddParameter={jest.fn()} />,
+      );
+
+      expect(screen.getByText(title)).toBeInTheDocument();
+
+      const section = screen.getByText(title).parentElement as HTMLElement;
+
+      expect(within(section).getByText(subtitle)).toBeInTheDocument();
+      expect(
+        within(section).getByLabelText(`${icon} icon`),
+      ).toBeInTheDocument();
+    },
+  );
+});

frontend/src/metabase/parameters/utils/ui.ts

@@ -5,7 +5,7 @@ import type { UiParameter } from "metabase-lib/v1/parameters/types";
 import { deriveFieldOperatorFromParameter } from "metabase-lib/v1/parameters/utils/operators";
 import { getParameterType } from "metabase-lib/v1/parameters/utils/parameter-type";
 
-export function getParameterIconName(parameter: UiParameter) {
+export function getParameterIconName(parameter: UiParameter | string) {
   const type = getParameterType(parameter);
   switch (type) {
     case "date":