mirror of
https://github.com/Unleash/unleash.git
synced 2025-01-20 00:08:02 +01:00
feat: select all applications (#5897)
This commit is contained in:
parent
3e186f1986
commit
9ac8a466ab
@ -40,6 +40,7 @@ export const FeatureMetrics = () => {
|
||||
const selectedApplications = query.applications.filter(
|
||||
(item) => item !== null,
|
||||
) as string[];
|
||||
const allSelected = selectedApplications.length === applications.size;
|
||||
|
||||
const { featureMetrics } = useFeatureMetricsRaw(featureId, hoursBack);
|
||||
|
||||
@ -97,6 +98,17 @@ export const FeatureMetrics = () => {
|
||||
title='Applications'
|
||||
values={applications}
|
||||
selectedValues={selectedApplications}
|
||||
toggleValues={() => {
|
||||
if (allSelected) {
|
||||
setQuery({
|
||||
applications: [defaultApplication],
|
||||
});
|
||||
} else {
|
||||
setQuery({
|
||||
applications: [...applications],
|
||||
});
|
||||
}
|
||||
}}
|
||||
toggleValue={(value) => {
|
||||
if (selectedApplications.includes(value)) {
|
||||
setQuery({
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { Chip, styled } from '@mui/material';
|
||||
import { Chip, Button, styled } from '@mui/material';
|
||||
import { useMemo } from 'react';
|
||||
import { focusable } from 'themes/themeStyles';
|
||||
|
||||
@ -7,6 +7,7 @@ interface IFeatureMetricsChipsProps {
|
||||
values: Set<string>;
|
||||
selectedValues: string[];
|
||||
toggleValue: (value: string) => void;
|
||||
toggleValues?: () => void;
|
||||
}
|
||||
|
||||
const StyledTitle = styled('h2')(({ theme }) => ({
|
||||
@ -24,6 +25,7 @@ const StyledList = styled('ul')(({ theme }) => ({
|
||||
listStyleType: 'none',
|
||||
padding: 0,
|
||||
minHeight: '100%',
|
||||
alignItems: 'center',
|
||||
}));
|
||||
|
||||
const StyledItem = styled('li')(({ theme }) => ({
|
||||
@ -41,10 +43,12 @@ export const FeatureMetricsChips = ({
|
||||
values,
|
||||
selectedValues,
|
||||
toggleValue,
|
||||
toggleValues,
|
||||
}: IFeatureMetricsChipsProps) => {
|
||||
const onClick = (value: string) => () => {
|
||||
toggleValue(value);
|
||||
};
|
||||
const allSelected = values.size === selectedValues.length;
|
||||
|
||||
const sortedValues = useMemo(() => {
|
||||
return Array.from(values).sort((valueA, valueB) => {
|
||||
@ -66,6 +70,16 @@ export const FeatureMetricsChips = ({
|
||||
/>
|
||||
</StyledItem>
|
||||
))}
|
||||
|
||||
{toggleValues && (
|
||||
<Button
|
||||
size={'small'}
|
||||
onClick={toggleValues}
|
||||
aria-pressed={allSelected}
|
||||
>
|
||||
{allSelected ? 'Unselect' : 'Select all'}
|
||||
</Button>
|
||||
)}
|
||||
</StyledList>
|
||||
</div>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user