Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-09-24 17:51:14 +02:00
Code Issues Projects Releases Wiki Activity

refactor: 'Select all' value with constant from hook

Browse Source
This commit is contained in:
Tymoteusz Czech 2025-09-04 09:55:16 +02:00
parent f0e576f28f
commit 5d68be32a8
No known key found for this signature in database
GPG Key ID: 133555230D88D75F
2 changed files with 19 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,6 +6,7 @@ import {
TextField,
Typography,
} from '@mui/material';
import { METRIC_LABELS_SELECT_ALL } from 'component/impact-metrics/hooks/useImpactMetricsState';
import type { FC } from 'react';
type LabelFilterItemProps = {
@ -22,12 +23,11 @@ export const LabelFilterItem: FC<LabelFilterItemProps> = ({
value,
onChange,
}) => {
const SELECT_ALL = '*';
const isAllSelected = value.includes(SELECT_ALL);
const isAllSelected = value.includes(METRIC_LABELS_SELECT_ALL);
const autocompleteId = `autocomplete-${labelKey}`;
const isTruncated = options.length >= 1_000;
const optionsWithSelectAll = [SELECT_ALL, ...options];
const optionsWithSelectAll = [METRIC_LABELS_SELECT_ALL, ...options];
return (
<Autocomplete
@ -37,25 +37,29 @@ export const LabelFilterItem: FC<LabelFilterItemProps> = ({
options={optionsWithSelectAll}
value={isAllSelected ? options : value}
getOptionLabel={(option) =>
option === SELECT_ALL ? '(Select all)' : option
option === METRIC_LABELS_SELECT_ALL ? '(Select all)' : option
}
onChange={(_, newValues, reason, details) => {
if (details?.option === SELECT_ALL) {
onChange(isAllSelected ? [] : [SELECT_ALL]);
if (details?.option === METRIC_LABELS_SELECT_ALL) {
onChange(isAllSelected ? [] : [METRIC_LABELS_SELECT_ALL]);
return;
}
onChange(newValues.filter((v) => v !== SELECT_ALL));
onChange(
newValues.filter((v) => v !== METRIC_LABELS_SELECT_ALL),
);
}}
renderOption={(props, option, { selected }) => (
<li {...props}>
<Checkbox
size='small'
checked={
option === SELECT_ALL ? isAllSelected : selected
option === METRIC_LABELS_SELECT_ALL
? isAllSelected
: selected
}
style={{ marginRight: 8 }}
/>
{option === SELECT_ALL ? (
{option === METRIC_LABELS_SELECT_ALL ? (
<Typography
component='span'
sx={{ color: 'text.secondary' }}

6
frontend/src/component/impact-metrics/hooks/useImpactMetricsState.ts
View File

@ -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,