Suggestion for tour stuff

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

@@ -26,9 +26,9 @@ import {
   LayoutMeasuringStrategy,
 } from '@dnd-kit/core';
 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 { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiPanel, EuiTourStep } from '@elastic/eui';
 
 import { ViewMode } from '@kbn/embeddable-plugin/public';
 
@@ -47,6 +47,33 @@ 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 invalidSelectionsControlId = contextSelect(
+    (state) => state.componentState.invalidSelectionsControlId
+  );
+
+  useEffect(() => {
+    console.log('HEREEE', invalidSelectionsControlId);
+  }, [invalidSelectionsControlId]);
+
+  // const tourStep = useMemo(() => {
+  //   return (
+  //     <EuiTourStep
+  //       anchor={`#controlFrame--${invalidSelectionsControlId}`}
+  //       content={'this is some content'}
+  //       isStepOpen={Boolean(invalidSelectionsControlId)}
+  //       minWidth={300}
+  //       onFinish={() => {}}
+  //       step={1}
+  //       stepsTotal={1}
+  //       repositionOnScroll
+  //       maxWidth={300}
+  //       panelPaddingSize="m"
+  //       display="block"
+  //       title="React ref as anchor location"
+  //       anchorPosition="downCenter"
+  //     />
+  //   );
+  // }, [invalidSelectionsControlId]);
 
   const isEditable = viewMode === ViewMode.EDIT;
 
@@ -117,6 +144,21 @@ export const ControlGroup = () => {
             alignItems="center"
             data-test-subj="controls-group"
           >
+            <EuiTourStep
+              anchor={`#controlFrame--${invalidSelectionsControlId}`}
+              content={'this is some content'}
+              isStepOpen={Boolean(invalidSelectionsControlId)}
+              minWidth={300}
+              onFinish={() => {}}
+              step={1}
+              stepsTotal={1}
+              repositionOnScroll
+              maxWidth={300}
+              panelPaddingSize="m"
+              display="block"
+              title="React ref as anchor location"
+              anchorPosition="downCenter"
+            />
             <EuiFlexItem>
               <DndContext
                 onDragStart={({ active }) => setDraggingId(active.id)}

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

@@ -10,8 +10,8 @@ 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 { BehaviorSubject, combineLatest, merge, Subject, Subscription, zip, mergeMap } from 'rxjs';
+import { debounceTime, distinctUntilChanged, filter, map, skip } from 'rxjs/operators';
 
 import { OverlayRef } from '@kbn/core/public';
 import { Container, EmbeddableFactory } from '@kbn/embeddable-plugin/public';
@@ -24,7 +24,7 @@ import {
   persistableControlGroupInputKeys,
 } from '../../../common';
 import { pluginServices } from '../../services';
-import { ControlEmbeddable, ControlInput, ControlOutput } from '../../types';
+import { ControlEmbeddable, ControlInput, ControlOutput, isClearableControl } from '../../types';
 import { ControlGroup } from '../component/control_group_component';
 import { openAddDataControlFlyout } from '../editor/open_add_data_control_flyout';
 import { openEditControlGroupFlyout } from '../editor/open_edit_control_group_flyout';
@@ -197,6 +197,32 @@ export class ControlGroupContainer extends Container<
       })
     );
 
+    const arrayOfBehaviorSubjects: Array<BehaviorSubject<string | undefined>> =
+      this.getChildIds().map((childId) => {
+        const child = this.getChild(childId);
+        if (isClearableControl(child)) {
+          return child.invalidSelections$;
+        }
+        return new BehaviorSubject<string | undefined>(undefined);
+      });
+    this.subscriptions.add(
+      combineLatest(arrayOfBehaviorSubjects)
+        .pipe(
+          debounceTime(100),
+          map((stuff) => {
+            return stuff.filter((a) => a !== undefined);
+          }),
+          distinctUntilChanged((a, b) => isEqual(a, b))
+        )
+        .subscribe((childHasInvalidSelection) => {
+          if (childHasInvalidSelection.length > 0) {
+            this.dispatch.setInvalidSelectionsControlId(childHasInvalidSelection[0]);
+          } else {
+            this.dispatch.setInvalidSelectionsControlId(undefined);
+          }
+        })
+    );
+
     /**
      * debounce output recalculation
      */
