refactor: LabelFilterItem "select all" functionality (#10610)

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

@@ -3,17 +3,12 @@ import {
     Autocomplete,
     Checkbox,
     Chip,
-    FormControlLabel,
-    styled,
     TextField,
     Typography,
 } from '@mui/material';
+import { METRIC_LABELS_SELECT_ALL } from 'component/impact-metrics/hooks/useImpactMetricsState';
 import type { FC } from 'react';
 
-const StyledSelectAllLabel = styled('span')(({ theme }) => ({
-    fontSize: theme.fontSizes.smallBody,
-}));
-
 type LabelFilterItemProps = {
     labelKey: string;
     options: string[];
@@ -28,42 +23,54 @@ export const LabelFilterItem: FC<LabelFilterItemProps> = ({
     value,
     onChange,
 }) => {
-    const isAllSelected = value.includes('*');
+    const isAllSelected = value.includes(METRIC_LABELS_SELECT_ALL);
     const autocompleteId = `autocomplete-${labelKey}`;
-    const selectAllId = `select-all-${labelKey}`;
     const isTruncated = options.length >= 1_000;
 
+    const optionsWithSelectAll = [METRIC_LABELS_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 === METRIC_LABELS_SELECT_ALL ? '(Select all)' : option
+            }
+            onChange={(_, newValues, reason, details) => {
+                if (details?.option === METRIC_LABELS_SELECT_ALL) {
+                    onChange(isAllSelected ? [] : [METRIC_LABELS_SELECT_ALL]);
+                    return;
+                }
+                onChange(
+                    newValues.filter((v) => v !== METRIC_LABELS_SELECT_ALL),
+                );
             }}
-                disabled={isAllSelected}
+            renderOption={(props, option, { selected }) => (
+                <li {...props}>
+                    <Checkbox
+                        size='small'
+                        checked={
+                            option === METRIC_LABELS_SELECT_ALL
+                                ? isAllSelected
+                                : selected
+                        }
+                        style={{ marginRight: 8 }}
+                    />
+                    {option === METRIC_LABELS_SELECT_ALL ? (
+                        <Typography
+                            component='span'
+                            sx={{ color: 'text.secondary' }}
+                        >
+                            Select all
+                        </Typography>
+                    ) : (
+                        option
+                    )}
+                </li>
+            )}
             renderTags={(value, getTagProps) => {
                 const overflowCount = 5;
                 const displayedValues = value.slice(-overflowCount);
@@ -106,12 +113,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 +123,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>
                     )}
                 </>
             )}
         />
-        </>
     );
 };

frontend/src/component/impact-metrics/hooks/useImpactMetricsState.ts

@@ -3,6 +3,12 @@ import { useImpactMetricsSettings } from 'hooks/api/getters/useImpactMetricsSett
 import { useImpactMetricsSettingsApi } from 'hooks/api/actions/useImpactMetricsSettingsApi/useImpactMetricsSettingsApi.js';
 import type { ChartConfig, ImpactMetricsState, LayoutItem } from '../types.ts';
 
+/**
+ * "Select all" represents all current and future labels.
+ * Asterisk (*) is sent to the backend. This will create a different query then sending every current label.
+ */
+export const METRIC_LABELS_SELECT_ALL = '*';
+
 export const useImpactMetricsState = () => {
     const {
         settings,