feat: description for stickiness selector (#9746)

frontend/src/component/feature/StrategyTypes/FlexibleStrategy/StickinessSelect/StickinessSelect.tsx

@@ -1,14 +1,55 @@
-import Select from 'component/common/select';
+import {
-import { type SelectChangeEvent, useTheme } from '@mui/material';
+    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 (
+        <FormControl
+            variant='outlined'
+            size='small'
+            sx={{
+                width: '100%',
+                marginBottom: theme.spacing(2),
+            }}
+        >
+            <InputLabel htmlFor='stickiness-select'>{label}</InputLabel>
             <Select
                 id='stickiness-select'
                 name='stickiness'
                 label={label}
-            options={stickinessOptions}
+                value={value || ''}
-            value={value}
                 disabled={!editable}
                 data-testid={dataTestId}
                 onChange={onChange}
-            style={{
+                renderValue={renderValue}
-                minWidth: '100%',
+                MenuProps={{
-                marginBottom: theme.spacing(2),
+                    anchorOrigin: {
+                        vertical: 'bottom',
+                        horizontal: 'left',
+                    },
+                    transformOrigin: {
+                        vertical: 'top',
+                        horizontal: 'left',
+                    },
+                    PaperProps: {
+                        style: {
+                            width: '18%',
+                        },
+                    },
                 }}
-            formControlStyles={{ width: '100%' }}
+            >
-        />
+                {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>
     );
 };

frontend/src/hooks/useStickinessOptions.ts

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