maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[App Search] Result Settings: Max size input fixes (#104755)

Browse source 
* Fix "Max size" number inputs cutting off the "No limit" placeholder text on Chrome/webkit

- textOnly={false} is required for the input to expand in width

* Fix handleFieldNumberBlur behavior:
- should allow setting a number field back to empty/no limits

- dev note: '' is the blank/empty state, which gets parsed to NaN. Random invalid strings ALSO get parsed to '', which is NaN

* Fix input not clearing invalid non-number strings

For some really odd reason, '' and undefined aren't correctly resetting the input value when a string gets entered into the input. I had to add a space for EUI to actually start clearing it

Note that this change completely prevents users from writing non-numbers into the input at all, but this is probably fine/valid honestly
This commit is contained in:
Constance 2021-07-08 08:58:59 -07:00 committed by GitHub
parent db048c33a5
commit 07bd76c2a3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 12 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/result_settings_table/field_number.test.tsx
View file

@ -54,7 +54,7 @@ describe('FieldNumber', () => {
}}
/>
);
expect(wrapper.find(EuiFieldNumber).prop('value')).toEqual('');
expect(wrapper.find(EuiFieldNumber).prop('value')).toEqual(' ');
});
it('is disabled if the [fieldEnabledProperty] in fieldSettings is false', () => {
@ -90,10 +90,10 @@ describe('FieldNumber', () => {
expect(props.updateAction).toHaveBeenCalledWith('foo', 21);
});
it('will call updateAction on blur using the minimum possible value if the current value is something other than a number', () => {
it('will call clearAction on blur if the current value is something other than a number', () => {
const wrapper = shallow(<FieldNumber {...props} />);
wrapper.simulate('blur', { target: { value: '' } });
expect(props.updateAction).toHaveBeenCalledWith('foo', 20);
expect(props.clearAction).toHaveBeenCalledWith('foo');
});
it('will call updateAction on blur using the minimum possible value if the value is something lower than the minimum', () => {

11
x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/result_settings_table/field_number.tsx
View file

@ -43,11 +43,10 @@ const handleFieldNumberBlur = (
clearAction: (fieldName: string) => void
) => {
return (e: FocusEvent<HTMLInputElement>) => {
const value = parseInt(e.target.value, 10);
const fieldValue = Math.min(
SIZE_FIELD_MAXIMUM,
Math.max(SIZE_FIELD_MINIMUM, isNaN(value) ? 0 : value)
);
let fieldValue = parseInt(e.target.value, 10);
if (!isNaN(fieldValue)) {
fieldValue = Math.min(SIZE_FIELD_MAXIMUM, Math.max(SIZE_FIELD_MINIMUM, fieldValue));
}
updateOrClearSizeForField(fieldName, fieldValue, updateAction, clearAction);
};
};
@ -74,7 +73,7 @@ export const FieldNumber: React.FC<Props> = ({
value={
typeof fieldSettings[fieldSizeProperty] === 'number'
? (fieldSettings[fieldSizeProperty] as number)
: ''
: ' ' // Without the space, invalid non-numbers don't get cleared for some reason
}
placeholder={i18n.translate(
'xpack.enterpriseSearch.appSearch.engine.resultSettings.numberFieldPlaceholder',

4
x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/result_settings_table/text_fields_body.tsx
View file

@ -56,7 +56,7 @@ export const TextFieldsBody: React.FC = () => {
}}
/>
</EuiTableRowCellCheckbox>
<EuiTableRowCell align="center">
<EuiTableRowCell align="center" textOnly={false}>
<FieldNumber
fieldName={fieldName}
fieldEnabledProperty="raw"
@ -95,7 +95,7 @@ export const TextFieldsBody: React.FC = () => {
}}
/>
</EuiTableRowCellCheckbox>
<EuiTableRowCell align="center">
<EuiTableRowCell align="center" textOnly={false}>
<FieldNumber
fieldName={fieldName}
fieldEnabledProperty="snippet"

4
x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/result_settings_table/text_fields_header.tsx
View file

@ -30,7 +30,7 @@ export const TextFieldsHeader: React.FC = () => {
{ defaultMessage: 'Raw' }
)}
</EuiTableHeaderCell>
<EuiTableHeaderCell align="center">
<EuiTableHeaderCell align="center" width="115">
{i18n.translate(
'xpack.enterpriseSearch.appSearch.engine.resultSettings.table.column.maxSizeTitle',
{ defaultMessage: 'Max size' }
@ -48,7 +48,7 @@ export const TextFieldsHeader: React.FC = () => {
{ defaultMessage: 'Fallback' }
)}
</EuiTableHeaderCell>
<EuiTableHeaderCell align="center">
<EuiTableHeaderCell align="center" width="115">
{i18n.translate(
'xpack.enterpriseSearch.appSearch.engine.resultSettings.table.column.maxSizeTitle',
{ defaultMessage: 'Max size' }