From b3706b1f1e03533ac974f06bb6ee060233bfbfe4 Mon Sep 17 00:00:00 2001
From: Caroline Horn <549577+cchaos@users.noreply.github.com>
Date: Thu, 10 Dec 2020 16:02:26 -0500
Subject: [PATCH] [Filter Bar] Widened Edit Filter popover (#85320)

Closes #36409
---
 src/plugins/data/public/ui/filter_bar/_index.scss   |  1 -
 .../data/public/ui/filter_bar/_variables.scss       |  1 -
 .../ui/filter_bar/filter_editor/_filter_editor.scss |  5 -----
 .../public/ui/filter_bar/filter_editor/_index.scss  |  1 -
 .../public/ui/filter_bar/filter_editor/index.tsx    | 13 ++++++++++++-
 .../filter_bar/filter_editor/phrase_value_input.tsx |  6 +++++-
 .../filter_editor/phrases_values_input.tsx          |  5 ++++-
 .../filter_bar/filter_editor/range_value_input.tsx  |  2 ++
 .../filter_bar/filter_editor/value_input_type.tsx   |  6 ++++++
 .../data/public/ui/filter_bar/filter_item.tsx       |  7 +------
 10 files changed, 30 insertions(+), 17 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 9e2478cb0704e..5333aff8b87da 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/_variables.scss b/src/plugins/data/public/ui/filter_bar/_variables.scss
index efe2e28ac3b8a..3a9a0df4332c8 100644
--- a/src/plugins/data/public/ui/filter_bar/_variables.scss
+++ b/src/plugins/data/public/ui/filter_bar/_variables.scss
@@ -1,4 +1,3 @@
 $kbnGlobalFilterItemBorderColor: tintOrShade($euiColorMediumShade, 35%, 20%);
 $kbnGlobalFilterItemBorderColorExcluded: tintOrShade($euiColorDanger, 70%, 50%);
 $kbnGlobalFilterItemPinnedColorExcluded: tintOrShade($euiColorDanger, 30%, 20%);
-$kbnGlobalFilterItemEditorWidth: 420px; // if changing this make sure to also change `FILTER_EDITOR_WIDTH` in ./filter_item.tsx
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 736e06ee9bdea..0000000000000
--- a/src/plugins/data/public/ui/filter_bar/filter_editor/_filter_editor.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.globalFilterEditor__fieldInput {
-  @include euiBreakpoint('m', 'l', 'xl') {
-    max-width: $kbnGlobalFilterItemEditorWidth * 0.66;
-  }
-}
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 3d416aade9a53..0000000000000
--- 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 2b8e11fc8f756..d25c092bc97f4 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
@@ -154,10 +154,12 @@ class FilterEditorUI extends Component<Props, State> {
                     id: 'data.filter.filterEditor.createCustomLabelInputLabel',
                     defaultMessage: 'Custom label',
                   })}
+                  fullWidth
                 >
                   <EuiFieldText
                     value={`${this.state.customLabel}`}
                     onChange={this.onCustomLabelChange}
+                    fullWidth
                   />
                 </EuiFormRow>
               </div>
