Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-05-12 01:17:04 +02:00
Code Issues Projects Releases Wiki Activity

feat: description for stickiness selector (#9746)

Browse Source
This commit is contained in:
Jaanus Sellin 2025-04-11 15:01:15 +03:00 committed by GitHub
parent b2471633b4
commit 3b96bfb4ff
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 134 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
frontend/src/component/feature/StrategyTypes/FlexibleStrategy/StickinessSelect/StickinessSelect.tsx
View File

@ -1,14 +1,55 @@
import Select from 'component/common/select';
import { type SelectChangeEvent, useTheme } from '@mui/material';
import {
MenuItem,
styled,
useTheme,
Select,
type SelectChangeEvent,
FormControl,
InputLabel,
} from '@mui/material';
import { useStickinessOptions } from 'hooks/useStickinessOptions';
import { SELECT_ITEM_ID } from 'utils/testIds';
import type { ReactNode } from 'react';
interface IStickinessSelectProps {
label: string;
value: string | undefined;
editable: boolean;
onChange: (event: SelectChangeEvent) => void;
onChange: (event: SelectChangeEvent<string>) => void;
dataTestId?: string;
}
const StyledValueContainer = styled('div')(({ theme }) => ({
lineHeight: 1.1,
marginTop: -2,
marginBottom: -10,
}));
const StyledLabel = styled('div')(({ theme }) => ({
fontSize: theme.fontSizes.smallBody,
}));
const StyledDescription = styled('p')(({ theme }) => ({
fontSize: theme.fontSizes.smallerBody,
color: theme.palette.neutral.main,
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
}));
const StyledDropdownDescription = styled('p')(({ theme }) => ({
fontSize: theme.fontSizes.smallerBody,
color: theme.palette.neutral.main,
overflow: 'hidden',
whiteSpace: 'normal',
wordBreak: 'break-word',
}));
const StyledOptionContainer = styled('div')(({ theme }) => ({
lineHeight: 1.2,
width: '100%',
}));
export const StickinessSelect = ({
label,
editable,
@ -19,21 +60,73 @@ export const StickinessSelect = ({
const theme = useTheme();
const stickinessOptions = useStickinessOptions(value);
const renderValue = (selected: string): ReactNode => {
const option = stickinessOptions.find((o) => o.key === selected);
return (
<StyledValueContainer>
<StyledLabel>{option?.label || selected}</StyledLabel>
{option?.description && (
<StyledDescription>{option.description}</StyledDescription>
)}
</StyledValueContainer>
);
};
return (
<Select
id='stickiness-select'
name='stickiness'
label={label}
options={stickinessOptions}
value={value}
disabled={!editable}
data-testid={dataTestId}
onChange={onChange}
style={{
minWidth: '100%',
<FormControl
variant='outlined'
size='small'
sx={{
width: '100%',
marginBottom: theme.spacing(2),
}}
formControlStyles={{ width: '100%' }}
/>
>
<InputLabel htmlFor='stickiness-select'>{label}</InputLabel>
<Select
id='stickiness-select'
name='stickiness'
label={label}
value={value || ''}
disabled={!editable}
data-testid={dataTestId}
onChange={onChange}
renderValue={renderValue}
MenuProps={{
anchorOrigin: {
vertical: 'bottom',
horizontal: 'left',
},
transformOrigin: {
vertical: 'top',
horizontal: 'left',
},
PaperProps: {
style: {
width: '18%',
},
},
}}
>
{stickinessOptions.map((option) => (
<MenuItem
key={option.key}
value={option.key}
data-testid={`${SELECT_ITEM_ID}-${option.label}`}
sx={{
padding: theme.spacing(1, 2),
}}
>
<StyledOptionContainer>
<StyledLabel>{option.label}</StyledLabel>
{option.description && (
<StyledDropdownDescription>
{option.description}
</StyledDropdownDescription>
)}
</StyledOptionContainer>
</MenuItem>
))}
</Select>
</FormControl>
);
};

30
frontend/src/hooks/useStickinessOptions.ts
View File

@ -1,6 +1,10 @@
import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext';
type OptionType = { key: string; label: string };
type OptionType = {
key: string;
label: string;
description?: string;
};
const DEFAULT_RANDOM_OPTION = 'random';
const DEFAULT_STICKINESS_OPTION = 'default';
@ -10,25 +14,41 @@ export const useStickinessOptions = (value: string | undefined) => {
const options = context
.filter((field) => field.stickiness)
.map((c) => ({ key: c.name, label: c.name })) as OptionType[];
.map((c) => ({
key: c.name,
label: c.name,
description: c.description,
})) as OptionType[];
if (
!options.find((option) => option.key === 'default') &&
!context.find((field) => field.name === DEFAULT_STICKINESS_OPTION)
) {
options.push({ key: 'default', label: 'default' });
options.push({
key: 'default',
label: 'Default',
description:
'Default stickiness will choose the first value present in the following order: userId, sessionId, random.',
});
}
if (
!options.find((option) => option.key === 'random') &&
!context.find((field) => field.name === DEFAULT_RANDOM_OPTION)
) {
options.push({ key: 'random', label: 'random' });
options.push({
key: 'random',
label: 'random',
description: 'Random distribution with no stickiness.',
});
}
// Add existing value to the options
if (value && !options.find((option) => option.key === value)) {
options.push({ key: value, label: value });
options.push({
key: value,
label: value,
});
}
return options;