[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,44 @@
 
 import '../control_group.scss';
 
-import {
-  arrayMove,
-  SortableContext,
-  rectSortingStrategy,
-  sortableKeyboardCoordinates,
-} from '@dnd-kit/sortable';
+import classNames from 'classnames';
+import React, { useEffect, useMemo, useState } from 'react';
+import { TypedUseSelectorHook, useSelector } from 'react-redux';
+
 import {
   closestCenter,
   DndContext,
   DragEndEvent,
   DragOverlay,
   KeyboardSensor,
+  LayoutMeasuringStrategy,
   PointerSensor,
   useSensor,
   useSensors,
-  LayoutMeasuringStrategy,
 } from '@dnd-kit/core';
-import classNames from 'classnames';
-import React, { useMemo, useState } from 'react';
-import { TypedUseSelectorHook, useSelector } from 'react-redux';
-import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiPanel } from '@elastic/eui';
-
+import {
+  arrayMove,
+  rectSortingStrategy,
+  SortableContext,
+  sortableKeyboardCoordinates,
+} from '@dnd-kit/sortable';
+import {
+  EuiButtonEmpty,
+  EuiButtonIcon,
+  EuiCheckbox,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiPanel,
+  EuiText,
+  EuiTourStep,
+} 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 +57,12 @@ 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 controlWithInvalidSelectionsId = contextSelect(
+    (state) => state.componentState.controlWithInvalidSelectionsId
+  );
+  const [tourStepOpen, setTourStepOpen] = useState<boolean>(true);
+  const [suppressTourChecked, setSuppressTourChecked] = useState<boolean>(false);
+  const [renderTourStep, setRenderTourStep] = useState(false);
 
   const isEditable = viewMode === ViewMode.EDIT;
 
@@ -61,6 +77,87 @@ export const ControlGroup = () => {
     [panels]
   );
 
+  useEffect(() => {
+    /**
+     * This forces the tour step to get unmounted so that it can attach to the new invalid
+     * control - otherwise, the anchor will remain attached to the old invalid control
+     */
+    setRenderTourStep(false);
+    setTimeout(() => setRenderTourStep(true), 100);
+  }, [controlWithInvalidSelectionsId]);
+
+  const tourStep = useMemo(() => {
+    if (
+      !renderTourStep ||
+      !controlGroup.canShowInvalidSelectionsWarning() ||
+      !tourStepOpen ||
+      !controlWithInvalidSelectionsId
+    ) {
+      return null;
+    }
+    const invalidControlType = panels[controlWithInvalidSelectionsId].type;
+
+    return (
+      <EuiTourStep
+        step={1}
+        stepsTotal={1}
+        minWidth={300}
+        maxWidth={300}
+        display="block"
+        isStepOpen={true}
+        repositionOnScroll
+        onFinish={() => {}}
+        panelPaddingSize="m"
+        anchorPosition="downCenter"
+        panelClassName="controlGroup--invalidSelectionsTour"
+        anchor={`#controlFrame--${controlWithInvalidSelectionsId}`}
+        title={
+          <EuiFlexGroup gutterSize="s" alignItems="center">
+            <EuiFlexItem grow={false}>
+              <EuiIcon type="warning" color="warning" />
+            </EuiFlexItem>
+            <EuiFlexItem>{ControlGroupStrings.invalidControlWarning.getTourTitle()}</EuiFlexItem>
+          </EuiFlexGroup>
+        }
+        content={ControlGroupStrings.invalidControlWarning.getTourContent(invalidControlType)}
+        footerAction={[
+          <EuiCheckbox
+            compressed
+            checked={suppressTourChecked}
+            id={'controlGroup--suppressTourCheckbox'}
+            className="controlGroup--suppressTourCheckbox"
+            onChange={(e) => setSuppressTourChecked(e.target.checked)}
+            label={
+              <EuiText size="xs" className="controlGroup--suppressTourCheckboxLabel">
+                {ControlGroupStrings.invalidControlWarning.getSuppressTourLabel()}
+              </EuiText>
+            }
+          />,
+          <EuiButtonEmpty
+            size="xs"
+            flush="right"
+            color="text"
+            onClick={() => {
+              setTourStepOpen(false);
+              if (suppressTourChecked) {
+                controlGroup.suppressInvalidSelectionsWarning();
+              }
+            }}
+          >
+            {ControlGroupStrings.invalidControlWarning.getDismissButton()}
+          </EuiButtonEmpty>,
+        ]}
+      />
+    );
+  }, [
+    panels,
+    controlGroup,
+    tourStepOpen,
+    renderTourStep,
+    suppressTourChecked,
+    controlWithInvalidSelectionsId,
+  ]);
+
   const [draggingId, setDraggingId] = useState<string | null>(null);
   const draggingIndex = useMemo(
     () => (draggingId ? idsInOrder.indexOf(draggingId) : -1),
@@ -117,6 +214,7 @@ export const ControlGroup = () => {
             alignItems="center"
             data-test-subj="controls-group"
           >
+            {tourStep}
             <EuiFlexItem>
               <DndContext
                 onDragStart={({ active }) => setDraggingId(active.id)}

src/plugins/controls/public/control_group/control_group.scss

@@ -199,3 +199,12 @@ $controlMinWidth: $euiSize * 14;
     top: (-$euiSizeXS) !important;
   }
 }