@@ -218,12 +220,14 @@ class FilterEditorUI extends Component<Props, State> {
       <EuiFlexGroup>
         <EuiFlexItem>
           <EuiFormRow
+            fullWidth
             label={this.props.intl.formatMessage({
               id: 'data.filter.filterEditor.indexPatternSelectLabel',
               defaultMessage: 'Index Pattern',
             })}
           >
             <IndexPatternComboBox
+              fullWidth
               placeholder={this.props.intl.formatMessage({
                 id: 'data.filter.filterBar.indexPatternSelectPlaceholder',
                 defaultMessage: 'Select an index pattern',
@@ -263,12 +267,14 @@ class FilterEditorUI extends Component<Props, State> {
 
     return (
       <EuiFormRow
+        fullWidth
         label={this.props.intl.formatMessage({
           id: 'data.filter.filterEditor.fieldSelectLabel',
           defaultMessage: 'Field',
         })}
       >
         <FieldComboBox
+          fullWidth
           id="fieldInput"
           isDisabled={!selectedIndexPattern}
           placeholder={this.props.intl.formatMessage({
@@ -281,7 +287,6 @@ class FilterEditorUI extends Component<Props, State> {
           onChange={this.onFieldChange}
           singleSelection={{ asPlainText: true }}
           isClearable={false}
-          className="globalFilterEditor__fieldInput"
           data-test-subj="filterFieldSuggestionList"
         />
       </EuiFormRow>
@@ -293,12 +298,14 @@ class FilterEditorUI extends Component<Props, State> {
     const operators = selectedField ? getOperatorOptions(selectedField) : [];
     return (
       <EuiFormRow
+        fullWidth
         label={this.props.intl.formatMessage({
           id: 'data.filter.filterEditor.operatorSelectLabel',
           defaultMessage: 'Operator',
         })}
       >
         <OperatorComboBox
+          fullWidth
           isDisabled={!selectedField}
           placeholder={
             selectedField
@@ -326,6 +333,7 @@ class FilterEditorUI extends Component<Props, State> {
   private renderCustomEditor() {
     return (
       <EuiFormRow
+        fullWidth
         label={i18n.translate('data.filter.filterEditor.queryDslLabel', {
           defaultMessage: 'Elasticsearch Query DSL',
         })}
@@ -358,6 +366,7 @@ class FilterEditorUI extends Component<Props, State> {
             value={this.state.params}
             onChange={this.onParamsChange}
             data-test-subj="phraseValueInput"
+            fullWidth
           />
         );
       case 'phrases':
@@ -367,6 +376,7 @@ class FilterEditorUI extends Component<Props, State> {
             field={this.state.selectedField}
             values={this.state.params}
             onChange={this.onParamsChange}
+            fullWidth
           />
         );
       case 'range':
@@ -375,6 +385,7 @@ class FilterEditorUI extends Component<Props, State> {
             field={this.state.selectedField}
             value={this.state.params}
             onChange={this.onParamsChange}
+            fullWidth
           />
         );
     }
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 ca94970afbafd..1ae88b8a21832 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
@@ -30,12 +30,14 @@ interface Props extends PhraseSuggestorProps {
   value?: string;
   onChange: (value: string | number | boolean) => void;
   intl: InjectedIntl;
+  fullWidth?: boolean;
 }
 
 class PhraseValueInputUI extends PhraseSuggestorUI<Props> {
   public render() {
     return (
       <EuiFormRow
+        fullWidth={this.props.fullWidth}
         label={this.props.intl.formatMessage({
           id: 'data.filter.filterEditor.valueInputLabel',
           defaultMessage: 'Value',
@@ -45,6 +47,7 @@ class PhraseValueInputUI extends PhraseSuggestorUI<Props> {
           this.renderWithSuggestions()
         ) : (
           <ValueInputType
+            fullWidth={this.props.fullWidth}
             placeholder={this.props.intl.formatMessage({
               id: 'data.filter.filterEditor.valueInputPlaceholder',
               defaultMessage: 'Enter a value',
@@ -60,12 +63,13 @@ class PhraseValueInputUI extends PhraseSuggestorUI<Props> {
 
   private renderWithSuggestions() {
     const { suggestions } = this.state;
-    const { value, intl, onChange } = this.props;
+    const { value, intl, onChange, fullWidth } = this.props;
     // there are cases when the value is a number, this would cause an exception
     const valueAsStr = String(value);
     const options = value ? uniq([valueAsStr, ...suggestions]) : suggestions;
     return (
       <StringComboBox
+        fullWidth={fullWidth}
         placeholder={intl.formatMessage({
           id: 'data.filter.filterEditor.valueSelectPlaceholder',
           defaultMessage: 'Select a value',
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 7ca46f60bba5b..3a3020d70f168 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
@@ -29,21 +29,24 @@ interface Props extends PhraseSuggestorProps {
   values?: string[];
   onChange: (values: string[]) => void;
   intl: InjectedIntl;
+  fullWidth?: boolean;
 }
 
 class PhrasesValuesInputUI extends PhraseSuggestorUI<Props> {
   public render() {
     const { suggestions } = this.state;
-    const { values, intl, onChange } = this.props;
+    const { values, intl, onChange, fullWidth } = this.props;
     const options = values ? uniq([...values, ...suggestions]) : suggestions;
     return (
       <EuiFormRow
+        fullWidth={fullWidth}
         label={intl.formatMessage({
           id: 'data.filter.filterEditor.valuesSelectLabel',
           defaultMessage: 'Values',
         })}
       >
         <StringComboBox
+          fullWidth={fullWidth}
           placeholder={intl.formatMessage({
             id: 'data.filter.filterEditor.valuesSelectPlaceholder',
             defaultMessage: 'Select 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 bdfd1014625d8..438cd7b7781c6 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
@@ -38,6 +38,7 @@ interface Props {
   value?: RangeParams;
   onChange: (params: RangeParamsPartial) => void;
   intl: InjectedIntl;
+  fullWidth?: boolean;
 }
 
 function RangeValueInputUI(props: Props) {
@@ -71,6 +72,7 @@ function RangeValueInputUI(props: Props) {
   return (
     <div>
       <EuiFormControlLayoutDelimited
+        fullWidth={props.fullWidth}
         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 1a165c78d4d79..3ab578890e5c6 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
@@ -32,6 +32,7 @@ interface Props {
   intl: InjectedIntl;
   controlOnly?: boolean;
   className?: string;
+  fullWidth?: boolean;
 }
 
 class ValueInputTypeUI extends Component<Props> {
@@ -42,6 +43,7 @@ class ValueInputTypeUI extends Component<Props> {
       case 'string':
         inputElement = (
           <EuiFieldText
+            fullWidth={this.props.fullWidth}
             placeholder={this.props.placeholder}
             value={value}
             onChange={this.onChange}
@@ -53,6 +55,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}
@@ -64,6 +67,7 @@ class ValueInputTypeUI extends Component<Props> {
       case 'date':
         inputElement = (
           <EuiFieldText
+            fullWidth={this.props.fullWidth}
             placeholder={this.props.placeholder}
             value={value}
             onChange={this.onChange}
@@ -77,6 +81,7 @@ class ValueInputTypeUI extends Component<Props> {
       case 'ip':
         inputElement = (
           <EuiFieldText
+            fullWidth={this.props.fullWidth}
             placeholder={this.props.placeholder}
             value={value}
             onChange={this.onChange}
@@ -109,6 +114,7 @@ class ValueInputTypeUI extends Component<Props> {
             value={value}
             onChange={this.onBoolChange}
             className={this.props.className}
+            fullWidth={this.props.fullWidth}
           />
         );
         break;
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 48dbfea634256..5e6fd5323c0b7 100644
--- a/src/plugins/data/public/ui/filter_bar/filter_item.tsx
+++ b/src/plugins/data/public/ui/filter_bar/filter_item.tsx
@@ -62,12 +62,7 @@ export type FilterLabelStatus =
   | typeof FILTER_ITEM_WARNING
   | typeof FILTER_ITEM_ERROR;
 
-/**
- * @remarks
- * if changing this make sure to also change
- * $kbnGlobalFilterItemEditorWidth
- */
-export const FILTER_EDITOR_WIDTH = 420;
+export const FILTER_EDITOR_WIDTH = 800;
 
 export function FilterItem(props: Props) {
   const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);