From e82e53655d97763bbb8cbf48297d30f5e1b59ffe Mon Sep 17 00:00:00 2001
From: Marta Bondyra <marta.bondyra@elastic.co>
Date: Fri, 21 Aug 2020 12:06:46 +0200
Subject: [PATCH 01/32] checkpoint

---
 .../config_panel/_layer_panel.scss            |  18 +
 .../config_panel/dimension_popover.tsx        |   1 +
 .../dimension_panel/popover_editor.scss       |  11 +
 .../indexpattern_datasource/indexpattern.tsx  |   1 +
 .../definitions/filters/filter_popover.tsx    | 247 ++++++++
 .../definitions/filters/filters.test.tsx      | 528 ++++++++++++++++++
 .../definitions/filters/filters_dnd.tsx       | 123 ++++
 .../operations/definitions/filters/index.tsx  | 210 +++++++
 .../operations/definitions/index.ts           |   3 +
 .../state_helpers.test.ts                     |   1 +
 10 files changed, 1143 insertions(+)
 create mode 100644 x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx
 create mode 100644 x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.test.tsx
 create mode 100644 x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters_dnd.tsx
 create mode 100644 x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/index.tsx

diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_layer_panel.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_layer_panel.scss
index 4e13fd95d1961..893bb96b83156 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_layer_panel.scss
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_layer_panel.scss
@@ -35,6 +35,24 @@
   min-height: $euiSizeXXL;
 }
 
