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

Fixes: elastic#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)|
kibanamachine · Sep 22, 2022 · 2b4fc2e · 2b4fc2e
1 parent 03a3446
commit 2b4fc2e
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 42 deletions.
diff --git a/x-pack/plugins/security_solution/public/timelines/components/edit_data_provider/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/edit_data_provider/index.tsx
@@ -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={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"
@@ -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}>

diff --git a/...olution/public/timelines/components/timeline/data_providers/add_data_provider_popover.tsx b/...olution/public/timelines/components/timeline/data_providers/add_data_provider_popover.tsx
@@ -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>
   );
 };