1
0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-22 19:07:54 +01:00

feat: add icons to filters (#5640)

This commit is contained in:
Jaanus Sellin 2023-12-14 15:06:26 +02:00 committed by GitHub
parent bfa82d79bf
commit fbb5dd9022
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 48 additions and 13 deletions

View File

@ -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'],

View File

@ -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 | HTMLElement>(null);
@ -53,11 +70,19 @@ const AddFilterButton = ({
open={Boolean(anchorEl)}
onClose={handleClose}
>
{visibleOptions.map((label) => (
<MenuItem key={label} onClick={() => onSelect(label)}>
{label}
</MenuItem>
))}
{visibleOptions.map((label) => {
const filter = availableFilters.find(
(f) => f.label === label,
);
return (
<MenuItem key={label} onClick={() => onSelect(label)}>
<StyledIconContainer>
<StyledIcon>{filter?.icon}</StyledIcon>
{label}
</StyledIconContainer>
</MenuItem>
);
})}
</Menu>
</div>
);

View File

@ -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'],

View File

@ -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}

View File

@ -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'],

View File

@ -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();