From fbb5dd90225d23bcadfe7907cf58a3acccb1bb03 Mon Sep 17 00:00:00 2001 From: Jaanus Sellin Date: Thu, 14 Dec 2023 15:06:26 +0200 Subject: [PATCH] feat: add icons to filters (#5640) --- .../FeatureToggleFilters.tsx | 5 +++ .../src/component/filter/AddFilterButton.tsx | 39 +++++++++++++++---- .../component/filter/Filters/Filters.test.tsx | 7 ++++ .../src/component/filter/Filters/Filters.tsx | 2 + .../ProjectOverviewFilters.tsx | 2 + .../last-seen/last-seen-store.ts | 6 --- 6 files changed, 48 insertions(+), 13 deletions(-) diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleFilters/FeatureToggleFilters.tsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleFilters/FeatureToggleFilters.tsx index 3d8e5530bc..93f349c708 100644 --- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleFilters/FeatureToggleFilters.tsx +++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleFilters/FeatureToggleFilters.tsx @@ -53,6 +53,7 @@ export const FeatureToggleFilters: VFC = ({ const availableFilters: IFilterItem[] = [ { label: 'State', + icon: 'hexagon', options: stateOptions, filterKey: 'state', singularOperators: ['IS', 'IS_NOT'], @@ -62,6 +63,7 @@ export const FeatureToggleFilters: VFC = ({ ? ([ { label: 'Project', + icon: 'topic', options: projectsOptions, filterKey: 'project', singularOperators: ['IS', 'IS_NOT'], @@ -71,6 +73,7 @@ export const FeatureToggleFilters: VFC = ({ : []), { label: 'Tags', + icon: 'label', options: tagsOptions, filterKey: 'tag', singularOperators: ['INCLUDE', 'DO_NOT_INCLUDE'], @@ -83,6 +86,7 @@ export const FeatureToggleFilters: VFC = ({ }, { label: 'Segment', + icon: 'donut_large', options: segmentsOptions, filterKey: 'segment', singularOperators: ['INCLUDE', 'DO_NOT_INCLUDE'], @@ -95,6 +99,7 @@ export const FeatureToggleFilters: VFC = ({ }, { label: 'Created date', + icon: 'today', options: [], filterKey: 'createdAt', dateOperators: ['IS_ON_OR_AFTER', 'IS_BEFORE'], diff --git a/frontend/src/component/filter/AddFilterButton.tsx b/frontend/src/component/filter/AddFilterButton.tsx index f301339b04..0011d0fffe 100644 --- a/frontend/src/component/filter/AddFilterButton.tsx +++ b/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 { Add } from '@mui/icons-material'; +import { Icon, styled } from '@mui/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); @@ -53,11 +70,19 @@ const AddFilterButton = ({ open={Boolean(anchorEl)} onClose={handleClose} > - {visibleOptions.map((label) => ( - onSelect(label)}> - {label} - - ))} + {visibleOptions.map((label) => { + const filter = availableFilters.find( + (f) => f.label === label, + ); + return ( + onSelect(label)}> + + {filter?.icon} + {label} + + + ); + })} ); diff --git a/frontend/src/component/filter/Filters/Filters.test.tsx b/frontend/src/component/filter/Filters/Filters.test.tsx index d42ffbfc3f..e2e1eff23b 100644 --- a/frontend/src/component/filter/Filters/Filters.test.tsx +++ b/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'], diff --git a/frontend/src/component/filter/Filters/Filters.tsx b/frontend/src/component/filter/Filters/Filters.tsx index 7a7e7fa3b2..3aeebd22d4 100644 --- a/frontend/src/component/filter/Filters/Filters.tsx +++ b/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 = ({ condition={hasAvailableFilters} show={ = ({ const availableFilters: IFilterItem[] = [ { label: 'Tags', + icon: 'label', options: tagsOptions, filterKey: 'tag', singularOperators: ['INCLUDE', 'DO_NOT_INCLUDE'], @@ -39,6 +40,7 @@ export const ProjectOverviewFilters: VFC = ({ }, { label: 'Created date', + icon: 'today', options: [], filterKey: 'createdAt', dateOperators: ['IS_ON_OR_AFTER', 'IS_BEFORE'], diff --git a/src/lib/services/client-metrics/last-seen/last-seen-store.ts b/src/lib/services/client-metrics/last-seen/last-seen-store.ts index 9dc91d8917..478dac4b56 100644 --- a/src/lib/services/client-metrics/last-seen/last-seen-store.ts +++ b/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();