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