feat: add icons to filters (#5640)

frontend/src/component/feature/FeatureToggleList/FeatureToggleFilters/FeatureToggleFilters.tsx

@@ -53,6 +53,7 @@ export const FeatureToggleFilters: VFC<IFeatureToggleFiltersProps> = ({
         const availableFilters: IFilterItem[] = [
             {
                 label: 'State',
+                icon: 'hexagon',
                 options: stateOptions,
                 filterKey: 'state',
                 singularOperators: ['IS', 'IS_NOT'],
@@ -62,6 +63,7 @@ export const FeatureToggleFilters: VFC<IFeatureToggleFiltersProps> = ({
                 ? ([
                       {
                           label: 'Project',
+                          icon: 'topic',
                           options: projectsOptions,
                           filterKey: 'project',
                           singularOperators: ['IS', 'IS_NOT'],
@@ -71,6 +73,7 @@ export const FeatureToggleFilters: VFC<IFeatureToggleFiltersProps> = ({
                 : []),
             {
                 label: 'Tags',
+                icon: 'label',
                 options: tagsOptions,
                 filterKey: 'tag',
                 singularOperators: ['INCLUDE', 'DO_NOT_INCLUDE'],
@@ -83,6 +86,7 @@ export const FeatureToggleFilters: VFC<IFeatureToggleFiltersProps> = ({
             },
             {
                 label: 'Segment',
+                icon: 'donut_large',
                 options: segmentsOptions,
                 filterKey: 'segment',
                 singularOperators: ['INCLUDE', 'DO_NOT_INCLUDE'],
@@ -95,6 +99,7 @@ export const FeatureToggleFilters: VFC<IFeatureToggleFiltersProps> = ({
             },
             {
                 label: 'Created date',
+                icon: 'today',
                 options: [],
                 filterKey: 'createdAt',
                 dateOperators: ['IS_ON_OR_AFTER', 'IS_BEFORE'],

frontend/src/component/filter/AddFilterButton.tsx

@@ -2,19 +2,35 @@ import React, { useState } from 'react';
 import Button from '@mui/material/Button';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
-import { styled } from '@mui/material';
+import { Icon, styled } from '@mui/material';
-import { Add } from '@mui/icons-material';
+import { Add, HelpOutline, Topic } from '@mui/icons-material';
+import { Box } from '@mui/system';
+import { IFilterItem } from './Filters/Filters';
 
 const StyledButton = styled(Button)(({ theme }) => ({
     padding: theme.spacing(0, 1.25, 0, 1.25),
     height: theme.spacing(3.75),
 }));
 
+const StyledIconContainer = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(1),
+}));
+
+const StyledIcon = styled(Icon)(({ theme }) => ({
+    color: theme.palette.action.active,
+    '&.material-symbols-outlined': {
+        fontSize: theme.spacing(2),
+    },
+}));
+
 interface IAddFilterButtonProps {
     visibleOptions: string[];
     setVisibleOptions: (filters: string[]) => void;
     hiddenOptions: string[];
     setHiddenOptions: (filters: string[]) => void;
+    availableFilters: IFilterItem[];
 }
 
 const AddFilterButton = ({
@@ -22,6 +38,7 @@ const AddFilterButton = ({
     setVisibleOptions,
     hiddenOptions,
     setHiddenOptions,
+    availableFilters,
 }: IAddFilterButtonProps) => {
     const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
 
@@ -53,11 +70,19 @@ const AddFilterButton = ({
                 open={Boolean(anchorEl)}
                 onClose={handleClose}
             >
-                {visibleOptions.map((label) => (
+                {visibleOptions.map((label) => {
-                    <MenuItem key={label} onClick={() => onSelect(label)}>
+                    const filter = availableFilters.find(
-                        {label}
+                        (f) => f.label === label,
-                    </MenuItem>
+                    );
-                ))}
+                    return (
+                        <MenuItem key={label} onClick={() => onSelect(label)}>
+                            <StyledIconContainer>
+                                <StyledIcon>{filter?.icon}</StyledIcon>
+                                {label}
+                            </StyledIconContainer>
+                        </MenuItem>
+                    );
+                })}
             </Menu>
         </div>
     );

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

@@ -7,6 +7,7 @@ test('shoulder render all available filters', async () => {
     const availableFilters: IFilterItem[] = [
         {
             label: 'Filter1',
+            icon: '',
             options: [],
             filterKey: 'irrelevantKey',
             singularOperators: ['IRRELEVANT'],
@@ -14,6 +15,7 @@ test('shoulder render all available filters', async () => {
         },
         {
             label: 'Filter2',
+            icon: '',
             options: [],
             filterKey: 'irrelevantKey',
             singularOperators: ['IRRELEVANT'],
@@ -21,6 +23,7 @@ test('shoulder render all available filters', async () => {
         },
         {
             label: 'Filter3',
+            icon: '',
             options: [],
             filterKey: 'irrelevantKey',
             singularOperators: ['IRRELEVANT'],
@@ -45,6 +48,7 @@ test('should keep filters order when adding a new filter', async () => {
     const availableFilters: IFilterItem[] = [
         {
             label: 'State',
+            icon: '',
             options: [],
             filterKey: 'irrelevantKey',
             singularOperators: ['IRRELEVANT'],
@@ -52,6 +56,7 @@ test('should keep filters order when adding a new filter', async () => {
         },
         {
             label: 'Tags',
+            icon: '',
             options: [],
             filterKey: 'irrelevantKey',
             singularOperators: ['IRRELEVANT'],
@@ -86,6 +91,7 @@ test('should remove selected item from the add filter list', async () => {
     const availableFilters: IFilterItem[] = [
         {
             label: 'State',
+            icon: '',
             options: [],
             filterKey: 'irrelevantKey',
             singularOperators: ['IRRELEVANT'],
@@ -93,6 +99,7 @@ test('should remove selected item from the add filter list', async () => {
         },
         {
             label: 'Tags',
+            icon: '',
             options: [],
             filterKey: 'irrelevantKey',
             singularOperators: ['IRRELEVANT'],

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

@@ -25,6 +25,7 @@ interface IFilterProps {
 
 type IBaseFilterItem = {
     label: string;
+    icon: string;
     options: {
         label: string;
         value: string;
@@ -138,6 +139,7 @@ export const Filters: VFC<IFilterProps> = ({
                 condition={hasAvailableFilters}
                 show={
                     <AddFilterButton
+                        availableFilters={availableFilters}
                         visibleOptions={unselectedFilters}
                         setVisibleOptions={setUnselectedFilters}
                         hiddenOptions={selectedFilters}

frontend/src/component/project/Project/ExperimentalProjectFeatures/ExperimentalProjectTable/ProjectOverviewFilters.tsx

@@ -27,6 +27,7 @@ export const ProjectOverviewFilters: VFC<IProjectOverviewFilters> = ({
         const availableFilters: IFilterItem[] = [
             {
                 label: 'Tags',
+                icon: 'label',
                 options: tagsOptions,
                 filterKey: 'tag',
                 singularOperators: ['INCLUDE', 'DO_NOT_INCLUDE'],
@@ -39,6 +40,7 @@ export const ProjectOverviewFilters: VFC<IProjectOverviewFilters> = ({
             },
             {
                 label: 'Created date',
+                icon: 'today',
                 options: [],
                 filterKey: 'createdAt',
                 dateOperators: ['IS_ON_OR_AFTER', 'IS_BEFORE'],

src/lib/services/client-metrics/last-seen/last-seen-store.ts

@@ -8,12 +8,6 @@ import { ILastSeenStore } from './types/last-seen-store-type';
 
 const TABLE = 'last_seen_at_metrics';
 
-export interface FeaturesTable {
-    feature_name: string;
-    last_seen_at: Date;
-    environment: string;
-}
-
 const prepareLastSeenInput = (data: LastSeenInput[]) => {
     const now = new Date();