From b9356a87c207c6295e87f27cdf2417d12c4cfdfd Mon Sep 17 00:00:00 2001
From: Hannah Mudge <Heenawter@users.noreply.github.com>
Date: Tue, 30 Jul 2024 08:43:01 -0600
Subject: [PATCH] [Controls] Fix error on navigation when invalid selections
 tour step is open (#189449)

## Summary

This PR fixes a bug where, if the "invalid selections" tour step is
active when navigating between dashboards, the dashboard would render
with an `"Unable to load page"` error where the control group should be.
This was because we weren't updating the `invalidSelectionsState` +
`controlWithInvalidSelectionsId` state on navigation.

Note that there is still a race condition happening under the hood
because we are updating the `input` before updating the "invalid
selections" related state - but the `||
!panels[controlWithInvalidSelectionsId]` addition to the control group
component makes it so that this is no longer shown to the user. Since we
will be removing the tour step as part of the control group refactor, it
was not worth digging into this more.

**Before**


https://github.com/user-attachments/assets/d439d52a-1dc8-4a54-b806-85d73fd08099


**After**


https://github.com/user-attachments/assets/541bcc39-41b0-4a8a-ad7b-0de214abe37d



### For maintainers

- [ ] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
---
 .../component/control_group_component.tsx        |  3 ++-
 .../embeddable/control_group_container.tsx       | 16 +++++++++++-----
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/plugins/controls/public/control_group/component/control_group_component.tsx b/src/plugins/controls/public/control_group/component/control_group_component.tsx
index 019ef9256e91..1b5b39bb6702 100644
--- a/src/plugins/controls/public/control_group/component/control_group_component.tsx
+++ b/src/plugins/controls/public/control_group/component/control_group_component.tsx
@@ -137,7 +137,8 @@ export const ControlGroup = () => {
       !renderTourStep ||
       !controlGroup.canShowInvalidSelectionsWarning() ||
       !tourStepOpen ||
-      !controlWithInvalidSelectionsId
+      !controlWithInvalidSelectionsId ||
+      !panels[controlWithInvalidSelectionsId]
     ) {
       return null;
     }
diff --git a/src/plugins/controls/public/control_group/embeddable/control_group_container.tsx b/src/plugins/controls/public/control_group/embeddable/control_group_container.tsx
index 70c57f6f73cf..46b47927a76c 100644
--- a/src/plugins/controls/public/control_group/embeddable/control_group_container.tsx
+++ b/src/plugins/controls/public/control_group/embeddable/control_group_container.tsx
@@ -104,7 +104,7 @@ export class ControlGroupContainer extends Container<
   private recalculateFilters$: Subject<null>;
   private relevantDataViewId?: string;
   private lastUsedDataViewId?: string;
-  private invalidSelectionsState: { [childId: string]: boolean };
+  private invalidSelectionsState: { [childId: string]: boolean } = {};
 
   public diffingSubscription: Subscription = new Subscription();
 
@@ -170,12 +170,12 @@ 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.invalidSelectionsState = this.getChildIds().reduce((prev, id) => {
+        return { ...prev, [id]: false };
+      }, {});
+
       this.recalculateDataViews();
       this.setupSubscriptions();
       const { filters, timeslice } = this.recalculateFilters();
@@ -324,7 +324,13 @@ export class ControlGroupContainer extends Container<
     this.subscriptions = new Subscription();
     this.initialized$.next(false);
     this.updateInput(newInput);
+
     this.untilAllChildrenReady().then(() => {
+      this.dispatch.setControlWithInvalidSelectionsId(undefined);
+      this.invalidSelectionsState = this.getChildIds().reduce((prev, id) => {
+        return { ...prev, [id]: false };
+      }, {});
+
       this.recalculateDataViews();
       const { filters, timeslice } = this.recalculateFilters();
       this.publishFilters({ filters, timeslice });