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

fix: updated layout to incease the field width (#141084)

Browse source 
Fixes: #126083

Changed the layout of the Add Field popover so that field `Field` can have full width and users can see long index properties without any issue.

Please see if new layout makes sense. This solves the width problem without any customization.
|Old Layout| New Layout|
|--|--|
|![image](191256474-77263af3-e593-46a9-a31e-be54a9518f45.png)|
This commit is contained in:
Jatin Kathuria 2022-09-22 13:32:32 +02:00 • committed by GitHub
parent 03a3446111
commit 2b4fc2ed90
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 46 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -36,8 +36,7 @@ import {
import * as i18n from './translations';
const EDIT_DATA_PROVIDER_WIDTH = 400;
const FIELD_COMBO_BOX_WIDTH = 195;
const OPERATOR_COMBO_BOX_WIDTH = 160;
const OPERATOR_COMBO_BOX_WIDTH = 152;
const SAVE_CLASS_NAME = 'edit-data-provider-save';
const VALUE_INPUT_CLASS_NAME = 'edit-data-provider-value';
@ -189,25 +188,29 @@ export const StatefulEditDataProvider = React.memo<Props>(
return (
<EuiPanel paddingSize="s">
<EuiFlexGroup direction="column" gutterSize="none">
<EuiFlexItem grow={false}>
<EuiFlexGroup gutterSize="s" direction="row" justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
<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>
<EuiFlexItem grow={true}>
<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 }}
fullWidth={true}
/>
</EuiFormRow>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiFlexItem grow={false}>
<EuiSpacer size="m" />
</EuiFlexItem>
<EuiFlexItem grow={true}>
<EuiFlexGroup gutterSize="s" direction="row" justifyContent="spaceBetween">
<EuiFlexItem grow={true}>
<EuiFormRow label={i18n.OPERATOR}>
<EuiComboBox
data-test-subj="operator"
@ -217,10 +220,26 @@ export const StatefulEditDataProvider = React.memo<Props>(
placeholder={i18n.SELECT_AN_OPERATOR}
selectedOptions={updatedOperator}
singleSelection={{ asPlainText: true }}
style={{ width: `${OPERATOR_COMBO_BOX_WIDTH}px` }}
style={{ minWidth: OPERATOR_COMBO_BOX_WIDTH }}
/>
</EuiFormRow>
</EuiFlexItem>
{type !== DataProviderType.template &&
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}
onChange={onValueChange}
placeholder={i18n.VALUE}
value={sanatizeValue(updatedValue)}
isInvalid={isValueFieldInvalid}
/>
</EuiFormRow>
</EuiFlexItem>
) : null}
</EuiFlexGroup>
</EuiFlexItem>
@ -228,27 +247,6 @@ export const StatefulEditDataProvider = React.memo<Props>(
<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}>
<EuiFormRow label={i18n.VALUE_LABEL}>
<EuiFieldText
className={VALUE_INPUT_CLASS_NAME}
onChange={onValueChange}
placeholder={i18n.VALUE}
value={sanatizeValue(updatedValue)}
isInvalid={isValueFieldInvalid}
/>
</EuiFormRow>
</EuiFlexItem>
) : null}
<EuiFlexItem grow={false}>
<EuiSpacer size="m" />
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiFlexGroup justifyContent="flexEnd" gutterSize="none">
<EuiFlexItem grow={false}>

7
x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/add_data_provider_popover.tsx
View file

@ -5,6 +5,7 @@
* 2.0.
*/
import styled from 'styled-components';
import { pick } from 'lodash/fp';
import React, { useCallback, useMemo, useState } from 'react';
import type { EuiContextMenuPanelItemDescriptor } from '@elastic/eui';
@ -33,6 +34,10 @@ interface AddDataProviderPopoverProps {
timelineId: string;
}
const AddFieldPopoverContainer = styled.div`
min-width: 350px;
`;
const AddDataProviderPopoverComponent: React.FC<AddDataProviderPopoverProps> = ({
browserFields,
timelineId,
@ -205,7 +210,7 @@ const AddDataProviderPopoverComponent: React.FC<AddDataProviderPopoverProps> = (
panelPaddingSize="none"
repositionOnScroll
>
{content}
<AddFieldPopoverContainer>{content}</AddFieldPopoverContainer>
</EuiPopover>
);
};