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

Merge 768b491639 into e624413e19

Browse Source
This commit is contained in:
Nuno Góis 2025-06-26 15:34:21 +01:00 committed by GitHub
commit cee8d05bcd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 64 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint/AddValuesPopover.tsx
View File

@ -1,5 +1,6 @@
import { import {
Button, Button,
ClickAwayListener,
type InputBaseComponentProps, type InputBaseComponentProps,
Popover, Popover,
styled, styled,
@ -15,6 +16,14 @@ const StyledPopover = styled(Popover)(({ theme }) => ({
padding: theme.spacing(2), padding: theme.spacing(2),
width: '250px', width: '250px',
}, },
'&.MuiPopover-root': {
pointerEvents: 'none',
},
'& .MuiPopover-paper': {
pointerEvents: 'all',
},
})); }));
const StyledTextField = styled(TextField)(({ theme }) => ({ const StyledTextField = styled(TextField)(({ theme }) => ({
@ -92,59 +101,61 @@ export const AddValuesPopover: FC<AddValuesProps> = ({
horizontal: 'left', horizontal: 'left',
}} }}
> >
<form <ClickAwayListener onClickAway={onClose}>
onSubmit={(e) => { <form
e.stopPropagation(); onSubmit={(e) => {
e.preventDefault(); e.stopPropagation();
if (!inputValue?.trim()) { e.preventDefault();
setError('Value cannot be empty or whitespace'); if (!inputValue?.trim()) {
return; setError('Value cannot be empty or whitespace');
} else { return;
onAdd(inputValue, { } else {
setError, onAdd(inputValue, {
clearInput: () => setInputValue(''), setError,
}); clearInput: () => setInputValue(''),
} });
}} }
> }}
<InputRow> >
<ScreenReaderOnly> <InputRow>
<label htmlFor={inputId}>Constraint Value</label> <ScreenReaderOnly>
</ScreenReaderOnly> <label htmlFor={inputId}>Constraint Value</label>
<StyledTextField </ScreenReaderOnly>
id={inputId} <StyledTextField
placeholder='Enter value' id={inputId}
value={inputValue} placeholder='Enter value'
onChange={(e) => { value={inputValue}
setInputValue(e.target.value); onChange={(e) => {
setError(''); setInputValue(e.target.value);
}} setError('');
size='small' }}
variant='standard' size='small'
fullWidth variant='standard'
inputRef={inputRef} fullWidth
autoFocus inputRef={inputRef}
error={!!error} autoFocus
helperText={error} error={!!error}
aria-describedby={helpTextId} helperText={error}
inputProps={{ aria-describedby={helpTextId}
...inputProps, inputProps={{
}} ...inputProps,
data-testid='CONSTRAINT_VALUES_INPUT' }}
/> data-testid='CONSTRAINT_VALUES_INPUT'
<AddButton />
variant='text' <AddButton
type='submit' variant='text'
size='small' type='submit'
color='primary' size='small'
disabled={!inputValue?.trim()} color='primary'
data-testid='CONSTRAINT_VALUES_ADD_BUTTON' disabled={!inputValue?.trim()}
> data-testid='CONSTRAINT_VALUES_ADD_BUTTON'
Add >
</AddButton> Add
</InputRow> </AddButton>
<HelpText id={helpTextId}>{helpText}</HelpText> </InputRow>
</form> <HelpText id={helpTextId}>{helpText}</HelpText>
</form>
</ClickAwayListener>
</StyledPopover> </StyledPopover>
); );
}; };