Skip to content

Commit

Permalink
fix: updated layout to incease the field width (#141084) (#141387)
Browse files Browse the repository at this point in the history 
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](https://user-images.githubusercontent.com/7485038/191256799-b38b4e23-6bb0-492d-8908-bf63eeb7994c.png)|![image](https://user-images.githubusercontent.com/7485038/191256474-77263af3-e593-46a9-a31e-be54a9518f45.png)|

(cherry picked from commit 2b4fc2e)

Co-authored-by: Jatin Kathuria <jatin.kathuria@elastic.co>
  • Loading branch information
@kibanamachine @logeekal
kibanamachine and logeekal authored Sep 22, 2022
1 parent 5efe05d commit f99ae3a
Show file tree
Hide file tree
Showing 2 changed files with 45 additions and 42 deletions.
80 changes: 39 additions & 41 deletions x-pack/plugins/security_solution/public/timelines/components/edit_data_provider/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -189,25 +188,29 @@ export const StatefulEditDataProvider = React.memo<Props>(
return (
<EuiPanel paddingSize="s">
<EuiFlexGroup direction="column" gutterSize="none">
<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}>
<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>
<EuiSpacer size="m" />
</EuiFlexItem>

<EuiFlexItem grow={false}>
<EuiFlexItem grow={true}>
<EuiFlexGroup gutterSize="s" direction="row" justifyContent="spaceBetween">
<EuiFlexItem grow={true}>
<EuiFormRow label={i18n.OPERATOR}>
<EuiComboBox
data-test-subj="operator"
Expand All @@ -217,38 +220,33 @@ 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>

<EuiFlexItem grow={false}>
<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}>
Expand Down
7 changes: 6 additions & 1 deletion ...olution/public/timelines/components/timeline/data_providers/add_data_provider_popover.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -33,6 +34,10 @@ interface AddDataProviderPopoverProps {
timelineId: string;
}

const AddFieldPopoverContainer = styled.div`
min-width: 350px;
`;

const AddDataProviderPopoverComponent: React.FC<AddDataProviderPopoverProps> = ({
browserFields,
timelineId,
Expand Down Expand Up @@ -205,7 +210,7 @@ const AddDataProviderPopoverComponent: React.FC<AddDataProviderPopoverProps> = (
panelPaddingSize="none"
repositionOnScroll
>
{content}
<AddFieldPopoverContainer>{content}</AddFieldPopoverContainer>
</EuiPopover>
);
};
Expand Down

0 comments on commit f99ae3a

Please sign in to comment.