@@ -284,7 +310,7 @@ 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) {

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

@@ -19,6 +19,12 @@ export const controlGroupReducers = {
   ) => {
     state.componentState.lastSavedInput = action.payload;
   },
+  setInvalidSelectionsControlId: (
+    state: WritableDraft<ControlGroupReduxState>,
+    action: PayloadAction<ControlGroupComponentState['invalidSelectionsControlId']>
+  ) => {
+    state.componentState.invalidSelectionsControlId = 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;
+  invalidSelectionsControlId?: string;
 };
 
 export {

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

@@ -42,9 +42,6 @@ export const OptionsListControl = ({
   const isPopoverOpen = optionsList.select((state) => state.componentState.popoverOpen);
   const invalidSelections = optionsList.select((state) => state.componentState.invalidSelections);
   const fieldSpec = optionsList.select((state) => state.componentState.field);
-  const showInvalidSelectionWarning = optionsList.select(
-    (state) => state.componentState.showInvalidSelectionWarning
-  );
 
   const id = optionsList.select((state) => state.explicitInput.id);
   const exclude = optionsList.select((state) => state.explicitInput.exclude);
@@ -196,7 +193,7 @@ export const OptionsListControl = ({
         'optionsList--filterGroupSingle': controlStyle !== 'twoLine',
       })}
     >
-      <EuiTourStep
+      {/* <EuiTourStep
         anchorPosition="downCenter"
         isStepOpen={showInvalidSelectionWarning}
         title={OptionsListStrings.control.getInvalidSelectionWarningTitle()}
@@ -225,28 +222,28 @@ export const OptionsListControl = ({
           optionsList.dispatch.setInvalidSelectionWarningOpen(false);
         }}
         onFinish={() => {}}
+      > */}
+      <EuiInputPopover
+        ownFocus
+        input={button}
+        hasArrow={false}
+        repositionOnScroll
+        isOpen={isPopoverOpen}
+        panelPaddingSize="none"
+        panelMinWidth={MIN_POPOVER_WIDTH}
+        className="optionsList__inputButtonOverride"
+        initialFocus={'[data-test-subj=optionsList-control-search-input]'}
+        closePopover={() => optionsList.dispatch.setPopoverOpen(false)}
+        panelClassName="optionsList__popoverOverride"
+        panelProps={{ 'aria-label': OptionsListStrings.popover.getAriaLabel(fieldName) }}
       >
-        <EuiInputPopover
-          ownFocus
-          input={button}
-          hasArrow={false}
-          repositionOnScroll
-          isOpen={isPopoverOpen}
-          panelPaddingSize="none"
-          panelMinWidth={MIN_POPOVER_WIDTH}
-          className="optionsList__inputButtonOverride"
-          initialFocus={'[data-test-subj=optionsList-control-search-input]'}
-          closePopover={() => optionsList.dispatch.setPopoverOpen(false)}
-          panelClassName="optionsList__popoverOverride"
-          panelProps={{ 'aria-label': OptionsListStrings.popover.getAriaLabel(fieldName) }}
-        >
-          <OptionsListPopover
-            isLoading={debouncedLoading}
-            updateSearchString={updateSearchString}
-            loadMoreSuggestions={loadMoreSuggestions}
-          />
-        </EuiInputPopover>
-      </EuiTourStep>
+        <OptionsListPopover
+          isLoading={debouncedLoading}
+          updateSearchString={updateSearchString}
+          loadMoreSuggestions={loadMoreSuggestions}
+        />
+      </EuiInputPopover>
+      {/* </EuiTourStep> */}
     </EuiFilterGroup>
   );
 };

src/plugins/controls/public/options_list/embeddable/options_list_embeddable.tsx

@@ -10,7 +10,7 @@ import ReactDOM from 'react-dom';
 import { batch } from 'react-redux';
 import deepEqual from 'fast-deep-equal';
 import { isEmpty, isEqual } from 'lodash';
-import { merge, Subject, Subscription, switchMap, tap } from 'rxjs';
+import { BehaviorSubject, merge, Subject, Subscription, switchMap, tap } from 'rxjs';
 import React, { createContext, useContext } from 'react';
 import { debounceTime, map, distinctUntilChanged, skip } from 'rxjs/operators';
 
@@ -106,6 +106,7 @@ export class OptionsListEmbeddable
   public dispatch: OptionsListReduxEmbeddableTools['dispatch'];
   public onStateChange: OptionsListReduxEmbeddableTools['onStateChange'];
 
+  public invalidSelections$: BehaviorSubject<string | undefined>;
   private cleanupStateTools: () => void;
 
   constructor(
@@ -135,13 +136,14 @@ export class OptionsListEmbeddable
       reducers: optionsListReducers,
       initialComponentState: getDefaultComponentState(),
     });
