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

[Security Solution][Detections] Fix "Severity override" dropdowns in "Create new rule" -> "About rule" (#82271) (#82427)

Browse source 
We use `EuiComboBox` in all "Severity override" dropdowns (which are called `FieldComponent` and `AutocompleteFieldMatchComponent`). The issue with `EuiComboBox` is that it doesn't handle long text in the placeholder properly. In the https://github.com/elastic/kibana/issues/81284 you can see the placeholders' text being split into multiple lines that gives this messy effect.

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Georgii Gorbachev 2020-11-04 14:12:59 +01:00 • committed by GitHub
parent 0452f445cb
commit c2541f9186
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 29 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

5
x-pack/plugins/security_solution/public/common/components/autocomplete/field.tsx
View file

@ -32,7 +32,7 @@ export const FieldComponent: React.FC<OperatorProps> = ({
isClearable = false,
isRequired = false,
fieldTypeFilter = [],
fieldInputWidth = 190,
fieldInputWidth,
onChange,
}): JSX.Element => {
const [touched, setIsTouched] = useState(false);
@ -85,7 +85,8 @@ export const FieldComponent: React.FC<OperatorProps> = ({
onFocus={handleTouch}
singleSelection={{ asPlainText: true }}
data-test-subj="fieldAutocompleteComboBox"
style={{ width: `${fieldInputWidth}px` }}
style={fieldInputWidth ? { width: `${fieldInputWidth}px` } : {}}
fullWidth
/>
);
};

23
x-pack/plugins/security_solution/public/detections/components/rules/risk_score_mapping/index.tsx
View file

@ -25,14 +25,14 @@ import { FieldComponent } from '../../../../common/components/autocomplete/field
import { IFieldType } from '../../../../../../../../src/plugins/data/common/index_patterns/fields';
import { IIndexPattern } from '../../../../../../../../src/plugins/data/common/index_patterns';
const RiskScoreMappingEuiFormRow = styled(EuiFormRow)`
width: 468px;
`;
const NestedContent = styled.div`
margin-left: 24px;
`;
const EuiFlexItemComboBoxColumn = styled(EuiFlexItem)`
max-width: 376px;
`;
const EuiFlexItemIconColumn = styled(EuiFlexItem)`
width: 20px;
`;
@ -148,7 +148,7 @@ export const RiskScoreField = ({
}, [fieldValue, handleRiskScoreMappingChecked, isDisabled]);
return (
<EuiFlexGroup>
<EuiFlexGroup direction={'column'}>
<EuiFlexItem>
<EuiFormRow
label={riskScoreLabel}
@ -175,7 +175,7 @@ export const RiskScoreField = ({
</EuiFormRow>
</EuiFlexItem>
<EuiFlexItem>
<RiskScoreMappingEuiFormRow
<EuiFormRow
label={riskScoreMappingLabel}
labelAppend={field.labelAppend}
helpText={
@ -197,9 +197,9 @@ export const RiskScoreField = ({
<EuiFlexGroup direction={'column'} gutterSize="s">
<EuiFlexItem>
<EuiFlexGroup alignItems="center" gutterSize="s">
<EuiFlexItem>
<EuiFlexItemComboBoxColumn>
<EuiFormLabel>{i18n.SOURCE_FIELD}</EuiFormLabel>
</EuiFlexItem>
</EuiFlexItemComboBoxColumn>
<EuiFlexItemIconColumn grow={false} />
<EuiFlexItemRiskScoreColumn grow={false}>
<EuiFormLabel>{i18n.DEFAULT_RISK_SCORE}</EuiFormLabel>
@ -209,7 +209,7 @@ export const RiskScoreField = ({
<EuiFlexItem>
<EuiFlexGroup alignItems="center" gutterSize="s">
<EuiFlexItem>
<EuiFlexItemComboBoxColumn>
<FieldComponent
placeholder={placeholder ?? ''}
indexPattern={indices}
@ -221,9 +221,8 @@ export const RiskScoreField = ({
onChange={handleFieldChange}
data-test-subj={dataTestSubj}
aria-label={idAria}
fieldInputWidth={270}
/>
</EuiFlexItem>
</EuiFlexItemComboBoxColumn>
<EuiFlexItemIconColumn grow={false}>
<EuiIcon type={'sortRight'} />
</EuiFlexItemIconColumn>
@ -235,7 +234,7 @@ export const RiskScoreField = ({
</EuiFlexGroup>
)}
</NestedContent>
</RiskScoreMappingEuiFormRow>
</EuiFormRow>
</EuiFlexItem>
</EuiFlexGroup>
);

33
x-pack/plugins/security_solution/public/detections/components/rules/severity_mapping/index.tsx
View file

@ -34,14 +34,14 @@ import {
SeverityMappingItem,
} from '../../../../../common/detection_engine/schemas/common/schemas';
const SeverityMappingEuiFormRow = styled(EuiFormRow)`
width: 468px;
`;
const NestedContent = styled.div`
margin-left: 24px;
`;
const EuiFlexItemComboBoxColumn = styled(EuiFlexItem)`
max-width: 376px;
`;
const EuiFlexItemIconColumn = styled(EuiFlexItem)`
width: 20px;
`;
@ -67,7 +67,6 @@ export const SeverityField = ({
isDisabled,
options,
}: SeverityFieldProps) => {
const fieldValueInputWidth = 160;
const { setValue } = field;
const { value, isMappingChecked, mapping } = field.value as AboutStepSeverity;
@ -180,7 +179,7 @@ export const SeverityField = ({
}, [handleSeverityMappingChecked, isDisabled, isMappingChecked]);
return (
<EuiFlexGroup>
<EuiFlexGroup direction={'column'}>
<EuiFlexItem>
<EuiFormRow
label={severityLabel}
@ -204,7 +203,7 @@ export const SeverityField = ({
</EuiFlexItem>
<EuiFlexItem>
<SeverityMappingEuiFormRow
<EuiFormRow
label={severityMappingLabel}
labelAppend={field.labelAppend}
helpText={
@ -222,12 +221,12 @@ export const SeverityField = ({
<EuiFlexGroup direction={'column'} gutterSize="s">
<EuiFlexItem>
<EuiFlexGroup alignItems="center" gutterSize="s">
<EuiFlexItem>
<EuiFlexItemComboBoxColumn>
<EuiFormLabel>{i18n.SOURCE_FIELD}</EuiFormLabel>
</EuiFlexItem>
<EuiFlexItem>
</EuiFlexItemComboBoxColumn>
<EuiFlexItemComboBoxColumn>
<EuiFormLabel>{i18n.SOURCE_VALUE}</EuiFormLabel>
</EuiFlexItem>
</EuiFlexItemComboBoxColumn>
<EuiFlexItemIconColumn grow={false} />
<EuiFlexItemSeverityColumn grow={false}>
<EuiFormLabel>{i18n.DEFAULT_SEVERITY}</EuiFormLabel>
@ -242,7 +241,7 @@ export const SeverityField = ({
alignItems="center"
gutterSize="s"
>
<EuiFlexItem>
<EuiFlexItemComboBoxColumn>
<FieldComponent
placeholder={''}
selectedField={getIFieldTypeFromFieldName(
@ -253,7 +252,6 @@ export const SeverityField = ({
isDisabled={isDisabled}
isClearable={false}
indexPattern={indices}
fieldInputWidth={fieldValueInputWidth}
onChange={handleFieldChange.bind(
null,
index,
@ -262,9 +260,9 @@ export const SeverityField = ({
data-test-subj={`detectionEngineStepAboutRuleSeverityMappingField-${severityMappingItem.severity}-${index}`}
aria-label={`detectionEngineStepAboutRuleSeverityMappingField-${severityMappingItem.severity}-${index}`}
/>
</EuiFlexItem>
</EuiFlexItemComboBoxColumn>
<EuiFlexItem>
<EuiFlexItemComboBoxColumn>
<AutocompleteFieldMatchComponent
placeholder={''}
selectedField={getIFieldTypeFromFieldName(
@ -276,7 +274,6 @@ export const SeverityField = ({
isDisabled={isDisabled}
isLoading={false}
indexPattern={indices}
fieldInputWidth={fieldValueInputWidth}
onChange={handleFieldMatchValueChange.bind(
null,
index,
@ -285,7 +282,7 @@ export const SeverityField = ({
data-test-subj={`detectionEngineStepAboutRuleSeverityMappingValue-${severityMappingItem.severity}-${index}`}
aria-label={`detectionEngineStepAboutRuleSeverityMappingValue-${severityMappingItem.severity}-${index}`}
/>
</EuiFlexItem>
</EuiFlexItemComboBoxColumn>
<EuiFlexItemIconColumn grow={false}>
<EuiIcon type={'sortRight'} />
</EuiFlexItemIconColumn>
@ -301,7 +298,7 @@ export const SeverityField = ({
</EuiFlexGroup>
)}
</NestedContent>
</SeverityMappingEuiFormRow>
</EuiFormRow>
</EuiFlexItem>
</EuiFlexGroup>
);