Skip to content

Commit

Permalink
[SIEM] Fix Edit Filter suggestions displayed behind Filter Popover (#…
Browse files Browse the repository at this point in the history 
…53166) (#53273)
  • Loading branch information
@patrykkopycinski
patrykkopycinski authored Dec 17, 2019
1 parent b838305 commit 63c0244
Show file tree
Hide file tree
Showing 3 changed files with 120 additions and 129 deletions.
184 changes: 86 additions & 98 deletions x-pack/legacy/plugins/siem/public/components/edit_data_provider/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import {
EuiToolTip,
} from '@elastic/eui';
import React, { useEffect, useState, useCallback } from 'react';
import styled, { createGlobalStyle } from 'styled-components';
import styled from 'styled-components';

import { BrowserFields } from '../../containers/source';
import { OnDataProviderEdited } from '../timeline/events';
Expand Down Expand Up @@ -46,15 +46,6 @@ export const HeaderContainer = styled.div`

HeaderContainer.displayName = 'HeaderContainer';

// SIDE EFFECT: the following `createGlobalStyle` overrides the default styling
// of euiComboBoxOptionsList because it's implemented as a popover, so it's
// not selectable as a child of the styled component
const StatefulEditDataProviderGlobalStyle = createGlobalStyle`
.euiComboBoxOptionsList {
z-index: 9999;
}
`;

interface Props {
andProviderId?: string;
browserFields: BrowserFields;
Expand Down Expand Up @@ -157,107 +148,104 @@ export const StatefulEditDataProvider = React.memo<Props>(
}, []);

return (
<>
<EuiPanel paddingSize="s">
<EuiFlexGroup direction="column" gutterSize="none">
<EuiFlexItem grow={false}>
<EuiFlexGroup direction="row" gutterSize="none" justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
<EuiFormRow label={i18n.FIELD}>
<EuiToolTip content={updatedField.length > 0 ? updatedField[0].label : null}>
<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` }}
/>
</EuiToolTip>
</EuiFormRow>
</EuiFlexItem>

<EuiFlexItem grow={false}>
<EuiFormRow label={i18n.OPERATOR}>
<EuiPanel paddingSize="s">
<EuiFlexGroup direction="column" gutterSize="none">
<EuiFlexItem grow={false}>
<EuiFlexGroup direction="row" gutterSize="none" justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
<EuiFormRow label={i18n.FIELD}>
<EuiToolTip content={updatedField.length > 0 ? updatedField[0].label : null}>
<EuiComboBox
data-test-subj="operator"
data-test-subj="field"
isClearable={false}
onChange={onOperatorSelected}
options={operatorLabels}
placeholder={i18n.SELECT_AN_OPERATOR}
selectedOptions={updatedOperator}
onChange={onFieldSelected}
options={getCategorizedFieldNames(browserFields)}
placeholder={i18n.FIELD_PLACEHOLDER}
selectedOptions={updatedField}
singleSelection={{ asPlainText: true }}
style={{ width: `${OPERATOR_COMBO_BOX_WIDTH}px` }}
style={{ width: `${FIELD_COMBO_BOX_WIDTH}px` }}
/>
</EuiFormRow>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>

<EuiFlexItem grow={false}>
<EuiSpacer />
</EuiFlexItem>
</EuiToolTip>
</EuiFormRow>
</EuiFlexItem>

{updatedOperator.length > 0 &&
updatedOperator[0].label !== i18n.EXISTS &&
updatedOperator[0].label !== i18n.DOES_NOT_EXIST ? (
<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)}
<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>
) : null}
</EuiFlexGroup>
</EuiFlexItem>

<EuiFlexItem grow={false}>
<EuiSpacer />
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiSpacer />
</EuiFlexItem>

{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,
})
}
onClick={() => {
onDataProviderEdited({
andProviderId,
excluded: getExcludedFromSelection(updatedOperator),
field: updatedField.length > 0 ? updatedField[0].label : '',
id: timelineId,
operator: getQueryOperatorFromSelection(updatedOperator),
providerId,
value: updatedValue,
});
}}
size="s"
>
{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)}
/>
</EuiFormRow>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPanel>
<StatefulEditDataProviderGlobalStyle />
</>
) : null}

<EuiFlexItem grow={false}>
<EuiSpacer />
</EuiFlexItem>

<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,
})
}
onClick={() => {
onDataProviderEdited({
andProviderId,
excluded: getExcludedFromSelection(updatedOperator),
field: updatedField.length > 0 ? updatedField[0].label : '',
id: timelineId,
operator: getQueryOperatorFromSelection(updatedOperator),
providerId,
value: updatedValue,
});
}}
size="s"
>
{i18n.SAVE}
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPanel>
);
}
);
Expand Down
52 changes: 21 additions & 31 deletions x-pack/legacy/plugins/siem/public/components/loading/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,7 @@

import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner, EuiPanel, EuiText } from '@elastic/eui';
import * as React from 'react';
import styled, { createGlobalStyle } from 'styled-components';

// SIDE EFFECT: the following `createGlobalStyle` overrides default styling in angular code that was not theme-friendly
const LoadingPanelGlobalStyle = createGlobalStyle`
.euiPanel-loading-hide-border {
border: none;
}
`;
import styled from 'styled-components';

const SpinnerFlexItem = styled(EuiFlexItem)`
margin-right: 5px;
Expand All @@ -39,30 +32,27 @@ export const LoadingPanel = React.memo<LoadingProps>(
position = 'relative',
zIndex = 'inherit',
}) => (
<>
<LoadingStaticPanel
className="app-loading"
height={height}
width={width}
position={position}
zIndex={zIndex}
>
<LoadingStaticContentPanel>
<EuiPanel className={showBorder ? '' : 'euiPanel-loading-hide-border'}>
<EuiFlexGroup alignItems="center" direction="row" gutterSize="none">
<SpinnerFlexItem grow={false}>
<EuiLoadingSpinner size="m" />
</SpinnerFlexItem>
<LoadingStaticPanel
className="app-loading"
height={height}
width={width}
position={position}
zIndex={zIndex}
>
<LoadingStaticContentPanel>
<EuiPanel className={showBorder ? '' : 'euiPanel-loading-hide-border'}>
<EuiFlexGroup alignItems="center" direction="row" gutterSize="none">
<SpinnerFlexItem grow={false}>
<EuiLoadingSpinner size="m" />
</SpinnerFlexItem>

<EuiFlexItem grow={false}>
<EuiText>{text}</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPanel>
</LoadingStaticContentPanel>
</LoadingStaticPanel>
<LoadingPanelGlobalStyle />
</>
<EuiFlexItem grow={false}>
<EuiText>{text}</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPanel>
</LoadingStaticContentPanel>
</LoadingStaticPanel>
)
);

Expand Down
13 changes: 13 additions & 0 deletions x-pack/legacy/plugins/siem/public/components/page/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,19 @@ export const AppGlobalStyle = createGlobalStyle`
.euiToolTip {
z-index: 9950 !important;
}
/*
overrides the default styling of euiComboBoxOptionsList because it's implemented
as a popover, so it's not selectable as a child of the styled component
*/
.euiComboBoxOptionsList {
z-index: 9999;
}
/* overrides default styling in angular code that was not theme-friendly */
.euiPanel-loading-hide-border {
border: none;
}
`;

export const DescriptionListStyled = styled(EuiDescriptionList)`
Expand Down

0 comments on commit 63c0244

Please sign in to comment.