[1.x] Increase filters popover size and use full width in form compon…

…ents (#672) * use full width * Update width * observer Backport PR: #352 Signed-off-by: galangel <gal0angel@gmail.com> Co-authored-by: Gal Angel <gal0angel@gmail.com>
opensearch-project · Jul 28, 2021 · c11866f · c11866f
1 parent 7c91f85
commit c11866f
Show file tree

Hide file tree

Showing 10 changed files with 46 additions and 18 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/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
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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -241,7 +241,7 @@ export function FilterItem(props: Props) {
       },
       {
         id: 1,
-        width: 420,
+        width: 600,
         content: (
           <div>
             <FilterEditor