[Metrics][Discover] Integrate metrics experience state with discover state (elastic#239732)

closes [elastic#236395](elastic#236395)

## Summary

This PR integrates the Metrics Experience state with Discover state,
enabling the integration with Discover tabs. The internal Metrics
Experience redux state was removed in favor o Discover's.


**Isolated tabs state**


![isolated_tab_state](https://github.com/user-attachments/assets/dc8d45e2-8d3d-4bf9-b70c-6260d21f44fb)

**Duplicate tab action**

![duplicate_tab](https://github.com/user-attachments/assets/17387f00-d77a-45e9-8f9a-6d6301452958)

## How to test
- Clone https://github.com/simianhacker/simian-forge/tree/main
- Run ` ./forge --dataset hosts --count 25 --interval 30s`
- For beats metrics, the system integration package MUST be installed
(after installing it, make sure to delete all existing metrics data
streams)
- Set the following config to `kibana.dev.yml`
```yml
feature_flags.overrides:
  metricsExperienceEnabled: true
 ```
- Navigate to Discover and Switch to ESQL mode 
   - Create new tabs and modify their state
   - Duplicate tabs

---------

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

Author: 3 people

src/platform/packages/shared/kbn-unified-histogram/tsconfig.json

@@ -37,6 +37,7 @@
     "@kbn/data-views-plugin",
     "@kbn/fields-metadata-plugin",
     "@kbn/controls-plugin",
+    "@kbn/restorable-state",
     "@kbn/chart-expressions-common",
     "@kbn/lens-common"
   ]

src/platform/packages/shared/kbn-unified-histogram/types.ts

@@ -30,6 +30,7 @@ import type { PublishingSubject } from '@kbn/presentation-publishing';
 import type { SerializedStyles } from '@emotion/serialize';
 import type { ResizableLayoutProps } from '@kbn/resizable-layout';
 import type { FieldsMetadataPublicStart } from '@kbn/fields-metadata-plugin/public';
+import type { RestorableStateProviderProps } from '@kbn/restorable-state';
 import type { UseRequestParamsResult } from './hooks/use_request_params';
 
 /**
@@ -261,12 +262,12 @@ export interface ChartSectionProps {
 /**
  * Supports customizing the chart (UnifiedHistogram) section in Discover
  */
-export type ChartSectionConfiguration =
+export type ChartSectionConfiguration<T extends object = object> =
   | {
       /**
        * The component to render for the chart section
        */
-      Component: React.ComponentType<ChartSectionProps>;
+      Component: React.ComponentType<ChartSectionProps & RestorableStateProviderProps<T>>;
       /**
        * Controls whether or not to replace the default histogram and activate the custom chart
        */

src/platform/packages/shared/kbn-unified-metrics-grid/index.ts

@@ -10,3 +10,4 @@
 export { LazyUnifiedMetricsExperienceGrid as UnifiedMetricsExperienceGrid } from './src/components/lazy_unified_metrics_experience_grid';
 export { LazyTraceMetricsGrid as TraceMetricsGrid } from './src/components/trace_metrics_grid/lazy_trace_metrics_grid';
 export type { DataSource } from './src/components/trace_metrics_grid';
+export type { UnifiedMetricsGridRestorableState } from './src/restorable_state';

src/platform/packages/shared/kbn-unified-metrics-grid/src/common/constants.ts

@@ -11,8 +11,8 @@ import { ES_FIELD_TYPES } from '@kbn/field-types';
 export const FIELD_VALUE_SEPARATOR = String.fromCharCode(0x1d);
 
 // Full screen classes
-export const METRICS_GRID_CLASS = 'metricsExperienceGrid';
-export const METRICS_GRID_WRAPPER_FULL_SCREEN_CLASS = 'metricsExperienceGridWrapper--fullScreen';
+export const METRICS_GRID_CLASS = 'metricsGrid';
+export const METRICS_GRID_WRAPPER_FULL_SCREEN_CLASS = 'metricsGridWrapper--fullScreen';
 export const METRICS_GRID_FULL_SCREEN_CLASS = `${METRICS_GRID_CLASS}--fullScreen`;
 export const METRICS_GRID_RESTRICT_BODY_CLASS = `${METRICS_GRID_CLASS}--restrictBody`;
 

src/platform/packages/shared/kbn-unified-metrics-grid/src/components/chart/chart_title.test.tsx

@@ -14,12 +14,12 @@ import { ChartTitle } from './chart_title';
 
 describe('ChartTitle', () => {
   it('should render plain text when searchTerm is empty', () => {
-    const { getByText } = render(<ChartTitle searchTerm="" title="CPU Usage" />);
+    const { getByText } = render(<ChartTitle highlight="" title="CPU Usage" />);
     expect(getByText('CPU Usage')).toBeInTheDocument();
   });
 
   it('should highlight matching searchTerm (case-insensitive)', () => {
-    const { container } = render(<ChartTitle searchTerm="cpu" title="CPU Usage" />);
+    const { container } = render(<ChartTitle highlight="cpu" title="CPU Usage" />);
     // Should highlight "CPU"
     const mark = container.querySelector('mark');
     expect(mark).toBeInTheDocument();
@@ -28,7 +28,7 @@ describe('ChartTitle', () => {
 
   it('should highlight only matching searchTerm', () => {
     const { container } = render(
-      <ChartTitle searchTerm="cpu.load" title="system.cpu.load_average.15m" />
+      <ChartTitle highlight="cpu.load" title="system.cpu.load_average.15m" />
     );
     // Should highlight only "cpu.load"
     const mark = container.querySelector('mark');
@@ -38,7 +38,7 @@ describe('ChartTitle', () => {
   });
 
   it('should highlight all occurrences of the searchTerm', () => {
-    const { container } = render(<ChartTitle searchTerm="m" title="Memory Usage" />);
+    const { container } = render(<ChartTitle highlight="m" title="Memory Usage" />);
     // There should be two <mark> elements for "m"
     const marks = container.querySelectorAll('mark');
     expect(marks.length).toBe(2);
@@ -47,13 +47,13 @@ describe('ChartTitle', () => {
   });
 
   it('should render text with no highlights if searchTerm does not match', () => {
-    const { container, getByText } = render(<ChartTitle searchTerm="xyz" title="Memory" />);
+    const { container, getByText } = render(<ChartTitle highlight="xyz" title="Memory" />);
     expect(container.querySelector('mark')).not.toBeInTheDocument();
     expect(getByText('Memory')).toBeInTheDocument();
   });
 
   it('handles empty text gracefully', () => {
-    const { container } = render(<ChartTitle searchTerm="cpu" title="" />);
+    const { container } = render(<ChartTitle highlight="cpu" title="" />);
     expect(container.textContent).toBe('');
     expect(container.querySelector('mark')).not.toBeInTheDocument();
   });

src/platform/packages/shared/kbn-unified-metrics-grid/src/components/chart/chart_title.tsx

@@ -12,10 +12,10 @@ import { getHighlightColors } from '@kbn/data-grid-in-table-search/src/get_highl
 import React, { useMemo } from 'react';
 
 export const ChartTitle = ({
-  searchTerm,
+  highlight,
   title,
 }: {
-  searchTerm?: string;
+  highlight?: string;
   title: string;
 }): React.ReactNode => {
   const { euiTheme } = useEuiTheme();
@@ -55,7 +55,7 @@ export const ChartTitle = ({
   return (
     <div css={headerStyles} className="metricsExperienceChartTitle">
       <span css={chartTitleCss}>
-        {searchTerm ? (
+        {highlight ? (
           <EuiHighlight
             css={css`
               & mark {
@@ -65,7 +65,7 @@ export const ChartTitle = ({
             `}
             strict={false}
             highlightAll
-            search={searchTerm}
+            search={highlight}
           >
             {title}
           </EuiHighlight>

src/platform/packages/shared/kbn-unified-metrics-grid/src/components/chart/lens_wrapper.tsx

@@ -13,10 +13,10 @@ import type { ChartSectionProps } from '@kbn/unified-histogram/types';
 import type { LensProps } from './hooks/use_lens_props';
 import { useLensExtraActions } from './hooks/use_lens_extra_actions';
 import { ChartTitle } from './chart_title';
-import { useMetricsGridState } from '../../hooks';
 
 export type LensWrapperProps = {
   lensProps: LensProps;
+  titleHighlight?: string;
   onViewDetails?: () => void;
   onCopyToDashboard?: () => void;
   syncTooltips?: boolean;
@@ -31,15 +31,14 @@ export function LensWrapper({
   onBrushEnd,
   onFilter,
   abortController,
+  titleHighlight,
   onViewDetails,
   onCopyToDashboard,
   syncTooltips,
   syncCursor,
 }: LensWrapperProps) {
   const { euiTheme } = useEuiTheme();
 
-  const { searchTerm } = useMetricsGridState();
-
   const { EmbeddableComponent } = services.lens;
 
   const chartCss = css`
@@ -81,7 +80,7 @@ export function LensWrapper({
 
   return (
     <div css={chartCss}>
-      <ChartTitle searchTerm={searchTerm} title={lensProps.attributes.title} />
+      <ChartTitle highlight={titleHighlight} title={lensProps.attributes.title} />
       <EmbeddableComponent
         {...lensProps}
         title={lensProps.attributes.title}

src/platform/packages/shared/kbn-unified-metrics-grid/src/components/index.tsx

@@ -8,13 +8,13 @@
  */
 
 import React from 'react';
-import { Provider } from 'react-redux';
 import { QueryClient, QueryClientProvider } from '@kbn/react-query';
 import type { ChartSectionProps } from '@kbn/unified-histogram/types';
 import type { MetricsExperienceClient } from '@kbn/metrics-experience-plugin/public';
 import { MetricsExperienceGrid } from './metrics_experience_grid';
-import { store } from '../store';
-import { MetricsExperienceProvider } from '../context/metrics_experience_provider';
+import { MetricsExperienceClientProvider } from '../context/metrics_experience_client_provider';
+import { withRestorableState } from '../restorable_state';
+import { MetricsExperienceStateProvider } from '../context/metrics_experience_state_provider';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -27,23 +27,27 @@ const queryClient = new QueryClient({
   },
 });
 
-export const UnifiedMetricsExperienceGrid = (
+const InternalUnifiedMetricsExperienceGrid = (
   props: ChartSectionProps & { client?: MetricsExperienceClient }
 ) => {
   if (!props.client) {
     return null;
   }
 
   return (
-    <MetricsExperienceProvider value={{ client: props.client }}>
-      <Provider store={store}>
+    <MetricsExperienceClientProvider value={{ client: props.client }}>
+      <MetricsExperienceStateProvider>
         <QueryClientProvider client={queryClient}>
           <MetricsExperienceGrid {...props} />
         </QueryClientProvider>
-      </Provider>
-    </MetricsExperienceProvider>
+      </MetricsExperienceStateProvider>
+    </MetricsExperienceClientProvider>
   );
 };
 
+const UnifiedMetricsExperienceGridWithRestorableState = withRestorableState(
+  InternalUnifiedMetricsExperienceGrid
+);
+
 // eslint-disable-next-line import/no-default-export
-export default UnifiedMetricsExperienceGrid;
+export default UnifiedMetricsExperienceGridWithRestorableState;

src/platform/packages/shared/kbn-unified-metrics-grid/src/components/metrics_experience_grid.test.tsx

@@ -23,16 +23,19 @@ import { Subject } from 'rxjs';
 import type { MetricField, Dimension } from '@kbn/metrics-experience-plugin/common/types';
 import { ES_FIELD_TYPES } from '@kbn/field-types';
 import { fieldsMetadataPluginPublicMock } from '@kbn/fields-metadata-plugin/public/mocks';
+import * as metricsExperienceStateProvider from '../context/metrics_experience_state_provider';
 
-jest.mock('../store/hooks');
+jest.mock('../context/metrics_experience_state_provider');
 jest.mock('../hooks');
 jest.mock('./chart', () => ({
   Chart: jest.fn(() => <div data-test-subj="metric-chart" />),
 }));
 
-const useMetricsGridStateMock = hooks.useMetricsGridState as jest.MockedFunction<
-  typeof hooks.useMetricsGridState
->;
+const useMetricsExperienceStateMock =
+  metricsExperienceStateProvider.useMetricsExperienceState as jest.MockedFunction<
+    typeof metricsExperienceStateProvider.useMetricsExperienceState
+  >;
+
 const useMetricFieldsQueryMock = hooks.useMetricFieldsQuery as jest.MockedFunction<
   typeof hooks.useMetricFieldsQuery
 >;
@@ -91,26 +94,21 @@ describe('MetricsExperienceGrid', () => {
     isComponentVisible: true,
   };
 
-  beforeAll(() => {
-    jest.useFakeTimers();
-  });
-
   beforeEach(() => {
+    jest.useFakeTimers();
     jest.clearAllMocks();
 
-    useMetricsGridStateMock.mockReturnValue({
+    useMetricsExperienceStateMock.mockReturnValue({
       currentPage: 0,
       dimensions: [],
       valueFilters: [],
       onDimensionsChange: jest.fn(),
       onPageChange: jest.fn(),
       onValuesChange: jest.fn(),
-      onClearValues: jest.fn(),
-      onClearAllDimensions: jest.fn(),
       isFullscreen: false,
       searchTerm: '',
-      onSearchTermChange: () => {},
-      onToggleFullscreen: () => {},
+      onSearchTermChange: jest.fn(),
+      onToggleFullscreen: jest.fn(),
     });
 
     usePaginatedFieldsMock.mockReturnValue({
@@ -134,13 +132,14 @@ describe('MetricsExperienceGrid', () => {
       metricsGridWrapper: null,
       setMetricsGridWrapper: jest.fn(),
       styles: {
-        'metricsExperienceGrid--fullScreen': 'mock-fullscreen-class',
-        'metricsExperienceGrid--restrictBody': 'mock-restrict-body-class',
+        'metricsGrid--fullScreen': 'mock-fullscreen-class',
+        'metricsGrid--restrictBody': 'mock-restrict-body-class',
       },
     });
   });
 
-  afterAll(() => {
+  afterEach(() => {
+    jest.runOnlyPendingTimers();
     jest.useRealTimers();
   });
 
@@ -222,19 +221,17 @@ describe('MetricsExperienceGrid', () => {
   });
 
   it('render <ValuesSelector /> when dimensions are selected', async () => {
-    useMetricsGridStateMock.mockReturnValue({
+    useMetricsExperienceStateMock.mockReturnValue({
       currentPage: 0,
       dimensions: ['foo'],
       valueFilters: [`foo${FIELD_VALUE_SEPARATOR}bar`],
       onDimensionsChange: jest.fn(),
       onPageChange: jest.fn(),
       onValuesChange: jest.fn(),
-      onClearValues: jest.fn(),
-      onClearAllDimensions: jest.fn(),
       isFullscreen: false,
       searchTerm: '',
-      onSearchTermChange: () => {},
-      onToggleFullscreen: () => {},
+      onSearchTermChange: jest.fn(),
+      onToggleFullscreen: jest.fn(),
     });
 
     const { getByTestId } = render(<MetricsExperienceGrid {...defaultProps} />, {
@@ -249,15 +246,13 @@ describe('MetricsExperienceGrid', () => {
   it('shows and updates the search input when the search button is clicked', async () => {
     const onSearchTermChange = jest.fn();
 
-    useMetricsGridStateMock.mockReturnValue({
+    useMetricsExperienceStateMock.mockReturnValue({
       currentPage: 0,
       dimensions: [],
       valueFilters: [],
       onDimensionsChange: jest.fn(),
       onPageChange: jest.fn(),
       onValuesChange: jest.fn(),
-      onClearValues: jest.fn(),
-      onClearAllDimensions: jest.fn(),
       isFullscreen: false,
       searchTerm: '',
       onSearchTermChange,
@@ -297,15 +292,13 @@ describe('MetricsExperienceGrid', () => {
     const onToggleFullscreen = jest.fn();
     const isFullscreen = false;
 
-    useMetricsGridStateMock.mockReturnValue({
+    useMetricsExperienceStateMock.mockReturnValue({
       currentPage: 0,
       dimensions: [],
       valueFilters: [],
       onDimensionsChange: jest.fn(),
       onPageChange: jest.fn(),
       onValuesChange: jest.fn(),
-      onClearValues: jest.fn(),
-      onClearAllDimensions: jest.fn(),
       isFullscreen,
       searchTerm: '',
       onSearchTermChange: jest.fn(),
@@ -339,15 +332,13 @@ describe('MetricsExperienceGrid', () => {
       noData: false,
     }));
 
-    useMetricsGridStateMock.mockReturnValue({
+    useMetricsExperienceStateMock.mockReturnValue({
       currentPage: 0,
       dimensions: [],
       valueFilters: [],
       onDimensionsChange: jest.fn(),
       onPageChange: jest.fn(),
       onValuesChange: jest.fn(),
-      onClearValues: jest.fn(),
-      onClearAllDimensions: jest.fn(),
       isFullscreen: false,
       searchTerm: 'cpu',
       onSearchTermChange,