[Filter Bar] Widened Edit Filter popover (#85320)

Closes #36409
elastic · Dec 10, 2020 · b3706b1 · b3706b1
1 parent 7d0a7b7
commit b3706b1
Show file tree

Hide file tree

Showing 10 changed files with 30 additions and 17 deletions.
diff --git 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
@@ -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
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
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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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);