[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)
This commit is contained in:
Hannah Mudge 2024-07-30 08:43:01 -06:00 committed by GitHub
parent e37995c9c6
commit b9356a87c2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 13 additions and 6 deletions

View file

@ -137,7 +137,8 @@ export const ControlGroup = () => {
!renderTourStep ||
!controlGroup.canShowInvalidSelectionsWarning() ||
!tourStepOpen ||
!controlWithInvalidSelectionsId
!controlWithInvalidSelectionsId ||
!panels[controlWithInvalidSelectionsId]
) {
return null;
}

View file

@ -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 });