[Discover Tabs] Extend the discover locator to allow opening in a new tab (#234912)

- Closes #230829

## Summary

This PR extends the Discover locator with a new param `tabId` (and
`tabLabel`). Passing `new` value to it will signal to open the search in
a new Discover tab.

| Was a persisted Discover Session (A) open when a search session was
triggered? | Was user previously viewing a persisted Discover session
(B) in Discover | Outcome after opening a search session link from Stack
Management |
| ------------- | ------------- | ------------- |
| no  | no | non-persisted Discover session |
| no  | yes  | non-persisted Discover session (previous tabs cleared) |
| yes | no | the persisted Discover session A (previous tabs cleared) |
| yes | yes (A discover session Id is the same as B) | the persisted
Discover session A |
| yes | yes (A discover session Id is different from B) | the persisted
Discover session A (previous tabs cleared) |

Let me know if it's too complex or you have ideas on how to append to a
persisted session tabs without reseting previous tabs.

The main problem comes from the fact that it also depends from where you
saved a search session: it might include the notion of `savedSearchId`
and it might not => this result in getting either `/view/<saved search
id>?searchSessionId=<id>` route or `/?searchSessionId=<id>`. And
Discover reacts to saved search id value in URL.

From the other side tabs gets cleared if ids don't match
https://github.com/elastic/kibana/blob/17f697055f699438ca84eae3c0230a54d4ad8170/src/platform/plugins/shared/discover/public/application/main/state_management/tabs_storage_manager.ts#L393-L396
(non-persisted Discover session means no id).

Additionally, this PR adds `openInNewTab` redux action. I think we
should use it from Background Search flyout as it would append to tabs
without the mentioned problems.

### Checklist

- [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
- [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)
- [x] Review the [backport
guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)
and apply applicable `backport:*` labels.

---------

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

Author: 2 people

src/platform/plugins/shared/data/public/search/session/sessions_mgmt/components/table/table.tsx

@@ -75,6 +75,10 @@ export function SearchSessionsMgmtTable({
     () => moment.duration(config.management.refreshInterval).asMilliseconds(),
     [config.management.refreshInterval]
   );
+  const enableOpeningInNewTab = useMemo(
+    () => core.featureFlags.getBooleanValue('discover.tabsEnabled', false),
+    [core.featureFlags]
+  );
 
   const { pageSize, sorting, onTableChange } = useEuiTablePersist<UISession>({
     tableId: 'searchSessionsMgmt',
@@ -111,7 +115,12 @@ export function SearchSessionsMgmtTable({
       try {
         const { savedObjects, statuses } = await api.fetchTableData({ appId });
         results = savedObjects.map((savedObject) =>
-          mapToUISession({ savedObject, locators, sessionStatuses: statuses })
+          mapToUISession({
+            savedObject,
+            locators,
+            sessionStatuses: statuses,
+            enableOpeningInNewTab,
+          })
         );
       } catch (e) {} // eslint-disable-line no-empty
 
@@ -125,7 +134,7 @@ export function SearchSessionsMgmtTable({
       if (refreshTimeoutRef.current) clearTimeout(refreshTimeoutRef.current);
       refreshTimeoutRef.current = window.setTimeout(doRefresh, refreshInterval);
     }
-  }, [api, refreshInterval, locators, appId]);
+  }, [api, refreshInterval, locators, appId, enableOpeningInNewTab]);
 
   // initial data load
   useEffect(() => {

src/platform/plugins/shared/data/public/search/session/sessions_mgmt/components/table/utils/map_to_ui_session.ts

@@ -30,11 +30,13 @@ export const mapToUISession = ({
   locators,
   sessionStatuses,
   actions: filteredActions,
+  enableOpeningInNewTab,
 }: {
   savedObject: SearchSessionSavedObject;
   locators: LocatorsStart;
   sessionStatuses: SearchSessionsFindResponse['statuses'];
   actions?: ACTION[];
+  enableOpeningInNewTab?: boolean;
 }): UISession => {
   const {
     name,
@@ -59,7 +61,16 @@ export const mapToUISession = ({
   if (initialState) delete initialState.searchSessionId;
   // derive the URL and add it in
   const reloadUrl = getUrlFromState(locators, locatorId, initialState);
-  const restoreUrl = getUrlFromState(locators, locatorId, restoreState);
+  const restoreUrl = getUrlFromState(
+    locators,
+    locatorId,
+    enableOpeningInNewTab
+      ? {
+          ...restoreState,
+          tab: { id: 'new', label: name },
+        }
+      : restoreState
+  );
 
   return {
     id: savedObject.id,

src/platform/plugins/shared/discover/common/app_locator.test.ts

@@ -236,6 +236,30 @@ describe('Discover url generator', () => {
     expect(path).toContain('__test__');
   });
 
+  test('can specify a tab id', async () => {
+    const { locator } = await setup();
+    const { path } = await locator.getLocation({
+      tab: { id: '__test__' },
+    });
+
+    expect(path).toMatchInlineSnapshot(`"#/?_tab=(tabId:__test__)"`);
+  });
+
+  test('can specify to open in a new tab', async () => {
+    const { locator } = await setup();
+    const { path } = await locator.getLocation({
+      tab: { id: 'new', label: 'My new tab' },
+      query: {
+        esql: 'SELECT * FROM test',
+      },
+      searchSessionId: '__test__',
+    });
+
+    expect(path).toMatchInlineSnapshot(
+      `"#/?searchSessionId=__test__&_a=(dataSource:(type:esql),query:(esql:'SELECT%20*%20FROM%20test'))&_tab=(tabId:new,tabLabel:'My%20new%20tab')"`
+    );
+  });
+
   test('can specify columns, grid, interval, sort and savedQuery', async () => {
     const { locator } = await setup();
     const { path } = await locator.getLocation({

src/platform/plugins/shared/discover/common/app_locator.ts

@@ -13,7 +13,7 @@ import type { RefreshInterval } from '@kbn/data-plugin/public';
 import type { LocatorDefinition, LocatorPublic } from '@kbn/share-plugin/public';
 import type { DiscoverGridSettings } from '@kbn/saved-search-plugin/common';
 import type { DataViewSpec } from '@kbn/data-views-plugin/common';
-import type { VIEW_MODE } from './constants';
+import type { VIEW_MODE, NEW_TAB_ID } from './constants';
 
 export const DISCOVER_APP_LOCATOR = 'DISCOVER_APP_LOCATOR';
 
@@ -65,6 +65,13 @@ export interface DiscoverAppLocatorParams extends SerializableRecord {
    */
   searchSessionId?: string;
 
+  /**
+   * Optionally set Discover tab state.
+   * Use `new` as value for `id` to indicate that a new tab should be created.
+   * Once created, the new tab will have a unique id which can be referenced too if necessary.
+   */
+  tab?: { id: typeof NEW_TAB_ID; label?: string } | { id: string };
+
   /**
    * Columns displayed in the table
    */

src/platform/plugins/shared/discover/common/app_locator_get_location.ts

@@ -13,7 +13,12 @@ import type { setStateToKbnUrl as setStateToKbnUrlCommon } from '@kbn/kibana-uti
 import type { DiscoverAppLocatorGetLocation, MainHistoryLocationState } from './app_locator';
 import type { DiscoverAppState } from '../public';
 import { createDataViewDataSource, createEsqlDataSource } from './data_sources';
-import { APP_STATE_URL_KEY } from './constants';
+import {
+  APP_STATE_URL_KEY,
+  GLOBAL_STATE_URL_KEY,
+  NEW_TAB_ID,
+  TAB_STATE_URL_KEY,
+} from './constants';
 
 export const appLocatorGetLocationCommon = async (
   {
@@ -45,6 +50,7 @@ export const appLocatorGetLocationCommon = async (
     hideAggregatedPreview,
     breakdownField,
     isAlertResults,
+    tab,
   } = params;
   const savedSearchPath = savedSearchId ? `view/${encodeURIComponent(savedSearchId)}` : '';
   const appState: Partial<DiscoverAppState> = {};
@@ -79,13 +85,27 @@ export const appLocatorGetLocationCommon = async (
   }
 
   if (Object.keys(queryState).length) {
-    path = setStateToKbnUrl<GlobalQueryStateFromUrl>('_g', queryState, { useHash }, path);
+    path = setStateToKbnUrl<GlobalQueryStateFromUrl>(
+      GLOBAL_STATE_URL_KEY,
+      queryState,
+      { useHash },
+      path
+    );
   }
 
   if (Object.keys(appState).length) {
     path = setStateToKbnUrl(APP_STATE_URL_KEY, appState, { useHash }, path);
   }
 
+  if (tab?.id) {
+    path = setStateToKbnUrl(
+      TAB_STATE_URL_KEY,
+      { tabId: tab.id, tabLabel: tab.id === NEW_TAB_ID && 'label' in tab ? tab.label : undefined },
+      { useHash },
+      path
+    );
+  }
+
   return {
     app: 'discover',
     path,

src/platform/plugins/shared/discover/common/constants.ts

@@ -26,12 +26,19 @@ export const getDefaultRowsPerPage = (uiSettings: IUiSettingsClient): number =>
 // local storage key for the ES|QL to Dataviews transition modal
 export const ESQL_TRANSITION_MODAL_KEY = 'data.textLangTransitionModal';
 
+/**
+ * The id value used to indicate that a link should open in a new Discover tab.
+ * It will be used in the `_tab` URL param to indicate that a new tab should be created.
+ * Once created, the new tab will have a unique id.
+ */
+export const NEW_TAB_ID = 'new' as const;
+
 /**
  * The query param key used to store the Discover app state in the URL
  */
 export const APP_STATE_URL_KEY = '_a';
 export const GLOBAL_STATE_URL_KEY = '_g';
-export const TABS_STATE_URL_KEY = '_t';
+export const TAB_STATE_URL_KEY = '_tab'; // `_t` is already used by Kibana for time, so we use `_tab` here
 
 /**
  * Product feature IDs

src/platform/plugins/shared/discover/public/application/main/components/top_nav/app_menu_actions/get_share.tsx

@@ -70,6 +70,8 @@ export const getShareAppMenuItem = ({
       timeRange,
       refreshInterval,
     };
+
+    // TODO: for a persisted saved search, add the current tab ID to the params
     const relativeUrl = locator.getRedirectUrl(params);
 
     // This logic is duplicated from `relativeToAbsolute` (for bundle size reasons). Ultimately, this should be

src/platform/plugins/shared/discover/public/application/main/state_management/hooks/use_state_managers.ts

@@ -41,7 +41,7 @@ export const useStateManagers = ({
     TABS_ENABLED_FEATURE_FLAG_KEY,
     false
   );
-  // syncing with the _t part URL
+  // syncing with the _tab part URL
   const [tabsStorageManager] = useState(() =>
     createTabsStorageManager({
       urlStateStorage,
@@ -63,13 +63,13 @@ export const useStateManagers = ({
 
   useEffect(() => {
     const stopUrlSync = tabsStorageManager.startUrlSync({
-      // if `_t` in URL changes (for example via browser history), try to restore the previous state
+      // if `_tab` in URL changes (for example via browser history), try to restore the previous state
       onChanged: (urlState) => {
         const { tabId: restoreTabId } = urlState;
         if (restoreTabId) {
           internalState.dispatch(internalStateActions.restoreTab({ restoreTabId }));
         } else {
-          // if tabId is not present in `_t`, clear all tabs
+          // if tabId is not present in `_tab`, clear all tabs
           internalState.dispatch(internalStateActions.clearAllTabs());
         }
       },

src/platform/plugins/shared/discover/public/application/main/state_management/redux/actions/tabs.ts

@@ -29,7 +29,11 @@ import {
   selectInitialUnifiedHistogramLayoutPropsMap,
   selectTabRuntimeInternalState,
 } from '../runtime_state';
-import { APP_STATE_URL_KEY, GLOBAL_STATE_URL_KEY } from '../../../../../../common/constants';
+import {
+  APP_STATE_URL_KEY,
+  GLOBAL_STATE_URL_KEY,
+  NEW_TAB_ID,
+} from '../../../../../../common/constants';
 import type { DiscoverAppState } from '../../discover_app_state_container';
 import { createInternalStateAsyncThunk, createTabItem } from '../utils';
 import { setBreadcrumbs } from '../../../../../utils/breadcrumbs';
@@ -113,6 +117,20 @@ export const updateTabs: InternalStateThunkActionCreator<[TabbedContentState], P
       };
 
       if (!existingTab) {
+        // the following assignments for initialAppState, globalState, and dataRequestParams are for supporting `openInNewTab` action
+        tab.initialAppState =
+          'initialAppState' in item
+            ? cloneDeep(item.initialAppState as TabState['initialAppState'])
+            : tab.initialAppState;
+        tab.globalState =
+          'globalState' in item
+            ? cloneDeep(item.globalState as TabState['globalState'])
+            : tab.globalState;
+        tab.dataRequestParams =
+          'dataRequestParams' in item
+            ? (item.dataRequestParams as TabState['dataRequestParams'])
+            : tab.dataRequestParams;
+
         if (item.duplicatedFromId) {
           // the new tab was created by duplicating an existing tab
           const existingTabToDuplicateFrom = selectTab(currentState, item.duplicatedFromId);
@@ -288,7 +306,9 @@ export const restoreTab: InternalStateThunkActionCreator<[{ restoreTabId: string
   (dispatch, getState) => {
     const currentState = getState();
 
-    if (restoreTabId === currentState.tabs.unsafeCurrentId) {
+    // Restoring the 'new' tab ID is a no-op because it represents a placeholder for creating new tabs,
+    // not an actual tab that can be restored.
+    if (restoreTabId === currentState.tabs.unsafeCurrentId || restoreTabId === NEW_TAB_ID) {
       return;
     }
 
@@ -318,6 +338,46 @@ export const restoreTab: InternalStateThunkActionCreator<[{ restoreTabId: string
     );
   };
 
+export const openInNewTab: InternalStateThunkActionCreator<
+  [
+    {
+      tabLabel?: string;
+      appState?: TabState['initialAppState'];
+      globalState?: TabState['globalState'];
+      searchSessionId?: string;
+    }
+  ]
+> =
+  ({ tabLabel, appState, globalState, searchSessionId }) =>
+  (dispatch, getState) => {
+    const initialAppState = appState ? cloneDeep(appState) : undefined;
+    const initialGlobalState = globalState ? cloneDeep(globalState) : {};
+    const currentState = getState();
+    const currentTabs = selectAllTabs(currentState);
+
+    const newDefaultTab: TabState = {
+      ...DEFAULT_TAB_STATE,
+      ...createTabItem(currentTabs),
+      initialAppState,
+      globalState: initialGlobalState,
+    };
+
+    if (tabLabel) {
+      newDefaultTab.label = tabLabel;
+    }
+
+    if (searchSessionId) {
+      newDefaultTab.dataRequestParams = {
+        ...newDefaultTab.dataRequestParams,
+        searchSessionId,
+      };
+    }
+
+    return dispatch(
+      updateTabs({ items: [...currentTabs, newDefaultTab], selectedItem: newDefaultTab })
+    );
+  };
+
 export const disconnectTab: InternalStateThunkActionCreator<[TabActionPayload]> =
   ({ tabId }) =>
   (_, __, { runtimeStateManager }) => {

src/platform/plugins/shared/discover/public/application/main/state_management/redux/index.ts

@@ -21,6 +21,7 @@ import {
   updateTabs,
   disconnectTab,
   restoreTab,
+  openInNewTab,
   clearAllTabs,
   initializeTabs,
   saveDiscoverSession,
@@ -56,6 +57,7 @@ export const internalStateActions = {
   initializeSingleTab,
   syncLocallyPersistedTabState,
   restoreTab,
+  openInNewTab,
   clearAllTabs,
   initializeTabs,
   saveDiscoverSession,