From 3bfe0c35a75762599cea7b2220e00a0254f27654 Mon Sep 17 00:00:00 2001
From: galangel <gal0angel@gmail.com>
Date: Thu, 13 May 2021 14:07:31 +0300
Subject: [PATCH 1/3] use full width

Signed-off-by: galangel <gal0angel@gmail.com>
---
 src/plugins/data/public/ui/filter_bar/_index.scss           | 1 -
 src/plugins/data/public/ui/filter_bar/filter_bar.tsx        | 2 +-
 .../public/ui/filter_bar/filter_editor/_filter_editor.scss  | 3 ---
 .../data/public/ui/filter_bar/filter_editor/_index.scss     | 1 -
 .../data/public/ui/filter_bar/filter_editor/index.tsx       | 3 ++-
 .../ui/filter_bar/filter_editor/phrase_value_input.tsx      | 3 +++
 .../ui/filter_bar/filter_editor/phrases_values_input.tsx    | 2 ++
 .../ui/filter_bar/filter_editor/range_value_input.tsx       | 1 +
 .../public/ui/filter_bar/filter_editor/value_input_type.tsx | 6 ++++++
 src/plugins/data/public/ui/filter_bar/filter_item.tsx       | 2 +-
 10 files changed, 16 insertions(+), 8 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 9e2478cb0704..5333aff8b87d 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 800c4f5a5f15..93c87ce7d832 100644
--- a/src/plugins/data/public/ui/filter_bar/filter_bar.tsx
+++ b/src/plugins/data/public/ui/filter_bar/filter_bar.tsx
@@ -125,7 +125,7 @@ function FilterBarUI(props: Props) {
           repositionOnScroll
         >
           <EuiFlexItem grow={false}>
-            <div style={{ width: 400 }}>
+            <div style={{ width: 600 }}>
               <FilterEditor
                 filter={newFilter}
                 indexPatterns={props.indexPatterns}
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 a5fac10e4693..000000000000
--- 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 3d416aade9a5..000000000000
--- 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 e099ebf72042..285d6a9a7302 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
@@ -283,6 +283,7 @@ class FilterEditorUI extends Component<Props, State> {
       >
         <FieldComboBox
           id="fieldInput"
+          fullWidth={true}
           isDisabled={!selectedIndexPattern}
           placeholder={this.props.intl.formatMessage({
             id: 'data.filter.filterEditor.fieldSelectPlaceholder',
@@ -294,7 +295,6 @@ class FilterEditorUI extends Component<Props, State> {
           onChange={this.onFieldChange}
           singleSelection={{ asPlainText: true }}
           isClearable={false}
-          className="globalFilterEditor__fieldInput"
           data-test-subj="filterFieldSuggestionList"
         />
       </EuiFormRow>
@@ -342,6 +342,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 f4be8911defd..69d5876276b0 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 cc2c3b1f366d..0481c4297eb3 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 e57f18332e92..30b82e55bf63 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={false}
         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 f22a85e431af..803ce4fea1fa 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 a004941f62a1..805958d2be1e 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

From 6fc4b89637be74b5e6c853102dd4166a069c643c Mon Sep 17 00:00:00 2001
From: galangel <gal0angel@gmail.com>
Date: Mon, 24 May 2021 18:05:37 +0300
Subject: [PATCH 2/3] Update width

Signed-off-by: galangel <gal0angel@gmail.com>
---
 src/plugins/data/public/ui/filter_bar/filter_editor/index.tsx  | 3 +++
 .../public/ui/filter_bar/filter_editor/range_value_input.tsx   | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

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 285d6a9a7302..4fa7b6d1c339 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}
                   />
@@ -295,6 +297,7 @@ class FilterEditorUI extends Component<Props, State> {
           onChange={this.onFieldChange}
           singleSelection={{ asPlainText: true }}
           isClearable={false}
+          className="globalFilterEditor__fieldInput"
           data-test-subj="filterFieldSuggestionList"
         />
       </EuiFormRow>
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 30b82e55bf63..778e65b15d28 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,7 +84,7 @@ function RangeValueInputUI(props: Props) {
   return (
     <div>
       <EuiFormControlLayoutDelimited
-        fullWidth={false}
+        fullWidth={true}
         aria-label={props.intl.formatMessage({
           id: 'data.filter.filterEditor.rangeInputLabel',
           defaultMessage: 'Range',

From df0d7bb166f2afcd0dcd3cb7880ad641be78fedd Mon Sep 17 00:00:00 2001
From: galangel <gal0angel@gmail.com>
Date: Sun, 20 Jun 2021 13:00:53 +0300
Subject: [PATCH 3/3] observer

Signed-off-by: galangel <gal0angel@gmail.com>
---
 .../data/public/ui/filter_bar/filter_bar.tsx  | 43 +++++++++++++------
 1 file changed, 30 insertions(+), 13 deletions(-)

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 93c87ce7d832..1ecea0442f81 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;
@@ -121,20 +134,24 @@ function FilterBarUI(props: Props) {
           withTitle
           panelPaddingSize="none"
           ownFocus={true}
-          initialFocus=".filterEditor__hiddenItem"
+          initialFocus=".globalFilterEditor__fieldInput input"
           repositionOnScroll
         >
-          <EuiFlexItem grow={false}>
-            <div style={{ width: 600 }}>
-              <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>
     );