mirror of
				https://github.com/Unleash/unleash.git
				synced 2025-10-27 11:02:16 +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