-
     this.select = reduxEmbeddableTools.select;
     this.getState = reduxEmbeddableTools.getState;
     this.dispatch = reduxEmbeddableTools.dispatch;
     this.cleanupStateTools = reduxEmbeddableTools.cleanup;
     this.onStateChange = reduxEmbeddableTools.onStateChange;
 
+    this.invalidSelections$ = new BehaviorSubject<string | undefined>(undefined);
+
     this.initialize();
   }
 
@@ -353,13 +355,15 @@ export class OptionsListEmbeddable
           validSelections: selectedOptions,
           totalCardinality,
         });
+        this.invalidSelections$.next(undefined);
       } else {
         const valid: string[] = [];
         const invalid: string[] = [];
         for (const selectedOption of selectedOptions ?? []) {
           if (invalidSelections?.includes(String(selectedOption))) invalid.push(selectedOption);
           else valid.push(selectedOption);
         }
+        this.invalidSelections$.next(this.id);
         this.dispatch.updateQueryResults({
           availableOptions: suggestions,
           invalidSelections: invalid,

src/plugins/controls/public/range_slider/components/range_slider_control.tsx

@@ -142,7 +142,7 @@ export const RangeSliderControl: FC = () => {
     <ControlError error={error} />
   ) : (
     <>
-      <EuiTourStep
+      {/* <EuiTourStep
         anchorPosition="downCenter"
         isStepOpen={showInvalidSelectionWarning}
         title={RangeSliderStrings.control.getInvalidRangeWarningTitle()}
@@ -171,49 +171,49 @@ export const RangeSliderControl: FC = () => {
           rangeSlider.dispatch.setInvalidRangeWarningOpen(false);
         }}
         onFinish={() => {}}
-      >
-        <span className="rangeSliderAnchor__button" data-test-subj={`range-slider-control-${id}`}>
-          <EuiDualRange
-            ref={rangeSliderRef}
-            id={id}
-            fullWidth
-            showTicks
-            ticks={ticks}
-            levels={levels}
-            min={displayedMin}
-            max={displayedMax}
-            isLoading={isLoading}
-            inputPopoverProps={{
-              panelMinWidth: MIN_POPOVER_WIDTH,
-            }}
-            onMouseUp={() => {
-              // when the pin is dropped (on mouse up), cancel any pending debounced changes and force the change
-              // in value to happen instantly (which, in turn, will re-calculate the min/max for the slider due to
-              // the `useEffect` above.
-              debouncedOnChange.cancel();
-              rangeSlider.dispatch.setSelectedRange(displayedValue);
-            }}
-            readOnly={disablePopover}
-            showInput={'inputWithPopover'}
-            data-test-subj="rangeSlider__slider"
-            minInputProps={getCommonInputProps({
-              inputValue: displayedValue[0],
-              testSubj: 'lowerBoundFieldNumber',
-              placeholder: String(min ?? -Infinity),
-            })}
-            maxInputProps={getCommonInputProps({
-              inputValue: displayedValue[1],
-              testSubj: 'upperBoundFieldNumber',
-              placeholder: String(max ?? Infinity),
-            })}
-            value={[displayedValue[0] || displayedMin, displayedValue[1] || displayedMax]}
-            onChange={([minSelection, maxSelection]: [number | string, number | string]) => {
-              setDisplayedValue([String(minSelection), String(maxSelection)]);
-              debouncedOnChange([String(minSelection), String(maxSelection)]);
-            }}
-          />
-        </span>
-      </EuiTourStep>
+      > */}
+      <span className="rangeSliderAnchor__button" data-test-subj={`range-slider-control-${id}`}>
+        <EuiDualRange
+          ref={rangeSliderRef}
+          id={id}
+          fullWidth
+          showTicks
+          ticks={ticks}
+          levels={levels}
+          min={displayedMin}
+          max={displayedMax}
+          isLoading={isLoading}
+          inputPopoverProps={{
+            panelMinWidth: MIN_POPOVER_WIDTH,
+          }}
+          onMouseUp={() => {
+            // when the pin is dropped (on mouse up), cancel any pending debounced changes and force the change
+            // in value to happen instantly (which, in turn, will re-calculate the min/max for the slider due to
+            // the `useEffect` above.
+            debouncedOnChange.cancel();
+            rangeSlider.dispatch.setSelectedRange(displayedValue);
+          }}
+          readOnly={disablePopover}
+          showInput={'inputWithPopover'}
+          data-test-subj="rangeSlider__slider"
+          minInputProps={getCommonInputProps({
+            inputValue: displayedValue[0],
+            testSubj: 'lowerBoundFieldNumber',
+            placeholder: String(min ?? -Infinity),
+          })}
+          maxInputProps={getCommonInputProps({
+            inputValue: displayedValue[1],
+            testSubj: 'upperBoundFieldNumber',
+            placeholder: String(max ?? Infinity),
+          })}
+          value={[displayedValue[0] || displayedMin, displayedValue[1] || displayedMax]}
+          onChange={([minSelection, maxSelection]: [number | string, number | string]) => {
+            setDisplayedValue([String(minSelection), String(maxSelection)]);
+            debouncedOnChange([String(minSelection), String(maxSelection)]);
+          }}
+        />
+      </span>
+      {/* </EuiTourStep> */}
     </>
   );
 };

src/plugins/controls/public/range_slider/embeddable/range_slider_embeddable.tsx

@@ -11,7 +11,7 @@ import { get, isEmpty, isEqual } from 'lodash';
 import React, { createContext, useContext } from 'react';
 import ReactDOM from 'react-dom';
 import { batch } from 'react-redux';
-import { lastValueFrom, Subscription, merge, switchMap } from 'rxjs';
+import { lastValueFrom, Subscription, merge, switchMap, BehaviorSubject } from 'rxjs';
 import { distinctUntilChanged, map } from 'rxjs/operators';
 
 import { DataView, DataViewField } from '@kbn/data-views-plugin/public';
@@ -101,6 +101,7 @@ export class RangeSliderEmbeddable
   public dispatch: RangeSliderReduxEmbeddableTools['dispatch'];
   public onStateChange: RangeSliderReduxEmbeddableTools['onStateChange'];
 
+  public invalidSelections$: BehaviorSubject<string | undefined>;
   private cleanupStateTools: () => void;
 
   constructor(
@@ -131,6 +132,9 @@ export class RangeSliderEmbeddable
     this.dispatch = reduxEmbeddableTools.dispatch;
     this.onStateChange = reduxEmbeddableTools.onStateChange;
     this.cleanupStateTools = reduxEmbeddableTools.cleanup;
+
+    this.invalidSelections$ = new BehaviorSubject(undefined);
+
     this.initialize();
   }