[SearchBar] Add custom_component filter

src-docs/src/views/search_bar/props_info.js

@@ -420,6 +420,49 @@ export const propsInfo = {
     },
   },
 
+  CustomComponentFilter: {
+    __docgenInfo: {
+      _euiObjectType: 'type',
+      props: {
+        type: {
+          description:
+            'Defines the type of the filter. Must be set to `custom_component`',
+          required: true,
+          type: { name: '"custom_component"' },
+        },
+        component: {
+          description: 'The component to render the filter',
+          required: true,
+          type: { name: 'React.ComponentType<#CustomComponentProps>' },
+        },
+        available: {
+          description:
+            'A callback that defines whether this filter is currently available',
+          required: false,
+          type: { name: '() => boolean' },
+        },
+      },
+    },
+  },
+
+  CustomComponentProps: {
+    __docgenInfo: {
+      _euiObjectType: 'type',
+      props: {
+        query: {
+          description: 'The Query instance to interact with the search bar',
+          required: true,
+          type: { name: 'Query' },
+        },
+        onChange: {
+          description: 'Handler to update the search bar query',
+          required: true,
+          type: { name: '(q:Query) => void' },
+        },
+      },
+    },
+  },
+
   ExecuteQueryOptions: {
     __docgenInfo: {
       _euiObjectType: 'type',

src-docs/src/views/search_bar/search_bar_filters.js

@@ -11,6 +11,10 @@ import {
   EuiTitle,
   EuiBasicTable,
   EuiSearchBar,
+  EuiFilterButton,
+  EuiPopover,
+  EuiButton,
+  EuiPanel,
 } from '../../../../src/components';
 
 const random = new Random();
@@ -62,6 +66,101 @@ const items = times(10, (id) => {
 
 const initialQuery = EuiSearchBar.Query.MATCH_ALL;
 
+const CustomComponent = ({ query, onChange }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const orTagsClause = query.getOrFieldClause('tag');
+  const selectedTags = orTagsClause?.value ?? [];
+  const isOnlySales =
+    !!(selectedTags.length === 1 && selectedTags[0] === 'sales') &&
+    !hasCloudExcluded;
+
+  const simpleTagClause = query.getSimpleFieldClause('tag');
+  const hasCloudExcluded = !!(
+    simpleTagClause &&
+    simpleTagClause.match === 'must_not' &&
+    simpleTagClause.operator === 'eq'
+  );
+
+  const hasFiltersApplied = query.hasClauses();
+
+  const closePopover = () => {
+    setIsOpen(false);
+  };
+
+  const button = (
+    <EuiFilterButton
+      iconType="arrowDown"
+      iconSide="right"
+      onClick={() => setIsOpen((prev) => !prev)}
+      hasActiveFilters={isOnlySales}
+      numActiveFilters={isOnlySales ? 1 : undefined}
+      grow
+    >
+      Custom
+    </EuiFilterButton>
+  );
+
+  return (
+    <EuiPopover
+      button={button}
+      isOpen={isOpen}
+      closePopover={closePopover}
+      panelPaddingSize="none"
+      anchorPosition="downCenter"
+    >
+      <EuiPanel paddingSize="m">
+        <EuiFlexGroup>
+          <EuiFlexItem>
+            <EuiButton
+              onClick={() => {
+                const q = query
+                  .removeSimpleFieldValue('tag', 'cloud')
+                  .removeOrFieldClauses('tag')
+                  .addOrFieldValue('tag', 'sales', true, 'eq');
+                onChange(q);
+                closePopover();
+              }}
+              disabled={isOnlySales}
+            >
+              Only sales
+            </EuiButton>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiButton
+              onClick={() => {
+                const q = query.addSimpleFieldValue(
+                  'tag',
+                  'cloud',
+                  false,
+                  'eq'
+                );
+                onChange(q);
+                closePopover();
+              }}
+              disabled={hasCloudExcluded}
+            >
+              Exclude cloud
+            </EuiButton>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiButton
+              onClick={() => {
+                const q = query.removeAllClauses();
+                onChange(q);
+                closePopover();
+              }}
+              disabled={!hasFiltersApplied}
+            >
+              All
+            </EuiButton>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiPanel>
+    </EuiPopover>
+  );
+};
+
 export const SearchBarFilters = () => {
   const [query, setQuery] = useState(initialQuery);
   const [error, setError] = useState(null);
@@ -109,6 +208,10 @@ export const SearchBarFilters = () => {
           view: <EuiHealth color={tag.color}>{tag.name}</EuiHealth>,
         })),
       },
+      {
+        type: 'custom_component',
+        component: CustomComponent,
+      },
     ];
 
     const schema = {

src/components/search_bar/filters/__snapshots__/custom_component_filter.test.tsx.snap

@@ -0,0 +1,125 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CustomComponentFilter render 1`] = `
+<CustomComponentFilter
+  aria-label="aria-label"
+  className="testClass1 testClass2"
+  config={
+    Object {
+      "component": [Function],
+      "type": "custom_component",
+    }
+  }
+  data-test-subj="test subject string"
+  index={0}
+  onChange={
+    [MockFunction] {
+      "calls": Array [
+        Array [
+          Query {
+            "ast": _AST {
+              "_clauses": Array [],
+              "_indexedClauses": Object {
+                "field": Object {},
+                "group": Array [],
+                "is": Object {},
+                "term": Array [],
+              },
+            },
+            "syntax": Object {
+              "parse": [Function],
+              "print": [Function],
+              "printClause": [Function],
+            },
+            "text": "",
+          },
+        ],
+      ],
+      "results": Array [
+        Object {
+          "type": "return",
+          "value": undefined,
+        },
+      ],
+    }
+  }
+  query={
+    Query {
+      "ast": _AST {
+        "_clauses": Array [],
+        "_indexedClauses": Object {
+          "field": Object {},
+          "group": Array [],
+          "is": Object {},
+          "term": Array [],
+        },
+      },
+      "syntax": Object {
+        "parse": [Function],
+        "print": [Function],
+        "printClause": [Function],
+      },
+      "text": "",
+    }
+  }
+>
+  <CustomComponent
+    onChange={
+      [MockFunction] {
+        "calls": Array [
+          Array [
+            Query {
+              "ast": _AST {
+                "_clauses": Array [],
+                "_indexedClauses": Object {
+                  "field": Object {},
+                  "group": Array [],
+                  "is": Object {},
+                  "term": Array [],
+                },
+              },
+              "syntax": Object {
+                "parse": [Function],
+                "print": [Function],
+                "printClause": [Function],
+              },
+              "text": "",
+            },
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
+        ],
+      }
+    }
+    query={
+      Query {
+        "ast": _AST {
+          "_clauses": Array [],
+          "_indexedClauses": Object {
+            "field": Object {},
+            "group": Array [],
+            "is": Object {},
+            "term": Array [],
+          },
+        },
+        "syntax": Object {
+          "parse": [Function],
+          "print": [Function],
+          "printClause": [Function],
+        },
+        "text": "",
+      }
+    }
+  >
+    <div
+      data-test-subj="customComponent"
+    >
+      Custom component
+    </div>
+  </CustomComponent>
+</CustomComponentFilter>
+`;

src/components/search_bar/filters/custom_component_filter.test.tsx

@@ -0,0 +1,60 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { useEffect } from 'react';
+import { requiredProps } from '../../../test';
+import { mount } from 'enzyme';
+import { Query } from '../query';
+import {
+  CustomComponentFilter,
+  CustomComponentFilterProps,
+  CustomComponentProps,
+} from './custom_component_filter';
+
+const CustomComponent: React.FC<CustomComponentProps> = ({
+  query,
+  onChange,
+}) => {
+  useEffect(() => {
+    onChange?.(query);
+  }, [onChange, query]);
+
+  return <div data-test-subj="customComponent">Custom component</div>;
+};
+
+describe('CustomComponentFilter', () => {
+  const props: CustomComponentFilterProps = {
+    ...requiredProps,
+    index: 0,
+    query: Query.parse(''),
+    onChange: jest.fn(),
+    config: {
+      type: 'custom_component',
+      component: CustomComponent,
+    },
+  };
+
+  test('render', () => {
+    const component = mount(<CustomComponentFilter {...props} />);
+    expect(component).toMatchSnapshot();
+  });
+
+  test('render the provided component', () => {
+    const component = mount(<CustomComponentFilter {...props} />);
+
+    expect(component.find('[data-test-subj="customComponent"]').text()).toEqual(
+      'Custom component'
+    );
+  });
+
+  test('passes down the Query instance and the onChange handler', () => {
+    mount(<CustomComponentFilter {...props} />);
+    expect(props.onChange).toHaveBeenCalled();
+    expect(props.onChange).toHaveBeenCalledWith(props.query);
+  });
+});