From d429f51cbd5ed837089da14610aa8b26e2d2bd1d Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Fri, 15 Dec 2023 14:42:09 +0100
Subject: [PATCH] feat: filter chips icons (#5658)

---
 .../FilterDateItem/FilterDateItem.test.tsx    |  3 +-
 .../common/FilterDateItem/FilterDateItem.tsx  |  7 +++--
 .../filter/FilterItem/FilterItem.test.tsx     |  3 +-
 .../filter/FilterItem/FilterItem.tsx          |  7 +++--
 .../FilterItemChip/FilterItemChip.tsx         | 20 ++++---------
 .../src/component/filter/Filters/Filters.tsx  | 30 +++++++++++++++++--
 6 files changed, 47 insertions(+), 23 deletions(-)

diff --git a/frontend/src/component/common/FilterDateItem/FilterDateItem.test.tsx b/frontend/src/component/common/FilterDateItem/FilterDateItem.test.tsx
index c6d07393a4..0312e80cbe 100644
--- a/frontend/src/component/common/FilterDateItem/FilterDateItem.test.tsx
+++ b/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);
         },
diff --git a/frontend/src/component/common/FilterDateItem/FilterDateItem.tsx b/frontend/src/component/common/FilterDateItem/FilterDateItem.tsx
index 85629e89b7..83120e2c68 100644
--- a/frontend/src/component/common/FilterDateItem/FilterDateItem.tsx
+++ b/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}
diff --git a/frontend/src/component/filter/FilterItem/FilterItem.test.tsx b/frontend/src/component/filter/FilterItem/FilterItem.test.tsx
index 81a8231696..d9ddaa2c62 100644
--- a/frontend/src/component/filter/FilterItem/FilterItem.test.tsx
+++ b/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',
diff --git a/frontend/src/component/filter/FilterItem/FilterItem.tsx b/frontend/src/component/filter/FilterItem/FilterItem.tsx
index 6c74b61c2a..c9e1e82bd3 100644
--- a/frontend/src/component/filter/FilterItem/FilterItem.tsx
+++ b/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}
diff --git a/frontend/src/component/filter/FilterItem/FilterItemChip/FilterItemChip.tsx b/frontend/src/component/filter/FilterItem/FilterItemChip/FilterItemChip.tsx
index d77bf876f7..77abc8fcde 100644
--- a/frontend/src/component/filter/FilterItem/FilterItemChip/FilterItemChip.tsx
+++ b/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}
diff --git a/frontend/src/component/filter/Filters/Filters.tsx b/frontend/src/component/filter/Filters/Filters.tsx
index d05bb76267..ac373eccd3 100644
--- a/frontend/src/component/filter/Filters/Filters.tsx
+++ b/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) =>