[Dashboard] [Controls] Add "Exists" functionality to options list

src/plugins/controls/common/control_group/control_group_panel_diff_system.ts

@@ -33,25 +33,31 @@ export const ControlPanelDiffSystems: {
 
       const {
         exclude: excludeA,
+        hideExists: hideExistsA,
+        hideExclude: hideExcludeA,
         selectedOptions: selectedA,
         singleSelect: singleSelectA,
-        hideExclude: hideExcludeA,
+        existsSelected: existsSelectedA,
         runPastTimeout: runPastTimeoutA,
         ...inputA
       }: Partial<OptionsListEmbeddableInput> = initialInput.explicitInput;
       const {
         exclude: excludeB,
+        hideExists: hideExistsB,
+        hideExclude: hideExcludeB,
         selectedOptions: selectedB,
         singleSelect: singleSelectB,
-        hideExclude: hideExcludeB,
+        existsSelected: existsSelectedB,
         runPastTimeout: runPastTimeoutB,
         ...inputB
       }: Partial<OptionsListEmbeddableInput> = newInput.explicitInput;
 
       return (
         Boolean(excludeA) === Boolean(excludeB) &&
-        Boolean(singleSelectA) === Boolean(singleSelectB) &&
+        Boolean(hideExistsA) === Boolean(hideExistsB) &&
         Boolean(hideExcludeA) === Boolean(hideExcludeB) &&
+        Boolean(singleSelectA) === Boolean(singleSelectB) &&
+        Boolean(existsSelectedA) === Boolean(existsSelectedB) &&
         Boolean(runPastTimeoutA) === Boolean(runPastTimeoutB) &&
         isEqual(selectedA ?? [], selectedB ?? []) &&
         deepEqual(inputA, inputB)

src/plugins/controls/common/options_list/mocks.tsx

@@ -6,10 +6,12 @@
  * Side Public License, v 1.
  */
 
-import { ReduxEmbeddableContext } from '@kbn/presentation-util-plugin/public/redux_embeddables/types';
-import { ControlOutput } from '../../public/types';
+import { createReduxEmbeddableTools } from '@kbn/presentation-util-plugin/public/redux_embeddables/create_redux_embeddable_tools';
+
+import { OptionsListEmbeddable, OptionsListEmbeddableFactory } from '../../public';
 import { OptionsListComponentState, OptionsListReduxState } from '../../public/options_list/types';
 import { optionsListReducers } from '../../public/options_list/options_list_reducers';
+import { ControlFactory, ControlOutput } from '../../public/types';
 import { OptionsListEmbeddableInput } from './types';
 
 const mockOptionsListComponentState = {
@@ -36,27 +38,26 @@ const mockOptionsListOutput = {
   loading: false,
 } as ControlOutput;
 
-export const mockOptionsListContext = (
+export const mockOptionsListReduxEmbeddableTools = async (
   partialState?: Partial<OptionsListReduxState>
-): ReduxEmbeddableContext<OptionsListReduxState, typeof optionsListReducers> => {
-  const mockReduxState = {
-    componentState: {
+) => {
+  const optionsListFactoryStub = new OptionsListEmbeddableFactory();
+  const optionsListControlFactory = optionsListFactoryStub as unknown as ControlFactory;
+  optionsListControlFactory.getDefaultInput = () => ({});
+  const mockEmbeddable = (await optionsListControlFactory.create({
+    ...mockOptionsListEmbeddableInput,
+    ...partialState?.explicitInput,
+  })) as OptionsListEmbeddable;
+  mockEmbeddable.getOutput = jest.fn().mockReturnValue(mockOptionsListOutput);
+
+  const mockReduxEmbeddableTools = createReduxEmbeddableTools<OptionsListReduxState>({
+    embeddable: mockEmbeddable,
+    reducers: optionsListReducers,
+    initialComponentState: {
       ...mockOptionsListComponentState,
       ...partialState?.componentState,
     },
-    explicitInput: {
-      ...mockOptionsListEmbeddableInput,
-      ...partialState?.explicitInput,
-    },
-    output: {
-      ...mockOptionsListOutput,
-      ...partialState?.output,
-    },
-  } as OptionsListReduxState;
+  });
 
-  return {
-    actions: {},
-    useEmbeddableDispatch: () => {},
-    useEmbeddableSelector: (selector: any) => selector(mockReduxState),
-  } as unknown as ReduxEmbeddableContext<OptionsListReduxState, typeof optionsListReducers>;
+  return mockReduxEmbeddableTools;
 };

src/plugins/controls/common/options_list/types.ts

@@ -15,9 +15,11 @@ export const OPTIONS_LIST_CONTROL = 'optionsListControl';
 
 export interface OptionsListEmbeddableInput extends DataControlInput {
   selectedOptions?: string[];
+  existsSelected?: boolean;
   runPastTimeout?: boolean;
   singleSelect?: boolean;
   hideExclude?: boolean;
+  hideExists?: boolean;
   exclude?: boolean;
 }
 

src/plugins/controls/public/options_list/components/options_list.scss

@@ -35,6 +35,16 @@
   font-weight: 300;
 }
 
+.optionsList__existsFilter {
+  font-style: italic;
+}
+
+.optionsList__negateLabel {
+  font-weight: bold;
+  font-size: $euiSizeM;
+  color: $euiColorDanger;
+}
+
 .optionsList__ignoredBadge {
   margin-left: $euiSizeS;
 }

src/plugins/controls/public/options_list/components/options_list_control.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 from 'react';
+
+import { mountWithIntl } from '@kbn/test-jest-helpers';
+import { findTestSubject } from '@elastic/eui/lib/test';
+
+import { OptionsListComponentState, OptionsListReduxState } from '../types';
+import { ControlOutput, OptionsListEmbeddableInput } from '../..';
+import { mockOptionsListReduxEmbeddableTools } from '../../../common/mocks';
+import { OptionsListControl } from './options_list_control';
+import { BehaviorSubject } from 'rxjs';
+
+describe('Options list control', () => {
+  const defaultProps = {
+    typeaheadSubject: new BehaviorSubject(''),
+  };
+
+  interface MountOptions {
+    componentState: Partial<OptionsListComponentState>;
+    explicitInput: Partial<OptionsListEmbeddableInput>;
+    output: Partial<ControlOutput>;
+  }
+
+  async function mountComponent(options?: Partial<MountOptions>) {
+    const mockReduxEmbeddableTools = await mockOptionsListReduxEmbeddableTools({
+      componentState: options?.componentState ?? {},
+      explicitInput: options?.explicitInput ?? {},
+      output: options?.output ?? {},
+    } as Partial<OptionsListReduxState>);
+
+    return mountWithIntl(
+      <mockReduxEmbeddableTools.Wrapper>
+        <OptionsListControl {...defaultProps} />
+      </mockReduxEmbeddableTools.Wrapper>
+    );
+  }
+
+  test('if exclude = false and existsSelected = true, then the option should read "Exists"', async () => {
+    const control = await mountComponent({
+      explicitInput: { id: 'testExists', exclude: false, existsSelected: true },
+    });
+    const existsOption = findTestSubject(control, 'optionsList-control-testExists');
+    expect(existsOption.text()).toBe('Exists');
+  });
+
+  test('if exclude = true and existsSelected = true, then the option should read "Does not exist"', async () => {
+    const control = await mountComponent({
+      explicitInput: { id: 'testDoesNotExist', exclude: true, existsSelected: true },
+    });
+    const existsOption = findTestSubject(control, 'optionsList-control-testDoesNotExist');
+    expect(existsOption.text()).toBe('DOES NOT Exist');
+  });
+});

src/plugins/controls/public/options_list/components/options_list_control.tsx

@@ -11,13 +11,7 @@ import classNames from 'classnames';
 import { debounce, isEmpty } from 'lodash';
 import React, { useCallback, useEffect, useMemo, useState, useRef } from 'react';
 
-import {
-  EuiFilterButton,
-  EuiFilterGroup,
-  EuiPopover,
-  EuiTextColor,
-  useResizeObserver,
-} from '@elastic/eui';
+import { EuiFilterButton, EuiFilterGroup, EuiPopover, useResizeObserver } from '@elastic/eui';
 import { useReduxEmbeddableContext } from '@kbn/presentation-util-plugin/public';
 
 import { OptionsListStrings } from './options_list_strings';
@@ -46,10 +40,11 @@ export const OptionsListControl = ({ typeaheadSubject }: { typeaheadSubject: Sub
   const validSelections = select((state) => state.componentState.validSelections);
 
   const selectedOptions = select((state) => state.explicitInput.selectedOptions);
+  const existsSelected = select((state) => state.explicitInput.existsSelected);
   const controlStyle = select((state) => state.explicitInput.controlStyle);
   const singleSelect = select((state) => state.explicitInput.singleSelect);
-  const id = select((state) => state.explicitInput.id);
   const exclude = select((state) => state.explicitInput.exclude);
+  const id = select((state) => state.explicitInput.id);
 
   const loading = select((state) => state.output.loading);
 
@@ -83,22 +78,34 @@ export const OptionsListControl = ({ typeaheadSubject }: { typeaheadSubject: Sub
       selectionDisplayNode: (
         <>
           {exclude && (
-            <EuiTextColor color="danger">
-              <b>{OptionsListStrings.control.getNegate()}</b>{' '}
-            </EuiTextColor>
-          )}
-          {validSelections && (
-            <span>{validSelections?.join(OptionsListStrings.control.getSeparator())}</span>
+            <>
+              <span className="optionsList__negateLabel">
+                {existsSelected
+                  ? OptionsListStrings.control.getExcludeExists()
+                  : OptionsListStrings.control.getNegate()}
+              </span>{' '}
+            </>
           )}
-          {invalidSelections && (
-            <span className="optionsList__filterInvalid">
-              {invalidSelections.join(OptionsListStrings.control.getSeparator())}
+          {existsSelected ? (
+            <span className={`optionsList__existsFilter`}>
+              {OptionsListStrings.controlAndPopover.getExists(+Boolean(exclude))}
             </span>
+          ) : (
+            <>
+              {validSelections && (
+                <span>{validSelections?.join(OptionsListStrings.control.getSeparator())}</span>
+              )}
+              {invalidSelections && (
+                <span className="optionsList__filterInvalid">
+                  {invalidSelections.join(OptionsListStrings.control.getSeparator())}
+                </span>
+              )}
+            </>
           )}
         </>
       ),
     };
-  }, [exclude, validSelections, invalidSelections]);
+  }, [exclude, existsSelected, validSelections, invalidSelections]);
 
   const button = (
     <div className="optionsList--filterBtnWrapper" ref={resizeRef}>
@@ -115,7 +122,9 @@ export const OptionsListControl = ({ typeaheadSubject }: { typeaheadSubject: Sub
         numActiveFilters={validSelectionsCount}
         hasActiveFilters={Boolean(validSelectionsCount)}
       >
-        {hasSelections ? selectionDisplayNode : OptionsListStrings.control.getPlaceholder()}
+        {hasSelections || existsSelected
+          ? selectionDisplayNode
+          : OptionsListStrings.control.getPlaceholder()}
       </EuiFilterButton>
     </div>
   );
@@ -136,6 +145,7 @@ export const OptionsListControl = ({ typeaheadSubject }: { typeaheadSubject: Sub
         className="optionsList__popoverOverride"
         closePopover={() => setIsPopoverOpen(false)}
         anchorClassName="optionsList__anchorOverride"
+        aria-labelledby={`control-popover-${id}`}
       >
         <OptionsListPopover width={dimensions.width} updateSearchString={updateSearchString} />
       </EuiPopover>

src/plugins/controls/public/options_list/components/options_list_editor_options.tsx

@@ -8,16 +8,28 @@
 
 import React, { useState } from 'react';
 
-import { EuiFlexGroup, EuiFlexItem, EuiFormRow, EuiIconTip, EuiSwitch } from '@elastic/eui';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFormRow,
+  EuiIconTip,
+  EuiSwitch,
+  EuiSwitchEvent,
+} from '@elastic/eui';
 import { css } from '@emotion/react';
 
 import { OptionsListStrings } from './options_list_strings';
 import { ControlEditorProps, OptionsListEmbeddableInput } from '../..';
-
 interface OptionsListEditorState {
   singleSelect?: boolean;
   runPastTimeout?: boolean;
   hideExclude?: boolean;
+  hideExists?: boolean;
+}
+
+interface SwitchProps {
+  checked: boolean;
+  onChange: (event: EuiSwitchEvent) => void;
 }
 
 export const OptionsListEditorOptions = ({
@@ -28,8 +40,33 @@ export const OptionsListEditorOptions = ({
     singleSelect: initialInput?.singleSelect,
     runPastTimeout: initialInput?.runPastTimeout,
     hideExclude: initialInput?.hideExclude,
+    hideExists: initialInput?.hideExists,
   });
 
+  const SwitchWithTooltip = ({
+    switchProps,
+    label,
+    tooltip,
+  }: {
+    switchProps: SwitchProps;
+    label: string;
+    tooltip: string;
+  }) => (
+    <EuiFlexGroup alignItems="center" gutterSize="xs">
+      <EuiFlexItem grow={false}>
+        <EuiSwitch label={label} {...switchProps} />
+      </EuiFlexItem>
+      <EuiFlexItem
+        grow={false}
+        css={css`
+          margin-top: 0px !important;
+        `}
+      >
+        <EuiIconTip content={tooltip} position="right" />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+
   return (
     <>
       <EuiFormRow>
@@ -54,29 +91,31 @@ export const OptionsListEditorOptions = ({
         />
       </EuiFormRow>
       <EuiFormRow>
-        <EuiFlexGroup alignItems="center" gutterSize="xs">
-          <EuiFlexItem grow={false}>
-            <EuiSwitch
-              label={OptionsListStrings.editor.getRunPastTimeoutTitle()}
-              checked={Boolean(state.runPastTimeout)}
-              onChange={() => {
-                onChange({ runPastTimeout: !state.runPastTimeout });
-                setState((s) => ({ ...s, runPastTimeout: !s.runPastTimeout }));
-              }}
-            />
-          </EuiFlexItem>
-          <EuiFlexItem
-            grow={false}
-            css={css`
-              margin-top: 0px !important;
-            `}
-          >
-            <EuiIconTip
-              content={OptionsListStrings.editor.getRunPastTimeoutTooltip()}
-              position="right"
-            />
-          </EuiFlexItem>
-        </EuiFlexGroup>
+        <SwitchWithTooltip
+          label={OptionsListStrings.editor.getHideExistsQueryTitle()}
+          tooltip={OptionsListStrings.editor.getHideExistsQueryTooltip()}
+          switchProps={{
+            checked: !state.hideExists,
+            onChange: () => {
+              onChange({ hideExists: !state.hideExists });
+              setState((s) => ({ ...s, hideExists: !s.hideExists }));
+              if (initialInput?.existsSelected) onChange({ existsSelected: false });
+            },
+          }}
+        />
+      </EuiFormRow>
+      <EuiFormRow>
+        <SwitchWithTooltip
+          label={OptionsListStrings.editor.getRunPastTimeoutTitle()}
+          tooltip={OptionsListStrings.editor.getRunPastTimeoutTooltip()}
+          switchProps={{
+            checked: Boolean(state.runPastTimeout),
+            onChange: () => {
+              onChange({ runPastTimeout: !state.runPastTimeout });
+              setState((s) => ({ ...s, runPastTimeout: !s.runPastTimeout }));
+            },
+          }}
+        />
       </EuiFormRow>
     </>
   );