feat: filter chips icons (#5658)

frontend/src/component/common/FilterDateItem/FilterDateItem.test.tsx

@@ -8,7 +8,8 @@ const getDate = (option: string) => screen.getByText(option);
 const setup = (initialState: FilterItemParams | null) => {
     const recordedChanges: FilterItemParams[] = [];
     const mockProps: IFilterDateItemProps = {
-        label: 'Test Label',
+        name: 'Test Label',
+        label: 'irrelevant',
         onChange: (value: FilterItemParams) => {
             recordedChanges.push(value);
         },

frontend/src/component/common/FilterDateItem/FilterDateItem.tsx

@@ -1,5 +1,5 @@
 import { Box } from '@mui/material';
-import React, { FC, useEffect, useRef, useState } from 'react';
+import React, { FC, ReactNode, useEffect, useRef, useState } from 'react';
 import { StyledPopover } from 'component/filter/FilterItem/FilterItem.styles';
 import { FilterItemChip } from 'component/filter/FilterItem/FilterItemChip/FilterItemChip';
 import { DateCalendar, LocalizationProvider } from '@mui/x-date-pickers';
@@ -10,7 +10,8 @@ import { getLocalizedDateString } from '../util';
 import { FilterItemParams } from 'component/filter/FilterItem/FilterItem';
 
 export interface IFilterDateItemProps {
-    label: string;
+    name: string;
+    label: ReactNode;
     onChange: (value: FilterItemParams) => void;
     onChipClose: () => void;
     state: FilterItemParams | null | undefined;
@@ -18,6 +19,7 @@ export interface IFilterDateItemProps {
 }
 
 export const FilterDateItem: FC<IFilterDateItemProps> = ({
+    name,
     label,
     onChange,
     onChipClose,
@@ -72,6 +74,7 @@ export const FilterDateItem: FC<IFilterDateItemProps> = ({
             <Box ref={ref}>
                 <FilterItemChip
                     label={label}
+                    name={name}
                     selectedDisplayOptions={selectedOptions}
                     onDelete={onDelete}
                     onClick={open}

frontend/src/component/filter/FilterItem/FilterItem.test.tsx

@@ -8,7 +8,8 @@ const getOption = (option: string) =>
 const setup = (initialState: FilterItemParams | null) => {
     const recordedChanges: FilterItemParams[] = [];
     const mockProps: IFilterItemProps = {
-        label: 'Test Label',
+        name: 'Test Label',
+        label: 'irrelevant',
         options: [
             {
                 label: 'Option 1',

frontend/src/component/filter/FilterItem/FilterItem.tsx

@@ -1,6 +1,6 @@
 import { Search } from '@mui/icons-material';
 import { Box, InputAdornment, List, ListItemText } from '@mui/material';
-import { FC, useEffect, useRef, useState } from 'react';
+import { FC, ReactNode, useEffect, useRef, useState } from 'react';
 import {
     StyledCheckbox,
     StyledDropdown,
@@ -11,7 +11,8 @@ import {
 import { FilterItemChip } from './FilterItemChip/FilterItemChip';
 
 export interface IFilterItemProps {
-    label: string;
+    name: string;
+    label: ReactNode;
     options: Array<{ label: string; value: string }>;
     onChange: (value: FilterItemParams) => void;
     onChipClose: () => void;
@@ -26,6 +27,7 @@ export type FilterItemParams = {
 };
 
 export const FilterItem: FC<IFilterItemProps> = ({
+    name,
     label,
     options,
     onChange,
@@ -101,6 +103,7 @@ export const FilterItem: FC<IFilterItemProps> = ({
         <>
             <Box ref={ref}>
                 <FilterItemChip
+                    name={name}
                     label={label}
                     selectedDisplayOptions={selectedDisplayOptions}
                     onDelete={onDelete}

frontend/src/component/filter/FilterItem/FilterItemChip/FilterItemChip.tsx

@@ -1,5 +1,5 @@
-import { ComponentProps, FC } from 'react';
-import { ArrowDropDown, Close, TopicOutlined } from '@mui/icons-material';
+import { ComponentProps, FC, ReactNode } from 'react';
+import { ArrowDropDown, Close } from '@mui/icons-material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { Chip, IconButton, styled } from '@mui/material';
 import { FilterItemOperator } from './FilterItemOperator/FilterItemOperator';
@@ -32,13 +32,6 @@ const StyledLabel = styled('div')(({ theme }) => ({
     fontWeight: theme.typography.fontWeightBold,
 }));
 
-const StyledCategoryIconWrapper = styled('div')(({ theme }) => ({
-    marginRight: theme.spacing(0.5),
-    display: 'flex',
-    alignItems: 'center',
-    fontSize: theme.spacing(2),
-}));
-
 const StyledOptions = styled('button')(({ theme }) => ({
     color: theme.palette.text.primary,
     fontWeight: theme.typography.fontWeightRegular,
@@ -75,7 +68,8 @@ const Arrow = () => (
 );
 
 interface IFilterItemChipProps {
-    label: string;
+    name: string;
+    label: ReactNode;
     selectedDisplayOptions?: string[];
     operatorOptions: string[];
     operator: string;
@@ -85,6 +79,7 @@ interface IFilterItemChipProps {
 }
 
 export const FilterItemChip: FC<IFilterItemChipProps> = ({
+    name,
     label,
     selectedDisplayOptions = [],
     operatorOptions,
@@ -104,7 +99,7 @@ export const FilterItemChip: FC<IFilterItemChipProps> = ({
 
         trackEvent('search-filter', {
             props: {
-                label: label,
+                label: name,
                 operator: operator,
             },
         });
@@ -115,9 +110,6 @@ export const FilterItemChip: FC<IFilterItemChipProps> = ({
             isActive={hasSelectedOptions}
             label={
                 <StyledLabel>
-                    <StyledCategoryIconWrapper>
-                        <TopicOutlined fontSize='inherit' />
-                    </StyledCategoryIconWrapper>
                     {label}
                     <ConditionallyRender
                         condition={!hasSelectedOptions}

frontend/src/component/filter/Filters/Filters.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState, VFC } from 'react';
-import { Box, styled } from '@mui/material';
+import { Box, Icon, styled } from '@mui/material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { AddFilterButton } from '../AddFilterButton';
 import { FilterDateItem } from 'component/common/FilterDateItem/FilterDateItem';
@@ -44,6 +44,19 @@ type IDateFilterItem = IBaseFilterItem & {
 
 export type IFilterItem = ITextFilterItem | IDateFilterItem;
 
+const StyledCategoryIconWrapper = styled('div')(({ theme }) => ({
+    marginRight: theme.spacing(0.5),
+    display: 'flex',
+    alignItems: 'center',
+    fontSize: theme.spacing(2),
+}));
+
+const StyledIcon = styled(Icon)(({ theme }) => ({
+    '&.material-symbols-outlined': {
+        fontSize: theme.spacing(2),
+    },
+}));
+
 export const Filters: VFC<IFilterProps> = ({
     state,
     onChange,
@@ -105,10 +118,20 @@ export const Filters: VFC<IFilterProps> = ({
                     return null;
                 }
 
+                const label = (
+                    <>
+                        <StyledCategoryIconWrapper>
+                            <StyledIcon>{filter.icon}</StyledIcon>
+                        </StyledCategoryIconWrapper>
+                        {filter.label}
+                    </>
+                );
+
                 if ('dateOperators' in filter) {
                     return (
                         <FilterDateItem
-                            label={filter.label}
+                            label={label}
+                            name={filter.label}
                             state={state[filter.filterKey]}
                             onChange={(value) =>
                                 onChange({ [filter.filterKey]: value })
@@ -122,7 +145,8 @@ export const Filters: VFC<IFilterProps> = ({
                 return (
                     <FilterItem
                         key={filter.label}
-                        label={filter.label}
+                        label={label}
+                        name={filter.label}
                         state={state[filter.filterKey]}
                         options={filter.options}
                         onChange={(value) =>