From c11866f487a81d672b33c3640d6c61aa3e70bcae Mon Sep 17 00:00:00 2001
From: Kawika Avilla <kavilla414@gmail.com>
Date: Tue, 27 Jul 2021 21:35:35 -0700
Subject: [PATCH] [1.x] Increase filters popover size and use full width in
 form components (#672)

* use full width
* Update width
* observer

Backport PR:
https://github.com/opensearch-project/OpenSearch-Dashboards/pull/352

Signed-off-by: galangel <gal0angel@gmail.com>

Co-authored-by: Gal Angel <gal0angel@gmail.com>
---
 .../data/public/ui/filter_bar/_index.scss     |  1 -
 .../data/public/ui/filter_bar/filter_bar.tsx  | 41 +++++++++++++------
 .../filter_editor/_filter_editor.scss         |  3 --
 .../ui/filter_bar/filter_editor/_index.scss   |  1 -
 .../ui/filter_bar/filter_editor/index.tsx     |  4 ++
 .../filter_editor/phrase_value_input.tsx      |  3 ++
 .../filter_editor/phrases_values_input.tsx    |  2 +
 .../filter_editor/range_value_input.tsx       |  1 +
 .../filter_editor/value_input_type.tsx        |  6 +++
 .../data/public/ui/filter_bar/filter_item.tsx |  2 +-
 10 files changed, 46 insertions(+), 18 deletions(-)
 delete mode 100644 src/plugins/data/public/ui/filter_bar/filter_editor/_filter_editor.scss
 delete mode 100644 src/plugins/data/public/ui/filter_bar/filter_editor/_index.scss

diff --git a/src/plugins/data/public/ui/filter_bar/_index.scss b/src/plugins/data/public/ui/filter_bar/_index.scss
index 9e2478cb070..5333aff8b87 100644
--- a/src/plugins/data/public/ui/filter_bar/_index.scss
+++ b/src/plugins/data/public/ui/filter_bar/_index.scss
@@ -1,4 +1,3 @@
 @import 'variables';
 @import 'global_filter_group';
 @import 'global_filter_item';
-@import 'filter_editor/index';
diff --git a/src/plugins/data/public/ui/filter_bar/filter_bar.tsx b/src/plugins/data/public/ui/filter_bar/filter_bar.tsx
index e78224bce34..1ecea0442f8 100644
--- a/src/plugins/data/public/ui/filter_bar/filter_bar.tsx
+++ b/src/plugins/data/public/ui/filter_bar/filter_bar.tsx
@@ -30,7 +30,13 @@
  * GitHub history for details.
  */
 
-import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiPopover } from '@elastic/eui';
+import {
+  EuiButtonEmpty,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiPopover,
+  EuiResizeObserver,
+} from '@elastic/eui';
 import { FormattedMessage, InjectedIntl, injectI18n } from '@osd/i18n/react';
 import classNames from 'classnames';
 import React, { useState } from 'react';
@@ -60,9 +66,12 @@ interface Props {
   intl: InjectedIntl;
 }
 
+const maxFilterWidth = 600;
+
 function FilterBarUI(props: Props) {
   const [isAddFilterPopoverOpen, setIsAddFilterPopoverOpen] = useState(false);
   const opensearchDashboards = useOpenSearchDashboards();
+  const [filterWidth, setFilterWidth] = useState(maxFilterWidth);
 
   const uiSettings = opensearchDashboards.services.uiSettings;
   if (!uiSettings) return null;
@@ -89,6 +98,10 @@ function FilterBarUI(props: Props) {
     ));
   }
 
