[Controls] Do not ignore invalid selections

src/plugins/controls/kibana.jsonc

@@ -17,6 +17,7 @@
       "unifiedSearch",
       "uiActions"
     ],
-    "extraPublicDirs": ["common"]
+    "extraPublicDirs": ["common"],
+    "requiredBundles": ["kibanaUtils"]
   }
 }

src/plugins/controls/public/control_group/component/control_group_component.tsx

@@ -8,34 +8,34 @@
 
 import '../control_group.scss';
 
-import {
-  arrayMove,
-  SortableContext,
-  rectSortingStrategy,
-  sortableKeyboardCoordinates,
-} from '@dnd-kit/sortable';
 import {
   closestCenter,
   DndContext,
   DragEndEvent,
   DragOverlay,
   KeyboardSensor,
+  LayoutMeasuringStrategy,
   PointerSensor,
   useSensor,
   useSensors,
-  LayoutMeasuringStrategy,
 } from '@dnd-kit/core';
+import {
+  arrayMove,
+  rectSortingStrategy,
+  SortableContext,
+  sortableKeyboardCoordinates,
+} from '@dnd-kit/sortable';
+import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiPanel } from '@elastic/eui';
 import classNames from 'classnames';
-import React, { useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { TypedUseSelectorHook, useSelector } from 'react-redux';
-import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiPanel } from '@elastic/eui';
 
 import { ViewMode } from '@kbn/embeddable-plugin/public';
 
-import { ControlGroupReduxState } from '../types';
 import { ControlGroupStrings } from '../control_group_strings';
-import { ControlClone, SortableControl } from './control_group_sortable_item';
 import { useControlGroupContainer } from '../embeddable/control_group_container';
+import { ControlGroupReduxState } from '../types';
+import { ControlClone, SortableControl } from './control_group_sortable_item';
 
 const contextSelect = useSelector as TypedUseSelectorHook<ControlGroupReduxState>;
 
