[Discover] Support state updates across tabs (elastic#215620)

## Summary

This PR adjusts the approach introduced in elastic#214861 to ensure state
updates work consistently across tabs, even after switching tabs during
async operations. The `currentTabId` prop has been removed from the
central state since it can't be relied on in actions, and instead tab
IDs are injected using a `CurrentTabProvider`. This allows selectors to
work the same as they did before, and tab specific actions have been
updated to use a standard `TabAction` interface that accepts a tab ID
and prevents leaking state changes.

This approach is safer but adds some complexity, so for actions
dispatched from React components, a `useCurrentTabAction` hook has been
added to handle injecting the current tab ID. We also still need to
access tab state within `DiscoverStateContainer` for now, so two utility
methods (`injectCurrentTab` and `getCurrentTab`) have been added to make
this easier. Since `DiscoverStateContainer` is scoped to a single tab,
this should be safe, and ideally temporary until we get rid of it
completely.

Resolves elastic#215398.

### Checklist

- [ ] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)
- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [ ] If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)
- [ ] This was checked for breaking HTTP API changes, and any breaking
changes have been approved by the breaking-change committee. The
`release_note:breaking` label should be applied in these situations.
- [ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

---------

Co-authored-by: kibanamachine <[email protected]>

Author: 2 people

examples/discover_customization_examples/public/plugin.tsx

@@ -240,7 +240,7 @@ export class DiscoverCustomizationExamplesPlugin implements Plugin {
             ControlGroupRendererApi | undefined
           >();
           const stateStorage = stateContainer.stateStorage;
-          const currentTabId = stateContainer.internalState.getState().tabs.currentId;
+          const currentTabId = stateContainer.getCurrentTab().id;
           const dataView = useObservable(
             stateContainer.runtimeStateManager.tabs.byId[currentTabId].currentDataView$,
             stateContainer.runtimeStateManager.tabs.byId[currentTabId].currentDataView$.getValue()

src/platform/plugins/shared/discover/public/__mocks__/discover_state.mock.ts

@@ -55,16 +55,18 @@ export function getDiscoverStateMock({
       ...(toasts && withNotifyOnErrors(toasts)),
     });
   runtimeStateManager = runtimeStateManager ?? createRuntimeStateManager();
+  const internalState = createInternalStateStore({
+    services,
+    customizationContext,
+    runtimeStateManager,
+    urlStateStorage: stateStorageContainer,
+  });
   const container = getDiscoverStateContainer({
+    tabId: internalState.getState().tabs.allIds[0],
     services,
     customizationContext,
     stateStorageContainer,
-    internalState: createInternalStateStore({
-      services,
-      customizationContext,
-      runtimeStateManager,
-      urlStateStorage: stateStorageContainer,
-    }),
+    internalState,
     runtimeStateManager,
   });
   if (savedSearch !== false) {

src/platform/plugins/shared/discover/public/application/main/components/layout/discover_documents.test.tsx

@@ -30,7 +30,7 @@ import { createCustomizationService } from '../../../../customizations/customiza
 import { DiscoverGrid } from '../../../../components/discover_grid';
 import { createDataViewDataSource } from '../../../../../common/data_sources';
 import type { ProfilesManager } from '../../../../context_awareness';
-import { internalStateActions } from '../../state_management/redux';
+import { CurrentTabProvider, internalStateActions } from '../../state_management/redux';
 
 const customisationService = createCustomizationService();
 
@@ -54,14 +54,16 @@ async function mountComponent(
     dataSource: createDataViewDataSource({ dataViewId: dataViewMock.id! }),
   });
   stateContainer.internalState.dispatch(
-    internalStateActions.setDataRequestParams({
-      timeRangeRelative: {
-        from: '2020-05-14T11:05:13.590',
-        to: '2020-05-14T11:20:13.590',
-      },
-      timeRangeAbsolute: {
-        from: '2020-05-14T11:05:13.590',
-        to: '2020-05-14T11:20:13.590',
+    stateContainer.injectCurrentTab(internalStateActions.setDataRequestParams)({
+      dataRequestParams: {
+        timeRangeRelative: {
+          from: '2020-05-14T11:05:13.590',
+          to: '2020-05-14T11:20:13.590',
+        },
+        timeRangeAbsolute: {
+          from: '2020-05-14T11:05:13.590',
+          to: '2020-05-14T11:20:13.590',
+        },
       },
     })
   );
@@ -81,11 +83,13 @@ async function mountComponent(
       services={{ ...services, profilesManager: profilesManager ?? services.profilesManager }}
     >
       <DiscoverCustomizationProvider value={customisationService}>
-        <DiscoverMainProvider value={stateContainer}>
-          <EuiProvider highContrastMode={false}>
-            <DiscoverDocuments {...props} />
-          </EuiProvider>
-        </DiscoverMainProvider>
+        <CurrentTabProvider currentTabId={stateContainer.getCurrentTab().id}>
+          <DiscoverMainProvider value={stateContainer}>
+            <EuiProvider highContrastMode={false}>
+              <DiscoverDocuments {...props} />
+            </EuiProvider>
+          </DiscoverMainProvider>
+        </CurrentTabProvider>
       </DiscoverCustomizationProvider>
     </KibanaContextProvider>
   );

src/platform/plugins/shared/discover/public/application/main/components/layout/discover_documents.tsx

@@ -76,10 +76,10 @@ import {
 } from '../../../../context_awareness';
 import {
   internalStateActions,
+  useCurrentTabSelector,
   useInternalStateDispatch,
   useInternalStateSelector,
 } from '../../state_management/redux';
-import { useCurrentTabSelector } from '../../state_management/redux/hooks';
 
 const DiscoverGridMemoized = React.memo(DiscoverGrid);
 

src/platform/plugins/shared/discover/public/application/main/components/layout/discover_histogram_layout.test.tsx

@@ -37,7 +37,11 @@ import { DiscoverMainProvider } from '../../state_management/discover_state_prov
 import { act } from 'react-dom/test-utils';
 import { PanelsToggle } from '../../../../components/panels_toggle';
 import { createDataViewDataSource } from '../../../../../common/data_sources';
-import { RuntimeStateProvider, internalStateActions } from '../../state_management/redux';
+import {
+  CurrentTabProvider,
+  RuntimeStateProvider,
+  internalStateActions,
+} from '../../state_management/redux';
 
 function getStateContainer(savedSearch?: SavedSearch) {
   const stateContainer = getDiscoverStateMock({ isTimeBased: true, savedSearch });
@@ -50,16 +54,20 @@ function getStateContainer(savedSearch?: SavedSearch) {
 
   stateContainer.appState.update(appState);
 
-  stateContainer.internalState.dispatch(internalStateActions.setDataView(dataView));
   stateContainer.internalState.dispatch(
-    internalStateActions.setDataRequestParams({
-      timeRangeAbsolute: {
-        from: '2020-05-14T11:05:13.590',
-        to: '2020-05-14T11:20:13.590',
-      },
-      timeRangeRelative: {
-        from: '2020-05-14T11:05:13.590',
-        to: '2020-05-14T11:20:13.590',
+    stateContainer.injectCurrentTab(internalStateActions.setDataView)({ dataView })
+  );
+  stateContainer.internalState.dispatch(
+    stateContainer.injectCurrentTab(internalStateActions.setDataRequestParams)({
+      dataRequestParams: {
+        timeRangeAbsolute: {
+          from: '2020-05-14T11:05:13.590',
+          to: '2020-05-14T11:20:13.590',
+        },
+        timeRangeRelative: {
+          from: '2020-05-14T11:05:13.590',
+          to: '2020-05-14T11:20:13.590',
+        },
       },
     })
   );
@@ -147,11 +155,13 @@ const mountComponent = async ({
   const component = mountWithIntl(
     <KibanaRenderContextProvider {...services.core}>
       <KibanaContextProvider services={services}>
-        <DiscoverMainProvider value={stateContainer}>
-          <RuntimeStateProvider currentDataView={dataView} adHocDataViews={[]}>
-            <DiscoverHistogramLayout {...props} />
-          </RuntimeStateProvider>
-        </DiscoverMainProvider>
+        <CurrentTabProvider currentTabId={stateContainer.getCurrentTab().id}>
+          <DiscoverMainProvider value={stateContainer}>
+            <RuntimeStateProvider currentDataView={dataView} adHocDataViews={[]}>
+              <DiscoverHistogramLayout {...props} />
+            </RuntimeStateProvider>
+          </DiscoverMainProvider>
+        </CurrentTabProvider>
       </KibanaContextProvider>
     </KibanaRenderContextProvider>
   );

src/platform/plugins/shared/discover/public/application/main/components/layout/discover_layout.test.tsx

@@ -40,7 +40,11 @@ import { act } from 'react-dom/test-utils';
 import { ErrorCallout } from '../../../../components/common/error_callout';
 import { PanelsToggle } from '../../../../components/panels_toggle';
 import { createDataViewDataSource } from '../../../../../common/data_sources';
-import { RuntimeStateProvider, internalStateActions } from '../../state_management/redux';
+import {
+  CurrentTabProvider,
+  RuntimeStateProvider,
+  internalStateActions,
+} from '../../state_management/redux';
 
 jest.mock('@elastic/eui', () => ({
   ...jest.requireActual('@elastic/eui'),
@@ -105,9 +109,13 @@ async function mountComponent(
     interval: 'auto',
     query,
   });
-  stateContainer.internalState.dispatch(internalStateActions.setDataView(dataView));
   stateContainer.internalState.dispatch(
-    internalStateActions.setDataRequestParams({ timeRangeAbsolute: time, timeRangeRelative: time })
+    stateContainer.injectCurrentTab(internalStateActions.setDataView)({ dataView })
+  );
+  stateContainer.internalState.dispatch(
+    stateContainer.injectCurrentTab(internalStateActions.setDataRequestParams)({
+      dataRequestParams: { timeRangeAbsolute: time, timeRangeRelative: time },
+    })
   );
 
   const props = {
@@ -127,13 +135,15 @@ async function mountComponent(
 
   const component = mountWithIntl(
     <KibanaContextProvider services={services}>
-      <DiscoverMainProvider value={stateContainer}>
-        <RuntimeStateProvider currentDataView={dataView} adHocDataViews={[]}>
-          <EuiProvider highContrastMode={false}>
-            <DiscoverLayout {...props} />
-          </EuiProvider>
-        </RuntimeStateProvider>
-      </DiscoverMainProvider>
+      <CurrentTabProvider currentTabId={stateContainer.getCurrentTab().id}>
+        <DiscoverMainProvider value={stateContainer}>
+          <RuntimeStateProvider currentDataView={dataView} adHocDataViews={[]}>
+            <EuiProvider highContrastMode={false}>
+              <DiscoverLayout {...props} />
+            </EuiProvider>
+          </RuntimeStateProvider>
+        </DiscoverMainProvider>
+      </CurrentTabProvider>
     </KibanaContextProvider>,
     mountOptions
   );

src/platform/plugins/shared/discover/public/application/main/components/layout/discover_layout.tsx

@@ -57,8 +57,7 @@ import type { PanelsToggleProps } from '../../../../components/panels_toggle';
 import { PanelsToggle } from '../../../../components/panels_toggle';
 import { sendErrorMsg } from '../../hooks/use_saved_search_messages';
 import { useIsEsqlMode } from '../../hooks/use_is_esql_mode';
-import { useCurrentDataView } from '../../state_management/redux';
-import { useCurrentTabSelector } from '../../state_management/redux/hooks';
+import { useCurrentDataView, useCurrentTabSelector } from '../../state_management/redux';
 
 const SidebarMemoized = React.memo(DiscoverSidebarResponsive);
 const TopNavMemoized = React.memo(DiscoverTopNav);

src/platform/plugins/shared/discover/public/application/main/components/layout/discover_main_content.test.tsx

@@ -39,6 +39,7 @@ import { getDiscoverStateMock } from '../../../../__mocks__/discover_state.mock'
 import { PanelsToggle } from '../../../../components/panels_toggle';
 import type { Storage } from '@kbn/kibana-utils-plugin/public';
 import { createDataViewDataSource } from '../../../../../common/data_sources';
+import { CurrentTabProvider } from '../../state_management/redux';
 
 const mountComponent = async ({
   hideChart = false,
@@ -130,9 +131,11 @@ const mountComponent = async ({
   const component = mountWithIntl(
     <KibanaRenderContextProvider {...services.core}>
       <KibanaContextProvider services={services}>
-        <DiscoverMainProvider value={stateContainer}>
-          <DiscoverMainContent {...props} />
-        </DiscoverMainProvider>
+        <CurrentTabProvider currentTabId={stateContainer.getCurrentTab().id}>
+          <DiscoverMainProvider value={stateContainer}>
+            <DiscoverMainContent {...props} />
+          </DiscoverMainProvider>
+        </CurrentTabProvider>
       </KibanaContextProvider>
     </KibanaRenderContextProvider>
   );

src/platform/plugins/shared/discover/public/application/main/components/layout/use_discover_histogram.test.tsx

@@ -29,7 +29,11 @@ import type { InspectorAdapters } from '../../hooks/use_inspector';
 import type { UnifiedHistogramCustomization } from '../../../../customizations/customization_types/histogram_customization';
 import { useDiscoverCustomization } from '../../../../customizations';
 import type { DiscoverCustomizationId } from '../../../../customizations/customization_service';
-import { RuntimeStateProvider, internalStateActions } from '../../state_management/redux';
+import {
+  CurrentTabProvider,
+  RuntimeStateProvider,
+  internalStateActions,
+} from '../../state_management/redux';
 import { dataViewMockWithTimeField } from '@kbn/discover-utils/src/__mocks__';
 
 const mockData = dataPluginMock.createStartContract();
@@ -123,11 +127,13 @@ describe('useDiscoverHistogram', () => {
     };
 
     const Wrapper = ({ children }: React.PropsWithChildren<unknown>) => (
-      <DiscoverMainProvider value={stateContainer}>
-        <RuntimeStateProvider currentDataView={dataViewMockWithTimeField} adHocDataViews={[]}>
-          {children as ReactElement}
-        </RuntimeStateProvider>
-      </DiscoverMainProvider>
+      <CurrentTabProvider currentTabId={stateContainer.getCurrentTab().id}>
+        <DiscoverMainProvider value={stateContainer}>
+          <RuntimeStateProvider currentDataView={dataViewMockWithTimeField} adHocDataViews={[]}>
+            {children as ReactElement}
+          </RuntimeStateProvider>
+        </DiscoverMainProvider>
+      </CurrentTabProvider>
     );
 
     const hook = renderHook(
@@ -391,9 +397,11 @@ describe('useDiscoverHistogram', () => {
       const timeRangeAbs = { from: '2021-05-01T20:00:00Z', to: '2021-05-02T20:00:00Z' };
       const timeRangeRel = { from: 'now-15m', to: 'now' };
       stateContainer.internalState.dispatch(
-        internalStateActions.setDataRequestParams({
-          timeRangeAbsolute: timeRangeAbs,
-          timeRangeRelative: timeRangeRel,
+        stateContainer.injectCurrentTab(internalStateActions.setDataRequestParams)({
+          dataRequestParams: {
+            timeRangeAbsolute: timeRangeAbs,
+            timeRangeRelative: timeRangeRel,
+          },
         })
       );
       const { hook } = await renderUseDiscoverHistogram({ stateContainer });

src/platform/plugins/shared/discover/public/application/main/components/layout/use_discover_histogram.ts

@@ -57,9 +57,10 @@ import { useIsEsqlMode } from '../../hooks/use_is_esql_mode';
 import {
   internalStateActions,
   useCurrentDataView,
+  useCurrentTabAction,
+  useCurrentTabSelector,
   useInternalStateDispatch,
 } from '../../state_management/redux';
-import { useCurrentTabSelector } from '../../state_management/redux/hooks';
 
 const EMPTY_ESQL_COLUMNS: DatatableColumn[] = [];
 const EMPTY_FILTERS: Filter[] = [];
@@ -321,6 +322,9 @@ export const useDiscoverHistogram = ({
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const timeRangeMemoized = useMemo(() => timeRange, [timeRange?.from, timeRange?.to]);
+  const setOverriddenVisContextAfterInvalidation = useCurrentTabAction(
+    internalStateActions.setOverriddenVisContextAfterInvalidation
+  );
   const dispatch = useInternalStateDispatch();
 
   const onVisContextChanged = useCallback(
@@ -335,25 +339,41 @@ export const useDiscoverHistogram = ({
           stateContainer.savedSearchState.updateVisContext({
             nextVisContext,
           });
-          dispatch(internalStateActions.setOverriddenVisContextAfterInvalidation(undefined));
+          dispatch(
+            setOverriddenVisContextAfterInvalidation({
+              overriddenVisContextAfterInvalidation: undefined,
+            })
+          );
           break;
         case UnifiedHistogramExternalVisContextStatus.automaticallyOverridden:
           // if the visualization was invalidated as incompatible and rebuilt
           // (it will be used later for saving the visualization via Save button)
-          dispatch(internalStateActions.setOverriddenVisContextAfterInvalidation(nextVisContext));
+          dispatch(
+            setOverriddenVisContextAfterInvalidation({
+              overriddenVisContextAfterInvalidation: nextVisContext,
+            })
+          );
           break;
         case UnifiedHistogramExternalVisContextStatus.automaticallyCreated:
         case UnifiedHistogramExternalVisContextStatus.applied:
           // clearing the value in the internal state so we don't use it during saved search saving
-          dispatch(internalStateActions.setOverriddenVisContextAfterInvalidation(undefined));
+          dispatch(
+            setOverriddenVisContextAfterInvalidation({
+              overriddenVisContextAfterInvalidation: undefined,
+            })
+          );
           break;
         case UnifiedHistogramExternalVisContextStatus.unknown:
           // using `{}` to overwrite the value inside the saved search SO during saving
-          dispatch(internalStateActions.setOverriddenVisContextAfterInvalidation({}));
+          dispatch(
+            setOverriddenVisContextAfterInvalidation({
+              overriddenVisContextAfterInvalidation: {},
+            })
+          );
           break;
       }
     },
-    [dispatch, stateContainer.savedSearchState]
+    [dispatch, setOverriddenVisContextAfterInvalidation, stateContainer.savedSearchState]
   );
 
   const breakdownField = useAppStateSelector((state) => state.breakdownField);