Skip to content

Commit

Permalink
[Security Solution][Detections] Fix "Severity override" dropdowns in …
Browse files Browse the repository at this point in the history 
…"Create new rule" -> "About rule" (#82271) (#83272)

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 #81284 you can see the placeholders' text being split into multiple lines that gives this messy effect.
  • Loading branch information
@banderror
banderror authored Nov 12, 2020
1 parent 4aed05c commit 55ff015
Show file tree
Hide file tree
Showing 3 changed files with 29 additions and 32 deletions.
5 changes: 3 additions & 2 deletions x-pack/plugins/security_solution/public/common/components/autocomplete/field.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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
/>
);
};
Expand Down
23 changes: 11 additions & 12 deletions ...plugins/security_solution/public/detections/components/rules/risk_score_mapping/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
`;
Expand Down Expand Up @@ -148,7 +148,7 @@ export const RiskScoreField = ({
}, [fieldValue, handleRiskScoreMappingChecked, isDisabled]);

return (
<EuiFlexGroup>
<EuiFlexGroup direction={'column'}>
<EuiFlexItem>
<EuiFormRow
label={riskScoreLabel}
Expand All @@ -175,7 +175,7 @@ export const RiskScoreField = ({
</EuiFormRow>
</EuiFlexItem>
<EuiFlexItem>
<RiskScoreMappingEuiFormRow
<EuiFormRow
label={riskScoreMappingLabel}
labelAppend={field.labelAppend}
helpText={
Expand All @@ -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>
Expand All @@ -209,7 +209,7 @@ export const RiskScoreField = ({

<EuiFlexItem>
<EuiFlexGroup alignItems="center" gutterSize="s">
<EuiFlexItem>
<EuiFlexItemComboBoxColumn>
<FieldComponent
placeholder={placeholder ?? ''}
indexPattern={indices}
Expand All @@ -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>
Expand All @@ -235,7 +234,7 @@ export const RiskScoreField = ({
</EuiFlexGroup>
)}
</NestedContent>
</RiskScoreMappingEuiFormRow>
</EuiFormRow>
</EuiFlexItem>
</EuiFlexGroup>
);
Expand Down
33 changes: 15 additions & 18 deletions ...k/plugins/security_solution/public/detections/components/rules/severity_mapping/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
`;
Expand All @@ -67,7 +67,6 @@ export const SeverityField = ({
isDisabled,
options,
}: SeverityFieldProps) => {
const fieldValueInputWidth = 160;
const { setValue } = field;
const { value, isMappingChecked, mapping } = field.value as AboutStepSeverity;

Expand Down Expand Up @@ -180,7 +179,7 @@ export const SeverityField = ({
}, [handleSeverityMappingChecked, isDisabled, isMappingChecked]);

return (
<EuiFlexGroup>
<EuiFlexGroup direction={'column'}>
<EuiFlexItem>
<EuiFormRow
label={severityLabel}
Expand All @@ -204,7 +203,7 @@ export const SeverityField = ({
</EuiFlexItem>

<EuiFlexItem>
<SeverityMappingEuiFormRow
<EuiFormRow
label={severityMappingLabel}
labelAppend={field.labelAppend}
helpText={
Expand All @@ -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>
Expand All @@ -242,7 +241,7 @@ export const SeverityField = ({
alignItems="center"
gutterSize="s"
>
<EuiFlexItem>
<EuiFlexItemComboBoxColumn>
<FieldComponent
placeholder={''}
selectedField={getIFieldTypeFromFieldName(
Expand All @@ -253,7 +252,6 @@ export const SeverityField = ({
isDisabled={isDisabled}
isClearable={false}
indexPattern={indices}
fieldInputWidth={fieldValueInputWidth}
onChange={handleFieldChange.bind(
null,
index,
Expand All @@ -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(
Expand All @@ -276,7 +274,6 @@ export const SeverityField = ({
isDisabled={isDisabled}
isLoading={false}
indexPattern={indices}
fieldInputWidth={fieldValueInputWidth}
onChange={handleFieldMatchValueChange.bind(
null,
index,
Expand All @@ -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>
Expand All @@ -301,7 +298,7 @@ export const SeverityField = ({
</EuiFlexGroup>
)}
</NestedContent>
</SeverityMappingEuiFormRow>
</EuiFormRow>
</EuiFlexItem>
</EuiFlexGroup>
);
Expand Down

0 comments on commit 55ff015

Please sign in to comment.