@@ -47,6 +47,15 @@ export const ControlGroup = () => {
   const viewMode = contextSelect((state) => state.explicitInput.viewMode);
   const controlStyle = contextSelect((state) => state.explicitInput.controlStyle);
   const showAddButton = contextSelect((state) => state.componentState.showAddButton);
+  const controlsHaveInvalidSelections = contextSelect(
+    (state) => state.componentState.controlsHaveInvalidSelections
+  );
+
+  useEffect(() => {
+    if (controlsHaveInvalidSelections) {
+      controlGroup.showInvalidSelectionsToast();
+    }
+  }, [controlGroup, controlsHaveInvalidSelections]);
 
   const isEditable = viewMode === ViewMode.EDIT;
 

src/plugins/controls/public/control_group/control_group_strings.ts

@@ -10,6 +10,21 @@ import { i18n } from '@kbn/i18n';
 import { RANGE_SLIDER_CONTROL } from '../range_slider';
 
 export const ControlGroupStrings = {
+  invalidControlWarning: {
+    title: i18n.translate('controls.controlGroup.invalidControlWarning.title', {
+      defaultMessage: 'Selections are returning no results',
+    }),
+    text: i18n.translate('controls.controlGroup.invalidControlWarning.text', {
+      defaultMessage:
+        'Some control selections are returning no results. Remove them for complete results.',
+    }),
+    dismissButtonLabel: i18n.translate(
+      'controls.controlGroup.invalidControlWarning.dismissButtonLabel',
+      {
+        defaultMessage: 'Do not show again',
+      }
+    ),
+  },
   manageControl: {
     getFlyoutCreateTitle: () =>
       i18n.translate('controls.controlGroup.manageControl.createFlyoutTitle', {
@@ -258,8 +273,7 @@ export const ControlGroupStrings = {
           }),
         getValidateSelectionsSubTitle: () =>
           i18n.translate('controls.controlGroup.management.validate.subtitle', {
-            defaultMessage:
-              'Automatically ignore any control selection that would result in no data.',
+            defaultMessage: 'Highlight control selections that result in no data.',
           }),
       },
       controlChaining: {

src/plugins/controls/public/control_group/embeddable/control_group_container.tsx

@@ -5,15 +5,18 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
+
+import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { compareFilters, COMPARE_ALL_OPTIONS, Filter, uniqFilters } from '@kbn/es-query';
+import { toMountPoint } from '@kbn/react-kibana-mount';
 import { isEqual, pick } from 'lodash';
 import React, { createContext, useContext } from 'react';
 import ReactDOM from 'react-dom';
 import { Provider, TypedUseSelectorHook, useSelector } from 'react-redux';
 import { BehaviorSubject, merge, Subject, Subscription } from 'rxjs';
 import { debounceTime, distinctUntilChanged, skip } from 'rxjs/operators';
 
-import { OverlayRef } from '@kbn/core/public';
+import { OverlayRef, Toast } from '@kbn/core/public';
 import { Container, EmbeddableFactory } from '@kbn/embeddable-plugin/public';
 import { ReduxEmbeddableTools, ReduxToolsPackage } from '@kbn/presentation-util-plugin/public';
 import { KibanaThemeProvider } from '@kbn/react-kibana-context-theme';
@@ -55,6 +58,8 @@ import {
   controlOrdersAreEqual,
 } from './control_group_chaining_system';
 import { getNextPanelOrder } from './control_group_helpers';
+import { ControlGroupStrings } from '../control_group_strings';
+import { ControlsStorageService } from '../../services/storage/types';
 
 let flyoutRef: OverlayRef | undefined;
 export const setFlyoutRef = (newRef: OverlayRef | undefined) => {
@@ -86,11 +91,16 @@ export class ControlGroupContainer extends Container<
 
   private initialized$ = new BehaviorSubject(false);
 
+  private storageService: ControlsStorageService;
+
   private subscriptions: Subscription = new Subscription();
   private domNode?: HTMLElement;
   private recalculateFilters$: Subject<null>;
   private relevantDataViewId?: string;
   private lastUsedDataViewId?: string;
+  private invalidSelectionsState: { [childId: string]: boolean };
+  private invalidSelectionsToast?: Toast;
+
   public diffingSubscription: Subscription = new Subscription();
 
   // state management
@@ -126,6 +136,8 @@ export class ControlGroupContainer extends Container<
       ControlGroupChainingSystems[initialInput.chainingSystem]?.getContainerSettings(initialInput)
     );
 
+    ({ storage: this.storageService } = pluginServices.getServices());
+
     this.recalculateFilters$ = new Subject();
     this.onFiltersPublished$ = new Subject<Filter[]>();
     this.onControlRemoved$ = new Subject<string>();
@@ -153,6 +165,10 @@ export class ControlGroupContainer extends Container<
 
     this.store = reduxEmbeddableTools.store;
 
+    this.invalidSelectionsState = this.getChildIds().reduce((prev, id) => {
+      return { ...prev, [id]: false };
+    }, {});
+
     // when all children are ready setup subscriptions
     this.untilAllChildrenReady().then(() => {
       this.recalculateDataViews();
@@ -164,6 +180,67 @@ export class ControlGroupContainer extends Container<
     this.fieldFilterPredicate = fieldFilterPredicate;
   }
 
+  public canShowInvalidSelectionsWarning = () =>
+    this.storageService.getShowInvalidSelectionWarning() ?? true;
+
+  public supressInvalidSelectionsWarning = () => {
+    this.storageService.setShowInvalidSelectionWarning(false);
+  };
+
+  public showInvalidSelectionsToast = () => {
+    if (!this.canShowInvalidSelectionsWarning()) return;
+    const {
+      core: { notifications, theme, i18n },
+    } = pluginServices.getServices();
+
+    // remove any existing toasts to avoid a toast storm
+    if (this.invalidSelectionsToast) {
+      notifications.toasts.remove(this.invalidSelectionsToast);
+    }
+
+    this.invalidSelectionsToast = notifications.toasts.add({
+      title: ControlGroupStrings.invalidControlWarning.title,
+      text: toMountPoint(
+        <>
+          <p>{ControlGroupStrings.invalidControlWarning.text}</p>
+          <EuiFlexGroup justifyContent="flexEnd" gutterSize="s">
+            <EuiFlexItem grow={false}>
+              <EuiButtonEmpty
+                size="xs"
+                color="text"
+                onClick={() => {
+                  this.supressInvalidSelectionsWarning();
+                  if (this.invalidSelectionsToast) {
+                    notifications.toasts.remove(this.invalidSelectionsToast);
+                  }
+                }}
+              >
+                {ControlGroupStrings.invalidControlWarning.dismissButtonLabel}
+              </EuiButtonEmpty>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </>,
+        { theme, i18n }
+      ),
+    });
+  };
+
+  public reportInvalidSelections = ({
+    id,
+    hasInvalidSelections,
+  }: {
+    id: string;
+    hasInvalidSelections: boolean;
+  }) => {
+    this.invalidSelectionsState = { ...this.invalidSelectionsState, [id]: hasInvalidSelections };
+
+    const childrenHaveInvalidSelections = Object.keys(this.getInput().panels).some((childId) => {
+      return this.invalidSelectionsState[childId];
+    });
+
+    this.dispatch.setControlsHaveInvalidSelections(childrenHaveInvalidSelections);
+  };
+
   private setupSubscriptions = () => {
     /**
      * refresh control order cache and make all panels refreshInputFromParent whenever panel orders change
@@ -201,7 +278,9 @@ export class ControlGroupContainer extends Container<
      * debounce output recalculation
      */
     this.subscriptions.add(
-      this.recalculateFilters$.pipe(debounceTime(10)).subscribe(() => this.recalculateFilters())
+      this.recalculateFilters$.pipe(debounceTime(10)).subscribe(() => {
+        this.recalculateFilters();
+      })
     );
   };
 
@@ -211,9 +290,16 @@ export class ControlGroupContainer extends Container<
     } = this.getState();
     if (!persistableControlGroupInputIsEqual(this.getPersistableInput(), lastSavedInput)) {
       this.updateInput(lastSavedInput);
+      this.reload(); // this forces the children to update their inputs + perform validation as necessary
     }
   }
 
+  public reload() {
+    // reset invalid selections state on reload
+    this.dispatch.setControlsHaveInvalidSelections(undefined);
+    super.reload();
+  }
+
   public getPersistableInput: () => PersistableControlGroupInput & { id: string } = () => {
     const input = this.getInput();
     return pick(input, [...persistableControlGroupInputKeys, 'id']);
@@ -284,13 +370,14 @@ export class ControlGroupContainer extends Container<
   private recalculateFilters = () => {
     const allFilters: Filter[] = [];
     let timeslice;
-    Object.values(this.children).map((child) => {
+    Object.values(this.children).map((child: ControlEmbeddable) => {
       const childOutput = child.getOutput() as ControlOutput;
       allFilters.push(...(childOutput?.filters ?? []));
       if (childOutput.timeslice) {
         timeslice = childOutput.timeslice;
       }
     });
+
     // if filters are different, publish them
     if (
       !compareFilters(this.output.filters ?? [], allFilters ?? [], COMPARE_ALL_OPTIONS) ||

src/plugins/controls/public/control_group/state/control_group_reducers.ts

@@ -19,6 +19,12 @@ export const controlGroupReducers = {
   ) => {
     state.componentState.lastSavedInput = action.payload;
   },
+  setControlsHaveInvalidSelections: (
+    state: WritableDraft<ControlGroupReduxState>,
+    action: PayloadAction<ControlGroupComponentState['controlsHaveInvalidSelections']>
+  ) => {
+    state.componentState.controlsHaveInvalidSelections = action.payload;
+  },
   setControlStyle: (
     state: WritableDraft<ControlGroupReduxState>,
     action: PayloadAction<ControlGroupInput['controlStyle']>

src/plugins/controls/public/control_group/types.ts

@@ -42,6 +42,7 @@ export interface ControlGroupSettings {
 
 export type ControlGroupComponentState = ControlGroupSettings & {
   lastSavedInput: PersistableControlGroupInput;
+  controlsHaveInvalidSelections?: boolean;
 };
 
 export {

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

@@ -15,14 +15,16 @@
       font-weight: $euiFontWeightRegular;
     }
 
-    .optionsList__filterValid {
+    .optionsList__selections {
+      overflow: hidden !important;
+    }
+
+    .optionsList__filter {
       font-weight: $euiFontWeightMedium;
     }
 
     .optionsList__filterInvalid {
-      color: $euiTextSubduedColor;
-      text-decoration: line-through;
-      font-weight: $euiFontWeightRegular;
+      color: $euiColorWarningText;
     }
 
     .optionsList__negateLabel {
@@ -78,8 +80,7 @@
   }
 
   .optionsList__selectionInvalid {
-    text-decoration: line-through;
-    color: $euiTextSubduedColor;
+    color: $euiColorWarningText;
   }
 
   .optionslist--loadingMoreGroupLabel {

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

@@ -8,9 +8,7 @@
 
 import React from 'react';
 
-import { mountWithIntl } from '@kbn/test-jest-helpers';
-import { findTestSubject } from '@elastic/eui/lib/test';
-
+import { render } from '@testing-library/react';
 import { OptionsListEmbeddableContext } from '../embeddable/options_list_embeddable';
 import { OptionsListComponentState, OptionsListReduxState } from '../types';
 import { ControlOutput, OptionsListEmbeddableInput } from '../..';
@@ -37,7 +35,7 @@ describe('Options list control', () => {
       output: options?.output ?? {},
     } as Partial<OptionsListReduxState>);
 
-    return mountWithIntl(
+    return render(
       <OptionsListEmbeddableContext.Provider value={optionsListEmbeddable}>
         <OptionsListControl {...defaultProps} />
       </OptionsListEmbeddableContext.Provider>
@@ -48,15 +46,15 @@ describe('Options list control', () => {
     const control = await mountComponent({
       explicitInput: { id: 'testExists', exclude: false, existsSelected: true },
     });
-    const existsOption = findTestSubject(control, 'optionsList-control-testExists');
-    expect(existsOption.text()).toBe('Exists');
+    const existsOption = control.getByTestId('optionsList-control-testExists');
+    expect(existsOption).toHaveTextContent('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');
+    const existsOption = control.getByTestId('optionsList-control-testDoesNotExist');
+    expect(existsOption).toHaveTextContent('DOES NOT Exist');
   });
 });