[Discover] Persist tabs in local storage and sync selected tab ID with URL (elastic#217706)

- Closes elastic#216549
- Closes elastic#216071

## Summary

This PR allows to restore the following state for the previously opened
tabs:
- the selected data view
- classic or ES|QL mode
- query and filters
- time range and refresh interval
- and other properties of the app state
https://github.com/elastic/kibana/blob/bcba741abce257e8b1342d650d54a4813340b40b/src/platform/plugins/shared/discover/public/application/main/state_management/discover_app_state_container.ts#L92

## Changes
- [x] Sync selected tab id to URL => after refresh the initial tab would
be the last selected one
- [x] Restore tabs after refresh 
- [x] Restore appState and globalState after reopening closed tabs
- [x] Clear tabs if Discover was opened from another Kibana app  
- [x] Store tabs in LocalStorage
- [x] Fix "New" action and clear all tabs
- [x] Populate "Recently closed tabs" with data from LocalStorage
- [x] If selected tab id changes in URL externally => update the state  
- [x] Reset the stored state when userId or space Id changes
- [x] Fix all tests

### Testing
- Test that the existing functionality is not affected
- Enable tabs feature in
https://github.com/elastic/kibana/blob/bcba741abce257e8b1342d650d54a4813340b40b/src/platform/plugins/shared/discover/public/constants.ts#L15
and test that tabs are being persisted and can be restored manually too.


### 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)

---------

Co-authored-by: Davis McPhee <davismcphee@hotmail.com>
Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

Author: 3 people

examples/unified_tabs_examples/public/example_app.tsx

@@ -24,7 +24,7 @@ import type { AppMountParameters } from '@kbn/core-application-browser';
 import type { DataView } from '@kbn/data-views-plugin/public';
 import type { DataViewField } from '@kbn/data-views-plugin/public';
 import type { DataViewPickerProps } from '@kbn/unified-search-plugin/public';
-import { type TabItem, UnifiedTabs, useNewTabProps } from '@kbn/unified-tabs';
+import { UnifiedTabs, useNewTabProps, type UnifiedTabsProps } from '@kbn/unified-tabs';
 import { type TabPreviewData, TabStatus } from '@kbn/unified-tabs';
 import { PLUGIN_ID, PLUGIN_NAME } from '../common';
 import { FieldListSidebar, FieldListSidebarProps } from './field_list_sidebar';
@@ -67,9 +67,13 @@ export const UnifiedTabsExampleApp: React.FC<UnifiedTabsExampleAppProps> = ({
   const [dataView, setDataView] = useState<DataView | null>();
   const [selectedFieldNames, setSelectedFieldNames] = useState<string[]>([]);
   const { getNewTabDefaultProps } = useNewTabProps({ numberOfInitialItems: 0 });
-  const [initialItems] = useState<TabItem[]>(() =>
-    Array.from({ length: 7 }, () => getNewTabDefaultProps())
-  );
+  const [{ managedItems, managedSelectedItemId }, setState] = useState<{
+    managedItems: UnifiedTabsProps['items'];
+    managedSelectedItemId: UnifiedTabsProps['selectedItemId'];
+  }>(() => ({
+    managedItems: Array.from({ length: 7 }, () => getNewTabDefaultProps()),
+    managedSelectedItemId: undefined,
+  }));
 
   const onAddFieldToWorkspace = useCallback(
     (field: DataViewField) => {
@@ -121,13 +125,20 @@ export const UnifiedTabsExampleApp: React.FC<UnifiedTabsExampleAppProps> = ({
         {dataView ? (
           <div className="eui-fullHeight">
             <UnifiedTabs
-              initialItems={initialItems}
+              items={managedItems}
+              selectedItemId={managedSelectedItemId}
+              recentlyClosedItems={[]}
               maxItemsCount={25}
               services={services}
-              onChanged={() => {}}
+              onChanged={(updatedState) =>
+                setState({
+                  managedItems: updatedState.items,
+                  managedSelectedItemId: updatedState.selectedItem?.id,
+                })
+              }
               createItem={getNewTabDefaultProps}
-              getPreviewData={
-                () => TAB_CONTENT_MOCK[Math.floor(Math.random() * TAB_CONTENT_MOCK.length)] // TODO change mock to real data when ready
+              getPreviewData={() =>
+                TAB_CONTENT_MOCK[Math.floor(Math.random() * TAB_CONTENT_MOCK.length)]
               }
               renderContent={({ label }) => {
                 return (

src/platform/packages/shared/kbn-unified-tabs/src/components/__stories__/tabs.stories.tsx

@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import type { Meta, StoryFn, StoryObj } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { TabbedContent, type TabbedContentProps } from '../tabbed_content';
@@ -27,16 +27,33 @@ export default {
 
 const TabbedContentTemplate: StoryFn<TabbedContentProps> = (args) => {
   const { getNewTabDefaultProps } = useNewTabProps({
-    numberOfInitialItems: args.initialItems.length,
+    numberOfInitialItems: args.items.length,
   });
 
+  const [{ managedItems, managedSelectedItemId }, setState] = useState<{
+    managedItems: TabbedContentProps['items'];
+    managedSelectedItemId: TabbedContentProps['selectedItemId'];
+  }>(() => ({
+    managedItems: args.items,
+    managedSelectedItemId: args.selectedItemId,
+  }));
+
   return (
     <TabbedContent
       {...args}
+      items={managedItems}
+      selectedItemId={managedSelectedItemId}
+      recentlyClosedItems={[]}
       createItem={getNewTabDefaultProps}
       getPreviewData={getPreviewDataMock}
       services={servicesMock}
-      onChanged={action('onClosed')}
+      onChanged={(updatedState) => {
+        action('onChanged')(updatedState);
+        setState({
+          managedItems: updatedState.items,
+          managedSelectedItemId: updatedState.selectedItem?.id,
+        });
+      }}
       renderContent={(item) => (
         <div style={{ paddingTop: '16px' }}>Content for tab: {item.label}</div>
       )}
@@ -48,7 +65,7 @@ export const Default: StoryObj<TabbedContentProps> = {
   render: TabbedContentTemplate,
 
   args: {
-    initialItems: [
+    items: [
       {
         id: '1',
         label: 'Tab 1',
@@ -61,7 +78,7 @@ export const WithMultipleTabs: StoryObj<TabbedContentProps> = {
   render: TabbedContentTemplate,
 
   args: {
-    initialItems: [
+    items: [
       {
         id: '1',
         label: 'Tab 1',
@@ -75,6 +92,6 @@ export const WithMultipleTabs: StoryObj<TabbedContentProps> = {
         label: 'Tab 3',
       },
     ],
-    initialSelectedItemId: '3',
+    selectedItemId: '3',
   },
 };

src/platform/packages/shared/kbn-unified-tabs/src/components/tabbed_content/tabbed_content.test.tsx

@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 import { TabbedContent, type TabbedContentProps } from './tabbed_content';
@@ -26,15 +26,33 @@ describe('TabbedContent', () => {
     initialItems,
     initialSelectedItemId,
     onChanged,
-  }: Pick<TabbedContentProps, 'initialItems' | 'initialSelectedItemId' | 'onChanged'>) => {
+  }: {
+    initialItems: TabbedContentProps['items'];
+    initialSelectedItemId?: TabbedContentProps['selectedItemId'];
+    onChanged: TabbedContentProps['onChanged'];
+  }) => {
+    const [{ managedItems, managedSelectedItemId }, setState] = useState<{
+      managedItems: TabbedContentProps['items'];
+      managedSelectedItemId: TabbedContentProps['selectedItemId'];
+    }>(() => ({
+      managedItems: initialItems,
+      managedSelectedItemId: initialSelectedItemId,
+    }));
     return (
       <TabbedContent
-        initialItems={initialItems}
-        initialSelectedItemId={initialSelectedItemId}
+        items={managedItems}
+        selectedItemId={managedSelectedItemId}
+        recentlyClosedItems={[]}
         createItem={() => NEW_TAB}
         getPreviewData={getPreviewDataMock}
         services={servicesMock}
-        onChanged={onChanged}
+        onChanged={(updatedState) => {
+          onChanged(updatedState);
+          setState({
+            managedItems: updatedState.items,
+            managedSelectedItemId: updatedState.selectedItem?.id,
+          });
+        }}
         renderContent={(item) => (
           <div style={{ paddingTop: '16px' }}>Content for tab: {item.label}</div>
         )}

src/platform/packages/shared/kbn-unified-tabs/src/components/tabbed_content/tabbed_content.tsx

@@ -18,32 +18,18 @@ import {
   addTab,
   closeTab,
   selectTab,
+  selectRecentlyClosedTab,
   insertTabAfter,
   replaceTabWith,
   closeOtherTabs,
   closeTabsToTheRight,
 } from '../../utils/manage_tabs';
 import type { TabItem, TabsServices, TabPreviewData } from '../../types';
 
-// TODO replace with real data when ready
-const RECENTLY_CLOSED_TABS_MOCK = [
-  {
-    label: 'Session 4',
-    id: '4',
-  },
-  {
-    label: 'Session 5',
-    id: '5',
-  },
-  {
-    label: 'Session 6',
-    id: '6',
-  },
-];
-
 export interface TabbedContentProps extends Pick<TabsBarProps, 'maxItemsCount'> {
-  initialItems: TabItem[];
-  initialSelectedItemId?: string;
+  items: TabItem[];
+  selectedItemId?: string;
+  recentlyClosedItems: TabItem[];
   'data-test-subj'?: string;
   services: TabsServices;
   renderContent: (selectedItem: TabItem) => React.ReactNode;
@@ -58,8 +44,9 @@ export interface TabbedContentState {
 }
 
 export const TabbedContent: React.FC<TabbedContentProps> = ({
-  initialItems,
-  initialSelectedItemId,
+  items: managedItems,
+  selectedItemId: managedSelectedItemId,
+  recentlyClosedItems,
   maxItemsCount,
   services,
   renderContent,
@@ -69,14 +56,10 @@ export const TabbedContent: React.FC<TabbedContentProps> = ({
 }) => {
   const tabsBarApi = useRef<TabsBarApi | null>(null);
   const [tabContentId] = useState(() => htmlIdGenerator()());
-  const [state, _setState] = useState<TabbedContentState>(() => {
-    return {
-      items: initialItems,
-      selectedItem:
-        (initialSelectedItemId && initialItems.find((item) => item.id === initialSelectedItemId)) ||
-        initialItems[0],
-    };
-  });
+  const state = useMemo(
+    () => prepareStateFromProps(managedItems, managedSelectedItemId),
+    [managedItems, managedSelectedItemId]
+  );
   const { items, selectedItem } = state;
   const stateRef = React.useRef<TabbedContentState>();
   stateRef.current = state;
@@ -88,10 +71,9 @@ export const TabbedContent: React.FC<TabbedContentProps> = ({
       }
 
       const nextState = getNextState(stateRef.current);
-      _setState(nextState);
       onChanged(nextState);
     },
-    [_setState, onChanged]
+    [onChanged]
   );
 
   const onLabelEdited = useCallback(
@@ -110,6 +92,13 @@ export const TabbedContent: React.FC<TabbedContentProps> = ({
     [changeState]
   );
 
+  const onSelectRecentlyClosed = useCallback(
+    async (item: TabItem) => {
+      changeState((prevState) => selectRecentlyClosedTab(prevState, item));
+    },
+    [changeState]
+  );
+
   const onClose = useCallback(
     async (item: TabItem) => {
       changeState((prevState) => {
@@ -194,14 +183,15 @@ export const TabbedContent: React.FC<TabbedContentProps> = ({
           ref={tabsBarApi}
           items={items}
           selectedItem={selectedItem}
-          recentlyClosedItems={RECENTLY_CLOSED_TABS_MOCK}
+          recentlyClosedItems={recentlyClosedItems}
           maxItemsCount={maxItemsCount}
           tabContentId={tabContentId}
           getTabMenuItems={getTabMenuItems}
           services={services}
           onAdd={onAdd}
           onLabelEdited={onLabelEdited}
           onSelect={onSelect}
+          onSelectRecentlyClosed={onSelectRecentlyClosed}
           onReorder={onReorder}
           onClose={onClose}
           getPreviewData={getPreviewData}
@@ -220,3 +210,11 @@ export const TabbedContent: React.FC<TabbedContentProps> = ({
     </EuiFlexGroup>
   );
 };
+
+function prepareStateFromProps(items: TabItem[], selectedItemId?: string): TabbedContentState {
+  const selectedItem = selectedItemId && items.find((item) => item.id === selectedItemId);
+  return {
+    items,
+    selectedItem: selectedItem || items[0],
+  };
+}

src/platform/packages/shared/kbn-unified-tabs/src/components/tabs_bar/tabs_bar.test.tsx

@@ -29,6 +29,7 @@ describe('TabsBar', () => {
   it('renders tabs bar', async () => {
     const onAdd = jest.fn();
     const onSelect = jest.fn();
+    const onSelectRecentlyClosed = jest.fn();
     const onLabelEdited = jest.fn();
     const onClose = jest.fn();
     const onReorder = jest.fn();
@@ -53,6 +54,7 @@ describe('TabsBar', () => {
         onAdd={onAdd}
         onLabelEdited={onLabelEdited}
         onSelect={onSelect}
+        onSelectRecentlyClosed={onSelectRecentlyClosed}
         onClose={onClose}
         onReorder={onReorder}
         getPreviewData={getPreviewData}

src/platform/packages/shared/kbn-unified-tabs/src/components/tabs_bar/tabs_bar.tsx

@@ -36,7 +36,7 @@ import type { TabItem, TabsServices } from '../../types';
 import { getTabIdAttribute } from '../../utils/get_tab_attributes';
 import { useResponsiveTabs } from '../../hooks/use_responsive_tabs';
 import { TabsBarWithBackground } from '../tabs_visual_glue_to_header/tabs_bar_with_background';
-import { TabsBarMenu } from '../tabs_bar_menu';
+import { TabsBarMenu, type TabsBarMenuProps } from '../tabs_bar_menu';
 
 const DROPPABLE_ID = 'unifiedTabsOrder';
 
@@ -60,6 +60,7 @@ export type TabsBarProps = Pick<
   maxItemsCount?: number;
   services: TabsServices;
   onAdd: () => Promise<void>;
+  onSelectRecentlyClosed: TabsBarMenuProps['onSelectRecentlyClosed'];
   onReorder: (items: TabItem[]) => void;
 };
 
@@ -80,6 +81,7 @@ export const TabsBar = forwardRef<TabsBarApi, TabsBarProps>(
       onAdd,
       onLabelEdited,
       onSelect,
+      onSelectRecentlyClosed,
       onReorder,
       onClose,
       getPreviewData,
@@ -278,10 +280,11 @@ export const TabsBar = forwardRef<TabsBarApi, TabsBarProps>(
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <TabsBarMenu
-            openedItems={items}
+            items={items}
             selectedItem={selectedItem}
-            onSelectOpenedTab={onSelect}
             recentlyClosedItems={recentlyClosedItems}
+            onSelect={onSelect}
+            onSelectRecentlyClosed={onSelectRecentlyClosed}
           />
         </EuiFlexItem>
       </EuiFlexGroup>

src/platform/packages/shared/kbn-unified-tabs/src/components/tabs_bar_menu/index.ts

@@ -7,4 +7,4 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-export { TabsBarMenu } from './tabs_bar_menu';
+export { TabsBarMenu, type TabsBarMenuProps } from './tabs_bar_menu';