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