refactor: LabelFilterItem select all functionality

frontend/src/component/impact-metrics/ChartConfigModal/LabelFilter/LabelFilterItem/LabelFilterItem.tsx

@@ -3,17 +3,11 @@ import {
     Autocomplete,
     Checkbox,
     Chip,
-    FormControlLabel,
-    styled,
     TextField,
     Typography,
 } from '@mui/material';
 import type { FC } from 'react';
 
-const StyledSelectAllLabel = styled('span')(({ theme }) => ({
-    fontSize: theme.fontSizes.smallBody,
-}));
-
 type LabelFilterItemProps = {
     labelKey: string;
     options: string[];
@@ -28,42 +22,42 @@ export const LabelFilterItem: FC<LabelFilterItemProps> = ({
     value,
     onChange,
 }) => {
-    const isAllSelected = value.includes('*');
+    const SELECT_ALL = '*';
+    const isAllSelected = value.includes(SELECT_ALL);
     const autocompleteId = `autocomplete-${labelKey}`;
-    const selectAllId = `select-all-${labelKey}`;
     const isTruncated = options.length >= 1_000;
 
+    const optionsWithSelectAll = [SELECT_ALL, ...options];
+
     return (
-        <>
-            <FormControlLabel
-                sx={(theme) => ({
-                    marginLeft: theme.spacing(0),
-                })}
-                control={
-                    <Checkbox
-                        id={selectAllId}
-                        size='small'
-                        checked={isAllSelected}
-                        onChange={(e) =>
-                            onChange(e.target.checked ? ['*'] : [])
-                        }
-                        inputProps={{
-                            'aria-describedby': autocompleteId,
-                            'aria-label': `Select all ${labelKey} options`,
-                        }}
-                    />
-                }
-                label={<StyledSelectAllLabel>Select all</StyledSelectAllLabel>}
-            />
         <Autocomplete
             multiple
+            disableCloseOnSelect
             id={autocompleteId}
-                options={options}
+            options={optionsWithSelectAll}
             value={isAllSelected ? options : value}
-                onChange={(_, newValues) => {
+            getOptionLabel={(option) =>
-                    onChange(newValues);
+                option === SELECT_ALL ? 'Select all' : option
+            }
+            onChange={(_, newValues, reason, details) => {
+                if (details?.option === SELECT_ALL) {
+                    onChange(isAllSelected ? [] : [SELECT_ALL]);
+                    return;
+                }
+                onChange(newValues.filter((v) => v !== SELECT_ALL));
             }}
-                disabled={isAllSelected}
+            renderOption={(props, option, { selected }) => (
+                <li {...props}>
+                    <Checkbox
+                        size='small'
+                        checked={
+                            option === SELECT_ALL ? isAllSelected : selected
+                        }
+                        style={{ marginRight: 8 }}
+                    />
+                    {option === SELECT_ALL ? 'Select all' : option}
+                </li>
+            )}
             renderTags={(value, getTagProps) => {
                 const overflowCount = 5;
                 const displayedValues = value.slice(-overflowCount);
@@ -106,12 +100,7 @@ export const LabelFilterItem: FC<LabelFilterItemProps> = ({
                         }
                         variant='outlined'
                         size='small'
-                            inputProps={{
+                        inputProps={{ ...params.inputProps }}
-                                ...params.inputProps,
-                                'aria-describedby': isAllSelected
-                                    ? `${selectAllId}-description`
-                                    : undefined,
-                            }}
                     />
                     {isTruncated && (
                         <Alert
@@ -121,13 +110,11 @@ export const LabelFilterItem: FC<LabelFilterItemProps> = ({
                                 marginTop: theme.spacing(1),
                             })}
                         >
-                                Maximum of 1000 values loaded due to
+                            Maximum of 1000 values loaded due to performance.
-                                performance.
                         </Alert>
                     )}
                 </>
             )}
         />
-        </>
     );
 };