github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Timeline] [117942] Fix autofocus jumping to wrong field (#117950)

Browse source 
* Fix autofocus jumping to wrong field

* Fix Timeline cypress test to reflect focus being on correct field

Co-authored-by: Kristof-Pierre Cummings <kristofpierre.cummings@elastic.co>
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Kristof C 2021-11-11 07:56:30 -06:00 • committed by GitHub
parent b2e2264a2f
commit 477cb3bb15
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 84 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

2
x-pack/plugins/security_solution/cypress/screens/timeline.ts
View file

@ -149,6 +149,8 @@ export const TIMELINE_ADD_FIELD_BUTTON = '[data-test-subj="addField"]';
export const TIMELINE_DATA_PROVIDER_FIELD = '[data-test-subj="field"]';
export const TIMELINE_DATA_PROVIDER_FIELD_INPUT = '[data-test-subj="comboBoxSearchInput"]';
export const TIMELINE_DATA_PROVIDER_OPERATOR = `[data-test-subj="operator"]`;
export const TIMELINE_DATA_PROVIDER_VALUE = `[data-test-subj="value"]`;

6
x-pack/plugins/security_solution/cypress/tasks/timeline.ts
View file

@ -69,6 +69,7 @@ import {
TIMELINE_TAB_CONTENT_EQL,
TIMESTAMP_HOVER_ACTION_OVERFLOW_BTN,
PINNED_TAB_BUTTON,
TIMELINE_DATA_PROVIDER_FIELD_INPUT,
} from '../screens/timeline';
import { REFRESH_BUTTON, TIMELINE } from '../screens/timelines';
@ -176,8 +177,9 @@ export const addFilter = (filter: TimelineFilter): Cypress.Chainable<JQuery<HTML
export const addDataProvider = (filter: TimelineFilter): Cypress.Chainable<JQuery<HTMLElement>> => {
cy.get(TIMELINE_ADD_FIELD_BUTTON).click();
cy.get(LOADING_INDICATOR).should('not.exist');
cy.get(TIMELINE_DATA_PROVIDER_VALUE).should('have.focus'); // make sure the focus is ready before start typing
cy.get(TIMELINE_DATA_PROVIDER_FIELD)
.find(TIMELINE_DATA_PROVIDER_FIELD_INPUT)
.should('have.focus'); // make sure the focus is ready before start typing
cy.get(TIMELINE_DATA_PROVIDER_FIELD)
.find(COMBO_BOX_INPUT)
.type(`${filter.field}{downarrow}{enter}`);

160
x-pack/plugins/security_solution/public/timelines/components/edit_data_provider/index.tsx
View file

@ -13,7 +13,6 @@ import {
EuiFieldText,
EuiFlexGroup,
EuiFlexItem,
EuiFocusTrap,
EuiFormRow,
EuiPanel,
EuiSpacer,
@ -181,7 +180,6 @@ export const StatefulEditDataProvider = React.memo<Props>(
useEffect(() => {
disableScrolling();
focusInput();
return () => {
enableScrolling();
};
@ -189,94 +187,92 @@ export const StatefulEditDataProvider = React.memo<Props>(
return (
<EuiPanel paddingSize="s">
<EuiFocusTrap data-test-subj="focusTrap">
<EuiFlexGroup direction="column" gutterSize="none">
<EuiFlexItem grow={false}>
<EuiFlexGroup gutterSize="s" direction="row" justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
<EuiFormRow label={i18n.FIELD}>
<EuiComboBox
data-test-subj="field"
isClearable={false}
onChange={onFieldSelected}
options={getCategorizedFieldNames(browserFields)}
placeholder={i18n.FIELD_PLACEHOLDER}
selectedOptions={updatedField}
singleSelection={{ asPlainText: true }}
style={{ width: `${FIELD_COMBO_BOX_WIDTH}px` }}
/>
</EuiFormRow>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiFormRow label={i18n.OPERATOR}>
<EuiComboBox
data-test-subj="operator"
isClearable={false}
onChange={onOperatorSelected}
options={operatorLabels}
placeholder={i18n.SELECT_AN_OPERATOR}
selectedOptions={updatedOperator}
singleSelection={{ asPlainText: true }}
style={{ width: `${OPERATOR_COMBO_BOX_WIDTH}px` }}
/>
</EuiFormRow>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiSpacer size="m" />
</EuiFlexItem>
{type !== DataProviderType.template &&
updatedOperator.length > 0 &&
updatedOperator[0].label !== i18n.EXISTS &&
updatedOperator[0].label !== i18n.DOES_NOT_EXIST ? (
<EuiFlexGroup direction="column" gutterSize="none">
<EuiFlexItem grow={false}>
<EuiFlexGroup gutterSize="s" direction="row" justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
<EuiFormRow label={i18n.VALUE_LABEL}>
<EuiFieldText
className={VALUE_INPUT_CLASS_NAME}
data-test-subj="value"
onChange={onValueChange}
placeholder={i18n.VALUE}
value={sanatizeValue(updatedValue)}
isInvalid={isValueFieldInvalid}
<EuiFormRow label={i18n.FIELD}>
<EuiComboBox
autoFocus
data-test-subj="field"
isClearable={false}
onChange={onFieldSelected}
options={getCategorizedFieldNames(browserFields)}
placeholder={i18n.FIELD_PLACEHOLDER}
selectedOptions={updatedField}
singleSelection={{ asPlainText: true }}
style={{ width: `${FIELD_COMBO_BOX_WIDTH}px` }}
/>
</EuiFormRow>
</EuiFlexItem>
) : null}
<EuiFlexItem grow={false}>
<EuiSpacer size="m" />
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiFormRow label={i18n.OPERATOR}>
<EuiComboBox
data-test-subj="operator"
isClearable={false}
onChange={onOperatorSelected}
options={operatorLabels}
placeholder={i18n.SELECT_AN_OPERATOR}
selectedOptions={updatedOperator}
singleSelection={{ asPlainText: true }}
style={{ width: `${OPERATOR_COMBO_BOX_WIDTH}px` }}
/>
</EuiFormRow>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiSpacer size="m" />
</EuiFlexItem>
{type !== DataProviderType.template &&
updatedOperator.length > 0 &&
updatedOperator[0].label !== i18n.EXISTS &&
updatedOperator[0].label !== i18n.DOES_NOT_EXIST ? (
<EuiFlexItem grow={false}>
<EuiFlexGroup justifyContent="flexEnd" gutterSize="none">
<EuiFlexItem grow={false}>
<EuiButton
autoFocus
className={SAVE_CLASS_NAME}
color="primary"
data-test-subj="save"
fill={true}
isDisabled={
!selectionsAreValid({
browserFields,
selectedField: updatedField,
selectedOperator: updatedOperator,
}) || isValueFieldInvalid
}
onClick={handleSave}
size="m"
>
{i18n.SAVE}
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
<EuiFormRow label={i18n.VALUE_LABEL}>
<EuiFieldText
className={VALUE_INPUT_CLASS_NAME}
data-test-subj="value"
onChange={onValueChange}
placeholder={i18n.VALUE}
value={sanatizeValue(updatedValue)}
isInvalid={isValueFieldInvalid}
/>
</EuiFormRow>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFocusTrap>
) : null}
<EuiFlexItem grow={false}>
<EuiSpacer size="m" />
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiFlexGroup justifyContent="flexEnd" gutterSize="none">
<EuiFlexItem grow={false}>
<EuiButton
className={SAVE_CLASS_NAME}
color="primary"
data-test-subj="save"
fill={true}
isDisabled={
!selectionsAreValid({
browserFields,
selectedField: updatedField,
selectedOperator: updatedOperator,
}) || isValueFieldInvalid
}
onClick={handleSave}
size="m"
>
{i18n.SAVE}
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPanel>
);
}