+  function onResize(dimensions: { height: number; width: number }) {
+    setFilterWidth(dimensions.width);
+  }
+
   function renderAddFilter() {
     const isPinned = uiSettings!.get(UI_SETTINGS.FILTERS_PINNED_BY_DEFAULT);
     const [indexPattern] = props.indexPatterns;
@@ -124,17 +137,21 @@ function FilterBarUI(props: Props) {
           initialFocus=".globalFilterEditor__fieldInput input"
           repositionOnScroll
         >
-          <EuiFlexItem grow={false}>
-            <div style={{ width: 400 }}>
-              <FilterEditor
-                filter={newFilter}
-                indexPatterns={props.indexPatterns}
-                onSubmit={onAdd}
-                onCancel={() => setIsAddFilterPopoverOpen(false)}
-                key={JSON.stringify(newFilter)}
-              />
-            </div>
-          </EuiFlexItem>
+          <EuiResizeObserver onResize={onResize}>
+            {(resizeRef) => (
+              <div style={{ width: maxFilterWidth, maxWidth: '100%' }} ref={resizeRef}>
+                <EuiFlexItem style={{ width: filterWidth }} grow={false}>
+                  <FilterEditor
+                    filter={newFilter}
+                    indexPatterns={props.indexPatterns}
+                    onSubmit={onAdd}
+                    onCancel={() => setIsAddFilterPopoverOpen(false)}
+                    key={JSON.stringify(newFilter)}
+                  />
+                </EuiFlexItem>
+              </div>
+            )}
+          </EuiResizeObserver>
         </EuiPopover>
       </EuiFlexItem>
     );
diff --git a/src/plugins/data/public/ui/filter_bar/filter_editor/_filter_editor.scss b/src/plugins/data/public/ui/filter_bar/filter_editor/_filter_editor.scss
deleted file mode 100644
index a5fac10e469..00000000000
--- a/src/plugins/data/public/ui/filter_bar/filter_editor/_filter_editor.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.globalFilterEditor__fieldInput {
-  max-width: $euiSize * 13;
-}
diff --git a/src/plugins/data/public/ui/filter_bar/filter_editor/_index.scss b/src/plugins/data/public/ui/filter_bar/filter_editor/_index.scss
deleted file mode 100644
index 3d416aade9a..00000000000
--- a/src/plugins/data/public/ui/filter_bar/filter_editor/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'filter_editor';
diff --git a/src/plugins/data/public/ui/filter_bar/filter_editor/index.tsx b/src/plugins/data/public/ui/filter_bar/filter_editor/index.tsx
index e099ebf7204..4fa7b6d1c33 100644
--- a/src/plugins/data/public/ui/filter_bar/filter_editor/index.tsx
+++ b/src/plugins/data/public/ui/filter_bar/filter_editor/index.tsx
@@ -163,12 +163,14 @@ class FilterEditorUI extends Component<Props, State> {
               <div>
                 <EuiSpacer size="m" />
                 <EuiFormRow
+                  fullWidth={true}
                   label={this.props.intl.formatMessage({
                     id: 'data.filter.filterEditor.createCustomLabelInputLabel',
                     defaultMessage: 'Custom label',
                   })}
                 >
                   <EuiFieldText
+                    fullWidth={true}
                     value={`${this.state.customLabel}`}
                     onChange={this.onCustomLabelChange}
                   />
@@ -283,6 +285,7 @@ class FilterEditorUI extends Component<Props, State> {
       >
         <FieldComboBox
           id="fieldInput"
+          fullWidth={true}
           isDisabled={!selectedIndexPattern}
           placeholder={this.props.intl.formatMessage({
             id: 'data.filter.filterEditor.fieldSelectPlaceholder',
@@ -342,6 +345,7 @@ class FilterEditorUI extends Component<Props, State> {
         label={i18n.translate('data.filter.filterEditor.queryDslLabel', {
           defaultMessage: 'OpenSearch Query DSL',
         })}
+        fullWidth={true}
       >
         <EuiCodeEditor
           value={this.state.queryDsl}
diff --git a/src/plugins/data/public/ui/filter_bar/filter_editor/phrase_value_input.tsx b/src/plugins/data/public/ui/filter_bar/filter_editor/phrase_value_input.tsx
index f4be8911def..69d5876276b 100644
--- a/src/plugins/data/public/ui/filter_bar/filter_editor/phrase_value_input.tsx
+++ b/src/plugins/data/public/ui/filter_bar/filter_editor/phrase_value_input.tsx
@@ -49,6 +49,7 @@ class PhraseValueInputUI extends PhraseSuggestorUI<Props> {
   public render() {
     return (
       <EuiFormRow
+        fullWidth={true}
         label={this.props.intl.formatMessage({
           id: 'data.filter.filterEditor.valueInputLabel',
           defaultMessage: 'Value',
@@ -58,6 +59,7 @@ class PhraseValueInputUI extends PhraseSuggestorUI<Props> {
           this.renderWithSuggestions()
         ) : (
           <ValueInputType
+            fullWidth={true}
             placeholder={this.props.intl.formatMessage({
               id: 'data.filter.filterEditor.valueInputPlaceholder',
               defaultMessage: 'Enter a value',
@@ -83,6 +85,7 @@ class PhraseValueInputUI extends PhraseSuggestorUI<Props> {
           id: 'data.filter.filterEditor.valueSelectPlaceholder',
           defaultMessage: 'Select a value',
         })}
+        fullWidth={true}
         options={options}
         getLabel={(option) => option}
         selectedOptions={value ? [valueAsStr] : []}
diff --git a/src/plugins/data/public/ui/filter_bar/filter_editor/phrases_values_input.tsx b/src/plugins/data/public/ui/filter_bar/filter_editor/phrases_values_input.tsx
index cc2c3b1f366..0481c4297eb 100644
--- a/src/plugins/data/public/ui/filter_bar/filter_editor/phrases_values_input.tsx
+++ b/src/plugins/data/public/ui/filter_bar/filter_editor/phrases_values_input.tsx
@@ -51,6 +51,7 @@ class PhrasesValuesInputUI extends PhraseSuggestorUI<Props> {
     const options = values ? uniq([...values, ...suggestions]) : suggestions;
     return (
       <EuiFormRow
+        fullWidth={true}
         label={intl.formatMessage({
           id: 'data.filter.filterEditor.valuesSelectLabel',
           defaultMessage: 'Values',
@@ -61,6 +62,7 @@ class PhrasesValuesInputUI extends PhraseSuggestorUI<Props> {
             id: 'data.filter.filterEditor.valuesSelectPlaceholder',
             defaultMessage: 'Select values',
           })}
+          fullWidth={true}
           options={options}
           getLabel={(option) => option}
           selectedOptions={values || []}
diff --git a/src/plugins/data/public/ui/filter_bar/filter_editor/range_value_input.tsx b/src/plugins/data/public/ui/filter_bar/filter_editor/range_value_input.tsx
index e57f18332e9..778e65b15d2 100644
--- a/src/plugins/data/public/ui/filter_bar/filter_editor/range_value_input.tsx
+++ b/src/plugins/data/public/ui/filter_bar/filter_editor/range_value_input.tsx
@@ -84,6 +84,7 @@ function RangeValueInputUI(props: Props) {
   return (
     <div>
       <EuiFormControlLayoutDelimited
+        fullWidth={true}
         aria-label={props.intl.formatMessage({
           id: 'data.filter.filterEditor.rangeInputLabel',
           defaultMessage: 'Range',
diff --git a/src/plugins/data/public/ui/filter_bar/filter_editor/value_input_type.tsx b/src/plugins/data/public/ui/filter_bar/filter_editor/value_input_type.tsx
index f22a85e431a..803ce4fea1f 100644
--- a/src/plugins/data/public/ui/filter_bar/filter_editor/value_input_type.tsx
+++ b/src/plugins/data/public/ui/filter_bar/filter_editor/value_input_type.tsx
@@ -41,6 +41,7 @@ interface Props {
   type: string;
   onChange: (value: string | number | boolean) => void;
   onBlur?: (value: string | number | boolean) => void;
+  fullWidth?: boolean;
   placeholder: string;
   intl: InjectedIntl;
   controlOnly?: boolean;
@@ -55,6 +56,7 @@ class ValueInputTypeUI extends Component<Props> {
       case 'string':
         inputElement = (
           <EuiFieldText
+            fullWidth={this.props.fullWidth}
             placeholder={this.props.placeholder}
             value={value}
             onChange={this.onChange}
@@ -66,6 +68,7 @@ class ValueInputTypeUI extends Component<Props> {
       case 'number':
         inputElement = (
           <EuiFieldNumber
+            fullWidth={this.props.fullWidth}
             placeholder={this.props.placeholder}
             value={typeof value === 'string' ? parseFloat(value) : value}
             onChange={this.onChange}
@@ -77,6 +80,7 @@ class ValueInputTypeUI extends Component<Props> {
       case 'date':
         inputElement = (
           <EuiFieldText
+            fullWidth={this.props.fullWidth}
             placeholder={this.props.placeholder}
             value={value}
             onChange={this.onChange}
@@ -90,6 +94,7 @@ class ValueInputTypeUI extends Component<Props> {
       case 'ip':
         inputElement = (
           <EuiFieldText
+            fullWidth={this.props.fullWidth}
             placeholder={this.props.placeholder}
             value={value}
             onChange={this.onChange}
@@ -102,6 +107,7 @@ class ValueInputTypeUI extends Component<Props> {
       case 'boolean':
         inputElement = (
           <EuiSelect
+            fullWidth={this.props.fullWidth}
             options={[
               { value: undefined, text: this.props.placeholder },
               {
diff --git a/src/plugins/data/public/ui/filter_bar/filter_item.tsx b/src/plugins/data/public/ui/filter_bar/filter_item.tsx
index a004941f62a..805958d2be1 100644
--- a/src/plugins/data/public/ui/filter_bar/filter_item.tsx
+++ b/src/plugins/data/public/ui/filter_bar/filter_item.tsx
@@ -241,7 +241,7 @@ export function FilterItem(props: Props) {
       },
       {
         id: 1,
-        width: 420,
+        width: 600,
         content: (
           <div>
             <FilterEditor