[ML] Add padding for custom rule popovers (#141215)

* set popover padding

* update jest snapshot

* fix scope_expression popover
This commit is contained in:
Dima Arnautov 2022-09-23 16:18:32 +02:00 committed by GitHub
parent 64294688ad
commit fe2a089f08
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 30 additions and 72 deletions

View file

@ -29,15 +29,9 @@ exports[`ConditionExpression renders with appliesTo, operator and value supplied
id="appliesToPopover"
isOpen={false}
ownFocus={true}
panelPaddingSize="none"
panelPaddingSize="s"
>
<div
style={
Object {
"zIndex": "200",
}
}
>
<div>
<EuiPopoverTitle>
<FormattedMessage
defaultMessage="When"
@ -106,16 +100,10 @@ exports[`ConditionExpression renders with appliesTo, operator and value supplied
id="operatorValuePopover"
isOpen={false}
ownFocus={true}
panelPaddingSize="none"
panelPaddingSize="s"
withTitle={true}
>
<div
style={
Object {
"zIndex": "200",
}
}
>
<div>
<EuiPopoverTitle>
<FormattedMessage
defaultMessage="Is"
@ -227,15 +215,9 @@ exports[`ConditionExpression renders with only value supplied 1`] = `
id="appliesToPopover"
isOpen={false}
ownFocus={true}
panelPaddingSize="none"
panelPaddingSize="s"
>
<div
style={
Object {
"zIndex": "200",
}
}
>
<div>
<EuiPopoverTitle>
<FormattedMessage
defaultMessage="When"
@ -303,16 +285,10 @@ exports[`ConditionExpression renders with only value supplied 1`] = `
id="operatorValuePopover"
isOpen={false}
ownFocus={true}
panelPaddingSize="none"
panelPaddingSize="s"
withTitle={true}
>
<div
style={
Object {
"zIndex": "200",
}
}
>
<div>
<EuiPopoverTitle>
<FormattedMessage
defaultMessage="Is"

View file

@ -100,15 +100,9 @@ exports[`ScopeExpression renders when enabled set to false 1`] = `
id="operatorValuePopover"
isOpen={false}
ownFocus={true}
panelPaddingSize="none"
panelPaddingSize="s"
>
<div
style={
Object {
"zIndex": "200",
}
}
>
<div>
<EuiPopoverTitle>
<FormattedMessage
defaultMessage="Is"
@ -251,15 +245,9 @@ exports[`ScopeExpression renders when filter ID and type supplied 1`] = `
id="operatorValuePopover"
isOpen={false}
ownFocus={true}
panelPaddingSize="none"
panelPaddingSize="s"
>
<div
style={
Object {
"zIndex": "200",
}
}
>
<div>
<EuiPopoverTitle>
<FormattedMessage
defaultMessage="Is"
@ -402,15 +390,9 @@ exports[`ScopeExpression renders when no filter ID or type supplied 1`] = `
id="operatorValuePopover"
isOpen={false}
ownFocus={true}
panelPaddingSize="none"
panelPaddingSize="s"
>
<div
style={
Object {
"zIndex": "200",
}
}
>
<div>
<EuiPopoverTitle>
<FormattedMessage
defaultMessage="Is"

View file

@ -28,9 +28,6 @@ import { appliesToText, operatorToText } from './utils';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n-react';
// Raise the popovers above GuidePageSideNav
const POPOVER_STYLE = { zIndex: '200' };
export class ConditionExpression extends Component {
static propTypes = {
index: PropTypes.number.isRequired,
@ -102,7 +99,7 @@ export class ConditionExpression extends Component {
renderAppliesToPopover() {
return (
<div style={POPOVER_STYLE}>
<div>
<EuiPopoverTitle>
<FormattedMessage
id="xpack.ml.ruleEditor.conditionExpression.appliesToPopoverTitle"
@ -129,7 +126,7 @@ export class ConditionExpression extends Component {
renderOperatorValuePopover() {
return (
<div style={POPOVER_STYLE}>
<div>
<EuiPopoverTitle>
<FormattedMessage
id="xpack.ml.ruleEditor.conditionExpression.operatorValuePopoverTitle"
@ -189,7 +186,7 @@ export class ConditionExpression extends Component {
}
isOpen={this.state.isAppliesToOpen}
closePopover={this.closeAppliesTo}
panelPaddingSize="none"
panelPaddingSize="s"
ownFocus
anchorPosition="downLeft"
>
@ -216,7 +213,7 @@ export class ConditionExpression extends Component {
}
isOpen={this.state.isOperatorValueOpen}
closePopover={this.closeOperatorValue}
panelPaddingSize="none"
panelPaddingSize="s"
ownFocus
withTitle
anchorPosition="downLeft"

View file

@ -26,9 +26,6 @@ import { FILTER_TYPE } from '../../../../common/constants/detector_rule';
import { filterTypeToText } from './utils';
import { FormattedMessage } from '@kbn/i18n-react';
// Raise the popovers above GuidePageSideNav
const POPOVER_STYLE = { zIndex: '200' };
function getFilterListOptions(filterListIds) {
return filterListIds.map((filterId) => ({ value: filterId, text: filterId }));
}
@ -76,7 +73,7 @@ export class ScopeExpression extends Component {
const { filterId, filterType, filterListIds } = this.props;
return (
<div style={POPOVER_STYLE}>
<div>
<EuiPopoverTitle>
<FormattedMessage
id="xpack.ml.ruleEditor.scopeExpression.scopeFilterTypePopoverTitle"
@ -156,7 +153,7 @@ export class ScopeExpression extends Component {
}
isOpen={this.state.isFilterListOpen}
closePopover={this.closeFilterList}
panelPaddingSize="none"
panelPaddingSize="s"
ownFocus
anchorPosition="downLeft"
>

View file

@ -8,7 +8,9 @@ exports[`EditConditionLink renders for a condition using actual 1`] = `
<EuiFlexItem
grow={false}
>
<EuiText>
<EuiText
size="s"
>
<FormattedMessage
defaultMessage="Update rule condition from {conditionValue} to"
id="xpack.ml.ruleEditor.editConditionLink.updateRuleConditionFromText"
@ -57,7 +59,9 @@ exports[`EditConditionLink renders for a condition using diff from typical 1`] =
<EuiFlexItem
grow={false}
>
<EuiText>
<EuiText
size="s"
>
<FormattedMessage
defaultMessage="Update rule condition from {conditionValue} to"
id="xpack.ml.ruleEditor.editConditionLink.updateRuleConditionFromText"
@ -106,7 +110,9 @@ exports[`EditConditionLink renders for a condition using typical 1`] = `
<EuiFlexItem
grow={false}
>
<EuiText>
<EuiText
size="s"
>
<FormattedMessage
defaultMessage="Update rule condition from {conditionValue} to"
id="xpack.ml.ruleEditor.editConditionLink.updateRuleConditionFromText"

View file

@ -70,7 +70,7 @@ export class EditConditionLink extends Component {
return (
<EuiFlexGroup alignItems="center" gutterSize="s">
<EuiFlexItem grow={false}>
<EuiText>
<EuiText size={'s'}>
<FormattedMessage
id="xpack.ml.ruleEditor.editConditionLink.updateRuleConditionFromText"
defaultMessage="Update rule condition from {conditionValue} to"