+
+.controlGroup--invalidSelectionsTour {
+  .controlGroup--suppressTourCheckbox {
+    height: 22px;
+    &Label {
+      font-weight: $euiFontWeightMedium;
+    }
+  }
+}

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

@@ -10,6 +10,42 @@ import { i18n } from '@kbn/i18n';
 import { RANGE_SLIDER_CONTROL } from '../range_slider';
 
 export const ControlGroupStrings = {
+  invalidControlWarning: {
+    getTourTitle: () =>
+      i18n.translate('controls.controlGroup.invalidControlWarning.tourStepTitle.default', {
+        defaultMessage: 'Invalid selections are no longer ignored',
+      }),
+    getTourContent: (controlType: string) => {
+      switch (controlType) {
+        case RANGE_SLIDER_CONTROL: {
+          return i18n.translate(
+            'controls.controlGroup.invalidControlWarning.tourStepContent.rangeSlider',
+            {
+              defaultMessage: 'The selected range is returning no results. Try changing the range.',
+            }
+          );
+        }
+        default: {
+          return i18n.translate(
+            'controls.controlGroup.invalidControlWarning.tourStepContent.default',
+            {
+              defaultMessage:
+                'Some selections are returning no results. Try changing the selections.',
+            }
+          );
+        }
+      }
+    },
+
+    getDismissButton: () =>
+      i18n.translate('controls.controlGroup.invalidControlWarning.dismissButtonLabel', {
+        defaultMessage: 'Dismiss',
+      }),
+    getSuppressTourLabel: () =>
+      i18n.translate('controls.controlGroup.invalidControlWarning.suppressTourLabel', {
+        defaultMessage: "Don't show again",
+      }),
+  },
   manageControl: {
     getFlyoutCreateTitle: () =>
       i18n.translate('controls.controlGroup.manageControl.createFlyoutTitle', {
@@ -258,8 +294,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,6 +5,7 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
+
 import { compareFilters, COMPARE_ALL_OPTIONS, Filter, uniqFilters } from '@kbn/es-query';
 import { isEqual, pick } from 'lodash';
 import React, { createContext, useContext } from 'react';
@@ -24,6 +25,7 @@ import {
   persistableControlGroupInputKeys,
 } from '../../../common';
 import { pluginServices } from '../../services';
+import { ControlsStorageService } from '../../services/storage/types';
 import { ControlEmbeddable, ControlInput, ControlOutput } from '../../types';
 import { ControlGroup } from '../component/control_group_component';
 import { openAddDataControlFlyout } from '../editor/open_add_data_control_flyout';
@@ -86,11 +88,15 @@ 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 };
+
   public diffingSubscription: Subscription = new Subscription();
 
   // state management
@@ -126,6 +132,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 +161,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 +176,32 @@ export class ControlGroupContainer extends Container<
     this.fieldFilterPredicate = fieldFilterPredicate;
   }
 
+  public canShowInvalidSelectionsWarning = () =>
+    this.storageService.getShowInvalidSelectionWarning() ?? true;
+
+  public suppressInvalidSelectionsWarning = () => {
+    this.storageService.setShowInvalidSelectionWarning(false);
+  };
+
+  public reportInvalidSelections = ({
+    id,
+    hasInvalidSelections,
+  }: {
+    id: string;
+    hasInvalidSelections: boolean;
+  }) => {
+    this.invalidSelectionsState = { ...this.invalidSelectionsState, [id]: hasInvalidSelections };
+
+    const childrenWithInvalidSelections = cachedChildEmbeddableOrder(
+      this.getInput().panels
+    ).idsInOrder.filter((childId) => {
+      return this.invalidSelectionsState[childId];
+    });
+    this.dispatch.setControlWithInvalidSelectionsId(
+      childrenWithInvalidSelections.length > 0 ? childrenWithInvalidSelections[0] : undefined
+    );
+  };
+
   private setupSubscriptions = () => {
     /**
      * refresh control order cache and make all panels refreshInputFromParent whenever panel orders change
@@ -201,7 +239,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 +251,14 @@ 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() {
+    super.reload();
+  }
+
   public getPersistableInput: () => PersistableControlGroupInput & { id: string } = () => {
     const input = this.getInput();
     return pick(input, [...persistableControlGroupInputKeys, 'id']);
@@ -284,13 +329,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;
   },
+  setControlWithInvalidSelectionsId: (
+    state: WritableDraft<ControlGroupReduxState>,
+    action: PayloadAction<ControlGroupComponentState['controlWithInvalidSelectionsId']>
+  ) => {
+    state.componentState.controlWithInvalidSelectionsId = 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;
+  controlWithInvalidSelectionsId?: string;
 };
 
 export {