+.lnsLayerPanel__panel {
+  position: relative;
+}
+
+.lnsLayerPanel__anchor {
+  width: 100%;
+}
+
+.lnsLayerPanel__dndGrab {
+  padding: $euiSizeS;
+}
+
+.lnsLayerPanel__filterLink {
+  width: 100%;
+  align-self: flex-start;
+  word-break: break-word;
+}
+
 .lnsLayerPanel__styleEditor {
   width: $euiSize * 30;
   padding: $euiSizeS;
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx
index 8d31e1bcc2e6a..899ef56eb2e74 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx
@@ -31,6 +31,7 @@ export function DimensionPopover({
     <EuiPopover
       className="lnsDimensionPopover"
       anchorClassName="lnsDimensionPopover__trigger"
+      panelClassName="lnsDimensionPanel__fixTranslateDnd"
       isOpen={
         popoverState.isOpen &&
         (popoverState.openId === accessor || (noMatch && popoverState.addingToGroupId === groupId))
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.scss b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.scss
index 3f75b5ad86669..222175b78bcad 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.scss
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.scss
@@ -18,3 +18,14 @@
   padding-top: 0;
   padding-bottom: 0;
 }
+
+.lnsIndexPatternDimensionEditor__filtersEditor {
+  max-width: 100%;
+  width: $euiSize * 30;
+}
+
+// todo: remove after closing https://github.com/elastic/eui/issues/3548
+.lnsDimensionPanel__fixTranslateDnd {
+  // sass-lint:disable-block no-important
+  transform: none !important;
+}
\ No newline at end of file
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/indexpattern.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/indexpattern.tsx
index e2ca933504849..3b3750cf7c560 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/indexpattern.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/indexpattern.tsx
@@ -263,6 +263,7 @@ export function getIndexPatternDatasource({
               data,
               savedObjects: core.savedObjects,
               docLinks: core.docLinks,
+              http: core.http,
             }}
           >
             <IndexPatternDimensionEditor
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx
new file mode 100644
index 0000000000000..d31ac7111e832
--- /dev/null
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx
@@ -0,0 +1,247 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { useState, useRef, MouseEventHandler } from 'react';
+import { EuiPopover, EuiFieldText, EuiForm, EuiFormRow, keys, EuiButtonEmpty } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import {
+  QueryStringInput,
+  Query,
+  esKuery,
+  esQuery,
+} from '../../../../../../../../src/plugins/data/public';
+
+export enum SEARCH_QUERY_LANGUAGE {
+  KUERY = 'kuery',
+  LUCENE = 'lucene',
+}
+
+export interface ErrorMessage {
+  query: string;
+  message: string;
+}
+
+const emptyFilter = {
+  input: {
+    query: '',
+    language: SEARCH_QUERY_LANGUAGE.KUERY,
+  },
+  label: '',
+};
+
+export const FilterPopover = ({ filter, setFilter, indexPattern, Button }) => {
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const [tempFilter, setTempFilter] = useState(filter);
+  const [errorMessage, setErrorMessage] = useState<ErrorMessage | undefined>(undefined);
+
+  const labelRef = useRef<HTMLInputElement>();
+  const onQueryChange = (input: Query) => setTempFilter({ ...tempFilter, input });
+  const onLabelChange = (label: string) => setTempFilter({ ...tempFilter, label });
+  const onSubmit = (input: Query) => {
+    let filterQuery;
+    // try {
+    if (input.language === SEARCH_QUERY_LANGUAGE.KUERY) {
+      filterQuery = esKuery.toElasticsearchQuery(
+        esKuery.fromKueryExpression(input.query),
+        indexPattern
+      );
+    } else if (input.language === SEARCH_QUERY_LANGUAGE.LUCENE) {
+      filterQuery = esQuery.luceneStringToDsl(input.query);
+    } else {
+      filterQuery = {};
+    }
+    if (input.query.length) {
+      if (tempFilter.label) {
+        setFilter(tempFilter);
+        setIsPopoverOpen(false);
+      } else {
+        if (labelRef?.current?.focus) {
+          labelRef.current.focus();
+        }
+      }
+    }
+  };
+
+  return (
+    <EuiPopover
+      anchorClassName="lnsLayerPanel__anchor"
+      panelClassName="lnsIndexPatternDimensionEditor__filtersEditor"
+      ownFocus
+      isOpen={isPopoverOpen}
+      closePopover={() => {
+        setIsPopoverOpen(false);
+        setTempFilter(filter);
+      }}
+      button={<Button onClick={() => setIsPopoverOpen((open) => !open)} />}
+    >
+      <EuiForm>
+        <EuiFormRow fullWidth>
+          <QueryStringInput
+            bubbleSubmitEvent={true}
+            indexPatterns={[indexPattern]}
+            query={tempFilter.input}
+            onChange={onQueryChange}
+            onSubmit={onSubmit}
+            placeholder={
+              tempFilter.language === SEARCH_QUERY_LANGUAGE.KUERY
+                ? i18n.translate('xpack.transform.stepDefineForm.queryPlaceholderKql', {
+                    defaultMessage: 'e.g. {example}',
+                    values: { example: 'method : "GET" or status : "404"' },
+                  })
+                : i18n.translate('xpack.transform.stepDefineForm.queryPlaceholderLucene', {
+                    defaultMessage: 'e.g. {example}',
+                    values: { example: 'method:GET OR status:404' },
+                  })
+            }
+            dataTestSubj="transformQueryInput"
+            languageSwitcherPopoverAnchorPosition="rightDown"
+          />
+        </EuiFormRow>
+        <EuiFormRow fullWidth>
+          <EuiFieldText
+            inputRef={labelRef}
+            value={tempFilter.label || ''}
+            onChange={(e) => onLabelChange(e.target.value.trim())}
+            onKeyDown={({ key }: React.KeyboardEvent<HTMLInputElement>) => {
+              if (keys.ENTER === key) {
+                if (tempFilter.input.query.length) {
+                  setFilter(tempFilter);
+                  setIsPopoverOpen(false);
+                  setTempFilter(emptyFilter);
+                }
+              }
+              if (keys.ESCAPE === key) {
+                setIsPopoverOpen(false);
+              }
+            }}
+            fullWidth
+            placeholder={tempFilter.input.query.length ? tempFilter.input.query : 'All requests'}
+            prepend="Label*"
+            aria-label="Label for your filter"
+          />
+        </EuiFormRow>
+      </EuiForm>
+    </EuiPopover>
+  );
+};
+
+export const EditFilterPopover = ({ filter, setFilter, indexPattern, Button }) => {
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const [tempFilter, setTempFilter] = useState(filter);
+  const [errorMessage, setErrorMessage] = useState<ErrorMessage | undefined>(undefined);
+
+  const labelRef = useRef<HTMLInputElement>();
+  const onQueryChange = (input: Query) => setTempFilter({ ...tempFilter, input });
+  const onLabelChange = (label: string) => setTempFilter({ ...tempFilter, label });
+  const onSubmit = (input: Query) => {
+    let filterQuery;
+    // try {
+    if (input.language === SEARCH_QUERY_LANGUAGE.KUERY) {
+      filterQuery = esKuery.toElasticsearchQuery(
+        esKuery.fromKueryExpression(input.query),
+        indexPattern
+      );
+    } else if (input.language === SEARCH_QUERY_LANGUAGE.LUCENE) {
+      filterQuery = esQuery.luceneStringToDsl(input.query);
+    } else {
+      filterQuery = {};
+    }
+    if (input.query.length) {
+      if (tempFilter.label) {
+        setFilter(tempFilter);
+        setIsPopoverOpen(false);
+      } else {
+        if (labelRef?.current?.focus) {
+          labelRef.current.focus();
+        }
+      }
+    }
+  };
+
+  return (
+    <EuiPopover
+      anchorClassName="lnsLayerPanel__anchor"
+      panelClassName="lnsIndexPatternDimensionEditor__filtersEditor"
+      ownFocus
+      isOpen={isPopoverOpen}
+      closePopover={() => {
+        setIsPopoverOpen(false);
+        setTempFilter(filter);
+      }}
+      button={<Button onClick={() => setIsPopoverOpen((open) => !open)} />}
+    >
+      <EuiForm>
+        <EuiFormRow fullWidth>
+          <QueryStringInput
+            bubbleSubmitEvent={true}
+            indexPatterns={[indexPattern]}
+            query={tempFilter.input}
+            onChange={onQueryChange}
+            onSubmit={onSubmit}
+            placeholder={
+              tempFilter.language === SEARCH_QUERY_LANGUAGE.KUERY
+                ? i18n.translate('xpack.transform.stepDefineForm.queryPlaceholderKql', {
+                    defaultMessage: 'e.g. {example}',
+                    values: { example: 'method : "GET" or status : "404"' },
+                  })
+                : i18n.translate('xpack.transform.stepDefineForm.queryPlaceholderLucene', {
+                    defaultMessage: 'e.g. {example}',
+                    values: { example: 'method:GET OR status:404' },
+                  })
+            }
+            dataTestSubj="transformQueryInput"
+            languageSwitcherPopoverAnchorPosition="rightDown"
+          />
+        </EuiFormRow>
+        <EuiFormRow fullWidth>
+          <EuiFieldText
+            inputRef={labelRef}
+            value={tempFilter.label || ''}
+            onChange={(e) => onLabelChange(e.target.value.trim())}
+            onKeyDown={({ key }: React.KeyboardEvent<HTMLInputElement>) => {
+              if (keys.ENTER === key) {
+                if (tempFilter.input.query.length) {
+                  setFilter(tempFilter);
+                  setIsPopoverOpen(false);
+                  setTempFilter(emptyFilter);
+                }
+              }
+              if (keys.ESCAPE === key) {
+                setIsPopoverOpen(false);
+              }
+            }}
+            fullWidth
+            placeholder={tempFilter.input.query.length ? tempFilter.input.query : 'All requests'}
+            prepend="Label*"
+            aria-label="Label for your filter"
+          />
+        </EuiFormRow>
+      </EuiForm>
+    </EuiPopover>
+  );
+};
+
+export const EmptyFilterPopover = ({ indexPattern, setFilter }) => {
+  const [filter, setLocalFilter] = useState(emptyFilter);
+  const button = ({ onClick }: { onClick: MouseEventHandler }) => (
+    <EuiButtonEmpty iconType="plusInCircle" onClick={onClick}>
+      {i18n.translate('xpack.lens.indexPattern.filters.addSearchQuery', {
+        defaultMessage: 'Add a search query',
+      })}
+    </EuiButtonEmpty>
+  );
+  return (
+    <FilterPopover
+      indexPattern={indexPattern}
+      filter={filter}
+      Button={button}
+      setFilter={(f) => {
+        setFilter(f);
+        setLocalFilter(emptyFilter);
+      }}
+    />
+  );
+};
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.test.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.test.tsx
new file mode 100644
index 0000000000000..875d1922327b4
--- /dev/null
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.test.tsx
@@ -0,0 +1,528 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { shallow } from 'enzyme';
+import { EuiRange, EuiSelect } from '@elastic/eui';
+import { IUiSettingsClient, SavedObjectsClientContract, HttpSetup } from 'kibana/public';
+import { IStorageWrapper } from 'src/plugins/kibana_utils/public';
+import { dataPluginMock } from '../../../../../../../../src/plugins/data/public/mocks';
+import { createMockedIndexPattern } from '../../../mocks';
+import { TermsIndexPatternColumn } from '../terms';
+import { termsOperation } from '../index';
+import { IndexPatternPrivateState } from '../../../types';
+
+const defaultProps = {
+  storage: {} as IStorageWrapper,
+  uiSettings: {} as IUiSettingsClient,
+  savedObjectsClient: {} as SavedObjectsClientContract,
+  dateRange: { fromDate: 'now-1d', toDate: 'now' },
+  data: dataPluginMock.createStartContract(),
+  http: {} as HttpSetup,
+};
+
+describe('terms', () => {
+  let state: IndexPatternPrivateState;
+  const InlineOptions = termsOperation.paramEditor!;
+
+  beforeEach(() => {
+    state = {
+      indexPatternRefs: [],
+      indexPatterns: {},
+      existingFields: {},
+      currentIndexPatternId: '1',
+      isFirstExistenceFetch: false,
+      layers: {
+        first: {
+          indexPatternId: '1',
+          columnOrder: ['col1', 'col2'],
+          columns: {
+            col1: {
+              label: 'Top value of category',
+              dataType: 'string',
+              isBucketed: true,
+              operationType: 'terms',
+              params: {
+                orderBy: { type: 'alphabetical' },
+                size: 3,
+                orderDirection: 'asc',
+              },
+              sourceField: 'category',
+            },
+            col2: {
+              label: 'Count',
+              dataType: 'number',
+              isBucketed: false,
+              sourceField: 'Records',
+              operationType: 'count',
+            },
+          },
+        },
+      },
+    };
+  });
+
+  describe('toEsAggsConfig', () => {
+    it('should reflect params correctly', () => {
+      const esAggsConfig = termsOperation.toEsAggsConfig(
+        state.layers.first.columns.col1 as TermsIndexPatternColumn,
+        'col1'
+      );
+      expect(esAggsConfig).toEqual(
+        expect.objectContaining({
+          params: expect.objectContaining({
+            orderBy: '_key',
+            field: 'category',
+            size: 3,
+          }),
+        })
+      );
+    });
+  });
+
+  describe('onFieldChange', () => {
+    it('should change correctly to new field', () => {
+      const oldColumn: TermsIndexPatternColumn = {
+        operationType: 'terms',
+        sourceField: 'source',
+        label: 'Top values of source',
+        isBucketed: true,
+        dataType: 'string',
+        params: {
+          size: 5,
+          orderBy: {
+            type: 'alphabetical',
+          },
+          orderDirection: 'asc',
+        },
+      };
+      const indexPattern = createMockedIndexPattern();
+      const newDateField = indexPattern.fields.find((i) => i.name === 'dest')!;
+
+      const column = termsOperation.onFieldChange(oldColumn, indexPattern, newDateField);
+      expect(column).toHaveProperty('sourceField', 'dest');
+      expect(column).toHaveProperty('params.size', 5);
+      expect(column).toHaveProperty('params.orderBy.type', 'alphabetical');
+      expect(column).toHaveProperty('params.orderDirection', 'asc');
+      expect(column.label).toContain('dest');
+    });
+  });
+
+  describe('getPossibleOperationForField', () => {
+    it('should return operation with the right type', () => {
+      expect(
+        termsOperation.getPossibleOperationForField({
+          aggregatable: true,
+          searchable: true,
+          name: 'test',
+          type: 'string',
+          aggregationRestrictions: {
+            terms: {
+              agg: 'terms',
+            },
+          },
+        })
+      ).toEqual({
+        dataType: 'string',
+        isBucketed: true,
+        scale: 'ordinal',
+      });
+
+      expect(
+        termsOperation.getPossibleOperationForField({
+          aggregatable: true,
+          searchable: true,
+          name: 'test',
+          type: 'number',
+          aggregationRestrictions: {
+            terms: {
+              agg: 'terms',
+            },
+          },
+        })
+      ).toEqual({
+        dataType: 'number',
+        isBucketed: true,
+        scale: 'ordinal',
+      });
+
+      expect(
+        termsOperation.getPossibleOperationForField({
+          aggregatable: true,
+          searchable: true,
+          name: 'test',
+          type: 'boolean',
+        })
+      ).toEqual({
+        dataType: 'boolean',
+        isBucketed: true,
+        scale: 'ordinal',
+      });
+
+      expect(
+        termsOperation.getPossibleOperationForField({
+          aggregatable: true,
+          searchable: true,
+          name: 'test',
+          type: 'ip',
+        })
+      ).toEqual({
+        dataType: 'ip',
+        isBucketed: true,
+        scale: 'ordinal',
+      });
+    });
+
+    it('should not return an operation if restrictions prevent terms', () => {
+      expect(
+        termsOperation.getPossibleOperationForField({
+          aggregatable: false,
+          searchable: true,
+          name: 'test',
+          type: 'string',
+        })
+      ).toEqual(undefined);
+
+      expect(
+        termsOperation.getPossibleOperationForField({
+          aggregatable: true,
+          aggregationRestrictions: {},
+          searchable: true,
+          name: 'test',
+          type: 'string',
+        })
+      ).toEqual(undefined);
+    });
+  });
+
+  describe('buildColumn', () => {
+    it('should use type from the passed field', () => {
+      const termsColumn = termsOperation.buildColumn({
+        layerId: 'first',
+        suggestedPriority: undefined,
+        indexPattern: createMockedIndexPattern(),
+        field: {
+          aggregatable: true,
+          searchable: true,
+          type: 'boolean',
+          name: 'test',
+        },
+        columns: {},
+      });
+      expect(termsColumn.dataType).toEqual('boolean');
+    });
+
+    it('should use existing metric column as order column', () => {
+      const termsColumn = termsOperation.buildColumn({
+        layerId: 'first',
+        suggestedPriority: undefined,
+        indexPattern: createMockedIndexPattern(),
+        columns: {
+          col1: {
+            label: 'Count',
+            dataType: 'number',
+            isBucketed: false,
+            sourceField: 'Records',
+            operationType: 'count',
+          },
+        },
+        field: {
+          aggregatable: true,
+          searchable: true,
+          type: 'boolean',
+          name: 'test',
+        },
+      });
+      expect(termsColumn.params).toEqual(
+        expect.objectContaining({
+          orderBy: { type: 'column', columnId: 'col1' },
+        })
+      );
+    });
+  });
+
+  describe('onOtherColumnChanged', () => {
+    it('should keep the column if order by column still exists and is metric', () => {
+      const initialColumn: TermsIndexPatternColumn = {
+        label: 'Top value of category',
+        dataType: 'string',
+        isBucketed: true,
+
+        // Private
+        operationType: 'terms',
+        params: {
+          orderBy: { type: 'column', columnId: 'col1' },
+          size: 3,
+          orderDirection: 'asc',
+        },
+        sourceField: 'category',
+      };
+      const updatedColumn = termsOperation.onOtherColumnChanged!(initialColumn, {
+        col1: {
+          label: 'Count',
+          dataType: 'number',
+          isBucketed: false,
+          sourceField: 'Records',
+          operationType: 'count',
+        },
+      });
+      expect(updatedColumn).toBe(initialColumn);
+    });
+
+    it('should switch to alphabetical ordering if there are no columns to order by', () => {
+      const termsColumn = termsOperation.onOtherColumnChanged!(
+        {
+          label: 'Top value of category',
+          dataType: 'string',
+          isBucketed: true,
+
+          // Private
+          operationType: 'terms',
+          params: {
+            orderBy: { type: 'column', columnId: 'col1' },
+            size: 3,
+            orderDirection: 'asc',
+          },
+          sourceField: 'category',
+        },
+        {}
+      );
+      expect(termsColumn.params).toEqual(
+        expect.objectContaining({
+          orderBy: { type: 'alphabetical' },
+        })
+      );
+    });
+
+    it('should switch to alphabetical ordering if the order column is not a metric anymore', () => {
+      const termsColumn = termsOperation.onOtherColumnChanged!(
+        {
+          label: 'Top value of category',
+          dataType: 'string',
+          isBucketed: true,
+
+          // Private
+          operationType: 'terms',
+          params: {
+            orderBy: { type: 'column', columnId: 'col1' },
+            size: 3,
+            orderDirection: 'asc',
+          },
+          sourceField: 'category',
+        },
+        {
+          col1: {
+            label: 'Value of timestamp',
+            dataType: 'date',
+            isBucketed: true,
+
+            // Private
+            operationType: 'date_histogram',
+            params: {
+              interval: 'w',
+            },
+            sourceField: 'timestamp',
+          },
+        }
+      );
+      expect(termsColumn.params).toEqual(
+        expect.objectContaining({
+          orderBy: { type: 'alphabetical' },
+        })
+      );
+    });
+  });
+
+  describe('popover param editor', () => {
+    it('should render current order by value and options', () => {
+      const setStateSpy = jest.fn();
+      const instance = shallow(
+        <InlineOptions
+          {...defaultProps}
+          state={state}
+          setState={setStateSpy}
+          columnId="col1"
+          currentColumn={state.layers.first.columns.col1 as TermsIndexPatternColumn}
+          layerId="first"
+        />
+      );
+
+      const select = instance.find('[data-test-subj="indexPattern-terms-orderBy"]').find(EuiSelect);
+
+      expect(select.prop('value')).toEqual('alphabetical');
+
+      expect(select.prop('options')!.map(({ value }) => value)).toEqual([
+        'column$$$col2',
+        'alphabetical',
+      ]);
+    });
+
+    it('should update state with the order by value', () => {
+      const setStateSpy = jest.fn();
+      const instance = shallow(
+        <InlineOptions
+          {...defaultProps}
+          state={state}
+          setState={setStateSpy}
+          columnId="col1"
+          currentColumn={state.layers.first.columns.col1 as TermsIndexPatternColumn}
+          layerId="first"
+        />
+      );
+
+      instance
+        .find(EuiSelect)
+        .find('[data-test-subj="indexPattern-terms-orderBy"]')
+        .prop('onChange')!({
+        target: {
+          value: 'column$$$col2',
+        },
+      } as React.ChangeEvent<HTMLSelectElement>);
+
+      expect(setStateSpy).toHaveBeenCalledWith({
+        ...state,
+        layers: {
+          first: {
+            ...state.layers.first,
+            columns: {
+              ...state.layers.first.columns,
+              col1: {
+                ...state.layers.first.columns.col1,
+                params: {
+                  ...(state.layers.first.columns.col1 as TermsIndexPatternColumn).params,
+                  orderBy: {
+                    type: 'column',
+                    columnId: 'col2',
+                  },
+                },
+              },
+            },
+          },
+        },
+      });
+    });
+
+    it('should render current order direction value and options', () => {
+      const setStateSpy = jest.fn();
+      const instance = shallow(
+        <InlineOptions
+          {...defaultProps}
+          state={state}
+          setState={setStateSpy}
+          columnId="col1"
+          layerId="first"
+          currentColumn={state.layers.first.columns.col1 as TermsIndexPatternColumn}
+        />
+      );
+
+      const select = instance
+        .find('[data-test-subj="indexPattern-terms-orderDirection"]')
+        .find(EuiSelect);
+
+      expect(select.prop('value')).toEqual('asc');
+      expect(select.prop('options')!.map(({ value }) => value)).toEqual(['asc', 'desc']);
+    });
+
+    it('should update state with the order direction value', () => {
+      const setStateSpy = jest.fn();
+      const instance = shallow(
+        <InlineOptions
+          {...defaultProps}
+          state={state}
+          setState={setStateSpy}
+          columnId="col1"
+          layerId="first"
+          currentColumn={state.layers.first.columns.col1 as TermsIndexPatternColumn}
+        />
+      );
+
+      instance
+        .find('[data-test-subj="indexPattern-terms-orderDirection"]')
+        .find(EuiSelect)
+        .prop('onChange')!({
+        target: {
+          value: 'desc',
+        },
+      } as React.ChangeEvent<HTMLSelectElement>);
+
+      expect(setStateSpy).toHaveBeenCalledWith({
+        ...state,
+        layers: {
+          first: {
+            ...state.layers.first,
+            columns: {
+              ...state.layers.first.columns,
+              col1: {
+                ...state.layers.first.columns.col1,
+                params: {
+                  ...(state.layers.first.columns.col1 as TermsIndexPatternColumn).params,
+                  orderDirection: 'desc',
+                },
+              },
+            },
+          },
+        },
+      });
+    });
+
+    it('should render current size value', () => {
+      const setStateSpy = jest.fn();
+      const instance = shallow(
+        <InlineOptions
+          {...defaultProps}
+          state={state}
+          setState={setStateSpy}
+          columnId="col1"
+          layerId="first"
+          currentColumn={state.layers.first.columns.col1 as TermsIndexPatternColumn}
+        />
+      );
+
+      expect(instance.find(EuiRange).prop('value')).toEqual(3);
+    });
+
+    it('should update state with the size value', () => {
+      const setStateSpy = jest.fn();
+      const instance = shallow(
+        <InlineOptions
+          {...defaultProps}
+          state={state}
+          setState={setStateSpy}
+          columnId="col1"
+          layerId="first"
+          currentColumn={state.layers.first.columns.col1 as TermsIndexPatternColumn}
+        />
+      );
+
+      instance.find(EuiRange).prop('onChange')!(
+        {
+          target: {
+            value: '7',
+          },
+        } as React.ChangeEvent<HTMLInputElement>,
+        true
+      );
+      expect(setStateSpy).toHaveBeenCalledWith({
+        ...state,
+        layers: {
+          first: {
+            ...state.layers.first,
+            columns: {
+              ...state.layers.first.columns,
+              col1: {
+                ...state.layers.first.columns.col1,
+                params: {
+                  ...(state.layers.first.columns.col1 as TermsIndexPatternColumn).params,
+                  size: 7,
+                },
+              },
+            },
+          },
+        },
+      });
+    });
+  });
+});
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters_dnd.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters_dnd.tsx
new file mode 100644
index 0000000000000..02e1b96eb4c81
--- /dev/null
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters_dnd.tsx
@@ -0,0 +1,123 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { useState, MouseEventHandler } from 'react';
+import {
+  EuiDragDropContext,
+  EuiDraggable,
+  EuiDroppable,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiPanel,
+  euiDragDropReorder,
+  EuiButtonIcon,
+  EuiLink,
+  EuiText,
+  htmlIdGenerator,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { EditFilterPopover, EmptyFilterPopover } from './filter_popover';
+
+const makeId = htmlIdGenerator();
+
+const makeFiltersListWithId = (filters) =>
+  filters.map((f) => ({
+    id: makeId(),
+    f,
+  }));
+
+export const FiltersList = ({ filters, setFilters, indexPattern }) => {
+  const onDragEnd = ({ source, destination }) => {
+    if (source && destination) {
+      const items = euiDragDropReorder(filters, source.index, destination.index);
+      setFilters(items);
+    }
+  };
+
+  return (
+    <div>
+      <EuiDragDropContext onDragEnd={onDragEnd}>
+        <EuiDroppable droppableId="CUSTOM_HANDLE_DROPPABLE_AREA" spacing="s">
+          {filters?.map((filter, idx) => {
+            const { input, label } = filter;
+            const id = JSON.stringify(input.query);
+            return (
+              <EuiDraggable
+                spacing="m"
+                key={id}
+                index={idx}
+                draggableId={id}
+                customDragHandle={true}
+              >
+                {(provided) => (
+                  <EuiPanel className="lnsLayerPanel__panel" paddingSize="s">
+                    <EuiFlexGroup gutterSize="xs" alignItems="center">
+                      <EuiFlexItem grow={false}>
+                        <div {...provided.dragHandleProps} className="lnsLayerPanel__dndGrab">
+                          <EuiIcon
+                            type="grab"
+                            aria-label={i18n.translate('xpack.lens.indexPattern.filters.dnd', {
+                              defaultMessage: 'Grab icon',
+                            })}
+                          />
+                        </div>
+                      </EuiFlexItem>
+                      <EuiFlexItem grow={true}>
+                        <EditFilterPopover
+                          indexPattern={indexPattern}
+                          filter={filter}
+                          Button={({ onClick }: { onClick: MouseEventHandler }) => (
+                            <EuiLink
+                              color="text"
+                              onClick={onClick}
+                              className="lnsLayerPanel__filterLink"
+                            >
+                              <EuiText size="s" textAlign="left">
+                                {label ? label : input.query}
+                              </EuiText>
+                            </EuiLink>
+                          )}
+                          setFilter={(newFilter) => {
+                            setFilters(
+                              filters.map((f) =>
+                                f.input.query === filter.input.query ? f : newFilter
+                              )
+                            );
+                          }}
+                        />
+                      </EuiFlexItem>
+                      <EuiFlexItem grow={false}>
+                        <EuiButtonIcon
+                          size="m"
+                          iconType="cross"
+                          color="danger"
+                          onClick={() => {
+                            setFilters(filters.filter((f) => f !== filter));
+                          }}
+                          aria-label={i18n.translate(
+                            'xpack.lens.indexPattern.filters.deleteSearchQuery',
+                            {
+                              defaultMessage: 'Delete filter',
+                            }
+                          )}
+                        />
+                      </EuiFlexItem>
+                    </EuiFlexGroup>
+                  </EuiPanel>
+                )}
+              </EuiDraggable>
+            );
+          })}
+        </EuiDroppable>
+      </EuiDragDropContext>
+      <EmptyFilterPopover
+        indexPattern={indexPattern}
+        setFilter={(filter) => setFilters(filters.concat(filter))}
+      />
+    </div>
+  );
+};
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/index.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/index.tsx
new file mode 100644
index 0000000000000..1e10e985dd340
--- /dev/null
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/index.tsx
@@ -0,0 +1,210 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { i18n } from '@kbn/i18n';
+import { EuiForm, EuiFormRow, EuiRange, EuiSelect } from '@elastic/eui';
+import { Query } from 'src/plugins/data/public';
+import { IndexPatternColumn } from '../../../indexpattern';
+import { updateColumnParam } from '../../../state_helpers';
+import { DataType } from '../../../../types';
+import { OperationDefinition } from '../index';
+import { FieldBasedIndexPatternColumn } from '../column_types';
+import { FiltersList } from './filters_dnd';
+
+type PropType<C> = C extends React.ComponentType<infer P> ? P : unknown;
+
+// Add ticks to EuiRange component props
+const FixedEuiRange = (EuiRange as unknown) as React.ComponentType<
+  PropType<typeof EuiRange> & {
+    ticks?: Array<{
+      label: string;
+      value: number;
+    }>;
+  }
+>;
+
+function ofName() {
+  return i18n.translate('xpack.lens.indexPattern.filters.label', {
+    defaultMessage: 'Search query',
+  });
+}
+
+function isSortableByColumn(column: IndexPatternColumn) {
+  return !column.isBucketed;
+}
+
+const DEFAULT_SIZE = 3;
+const supportedTypes = new Set(['string', 'boolean', 'number', 'ip']);
+
+// interface Filter {
+//   input: {Query & {label?: string } }
+// }
+
+export interface Filter {
+  input: Query;
+  label?: string;
+}
+
+export interface FiltersIndexPatternColumn extends FieldBasedIndexPatternColumn {
+  operationType: 'filters';
+  params: {
+    filters: Filter[];
+    size: number;
+    orderBy: { type: 'alphabetical' } | { type: 'column'; columnId: string };
+    orderDirection: 'asc' | 'desc';
+  };
+}
+
+export const filtersOperation: OperationDefinition<FiltersIndexPatternColumn> = {
+  type: 'filters',
+  displayName: i18n.translate('xpack.lens.indexPattern.filters', {
+    defaultMessage: 'Filters',
+  }),
+  priority: 3, // Higher than any metric
+  getPossibleOperationForField: ({ aggregationRestrictions, aggregatable, type }) => {
+    if (type === 'document') {
+      return {
+        dataType: 'number',
+        isBucketed: true,
+        scale: 'ordinal',
+      };
+    }
+  },
+  isTransferable: (column, newIndexPattern) => {
+    const newField = newIndexPattern.fields.find((field) => field.name === column.sourceField);
+
+    return Boolean(
+      newField &&
+        supportedTypes.has(newField.type) &&
+        newField.aggregatable &&
+        (!newField.aggregationRestrictions || newField.aggregationRestrictions.filters) // no se
+    );
+  },
+  buildColumn({ suggestedPriority, columns }) {
+    const existingMetricColumn = Object.entries(columns)
+      .filter(([_columnId, column]) => column && isSortableByColumn(column))
+      .map(([id]) => id)[0];
+
+    return {
+      label: ofName(),
+      operationType: 'filters',
+      scale: 'ordinal',
+      suggestedPriority,
+      isBucketed: true,
+      params: {
+        size: DEFAULT_SIZE,
+        orderBy: existingMetricColumn
+          ? { type: 'column', columnId: existingMetricColumn }
+          : { type: 'alphabetical' },
+        orderDirection: existingMetricColumn ? 'desc' : 'asc',
+        filters: [],
+      },
+    };
+  },
+
+  toEsAggsConfig: (column, columnId) => ({
+    id: columnId,
+    enabled: true,
+    type: 'filters',
+    schema: 'segment',
+    params: {
+      filters: column.params.filters.length > 0 ? column.params.filters : undefined,
+    },
+  }),
+
+  onFieldChange: (oldColumn, indexPattern, field) => {
+    return {
+      ...oldColumn,
+      label: ofName(field.name),
+      sourceField: field.name,
+    };
+  },
+  onOtherColumnChanged: (currentColumn, columns) => {
+    if (currentColumn.params.orderBy.type === 'column') {
+      // check whether the column is still there and still a metric
+      const columnSortedBy = columns[currentColumn.params.orderBy.columnId];
+      if (!columnSortedBy || !isSortableByColumn(columnSortedBy)) {
+        return {
+          ...currentColumn,
+          params: {
+            ...currentColumn.params,
+            orderBy: { type: 'alphabetical' },
+            orderDirection: 'asc',
+          },
+        };
+      }
+    }
+    return currentColumn;
+  },
+  paramEditor: ({ state, setState, currentColumn, layerId }) => {
+    const SEPARATOR = '$$$';
+    function toValue(orderBy: FiltersIndexPatternColumn['params']['orderBy']) {
+      if (orderBy.type === 'alphabetical') {
+        return orderBy.type;
+      }
+      return `${orderBy.type}${SEPARATOR}${orderBy.columnId}`;
+    }
+
+    function fromValue(value: string): FiltersIndexPatternColumn['params']['orderBy'] {
+      if (value === 'alphabetical') {
+        return { type: 'alphabetical' };
+      }
+      const parts = value.split(SEPARATOR);
+      return {
+        type: 'column',
+        columnId: parts[1],
+      };
+    }
+
+    function onFiltersChange(filters: Filters) {
+      // validation
+      setState(updateColumnParam({ state, layerId, currentColumn, paramName: 'filters', filters }));
+    }
+
+    const orderOptions = Object.entries(state.layers[layerId].columns)
+      .filter(([_columnId, column]) => isSortableByColumn(column))
+      .map(([columnId, column]) => {
+        return {
+          value: toValue({ type: 'column', columnId }),
+          text: column.label,
+        };
+      });
+    orderOptions.push({
+      value: toValue({ type: 'alphabetical' }),
+      text: i18n.translate('xpack.lens.indexPattern.filters.orderAlphabetical', {
+        defaultMessage: 'Alphabetical',
+      }),
+    });
+    return (
+      <EuiForm>
+        <EuiFormRow
+          label={i18n.translate('xpack.lens.indexPattern.filters.queries', {
+            defaultMessage: 'Queries',
+          })}
+        >
+          <div>
+            <FiltersList
+              indexPattern={state.indexPatterns[state.currentIndexPatternId]}
+              filters={currentColumn.params.filters}
+              setFilters={(filters) => {
+                setState(
+                  updateColumnParam({
+                    state,
+                    layerId,
+                    currentColumn,
+                    paramName: 'filters',
+                    value: filters,
+                  })
+                );
+              }}
+            />
+          </div>
+        </EuiFormRow>
+      </EuiForm>
+    );
+  },
+};
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/index.ts b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/index.ts
index 8ef53c1e0b425..1dcce04a21948 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/index.ts
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/index.ts
@@ -7,6 +7,7 @@
 import { IUiSettingsClient, SavedObjectsClientContract, HttpSetup } from 'kibana/public';
 import { IStorageWrapper } from 'src/plugins/kibana_utils/public';
 import { termsOperation } from './terms';
+import { filtersOperation } from './filters';
 import { cardinalityOperation } from './cardinality';
 import { minOperation, averageOperation, sumOperation, maxOperation } from './metrics';
 import { dateHistogramOperation } from './date_histogram';
@@ -21,6 +22,7 @@ import { DataPublicPluginStart } from '../../../../../../../src/plugins/data/pub
 // If you want to implement a new operation, add it to this array and
 // its type will get propagated to everything else
 const internalOperationDefinitions = [
+  filtersOperation,
   termsOperation,
   dateHistogramOperation,
   minOperation,
@@ -32,6 +34,7 @@ const internalOperationDefinitions = [
 ];
 
 export { termsOperation } from './terms';
+export { filtersOperation } from './filters';
 export { dateHistogramOperation } from './date_histogram';
 export { minOperation, averageOperation, sumOperation, maxOperation } from './metrics';
 export { countOperation } from './count';
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/state_helpers.test.ts b/x-pack/plugins/lens/public/indexpattern_datasource/state_helpers.test.ts
index 7b6eb11efc494..e2c70564aa70e 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/state_helpers.test.ts
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/state_helpers.test.ts
@@ -14,6 +14,7 @@ import {
 import { operationDefinitionMap } from './operations';
 import { TermsIndexPatternColumn } from './operations/definitions/terms';
 import { DateHistogramIndexPatternColumn } from './operations/definitions/date_histogram';
+import { FiltersIndexPatternColumn } from './operations/definitions/filters';
 import { AvgIndexPatternColumn } from './operations/definitions/metrics';
 import { IndexPattern, IndexPatternPrivateState, IndexPatternLayer } from './types';
 

From 47ba9df2553d09fb6e1eb2076cbba29777800d0a Mon Sep 17 00:00:00 2001
From: Marta Bondyra <marta.bondyra@elastic.co>
Date: Mon, 24 Aug 2020 14:20:47 +0200
Subject: [PATCH 02/32] filters aggregation tweaks and types

---
 .../dimension_panel/bucket_nesting_editor.tsx |  51 +--
 .../definitions/filters/filter_popover.tsx    | 247 --------------
 .../definitions/filters/filters.test.tsx      |   8 +
 .../definitions/filters/filters_dnd.tsx       | 123 -------
 .../definitions/filters/filters_list.tsx      | 308 ++++++++++++++++++
 .../operations/definitions/filters/index.tsx  | 156 ++-------
 .../state_helpers.test.ts                     |   1 -
 .../public/indexpattern_datasource/types.ts   |   2 +-
 8 files changed, 375 insertions(+), 521 deletions(-)
 delete mode 100644 x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx
 delete mode 100644 x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters_dnd.tsx
 create mode 100644 x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters_list.tsx

diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/bucket_nesting_editor.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/bucket_nesting_editor.tsx
index 198be7085f5fc..b654b992a0a0b 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/bucket_nesting_editor.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/bucket_nesting_editor.tsx
@@ -61,6 +61,34 @@ export function BucketNestingEditor({
       }
     }
 
+    const topLevelCopy: Record<string, string> = {
+      terms: i18n.translate('xpack.lens.indexPattern.groupingOverallTerms', {
+        defaultMessage: 'Overall top {field}',
+        values: { field: fieldName },
+      }),
+      filters: i18n.translate('xpack.lens.indexPattern.groupingOverallFilters', {
+        defaultMessage: 'Filters overall',
+      }),
+      date_histogram: i18n.translate('xpack.lens.indexPattern.groupingOverallDateHistogram', {
+        defaultMessage: 'Dates overall',
+      }),
+    };
+
+    const bottomLevelCopy: Record<string, string> = {
+      terms: i18n.translate('xpack.lens.indexPattern.groupingSecondTerms', {
+        defaultMessage: 'Top values for each {target}',
+        values: { target: target.fieldName },
+      }),
+      filters: i18n.translate('xpack.lens.indexPattern.groupingSecondFilters', {
+        defaultMessage: 'Filters for each {target}',
+        values: { target: target.fieldName },
+      }),
+      date_histogram: i18n.translate('xpack.lens.indexPattern.groupingSecondDateHistogram', {
+        defaultMessage: 'Dates for each {target}',
+        values: { target: target.fieldName },
+      }),
+    };
+
     return (
       <>
         <EuiHorizontalRule margin="m" />
@@ -73,33 +101,14 @@ export function BucketNestingEditor({
             <EuiRadio
               id={generator('topLevel')}
               data-test-subj="indexPattern-nesting-topLevel"
-              label={
-                column.operationType === 'terms'
-                  ? i18n.translate('xpack.lens.indexPattern.groupingOverallTerms', {
-                      defaultMessage: 'Overall top {field}',
-                      values: { field: fieldName },
-                    })
-                  : i18n.translate('xpack.lens.indexPattern.groupingOverallDateHistogram', {
-                      defaultMessage: 'Dates overall',
-                    })
-              }
+              label={topLevelCopy[column.operationType]}
               checked={!prevColumn}
               onChange={toggleNesting}
             />
             <EuiRadio
               id={generator('bottomLevel')}
               data-test-subj="indexPattern-nesting-bottomLevel"
-              label={
-                column.operationType === 'terms'
-                  ? i18n.translate('xpack.lens.indexPattern.groupingSecondTerms', {
-                      defaultMessage: 'Top values for each {target}',
-                      values: { target: target.fieldName },
-                    })
-                  : i18n.translate('xpack.lens.indexPattern.groupingSecondDateHistogram', {
-                      defaultMessage: 'Dates for each {target}',
-                      values: { target: target.fieldName },
-                    })
-              }
+              label={bottomLevelCopy[column.operationType]}
               checked={!!prevColumn}
               onChange={toggleNesting}
             />
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx
deleted file mode 100644
index d31ac7111e832..0000000000000
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx
+++ /dev/null
@@ -1,247 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import React, { useState, useRef, MouseEventHandler } from 'react';
-import { EuiPopover, EuiFieldText, EuiForm, EuiFormRow, keys, EuiButtonEmpty } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
-import {
-  QueryStringInput,
-  Query,
-  esKuery,
-  esQuery,
-} from '../../../../../../../../src/plugins/data/public';
-
-export enum SEARCH_QUERY_LANGUAGE {
-  KUERY = 'kuery',
-  LUCENE = 'lucene',
-}
-
-export interface ErrorMessage {
-  query: string;
-  message: string;
-}
-
-const emptyFilter = {
-  input: {
-    query: '',
-    language: SEARCH_QUERY_LANGUAGE.KUERY,
-  },
-  label: '',
-};
-
-export const FilterPopover = ({ filter, setFilter, indexPattern, Button }) => {
-  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-  const [tempFilter, setTempFilter] = useState(filter);
-  const [errorMessage, setErrorMessage] = useState<ErrorMessage | undefined>(undefined);
-
-  const labelRef = useRef<HTMLInputElement>();
-  const onQueryChange = (input: Query) => setTempFilter({ ...tempFilter, input });
-  const onLabelChange = (label: string) => setTempFilter({ ...tempFilter, label });
-  const onSubmit = (input: Query) => {
-    let filterQuery;
-    // try {
-    if (input.language === SEARCH_QUERY_LANGUAGE.KUERY) {
-      filterQuery = esKuery.toElasticsearchQuery(
-        esKuery.fromKueryExpression(input.query),
-        indexPattern
-      );
-    } else if (input.language === SEARCH_QUERY_LANGUAGE.LUCENE) {
-      filterQuery = esQuery.luceneStringToDsl(input.query);
-    } else {
-      filterQuery = {};
-    }
-    if (input.query.length) {
-      if (tempFilter.label) {
-        setFilter(tempFilter);
-        setIsPopoverOpen(false);
-      } else {
-        if (labelRef?.current?.focus) {
-          labelRef.current.focus();
-        }
-      }
-    }
-  };
-
-  return (
-    <EuiPopover
-      anchorClassName="lnsLayerPanel__anchor"
-      panelClassName="lnsIndexPatternDimensionEditor__filtersEditor"
-      ownFocus
-      isOpen={isPopoverOpen}
-      closePopover={() => {
-        setIsPopoverOpen(false);
-        setTempFilter(filter);
-      }}
-      button={<Button onClick={() => setIsPopoverOpen((open) => !open)} />}
-    >
-      <EuiForm>
-        <EuiFormRow fullWidth>
-          <QueryStringInput
-            bubbleSubmitEvent={true}
-            indexPatterns={[indexPattern]}
-            query={tempFilter.input}
-            onChange={onQueryChange}
-            onSubmit={onSubmit}
-            placeholder={
-              tempFilter.language === SEARCH_QUERY_LANGUAGE.KUERY
-                ? i18n.translate('xpack.transform.stepDefineForm.queryPlaceholderKql', {
-                    defaultMessage: 'e.g. {example}',
-                    values: { example: 'method : "GET" or status : "404"' },
-                  })
-                : i18n.translate('xpack.transform.stepDefineForm.queryPlaceholderLucene', {
-                    defaultMessage: 'e.g. {example}',
-                    values: { example: 'method:GET OR status:404' },
-                  })
-            }
-            dataTestSubj="transformQueryInput"
-            languageSwitcherPopoverAnchorPosition="rightDown"
-          />
-        </EuiFormRow>
-        <EuiFormRow fullWidth>
-          <EuiFieldText
-            inputRef={labelRef}
-            value={tempFilter.label || ''}
-            onChange={(e) => onLabelChange(e.target.value.trim())}
-            onKeyDown={({ key }: React.KeyboardEvent<HTMLInputElement>) => {
-              if (keys.ENTER === key) {
-                if (tempFilter.input.query.length) {
-                  setFilter(tempFilter);
-                  setIsPopoverOpen(false);
-                  setTempFilter(emptyFilter);
-                }
-              }
-              if (keys.ESCAPE === key) {
-                setIsPopoverOpen(false);
-              }
-            }}
-            fullWidth
-            placeholder={tempFilter.input.query.length ? tempFilter.input.query : 'All requests'}
-            prepend="Label*"
-            aria-label="Label for your filter"
-          />
-        </EuiFormRow>
-      </EuiForm>
-    </EuiPopover>
-  );
-};
-
-export const EditFilterPopover = ({ filter, setFilter, indexPattern, Button }) => {
-  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-  const [tempFilter, setTempFilter] = useState(filter);
-  const [errorMessage, setErrorMessage] = useState<ErrorMessage | undefined>(undefined);
-
-  const labelRef = useRef<HTMLInputElement>();
-  const onQueryChange = (input: Query) => setTempFilter({ ...tempFilter, input });
-  const onLabelChange = (label: string) => setTempFilter({ ...tempFilter, label });
-  const onSubmit = (input: Query) => {
-    let filterQuery;
-    // try {
-    if (input.language === SEARCH_QUERY_LANGUAGE.KUERY) {
-      filterQuery = esKuery.toElasticsearchQuery(
-        esKuery.fromKueryExpression(input.query),
-        indexPattern
-      );
-    } else if (input.language === SEARCH_QUERY_LANGUAGE.LUCENE) {
-      filterQuery = esQuery.luceneStringToDsl(input.query);
-    } else {
-      filterQuery = {};
-    }
-    if (input.query.length) {
-      if (tempFilter.label) {
-        setFilter(tempFilter);
-        setIsPopoverOpen(false);
-      } else {
-        if (labelRef?.current?.focus) {
-          labelRef.current.focus();
-        }
-      }
-    }
-  };
-
-  return (
-    <EuiPopover
-      anchorClassName="lnsLayerPanel__anchor"
-      panelClassName="lnsIndexPatternDimensionEditor__filtersEditor"
-      ownFocus
-      isOpen={isPopoverOpen}
-      closePopover={() => {
-        setIsPopoverOpen(false);
-        setTempFilter(filter);
-      }}
-      button={<Button onClick={() => setIsPopoverOpen((open) => !open)} />}
-    >
-      <EuiForm>
-        <EuiFormRow fullWidth>
-          <QueryStringInput
-            bubbleSubmitEvent={true}
-            indexPatterns={[indexPattern]}
-            query={tempFilter.input}
-            onChange={onQueryChange}
-            onSubmit={onSubmit}
-            placeholder={
-              tempFilter.language === SEARCH_QUERY_LANGUAGE.KUERY
-                ? i18n.translate('xpack.transform.stepDefineForm.queryPlaceholderKql', {
-                    defaultMessage: 'e.g. {example}',
-                    values: { example: 'method : "GET" or status : "404"' },
-                  })
-                : i18n.translate('xpack.transform.stepDefineForm.queryPlaceholderLucene', {
-                    defaultMessage: 'e.g. {example}',
-                    values: { example: 'method:GET OR status:404' },
-                  })
-            }
-            dataTestSubj="transformQueryInput"
-            languageSwitcherPopoverAnchorPosition="rightDown"
-          />
-        </EuiFormRow>
-        <EuiFormRow fullWidth>
-          <EuiFieldText
-            inputRef={labelRef}
-            value={tempFilter.label || ''}
-            onChange={(e) => onLabelChange(e.target.value.trim())}
-            onKeyDown={({ key }: React.KeyboardEvent<HTMLInputElement>) => {
-              if (keys.ENTER === key) {
-                if (tempFilter.input.query.length) {
-                  setFilter(tempFilter);
-                  setIsPopoverOpen(false);
-                  setTempFilter(emptyFilter);
-                }
-              }
-              if (keys.ESCAPE === key) {
-                setIsPopoverOpen(false);
-              }
-            }}
-            fullWidth
-            placeholder={tempFilter.input.query.length ? tempFilter.input.query : 'All requests'}
-            prepend="Label*"
-            aria-label="Label for your filter"
-          />
-        </EuiFormRow>
-      </EuiForm>
-    </EuiPopover>
-  );
-};
-
-export const EmptyFilterPopover = ({ indexPattern, setFilter }) => {
-  const [filter, setLocalFilter] = useState(emptyFilter);
-  const button = ({ onClick }: { onClick: MouseEventHandler }) => (
-    <EuiButtonEmpty iconType="plusInCircle" onClick={onClick}>
-      {i18n.translate('xpack.lens.indexPattern.filters.addSearchQuery', {
-        defaultMessage: 'Add a search query',
-      })}
-    </EuiButtonEmpty>
-  );
-  return (
-    <FilterPopover
-      indexPattern={indexPattern}
-      filter={filter}
-      Button={button}
-      setFilter={(f) => {
-        setFilter(f);
-        setLocalFilter(emptyFilter);
-      }}
-    />
-  );
-};
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.test.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.test.tsx
index 875d1922327b4..1dfb4ce1e200e 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.test.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.test.tsx
@@ -118,6 +118,7 @@ describe('terms', () => {
           aggregatable: true,
           searchable: true,
           name: 'test',
+          displayName: 'test',
           type: 'string',
           aggregationRestrictions: {
             terms: {
@@ -136,6 +137,7 @@ describe('terms', () => {
           aggregatable: true,
           searchable: true,
           name: 'test',
+          displayName: 'test',
           type: 'number',
           aggregationRestrictions: {
             terms: {
@@ -154,6 +156,7 @@ describe('terms', () => {
           aggregatable: true,
           searchable: true,
           name: 'test',
+          displayName: 'test',
           type: 'boolean',
         })
       ).toEqual({
@@ -167,6 +170,7 @@ describe('terms', () => {
           aggregatable: true,
           searchable: true,
           name: 'test',
+          displayName: 'test',
           type: 'ip',
         })
       ).toEqual({
@@ -182,6 +186,7 @@ describe('terms', () => {
           aggregatable: false,
           searchable: true,
           name: 'test',
+          displayName: 'test',
           type: 'string',
         })
       ).toEqual(undefined);
@@ -192,6 +197,7 @@ describe('terms', () => {
           aggregationRestrictions: {},
           searchable: true,
           name: 'test',
+          displayName: 'test',
           type: 'string',
         })
       ).toEqual(undefined);
@@ -208,6 +214,7 @@ describe('terms', () => {
           aggregatable: true,
           searchable: true,
           type: 'boolean',
+          displayName: 'test',
           name: 'test',
         },
         columns: {},
@@ -233,6 +240,7 @@ describe('terms', () => {
           aggregatable: true,
           searchable: true,
           type: 'boolean',
+          displayName: 'test',
           name: 'test',
         },
       });
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters_dnd.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters_dnd.tsx
deleted file mode 100644
index 02e1b96eb4c81..0000000000000
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters_dnd.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import React, { useState, MouseEventHandler } from 'react';
-import {
-  EuiDragDropContext,
-  EuiDraggable,
-  EuiDroppable,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiIcon,
-  EuiPanel,
-  euiDragDropReorder,
-  EuiButtonIcon,
-  EuiLink,
-  EuiText,
-  htmlIdGenerator,
-} from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
-import { EditFilterPopover, EmptyFilterPopover } from './filter_popover';
-
-const makeId = htmlIdGenerator();
-
-const makeFiltersListWithId = (filters) =>
-  filters.map((f) => ({
-    id: makeId(),
-    f,
-  }));
-
-export const FiltersList = ({ filters, setFilters, indexPattern }) => {
-  const onDragEnd = ({ source, destination }) => {
-    if (source && destination) {
-      const items = euiDragDropReorder(filters, source.index, destination.index);
-      setFilters(items);
-    }
-  };
-
-  return (
-    <div>
-      <EuiDragDropContext onDragEnd={onDragEnd}>
-        <EuiDroppable droppableId="CUSTOM_HANDLE_DROPPABLE_AREA" spacing="s">
-          {filters?.map((filter, idx) => {
-            const { input, label } = filter;
-            const id = JSON.stringify(input.query);
-            return (
-              <EuiDraggable
-                spacing="m"
-                key={id}
-                index={idx}
-                draggableId={id}
-                customDragHandle={true}
-              >
-                {(provided) => (
-                  <EuiPanel className="lnsLayerPanel__panel" paddingSize="s">
-                    <EuiFlexGroup gutterSize="xs" alignItems="center">
-                      <EuiFlexItem grow={false}>
-                        <div {...provided.dragHandleProps} className="lnsLayerPanel__dndGrab">
-                          <EuiIcon
-                            type="grab"
-                            aria-label={i18n.translate('xpack.lens.indexPattern.filters.dnd', {
-                              defaultMessage: 'Grab icon',
-                            })}
-                          />
-                        </div>
-                      </EuiFlexItem>
-                      <EuiFlexItem grow={true}>
-                        <EditFilterPopover
-                          indexPattern={indexPattern}
-                          filter={filter}
-                          Button={({ onClick }: { onClick: MouseEventHandler }) => (
-                            <EuiLink
-                              color="text"
-                              onClick={onClick}
-                              className="lnsLayerPanel__filterLink"
-                            >
-                              <EuiText size="s" textAlign="left">
-                                {label ? label : input.query}
-                              </EuiText>
-                            </EuiLink>
-                          )}
-                          setFilter={(newFilter) => {
-                            setFilters(
-                              filters.map((f) =>
-                                f.input.query === filter.input.query ? f : newFilter
-                              )
-                            );
-                          }}
-                        />
-                      </EuiFlexItem>
-                      <EuiFlexItem grow={false}>
-                        <EuiButtonIcon
-                          size="m"
-                          iconType="cross"
-                          color="danger"
-                          onClick={() => {
-                            setFilters(filters.filter((f) => f !== filter));
-                          }}
-                          aria-label={i18n.translate(
-                            'xpack.lens.indexPattern.filters.deleteSearchQuery',
-                            {
-                              defaultMessage: 'Delete filter',
-                            }
-                          )}
-                        />
-                      </EuiFlexItem>
-                    </EuiFlexGroup>
-                  </EuiPanel>
-                )}
-              </EuiDraggable>
-            );
-          })}
-        </EuiDroppable>
-      </EuiDragDropContext>
-      <EmptyFilterPopover
-        indexPattern={indexPattern}
-        setFilter={(filter) => setFilters(filters.concat(filter))}
-      />
-    </div>
-  );
-};
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters_list.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters_list.tsx
new file mode 100644
index 0000000000000..57a3e0c23652b
--- /dev/null
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters_list.tsx
@@ -0,0 +1,308 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { MouseEventHandler, useState, useRef } from 'react';
+import {
+  EuiDragDropContext,
+  EuiDraggable,
+  EuiDroppable,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiPanel,
+  euiDragDropReorder,
+  EuiButtonIcon,
+  EuiLink,
+  EuiText,
+  EuiButtonEmpty,
+  EuiPopover,
+  EuiFieldText,
+  EuiForm,
+  EuiFormRow,
+  keys,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { Filter } from '.';
+
+import { IndexPattern } from '../../../types';
+
+import {
+  QueryStringInput,
+  Query,
+  esKuery,
+  esQuery,
+} from '../../../../../../../../src/plugins/data/public';
+
+export enum SEARCH_QUERY_LANGUAGE {
+  KUERY = 'kuery',
+  LUCENE = 'lucene',
+}
+
+const emptyFilter: Filter = {
+  input: {
+    query: '',
+    language: SEARCH_QUERY_LANGUAGE.KUERY,
+  },
+  label: '',
+};
+
+const defaultPlaceholderMessage = i18n.translate(
+  'xpack.lens.indexPattern.filters.label.placeholder',
+  {
+    defaultMessage: 'All requests',
+  }
+);
+
+export const FilterPopover = ({
+  filter,
+  setFilter,
+  indexPattern,
+  Button,
+}: {
+  filter: Filter;
+  setFilter: Function;
+  indexPattern: IndexPattern;
+  Button: React.FunctionComponent<{ onClick: MouseEventHandler }>;
+}) => {
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const [tempFilter, setTempFilter] = useState(filter);
+
+  const inputRef = useRef<HTMLInputElement>();
+  const onQueryChange = (input: Query) => setTempFilter({ ...tempFilter, input });
+  const onLabelChange = (label: string) => setTempFilter({ ...tempFilter, label });
+  const onSubmit = (input: Query) => {
+    try {
+      if (input.language === SEARCH_QUERY_LANGUAGE.KUERY) {
+        esKuery.toElasticsearchQuery(esKuery.fromKueryExpression(input.query), indexPattern);
+      } else if (input.language === SEARCH_QUERY_LANGUAGE.LUCENE) {
+        esQuery.luceneStringToDsl(input.query);
+      }
+      if (input.query.length) {
+        if (tempFilter.label) {
+          setFilter(tempFilter);
+          setIsPopoverOpen(false);
+        } else {
+          if (inputRef.current) inputRef.current.focus();
+        }
+      }
+    } catch (e) {
+      console.log('Invalid syntax', JSON.stringify(e, null, 2)); // eslint-disable-line no-console
+    }
+  };
+
+  return (
+    <EuiPopover
+      anchorClassName="lnsLayerPanel__anchor"
+      panelClassName="lnsIndexPatternDimensionEditor__filtersEditor"
+      ownFocus
+      isOpen={isPopoverOpen}
+      closePopover={() => {
+        setIsPopoverOpen(false);
+        setTempFilter(filter);
+      }}
+      button={<Button onClick={() => setIsPopoverOpen((open) => !open)} />}
+    >
+      <EuiForm>
+        <EuiFormRow fullWidth>
+          <QueryStringInput
+            bubbleSubmitEvent={true}
+            indexPatterns={[indexPattern]}
+            query={tempFilter.input}
+            onChange={onQueryChange}
+            onSubmit={onSubmit}
+            placeholder={
+              tempFilter.input.language === SEARCH_QUERY_LANGUAGE.KUERY
+                ? i18n.translate('xpack.lens.indexPattern.filters.queryPlaceholderKql', {
+                    defaultMessage: 'e.g. {example}',
+                    values: { example: 'method : "GET" or status : "404"' },
+                  })
+                : i18n.translate('xpack.lens.indexPattern.filters.queryPlaceholderLucene', {
+                    defaultMessage: 'e.g. {example}',
+                    values: { example: 'method:GET OR status:404' },
+                  })
+            }
+            dataTestSubj="transformQueryInput"
+            languageSwitcherPopoverAnchorPosition="rightDown"
+          />
+        </EuiFormRow>
+        <EuiFormRow fullWidth>
+          <EuiFieldText
+            inputRef={(node) => {
+              if (node) {
+                inputRef.current = node;
+              }
+            }}
+            value={tempFilter.label || ''}
+            onChange={(e) => onLabelChange(e.target.value.trim())}
+            onKeyDown={({ key }: React.KeyboardEvent<HTMLInputElement>) => {
+              if (keys.ENTER === key) {
+                if (tempFilter.input.query.length) {
+                  setFilter(tempFilter);
+                  setIsPopoverOpen(false);
+                  setTempFilter(emptyFilter);
+                }
+              }
+              if (keys.ESCAPE === key) {
+                setIsPopoverOpen(false);
+              }
+            }}
+            fullWidth
+            placeholder={
+              tempFilter.input.query.length
+                ? (tempFilter.input.query as string)
+                : defaultPlaceholderMessage
+            }
+            prepend="Label*" // todo: is this tooltip?
+            aria-label={i18n.translate('xpack.lens.indexPattern.filters.label.aria-message', {
+              defaultMessage: 'Label for your filter',
+            })}
+          />
+        </EuiFormRow>
+      </EuiForm>
+    </EuiPopover>
+  );
+};
+
+const countDuplicates = (filterArr: Filter[], filter: Filter) =>
+  filterArr.filter(
+    (f) =>
+      JSON.stringify(f.input.query.trim()) === JSON.stringify(filter.input.query.trim()) &&
+      f.label === filter.label
+  ).length;
+
+const makeUniqueLabel = (filterArr: Filter[], filter: Filter) => {
+  let label = '';
+  let count = 0;
+  do {
+    count++;
+    label = `${filter.input.query} [${count}]`;
+  } while (filterArr.find((f) => f.label === label));
+  return label;
+};
+
+interface DraggableLocation {
+  droppableId: string;
+  index: number;
+}
+
+export const FiltersList = ({
+  filters,
+  setFilters,
+  indexPattern,
+}: {
+  filters: Filter[];
+  setFilters: Function;
+  indexPattern: IndexPattern;
+}) => {
+  const onDragEnd = ({
+    source,
+    destination,
+  }: {
+    source?: DraggableLocation;
+    destination?: DraggableLocation;
+  }) => {
+    if (source && destination) {
+      const items = euiDragDropReorder(filters, source.index, destination.index);
+      setFilters(items);
+    }
+  };
+
+  return (
+    <div>
+      <EuiDragDropContext onDragEnd={onDragEnd}>
+        <EuiDroppable droppableId="CUSTOM_HANDLE_DROPPABLE_AREA" spacing="s">
+          {filters?.map((filter: Filter, idx: number) => {
+            const { input, label } = filter;
+            const id = `${JSON.stringify(input.query)}_${label}`;
+            return (
+              <EuiDraggable
+                spacing="m"
+                key={id}
+                index={idx}
+                draggableId={id}
+                customDragHandle={true}
+              >
+                {(provided) => (
+                  <EuiPanel className="lnsLayerPanel__panel" paddingSize="none">
+                    <EuiFlexGroup gutterSize="xs" alignItems="center">
+                      <EuiFlexItem grow={false}>
+                        <div {...provided.dragHandleProps} className="lnsLayerPanel__dndGrab">
+                          <EuiIcon
+                            type="grab"
+                            aria-label={i18n.translate('xpack.lens.indexPattern.filters.grabIcon', {
+                              defaultMessage: 'Grab icon',
+                            })}
+                          />
+                        </div>
+                      </EuiFlexItem>
+                      <EuiFlexItem grow={true}>
+                        <FilterPopover
+                          indexPattern={indexPattern}
+                          filter={filter}
+                          Button={({ onClick }: { onClick: MouseEventHandler }) => (
+                            <EuiLink
+                              color="text"
+                              onClick={onClick}
+                              className="lnsLayerPanel__filterLink"
+                            >
+                              <EuiText size="s" textAlign="left">
+                                {label ? label : input.query}
+                              </EuiText>
+                            </EuiLink>
+                          )}
+                          setFilter={(newFilter: Filter) => {
+                            if (countDuplicates(filters, newFilter) > 1) {
+                              newFilter.label = makeUniqueLabel(filters, newFilter);
+                            }
+                            setFilters(filters.map((f: Filter) => (f === filter ? newFilter : f)));
+                          }}
+                        />
+                      </EuiFlexItem>
+                      <EuiFlexItem grow={false}>
+                        <EuiButtonIcon
+                          size="m"
+                          iconType="cross"
+                          color="danger"
+                          onClick={() => {
+                            setFilters(filters.filter((f: Filter) => f !== filter));
+                          }}
+                          aria-label={i18n.translate(
+                            'xpack.lens.indexPattern.filters.deleteSearchQuery',
+                            {
+                              defaultMessage: 'Delete filter',
+                            }
+                          )}
+                        />
+                      </EuiFlexItem>
+                    </EuiFlexGroup>
+                  </EuiPanel>
+                )}
+              </EuiDraggable>
+            );
+          })}
+        </EuiDroppable>
+      </EuiDragDropContext>
+
+      <FilterPopover
+        indexPattern={indexPattern}
+        filter={emptyFilter}
+        Button={({ onClick }: { onClick: MouseEventHandler }) => (
+          <EuiButtonEmpty iconType="plusInCircle" onClick={onClick}>
+            {i18n.translate('xpack.lens.indexPattern.filters.addSearchQuery', {
+              defaultMessage: 'Add a search query',
+            })}
+          </EuiButtonEmpty>
+        )}
+        setFilter={(newFilter: Filter) => {
+          if (countDuplicates(filters, newFilter) > 0) {
+            newFilter.label = makeUniqueLabel(filters, newFilter);
+          }
+          setFilters(filters.concat(newFilter));
+        }}
+      />
+    </div>
+  );
+};
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/index.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/index.tsx
index 1e10e985dd340..42ae0ef046085 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/index.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/index.tsx
@@ -6,43 +6,17 @@
 
 import React from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiForm, EuiFormRow, EuiRange, EuiSelect } from '@elastic/eui';
+import { EuiForm, EuiFormRow } from '@elastic/eui';
 import { Query } from 'src/plugins/data/public';
-import { IndexPatternColumn } from '../../../indexpattern';
 import { updateColumnParam } from '../../../state_helpers';
-import { DataType } from '../../../../types';
 import { OperationDefinition } from '../index';
 import { FieldBasedIndexPatternColumn } from '../column_types';
-import { FiltersList } from './filters_dnd';
-
-type PropType<C> = C extends React.ComponentType<infer P> ? P : unknown;
-
-// Add ticks to EuiRange component props
-const FixedEuiRange = (EuiRange as unknown) as React.ComponentType<
-  PropType<typeof EuiRange> & {
-    ticks?: Array<{
-      label: string;
-      value: number;
-    }>;
-  }
->;
-
-function ofName() {
-  return i18n.translate('xpack.lens.indexPattern.filters.label', {
-    defaultMessage: 'Search query',
-  });
-}
-
-function isSortableByColumn(column: IndexPatternColumn) {
-  return !column.isBucketed;
-}
-
-const DEFAULT_SIZE = 3;
-const supportedTypes = new Set(['string', 'boolean', 'number', 'ip']);
+import { FiltersList } from './filters_list';
+import { DataType } from '../../../../types';
 
-// interface Filter {
-//   input: {Query & {label?: string } }
-// }
+const searchQueryLabel = i18n.translate('xpack.lens.indexPattern.filters', {
+  defaultMessage: 'Search query',
+});
 
 export interface Filter {
   input: Query;
@@ -53,9 +27,6 @@ export interface FiltersIndexPatternColumn extends FieldBasedIndexPatternColumn
   operationType: 'filters';
   params: {
     filters: Filter[];
-    size: number;
-    orderBy: { type: 'alphabetical' } | { type: 'column'; columnId: string };
-    orderDirection: 'asc' | 'desc';
   };
 }
 
@@ -74,33 +45,18 @@ export const filtersOperation: OperationDefinition<FiltersIndexPatternColumn> =
       };
     }
   },
-  isTransferable: (column, newIndexPattern) => {
-    const newField = newIndexPattern.fields.find((field) => field.name === column.sourceField);
-
-    return Boolean(
-      newField &&
-        supportedTypes.has(newField.type) &&
-        newField.aggregatable &&
-        (!newField.aggregationRestrictions || newField.aggregationRestrictions.filters) // no se
-    );
-  },
-  buildColumn({ suggestedPriority, columns }) {
-    const existingMetricColumn = Object.entries(columns)
-      .filter(([_columnId, column]) => column && isSortableByColumn(column))
-      .map(([id]) => id)[0];
+  isTransferable: () => true,
 
+  buildColumn({ suggestedPriority, field, previousColumn }) {
     return {
-      label: ofName(),
+      label: searchQueryLabel,
+      dataType: field.type as DataType,
       operationType: 'filters',
       scale: 'ordinal',
       suggestedPriority,
       isBucketed: true,
+      sourceField: field.name,
       params: {
-        size: DEFAULT_SIZE,
-        orderBy: existingMetricColumn
-          ? { type: 'column', columnId: existingMetricColumn }
-          : { type: 'alphabetical' },
-        orderDirection: existingMetricColumn ? 'desc' : 'asc',
         filters: [],
       },
     };
@@ -115,70 +71,16 @@ export const filtersOperation: OperationDefinition<FiltersIndexPatternColumn> =
       filters: column.params.filters.length > 0 ? column.params.filters : undefined,
     },
   }),
-
   onFieldChange: (oldColumn, indexPattern, field) => {
     return {
       ...oldColumn,
-      label: ofName(field.name),
+      label: field.displayName,
       sourceField: field.name,
     };
   },
-  onOtherColumnChanged: (currentColumn, columns) => {
-    if (currentColumn.params.orderBy.type === 'column') {
-      // check whether the column is still there and still a metric
-      const columnSortedBy = columns[currentColumn.params.orderBy.columnId];
-      if (!columnSortedBy || !isSortableByColumn(columnSortedBy)) {
-        return {
-          ...currentColumn,
-          params: {
-            ...currentColumn.params,
-            orderBy: { type: 'alphabetical' },
-            orderDirection: 'asc',
-          },
-        };
-      }
-    }
-    return currentColumn;
-  },
   paramEditor: ({ state, setState, currentColumn, layerId }) => {
-    const SEPARATOR = '$$$';
-    function toValue(orderBy: FiltersIndexPatternColumn['params']['orderBy']) {
-      if (orderBy.type === 'alphabetical') {
-        return orderBy.type;
-      }
-      return `${orderBy.type}${SEPARATOR}${orderBy.columnId}`;
-    }
-
-    function fromValue(value: string): FiltersIndexPatternColumn['params']['orderBy'] {
-      if (value === 'alphabetical') {
-        return { type: 'alphabetical' };
-      }
-      const parts = value.split(SEPARATOR);
-      return {
-        type: 'column',
-        columnId: parts[1],
-      };
-    }
-
-    function onFiltersChange(filters: Filters) {
-      // validation
-      setState(updateColumnParam({ state, layerId, currentColumn, paramName: 'filters', filters }));
-    }
+    const layerIndexPattern = state.indexPatterns[state.layers[layerId].indexPatternId];
 
-    const orderOptions = Object.entries(state.layers[layerId].columns)
-      .filter(([_columnId, column]) => isSortableByColumn(column))
-      .map(([columnId, column]) => {
-        return {
-          value: toValue({ type: 'column', columnId }),
-          text: column.label,
-        };
-      });
-    orderOptions.push({
-      value: toValue({ type: 'alphabetical' }),
-      text: i18n.translate('xpack.lens.indexPattern.filters.orderAlphabetical', {
-        defaultMessage: 'Alphabetical',
-      }),
-    });
     return (
       <EuiForm>
         <EuiFormRow
@@ -186,23 +88,21 @@ export const filtersOperation: OperationDefinition<FiltersIndexPatternColumn> =
             defaultMessage: 'Queries',
           })}
         >
-          <div>
-            <FiltersList
-              indexPattern={state.indexPatterns[state.currentIndexPatternId]}
-              filters={currentColumn.params.filters}
-              setFilters={(filters) => {
-                setState(
-                  updateColumnParam({
-                    state,
-                    layerId,
-                    currentColumn,
-                    paramName: 'filters',
-                    value: filters,
-                  })
-                );
-              }}
-            />
-          </div>
+          <FiltersList
+            indexPattern={layerIndexPattern}
+            filters={currentColumn.params.filters}
+            setFilters={(filters: Filter[]) =>
+              setState(
+                updateColumnParam({
+                  state,
+                  layerId,
+                  currentColumn,
+                  paramName: 'filters',
+                  value: filters,
+                })
+              )
+            }
+          />
         </EuiFormRow>
       </EuiForm>
     );
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/state_helpers.test.ts b/x-pack/plugins/lens/public/indexpattern_datasource/state_helpers.test.ts
index e2c70564aa70e..7b6eb11efc494 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/state_helpers.test.ts
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/state_helpers.test.ts
@@ -14,7 +14,6 @@ import {
 import { operationDefinitionMap } from './operations';
 import { TermsIndexPatternColumn } from './operations/definitions/terms';
 import { DateHistogramIndexPatternColumn } from './operations/definitions/date_histogram';
-import { FiltersIndexPatternColumn } from './operations/definitions/filters';
 import { AvgIndexPatternColumn } from './operations/definitions/metrics';
 import { IndexPattern, IndexPatternPrivateState, IndexPatternLayer } from './types';
 
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/types.ts b/x-pack/plugins/lens/public/indexpattern_datasource/types.ts
index c101f1354b703..ef6770baff3cd 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/types.ts
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/types.ts
@@ -11,7 +11,7 @@ export interface IndexPattern {
   id: string;
   fields: IndexPatternField[];
   title: string;
-  timeFieldName?: string | null;
+  timeFieldName?: string;
   fieldFormatMap?: Record<
     string,
     {

From 38fb23661e42a136e102ec5301c821f3d64ecc26 Mon Sep 17 00:00:00 2001
From: Marta Bondyra <marta.bondyra@elastic.co>
Date: Mon, 24 Aug 2020 15:11:39 +0200
Subject: [PATCH 03/32] refactoring

---
 .../config_panel/_layer_panel.scss            |   4 -
 .../definitions/filters/filters.test.tsx      | 458 ++----------------
 .../definitions/filters/filters.tsx           | 110 +++++
 .../definitions/filters/filters_list.tsx      |   2 +-
 .../operations/definitions/filters/index.tsx  | 105 +---
 5 files changed, 150 insertions(+), 529 deletions(-)
 create mode 100644 x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx

diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_layer_panel.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_layer_panel.scss
index 893bb96b83156..87f228851d631 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_layer_panel.scss
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_layer_panel.scss
@@ -35,10 +35,6 @@
   min-height: $euiSizeXXL;
 }
 
-.lnsLayerPanel__panel {
-  position: relative;
-}
-
 .lnsLayerPanel__anchor {
   width: 100%;
 }
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.test.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.test.tsx
index 1dfb4ce1e200e..92bda2c57f0ca 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.test.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.test.tsx
@@ -11,8 +11,8 @@ import { IUiSettingsClient, SavedObjectsClientContract, HttpSetup } from 'kibana
 import { IStorageWrapper } from 'src/plugins/kibana_utils/public';
 import { dataPluginMock } from '../../../../../../../../src/plugins/data/public/mocks';
 import { createMockedIndexPattern } from '../../../mocks';
-import { TermsIndexPatternColumn } from '../terms';
-import { termsOperation } from '../index';
+import { FiltersIndexPatternColumn } from '.';
+import { filtersOperation } from '../../index';
 import { IndexPatternPrivateState } from '../../../types';
 
 const defaultProps = {
@@ -24,9 +24,9 @@ const defaultProps = {
   http: {} as HttpSetup,
 };
 
-describe('terms', () => {
+describe('filters', () => {
   let state: IndexPatternPrivateState;
-  const InlineOptions = termsOperation.paramEditor!;
+  const InlineOptions = filtersOperation.paramEditor!;
 
   beforeEach(() => {
     state = {
@@ -41,16 +41,24 @@ describe('terms', () => {
           columnOrder: ['col1', 'col2'],
           columns: {
             col1: {
-              label: 'Top value of category',
-              dataType: 'string',
+              label: 'Search query',
+              dataType: 'document',
+              operationType: 'filters',
+              scale: 'ordinal',
               isBucketed: true,
-              operationType: 'terms',
+              sourceField: 'Records',
               params: {
-                orderBy: { type: 'alphabetical' },
-                size: 3,
-                orderDirection: 'asc',
+                filters: [
+                  {
+                    input: { query: 'bytes >= 1', language: 'kuery' },
+                    label: 'More than one',
+                  },
+                  {
+                    input: { query: 'src : 2', language: 'kuery' },
+                    label: '',
+                  },
+                ],
               },
-              sourceField: 'category',
             },
             col2: {
               label: 'Count',
@@ -67,78 +75,38 @@ describe('terms', () => {
 
   describe('toEsAggsConfig', () => {
     it('should reflect params correctly', () => {
-      const esAggsConfig = termsOperation.toEsAggsConfig(
-        state.layers.first.columns.col1 as TermsIndexPatternColumn,
+      const esAggsConfig = filtersOperation.toEsAggsConfig(
+        state.layers.first.columns.col1 as FiltersIndexPatternColumn,
         'col1'
       );
       expect(esAggsConfig).toEqual(
         expect.objectContaining({
           params: expect.objectContaining({
-            orderBy: '_key',
-            field: 'category',
-            size: 3,
+            filters: [
+              {
+                input: { query: 'bytes >= 1', language: 'kuery' },
+                label: 'More than one',
+              },
+              {
+                input: { query: 'src : 2', language: 'kuery' },
+                label: '',
+              },
+            ],
           }),
         })
       );
     });
   });
 
-  describe('onFieldChange', () => {
-    it('should change correctly to new field', () => {
-      const oldColumn: TermsIndexPatternColumn = {
-        operationType: 'terms',
-        sourceField: 'source',
-        label: 'Top values of source',
-        isBucketed: true,
-        dataType: 'string',
-        params: {
-          size: 5,
-          orderBy: {
-            type: 'alphabetical',
-          },
-          orderDirection: 'asc',
-        },
-      };
-      const indexPattern = createMockedIndexPattern();
-      const newDateField = indexPattern.fields.find((i) => i.name === 'dest')!;
-
-      const column = termsOperation.onFieldChange(oldColumn, indexPattern, newDateField);
-      expect(column).toHaveProperty('sourceField', 'dest');
-      expect(column).toHaveProperty('params.size', 5);
-      expect(column).toHaveProperty('params.orderBy.type', 'alphabetical');
-      expect(column).toHaveProperty('params.orderDirection', 'asc');
-      expect(column.label).toContain('dest');
-    });
-  });
-
   describe('getPossibleOperationForField', () => {
-    it('should return operation with the right type', () => {
-      expect(
-        termsOperation.getPossibleOperationForField({
-          aggregatable: true,
-          searchable: true,
-          name: 'test',
-          displayName: 'test',
-          type: 'string',
-          aggregationRestrictions: {
-            terms: {
-              agg: 'terms',
-            },
-          },
-        })
-      ).toEqual({
-        dataType: 'string',
-        isBucketed: true,
-        scale: 'ordinal',
-      });
-
+    it('should return operation with the right type for document', () => {
       expect(
-        termsOperation.getPossibleOperationForField({
+        filtersOperation.getPossibleOperationForField({
           aggregatable: true,
           searchable: true,
           name: 'test',
           displayName: 'test',
-          type: 'number',
+          type: 'document',
           aggregationRestrictions: {
             terms: {
               agg: 'terms',
@@ -150,39 +118,11 @@ describe('terms', () => {
         isBucketed: true,
         scale: 'ordinal',
       });
-
-      expect(
-        termsOperation.getPossibleOperationForField({
-          aggregatable: true,
-          searchable: true,
-          name: 'test',
-          displayName: 'test',
-          type: 'boolean',
-        })
-      ).toEqual({
-        dataType: 'boolean',
-        isBucketed: true,
-        scale: 'ordinal',
-      });
-
-      expect(
-        termsOperation.getPossibleOperationForField({
-          aggregatable: true,
-          searchable: true,
-          name: 'test',
-          displayName: 'test',
-          type: 'ip',
-        })
-      ).toEqual({
-        dataType: 'ip',
-        isBucketed: true,
-        scale: 'ordinal',
-      });
     });
 
-    it('should not return an operation if restrictions prevent terms', () => {
+    it('should not return an operation if field type is not document', () => {
       expect(
-        termsOperation.getPossibleOperationForField({
+        filtersOperation.getPossibleOperationForField({
           aggregatable: false,
           searchable: true,
           name: 'test',
@@ -190,23 +130,12 @@ describe('terms', () => {
           type: 'string',
         })
       ).toEqual(undefined);
-
-      expect(
-        termsOperation.getPossibleOperationForField({
-          aggregatable: true,
-          aggregationRestrictions: {},
-          searchable: true,
-          name: 'test',
-          displayName: 'test',
-          type: 'string',
-        })
-      ).toEqual(undefined);
     });
   });
 
   describe('buildColumn', () => {
     it('should use type from the passed field', () => {
-      const termsColumn = termsOperation.buildColumn({
+      const filtersColumn = filtersOperation.buildColumn({
         layerId: 'first',
         suggestedPriority: undefined,
         indexPattern: createMockedIndexPattern(),
@@ -219,318 +148,7 @@ describe('terms', () => {
         },
         columns: {},
       });
-      expect(termsColumn.dataType).toEqual('boolean');
-    });
-
-    it('should use existing metric column as order column', () => {
-      const termsColumn = termsOperation.buildColumn({
-        layerId: 'first',
-        suggestedPriority: undefined,
-        indexPattern: createMockedIndexPattern(),
-        columns: {
-          col1: {
-            label: 'Count',
-            dataType: 'number',
-            isBucketed: false,
-            sourceField: 'Records',
-            operationType: 'count',
-          },
-        },
-        field: {
-          aggregatable: true,
-          searchable: true,
-          type: 'boolean',
-          displayName: 'test',
-          name: 'test',
-        },
-      });
-      expect(termsColumn.params).toEqual(
-        expect.objectContaining({
-          orderBy: { type: 'column', columnId: 'col1' },
-        })
-      );
-    });
-  });
-
-  describe('onOtherColumnChanged', () => {
-    it('should keep the column if order by column still exists and is metric', () => {
-      const initialColumn: TermsIndexPatternColumn = {
-        label: 'Top value of category',
-        dataType: 'string',
-        isBucketed: true,
-
-        // Private
-        operationType: 'terms',
-        params: {
-          orderBy: { type: 'column', columnId: 'col1' },
-          size: 3,
-          orderDirection: 'asc',
-        },
-        sourceField: 'category',
-      };
-      const updatedColumn = termsOperation.onOtherColumnChanged!(initialColumn, {
-        col1: {
-          label: 'Count',
-          dataType: 'number',
-          isBucketed: false,
-          sourceField: 'Records',
-          operationType: 'count',
-        },
-      });
-      expect(updatedColumn).toBe(initialColumn);
-    });
-
-    it('should switch to alphabetical ordering if there are no columns to order by', () => {
-      const termsColumn = termsOperation.onOtherColumnChanged!(
-        {
-          label: 'Top value of category',
-          dataType: 'string',
-          isBucketed: true,
-
-          // Private
-          operationType: 'terms',
-          params: {
-            orderBy: { type: 'column', columnId: 'col1' },
-            size: 3,
-            orderDirection: 'asc',
-          },
-          sourceField: 'category',
-        },
-        {}
-      );
-      expect(termsColumn.params).toEqual(
-        expect.objectContaining({
-          orderBy: { type: 'alphabetical' },
-        })
-      );
-    });
-
-    it('should switch to alphabetical ordering if the order column is not a metric anymore', () => {
-      const termsColumn = termsOperation.onOtherColumnChanged!(
-        {
-          label: 'Top value of category',
-          dataType: 'string',
-          isBucketed: true,
-
-          // Private
-          operationType: 'terms',
-          params: {
-            orderBy: { type: 'column', columnId: 'col1' },
-            size: 3,
-            orderDirection: 'asc',
-          },
-          sourceField: 'category',
-        },
-        {
-          col1: {
-            label: 'Value of timestamp',
-            dataType: 'date',
-            isBucketed: true,
-
-            // Private
-            operationType: 'date_histogram',
-            params: {
-              interval: 'w',
-            },
-            sourceField: 'timestamp',
-          },
-        }
-      );
-      expect(termsColumn.params).toEqual(
-        expect.objectContaining({
-          orderBy: { type: 'alphabetical' },
-        })
-      );
-    });
-  });
-
-  describe('popover param editor', () => {
-    it('should render current order by value and options', () => {
-      const setStateSpy = jest.fn();
-      const instance = shallow(
-        <InlineOptions
-          {...defaultProps}
-          state={state}
-          setState={setStateSpy}
-          columnId="col1"
-          currentColumn={state.layers.first.columns.col1 as TermsIndexPatternColumn}
-          layerId="first"
-        />
-      );
-
-      const select = instance.find('[data-test-subj="indexPattern-terms-orderBy"]').find(EuiSelect);
-
-      expect(select.prop('value')).toEqual('alphabetical');
-
-      expect(select.prop('options')!.map(({ value }) => value)).toEqual([
-        'column$$$col2',
-        'alphabetical',
-      ]);
-    });
-
-    it('should update state with the order by value', () => {
-      const setStateSpy = jest.fn();
-      const instance = shallow(
-        <InlineOptions
-          {...defaultProps}
-          state={state}
-          setState={setStateSpy}
-          columnId="col1"
-          currentColumn={state.layers.first.columns.col1 as TermsIndexPatternColumn}
-          layerId="first"
-        />
-      );
-
-      instance
-        .find(EuiSelect)
-        .find('[data-test-subj="indexPattern-terms-orderBy"]')
-        .prop('onChange')!({
-        target: {
-          value: 'column$$$col2',
-        },
-      } as React.ChangeEvent<HTMLSelectElement>);
-
-      expect(setStateSpy).toHaveBeenCalledWith({
-        ...state,
-        layers: {
-          first: {
-            ...state.layers.first,
-            columns: {
-              ...state.layers.first.columns,
-              col1: {
-                ...state.layers.first.columns.col1,
-                params: {
-                  ...(state.layers.first.columns.col1 as TermsIndexPatternColumn).params,
-                  orderBy: {
-                    type: 'column',
-                    columnId: 'col2',
-                  },
-                },
-              },
-            },
-          },
-        },
-      });
-    });
-
-    it('should render current order direction value and options', () => {
-      const setStateSpy = jest.fn();
-      const instance = shallow(
-        <InlineOptions
-          {...defaultProps}
-          state={state}
-          setState={setStateSpy}
-          columnId="col1"
-          layerId="first"
-          currentColumn={state.layers.first.columns.col1 as TermsIndexPatternColumn}
-        />
-      );
-
-      const select = instance
-        .find('[data-test-subj="indexPattern-terms-orderDirection"]')
-        .find(EuiSelect);
-
-      expect(select.prop('value')).toEqual('asc');
-      expect(select.prop('options')!.map(({ value }) => value)).toEqual(['asc', 'desc']);
-    });
-
-    it('should update state with the order direction value', () => {
-      const setStateSpy = jest.fn();
-      const instance = shallow(
-        <InlineOptions
-          {...defaultProps}
-          state={state}
-          setState={setStateSpy}
-          columnId="col1"
-          layerId="first"
-          currentColumn={state.layers.first.columns.col1 as TermsIndexPatternColumn}
-        />
-      );
-
-      instance
-        .find('[data-test-subj="indexPattern-terms-orderDirection"]')
-        .find(EuiSelect)
-        .prop('onChange')!({
-        target: {
-          value: 'desc',
-        },
-      } as React.ChangeEvent<HTMLSelectElement>);
-
-      expect(setStateSpy).toHaveBeenCalledWith({
-        ...state,
-        layers: {
-          first: {
-            ...state.layers.first,
-            columns: {
-              ...state.layers.first.columns,
-              col1: {
-                ...state.layers.first.columns.col1,
-                params: {
-                  ...(state.layers.first.columns.col1 as TermsIndexPatternColumn).params,
-                  orderDirection: 'desc',
-                },
-              },
-            },
-          },
-        },
-      });
-    });
-
-    it('should render current size value', () => {
-      const setStateSpy = jest.fn();
-      const instance = shallow(
-        <InlineOptions
-          {...defaultProps}
-          state={state}
-          setState={setStateSpy}
-          columnId="col1"
-          layerId="first"
-          currentColumn={state.layers.first.columns.col1 as TermsIndexPatternColumn}
-        />
-      );
-
-      expect(instance.find(EuiRange).prop('value')).toEqual(3);
-    });
-
-    it('should update state with the size value', () => {
-      const setStateSpy = jest.fn();
-      const instance = shallow(
-        <InlineOptions
-          {...defaultProps}
-          state={state}
-          setState={setStateSpy}
-          columnId="col1"
-          layerId="first"
-          currentColumn={state.layers.first.columns.col1 as TermsIndexPatternColumn}
-        />
-      );
-
-      instance.find(EuiRange).prop('onChange')!(
-        {
-          target: {
-            value: '7',
-          },
-        } as React.ChangeEvent<HTMLInputElement>,
-        true
-      );
-      expect(setStateSpy).toHaveBeenCalledWith({
-        ...state,
-        layers: {
-          first: {
-            ...state.layers.first,
-            columns: {
-              ...state.layers.first.columns,
-              col1: {
-                ...state.layers.first.columns.col1,
-                params: {
-                  ...(state.layers.first.columns.col1 as TermsIndexPatternColumn).params,
-                  size: 7,
-                },
-              },
-            },
-          },
-        },
-      });
+      expect(filtersColumn.dataType).toEqual('boolean');
     });
   });
 });
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx
new file mode 100644
index 0000000000000..e463d4fdea301
--- /dev/null
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx
@@ -0,0 +1,110 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { i18n } from '@kbn/i18n';
+import { EuiForm, EuiFormRow } from '@elastic/eui';
+import { Query } from 'src/plugins/data/public';
+import { updateColumnParam } from '../../../state_helpers';
+import { OperationDefinition } from '../index';
+import { FieldBasedIndexPatternColumn } from '../column_types';
+import { FiltersList } from './filters_list';
+import { DataType } from '../../../../types';
+
+const searchQueryLabel = i18n.translate('xpack.lens.indexPattern.filters', {
+  defaultMessage: 'Search query',
+});
+
+export interface Filter {
+  input: Query;
+  label?: string;
+}
+
+export interface FiltersIndexPatternColumn extends FieldBasedIndexPatternColumn {
+  operationType: 'filters';
+  params: {
+    filters: Filter[];
+  };
+}
+
+export const filtersOperation: OperationDefinition<FiltersIndexPatternColumn> = {
+  type: 'filters',
+  displayName: i18n.translate('xpack.lens.indexPattern.filters', {
+    defaultMessage: 'Filters',
+  }),
+  priority: 3, // Higher than any metric
+  getPossibleOperationForField: ({ type }) => {
+    if (type === 'document') {
+      return {
+        dataType: 'number',
+        isBucketed: true,
+        scale: 'ordinal',
+      };
+    }
+  },
+  isTransferable: () => true,
+
+  buildColumn({ suggestedPriority, field }) {
+    return {
+      label: searchQueryLabel,
+      dataType: field.type as DataType,
+      operationType: 'filters',
+      scale: 'ordinal',
+      suggestedPriority,
+      isBucketed: true,
+      sourceField: field.name,
+      params: {
+        filters: [],
+      },
+    };
+  },
+
+  toEsAggsConfig: (column, columnId) => ({
+    id: columnId,
+    enabled: true,
+    type: 'filters',
+    schema: 'segment',
+    params: {
+      filters: column.params.filters.length > 0 ? column.params.filters : undefined,
+    },
+  }),
+  onFieldChange: (oldColumn, indexPattern, field) => {
+    return {
+      ...oldColumn,
+      label: field.displayName,
+      sourceField: field.name,
+    };
+  },
+  paramEditor: ({ state, setState, currentColumn, layerId }) => {
+    const layerIndexPattern = state.indexPatterns[state.layers[layerId].indexPatternId];
+
+    return (
+      <EuiForm>
+        <EuiFormRow
+          label={i18n.translate('xpack.lens.indexPattern.filters.queries', {
+            defaultMessage: 'Queries',
+          })}
+        >
+          <FiltersList
+            indexPattern={layerIndexPattern}
+            filters={currentColumn.params.filters}
+            setFilters={(filters: Filter[]) =>
+              setState(
+                updateColumnParam({
+                  state,
+                  layerId,
+                  currentColumn,
+                  paramName: 'filters',
+                  value: filters,
+                })
+              )
+            }
+          />
+        </EuiFormRow>
+      </EuiForm>
+    );
+  },
+};
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters_list.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters_list.tsx
index 57a3e0c23652b..9adc6107c95ed 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters_list.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters_list.tsx
@@ -226,7 +226,7 @@ export const FiltersList = ({
                 customDragHandle={true}
               >
                 {(provided) => (
-                  <EuiPanel className="lnsLayerPanel__panel" paddingSize="none">
+                  <EuiPanel paddingSize="none">
                     <EuiFlexGroup gutterSize="xs" alignItems="center">
                       <EuiFlexItem grow={false}>
                         <div {...provided.dragHandleProps} className="lnsLayerPanel__dndGrab">
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/index.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/index.tsx
index 42ae0ef046085..30577bfde8c99 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/index.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/index.tsx
@@ -4,107 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
-import { i18n } from '@kbn/i18n';
-import { EuiForm, EuiFormRow } from '@elastic/eui';
-import { Query } from 'src/plugins/data/public';
-import { updateColumnParam } from '../../../state_helpers';
-import { OperationDefinition } from '../index';
-import { FieldBasedIndexPatternColumn } from '../column_types';
-import { FiltersList } from './filters_list';
-import { DataType } from '../../../../types';
-
-const searchQueryLabel = i18n.translate('xpack.lens.indexPattern.filters', {
-  defaultMessage: 'Search query',
-});
-
-export interface Filter {
-  input: Query;
-  label?: string;
-}
-
-export interface FiltersIndexPatternColumn extends FieldBasedIndexPatternColumn {
-  operationType: 'filters';
-  params: {
-    filters: Filter[];
-  };
-}
-
-export const filtersOperation: OperationDefinition<FiltersIndexPatternColumn> = {
-  type: 'filters',
-  displayName: i18n.translate('xpack.lens.indexPattern.filters', {
-    defaultMessage: 'Filters',
-  }),
-  priority: 3, // Higher than any metric
-  getPossibleOperationForField: ({ aggregationRestrictions, aggregatable, type }) => {
-    if (type === 'document') {
-      return {
-        dataType: 'number',
-        isBucketed: true,
-        scale: 'ordinal',
-      };
-    }
-  },
-  isTransferable: () => true,
-
-  buildColumn({ suggestedPriority, field, previousColumn }) {
-    return {
-      label: searchQueryLabel,
-      dataType: field.type as DataType,
-      operationType: 'filters',
-      scale: 'ordinal',
-      suggestedPriority,
-      isBucketed: true,
-      sourceField: field.name,
-      params: {
-        filters: [],
-      },
-    };
-  },
-
-  toEsAggsConfig: (column, columnId) => ({
-    id: columnId,
-    enabled: true,
-    type: 'filters',
-    schema: 'segment',
-    params: {
-      filters: column.params.filters.length > 0 ? column.params.filters : undefined,
-    },
-  }),
-  onFieldChange: (oldColumn, indexPattern, field) => {
-    return {
-      ...oldColumn,
-      label: field.displayName,
-      sourceField: field.name,
-    };
-  },
-  paramEditor: ({ state, setState, currentColumn, layerId }) => {
-    const layerIndexPattern = state.indexPatterns[state.layers[layerId].indexPatternId];
-
-    return (
-      <EuiForm>
-        <EuiFormRow
-          label={i18n.translate('xpack.lens.indexPattern.filters.queries', {
-            defaultMessage: 'Queries',
-          })}
-        >
-          <FiltersList
-            indexPattern={layerIndexPattern}
-            filters={currentColumn.params.filters}
-            setFilters={(filters: Filter[]) =>
-              setState(
-                updateColumnParam({
-                  state,
-                  layerId,
-                  currentColumn,
-                  paramName: 'filters',
-                  value: filters,
-                })
-              )
-            }
-          />
-        </EuiFormRow>
-      </EuiForm>
-    );
-  },
-};
+export * from './filters';

From be5ae8d974c58074840d2743ba881a3a0f584b37 Mon Sep 17 00:00:00 2001
From: Marta Bondyra <marta.bondyra@elastic.co>
Date: Mon, 24 Aug 2020 18:30:34 +0200
Subject: [PATCH 04/32] style fixes

---
 .../editor_frame/config_panel/_layer_panel.scss               | 1 +
 .../operations/definitions/filters/filters_list.tsx           | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_layer_panel.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_layer_panel.scss
index 87f228851d631..78b3153056ce6 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_layer_panel.scss
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_layer_panel.scss
@@ -37,6 +37,7 @@
 
 .lnsLayerPanel__anchor {
   width: 100%;
+  padding: $euiSizeS;
 }
 
 .lnsLayerPanel__dndGrab {
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters_list.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters_list.tsx
index 9adc6107c95ed..550873abf8621 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters_list.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters_list.tsx
@@ -72,7 +72,7 @@ export const FilterPopover = ({
 
   const inputRef = useRef<HTMLInputElement>();
   const onQueryChange = (input: Query) => setTempFilter({ ...tempFilter, input });
-  const onLabelChange = (label: string) => setTempFilter({ ...tempFilter, label });
+  const onLabelChange = (label: string) => setTempFilter({ ...tempFilter, label: label.trim() });
   const onSubmit = (input: Query) => {
     try {
       if (input.language === SEARCH_QUERY_LANGUAGE.KUERY) {
@@ -136,7 +136,7 @@ export const FilterPopover = ({
               }
             }}
             value={tempFilter.label || ''}
-            onChange={(e) => onLabelChange(e.target.value.trim())}
+            onChange={(e) => onLabelChange(e.target.value)}
             onKeyDown={({ key }: React.KeyboardEvent<HTMLInputElement>) => {
               if (keys.ENTER === key) {
                 if (tempFilter.input.query.length) {

From 8d1227d629e599d5d8652f149d8d3862f72afead Mon Sep 17 00:00:00 2001
From: Marta Bondyra <marta.bondyra@elastic.co>
Date: Tue, 25 Aug 2020 13:43:40 +0200
Subject: [PATCH 05/32] addressing feedback

---
 .../dimension_panel/bucket_nesting_editor.tsx  |  4 ++--
 .../dimension_panel/popover_editor.scss        |  2 +-
 .../operations/definitions/filters/filters.tsx | 18 +++++++++++++-----
 .../definitions/filters/filters_list.tsx       | 10 ++++++----
 4 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/bucket_nesting_editor.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/bucket_nesting_editor.tsx
index b654b992a0a0b..8923bfb4f6798 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/bucket_nesting_editor.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/bucket_nesting_editor.tsx
@@ -67,7 +67,7 @@ export function BucketNestingEditor({
         values: { field: fieldName },
       }),
       filters: i18n.translate('xpack.lens.indexPattern.groupingOverallFilters', {
-        defaultMessage: 'Filters overall',
+        defaultMessage: 'Search query overall',
       }),
       date_histogram: i18n.translate('xpack.lens.indexPattern.groupingOverallDateHistogram', {
         defaultMessage: 'Dates overall',
@@ -80,7 +80,7 @@ export function BucketNestingEditor({
         values: { target: target.fieldName },
       }),
       filters: i18n.translate('xpack.lens.indexPattern.groupingSecondFilters', {
-        defaultMessage: 'Filters for each {target}',
+        defaultMessage: 'Search query for each {target}',
         values: { target: target.fieldName },
       }),
       date_histogram: i18n.translate('xpack.lens.indexPattern.groupingSecondDateHistogram', {
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.scss b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.scss
index 222175b78bcad..5bc821dbd8867 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.scss
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.scss
@@ -21,7 +21,7 @@
 
 .lnsIndexPatternDimensionEditor__filtersEditor {
   max-width: 100%;
-  width: $euiSize * 30;
+  width: $euiSize * 50;
 }
 
 // todo: remove after closing https://github.com/elastic/eui/issues/3548
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx
index e463d4fdea301..ea261f0ed0876 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx
@@ -14,7 +14,7 @@ import { FieldBasedIndexPatternColumn } from '../column_types';
 import { FiltersList } from './filters_list';
 import { DataType } from '../../../../types';
 
-const searchQueryLabel = i18n.translate('xpack.lens.indexPattern.filters', {
+const searchQueryLabel = i18n.translate('xpack.lens.indexPattern.searchQuery', {
   defaultMessage: 'Search query',
 });
 
@@ -23,6 +23,16 @@ export interface Filter {
   label?: string;
 }
 
+const defaultSearchQuery: Filter = {
+  input: {
+    query: '*',
+    language: 'kuery',
+  },
+  label: i18n.translate('xpack.lens.indexPattern.searchQuery', {
+    defaultMessage: '* – all records',
+  }),
+};
+
 export interface FiltersIndexPatternColumn extends FieldBasedIndexPatternColumn {
   operationType: 'filters';
   params: {
@@ -32,9 +42,7 @@ export interface FiltersIndexPatternColumn extends FieldBasedIndexPatternColumn
 
 export const filtersOperation: OperationDefinition<FiltersIndexPatternColumn> = {
   type: 'filters',
-  displayName: i18n.translate('xpack.lens.indexPattern.filters', {
-    defaultMessage: 'Filters',
-  }),
+  displayName: searchQueryLabel,
   priority: 3, // Higher than any metric
   getPossibleOperationForField: ({ type }) => {
     if (type === 'document') {
@@ -68,7 +76,7 @@ export const filtersOperation: OperationDefinition<FiltersIndexPatternColumn> =
     type: 'filters',
     schema: 'segment',
     params: {
-      filters: column.params.filters.length > 0 ? column.params.filters : undefined,
+      filters: column.params.filters.length > 0 ? column.params.filters : [defaultSearchQuery],
     },
   }),
   onFieldChange: (oldColumn, indexPattern, field) => {
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters_list.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters_list.tsx
index 550873abf8621..87c1b3d1b3f04 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters_list.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters_list.tsx
@@ -155,7 +155,9 @@ export const FilterPopover = ({
                 ? (tempFilter.input.query as string)
                 : defaultPlaceholderMessage
             }
-            prepend="Label*" // todo: is this tooltip?
+            prepend={i18n.translate('xpack.lens.indexPattern.filters.label', {
+              defaultMessage: 'Label',
+            })}
             aria-label={i18n.translate('xpack.lens.indexPattern.filters.label.aria-message', {
               defaultMessage: 'Label for your filter',
             })}
@@ -213,7 +215,7 @@ export const FiltersList = ({
   return (
     <div>
       <EuiDragDropContext onDragEnd={onDragEnd}>
-        <EuiDroppable droppableId="CUSTOM_HANDLE_DROPPABLE_AREA" spacing="s">
+        <EuiDroppable droppableId="FILTERS_DROPPABLE_AREA" spacing="s">
           {filters?.map((filter: Filter, idx: number) => {
             const { input, label } = filter;
             const id = `${JSON.stringify(input.query)}_${label}`;
@@ -227,7 +229,7 @@ export const FiltersList = ({
               >
                 {(provided) => (
                   <EuiPanel paddingSize="none">
-                    <EuiFlexGroup gutterSize="xs" alignItems="center">
+                    <EuiFlexGroup gutterSize="xs" alignItems="center" responsive={false}>
                       <EuiFlexItem grow={false}>
                         <div {...provided.dragHandleProps} className="lnsLayerPanel__dndGrab">
                           <EuiIcon
@@ -272,7 +274,7 @@ export const FiltersList = ({
                           aria-label={i18n.translate(
                             'xpack.lens.indexPattern.filters.deleteSearchQuery',
                             {
-                              defaultMessage: 'Delete filter',
+                              defaultMessage: 'Delete search query',
                             }
                           )}
                         />

From 66aada5f51e48280e1638387e2938717324bc279 Mon Sep 17 00:00:00 2001
From: Marta Bondyra <marta.bondyra@elastic.co>
Date: Wed, 26 Aug 2020 22:15:47 +0200
Subject: [PATCH 06/32] tests added

---
 .../definitions/filters/filter_popover.tsx    | 139 ++++++++
 .../definitions/filters/filters.test.tsx      | 223 +++++++++++--
 .../definitions/filters/filters.tsx           | 214 ++++++++++--
 .../definitions/filters/filters_list.tsx      | 310 ------------------
 4 files changed, 525 insertions(+), 361 deletions(-)
 create mode 100644 x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx
 delete mode 100644 x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters_list.tsx

diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx
new file mode 100644
index 0000000000000..ee55acdc69930
--- /dev/null
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx
@@ -0,0 +1,139 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { MouseEventHandler, useState, useRef } from 'react';
+import { EuiPopover, EuiFieldText, EuiForm, EuiFormRow, keys } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+import { Filter, emptyFilter, SEARCH_QUERY_LANGUAGE } from '.';
+import { IndexPattern } from '../../../types';
+
+import {
+  QueryStringInput,
+  Query,
+  esKuery,
+  esQuery,
+} from '../../../../../../../../src/plugins/data/public';
+
+const defaultPlaceholderMessage = i18n.translate(
+  'xpack.lens.indexPattern.filters.label.placeholder',
+  {
+    defaultMessage: 'All requests',
+  }
+);
+
+export const FilterPopover = ({
+  filter,
+  setFilter,
+  indexPattern,
+  Button,
+}: {
+  filter: Filter;
+  setFilter: Function;
+  indexPattern: IndexPattern;
+  Button: React.FunctionComponent<{ onClick: MouseEventHandler }>;
+}) => {
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const [tempFilter, setTempFilter] = useState(filter);
+
+  const inputRef = useRef<HTMLInputElement>();
+  const onQueryChange = (input: Query) => setTempFilter({ ...tempFilter, input });
+  const onLabelChange = (label: string) => setTempFilter({ ...tempFilter, label: label.trim() });
+  const onSubmit = (input: Query) => {
+    try {
+      if (input.language === SEARCH_QUERY_LANGUAGE.KUERY) {
+        esKuery.toElasticsearchQuery(esKuery.fromKueryExpression(input.query), indexPattern);
+      } else if (input.language === SEARCH_QUERY_LANGUAGE.LUCENE) {
+        esQuery.luceneStringToDsl(input.query);
+      }
+      if (input.query.length) {
+        if (tempFilter.label) {
+          setFilter(tempFilter);
+          setIsPopoverOpen(false);
+        } else {
+          if (inputRef.current) inputRef.current.focus();
+        }
+      }
+    } catch (e) {
+      console.log('Invalid syntax', JSON.stringify(e, null, 2)); // eslint-disable-line no-console
+    }
+  };
+
+  return (
+    <EuiPopover
+      anchorClassName="lnsLayerPanel__anchor"
+      panelClassName="lnsIndexPatternDimensionEditor__filtersEditor"
+      ownFocus
+      isOpen={isPopoverOpen}
+      closePopover={() => {
+        setIsPopoverOpen(false);
+        setTempFilter(filter);
+      }}
+      button={<Button onClick={() => setIsPopoverOpen((open) => !open)} />}
+    >
+      <EuiForm>
+        <EuiFormRow fullWidth>
+          <QueryStringInput
+            bubbleSubmitEvent={false}
+            indexPatterns={[indexPattern]}
+            query={tempFilter.input}
+            onChange={onQueryChange}
+            onSubmit={onSubmit}
+            placeholder={
+              tempFilter.input.language === SEARCH_QUERY_LANGUAGE.KUERY
+                ? i18n.translate('xpack.lens.indexPattern.filters.queryPlaceholderKql', {
+                    defaultMessage: 'e.g. {example}',
+                    values: { example: 'method : "GET" or status : "404"' },
+                  })
+                : i18n.translate('xpack.lens.indexPattern.filters.queryPlaceholderLucene', {
+                    defaultMessage: 'e.g. {example}',
+                    values: { example: 'method:GET OR status:404' },
+                  })
+            }
+            dataTestSubj="transformQueryInput"
+            languageSwitcherPopoverAnchorPosition="rightDown"
+          />
+        </EuiFormRow>
+        <EuiFormRow fullWidth>
+          <EuiFieldText
+            data-test-subj="indexPattern-filters-label"
+            inputRef={(node) => {
+              if (node) {
+                inputRef.current = node;
+              }
+            }}
+            value={tempFilter.label || ''}
+            onChange={(e) => onLabelChange(e.target.value)}
+            onKeyDown={({ key }: React.KeyboardEvent<HTMLInputElement>) => {
+              if (keys.ENTER === key) {
+                if (tempFilter.input.query.length) {
+                  setFilter(tempFilter);
+                  setIsPopoverOpen(false);
+                  setTempFilter(emptyFilter);
+                }
+              }
+              if (keys.ESCAPE === key) {
+                setIsPopoverOpen(false);
+              }
+            }}
+            fullWidth
+            placeholder={
+              tempFilter.input.query.length
+                ? (tempFilter.input.query as string)
+                : defaultPlaceholderMessage
+            }
+            prepend={i18n.translate('xpack.lens.indexPattern.filters.label', {
+              defaultMessage: 'Label',
+            })}
+            aria-label={i18n.translate('xpack.lens.indexPattern.filters.label.aria-message', {
+              defaultMessage: 'Label for your filter',
+            })}
+          />
+        </EuiFormRow>
+      </EuiForm>
+    </EuiPopover>
+  );
+};
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.test.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.test.tsx
index 92bda2c57f0ca..2b246b7080cff 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.test.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.test.tsx
@@ -5,15 +5,16 @@
  */
 
 import React from 'react';
-import { shallow } from 'enzyme';
-import { EuiRange, EuiSelect } from '@elastic/eui';
+import { mount } from 'enzyme';
+import { act } from 'react-dom/test-utils';
 import { IUiSettingsClient, SavedObjectsClientContract, HttpSetup } from 'kibana/public';
 import { IStorageWrapper } from 'src/plugins/kibana_utils/public';
 import { dataPluginMock } from '../../../../../../../../src/plugins/data/public/mocks';
-import { createMockedIndexPattern } from '../../../mocks';
+import { coreMock } from '../../../../../../../../src/core/public/mocks';
 import { FiltersIndexPatternColumn } from '.';
-import { filtersOperation } from '../../index';
+import { filtersOperation } from '../index';
 import { IndexPatternPrivateState } from '../../../types';
+import { FilterPopover } from './filter_popover';
 
 const defaultProps = {
   storage: {} as IStorageWrapper,
@@ -77,7 +78,8 @@ describe('filters', () => {
     it('should reflect params correctly', () => {
       const esAggsConfig = filtersOperation.toEsAggsConfig(
         state.layers.first.columns.col1 as FiltersIndexPatternColumn,
-        'col1'
+        'col1',
+        state.indexPatterns['1']
       );
       expect(esAggsConfig).toEqual(
         expect.objectContaining({
@@ -107,11 +109,6 @@ describe('filters', () => {
           name: 'test',
           displayName: 'test',
           type: 'document',
-          aggregationRestrictions: {
-            terms: {
-              agg: 'terms',
-            },
-          },
         })
       ).toEqual({
         dataType: 'number',
@@ -120,7 +117,7 @@ describe('filters', () => {
       });
     });
 
-    it('should not return an operation if field type is not document', () => {
+    it('should not return operation if field type is not document', () => {
       expect(
         filtersOperation.getPossibleOperationForField({
           aggregatable: false,
@@ -133,22 +130,196 @@ describe('filters', () => {
     });
   });
 
-  describe('buildColumn', () => {
-    it('should use type from the passed field', () => {
-      const filtersColumn = filtersOperation.buildColumn({
-        layerId: 'first',
-        suggestedPriority: undefined,
-        indexPattern: createMockedIndexPattern(),
-        field: {
-          aggregatable: true,
-          searchable: true,
-          type: 'boolean',
-          displayName: 'test',
-          name: 'test',
-        },
-        columns: {},
+  describe('popover param editor', () => {
+    // @ts-expect-error
+    window['__react-beautiful-dnd-disable-dev-warnings'] = true; // issue with enzyme & react-beautiful-dnd throwing errors: https://github.com/atlassian/react-beautiful-dnd/issues/1593
+    jest.mock('../../../../../../../../src/plugins/data/public', () => ({
+      QueryStringInput: () => {
+        return 'QueryStringInput';
+      },
+    }));
+    describe('Modify search query', () => {
+      it('should correctly show existing filters ', () => {
+        const setStateSpy = jest.fn();
+        const instance = mount(
+          <InlineOptions
+            {...defaultProps}
+            state={state}
+            setState={setStateSpy}
+            columnId="col1"
+            currentColumn={state.layers.first.columns.col1 as FiltersIndexPatternColumn}
+            layerId="first"
+          />
+        );
+        expect(
+          instance
+            .find('[data-test-subj="indexPattern-filters-existingFilterContainer"]')
+            .at(0)
+            .text()
+        ).toEqual('More than one');
+        expect(
+          instance
+            .find('[data-test-subj="indexPattern-filters-existingFilterContainer"]')
+            .at(2)
+            .text()
+        ).toEqual('src : 2');
+      });
+
+      it('should update state when changing a filter', () => {
+        const setStateSpy = jest.fn();
+        const instance = mount(
+          <InlineOptions
+            {...defaultProps}
+            state={state}
+            setState={setStateSpy}
+            columnId="col1"
+            currentColumn={state.layers.first.columns.col1 as FiltersIndexPatternColumn}
+            layerId="first"
+          />
+        );
+
+        act(() => {
+          instance.find(FilterPopover).first().prop('setFilter')!({
+            input: {
+              query: 'dest : 5',
+              language: 'lucene',
+            },
+            label: 'Dest5',
+          });
+        });
+        expect(setStateSpy).toHaveBeenCalledWith({
+          ...state,
+          layers: {
+            first: {
+              ...state.layers.first,
+              columns: {
+                ...state.layers.first.columns,
+                col1: {
+                  ...state.layers.first.columns.col1,
+                  params: {
+                    filters: [
+                      {
+                        input: {
+                          query: 'dest : 5',
+                          language: 'lucene',
+                        },
+                        label: 'Dest5',
+                      },
+                      {
+                        input: {
+                          language: 'kuery',
+                          query: 'src : 2',
+                        },
+                        label: '',
+                      },
+                    ],
+                  },
+                },
+              },
+            },
+          },
+        });
+      });
+
+      it('should add label to duplicated filter', () => {
+        const setStateSpy = jest.fn();
+        const instance = mount(
+          <InlineOptions
+            {...defaultProps}
+            state={state}
+            setState={setStateSpy}
+            columnId="col1"
+            currentColumn={state.layers.first.columns.col1 as FiltersIndexPatternColumn}
+            layerId="first"
+          />
+        );
+
+        act(() => {
+          instance.find(FilterPopover).first().prop('setFilter')!({
+            input: {
+              language: 'kuery',
+              query: 'src : 2',
+            },
+            label: '',
+          });
+        });
+        expect(setStateSpy).toHaveBeenCalledWith({
+          ...state,
+          layers: {
+            first: {
+              ...state.layers.first,
+              columns: {
+                ...state.layers.first.columns,
+                col1: {
+                  ...state.layers.first.columns.col1,
+                  params: {
+                    filters: [
+                      {
+                        input: {
+                          language: 'kuery',
+                          query: 'src : 2',
+                        },
+                        label: 'src : 2 [1]',
+                      },
+                      {
+                        input: {
+                          language: 'kuery',
+                          query: 'src : 2',
+                        },
+                        label: '',
+                      },
+                    ],
+                  },
+                },
+              },
+            },
+          },
+        });
+      });
+
+      it('should remove search query', () => {
+        const setStateSpy = jest.fn();
+        const instance = mount(
+          <InlineOptions
+            {...defaultProps}
+            state={state}
+            setState={setStateSpy}
+            columnId="col1"
+            currentColumn={state.layers.first.columns.col1 as FiltersIndexPatternColumn}
+            layerId="first"
+          />
+        );
+
+        instance
+          .find('[data-test-subj="indexPattern-filters-existingFilterDelete"]')
+          .at(2)
+          .simulate('click');
+        expect(setStateSpy).toHaveBeenCalledWith({
+          ...state,
+          layers: {
+            first: {
+              ...state.layers.first,
+              columns: {
+                ...state.layers.first.columns,
+                col1: {
+                  ...state.layers.first.columns.col1,
+                  params: {
+                    filters: [
+                      {
+                        input: {
+                          language: 'kuery',
+                          query: 'bytes >= 1',
+                        },
+                        label: 'More than one',
+                      },
+                    ],
+                  },
+                },
+              },
+            },
+          },
+        });
       });
-      expect(filtersColumn.dataType).toEqual('boolean');
     });
   });
 });
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx
index ea261f0ed0876..2c177a440ad97 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx
@@ -4,35 +4,85 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { MouseEventHandler } from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiForm, EuiFormRow } from '@elastic/eui';
 import { Query } from 'src/plugins/data/public';
+import {
+  EuiDragDropContext,
+  EuiDraggable,
+  EuiDroppable,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiPanel,
+  euiDragDropReorder,
+  EuiButtonIcon,
+  EuiLink,
+  EuiText,
+  EuiButtonEmpty,
+  EuiForm,
+  EuiFormRow,
+} from '@elastic/eui';
 import { updateColumnParam } from '../../../state_helpers';
 import { OperationDefinition } from '../index';
 import { FieldBasedIndexPatternColumn } from '../column_types';
-import { FiltersList } from './filters_list';
+import { FilterPopover } from './filter_popover';
 import { DataType } from '../../../../types';
 
-const searchQueryLabel = i18n.translate('xpack.lens.indexPattern.searchQuery', {
-  defaultMessage: 'Search query',
-});
+export enum SEARCH_QUERY_LANGUAGE {
+  KUERY = 'kuery',
+  LUCENE = 'lucene',
+}
 
 export interface Filter {
   input: Query;
   label?: string;
 }
 
+export const emptyFilter: Filter = {
+  input: {
+    query: '',
+    language: SEARCH_QUERY_LANGUAGE.KUERY,
+  },
+  label: '',
+};
+
+const searchQueryLabel = i18n.translate('xpack.lens.indexPattern.searchQuery', {
+  defaultMessage: 'Search query',
+});
+
 const defaultSearchQuery: Filter = {
   input: {
     query: '*',
     language: 'kuery',
   },
-  label: i18n.translate('xpack.lens.indexPattern.searchQuery', {
-    defaultMessage: '* – all records',
+  label: i18n.translate('xpack.lens.indexPattern.searchQueryDefault', {
+    defaultMessage: 'All records',
   }),
 };
 
+const countDuplicates = (filterArr: Filter[], filter: Filter) =>
+  filterArr.filter(
+    (f) =>
+      JSON.stringify(f.input.query.trim()) === JSON.stringify(filter.input.query.trim()) &&
+      f.label === filter.label
+  ).length;
+
+const makeUniqueLabel = (filterArr: Filter[], filter: Filter) => {
+  let label = '';
+  let count = 0;
+  do {
+    count++;
+    label = `${filter.input.query} [${count}]`;
+  } while (filterArr.find((f) => f.label === label));
+  return label;
+};
+
+interface DraggableLocation {
+  droppableId: string;
+  index: number;
+}
+
 export interface FiltersIndexPatternColumn extends FieldBasedIndexPatternColumn {
   operationType: 'filters';
   params: {
@@ -53,7 +103,7 @@ export const filtersOperation: OperationDefinition<FiltersIndexPatternColumn> =
       };
     }
   },
-  isTransferable: () => true,
+  isTransferable: () => false,
 
   buildColumn({ suggestedPriority, field }) {
     return {
@@ -87,7 +137,33 @@ export const filtersOperation: OperationDefinition<FiltersIndexPatternColumn> =
     };
   },
   paramEditor: ({ state, setState, currentColumn, layerId }) => {
-    const layerIndexPattern = state.indexPatterns[state.layers[layerId].indexPatternId];
+    const indexPattern = state.indexPatterns[state.layers[layerId].indexPatternId];
+
+    const filters = currentColumn.params.filters;
+
+    const onDragEnd = ({
+      source,
+      destination,
+    }: {
+      source?: DraggableLocation;
+      destination?: DraggableLocation;
+    }) => {
+      if (source && destination) {
+        const items = euiDragDropReorder(filters, source.index, destination.index);
+        setFilters(items);
+      }
+    };
+
+    const setFilters = (newFilters: Filter[]) =>
+      setState(
+        updateColumnParam({
+          state,
+          layerId,
+          currentColumn,
+          paramName: 'filters',
+          value: newFilters,
+        })
+      );
 
     return (
       <EuiForm>
@@ -96,21 +172,109 @@ export const filtersOperation: OperationDefinition<FiltersIndexPatternColumn> =
             defaultMessage: 'Queries',
           })}
         >
-          <FiltersList
-            indexPattern={layerIndexPattern}
-            filters={currentColumn.params.filters}
-            setFilters={(filters: Filter[]) =>
-              setState(
-                updateColumnParam({
-                  state,
-                  layerId,
-                  currentColumn,
-                  paramName: 'filters',
-                  value: filters,
-                })
-              )
-            }
-          />
+          <div>
+            <EuiDragDropContext onDragEnd={onDragEnd}>
+              <EuiDroppable droppableId="FILTERS_DROPPABLE_AREA" spacing="s">
+                {filters?.map((filter: Filter, idx: number) => {
+                  const { input, label } = filter;
+                  const id = `${JSON.stringify(input.query)}_${label}`;
+                  return (
+                    <EuiDraggable
+                      spacing="m"
+                      key={id}
+                      index={idx}
+                      draggableId={id}
+                      customDragHandle={true}
+                    >
+                      {(provided) => (
+                        <EuiPanel paddingSize="none">
+                          <EuiFlexGroup gutterSize="xs" alignItems="center" responsive={false}>
+                            <EuiFlexItem grow={false}>
+                              <div {...provided.dragHandleProps} className="lnsLayerPanel__dndGrab">
+                                <EuiIcon
+                                  type="grab"
+                                  aria-label={i18n.translate(
+                                    'xpack.lens.indexPattern.filters.grabIcon',
+                                    {
+                                      defaultMessage: 'Grab icon',
+                                    }
+                                  )}
+                                />
+                              </div>
+                            </EuiFlexItem>
+                            <EuiFlexItem
+                              grow={true}
+                              data-test-subj="indexPattern-filters-existingFilterContainer"
+                            >
+                              <FilterPopover
+                                indexPattern={indexPattern}
+                                filter={filter}
+                                Button={({ onClick }: { onClick: MouseEventHandler }) => (
+                                  <EuiLink
+                                    color="text"
+                                    onClick={onClick}
+                                    className="lnsLayerPanel__filterLink"
+                                    data-test-subj="indexPattern-filters-existingFilterTrigger"
+                                  >
+                                    <EuiText size="s" textAlign="left">
+                                      {label ? label : input.query}
+                                    </EuiText>
+                                  </EuiLink>
+                                )}
+                                setFilter={(newFilter: Filter) => {
+                                  if (countDuplicates(filters, newFilter) > 0) {
+                                    newFilter.label = makeUniqueLabel(filters, newFilter);
+                                  }
+                                  setFilters(
+                                    filters.map((f: Filter) => (f === filter ? newFilter : f))
+                                  );
+                                }}
+                              />
+                            </EuiFlexItem>
+                            <EuiFlexItem grow={false}>
+                              <EuiButtonIcon
+                                size="m"
+                                iconType="cross"
+                                color="danger"
+                                data-test-subj="indexPattern-filters-existingFilterDelete"
+                                onClick={() => {
+                                  setFilters(filters.filter((f: Filter) => f !== filter));
+                                }}
+                                aria-label={i18n.translate(
+                                  'xpack.lens.indexPattern.filters.deleteSearchQuery',
+                                  {
+                                    defaultMessage: 'Delete search query',
+                                  }
+                                )}
+                              />
+                            </EuiFlexItem>
+                          </EuiFlexGroup>
+                        </EuiPanel>
+                      )}
+                    </EuiDraggable>
+                  );
+                })}
+              </EuiDroppable>
+            </EuiDragDropContext>
+
+            <FilterPopover
+              indexPattern={indexPattern}
+              filter={emptyFilter}
+              Button={({ onClick }: { onClick: MouseEventHandler }) => (
+                <EuiButtonEmpty iconType="plusInCircle" onClick={onClick}>
+                  {i18n.translate('xpack.lens.indexPattern.filters.addSearchQuery', {
+                    defaultMessage: 'Add a search query',
+                  })}
+                </EuiButtonEmpty>
+              )}
+              setFilter={(newFilter: Filter) => {
+                if (countDuplicates(filters, newFilter) > 0) {
+                  newFilter.label = makeUniqueLabel(filters, newFilter);
+                }
+                setFilters(filters.concat(newFilter));
+              }}
+            />
+          </div>
         </EuiFormRow>
       </EuiForm>
     );
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters_list.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters_list.tsx
deleted file mode 100644
index 87c1b3d1b3f04..0000000000000
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters_list.tsx
+++ /dev/null
@@ -1,310 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import React, { MouseEventHandler, useState, useRef } from 'react';
-import {
-  EuiDragDropContext,
-  EuiDraggable,
-  EuiDroppable,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiIcon,
-  EuiPanel,
-  euiDragDropReorder,
-  EuiButtonIcon,
-  EuiLink,
-  EuiText,
-  EuiButtonEmpty,
-  EuiPopover,
-  EuiFieldText,
-  EuiForm,
-  EuiFormRow,
-  keys,
-} from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
-import { Filter } from '.';
-
-import { IndexPattern } from '../../../types';
-
-import {
-  QueryStringInput,
-  Query,
-  esKuery,
-  esQuery,
-} from '../../../../../../../../src/plugins/data/public';
-
-export enum SEARCH_QUERY_LANGUAGE {
-  KUERY = 'kuery',
-  LUCENE = 'lucene',
-}
-
-const emptyFilter: Filter = {
-  input: {
-    query: '',
-    language: SEARCH_QUERY_LANGUAGE.KUERY,
-  },
-  label: '',
-};
-
-const defaultPlaceholderMessage = i18n.translate(
-  'xpack.lens.indexPattern.filters.label.placeholder',
-  {
-    defaultMessage: 'All requests',
-  }
-);
-
-export const FilterPopover = ({
-  filter,
-  setFilter,
-  indexPattern,
-  Button,
-}: {
-  filter: Filter;
-  setFilter: Function;
-  indexPattern: IndexPattern;
-  Button: React.FunctionComponent<{ onClick: MouseEventHandler }>;
-}) => {
-  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-  const [tempFilter, setTempFilter] = useState(filter);
-
-  const inputRef = useRef<HTMLInputElement>();
-  const onQueryChange = (input: Query) => setTempFilter({ ...tempFilter, input });
-  const onLabelChange = (label: string) => setTempFilter({ ...tempFilter, label: label.trim() });
-  const onSubmit = (input: Query) => {
-    try {
-      if (input.language === SEARCH_QUERY_LANGUAGE.KUERY) {
-        esKuery.toElasticsearchQuery(esKuery.fromKueryExpression(input.query), indexPattern);
-      } else if (input.language === SEARCH_QUERY_LANGUAGE.LUCENE) {
-        esQuery.luceneStringToDsl(input.query);
-      }
-      if (input.query.length) {
-        if (tempFilter.label) {
-          setFilter(tempFilter);
-          setIsPopoverOpen(false);
-        } else {
-          if (inputRef.current) inputRef.current.focus();
-        }
-      }
-    } catch (e) {
-      console.log('Invalid syntax', JSON.stringify(e, null, 2)); // eslint-disable-line no-console
-    }
-  };
-
-  return (
-    <EuiPopover
-      anchorClassName="lnsLayerPanel__anchor"
-      panelClassName="lnsIndexPatternDimensionEditor__filtersEditor"
-      ownFocus
-      isOpen={isPopoverOpen}
-      closePopover={() => {
-        setIsPopoverOpen(false);
-        setTempFilter(filter);
-      }}
-      button={<Button onClick={() => setIsPopoverOpen((open) => !open)} />}
-    >
-      <EuiForm>
-        <EuiFormRow fullWidth>
-          <QueryStringInput
-            bubbleSubmitEvent={true}
-            indexPatterns={[indexPattern]}
-            query={tempFilter.input}
-            onChange={onQueryChange}
-            onSubmit={onSubmit}
-            placeholder={
-              tempFilter.input.language === SEARCH_QUERY_LANGUAGE.KUERY
-                ? i18n.translate('xpack.lens.indexPattern.filters.queryPlaceholderKql', {
-                    defaultMessage: 'e.g. {example}',
-                    values: { example: 'method : "GET" or status : "404"' },
-                  })
-                : i18n.translate('xpack.lens.indexPattern.filters.queryPlaceholderLucene', {
-                    defaultMessage: 'e.g. {example}',
-                    values: { example: 'method:GET OR status:404' },
-                  })
-            }
-            dataTestSubj="transformQueryInput"
-            languageSwitcherPopoverAnchorPosition="rightDown"
-          />
-        </EuiFormRow>
-        <EuiFormRow fullWidth>
-          <EuiFieldText
-            inputRef={(node) => {
-              if (node) {
-                inputRef.current = node;
-              }
-            }}
-            value={tempFilter.label || ''}
-            onChange={(e) => onLabelChange(e.target.value)}
-            onKeyDown={({ key }: React.KeyboardEvent<HTMLInputElement>) => {
-              if (keys.ENTER === key) {
-                if (tempFilter.input.query.length) {
-                  setFilter(tempFilter);
-                  setIsPopoverOpen(false);
-                  setTempFilter(emptyFilter);
-                }
-              }
-              if (keys.ESCAPE === key) {
-                setIsPopoverOpen(false);
-              }
-            }}
-            fullWidth
-            placeholder={
-              tempFilter.input.query.length
-                ? (tempFilter.input.query as string)
-                : defaultPlaceholderMessage
-            }
-            prepend={i18n.translate('xpack.lens.indexPattern.filters.label', {
-              defaultMessage: 'Label',
-            })}
-            aria-label={i18n.translate('xpack.lens.indexPattern.filters.label.aria-message', {
-              defaultMessage: 'Label for your filter',
-            })}
-          />
-        </EuiFormRow>
-      </EuiForm>
-    </EuiPopover>
-  );
-};
-
-const countDuplicates = (filterArr: Filter[], filter: Filter) =>
-  filterArr.filter(
-    (f) =>
-      JSON.stringify(f.input.query.trim()) === JSON.stringify(filter.input.query.trim()) &&
-      f.label === filter.label
-  ).length;
-
-const makeUniqueLabel = (filterArr: Filter[], filter: Filter) => {
-  let label = '';
-  let count = 0;
-  do {
-    count++;
-    label = `${filter.input.query} [${count}]`;
-  } while (filterArr.find((f) => f.label === label));
-  return label;
-};
-
-interface DraggableLocation {
-  droppableId: string;
-  index: number;
-}
-
-export const FiltersList = ({
-  filters,
-  setFilters,
-  indexPattern,
-}: {
-  filters: Filter[];
-  setFilters: Function;
-  indexPattern: IndexPattern;
-}) => {
-  const onDragEnd = ({
-    source,
-    destination,
-  }: {
-    source?: DraggableLocation;
-    destination?: DraggableLocation;
-  }) => {
-    if (source && destination) {
-      const items = euiDragDropReorder(filters, source.index, destination.index);
-      setFilters(items);
-    }
-  };
-
-  return (
-    <div>
-      <EuiDragDropContext onDragEnd={onDragEnd}>
-        <EuiDroppable droppableId="FILTERS_DROPPABLE_AREA" spacing="s">
-          {filters?.map((filter: Filter, idx: number) => {
-            const { input, label } = filter;
-            const id = `${JSON.stringify(input.query)}_${label}`;
-            return (
-              <EuiDraggable
-                spacing="m"
-                key={id}
-                index={idx}
-                draggableId={id}
-                customDragHandle={true}
-              >
-                {(provided) => (
-                  <EuiPanel paddingSize="none">
-                    <EuiFlexGroup gutterSize="xs" alignItems="center" responsive={false}>
-                      <EuiFlexItem grow={false}>
-                        <div {...provided.dragHandleProps} className="lnsLayerPanel__dndGrab">
-                          <EuiIcon
-                            type="grab"
-                            aria-label={i18n.translate('xpack.lens.indexPattern.filters.grabIcon', {
-                              defaultMessage: 'Grab icon',
-                            })}
-                          />
-                        </div>
-                      </EuiFlexItem>
-                      <EuiFlexItem grow={true}>
-                        <FilterPopover
-                          indexPattern={indexPattern}
-                          filter={filter}
-                          Button={({ onClick }: { onClick: MouseEventHandler }) => (
-                            <EuiLink
-                              color="text"
-                              onClick={onClick}
-                              className="lnsLayerPanel__filterLink"
-                            >
-                              <EuiText size="s" textAlign="left">
-                                {label ? label : input.query}
-                              </EuiText>
-                            </EuiLink>
-                          )}
-                          setFilter={(newFilter: Filter) => {
-                            if (countDuplicates(filters, newFilter) > 1) {
-                              newFilter.label = makeUniqueLabel(filters, newFilter);
-                            }
-                            setFilters(filters.map((f: Filter) => (f === filter ? newFilter : f)));
-                          }}
-                        />
-                      </EuiFlexItem>
-                      <EuiFlexItem grow={false}>
-                        <EuiButtonIcon
-                          size="m"
-                          iconType="cross"
-                          color="danger"
-                          onClick={() => {
-                            setFilters(filters.filter((f: Filter) => f !== filter));
-                          }}
-                          aria-label={i18n.translate(
-                            'xpack.lens.indexPattern.filters.deleteSearchQuery',
-                            {
-                              defaultMessage: 'Delete search query',
-                            }
-                          )}
-                        />
-                      </EuiFlexItem>
-                    </EuiFlexGroup>
-                  </EuiPanel>
-                )}
-              </EuiDraggable>
-            );
-          })}
-        </EuiDroppable>
-      </EuiDragDropContext>
-
-      <FilterPopover
-        indexPattern={indexPattern}
-        filter={emptyFilter}
-        Button={({ onClick }: { onClick: MouseEventHandler }) => (
-          <EuiButtonEmpty iconType="plusInCircle" onClick={onClick}>
-            {i18n.translate('xpack.lens.indexPattern.filters.addSearchQuery', {
-              defaultMessage: 'Add a search query',
-            })}
-          </EuiButtonEmpty>
-        )}
-        setFilter={(newFilter: Filter) => {
-          if (countDuplicates(filters, newFilter) > 0) {
-            newFilter.label = makeUniqueLabel(filters, newFilter);
-          }
-          setFilters(filters.concat(newFilter));
-        }}
-      />
-    </div>
-  );
-};

From 030b5f7e0b2384706749b5889db09f728ef563f1 Mon Sep 17 00:00:00 2001
From: Marta Bondyra <marta.bondyra@elastic.co>
Date: Wed, 26 Aug 2020 22:40:32 +0200
Subject: [PATCH 07/32] types

---
 .../operations/definitions/filters/filters.test.tsx              | 1 -
 1 file changed, 1 deletion(-)

diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.test.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.test.tsx
index 2b246b7080cff..0784d186faa3e 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.test.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.test.tsx
@@ -10,7 +10,6 @@ import { act } from 'react-dom/test-utils';
 import { IUiSettingsClient, SavedObjectsClientContract, HttpSetup } from 'kibana/public';
 import { IStorageWrapper } from 'src/plugins/kibana_utils/public';
 import { dataPluginMock } from '../../../../../../../../src/plugins/data/public/mocks';
-import { coreMock } from '../../../../../../../../src/core/public/mocks';
 import { FiltersIndexPatternColumn } from '.';
 import { filtersOperation } from '../index';
 import { IndexPatternPrivateState } from '../../../types';

From f21b11f8bb45053181d60986bace4fba264efb63 Mon Sep 17 00:00:00 2001
From: Marta Bondyra <marta.bondyra@elastic.co>
Date: Thu, 27 Aug 2020 16:01:44 +0200
Subject: [PATCH 08/32] some of easier feedback addressed

---
 .../operations/definitions/filters/filter_popover.tsx |  6 +++---
 .../operations/definitions/filters/filters.tsx        | 11 ++---------
 .../operations/definitions/index.ts                   |  2 +-
 3 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx
index ee55acdc69930..32140abd8041a 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx
@@ -21,7 +21,7 @@ import {
 const defaultPlaceholderMessage = i18n.translate(
   'xpack.lens.indexPattern.filters.label.placeholder',
   {
-    defaultMessage: 'All requests',
+    defaultMessage: 'All records',
   }
 );
 
@@ -85,11 +85,11 @@ export const FilterPopover = ({
             placeholder={
               tempFilter.input.language === SEARCH_QUERY_LANGUAGE.KUERY
                 ? i18n.translate('xpack.lens.indexPattern.filters.queryPlaceholderKql', {
-                    defaultMessage: 'e.g. {example}',
+                    defaultMessage: 'Example: {example}',
                     values: { example: 'method : "GET" or status : "404"' },
                   })
                 : i18n.translate('xpack.lens.indexPattern.filters.queryPlaceholderLucene', {
-                    defaultMessage: 'e.g. {example}',
+                    defaultMessage: 'Example: {example}',
                     values: { example: 'method:GET OR status:404' },
                   })
             }
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx
index 2c177a440ad97..7a263ad165c95 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx
@@ -97,14 +97,13 @@ export const filtersOperation: OperationDefinition<FiltersIndexPatternColumn> =
   getPossibleOperationForField: ({ type }) => {
     if (type === 'document') {
       return {
-        dataType: 'number',
+        dataType: 'string',
         isBucketed: true,
         scale: 'ordinal',
       };
     }
   },
   isTransferable: () => false,
-
   buildColumn({ suggestedPriority, field }) {
     return {
       label: searchQueryLabel,
@@ -129,13 +128,7 @@ export const filtersOperation: OperationDefinition<FiltersIndexPatternColumn> =
       filters: column.params.filters.length > 0 ? column.params.filters : [defaultSearchQuery],
     },
   }),
-  onFieldChange: (oldColumn, indexPattern, field) => {
-    return {
-      ...oldColumn,
-      label: field.displayName,
-      sourceField: field.name,
-    };
-  },
+
   paramEditor: ({ state, setState, currentColumn, layerId }) => {
     const indexPattern = state.indexPatterns[state.layers[layerId].indexPatternId];
 
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/index.ts b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/index.ts
index 1dcce04a21948..ef5f570562211 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/index.ts
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/index.ts
@@ -141,7 +141,7 @@ interface FieldBasedOperationDefinition<C extends BaseIndexPatternColumn>
    * @param indexPattern The index pattern that field is on.
    * @param field The field that the user changed to.
    */
-  onFieldChange: (oldColumn: C, indexPattern: IndexPattern, field: IndexPatternField) => C;
+  onFieldChange?: (oldColumn: C, indexPattern: IndexPattern, field: IndexPatternField) => C;
 }
 
 /**

From 0c85af1ddbe36b1f8db87487915a9ad0e9ae2f87 Mon Sep 17 00:00:00 2001
From: Marta Bondyra <marta.bondyra@elastic.co>
Date: Wed, 2 Sep 2020 10:46:09 +0200
Subject: [PATCH 09/32] change of the popovers behavior

---
 .../config_panel/_layer_panel.scss            |   2 +-
 .../definitions/filters/filter_popover.tsx    |  27 +-
 .../definitions/filters/filters.tsx           | 246 +++++++++---------
 3 files changed, 149 insertions(+), 126 deletions(-)

diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_layer_panel.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_layer_panel.scss
index 78b3153056ce6..055245e2c7beb 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_layer_panel.scss
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_layer_panel.scss
@@ -37,7 +37,6 @@
 
 .lnsLayerPanel__anchor {
   width: 100%;
-  padding: $euiSizeS;
 }
 
 .lnsLayerPanel__dndGrab {
@@ -45,6 +44,7 @@
 }
 
 .lnsLayerPanel__filterLink {
+  min-height: $euiSizeM;
   width: 100%;
   align-self: flex-start;
   word-break: break-word;
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx
index 32140abd8041a..2d566e1a5650b 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx
@@ -30,13 +30,21 @@ export const FilterPopover = ({
   setFilter,
   indexPattern,
   Button,
+  isLastOpen,
+  setIsLastOpen,
 }: {
   filter: Filter;
   setFilter: Function;
   indexPattern: IndexPattern;
   Button: React.FunctionComponent<{ onClick: MouseEventHandler }>;
+  isLastOpen: boolean;
+  setIsLastOpen: Function;
 }) => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const setPopoverOpen = (isOpen: boolean) => {
+    setIsPopoverOpen(isOpen);
+    setIsLastOpen(isOpen);
+  };
   const [tempFilter, setTempFilter] = useState(filter);
 
   const inputRef = useRef<HTMLInputElement>();
@@ -52,7 +60,7 @@ export const FilterPopover = ({
       if (input.query.length) {
         if (tempFilter.label) {
           setFilter(tempFilter);
-          setIsPopoverOpen(false);
+          setPopoverOpen(false);
         } else {
           if (inputRef.current) inputRef.current.focus();
         }
@@ -67,12 +75,19 @@ export const FilterPopover = ({
       anchorClassName="lnsLayerPanel__anchor"
       panelClassName="lnsIndexPatternDimensionEditor__filtersEditor"
       ownFocus
-      isOpen={isPopoverOpen}
+      isOpen={isLastOpen || isPopoverOpen}
       closePopover={() => {
-        setIsPopoverOpen(false);
+        setPopoverOpen(false);
         setTempFilter(filter);
       }}
-      button={<Button onClick={() => setIsPopoverOpen((open) => !open)} />}
+      button={
+        <Button
+          onClick={() => {
+            setIsPopoverOpen((open) => !open);
+            setIsLastOpen(false);
+          }}
+        />
+      }
     >
       <EuiForm>
         <EuiFormRow fullWidth>
@@ -111,12 +126,12 @@ export const FilterPopover = ({
               if (keys.ENTER === key) {
                 if (tempFilter.input.query.length) {
                   setFilter(tempFilter);
-                  setIsPopoverOpen(false);
+                  setPopoverOpen(false);
                   setTempFilter(emptyFilter);
                 }
               }
               if (keys.ESCAPE === key) {
-                setIsPopoverOpen(false);
+                setPopoverOpen(false);
               }
             }}
             fullWidth
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx
index 7a263ad165c95..ea1f66062bb33 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { MouseEventHandler } from 'react';
+import React, { MouseEventHandler, useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import { Query } from 'src/plugins/data/public';
 import {
@@ -131,22 +131,7 @@ export const filtersOperation: OperationDefinition<FiltersIndexPatternColumn> =
 
   paramEditor: ({ state, setState, currentColumn, layerId }) => {
     const indexPattern = state.indexPatterns[state.layers[layerId].indexPatternId];
-
     const filters = currentColumn.params.filters;
-
-    const onDragEnd = ({
-      source,
-      destination,
-    }: {
-      source?: DraggableLocation;
-      destination?: DraggableLocation;
-    }) => {
-      if (source && destination) {
-        const items = euiDragDropReorder(filters, source.index, destination.index);
-        setFilters(items);
-      }
-    };
-
     const setFilters = (newFilters: Filter[]) =>
       setState(
         updateColumnParam({
@@ -165,111 +150,134 @@ export const filtersOperation: OperationDefinition<FiltersIndexPatternColumn> =
             defaultMessage: 'Queries',
           })}
         >
-          <div>
-            <EuiDragDropContext onDragEnd={onDragEnd}>
-              <EuiDroppable droppableId="FILTERS_DROPPABLE_AREA" spacing="s">
-                {filters?.map((filter: Filter, idx: number) => {
-                  const { input, label } = filter;
-                  const id = `${JSON.stringify(input.query)}_${label}`;
-                  return (
-                    <EuiDraggable
-                      spacing="m"
-                      key={id}
-                      index={idx}
-                      draggableId={id}
-                      customDragHandle={true}
-                    >
-                      {(provided) => (
-                        <EuiPanel paddingSize="none">
-                          <EuiFlexGroup gutterSize="xs" alignItems="center" responsive={false}>
-                            <EuiFlexItem grow={false}>
-                              <div {...provided.dragHandleProps} className="lnsLayerPanel__dndGrab">
-                                <EuiIcon
-                                  type="grab"
-                                  aria-label={i18n.translate(
-                                    'xpack.lens.indexPattern.filters.grabIcon',
-                                    {
-                                      defaultMessage: 'Grab icon',
-                                    }
-                                  )}
-                                />
-                              </div>
-                            </EuiFlexItem>
-                            <EuiFlexItem
-                              grow={true}
-                              data-test-subj="indexPattern-filters-existingFilterContainer"
-                            >
-                              <FilterPopover
-                                indexPattern={indexPattern}
-                                filter={filter}
-                                Button={({ onClick }: { onClick: MouseEventHandler }) => (
-                                  <EuiLink
-                                    color="text"
-                                    onClick={onClick}
-                                    className="lnsLayerPanel__filterLink"
-                                    data-test-subj="indexPattern-filters-existingFilterTrigger"
-                                  >
-                                    <EuiText size="s" textAlign="left">
-                                      {label ? label : input.query}
-                                    </EuiText>
-                                  </EuiLink>
-                                )}
-                                setFilter={(newFilter: Filter) => {
-                                  if (countDuplicates(filters, newFilter) > 0) {
-                                    newFilter.label = makeUniqueLabel(filters, newFilter);
-                                  }
-                                  setFilters(
-                                    filters.map((f: Filter) => (f === filter ? newFilter : f))
-                                  );
-                                }}
-                              />
-                            </EuiFlexItem>
-                            <EuiFlexItem grow={false}>
-                              <EuiButtonIcon
-                                size="m"
-                                iconType="cross"
-                                color="danger"
-                                data-test-subj="indexPattern-filters-existingFilterDelete"
-                                onClick={() => {
-                                  setFilters(filters.filter((f: Filter) => f !== filter));
-                                }}
-                                aria-label={i18n.translate(
-                                  'xpack.lens.indexPattern.filters.deleteSearchQuery',
-                                  {
-                                    defaultMessage: 'Delete search query',
-                                  }
-                                )}
-                              />
-                            </EuiFlexItem>
-                          </EuiFlexGroup>
-                        </EuiPanel>
-                      )}
-                    </EuiDraggable>
-                  );
-                })}
-              </EuiDroppable>
-            </EuiDragDropContext>
-
-            <FilterPopover
-              indexPattern={indexPattern}
-              filter={emptyFilter}
-              Button={({ onClick }: { onClick: MouseEventHandler }) => (
-                <EuiButtonEmpty iconType="plusInCircle" onClick={onClick}>
-                  {i18n.translate('xpack.lens.indexPattern.filters.addSearchQuery', {
-                    defaultMessage: 'Add a search query',
-                  })}
-                </EuiButtonEmpty>
-              )}
-              setFilter={(newFilter: Filter) => {
-                if (countDuplicates(filters, newFilter) > 0) {
-                  newFilter.label = makeUniqueLabel(filters, newFilter);
-                }
-                setFilters(filters.concat(newFilter));
-              }}
-            />
-          </div>
+          <FilterList filters={filters} setFilters={setFilters} indexPattern={indexPattern} />
         </EuiFormRow>
       </EuiForm>
     );
   },
 };
+
+const FilterList = ({
+  filters,
+  setFilters,
+  indexPattern,
+}: {
+  filters: Filter[];
+  setFilters: Function;
+  indexPattern: IndexPattern;
+}) => {
+  const [isLastOpen, setIsLastOpen] = useState(false);
+
+  const onDragEnd = ({
+    source,
+    destination,
+  }: {
+    source?: DraggableLocation;
+    destination?: DraggableLocation;
+  }) => {
+    if (source && destination) {
+      const items = euiDragDropReorder(filters, source.index, destination.index);
+      setFilters(items);
+    }
+  };
+  return (
+    <div>
+      <EuiDragDropContext onDragEnd={onDragEnd}>
+        <EuiDroppable droppableId="FILTERS_DROPPABLE_AREA" spacing="s">
+          {filters?.map((filter: Filter, idx: number) => {
+            const { input, label } = filter;
+            const id = `${JSON.stringify(input.query)}_${label}`;
+            return (
+              <EuiDraggable
+                spacing="m"
+                key={id}
+                index={idx}
+                draggableId={id}
+                customDragHandle={true}
+              >
+                {(provided) => (
+                  <EuiPanel paddingSize="none">
+                    <EuiFlexGroup gutterSize="xs" alignItems="center" responsive={false}>
+                      <EuiFlexItem grow={false}>
+                        <div {...provided.dragHandleProps} className="lnsLayerPanel__dndGrab">
+                          <EuiIcon
+                            type="grab"
+                            aria-label={i18n.translate('xpack.lens.indexPattern.filters.grabIcon', {
+                              defaultMessage: 'Grab icon',
+                            })}
+                          />
+                        </div>
+                      </EuiFlexItem>
+                      <EuiFlexItem
+                        grow={true}
+                        data-test-subj="indexPattern-filters-existingFilterContainer"
+                      >
+                        <FilterPopover
+                          isLastOpen={idx === filters.length - 1 && isLastOpen}
+                          setIsLastOpen={setIsLastOpen}
+                          indexPattern={indexPattern}
+                          filter={filter}
+                          Button={({ onClick }: { onClick: MouseEventHandler }) => (
+                            <EuiLink
+                              color="text"
+                              onClick={onClick}
+                              className="lnsLayerPanel__filterLink"
+                              data-test-subj="indexPattern-filters-existingFilterTrigger"
+                            >
+                              <EuiText size="s" textAlign="left">
+                                {label ? label : input.query}
+                              </EuiText>
+                            </EuiLink>
+                          )}
+                          setFilter={(newFilter: Filter) => {
+                            if (countDuplicates(filters, newFilter) > 0) {
+                              newFilter.label = makeUniqueLabel(filters, newFilter);
+                            }
+                            setFilters(filters.map((f: Filter) => (f === filter ? newFilter : f)));
+                          }}
+                        />
+                      </EuiFlexItem>
+                      <EuiFlexItem grow={false}>
+                        <EuiButtonIcon
+                          size="m"
+                          iconType="cross"
+                          color="danger"
+                          data-test-subj="indexPattern-filters-existingFilterDelete"
+                          onClick={() => {
+                            setFilters(filters.filter((f: Filter) => f !== filter));
+                          }}
+                          aria-label={i18n.translate(
+                            'xpack.lens.indexPattern.filters.deleteSearchQuery',
+                            {
+                              defaultMessage: 'Delete search query',
+                            }
+                          )}
+                        />
+                      </EuiFlexItem>
+                    </EuiFlexGroup>
+                  </EuiPanel>
+                )}
+              </EuiDraggable>
+            );
+          })}
+        </EuiDroppable>
+      </EuiDragDropContext>
+
+      <EuiButtonEmpty
+        iconType="plusInCircle"
+        onClick={() => {
+          const newFilter = { ...emptyFilter };
+          if (countDuplicates(filters, newFilter) > 0) {
+            newFilter.label = makeUniqueLabel(filters, newFilter);
+          }
+          setFilters(filters.concat(newFilter));
+          setIsLastOpen(true);
+        }}
+      >
+        {i18n.translate('xpack.lens.indexPattern.filters.addSearchQuery', {
+          defaultMessage: 'Add a search query',
+        })}
+      </EuiButtonEmpty>
+    </div>
+  );
+};

From 07ce55ae99596d76bb7a72a5394915e564599bbc Mon Sep 17 00:00:00 2001
From: Marta Bondyra <marta.bondyra@elastic.co>
Date: Thu, 3 Sep 2020 13:13:41 +0200
Subject: [PATCH 10/32] error validation

---
 .../query_string_input/query_string_input.tsx |   8 +-
 .../config_panel/_layer_panel.scss            |   2 +-
 .../dimension_panel/popover_editor.scss       |   8 +
 .../definitions/filters/filter_popover.tsx    | 194 +++++++++++-------
 .../definitions/filters/filters.tsx           | 119 ++++++-----
 .../operations/definitions/index.ts           |   2 +-
 6 files changed, 202 insertions(+), 131 deletions(-)

diff --git a/src/plugins/data/public/ui/query_string_input/query_string_input.tsx b/src/plugins/data/public/ui/query_string_input/query_string_input.tsx
index 2d311fd88eb39..54c230e256725 100644
--- a/src/plugins/data/public/ui/query_string_input/query_string_input.tsx
+++ b/src/plugins/data/public/ui/query_string_input/query_string_input.tsx
@@ -20,6 +20,7 @@
 import React, { Component, RefObject, createRef } from 'react';
 import { i18n } from '@kbn/i18n';
 
+import classNames from 'classnames';
 import {
   EuiTextArea,
   EuiOutsideClickDetector,
@@ -62,6 +63,7 @@ interface Props {
   onSubmit?: (query: Query) => void;
   dataTestSubj?: string;
   size?: SuggestionsListSize;
+  className?: string;
 }
 
 interface State {
@@ -586,9 +588,13 @@ export class QueryStringInputUI extends Component<Props, State> {
       'aria-owns': 'kbnTypeahead__items',
     };
     const ariaCombobox = { ...isSuggestionsVisible, role: 'combobox' };
+    const className = classNames(
+      'euiFormControlLayout euiFormControlLayout--group kbnQueryBar__wrap',
+      this.props.className
+    );
 
     return (
-      <div className="euiFormControlLayout euiFormControlLayout--group kbnQueryBar__wrap">
+      <div className={className}>
         {this.props.prepend}
         <EuiOutsideClickDetector onOutsideClick={this.onOutsideClick}>
           <div
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_layer_panel.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_layer_panel.scss
index 055245e2c7beb..5fceabad960e9 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_layer_panel.scss
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_layer_panel.scss
@@ -44,7 +44,7 @@
 }
 
 .lnsLayerPanel__filterLink {
-  min-height: $euiSizeM;
+  min-height: $euiSizeL;
   width: 100%;
   align-self: flex-start;
   word-break: break-word;
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.scss b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.scss
index 5bc821dbd8867..1a65d621e50a8 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.scss
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.scss
@@ -24,6 +24,14 @@
   width: $euiSize * 50;
 }
 
+.lnsIndexPatternDimensionEditor__queryInput--invalid {
+  textarea {
+    // sass-lint:disable-block no-important
+    background-image: linear-gradient(to top, $euiColorDanger, $euiColorDanger 2px, transparent 2px, transparent 100%) !important;
+    background-size: 100%;
+  }
+}
+
 // todo: remove after closing https://github.com/elastic/eui/issues/3548
 .lnsDimensionPanel__fixTranslateDnd {
   // sass-lint:disable-block no-important
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx
index 2d566e1a5650b..a1c146f49c226 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx
@@ -4,11 +4,12 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { MouseEventHandler, useState, useRef } from 'react';
-import { EuiPopover, EuiFieldText, EuiForm, EuiFormRow, keys } from '@elastic/eui';
+import React, { MouseEventHandler, useState } from 'react';
+import { EuiPopover, EuiFieldText, EuiForm, EuiFormRow } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
-import { Filter, emptyFilter, SEARCH_QUERY_LANGUAGE } from '.';
+import { debounce } from 'lodash';
+import { FilterValue, SEARCH_QUERY_LANGUAGE } from '.';
 import { IndexPattern } from '../../../types';
 
 import {
@@ -30,42 +31,36 @@ export const FilterPopover = ({
   setFilter,
   indexPattern,
   Button,
-  isLastOpen,
-  setIsLastOpen,
+  isOpenByCreation,
+  setIsOpenByCreation,
 }: {
-  filter: Filter;
+  filter: FilterValue;
   setFilter: Function;
   indexPattern: IndexPattern;
   Button: React.FunctionComponent<{ onClick: MouseEventHandler }>;
-  isLastOpen: boolean;
-  setIsLastOpen: Function;
+  isOpenByCreation: boolean;
+  setIsOpenByCreation: Function;
 }) => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   const setPopoverOpen = (isOpen: boolean) => {
     setIsPopoverOpen(isOpen);
-    setIsLastOpen(isOpen);
+    setIsOpenByCreation(isOpen);
   };
-  const [tempFilter, setTempFilter] = useState(filter);
 
-  const inputRef = useRef<HTMLInputElement>();
-  const onQueryChange = (input: Query) => setTempFilter({ ...tempFilter, input });
-  const onLabelChange = (label: string) => setTempFilter({ ...tempFilter, label: label.trim() });
-  const onSubmit = (input: Query) => {
+  const [errorMessage, setErrorMessage] = useState('');
+
+  const setFilterLabel = (label: string) => setFilter({ ...filter, label });
+  const setFilterQuery = (input: Query) => {
+    setErrorMessage('');
     try {
       if (input.language === SEARCH_QUERY_LANGUAGE.KUERY) {
         esKuery.toElasticsearchQuery(esKuery.fromKueryExpression(input.query), indexPattern);
       } else if (input.language === SEARCH_QUERY_LANGUAGE.LUCENE) {
         esQuery.luceneStringToDsl(input.query);
       }
-      if (input.query.length) {
-        if (tempFilter.label) {
-          setFilter(tempFilter);
-          setPopoverOpen(false);
-        } else {
-          if (inputRef.current) inputRef.current.focus();
-        }
-      }
+      setFilter({ ...filter, input });
     } catch (e) {
+      setErrorMessage(`Invalid syntax: ${JSON.stringify(e, null, 2)}`);
       console.log('Invalid syntax', JSON.stringify(e, null, 2)); // eslint-disable-line no-console
     }
   };
@@ -74,81 +69,126 @@ export const FilterPopover = ({
     <EuiPopover
       anchorClassName="lnsLayerPanel__anchor"
       panelClassName="lnsIndexPatternDimensionEditor__filtersEditor"
+      isOpen={isOpenByCreation || isPopoverOpen}
       ownFocus
-      isOpen={isLastOpen || isPopoverOpen}
       closePopover={() => {
         setPopoverOpen(false);
-        setTempFilter(filter);
       }}
       button={
         <Button
           onClick={() => {
             setIsPopoverOpen((open) => !open);
-            setIsLastOpen(false);
+            setIsOpenByCreation(false);
           }}
         />
       }
     >
       <EuiForm>
         <EuiFormRow fullWidth>
-          <QueryStringInput
-            bubbleSubmitEvent={false}
-            indexPatterns={[indexPattern]}
-            query={tempFilter.input}
-            onChange={onQueryChange}
-            onSubmit={onSubmit}
-            placeholder={
-              tempFilter.input.language === SEARCH_QUERY_LANGUAGE.KUERY
-                ? i18n.translate('xpack.lens.indexPattern.filters.queryPlaceholderKql', {
-                    defaultMessage: 'Example: {example}',
-                    values: { example: 'method : "GET" or status : "404"' },
-                  })
-                : i18n.translate('xpack.lens.indexPattern.filters.queryPlaceholderLucene', {
-                    defaultMessage: 'Example: {example}',
-                    values: { example: 'method:GET OR status:404' },
-                  })
-            }
-            dataTestSubj="transformQueryInput"
-            languageSwitcherPopoverAnchorPosition="rightDown"
+          <QueryInput
+            isInvalid={!!errorMessage}
+            value={filter.input}
+            onChange={setFilterQuery}
+            indexPattern={indexPattern}
           />
         </EuiFormRow>
         <EuiFormRow fullWidth>
-          <EuiFieldText
-            data-test-subj="indexPattern-filters-label"
-            inputRef={(node) => {
-              if (node) {
-                inputRef.current = node;
-              }
-            }}
-            value={tempFilter.label || ''}
-            onChange={(e) => onLabelChange(e.target.value)}
-            onKeyDown={({ key }: React.KeyboardEvent<HTMLInputElement>) => {
-              if (keys.ENTER === key) {
-                if (tempFilter.input.query.length) {
-                  setFilter(tempFilter);
-                  setPopoverOpen(false);
-                  setTempFilter(emptyFilter);
-                }
-              }
-              if (keys.ESCAPE === key) {
-                setPopoverOpen(false);
-              }
-            }}
-            fullWidth
-            placeholder={
-              tempFilter.input.query.length
-                ? (tempFilter.input.query as string)
-                : defaultPlaceholderMessage
-            }
-            prepend={i18n.translate('xpack.lens.indexPattern.filters.label', {
-              defaultMessage: 'Label',
-            })}
-            aria-label={i18n.translate('xpack.lens.indexPattern.filters.label.aria-message', {
-              defaultMessage: 'Label for your filter',
-            })}
+          <LabelInput
+            value={filter.label || ''}
+            onChange={setFilterLabel}
+            placeholder={filter.input.query || defaultPlaceholderMessage}
           />
         </EuiFormRow>
       </EuiForm>
     </EuiPopover>
   );
 };
+
+const QueryInput = ({
+  value,
+  onChange,
+  indexPattern,
+  isInvalid,
+}: {
+  value: Query;
+  onChange: (input: Query) => void;
+  indexPattern: IndexPattern;
+  isInvalid: boolean;
+}) => {
+  const [inputValue, setInputValue] = useState(value);
+
+  React.useEffect(() => {
+    setInputValue(value);
+  }, [value, setInputValue]);
+
+  const onChangeDebounced = React.useMemo(() => debounce(onChange, 256), [onChange]);
+
+  const handleInputChange = (input: Query) => {
+    setInputValue(input);
+    onChangeDebounced(input);
+  };
+
+  return (
+    <QueryStringInput
+      className={isInvalid ? 'lnsIndexPatternDimensionEditor__queryInput--invalid' : ''}
+      bubbleSubmitEvent={false}
+      indexPatterns={[indexPattern]}
+      query={inputValue}
+      onChange={handleInputChange}
+      placeholder={
+        inputValue.language === SEARCH_QUERY_LANGUAGE.KUERY
+          ? i18n.translate('xpack.lens.indexPattern.filters.queryPlaceholderKql', {
+              defaultMessage: 'Example: {example}',
+              values: { example: 'method : "GET" or status : "404"' },
+            })
+          : i18n.translate('xpack.lens.indexPattern.filters.queryPlaceholderLucene', {
+              defaultMessage: 'Example: {example}',
+              values: { example: 'method:GET OR status:404' },
+            })
+      }
+      dataTestSubj="transformQueryInput"
+      languageSwitcherPopoverAnchorPosition="rightDown"
+    />
+  );
+};
+
+const LabelInput = ({
+  value,
+  onChange,
+  placeholder,
+}: {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder: string;
+}) => {
+  const [inputValue, setInputValue] = useState(value);
+
+  React.useEffect(() => {
+    setInputValue(value);
+  }, [value, setInputValue]);
+
+  const onChangeDebounced = React.useMemo(() => debounce(onChange, 256), [onChange]);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = String(e.target.value);
+    setInputValue(val);
+    onChangeDebounced(val);
+  };
+
+  return (
+    <EuiFieldText
+      compressed
+      data-test-subj="indexPattern-filters-label"
+      value={inputValue}
+      onChange={handleInputChange}
+      fullWidth
+      placeholder={placeholder}
+      prepend={i18n.translate('xpack.lens.indexPattern.filters.label', {
+        defaultMessage: 'Label',
+      })}
+      aria-label={i18n.translate('xpack.lens.indexPattern.filters.label.aria-message', {
+        defaultMessage: 'Label for your filter',
+      })}
+    />
+  );
+};
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx
index ea1f66062bb33..e1b71c0993a1a 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx
@@ -5,8 +5,8 @@
  */
 
 import React, { MouseEventHandler, useState } from 'react';
+import { omit } from 'lodash';
 import { i18n } from '@kbn/i18n';
-import { Query } from 'src/plugins/data/public';
 import {
   EuiDragDropContext,
   EuiDraggable,
@@ -22,11 +22,17 @@ import {
   EuiButtonEmpty,
   EuiForm,
   EuiFormRow,
+  htmlIdGenerator,
 } from '@elastic/eui';
+
+import { Query, DataPublicPluginStart } from 'src/plugins/data/public';
+import { IUiSettingsClient } from 'kibana/public';
+import { useKibana } from '../../../../../../../../src/plugins/kibana_react/public';
 import { updateColumnParam } from '../../../state_helpers';
 import { OperationDefinition } from '../index';
 import { FieldBasedIndexPatternColumn } from '../column_types';
 import { FilterPopover } from './filter_popover';
+import { IndexPattern } from '../../../types';
 import { DataType } from '../../../../types';
 
 export enum SEARCH_QUERY_LANGUAGE {
@@ -34,18 +40,17 @@ export enum SEARCH_QUERY_LANGUAGE {
   LUCENE = 'lucene',
 }
 
+const generateId = htmlIdGenerator();
+
 export interface Filter {
   input: Query;
-  label?: string;
+  label: string;
+}
+export interface FilterValue {
+  input: Query;
+  label: string;
+  id: string;
 }
-
-export const emptyFilter: Filter = {
-  input: {
-    query: '',
-    language: SEARCH_QUERY_LANGUAGE.KUERY,
-  },
-  label: '',
-};
 
 const searchQueryLabel = i18n.translate('xpack.lens.indexPattern.searchQuery', {
   defaultMessage: 'Search query',
@@ -61,23 +66,6 @@ const defaultSearchQuery: Filter = {
   }),
 };
 
-const countDuplicates = (filterArr: Filter[], filter: Filter) =>
-  filterArr.filter(
-    (f) =>
-      JSON.stringify(f.input.query.trim()) === JSON.stringify(filter.input.query.trim()) &&
-      f.label === filter.label
-  ).length;
-
-const makeUniqueLabel = (filterArr: Filter[], filter: Filter) => {
-  let label = '';
-  let count = 0;
-  do {
-    count++;
-    label = `${filter.input.query} [${count}]`;
-  } while (filterArr.find((f) => f.label === label));
-  return label;
-};
-
 interface DraggableLocation {
   droppableId: string;
   index: number;
@@ -104,10 +92,11 @@ export const filtersOperation: OperationDefinition<FiltersIndexPatternColumn> =
     }
   },
   isTransferable: () => false,
+  onFieldChange: (oldColumn, indexPattern, field) => null,
   buildColumn({ suggestedPriority, field }) {
     return {
       label: searchQueryLabel,
-      dataType: field.type as DataType,
+      dataType: 'string',
       operationType: 'filters',
       scale: 'ordinal',
       suggestedPriority,
@@ -166,7 +155,43 @@ const FilterList = ({
   setFilters: Function;
   indexPattern: IndexPattern;
 }) => {
-  const [isLastOpen, setIsLastOpen] = useState(false);
+  const [isOpenByCreation, setIsOpenByCreation] = useState(false);
+  const [localFilters, setLocalFilters] = useState(() =>
+    filters.map((filter) => ({ ...filter, id: generateId() }))
+  );
+
+  const { services } = useKibana<{ uiSettings: IUiSettingsClient; data: DataPublicPluginStart }>();
+
+  const updateFilters = (updatedFilters: FilterValue[]) => {
+    // do not set internal id parameter into saved object
+    setFilters(updatedFilters.map((filter) => omit(filter, 'id') as FilterValue));
+    setLocalFilters(updatedFilters);
+  };
+
+  const onAddFilter = () =>
+    updateFilters([
+      ...localFilters,
+      {
+        input: services.data.query.queryString.getDefaultQuery(),
+        label: '',
+        id: generateId(),
+      },
+    ]);
+  const onRemoveFilter = (id: string) =>
+    updateFilters(localFilters.filter((filter) => filter.id !== id));
+
+  const onChangeValue = (id: string, query: Query, label: string) =>
+    updateFilters(
+      localFilters.map((filter) =>
+        filter.id === id
+          ? {
+              ...filter,
+              input: query,
+              label,
+            }
+          : filter
+      )
+    );
 
   const onDragEnd = ({
     source,
@@ -176,30 +201,29 @@ const FilterList = ({
     destination?: DraggableLocation;
   }) => {
     if (source && destination) {
-      const items = euiDragDropReorder(filters, source.index, destination.index);
-      setFilters(items);
+      const items = euiDragDropReorder(localFilters, source.index, destination.index);
+      updateFilters(items);
     }
   };
   return (
     <div>
       <EuiDragDropContext onDragEnd={onDragEnd}>
         <EuiDroppable droppableId="FILTERS_DROPPABLE_AREA" spacing="s">
-          {filters?.map((filter: Filter, idx: number) => {
-            const { input, label } = filter;
-            const id = `${JSON.stringify(input.query)}_${label}`;
+          {localFilters?.map((filter: FilterValue, idx: number) => {
+            const { input, label, id } = filter;
             return (
               <EuiDraggable
                 spacing="m"
                 key={id}
                 index={idx}
                 draggableId={id}
-                customDragHandle={true}
+                disableInteractiveElementBlocking
               >
                 {(provided) => (
                   <EuiPanel paddingSize="none">
                     <EuiFlexGroup gutterSize="xs" alignItems="center" responsive={false}>
                       <EuiFlexItem grow={false}>
-                        <div {...provided.dragHandleProps} className="lnsLayerPanel__dndGrab">
+                        <div className="lnsLayerPanel__dndGrab">
                           <EuiIcon
                             type="grab"
                             aria-label={i18n.translate('xpack.lens.indexPattern.filters.grabIcon', {
@@ -213,8 +237,8 @@ const FilterList = ({
                         data-test-subj="indexPattern-filters-existingFilterContainer"
                       >
                         <FilterPopover
-                          isLastOpen={idx === filters.length - 1 && isLastOpen}
-                          setIsLastOpen={setIsLastOpen}
+                          isOpenByCreation={idx === localFilters.length - 1 && isOpenByCreation}
+                          setIsOpenByCreation={setIsOpenByCreation}
                           indexPattern={indexPattern}
                           filter={filter}
                           Button={({ onClick }: { onClick: MouseEventHandler }) => (
@@ -225,15 +249,12 @@ const FilterList = ({
                               data-test-subj="indexPattern-filters-existingFilterTrigger"
                             >
                               <EuiText size="s" textAlign="left">
-                                {label ? label : input.query}
+                                {label || input.query || defaultSearchQuery.label}
                               </EuiText>
                             </EuiLink>
                           )}
-                          setFilter={(newFilter: Filter) => {
-                            if (countDuplicates(filters, newFilter) > 0) {
-                              newFilter.label = makeUniqueLabel(filters, newFilter);
-                            }
-                            setFilters(filters.map((f: Filter) => (f === filter ? newFilter : f)));
+                          setFilter={(f: FilterValue) => {
+                            onChangeValue(f.id, f.input, f.label);
                           }}
                         />
                       </EuiFlexItem>
@@ -244,7 +265,7 @@ const FilterList = ({
                           color="danger"
                           data-test-subj="indexPattern-filters-existingFilterDelete"
                           onClick={() => {
-                            setFilters(filters.filter((f: Filter) => f !== filter));
+                            onRemoveFilter(filter.id);
                           }}
                           aria-label={i18n.translate(
                             'xpack.lens.indexPattern.filters.deleteSearchQuery',
@@ -266,12 +287,8 @@ const FilterList = ({
       <EuiButtonEmpty
         iconType="plusInCircle"
         onClick={() => {
-          const newFilter = { ...emptyFilter };
-          if (countDuplicates(filters, newFilter) > 0) {
-            newFilter.label = makeUniqueLabel(filters, newFilter);
-          }
-          setFilters(filters.concat(newFilter));
-          setIsLastOpen(true);
+          onAddFilter();
+          setIsOpenByCreation(true);
         }}
       >
         {i18n.translate('xpack.lens.indexPattern.filters.addSearchQuery', {
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/index.ts b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/index.ts
index ef5f570562211..1dcce04a21948 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/index.ts
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/index.ts
@@ -141,7 +141,7 @@ interface FieldBasedOperationDefinition<C extends BaseIndexPatternColumn>
    * @param indexPattern The index pattern that field is on.
    * @param field The field that the user changed to.
    */
-  onFieldChange?: (oldColumn: C, indexPattern: IndexPattern, field: IndexPatternField) => C;
+  onFieldChange: (oldColumn: C, indexPattern: IndexPattern, field: IndexPatternField) => C;
 }
 
 /**

From 6fbac67b26a538ca29259e72cdb74942fd572ead Mon Sep 17 00:00:00 2001
From: Marta Bondyra <marta.bondyra@elastic.co>
Date: Fri, 4 Sep 2020 08:35:49 +0200
Subject: [PATCH 11/32] continue with feedback

---
 .../ui/typeahead/suggestions_component.tsx    |  1 +
 .../dimension_panel/popover_editor.scss       |  2 +-
 .../definitions/filters/filter_popover.tsx    | 28 ++++++++++---------
 .../definitions/filters/filters.tsx           | 25 ++++++++---------
 4 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/src/plugins/data/public/ui/typeahead/suggestions_component.tsx b/src/plugins/data/public/ui/typeahead/suggestions_component.tsx
index dc7c55374f1d5..50ed9e9542d36 100644
--- a/src/plugins/data/public/ui/typeahead/suggestions_component.tsx
+++ b/src/plugins/data/public/ui/typeahead/suggestions_component.tsx
@@ -154,6 +154,7 @@ export class SuggestionsComponent extends Component<Props> {
 const StyledSuggestionsListDiv = styled.div`
   ${(props: { queryBarRect: DOMRect; verticalListPosition: string }) => `
       position: absolute;
+      z-index: 4001;
       left: ${props.queryBarRect.left}px;
       width: ${props.queryBarRect.width}px;
       ${props.verticalListPosition}`}
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.scss b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.scss
index 1a65d621e50a8..e79fb86b382f8 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.scss
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.scss
@@ -21,7 +21,7 @@
 
 .lnsIndexPatternDimensionEditor__filtersEditor {
   max-width: 100%;
-  width: $euiSize * 50;
+  width: $euiSize * 60;
 }
 
 .lnsIndexPatternDimensionEditor__queryInput--invalid {
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx
index a1c146f49c226..a6612f98400c8 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx
@@ -7,9 +7,8 @@
 import React, { MouseEventHandler, useState } from 'react';
 import { EuiPopover, EuiFieldText, EuiForm, EuiFormRow } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-
 import { debounce } from 'lodash';
-import { FilterValue, SEARCH_QUERY_LANGUAGE } from '.';
+import { FilterValue, defaultLabel } from '.';
 import { IndexPattern } from '../../../types';
 
 import {
@@ -19,13 +18,6 @@ import {
   esQuery,
 } from '../../../../../../../../src/plugins/data/public';
 
-const defaultPlaceholderMessage = i18n.translate(
-  'xpack.lens.indexPattern.filters.label.placeholder',
-  {
-    defaultMessage: 'All records',
-  }
-);
-
 export const FilterPopover = ({
   filter,
   setFilter,
@@ -53,9 +45,9 @@ export const FilterPopover = ({
   const setFilterQuery = (input: Query) => {
     setErrorMessage('');
     try {
-      if (input.language === SEARCH_QUERY_LANGUAGE.KUERY) {
+      if (input.language === 'kuery') {
         esKuery.toElasticsearchQuery(esKuery.fromKueryExpression(input.query), indexPattern);
-      } else if (input.language === SEARCH_QUERY_LANGUAGE.LUCENE) {
+      } else {
         esQuery.luceneStringToDsl(input.query);
       }
       setFilter({ ...filter, input });
@@ -65,6 +57,16 @@ export const FilterPopover = ({
     }
   };
 
+  const getPlaceholder = (query: Query['query']) => {
+    if (query === '') {
+      return defaultLabel;
+    }
+    if (query === 'object') return JSON.stringify(query);
+    else {
+      return String(query);
+    }
+  };
+
   return (
     <EuiPopover
       anchorClassName="lnsLayerPanel__anchor"
@@ -96,7 +98,7 @@ export const FilterPopover = ({
           <LabelInput
             value={filter.label || ''}
             onChange={setFilterLabel}
-            placeholder={filter.input.query || defaultPlaceholderMessage}
+            placeholder={getPlaceholder(filter.input.query)}
           />
         </EuiFormRow>
       </EuiForm>
@@ -136,7 +138,7 @@ const QueryInput = ({
       query={inputValue}
       onChange={handleInputChange}
       placeholder={
-        inputValue.language === SEARCH_QUERY_LANGUAGE.KUERY
+        inputValue.language === 'kuery'
           ? i18n.translate('xpack.lens.indexPattern.filters.queryPlaceholderKql', {
               defaultMessage: 'Example: {example}',
               values: { example: 'method : "GET" or status : "404"' },
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx
index e1b71c0993a1a..74eb7d1a4669e 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx
@@ -33,15 +33,8 @@ import { OperationDefinition } from '../index';
 import { FieldBasedIndexPatternColumn } from '../column_types';
 import { FilterPopover } from './filter_popover';
 import { IndexPattern } from '../../../types';
-import { DataType } from '../../../../types';
-
-export enum SEARCH_QUERY_LANGUAGE {
-  KUERY = 'kuery',
-  LUCENE = 'lucene',
-}
 
 const generateId = htmlIdGenerator();
-
 export interface Filter {
   input: Query;
   label: string;
@@ -56,14 +49,16 @@ const searchQueryLabel = i18n.translate('xpack.lens.indexPattern.searchQuery', {
   defaultMessage: 'Search query',
 });
 
+export const defaultLabel = i18n.translate('xpack.lens.indexPattern.filters.label.placeholder', {
+  defaultMessage: 'All records',
+});
+
 const defaultSearchQuery: Filter = {
   input: {
-    query: '*',
+    query: '',
     language: 'kuery',
   },
-  label: i18n.translate('xpack.lens.indexPattern.searchQueryDefault', {
-    defaultMessage: 'All records',
-  }),
+  label: '',
 };
 
 interface DraggableLocation {
@@ -92,7 +87,9 @@ export const filtersOperation: OperationDefinition<FiltersIndexPatternColumn> =
     }
   },
   isTransferable: () => false,
-  onFieldChange: (oldColumn, indexPattern, field) => null,
+
+  onFieldChange: (oldColumn, indexPattern, field) => oldColumn,
+
   buildColumn({ suggestedPriority, field }) {
     return {
       label: searchQueryLabel,
@@ -146,7 +143,7 @@ export const filtersOperation: OperationDefinition<FiltersIndexPatternColumn> =
   },
 };
 
-const FilterList = ({
+export const FilterList = ({
   filters,
   setFilters,
   indexPattern,
@@ -249,7 +246,7 @@ const FilterList = ({
                               data-test-subj="indexPattern-filters-existingFilterTrigger"
                             >
                               <EuiText size="s" textAlign="left">
-                                {label || input.query || defaultSearchQuery.label}
+                                {label || input.query || defaultLabel}
                               </EuiText>
                             </EuiLink>
                           )}

From f97e5f63452ec16da4e2511355c77921085800d5 Mon Sep 17 00:00:00 2001
From: Marta Bondyra <marta.bondyra@elastic.co>
Date: Fri, 4 Sep 2020 11:45:58 +0200
Subject: [PATCH 12/32] after meeting fixes

---
 .../definitions/filters/filter_popover.tsx    | 61 ++++++------
 .../definitions/filters/filters.tsx           | 96 +++++++++++++------
 2 files changed, 102 insertions(+), 55 deletions(-)

diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx
index a6612f98400c8..fec15e6190a76 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx
@@ -5,18 +5,12 @@
  */
 
 import React, { MouseEventHandler, useState } from 'react';
-import { EuiPopover, EuiFieldText, EuiForm, EuiFormRow } from '@elastic/eui';
+import { EuiPopover, EuiFieldText, EuiForm, EuiFormRow, keys } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { debounce } from 'lodash';
-import { FilterValue, defaultLabel } from '.';
+import { FilterValue, defaultLabel, isQueryValid } from '.';
 import { IndexPattern } from '../../../types';
-
-import {
-  QueryStringInput,
-  Query,
-  esKuery,
-  esQuery,
-} from '../../../../../../../../src/plugins/data/public';
+import { QueryStringInput, Query } from '../../../../../../../../src/plugins/data/public';
 
 export const FilterPopover = ({
   filter,
@@ -34,28 +28,15 @@ export const FilterPopover = ({
   setIsOpenByCreation: Function;
 }) => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const inputRef = React.useRef<HTMLInputElement>();
+
   const setPopoverOpen = (isOpen: boolean) => {
     setIsPopoverOpen(isOpen);
     setIsOpenByCreation(isOpen);
   };
 
-  const [errorMessage, setErrorMessage] = useState('');
-
   const setFilterLabel = (label: string) => setFilter({ ...filter, label });
-  const setFilterQuery = (input: Query) => {
-    setErrorMessage('');
-    try {
-      if (input.language === 'kuery') {
-        esKuery.toElasticsearchQuery(esKuery.fromKueryExpression(input.query), indexPattern);
-      } else {
-        esQuery.luceneStringToDsl(input.query);
-      }
-      setFilter({ ...filter, input });
-    } catch (e) {
-      setErrorMessage(`Invalid syntax: ${JSON.stringify(e, null, 2)}`);
-      console.log('Invalid syntax', JSON.stringify(e, null, 2)); // eslint-disable-line no-console
-    }
-  };
+  const setFilterQuery = (input: Query) => setFilter({ ...filter, input });
 
   const getPlaceholder = (query: Query['query']) => {
     if (query === '') {
@@ -88,10 +69,13 @@ export const FilterPopover = ({
       <EuiForm>
         <EuiFormRow fullWidth>
           <QueryInput
-            isInvalid={!!errorMessage}
+            isInvalid={!isQueryValid(filter.input, indexPattern)}
             value={filter.input}
-            onChange={setFilterQuery}
             indexPattern={indexPattern}
+            onChange={setFilterQuery}
+            onSubmit={() => {
+              if (inputRef.current) inputRef.current.focus();
+            }}
           />
         </EuiFormRow>
         <EuiFormRow fullWidth>
@@ -99,6 +83,8 @@ export const FilterPopover = ({
             value={filter.label || ''}
             onChange={setFilterLabel}
             placeholder={getPlaceholder(filter.input.query)}
+            inputRef={inputRef}
+            onSubmit={() => setPopoverOpen(false)}
           />
         </EuiFormRow>
       </EuiForm>
@@ -111,11 +97,13 @@ const QueryInput = ({
   onChange,
   indexPattern,
   isInvalid,
+  onSubmit,
 }: {
   value: Query;
   onChange: (input: Query) => void;
   indexPattern: IndexPattern;
   isInvalid: boolean;
+  onSubmit: () => void;
 }) => {
   const [inputValue, setInputValue] = useState(value);
 
@@ -137,6 +125,11 @@ const QueryInput = ({
       indexPatterns={[indexPattern]}
       query={inputValue}
       onChange={handleInputChange}
+      onSubmit={() => {
+        if (inputValue.query) {
+          onSubmit();
+        }
+      }}
       placeholder={
         inputValue.language === 'kuery'
           ? i18n.translate('xpack.lens.indexPattern.filters.queryPlaceholderKql', {
@@ -158,10 +151,14 @@ const LabelInput = ({
   value,
   onChange,
   placeholder,
+  inputRef,
+  onSubmit,
 }: {
   value: string;
   onChange: (value: string) => void;
   placeholder: string;
+  inputRef: React.MutableRefObject<HTMLInputElement | undefined>;
+  onSubmit: () => void;
 }) => {
   const [inputValue, setInputValue] = useState(value);
 
@@ -185,6 +182,16 @@ const LabelInput = ({
       onChange={handleInputChange}
       fullWidth
       placeholder={placeholder}
+      inputRef={(node) => {
+        if (node) {
+          inputRef.current = node;
+        }
+      }}
+      onKeyDown={({ key }: React.KeyboardEvent<HTMLInputElement>) => {
+        if (keys.ENTER === key) {
+          onSubmit();
+        }
+      }}
       prepend={i18n.translate('xpack.lens.indexPattern.filters.label', {
         defaultMessage: 'Label',
       })}
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx
index 74eb7d1a4669e..60d00b99f6cdb 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx
@@ -24,17 +24,21 @@ import {
   EuiFormRow,
   htmlIdGenerator,
 } from '@elastic/eui';
-
-import { Query, DataPublicPluginStart } from 'src/plugins/data/public';
-import { IUiSettingsClient } from 'kibana/public';
-import { useKibana } from '../../../../../../../../src/plugins/kibana_react/public';
 import { updateColumnParam } from '../../../state_helpers';
 import { OperationDefinition } from '../index';
 import { FieldBasedIndexPatternColumn } from '../column_types';
 import { FilterPopover } from './filter_popover';
 import { IndexPattern } from '../../../types';
+import {
+  Query,
+  esKuery,
+  esQuery,
+  DataPublicPluginStart,
+} from '../../../../../../../../src/plugins/data/public';
 
 const generateId = htmlIdGenerator();
+
+// references types from src/plugins/data/common/search/aggs/buckets/filters.ts
 export interface Filter {
   input: Query;
   label: string;
@@ -53,12 +57,27 @@ export const defaultLabel = i18n.translate('xpack.lens.indexPattern.filters.labe
   defaultMessage: 'All records',
 });
 
-const defaultSearchQuery: Filter = {
-  input: {
-    query: '',
-    language: 'kuery',
-  },
+const getDefaultFilter = (data?: DataPublicPluginStart): Filter => ({
+  input: data
+    ? data.query.queryString.getDefaultQuery()
+    : {
+        query: '',
+        language: 'kuery',
+      },
   label: '',
+});
+
+export const isQueryValid = (input: Query, indexPattern: IndexPattern) => {
+  try {
+    if (input.language === 'kuery') {
+      esKuery.toElasticsearchQuery(esKuery.fromKueryExpression(input.query), indexPattern);
+    } else {
+      esQuery.luceneStringToDsl(input.query);
+    }
+    return true;
+  } catch (e) {
+    return false;
+  }
 };
 
 interface DraggableLocation {
@@ -90,7 +109,7 @@ export const filtersOperation: OperationDefinition<FiltersIndexPatternColumn> =
 
   onFieldChange: (oldColumn, indexPattern, field) => oldColumn,
 
-  buildColumn({ suggestedPriority, field }) {
+  buildColumn({ suggestedPriority, field, previousColumn }) {
     return {
       label: searchQueryLabel,
       dataType: 'string',
@@ -99,25 +118,38 @@ export const filtersOperation: OperationDefinition<FiltersIndexPatternColumn> =
       suggestedPriority,
       isBucketed: true,
       sourceField: field.name,
+      params: previousColumn?.params?.filters
+        ? previousColumn.params
+        : {
+            filters: [
+              {
+                input: getDefaultFilter(),
+                label: '',
+              },
+            ],
+          },
+    };
+  },
+
+  toEsAggsConfig: (column, columnId, indexPattern) => {
+    const validFilters = column.params.filters?.filter((f: Filter) =>
+      isQueryValid(f.input, indexPattern)
+    );
+    return {
+      id: columnId,
+      enabled: true,
+      type: 'filters',
+      schema: 'segment',
       params: {
-        filters: [],
+        filters: validFilters?.length > 0 ? validFilters : [getDefaultFilter()],
       },
     };
   },
 
-  toEsAggsConfig: (column, columnId) => ({
-    id: columnId,
-    enabled: true,
-    type: 'filters',
-    schema: 'segment',
-    params: {
-      filters: column.params.filters.length > 0 ? column.params.filters : [defaultSearchQuery],
-    },
-  }),
-
-  paramEditor: ({ state, setState, currentColumn, layerId }) => {
+  paramEditor: ({ state, setState, currentColumn, layerId, data }) => {
     const indexPattern = state.indexPatterns[state.layers[layerId].indexPatternId];
     const filters = currentColumn.params.filters;
+
     const setFilters = (newFilters: Filter[]) =>
       setState(
         updateColumnParam({
@@ -136,7 +168,12 @@ export const filtersOperation: OperationDefinition<FiltersIndexPatternColumn> =
             defaultMessage: 'Queries',
           })}
         >
-          <FilterList filters={filters} setFilters={setFilters} indexPattern={indexPattern} />
+          <FilterList
+            filters={filters}
+            setFilters={setFilters}
+            indexPattern={indexPattern}
+            defaultQuery={getDefaultFilter(data)}
+          />
         </EuiFormRow>
       </EuiForm>
     );
@@ -147,18 +184,18 @@ export const FilterList = ({
   filters,
   setFilters,
   indexPattern,
+  defaultQuery,
 }: {
   filters: Filter[];
   setFilters: Function;
   indexPattern: IndexPattern;
+  defaultQuery: Filter;
 }) => {
   const [isOpenByCreation, setIsOpenByCreation] = useState(false);
   const [localFilters, setLocalFilters] = useState(() =>
     filters.map((filter) => ({ ...filter, id: generateId() }))
   );
 
-  const { services } = useKibana<{ uiSettings: IUiSettingsClient; data: DataPublicPluginStart }>();
-
   const updateFilters = (updatedFilters: FilterValue[]) => {
     // do not set internal id parameter into saved object
     setFilters(updatedFilters.map((filter) => omit(filter, 'id') as FilterValue));
@@ -169,8 +206,7 @@ export const FilterList = ({
     updateFilters([
       ...localFilters,
       {
-        input: services.data.query.queryString.getDefaultQuery(),
-        label: '',
+        ...defaultQuery,
         id: generateId(),
       },
     ]);
@@ -245,7 +281,11 @@ export const FilterList = ({
                               className="lnsLayerPanel__filterLink"
                               data-test-subj="indexPattern-filters-existingFilterTrigger"
                             >
-                              <EuiText size="s" textAlign="left">
+                              <EuiText
+                                size="s"
+                                textAlign="left"
+                                color={isQueryValid(input, indexPattern) ? 'default' : 'danger'}
+                              >
                                 {label || input.query || defaultLabel}
                               </EuiText>
                             </EuiLink>

From ccd9ed7f024af2375095e80b313e0d78c7d9b3e6 Mon Sep 17 00:00:00 2001
From: Marta Bondyra <marta.bondyra@elastic.co>
Date: Fri, 4 Sep 2020 13:40:19 +0200
Subject: [PATCH 13/32] update tests

---
 .../definitions/filters/filters.test.tsx      | 186 +++++++-----------
 .../definitions/filters/filters.tsx           |   9 +-
 2 files changed, 75 insertions(+), 120 deletions(-)

diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.test.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.test.tsx
index 0784d186faa3e..cd2a24d1d3ee5 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.test.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.test.tsx
@@ -24,6 +24,19 @@ const defaultProps = {
   http: {} as HttpSetup,
 };
 
+// mocking random id generator function
+jest.mock('@elastic/eui', () => {
+  const original = jest.requireActual('@elastic/eui');
+
+  return {
+    ...original,
+    htmlIdGenerator: (fn: unknown) => {
+      let counter = 0;
+      return () => counter++;
+    },
+  };
+});
+
 describe('filters', () => {
   let state: IndexPatternPrivateState;
   const InlineOptions = filtersOperation.paramEditor!;
@@ -110,7 +123,7 @@ describe('filters', () => {
           type: 'document',
         })
       ).toEqual({
-        dataType: 'number',
+        dataType: 'string',
         isBucketed: true,
         scale: 'ordinal',
       });
@@ -137,6 +150,65 @@ describe('filters', () => {
         return 'QueryStringInput';
       },
     }));
+
+    it('should update state when changing a filter', () => {
+      const setStateSpy = jest.fn();
+      const instance = mount(
+        <InlineOptions
+          {...defaultProps}
+          state={state}
+          setState={setStateSpy}
+          columnId="col1"
+          currentColumn={state.layers.first.columns.col1 as FiltersIndexPatternColumn}
+          layerId="first"
+        />
+      );
+
+      act(() => {
+        instance.find(FilterPopover).first().prop('setFilter')!({
+          input: {
+            query: 'dest : 5',
+            language: 'lucene',
+          },
+          label: 'Dest5',
+          id: 0,
+        });
+      });
+      instance.update();
+      expect(setStateSpy).toHaveBeenCalledWith({
+        ...state,
+        layers: {
+          first: {
+            ...state.layers.first,
+            columns: {
+              ...state.layers.first.columns,
+              col1: {
+                ...state.layers.first.columns.col1,
+                params: {
+                  filters: [
+                    {
+                      input: {
+                        query: 'dest : 5',
+                        language: 'lucene',
+                      },
+                      label: 'Dest5',
+                    },
+                    {
+                      input: {
+                        language: 'kuery',
+                        query: 'src : 2',
+                      },
+                      label: '',
+                    },
+                  ],
+                },
+              },
+            },
+          },
+        },
+      });
+    });
+
     describe('Modify search query', () => {
       it('should correctly show existing filters ', () => {
         const setStateSpy = jest.fn();
@@ -164,118 +236,6 @@ describe('filters', () => {
         ).toEqual('src : 2');
       });
 
-      it('should update state when changing a filter', () => {
-        const setStateSpy = jest.fn();
-        const instance = mount(
-          <InlineOptions
-            {...defaultProps}
-            state={state}
-            setState={setStateSpy}
-            columnId="col1"
-            currentColumn={state.layers.first.columns.col1 as FiltersIndexPatternColumn}
-            layerId="first"
-          />
-        );
-
-        act(() => {
-          instance.find(FilterPopover).first().prop('setFilter')!({
-            input: {
-              query: 'dest : 5',
-              language: 'lucene',
-            },
-            label: 'Dest5',
-          });
-        });
-        expect(setStateSpy).toHaveBeenCalledWith({
-          ...state,
-          layers: {
-            first: {
-              ...state.layers.first,
-              columns: {
-                ...state.layers.first.columns,
-                col1: {
-                  ...state.layers.first.columns.col1,
-                  params: {
-                    filters: [
-                      {
-                        input: {
-                          query: 'dest : 5',
-                          language: 'lucene',
-                        },
-                        label: 'Dest5',
-                      },
-                      {
-                        input: {
-                          language: 'kuery',
-                          query: 'src : 2',
-                        },
-                        label: '',
-                      },
-                    ],
-                  },
-                },
-              },
-            },
-          },
-        });
-      });
-
-      it('should add label to duplicated filter', () => {
-        const setStateSpy = jest.fn();
-        const instance = mount(
-          <InlineOptions
-            {...defaultProps}
-            state={state}
-            setState={setStateSpy}
-            columnId="col1"
-            currentColumn={state.layers.first.columns.col1 as FiltersIndexPatternColumn}
-            layerId="first"
-          />
-        );
-
-        act(() => {
-          instance.find(FilterPopover).first().prop('setFilter')!({
-            input: {
-              language: 'kuery',
-              query: 'src : 2',
-            },
-            label: '',
-          });
-        });
-        expect(setStateSpy).toHaveBeenCalledWith({
-          ...state,
-          layers: {
-            first: {
-              ...state.layers.first,
-              columns: {
-                ...state.layers.first.columns,
-                col1: {
-                  ...state.layers.first.columns.col1,
-                  params: {
-                    filters: [
-                      {
-                        input: {
-                          language: 'kuery',
-                          query: 'src : 2',
-                        },
-                        label: 'src : 2 [1]',
-                      },
-                      {
-                        input: {
-                          language: 'kuery',
-                          query: 'src : 2',
-                        },
-                        label: '',
-                      },
-                    ],
-                  },
-                },
-              },
-            },
-          },
-        });
-      });
-
       it('should remove search query', () => {
         const setStateSpy = jest.fn();
         const instance = mount(
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx
index 60d00b99f6cdb..5bf9c09336cff 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx
@@ -121,12 +121,7 @@ export const filtersOperation: OperationDefinition<FiltersIndexPatternColumn> =
       params: previousColumn?.params?.filters
         ? previousColumn.params
         : {
-            filters: [
-              {
-                input: getDefaultFilter(),
-                label: '',
-              },
-            ],
+            filters: [getDefaultFilter()],
           },
     };
   },
@@ -198,7 +193,7 @@ export const FilterList = ({
 
   const updateFilters = (updatedFilters: FilterValue[]) => {
     // do not set internal id parameter into saved object
-    setFilters(updatedFilters.map((filter) => omit(filter, 'id') as FilterValue));
+    setFilters(updatedFilters.map((filter) => omit(filter, 'id')));
     setLocalFilters(updatedFilters);
   };
 

From c6591835aba9afd477316c61cd4c3d4971833f8d Mon Sep 17 00:00:00 2001
From: Marta Bondyra <marta.bondyra@elastic.co>
Date: Fri, 4 Sep 2020 16:50:54 +0200
Subject: [PATCH 14/32] added termstofilters behavior

---
 .../dimension_panel/popover_editor.tsx        |  7 +++++-
 .../definitions/filters/filters.tsx           | 24 +++++++++++++++----
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.tsx
index 038b51b922286..d5f0110f071f1 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.tsx
@@ -160,6 +160,11 @@ export function PopoverEditor(props: PopoverEditorProps) {
           compatibleWithCurrentField ? '' : ' incompatible'
         }`,
         onClick() {
+          // todo: when moving from terms agg to filters, we want to create a filter `$field.name : *`
+          // it probably has to be re-thought when removing the field name.
+          const isTermsToFilters =
+            selectedColumn?.operationType === 'terms' && operationType === 'filters';
+
           if (!selectedColumn || !compatibleWithCurrentField) {
             const possibleFields = fieldByOperation[operationType] || [];
 
@@ -186,7 +191,7 @@ export function PopoverEditor(props: PopoverEditorProps) {
             trackUiEvent(`indexpattern_dimension_operation_${operationType}`);
             return;
           }
-          if (incompatibleSelectedOperationType) {
+          if (incompatibleSelectedOperationType && !isTermsToFilters) {
             setInvalidOperationType(null);
           }
           if (selectedColumn.operationType === operationType) {
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx
index 5bf9c09336cff..94c5b8fb3fd7b 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx
@@ -57,6 +57,8 @@ export const defaultLabel = i18n.translate('xpack.lens.indexPattern.filters.labe
   defaultMessage: 'All records',
 });
 
+// we don't have an access data plugin in places where we use this function,
+// what's why we have a fallback default input
 const getDefaultFilter = (data?: DataPublicPluginStart): Filter => ({
   input: data
     ? data.query.queryString.getDefaultQuery()
@@ -110,6 +112,22 @@ export const filtersOperation: OperationDefinition<FiltersIndexPatternColumn> =
   onFieldChange: (oldColumn, indexPattern, field) => oldColumn,
 
   buildColumn({ suggestedPriority, field, previousColumn }) {
+    let params = previousColumn?.params?.filters
+      ? previousColumn.params
+      : { filters: [getDefaultFilter()] };
+    if (previousColumn?.operationType === 'terms') {
+      params = {
+        filters: [
+          {
+            label: '',
+            input: {
+              query: `${previousColumn.sourceField} : *`,
+              language: 'kuery',
+            },
+          },
+        ],
+      };
+    }
     return {
       label: searchQueryLabel,
       dataType: 'string',
@@ -118,11 +136,7 @@ export const filtersOperation: OperationDefinition<FiltersIndexPatternColumn> =
       suggestedPriority,
       isBucketed: true,
       sourceField: field.name,
-      params: previousColumn?.params?.filters
-        ? previousColumn.params
-        : {
-            filters: [getDefaultFilter()],
-          },
+      params,
     };
   },
 

From c3f3dedc2738135b59669a6d4c41dd291e1516dd Mon Sep 17 00:00:00 2001
From: Marta Bondyra <marta.bondyra@elastic.co>
Date: Mon, 7 Sep 2020 16:44:42 +0200
Subject: [PATCH 15/32] fixing types

---
 .../operations/definitions/cardinality.tsx    | 11 +++++--
 .../operations/definitions/count.tsx          | 11 +++++--
 .../definitions/filters/filters.tsx           | 11 +++++--
 .../operations/definitions/index.ts           |  2 +-
 .../operations/definitions/metrics.tsx        | 31 ++++++++++++-------
 5 files changed, 47 insertions(+), 19 deletions(-)

diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/cardinality.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/cardinality.tsx
index ad04891b637d4..609cb4345ca49 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/cardinality.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/cardinality.tsx
@@ -50,6 +50,14 @@ export const cardinalityOperation: OperationDefinition<CardinalityIndexPatternCo
     );
   },
   buildColumn({ suggestedPriority, field, previousColumn }) {
+    let params;
+    if (
+      previousColumn?.operationType === 'cardinality' &&
+      previousColumn.dataType === 'number' &&
+      'params' in previousColumn
+    ) {
+      params = previousColumn.params;
+    }
     return {
       label: ofName(field.displayName),
       dataType: 'number',
@@ -58,8 +66,7 @@ export const cardinalityOperation: OperationDefinition<CardinalityIndexPatternCo
       suggestedPriority,
       sourceField: field.name,
       isBucketed: IS_BUCKETED,
-      params:
-        previousColumn && previousColumn.dataType === 'number' ? previousColumn.params : undefined,
+      params,
     };
   },
   toEsAggsConfig: (column, columnId) => ({
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/count.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/count.tsx
index 4e081da2c6dc9..ee59c714f14b1 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/count.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/count.tsx
@@ -40,6 +40,14 @@ export const countOperation: OperationDefinition<CountIndexPatternColumn> = {
     }
   },
   buildColumn({ suggestedPriority, field, previousColumn }) {
+    let params;
+    if (
+      previousColumn?.operationType === 'count' &&
+      previousColumn.dataType === 'number' &&
+      'params' in previousColumn
+    ) {
+      params = previousColumn.params;
+    }
     return {
       label: countLabel,
       dataType: 'number',
@@ -48,8 +56,7 @@ export const countOperation: OperationDefinition<CountIndexPatternColumn> = {
       isBucketed: false,
       scale: 'ratio',
       sourceField: field.name,
-      params:
-        previousColumn && previousColumn.dataType === 'number' ? previousColumn.params : undefined,
+      params,
     };
   },
   toEsAggsConfig: (column, columnId) => ({
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx
index 94c5b8fb3fd7b..a0635d36846cb 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx
@@ -112,9 +112,7 @@ export const filtersOperation: OperationDefinition<FiltersIndexPatternColumn> =
   onFieldChange: (oldColumn, indexPattern, field) => oldColumn,
 
   buildColumn({ suggestedPriority, field, previousColumn }) {
-    let params = previousColumn?.params?.filters
-      ? previousColumn.params
-      : { filters: [getDefaultFilter()] };
+    let params = { filters: [getDefaultFilter()] };
     if (previousColumn?.operationType === 'terms') {
       params = {
         filters: [
@@ -127,7 +125,14 @@ export const filtersOperation: OperationDefinition<FiltersIndexPatternColumn> =
           },
         ],
       };
+    } else if (
+      previousColumn?.operationType === 'filters' &&
+      'params' in previousColumn &&
+      previousColumn.params?.filters
+    ) {
+      params = previousColumn.params;
     }
+
     return {
       label: searchQueryLabel,
       dataType: 'string',
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/index.ts b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/index.ts
index 1dcce04a21948..f41c150c4447a 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/index.ts
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/index.ts
@@ -122,7 +122,7 @@ interface FieldBasedOperationDefinition<C extends BaseIndexPatternColumn>
   buildColumn: (
     arg: BaseBuildColumnArgs & {
       field: IndexPatternField;
-      previousColumn?: C;
+      previousColumn?: C | BaseIndexPatternColumn;
     }
   ) => C;
   /**
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/metrics.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/metrics.tsx
index 4c37d95f6b050..ff3c6d9981455 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/metrics.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/metrics.tsx
@@ -50,17 +50,26 @@ function buildMetricOperation<T extends MetricColumn<string>>({
           (!newField.aggregationRestrictions || newField.aggregationRestrictions![type])
       );
     },
-    buildColumn: ({ suggestedPriority, field, previousColumn }) => ({
-      label: ofName(field.displayName),
-      dataType: 'number',
-      operationType: type,
-      suggestedPriority,
-      sourceField: field.name,
-      isBucketed: false,
-      scale: 'ratio',
-      params:
-        previousColumn && previousColumn.dataType === 'number' ? previousColumn.params : undefined,
-    }),
+    buildColumn: ({ suggestedPriority, field, previousColumn }) => {
+      let params;
+      if (
+        previousColumn?.operationType === 'metrics' &&
+        previousColumn.dataType === 'number' &&
+        'params' in previousColumn
+      ) {
+        params = previousColumn.params;
+      }
+      return {
+        label: ofName(field.displayName),
+        dataType: 'number',
+        operationType: type,
+        suggestedPriority,
+        sourceField: field.name,
+        isBucketed: false,
+        scale: 'ratio',
+        params,
+      };
+    },
     onFieldChange: (oldColumn, indexPattern, field) => {
       return {
         ...oldColumn,

From 9f2bd40f493efcfc8cb0ab5be977421abbe2f49b Mon Sep 17 00:00:00 2001
From: Marta Bondyra <marta.bondyra@elastic.co>
Date: Tue, 8 Sep 2020 10:03:18 +0200
Subject: [PATCH 16/32] tests fixes

---
 .../operations/definitions/cardinality.tsx                  | 6 +-----
 .../operations/definitions/count.tsx                        | 6 +-----
 .../operations/definitions/metrics.tsx                      | 6 +-----
 3 files changed, 3 insertions(+), 15 deletions(-)

diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/cardinality.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/cardinality.tsx
index 609cb4345ca49..36ca0aed31a9a 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/cardinality.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/cardinality.tsx
@@ -51,11 +51,7 @@ export const cardinalityOperation: OperationDefinition<CardinalityIndexPatternCo
   },
   buildColumn({ suggestedPriority, field, previousColumn }) {
     let params;
-    if (
-      previousColumn?.operationType === 'cardinality' &&
-      previousColumn.dataType === 'number' &&
-      'params' in previousColumn
-    ) {
+    if (previousColumn?.dataType === 'number' && 'params' in previousColumn) {
       params = previousColumn.params;
     }
     return {
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/count.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/count.tsx
index ee59c714f14b1..d821e8544dabf 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/count.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/count.tsx
@@ -41,11 +41,7 @@ export const countOperation: OperationDefinition<CountIndexPatternColumn> = {
   },
   buildColumn({ suggestedPriority, field, previousColumn }) {
     let params;
-    if (
-      previousColumn?.operationType === 'count' &&
-      previousColumn.dataType === 'number' &&
-      'params' in previousColumn
-    ) {
+    if (previousColumn?.dataType === 'number' && 'params' in previousColumn) {
       params = previousColumn.params;
     }
     return {
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/metrics.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/metrics.tsx
index ff3c6d9981455..b723e4c9182d9 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/metrics.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/metrics.tsx
@@ -52,11 +52,7 @@ function buildMetricOperation<T extends MetricColumn<string>>({
     },
     buildColumn: ({ suggestedPriority, field, previousColumn }) => {
       let params;
-      if (
-        previousColumn?.operationType === 'metrics' &&
-        previousColumn.dataType === 'number' &&
-        'params' in previousColumn
-      ) {
+      if (previousColumn?.dataType === 'number' && 'params' in previousColumn) {
         params = previousColumn.params;
       }
       return {

From fdbf1ae7199f06c7511b7aae3e709d2c4dd0f430 Mon Sep 17 00:00:00 2001
From: Joe Reuter <johannes.reuter@elastic.co>
Date: Tue, 8 Sep 2020 11:13:47 +0200
Subject: [PATCH 17/32] remove magic mapping type

---
 .../operations/definitions/cardinality.tsx    |  2 +-
 .../operations/definitions/count.tsx          |  2 +-
 .../definitions/filters/filters.tsx           |  6 +-
 .../operations/definitions/index.ts           | 75 ++++++++++---------
 .../operations/definitions/metrics.tsx        |  2 +-
 5 files changed, 45 insertions(+), 42 deletions(-)

diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/cardinality.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/cardinality.tsx
index 36ca0aed31a9a..95672d82e8561 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/cardinality.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/cardinality.tsx
@@ -51,7 +51,7 @@ export const cardinalityOperation: OperationDefinition<CardinalityIndexPatternCo
   },
   buildColumn({ suggestedPriority, field, previousColumn }) {
     let params;
-    if (previousColumn?.dataType === 'number' && 'params' in previousColumn) {
+    if (previousColumn?.dataType === 'number' && previousColumn?.operationType === 'cardinality') {
       params = previousColumn.params;
     }
     return {
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/count.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/count.tsx
index d821e8544dabf..70f92e967742c 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/count.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/count.tsx
@@ -41,7 +41,7 @@ export const countOperation: OperationDefinition<CountIndexPatternColumn> = {
   },
   buildColumn({ suggestedPriority, field, previousColumn }) {
     let params;
-    if (previousColumn?.dataType === 'number' && 'params' in previousColumn) {
+    if (previousColumn?.dataType === 'number' && previousColumn.operationType === 'count') {
       params = previousColumn.params;
     }
     return {
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx
index a0635d36846cb..ef5cf19a11c5d 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx
@@ -125,11 +125,7 @@ export const filtersOperation: OperationDefinition<FiltersIndexPatternColumn> =
           },
         ],
       };
-    } else if (
-      previousColumn?.operationType === 'filters' &&
-      'params' in previousColumn &&
-      previousColumn.params?.filters
-    ) {
+    } else if (previousColumn?.operationType === 'filters' && previousColumn.params?.filters) {
       params = previousColumn.params;
     }
 
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/index.ts b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/index.ts
index f41c150c4447a..3dd8b659fe0a5 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/index.ts
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/index.ts
@@ -6,12 +6,21 @@
 
 import { IUiSettingsClient, SavedObjectsClientContract, HttpSetup } from 'kibana/public';
 import { IStorageWrapper } from 'src/plugins/kibana_utils/public';
-import { termsOperation } from './terms';
-import { filtersOperation } from './filters';
-import { cardinalityOperation } from './cardinality';
-import { minOperation, averageOperation, sumOperation, maxOperation } from './metrics';
-import { dateHistogramOperation } from './date_histogram';
-import { countOperation } from './count';
+import { termsOperation, TermsIndexPatternColumn } from './terms';
+import { filtersOperation, FiltersIndexPatternColumn } from './filters';
+import { cardinalityOperation, CardinalityIndexPatternColumn } from './cardinality';
+import {
+  minOperation,
+  MinIndexPatternColumn,
+  averageOperation,
+  AvgIndexPatternColumn,
+  sumOperation,
+  SumIndexPatternColumn,
+  maxOperation,
+  MaxIndexPatternColumn,
+} from './metrics';
+import { dateHistogramOperation, DateHistogramIndexPatternColumn } from './date_histogram';
+import { countOperation, CountIndexPatternColumn } from './count';
 import { DimensionPriority, StateSetter, OperationMetadata } from '../../../types';
 import { BaseIndexPatternColumn } from './column_types';
 import { IndexPatternPrivateState, IndexPattern, IndexPatternField } from '../../types';
@@ -19,8 +28,8 @@ import { DateRange } from '../../../../common';
 import { DataPublicPluginStart } from '../../../../../../../src/plugins/data/public';
 
 // List of all operation definitions registered to this data source.
-// If you want to implement a new operation, add it to this array and
-// its type will get propagated to everything else
+// If you want to implement a new operation, add the definition to this array and
+// the column type to the `IndexPatternColumn` union type below.
 const internalOperationDefinitions = [
   filtersOperation,
   termsOperation,
@@ -33,6 +42,22 @@ const internalOperationDefinitions = [
   countOperation,
 ];
 
+/**
+ * A union type of all available column types. If a column is of an unknown type somewhere
+ * withing the indexpattern data source it should be typed as `IndexPatternColumn` to make
+ * typeguards possible that consider all available column types.
+ */
+export type IndexPatternColumn =
+  | FiltersIndexPatternColumn
+  | TermsIndexPatternColumn
+  | DateHistogramIndexPatternColumn
+  | MinIndexPatternColumn
+  | MaxIndexPatternColumn
+  | AvgIndexPatternColumn
+  | CardinalityIndexPatternColumn
+  | SumIndexPatternColumn
+  | CountIndexPatternColumn;
+
 export { termsOperation } from './terms';
 export { filtersOperation } from './filters';
 export { dateHistogramOperation } from './date_histogram';
@@ -109,7 +134,12 @@ interface BaseBuildColumnArgs {
   indexPattern: IndexPattern;
 }
 
-interface FieldBasedOperationDefinition<C extends BaseIndexPatternColumn>
+/**
+ * Shape of an operation definition. If the type parameter of the definition
+ * indicates a field based column, `getPossibleOperationForField` has to be
+ * specified, otherwise `getPossibleOperationForDocument` has to be defined.
+ */
+export interface OperationDefinition<C extends BaseIndexPatternColumn>
   extends BaseOperationDefinitionProps<C> {
   /**
    * Returns the meta data of the operation if applied to the given field. Undefined
@@ -122,7 +152,7 @@ interface FieldBasedOperationDefinition<C extends BaseIndexPatternColumn>
   buildColumn: (
     arg: BaseBuildColumnArgs & {
       field: IndexPatternField;
-      previousColumn?: C | BaseIndexPatternColumn;
+      previousColumn?: IndexPatternColumn;
     }
   ) => C;
   /**
@@ -144,29 +174,6 @@ interface FieldBasedOperationDefinition<C extends BaseIndexPatternColumn>
   onFieldChange: (oldColumn: C, indexPattern: IndexPattern, field: IndexPatternField) => C;
 }
 
-/**
- * Shape of an operation definition. If the type parameter of the definition
- * indicates a field based column, `getPossibleOperationForField` has to be
- * specified, otherwise `getPossibleOperationForDocument` has to be defined.
- */
-export type OperationDefinition<C extends BaseIndexPatternColumn> = FieldBasedOperationDefinition<
-  C
->;
-
-// Helper to to infer the column type out of the operation definition.
-// This is done to avoid it to have to list out the column types along with
-// the operation definition types
-type ColumnFromOperationDefinition<D> = D extends OperationDefinition<infer C> ? C : never;
-
-/**
- * A union type of all available column types. If a column is of an unknown type somewhere
- * withing the indexpattern data source it should be typed as `IndexPatternColumn` to make
- * typeguards possible that consider all available column types.
- */
-export type IndexPatternColumn = ColumnFromOperationDefinition<
-  typeof internalOperationDefinitions[number]
->;
-
 /**
  * A union type of all available operation types. The operation type is a unique id of an operation.
  * Each column is assigned to exactly one operation type.
@@ -177,7 +184,7 @@ export type OperationType = typeof internalOperationDefinitions[number]['type'];
  * This is an operation definition of an unspecified column out of all possible
  * column types.
  */
-export type GenericOperationDefinition = FieldBasedOperationDefinition<IndexPatternColumn>;
+export type GenericOperationDefinition = OperationDefinition<IndexPatternColumn>;
 
 /**
  * List of all available operation definitions
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/metrics.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/metrics.tsx
index b723e4c9182d9..e1f9ed2f87855 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/metrics.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/metrics.tsx
@@ -52,7 +52,7 @@ function buildMetricOperation<T extends MetricColumn<string>>({
     },
     buildColumn: ({ suggestedPriority, field, previousColumn }) => {
       let params;
-      if (previousColumn?.dataType === 'number' && 'params' in previousColumn) {
+      if (previousColumn?.dataType === 'number' && previousColumn.operationType === type) {
         params = previousColumn.params;
       }
       return {

From 5c4c1d50314bb4980f75ab39afb50c9dc5fcb6e5 Mon Sep 17 00:00:00 2001
From: Marta Bondyra <marta.bondyra@elastic.co>
Date: Tue, 8 Sep 2020 11:39:14 +0200
Subject: [PATCH 18/32] revert (simplify) if statements to ternary

---
 .../operations/definitions/cardinality.tsx    |  7 ++---
 .../operations/definitions/count.tsx          |  7 ++---
 .../operations/definitions/metrics.tsx        | 27 ++++++++-----------
 3 files changed, 15 insertions(+), 26 deletions(-)

diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/cardinality.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/cardinality.tsx
index 95672d82e8561..ad04891b637d4 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/cardinality.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/cardinality.tsx
@@ -50,10 +50,6 @@ export const cardinalityOperation: OperationDefinition<CardinalityIndexPatternCo
     );
   },
   buildColumn({ suggestedPriority, field, previousColumn }) {
-    let params;
-    if (previousColumn?.dataType === 'number' && previousColumn?.operationType === 'cardinality') {
-      params = previousColumn.params;
-    }
     return {
       label: ofName(field.displayName),
       dataType: 'number',
@@ -62,7 +58,8 @@ export const cardinalityOperation: OperationDefinition<CardinalityIndexPatternCo
       suggestedPriority,
       sourceField: field.name,
       isBucketed: IS_BUCKETED,
-      params,
+      params:
+        previousColumn && previousColumn.dataType === 'number' ? previousColumn.params : undefined,
     };
   },
   toEsAggsConfig: (column, columnId) => ({
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/count.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/count.tsx
index 70f92e967742c..4e081da2c6dc9 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/count.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/count.tsx
@@ -40,10 +40,6 @@ export const countOperation: OperationDefinition<CountIndexPatternColumn> = {
     }
   },
   buildColumn({ suggestedPriority, field, previousColumn }) {
-    let params;
-    if (previousColumn?.dataType === 'number' && previousColumn.operationType === 'count') {
-      params = previousColumn.params;
-    }
     return {
       label: countLabel,
       dataType: 'number',
@@ -52,7 +48,8 @@ export const countOperation: OperationDefinition<CountIndexPatternColumn> = {
       isBucketed: false,
       scale: 'ratio',
       sourceField: field.name,
-      params,
+      params:
+        previousColumn && previousColumn.dataType === 'number' ? previousColumn.params : undefined,
     };
   },
   toEsAggsConfig: (column, columnId) => ({
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/metrics.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/metrics.tsx
index e1f9ed2f87855..4c37d95f6b050 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/metrics.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/metrics.tsx
@@ -50,22 +50,17 @@ function buildMetricOperation<T extends MetricColumn<string>>({
           (!newField.aggregationRestrictions || newField.aggregationRestrictions![type])
       );
     },
-    buildColumn: ({ suggestedPriority, field, previousColumn }) => {
-      let params;
-      if (previousColumn?.dataType === 'number' && previousColumn.operationType === type) {
-        params = previousColumn.params;
-      }
-      return {
-        label: ofName(field.displayName),
-        dataType: 'number',
-        operationType: type,
-        suggestedPriority,
-        sourceField: field.name,
-        isBucketed: false,
-        scale: 'ratio',
-        params,
-      };
-    },
+    buildColumn: ({ suggestedPriority, field, previousColumn }) => ({
+      label: ofName(field.displayName),
+      dataType: 'number',
+      operationType: type,
+      suggestedPriority,
+      sourceField: field.name,
+      isBucketed: false,
+      scale: 'ratio',
+      params:
+        previousColumn && previousColumn.dataType === 'number' ? previousColumn.params : undefined,
+    }),
     onFieldChange: (oldColumn, indexPattern, field) => {
       return {
         ...oldColumn,

From 6e0b3f341269b82c64c1de5f34af65dc4d905b30 Mon Sep 17 00:00:00 2001
From: Marta Bondyra <marta.bondyra@elastic.co>
Date: Tue, 8 Sep 2020 12:04:01 +0200
Subject: [PATCH 19/32] types again

---
 .../operations/definitions/cardinality.tsx                  | 6 +++++-
 .../operations/definitions/count.tsx                        | 6 +++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/cardinality.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/cardinality.tsx
index ad04891b637d4..b0777c7febd7d 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/cardinality.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/cardinality.tsx
@@ -59,7 +59,11 @@ export const cardinalityOperation: OperationDefinition<CardinalityIndexPatternCo
       sourceField: field.name,
       isBucketed: IS_BUCKETED,
       params:
-        previousColumn && previousColumn.dataType === 'number' ? previousColumn.params : undefined,
+        previousColumn?.dataType === 'number' &&
+        previousColumn.params &&
+        'format' in previousColumn.params
+          ? previousColumn.params
+          : undefined,
     };
   },
   toEsAggsConfig: (column, columnId) => ({
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/count.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/count.tsx
index 4e081da2c6dc9..bb1aef856de78 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/count.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/count.tsx
@@ -49,7 +49,11 @@ export const countOperation: OperationDefinition<CountIndexPatternColumn> = {
       scale: 'ratio',
       sourceField: field.name,
       params:
-        previousColumn && previousColumn.dataType === 'number' ? previousColumn.params : undefined,
+        previousColumn?.dataType === 'number' &&
+        previousColumn.params &&
+        'format' in previousColumn.params
+          ? previousColumn.params
+          : undefined,
     };
   },
   toEsAggsConfig: (column, columnId) => ({

From c0d36e6b603fdac58dd72ebb8fafd9c67f78f3d1 Mon Sep 17 00:00:00 2001
From: Marta Bondyra <marta.bondyra@elastic.co>
Date: Tue, 8 Sep 2020 17:18:59 +0200
Subject: [PATCH 20/32] defaultFilter fix

---
 .../definitions/filters/filters.tsx           | 23 ++++++++-----------
 1 file changed, 10 insertions(+), 13 deletions(-)

diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx
index ef5cf19a11c5d..8bcb1547d0856 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx
@@ -57,17 +57,14 @@ export const defaultLabel = i18n.translate('xpack.lens.indexPattern.filters.labe
   defaultMessage: 'All records',
 });
 
-// we don't have an access data plugin in places where we use this function,
-// what's why we have a fallback default input
-const getDefaultFilter = (data?: DataPublicPluginStart): Filter => ({
-  input: data
-    ? data.query.queryString.getDefaultQuery()
-    : {
-        query: '',
-        language: 'kuery',
-      },
+// to do: get the language from uiSettings
+const defaultFilter: Filter = {
+  input: {
+    query: '',
+    language: 'kuery',
+  },
   label: '',
-});
+};
 
 export const isQueryValid = (input: Query, indexPattern: IndexPattern) => {
   try {
@@ -112,7 +109,7 @@ export const filtersOperation: OperationDefinition<FiltersIndexPatternColumn> =
   onFieldChange: (oldColumn, indexPattern, field) => oldColumn,
 
   buildColumn({ suggestedPriority, field, previousColumn }) {
-    let params = { filters: [getDefaultFilter()] };
+    let params = { filters: [defaultFilter] };
     if (previousColumn?.operationType === 'terms') {
       params = {
         filters: [
@@ -151,7 +148,7 @@ export const filtersOperation: OperationDefinition<FiltersIndexPatternColumn> =
       type: 'filters',
       schema: 'segment',
       params: {
-        filters: validFilters?.length > 0 ? validFilters : [getDefaultFilter()],
+        filters: validFilters?.length > 0 ? validFilters : [defaultFilter],
       },
     };
   },
@@ -182,7 +179,7 @@ export const filtersOperation: OperationDefinition<FiltersIndexPatternColumn> =
             filters={filters}
             setFilters={setFilters}
             indexPattern={indexPattern}
-            defaultQuery={getDefaultFilter(data)}
+            defaultQuery={defaultFilter}
           />
         </EuiFormRow>
       </EuiForm>

From 2f6339d0be9b9eacd6608add6618d9fadcad32d9 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Tue, 8 Sep 2020 18:23:59 -0400
Subject: [PATCH 21/32] Fixing up KWL bar to support `isInvalid`

and move some sass files around
---
 .../components/local_nav/_local_search.scss   |  1 +
 .../ui/query_string_input/_query_bar.scss     | 14 +++--
 .../query_string_input/query_string_input.tsx |  2 +
 .../data/public/ui/typeahead/constants.ts     |  2 +-
 .../editor_frame/config_panel/_index.scss     |  1 -
 ...on_popover.scss => dimension_popover.scss} |  7 +++
 .../config_panel/dimension_popover.tsx        |  3 +-
 .../dimension_panel/popover_editor.scss       | 19 -------
 .../definitions/filters/filter_popover.scss   |  3 ++
 .../definitions/filters/filter_popover.tsx    | 51 ++++++++-----------
 10 files changed, 44 insertions(+), 59 deletions(-)
 rename x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/{_dimension_popover.scss => dimension_popover.scss} (51%)
 create mode 100644 x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.scss

diff --git a/packages/kbn-ui-framework/src/components/local_nav/_local_search.scss b/packages/kbn-ui-framework/src/components/local_nav/_local_search.scss
index 130807790e987..ce96f7af77eec 100644
--- a/packages/kbn-ui-framework/src/components/local_nav/_local_search.scss
+++ b/packages/kbn-ui-framework/src/components/local_nav/_local_search.scss
@@ -28,6 +28,7 @@
 }
 
 .kuiLocalSearchAssistedInput {
+  overflow: visible !important; // Override EUI form control
   display: flex;
   flex: 1 1 100%;
   position: relative;
diff --git a/src/plugins/data/public/ui/query_string_input/_query_bar.scss b/src/plugins/data/public/ui/query_string_input/_query_bar.scss
index 00895ec49003b..ba464546386f4 100644
--- a/src/plugins/data/public/ui/query_string_input/_query_bar.scss
+++ b/src/plugins/data/public/ui/query_string_input/_query_bar.scss
@@ -11,27 +11,25 @@
 .kbnQueryBar__textarea {
   z-index: $euiZContentMenu;
   resize: none !important; // When in the group, it will autosize
-  height: $euiSizeXXL;
+  height: $euiFormControlHeight;
   // Unlike most inputs within layout control groups, the text area still needs a border.
   // These adjusts help it sit above the control groups shadow to line up correctly.
-  padding-top: $euiSizeS + 3px !important;
-  transform: translateY(-2px);
-  padding: $euiSizeS - 1px;
+  padding: $euiSizeS;
+  padding-top: $euiSizeS + 3px;
+  transform: translateY(-1px) translateX(-1px);
 
-  &:not(:focus) {
+  &:not(:focus):not(:invalid) {
     @include euiYScrollWithShadows;
     white-space: nowrap;
     overflow-y: hidden;
     overflow-x: hidden;
-    border: none;
-    box-shadow: none;
   }
 
   // When focused, let it scroll
   &:focus {
     overflow-x: auto;
     overflow-y: auto;
-    width: calc(100% + 1px); // To overtake the group's fake border
+    // width: calc(100% + 1px); // To overtake the group's fake border
     white-space: normal;
   }
 }
diff --git a/src/plugins/data/public/ui/query_string_input/query_string_input.tsx b/src/plugins/data/public/ui/query_string_input/query_string_input.tsx
index 54c230e256725..33b550d44eb80 100644
--- a/src/plugins/data/public/ui/query_string_input/query_string_input.tsx
+++ b/src/plugins/data/public/ui/query_string_input/query_string_input.tsx
@@ -64,6 +64,7 @@ interface Props {
   dataTestSubj?: string;
   size?: SuggestionsListSize;
   className?: string;
+  isInvalid?: boolean;
 }
 
 interface State {
@@ -653,6 +654,7 @@ export class QueryStringInputUI extends Component<Props, State> {
                 }
                 role="textbox"
                 data-test-subj={this.props.dataTestSubj || 'queryInput'}
+                isInvalid={this.props.isInvalid}
               >
                 {this.getQueryString()}
               </EuiTextArea>
diff --git a/src/plugins/data/public/ui/typeahead/constants.ts b/src/plugins/data/public/ui/typeahead/constants.ts
index 08f9bd23e16f3..0e28891a14535 100644
--- a/src/plugins/data/public/ui/typeahead/constants.ts
+++ b/src/plugins/data/public/ui/typeahead/constants.ts
@@ -33,4 +33,4 @@ export const SUGGESTIONS_LIST_REQUIRED_BOTTOM_SPACE = 250;
  * A distance in px to display suggestions list right under the query input without a gap
  * @public
  */
-export const SUGGESTIONS_LIST_REQUIRED_TOP_OFFSET = 2;
+export const SUGGESTIONS_LIST_REQUIRED_TOP_OFFSET = 1;
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_index.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_index.scss
index 5b968abd0c061..954fbfadf159b 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_index.scss
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_index.scss
@@ -1,3 +1,2 @@
 @import 'config_panel';
-@import 'dimension_popover';
 @import 'layer_panel';
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_dimension_popover.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.scss
similarity index 51%
rename from x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_dimension_popover.scss
rename to x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.scss
index 691cda9ff0d79..98036c7f31bd9 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_dimension_popover.scss
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.scss
@@ -9,3 +9,10 @@
   display: block;
   word-break: break-word;
 }
+
+// todo: remove after closing https://github.com/elastic/eui/issues/3548
+.lnsDimensionPopover__fixTranslateDnd {
+  // sass-lint:disable-block no-important
+  transform: none !important;
+}
+
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx
index 899ef56eb2e74..a90bd8122d18e 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx
@@ -3,6 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
+import './dimension_popover.scss';
 
 import React from 'react';
 import { EuiPopover } from '@elastic/eui';
@@ -31,7 +32,7 @@ export function DimensionPopover({
     <EuiPopover
       className="lnsDimensionPopover"
       anchorClassName="lnsDimensionPopover__trigger"
-      panelClassName="lnsDimensionPanel__fixTranslateDnd"
+      panelClassName="lnsDimensionPopover__fixTranslateDnd"
       isOpen={
         popoverState.isOpen &&
         (popoverState.openId === accessor || (noMatch && popoverState.addingToGroupId === groupId))
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.scss b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.scss
index e79fb86b382f8..3f75b5ad86669 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.scss
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.scss
@@ -18,22 +18,3 @@
   padding-top: 0;
   padding-bottom: 0;
 }
-
-.lnsIndexPatternDimensionEditor__filtersEditor {
-  max-width: 100%;
-  width: $euiSize * 60;
-}
-
-.lnsIndexPatternDimensionEditor__queryInput--invalid {
-  textarea {
-    // sass-lint:disable-block no-important
-    background-image: linear-gradient(to top, $euiColorDanger, $euiColorDanger 2px, transparent 2px, transparent 100%) !important;
-    background-size: 100%;
-  }
-}
-
-// todo: remove after closing https://github.com/elastic/eui/issues/3548
-.lnsDimensionPanel__fixTranslateDnd {
-  // sass-lint:disable-block no-important
-  transform: none !important;
-}
\ No newline at end of file
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.scss b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.scss
new file mode 100644
index 0000000000000..6838812e4b999
--- /dev/null
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.scss
@@ -0,0 +1,3 @@
+.lnsIndexPatternDimensionEditor__filtersEditor {
+  width: $euiSize * 60;
+}
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx
index fec15e6190a76..e652643dcf437 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx
@@ -3,9 +3,10 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
+import './filter_popover.scss';
 
 import React, { MouseEventHandler, useState } from 'react';
-import { EuiPopover, EuiFieldText, EuiForm, EuiFormRow, keys } from '@elastic/eui';
+import { EuiPopover, EuiFieldText, EuiSpacer, keys } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { debounce } from 'lodash';
 import { FilterValue, defaultLabel, isQueryValid } from '.';
@@ -50,7 +51,7 @@ export const FilterPopover = ({
 
   return (
     <EuiPopover
-      anchorClassName="lnsLayerPanel__anchor"
+      anchorClassName="eui-fullWidth"
       panelClassName="lnsIndexPatternDimensionEditor__filtersEditor"
       isOpen={isOpenByCreation || isPopoverOpen}
       ownFocus
@@ -66,28 +67,23 @@ export const FilterPopover = ({
         />
       }
     >
-      <EuiForm>
-        <EuiFormRow fullWidth>
-          <QueryInput
-            isInvalid={!isQueryValid(filter.input, indexPattern)}
-            value={filter.input}
-            indexPattern={indexPattern}
-            onChange={setFilterQuery}
-            onSubmit={() => {
-              if (inputRef.current) inputRef.current.focus();
-            }}
-          />
-        </EuiFormRow>
-        <EuiFormRow fullWidth>
-          <LabelInput
-            value={filter.label || ''}
-            onChange={setFilterLabel}
-            placeholder={getPlaceholder(filter.input.query)}
-            inputRef={inputRef}
-            onSubmit={() => setPopoverOpen(false)}
-          />
-        </EuiFormRow>
-      </EuiForm>
+      <QueryInput
+        isInvalid={!isQueryValid(filter.input, indexPattern)}
+        value={filter.input}
+        indexPattern={indexPattern}
+        onChange={setFilterQuery}
+        onSubmit={() => {
+          if (inputRef.current) inputRef.current.focus();
+        }}
+      />
+      <EuiSpacer size="s" />
+      <LabelInput
+        value={filter.label || ''}
+        onChange={setFilterLabel}
+        placeholder={getPlaceholder(filter.input.query)}
+        inputRef={inputRef}
+        onSubmit={() => setPopoverOpen(false)}
+      />
     </EuiPopover>
   );
 };
@@ -120,7 +116,8 @@ const QueryInput = ({
 
   return (
     <QueryStringInput
-      className={isInvalid ? 'lnsIndexPatternDimensionEditor__queryInput--invalid' : ''}
+      size="s"
+      isInvalid={isInvalid}
       bubbleSubmitEvent={false}
       indexPatterns={[indexPattern]}
       query={inputValue}
@@ -176,7 +173,6 @@ const LabelInput = ({
 
   return (
     <EuiFieldText
-      compressed
       data-test-subj="indexPattern-filters-label"
       value={inputValue}
       onChange={handleInputChange}
@@ -195,9 +191,6 @@ const LabelInput = ({
       prepend={i18n.translate('xpack.lens.indexPattern.filters.label', {
         defaultMessage: 'Label',
       })}
-      aria-label={i18n.translate('xpack.lens.indexPattern.filters.label.aria-message', {
-        defaultMessage: 'Label for your filter',
-      })}
     />
   );
 };

From 03c00d8b5994ca6a3046bf1888bb6c9a1e47af5e Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Tue, 8 Sep 2020 18:54:57 -0400
Subject: [PATCH 22/32] Fixing up layout of filter agg button

---
 .../config_panel/_layer_panel.scss            |  6 --
 .../definitions/filters/filters.scss          |  9 +++
 .../definitions/filters/filters.tsx           | 70 ++++++++-----------
 3 files changed, 38 insertions(+), 47 deletions(-)
 create mode 100644 x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.scss

diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_layer_panel.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_layer_panel.scss
index 5b07f66d546b2..f9e267c4c237b 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_layer_panel.scss
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_layer_panel.scss
@@ -51,12 +51,6 @@
   padding: $euiSizeS;
 }
 
-.lnsLayerPanel__filterLink {
-  min-height: $euiSizeL;
-  width: 100%;
-  align-self: flex-start;
-  word-break: break-word;
-}
 
 .lnsLayerPanel__styleEditor {
   width: $euiSize * 30;
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.scss b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.scss
new file mode 100644
index 0000000000000..5de9d5e19fa1b
--- /dev/null
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.scss
@@ -0,0 +1,9 @@
+
+.lnsFiltersOperation__popoverButton {
+  min-height: $euiSizeXL;
+  width: 100%;
+
+  .lnsFiltersOperation__popoverButtonContent {
+    justify-content: flex-start;
+  }
+}
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx
index 8bcb1547d0856..aac36c58c8038 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx
@@ -3,6 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
+import './filters.scss';
 
 import React, { MouseEventHandler, useState } from 'react';
 import { omit } from 'lodash';
@@ -17,10 +18,8 @@ import {
   EuiPanel,
   euiDragDropReorder,
   EuiButtonIcon,
-  EuiLink,
   EuiText,
   EuiButtonEmpty,
-  EuiForm,
   EuiFormRow,
   htmlIdGenerator,
 } from '@elastic/eui';
@@ -169,20 +168,19 @@ export const filtersOperation: OperationDefinition<FiltersIndexPatternColumn> =
       );
 
     return (
-      <EuiForm>
-        <EuiFormRow
-          label={i18n.translate('xpack.lens.indexPattern.filters.queries', {
-            defaultMessage: 'Queries',
-          })}
-        >
-          <FilterList
-            filters={filters}
-            setFilters={setFilters}
-            indexPattern={indexPattern}
-            defaultQuery={defaultFilter}
-          />
-        </EuiFormRow>
-      </EuiForm>
+      <EuiFormRow
+        label={i18n.translate('xpack.lens.indexPattern.filters.queries', {
+          defaultMessage: 'Queries',
+        })}
+        labelType="legend"
+      >
+        <FilterList
+          filters={filters}
+          setFilters={setFilters}
+          indexPattern={indexPattern}
+          defaultQuery={defaultFilter}
+        />
+      </EuiFormRow>
     );
   },
 };
@@ -246,7 +244,7 @@ export const FilterList = ({
     }
   };
   return (
-    <div>
+    <>
       <EuiDragDropContext onDragEnd={onDragEnd}>
         <EuiDroppable droppableId="FILTERS_DROPPABLE_AREA" spacing="s">
           {localFilters?.map((filter: FilterValue, idx: number) => {
@@ -262,16 +260,6 @@ export const FilterList = ({
                 {(provided) => (
                   <EuiPanel paddingSize="none">
                     <EuiFlexGroup gutterSize="xs" alignItems="center" responsive={false}>
-                      <EuiFlexItem grow={false}>
-                        <div className="lnsLayerPanel__dndGrab">
-                          <EuiIcon
-                            type="grab"
-                            aria-label={i18n.translate('xpack.lens.indexPattern.filters.grabIcon', {
-                              defaultMessage: 'Grab icon',
-                            })}
-                          />
-                        </div>
-                      </EuiFlexItem>
                       <EuiFlexItem
                         grow={true}
                         data-test-subj="indexPattern-filters-existingFilterContainer"
@@ -282,20 +270,19 @@ export const FilterList = ({
                           indexPattern={indexPattern}
                           filter={filter}
                           Button={({ onClick }: { onClick: MouseEventHandler }) => (
-                            <EuiLink
-                              color="text"
-                              onClick={onClick}
-                              className="lnsLayerPanel__filterLink"
+                            <EuiButtonEmpty
+                              className="lnsFiltersOperation__popoverButton"
                               data-test-subj="indexPattern-filters-existingFilterTrigger"
+                              size="xs"
+                              onClick={onClick}
+                              color={isQueryValid(input, indexPattern) ? 'text' : 'danger'}
+                              iconType={isQueryValid(input, indexPattern) ? 'grab' : 'alert'}
+                              contentProps={{
+                                className: 'lnsFiltersOperation__popoverButtonContent',
+                              }}
                             >
-                              <EuiText
-                                size="s"
-                                textAlign="left"
-                                color={isQueryValid(input, indexPattern) ? 'default' : 'danger'}
-                              >
-                                {label || input.query || defaultLabel}
-                              </EuiText>
-                            </EuiLink>
+                              {label || input.query || defaultLabel}
+                            </EuiButtonEmpty>
                           )}
                           setFilter={(f: FilterValue) => {
                             onChangeValue(f.id, f.input, f.label);
@@ -304,7 +291,7 @@ export const FilterList = ({
                       </EuiFlexItem>
                       <EuiFlexItem grow={false}>
                         <EuiButtonIcon
-                          size="m"
+                          iconSize="s"
                           iconType="cross"
                           color="danger"
                           data-test-subj="indexPattern-filters-existingFilterDelete"
@@ -329,6 +316,7 @@ export const FilterList = ({
       </EuiDragDropContext>
 
       <EuiButtonEmpty
+        size="xs"
         iconType="plusInCircle"
         onClick={() => {
           onAddFilter();
@@ -339,6 +327,6 @@ export const FilterList = ({
           defaultMessage: 'Add a search query',
         })}
       </EuiButtonEmpty>
-    </div>
+    </>
   );
 };

From 321655311528ec7d10d0c5cbe1ffe0e7dea8ab80 Mon Sep 17 00:00:00 2001
From: Marta Bondyra <marta.bondyra@elastic.co>
Date: Wed, 9 Sep 2020 09:36:03 +0200
Subject: [PATCH 23/32] types fixes

---
 ...kibana-plugin-plugins-data-public.querystringinput.md | 2 +-
 src/plugins/data/public/public.api.md                    | 2 +-
 .../operations/definitions/filters/filters.tsx           | 9 +--------
 3 files changed, 3 insertions(+), 10 deletions(-)

diff --git a/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.querystringinput.md b/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.querystringinput.md
index 9f3ed8c1263ba..cf171d9ee9f37 100644
--- a/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.querystringinput.md
+++ b/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.querystringinput.md
@@ -7,5 +7,5 @@
 <b>Signature:</b>
 
 ```typescript
-QueryStringInput: React.FC<Pick<Props, "query" | "prepend" | "size" | "placeholder" | "onChange" | "onBlur" | "onSubmit" | "indexPatterns" | "dataTestSubj" | "screenTitle" | "disableAutoFocus" | "persistedLog" | "bubbleSubmitEvent" | "languageSwitcherPopoverAnchorPosition" | "onChangeQueryInputFocus">>
+QueryStringInput: React.FC<Pick<Props, "query" | "prepend" | "size" | "className" | "placeholder" | "onChange" | "onBlur" | "onSubmit" | "isInvalid" | "indexPatterns" | "dataTestSubj" | "screenTitle" | "disableAutoFocus" | "persistedLog" | "bubbleSubmitEvent" | "languageSwitcherPopoverAnchorPosition" | "onChangeQueryInputFocus">>
 ```
diff --git a/src/plugins/data/public/public.api.md b/src/plugins/data/public/public.api.md
index c2cc2fdc3c134..40952c26c5704 100644
--- a/src/plugins/data/public/public.api.md
+++ b/src/plugins/data/public/public.api.md
@@ -1465,7 +1465,7 @@ export interface QueryState {
 // Warning: (ae-missing-release-tag) "QueryStringInput" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const QueryStringInput: React.FC<Pick<Props_3, "query" | "prepend" | "size" | "className" | "placeholder" | "onChange" | "onBlur" | "onSubmit" | "indexPatterns" | "dataTestSubj" | "screenTitle" | "disableAutoFocus" | "persistedLog" | "bubbleSubmitEvent" | "languageSwitcherPopoverAnchorPosition" | "onChangeQueryInputFocus">>;
+export const QueryStringInput: React.FC<Pick<Props_3, "query" | "prepend" | "size" | "className" | "placeholder" | "onChange" | "onBlur" | "onSubmit" | "isInvalid" | "indexPatterns" | "dataTestSubj" | "screenTitle" | "disableAutoFocus" | "persistedLog" | "bubbleSubmitEvent" | "languageSwitcherPopoverAnchorPosition" | "onChangeQueryInputFocus">>;
 
 // @public (undocumented)
 export type QuerySuggestion = QuerySuggestionBasic | QuerySuggestionField;
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx
index aac36c58c8038..8f207a0ad6472 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx
@@ -14,11 +14,9 @@ import {
   EuiDroppable,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiIcon,
   EuiPanel,
   euiDragDropReorder,
   EuiButtonIcon,
-  EuiText,
   EuiButtonEmpty,
   EuiFormRow,
   htmlIdGenerator,
@@ -28,12 +26,7 @@ import { OperationDefinition } from '../index';
 import { FieldBasedIndexPatternColumn } from '../column_types';
 import { FilterPopover } from './filter_popover';
 import { IndexPattern } from '../../../types';
-import {
-  Query,
-  esKuery,
-  esQuery,
-  DataPublicPluginStart,
-} from '../../../../../../../../src/plugins/data/public';
+import { Query, esKuery, esQuery } from '../../../../../../../../src/plugins/data/public';
 
 const generateId = htmlIdGenerator();
 

From 127e539d898b3b220c6e42b8ec79551babfd6066 Mon Sep 17 00:00:00 2001
From: Marta Bondyra <marta.bondyra@elastic.co>
Date: Wed, 9 Sep 2020 10:46:25 +0200
Subject: [PATCH 24/32] refactor: complicated condition

---
 .../dimension_panel/bucket_nesting_editor.tsx          | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/bucket_nesting_editor.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/bucket_nesting_editor.tsx
index d3650cd76ec32..5b064e7968d82 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/bucket_nesting_editor.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/bucket_nesting_editor.tsx
@@ -54,15 +54,6 @@ export function BucketNestingEditor({
   if (aggColumns.length === 1) {
     const [target] = aggColumns;
 
-    if (
-      (column.operationType === 'filters' && target.operationType === 'date_histogram') ||
-      (column.operationType === 'date_histogram' && target.operationType === 'filters') ||
-      (column.operationType === 'filters' && target.operationType === 'filters') ||
-      (column.operationType === 'date_histogram' && target.operationType === 'date_histogram')
-    ) {
-      return null;
-    }
-
     function toggleNesting() {
       if (prevColumn) {
         setColumns(nestColumn(layer.columnOrder, columnId, target.value));
@@ -71,6 +62,7 @@ export function BucketNestingEditor({
       }
     }
 
+    // todo: move the copy to operations
     const topLevelCopy: Record<string, string> = {
       terms: i18n.translate('xpack.lens.indexPattern.groupingOverallTerms', {
         defaultMessage: 'Overall top {field}',

From 3a29c0f8d5af2be5042fcbdd8ad8b33b15bd10c5 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 9 Sep 2020 12:25:15 -0400
Subject: [PATCH 25/32] Fixing word-wrap and adding more titles

---
 .../components/local_nav/_local_search.scss   |  8 ----
 .../ui/query_string_input/_query_bar.scss     | 10 +++++
 .../query_string_input/query_string_input.tsx |  2 +-
 .../definitions/filters/filters.scss          |  7 +--
 .../definitions/filters/filters.tsx           | 45 ++++++++++++++-----
 5 files changed, 47 insertions(+), 25 deletions(-)

diff --git a/packages/kbn-ui-framework/src/components/local_nav/_local_search.scss b/packages/kbn-ui-framework/src/components/local_nav/_local_search.scss
index ce96f7af77eec..740ae664c7f5b 100644
--- a/packages/kbn-ui-framework/src/components/local_nav/_local_search.scss
+++ b/packages/kbn-ui-framework/src/components/local_nav/_local_search.scss
@@ -26,14 +26,6 @@
   border-radius: 0;
   border-left-width: 0;
 }
-
-.kuiLocalSearchAssistedInput {
-  overflow: visible !important; // Override EUI form control
-  display: flex;
-  flex: 1 1 100%;
-  position: relative;
-}
-
 /**
  * 1. em used for right padding so documentation link and query string
  *    won't overlap if the user increases their default browser font size
diff --git a/src/plugins/data/public/ui/query_string_input/_query_bar.scss b/src/plugins/data/public/ui/query_string_input/_query_bar.scss
index ba464546386f4..c437a4c0d9ca5 100644
--- a/src/plugins/data/public/ui/query_string_input/_query_bar.scss
+++ b/src/plugins/data/public/ui/query_string_input/_query_bar.scss
@@ -8,6 +8,13 @@
   border-right: none !important;
 }
 
+.kbnQueryBar__textareaWrap {
+  overflow: visible !important; // Override EUI form control
+  display: flex;
+  flex: 1 1 100%;
+  position: relative;
+}
+
 .kbnQueryBar__textarea {
   z-index: $euiZContentMenu;
   resize: none !important; // When in the group, it will autosize
@@ -20,6 +27,9 @@
 
   &:not(:focus):not(:invalid) {
     @include euiYScrollWithShadows;
+  }
+
+  &:not(:focus) {
     white-space: nowrap;
     overflow-y: hidden;
     overflow-x: hidden;
diff --git a/src/plugins/data/public/ui/query_string_input/query_string_input.tsx b/src/plugins/data/public/ui/query_string_input/query_string_input.tsx
index 33b550d44eb80..f159cac664a9e 100644
--- a/src/plugins/data/public/ui/query_string_input/query_string_input.tsx
+++ b/src/plugins/data/public/ui/query_string_input/query_string_input.tsx
@@ -610,7 +610,7 @@ export class QueryStringInputUI extends Component<Props, State> {
           >
             <div
               role="search"
-              className="euiFormControlLayout__childrenWrapper kuiLocalSearchAssistedInput"
+              className="euiFormControlLayout__childrenWrapper kbnQueryBar__textareaWrap"
               ref={this.queryBarInputDivRefInstance}
             >
               <EuiTextArea
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.scss b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.scss
index 5de9d5e19fa1b..37cf1ee582768 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.scss
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.scss
@@ -1,9 +1,6 @@
-
 .lnsFiltersOperation__popoverButton {
+  @include euiTextBreakWord;
+  @include euiFontSizeS;
   min-height: $euiSizeXL;
   width: 100%;
-
-  .lnsFiltersOperation__popoverButtonContent {
-    justify-content: flex-start;
-  }
 }
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx
index 8f207a0ad6472..b96bcf6dc9ff5 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx
@@ -18,7 +18,9 @@ import {
   euiDragDropReorder,
   EuiButtonIcon,
   EuiButtonEmpty,
+  EuiIcon,
   EuiFormRow,
+  EuiLink,
   htmlIdGenerator,
 } from '@elastic/eui';
 import { updateColumnParam } from '../../../state_helpers';
@@ -236,12 +238,15 @@ export const FilterList = ({
       updateFilters(items);
     }
   };
+
   return (
     <>
       <EuiDragDropContext onDragEnd={onDragEnd}>
         <EuiDroppable droppableId="FILTERS_DROPPABLE_AREA" spacing="s">
           {localFilters?.map((filter: FilterValue, idx: number) => {
             const { input, label, id } = filter;
+            const queryIsValid = isQueryValid(input, indexPattern);
+
             return (
               <EuiDraggable
                 spacing="m"
@@ -252,7 +257,24 @@ export const FilterList = ({
               >
                 {(provided) => (
                   <EuiPanel paddingSize="none">
-                    <EuiFlexGroup gutterSize="xs" alignItems="center" responsive={false}>
+                    <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
+                      <EuiFlexItem grow={false}>{/* Empty for spacing */}</EuiFlexItem>
+                      <EuiFlexItem grow={false}>
+                        <EuiIcon
+                          size="s"
+                          color={queryIsValid ? 'subdued' : 'danger'}
+                          type={queryIsValid ? 'grab' : 'alert'}
+                          title={
+                            queryIsValid
+                              ? i18n.translate('xpack.lens.indexPattern.filters.dragToReorder', {
+                                  defaultMessage: 'Drag to reorder',
+                                })
+                              : i18n.translate('xpack.lens.indexPattern.filters.isInvalid', {
+                                  defaultMessage: 'This query is invalid',
+                                })
+                          }
+                        />
+                      </EuiFlexItem>
                       <EuiFlexItem
                         grow={true}
                         data-test-subj="indexPattern-filters-existingFilterContainer"
@@ -263,19 +285,17 @@ export const FilterList = ({
                           indexPattern={indexPattern}
                           filter={filter}
                           Button={({ onClick }: { onClick: MouseEventHandler }) => (
-                            <EuiButtonEmpty
+                            <EuiLink
                               className="lnsFiltersOperation__popoverButton"
                               data-test-subj="indexPattern-filters-existingFilterTrigger"
-                              size="xs"
                               onClick={onClick}
-                              color={isQueryValid(input, indexPattern) ? 'text' : 'danger'}
-                              iconType={isQueryValid(input, indexPattern) ? 'grab' : 'alert'}
-                              contentProps={{
-                                className: 'lnsFiltersOperation__popoverButtonContent',
-                              }}
+                              color={queryIsValid ? 'text' : 'danger'}
+                              title={i18n.translate('xpack.lens.indexPattern.filters.clickToEdit', {
+                                defaultMessage: 'Click to edit',
+                              })}
                             >
                               {label || input.query || defaultLabel}
-                            </EuiButtonEmpty>
+                            </EuiLink>
                           )}
                           setFilter={(f: FilterValue) => {
                             onChangeValue(f.id, f.input, f.label);
@@ -292,11 +312,14 @@ export const FilterList = ({
                             onRemoveFilter(filter.id);
                           }}
                           aria-label={i18n.translate(
-                            'xpack.lens.indexPattern.filters.deleteSearchQuery',
+                            'xpack.lens.indexPattern.filters.removeSearchQuery',
                             {
-                              defaultMessage: 'Delete search query',
+                              defaultMessage: 'Remove search query',
                             }
                           )}
+                          title={i18n.translate('xpack.lens.indexPattern.filters.remove', {
+                            defaultMessage: 'Remove',
+                          })}
                         />
                       </EuiFlexItem>
                     </EuiFlexGroup>

From b539a0f3fbdc4b4a495872fced6ad80e59010f55 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 9 Sep 2020 12:35:11 -0400
Subject: [PATCH 26/32] Cleanup

---
 src/plugins/data/public/ui/query_string_input/_query_bar.scss    | 1 -
 .../editor_frame/config_panel/_layer_panel.scss                  | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/plugins/data/public/ui/query_string_input/_query_bar.scss b/src/plugins/data/public/ui/query_string_input/_query_bar.scss
index c437a4c0d9ca5..1ff24c61954e7 100644
--- a/src/plugins/data/public/ui/query_string_input/_query_bar.scss
+++ b/src/plugins/data/public/ui/query_string_input/_query_bar.scss
@@ -39,7 +39,6 @@
   &:focus {
     overflow-x: auto;
     overflow-y: auto;
-    // width: calc(100% + 1px); // To overtake the group's fake border
     white-space: normal;
   }
 }
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_layer_panel.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_layer_panel.scss
index f9e267c4c237b..ab53ff983ca26 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_layer_panel.scss
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_layer_panel.scss
@@ -51,7 +51,6 @@
   padding: $euiSizeS;
 }
 
-
 .lnsLayerPanel__styleEditor {
   width: $euiSize * 30;
   padding: $euiSizeS;

From c18c658ed0caad8da56285e9839d5b0d16345747 Mon Sep 17 00:00:00 2001
From: Marta Bondyra <marta.bondyra@gmail.com>
Date: Wed, 9 Sep 2020 19:24:27 +0200
Subject: [PATCH 27/32] Update
 x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx

---
 .../editor_frame/config_panel/dimension_popover.tsx              | 1 -
 1 file changed, 1 deletion(-)

diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx
index a90bd8122d18e..a325fe87a0bda 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx
@@ -3,7 +3,6 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import './dimension_popover.scss';
 
 import React from 'react';
 import { EuiPopover } from '@elastic/eui';

From 871ec5b6bc1eb4fe635e5594a0e30da28350e7a9 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 9 Sep 2020 13:51:29 -0400
Subject: [PATCH 28/32] Revert "Update
 x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx"

This reverts commit c18c658ed0caad8da56285e9839d5b0d16345747.
---
 .../editor_frame/config_panel/dimension_popover.tsx              | 1 +
 1 file changed, 1 insertion(+)

diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx
index a325fe87a0bda..a90bd8122d18e 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx
@@ -3,6 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
+import './dimension_popover.scss';
 
 import React from 'react';
 import { EuiPopover } from '@elastic/eui';

From 5cf74900dc98a9b06017ba50356d61021853d21c Mon Sep 17 00:00:00 2001
From: Marta Bondyra <marta.bondyra@elastic.co>
Date: Thu, 10 Sep 2020 10:38:35 +0200
Subject: [PATCH 29/32] refactor: copy

---
 .../dimension_panel/bucket_nesting_editor.tsx |  4 +--
 .../definitions/filters/filter_popover.tsx    |  6 ++---
 .../definitions/filters/filters.test.tsx      |  6 ++---
 .../definitions/filters/filters.tsx           | 27 +++++++------------
 4 files changed, 18 insertions(+), 25 deletions(-)

diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/bucket_nesting_editor.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/bucket_nesting_editor.tsx
index 5b064e7968d82..10ae1936291c4 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/bucket_nesting_editor.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/bucket_nesting_editor.tsx
@@ -69,7 +69,7 @@ export function BucketNestingEditor({
         values: { field: fieldName },
       }),
       filters: i18n.translate('xpack.lens.indexPattern.groupingOverallFilters', {
-        defaultMessage: 'Search query overall',
+        defaultMessage: 'Top values for each custom query',
       }),
       date_histogram: i18n.translate('xpack.lens.indexPattern.groupingOverallDateHistogram', {
         defaultMessage: 'Top values for each {field}',
@@ -83,7 +83,7 @@ export function BucketNestingEditor({
         values: { target: target.fieldName },
       }),
       filters: i18n.translate('xpack.lens.indexPattern.groupingSecondFilters', {
-        defaultMessage: 'Search query for each {target}',
+        defaultMessage: 'Overall top {target}',
         values: { target: target.fieldName },
       }),
       date_histogram: i18n.translate('xpack.lens.indexPattern.groupingSecondDateHistogram', {
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx
index e652643dcf437..0401ee265775b 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx
@@ -130,15 +130,15 @@ const QueryInput = ({
       placeholder={
         inputValue.language === 'kuery'
           ? i18n.translate('xpack.lens.indexPattern.filters.queryPlaceholderKql', {
-              defaultMessage: 'Example: {example}',
+              defaultMessage: '{example}',
               values: { example: 'method : "GET" or status : "404"' },
             })
           : i18n.translate('xpack.lens.indexPattern.filters.queryPlaceholderLucene', {
-              defaultMessage: 'Example: {example}',
+              defaultMessage: '{example}',
               values: { example: 'method:GET OR status:404' },
             })
       }
-      dataTestSubj="transformQueryInput"
+      dataTestSubj="lns-indexPattern-searchQueryInput"
       languageSwitcherPopoverAnchorPosition="rightDown"
     />
   );
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.test.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.test.tsx
index cd2a24d1d3ee5..13854d1ca91d6 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.test.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.test.tsx
@@ -54,7 +54,7 @@ describe('filters', () => {
           columnOrder: ['col1', 'col2'],
           columns: {
             col1: {
-              label: 'Search query',
+              label: 'Custom query',
               dataType: 'document',
               operationType: 'filters',
               scale: 'ordinal',
@@ -209,7 +209,7 @@ describe('filters', () => {
       });
     });
 
-    describe('Modify search query', () => {
+    describe('Modify custom query', () => {
       it('should correctly show existing filters ', () => {
         const setStateSpy = jest.fn();
         const instance = mount(
@@ -236,7 +236,7 @@ describe('filters', () => {
         ).toEqual('src : 2');
       });
 
-      it('should remove search query', () => {
+      it('should remove custom query', () => {
         const setStateSpy = jest.fn();
         const instance = mount(
           <InlineOptions
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx
index b96bcf6dc9ff5..c740f8466e1b1 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx
@@ -43,8 +43,8 @@ export interface FilterValue {
   id: string;
 }
 
-const searchQueryLabel = i18n.translate('xpack.lens.indexPattern.searchQuery', {
-  defaultMessage: 'Search query',
+const customQueryLabel = i18n.translate('xpack.lens.indexPattern.customQuery', {
+  defaultMessage: 'Custom query',
 });
 
 export const defaultLabel = i18n.translate('xpack.lens.indexPattern.filters.label.placeholder', {
@@ -87,7 +87,7 @@ export interface FiltersIndexPatternColumn extends FieldBasedIndexPatternColumn
 
 export const filtersOperation: OperationDefinition<FiltersIndexPatternColumn> = {
   type: 'filters',
-  displayName: searchQueryLabel,
+  displayName: customQueryLabel,
   priority: 3, // Higher than any metric
   getPossibleOperationForField: ({ type }) => {
     if (type === 'document') {
@@ -116,12 +116,10 @@ export const filtersOperation: OperationDefinition<FiltersIndexPatternColumn> =
           },
         ],
       };
-    } else if (previousColumn?.operationType === 'filters' && previousColumn.params?.filters) {
-      params = previousColumn.params;
     }
 
     return {
-      label: searchQueryLabel,
+      label: customQueryLabel,
       dataType: 'string',
       operationType: 'filters',
       scale: 'ordinal',
@@ -163,12 +161,7 @@ export const filtersOperation: OperationDefinition<FiltersIndexPatternColumn> =
       );
 
     return (
-      <EuiFormRow
-        label={i18n.translate('xpack.lens.indexPattern.filters.queries', {
-          defaultMessage: 'Queries',
-        })}
-        labelType="legend"
-      >
+      <EuiFormRow>
         <FilterList
           filters={filters}
           setFilters={setFilters}
@@ -241,7 +234,7 @@ export const FilterList = ({
 
   return (
     <>
-      <EuiDragDropContext onDragEnd={onDragEnd}>
+      <EuiDragDropContext onDragEnd={onDragEnd} onDragStart={() => setIsOpenByCreation(false)}>
         <EuiDroppable droppableId="FILTERS_DROPPABLE_AREA" spacing="s">
           {localFilters?.map((filter: FilterValue, idx: number) => {
             const { input, label, id } = filter;
@@ -312,9 +305,9 @@ export const FilterList = ({
                             onRemoveFilter(filter.id);
                           }}
                           aria-label={i18n.translate(
-                            'xpack.lens.indexPattern.filters.removeSearchQuery',
+                            'xpack.lens.indexPattern.filters.removeCustomQuery',
                             {
-                              defaultMessage: 'Remove search query',
+                              defaultMessage: 'Remove custom query',
                             }
                           )}
                           title={i18n.translate('xpack.lens.indexPattern.filters.remove', {
@@ -339,8 +332,8 @@ export const FilterList = ({
           setIsOpenByCreation(true);
         }}
       >
-        {i18n.translate('xpack.lens.indexPattern.filters.addSearchQuery', {
-          defaultMessage: 'Add a search query',
+        {i18n.translate('xpack.lens.indexPattern.filters.addCustomQuery', {
+          defaultMessage: 'Add a custom query',
         })}
       </EuiButtonEmpty>
     </>

From e95af12d05ecdd2254c2d628aa8b69086f45f854 Mon Sep 17 00:00:00 2001
From: Marta Bondyra <marta.bondyra@elastic.co>
Date: Thu, 10 Sep 2020 15:29:33 +0200
Subject: [PATCH 30/32] added tests

---
 .../filters/filter_popover.test.tsx           | 83 +++++++++++++++++++
 .../definitions/filters/filter_popover.tsx    |  5 +-
 2 files changed, 85 insertions(+), 3 deletions(-)
 create mode 100644 x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.test.tsx

diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.test.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.test.tsx
new file mode 100644
index 0000000000000..b27de9bf3a50d
--- /dev/null
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.test.tsx
@@ -0,0 +1,83 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { shallow } from 'enzyme';
+import { act } from 'react-dom/test-utils';
+import { EuiPopover } from '@elastic/eui';
+import { createMockedIndexPattern } from '../../../mocks';
+import { FilterPopover, QueryInput, LabelInput } from './filter_popover';
+
+jest.mock('.', () => ({
+  isQueryValid: () => true,
+  defaultLabel: 'label',
+}));
+
+const defaultProps = {
+  filter: {
+    input: { query: 'bytes >= 1', language: 'kuery' },
+    label: 'More than one',
+    id: '1',
+  },
+  setFilter: jest.fn(),
+  indexPattern: createMockedIndexPattern(),
+  Button: (onClick) => (
+    <div onClick={onClick} onKeyPress={onClick}>
+      trigger
+    </div>
+  ),
+  isOpenByCreation: true,
+  setIsOpenByCreation: jest.fn(),
+};
+
+describe('filter popover', () => {
+  jest.mock('../../../../../../../../src/plugins/data/public', () => ({
+    QueryStringInput: () => {
+      return 'QueryStringInput';
+    },
+  }));
+  it('should be open if is open by creation', () => {
+    const setIsOpenByCreation = jest.fn();
+    const instance = shallow(
+      <FilterPopover {...defaultProps} setIsOpenByCreation={setIsOpenByCreation} />
+    );
+    expect(instance.find(EuiPopover).prop('isOpen')).toEqual(true);
+    act(() => {
+      instance.find(EuiPopover).prop('closePopover')!();
+    });
+    instance.update();
+    expect(setIsOpenByCreation).toHaveBeenCalledWith(false);
+  });
+  it('should call setFilter when modifying QueryInput', () => {
+    const setFilter = jest.fn();
+    const instance = shallow(<FilterPopover {...defaultProps} setFilter={setFilter} />);
+    instance.find(QueryInput).prop('onChange')!({
+      query: 'modified : query',
+      language: 'lucene',
+    });
+    expect(setFilter).toHaveBeenCalledWith({
+      input: {
+        language: 'lucene',
+        query: 'modified : query',
+      },
+      label: 'More than one',
+      id: '1',
+    });
+  });
+  it('should call setFilter when modifying LabelInput', () => {
+    const setFilter = jest.fn();
+    const instance = shallow(<FilterPopover {...defaultProps} setFilter={setFilter} />);
+    instance.find(LabelInput).prop('onChange')!('Modified label');
+    expect(setFilter).toHaveBeenCalledWith({
+      input: {
+        language: 'kuery',
+        query: 'bytes >= 1',
+      },
+      label: 'Modified label',
+      id: '1',
+    });
+  });
+});
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx
index 0401ee265775b..fd98c0fc72c67 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx
@@ -88,7 +88,7 @@ export const FilterPopover = ({
   );
 };
 
-const QueryInput = ({
+export const QueryInput = ({
   value,
   onChange,
   indexPattern,
@@ -138,13 +138,12 @@ const QueryInput = ({
               values: { example: 'method:GET OR status:404' },
             })
       }
-      dataTestSubj="lns-indexPattern-searchQueryInput"
       languageSwitcherPopoverAnchorPosition="rightDown"
     />
   );
 };
 
-const LabelInput = ({
+export const LabelInput = ({
   value,
   onChange,
   placeholder,

From eebbbdbcbb5c5dff3841858bd9c583f8d17c7959 Mon Sep 17 00:00:00 2001
From: Marta Bondyra <marta.bondyra@elastic.co>
Date: Thu, 10 Sep 2020 15:31:52 +0200
Subject: [PATCH 31/32] type

---
 .../operations/definitions/filters/filter_popover.test.tsx    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.test.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.test.tsx
index b27de9bf3a50d..76b4d186325bc 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.test.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.test.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { MouseEventHandler } from 'react';
 import { shallow } from 'enzyme';
 import { act } from 'react-dom/test-utils';
 import { EuiPopover } from '@elastic/eui';
@@ -24,7 +24,7 @@ const defaultProps = {
   },
   setFilter: jest.fn(),
   indexPattern: createMockedIndexPattern(),
-  Button: (onClick) => (
+  Button: (onClick: MouseEventHandler) => (
     <div onClick={onClick} onKeyPress={onClick}>
       trigger
     </div>

From 29787699d4fbaee278046e31b68c8743cece02b2 Mon Sep 17 00:00:00 2001
From: Marta Bondyra <marta.bondyra@elastic.co>
Date: Thu, 10 Sep 2020 17:37:01 +0200
Subject: [PATCH 32/32] useDebounce properly this time

---
 .../definitions/filters/filter_popover.test.tsx           | 8 +++-----
 .../operations/definitions/filters/filter_popover.tsx     | 8 +++-----
 2 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.test.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.test.tsx
index 76b4d186325bc..4d4b4018d75a7 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.test.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.test.tsx
@@ -7,7 +7,7 @@
 import React, { MouseEventHandler } from 'react';
 import { shallow } from 'enzyme';
 import { act } from 'react-dom/test-utils';
-import { EuiPopover } from '@elastic/eui';
+import { EuiPopover, EuiLink } from '@elastic/eui';
 import { createMockedIndexPattern } from '../../../mocks';
 import { FilterPopover, QueryInput, LabelInput } from './filter_popover';
 
@@ -24,10 +24,8 @@ const defaultProps = {
   },
   setFilter: jest.fn(),
   indexPattern: createMockedIndexPattern(),
-  Button: (onClick: MouseEventHandler) => (
-    <div onClick={onClick} onKeyPress={onClick}>
-      trigger
-    </div>
+  Button: ({ onClick }: { onClick: MouseEventHandler }) => (
+    <EuiLink onClick={onClick}>trigger</EuiLink>
   ),
   isOpenByCreation: true,
   setIsOpenByCreation: jest.fn(),
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx
index fd98c0fc72c67..cdfa19f53a13a 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx
@@ -6,9 +6,9 @@
 import './filter_popover.scss';
 
 import React, { MouseEventHandler, useState } from 'react';
+import { useDebounce } from 'react-use';
 import { EuiPopover, EuiFieldText, EuiSpacer, keys } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { debounce } from 'lodash';
 import { FilterValue, defaultLabel, isQueryValid } from '.';
 import { IndexPattern } from '../../../types';
 import { QueryStringInput, Query } from '../../../../../../../../src/plugins/data/public';
@@ -107,11 +107,10 @@ export const QueryInput = ({
     setInputValue(value);
   }, [value, setInputValue]);
 
-  const onChangeDebounced = React.useMemo(() => debounce(onChange, 256), [onChange]);
+  useDebounce(() => onChange(inputValue), 256, [inputValue]);
 
   const handleInputChange = (input: Query) => {
     setInputValue(input);
-    onChangeDebounced(input);
   };
 
   return (
@@ -162,12 +161,11 @@ export const LabelInput = ({
     setInputValue(value);
   }, [value, setInputValue]);
 
-  const onChangeDebounced = React.useMemo(() => debounce(onChange, 256), [onChange]);
+  useDebounce(() => onChange(inputValue), 256, [inputValue]);
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const val = String(e.target.value);
     setInputValue(val);
-    onChangeDebounced(val);
   };
 
   return (