[Discover] Reset layout on profile change

src/platform/packages/shared/kbn-discover-utils/index.ts

@@ -46,6 +46,10 @@ export {
   getFlattenedTraceDocumentOverview,
   getIgnoredReason,
   getMessageFieldWithFallbacks,
+  getChartHidden,
+  getTableHidden,
+  getTopPanelHeight,
+  getBreakdownField,
   getAvailableResourceFields,
   getAvailableTraceFields,
   getLogLevelFieldWithFallback,
@@ -68,6 +72,10 @@ export {
   dismissFlyouts,
   prepareDataViewForEditing,
   getEsqlDataView,
+  setChartHidden,
+  setTableHidden,
+  setTopPanelHeight,
+  setBreakdownField,
   LogLevelBadge,
   getDefaultSort,
   getSort,
@@ -78,6 +86,10 @@ export {
   escapeAndPreserveHighlightTags,
   getHighlightedFieldValue,
   severityOrder,
+  CHART_HIDDEN_KEY,
+  TABLE_HIDDEN_KEY,
+  HISTOGRAM_HEIGHT_KEY,
+  HISTOGRAM_BREAKDOWN_FIELD_KEY,
 } from './src';
 
 export type { LogsContextService, ApmContextService, SortOrder, SortInput, SortPair } from './src';

src/platform/packages/shared/kbn-discover-utils/moon.yml

@@ -35,6 +35,8 @@ dependsOn:
   - '@kbn/core-chrome-app-menu-components'
   - '@kbn/core-http-browser'
   - '@kbn/esql-utils'
+  - '@kbn/kibana-utils-plugin'
+  - '@kbn/resizable-layout'
 tags:
   - shared-common
   - package

src/platform/packages/shared/kbn-discover-utils/src/utils/index.ts

@@ -28,6 +28,7 @@ export * from './get_field_value';
 export * from './get_visible_columns';
 export * from './convert_value_to_string';
 export * from './highlight_utils';
+export * from './local_storage_utils';
 export * from './sorting';
 export { DiscoverFlyouts, dismissAllFlyoutsExceptFor, dismissFlyouts } from './dismiss_flyouts';
 export { prepareDataViewForEditing } from './prepare_data_view_for_editing';

src/platform/packages/shared/kbn-unified-histogram/utils/local_storage_utils.test.ts → src/platform/packages/shared/kbn-discover-utils/src/utils/local_storage_utils.test.ts

@@ -12,11 +12,14 @@ import {
   CHART_HIDDEN_KEY,
   getBreakdownField,
   getChartHidden,
+  getTableHidden,
   getTopPanelHeight,
   HISTOGRAM_BREAKDOWN_FIELD_KEY,
   HISTOGRAM_HEIGHT_KEY,
+  TABLE_HIDDEN_KEY,
   setBreakdownField,
   setChartHidden,
+  setTableHidden,
   setTopPanelHeight,
 } from './local_storage_utils';
 
@@ -27,6 +30,8 @@ describe('local storage utils', () => {
       switch (key) {
         case `${localStorageKeyPrefix}:${CHART_HIDDEN_KEY}`:
           return true;
+        case `${localStorageKeyPrefix}:${TABLE_HIDDEN_KEY}`:
+          return false;
         case `${localStorageKeyPrefix}:${HISTOGRAM_HEIGHT_KEY}`:
           return 100;
         case `${localStorageKeyPrefix}:${HISTOGRAM_BREAKDOWN_FIELD_KEY}`:
@@ -44,6 +49,10 @@ describe('local storage utils', () => {
     expect(mockStorage.get).toHaveBeenLastCalledWith(
       `${localStorageKeyPrefix}:${CHART_HIDDEN_KEY}`
     );
+    expect(getTableHidden(storage, localStorageKeyPrefix)).toEqual(false);
+    expect(mockStorage.get).toHaveBeenLastCalledWith(
+      `${localStorageKeyPrefix}:${TABLE_HIDDEN_KEY}`
+    );
     expect(getTopPanelHeight(storage, localStorageKeyPrefix)).toEqual(100);
     expect(mockStorage.get).toHaveBeenLastCalledWith(
       `${localStorageKeyPrefix}:${HISTOGRAM_HEIGHT_KEY}`
@@ -60,6 +69,11 @@ describe('local storage utils', () => {
       `${localStorageKeyPrefix}:${CHART_HIDDEN_KEY}`,
       false
     );
+    setTableHidden(storage, localStorageKeyPrefix, true);
+    expect(mockStorage.set).toHaveBeenLastCalledWith(
+      `${localStorageKeyPrefix}:${TABLE_HIDDEN_KEY}`,
+      true
+    );
     setTopPanelHeight(storage, localStorageKeyPrefix, 200);
     expect(mockStorage.set).toHaveBeenLastCalledWith(
       `${localStorageKeyPrefix}:${HISTOGRAM_HEIGHT_KEY}`,

src/platform/packages/shared/kbn-unified-histogram/utils/local_storage_utils.ts → src/platform/packages/shared/kbn-discover-utils/src/utils/local_storage_utils.ts

@@ -8,9 +8,10 @@
  */
 
 import type { Storage } from '@kbn/kibana-utils-plugin/public';
-import type { UnifiedHistogramTopPanelHeightContext } from '../types';
+import type { ResizableLayoutProps } from '@kbn/resizable-layout';
 
 export const CHART_HIDDEN_KEY = 'chartHidden';
+export const TABLE_HIDDEN_KEY = 'tableHidden';
 export const HISTOGRAM_HEIGHT_KEY = 'histogramHeight';
 export const HISTOGRAM_BREAKDOWN_FIELD_KEY = 'histogramBreakdownField';
 
@@ -25,13 +26,22 @@ export const getChartHidden = (
 ): boolean | undefined =>
   storage.get(getLocalStorageKey(localStorageKeyPrefix, CHART_HIDDEN_KEY)) ?? undefined;
 
+/**
+ * Get the table hidden state from local storage
+ */
+export const getTableHidden = (
+  storage: Storage,
+  localStorageKeyPrefix: string
+): boolean | undefined =>
+  storage.get(getLocalStorageKey(localStorageKeyPrefix, TABLE_HIDDEN_KEY)) ?? undefined;
+
 /**
  * Get the top panel height from local storage
  */
 export const getTopPanelHeight = (
   storage: Storage,
   localStorageKeyPrefix: string
-): UnifiedHistogramTopPanelHeightContext | undefined =>
+): ResizableLayoutProps['fixedPanelSize'] | undefined =>
   storage.get(getLocalStorageKey(localStorageKeyPrefix, HISTOGRAM_HEIGHT_KEY)) ?? undefined;
 
 /**
@@ -53,13 +63,22 @@ export const setChartHidden = (
   chartHidden: boolean | undefined
 ) => storage.set(getLocalStorageKey(localStorageKeyPrefix, CHART_HIDDEN_KEY), chartHidden);
 
+/**
+ * Set the table hidden state in local storage
+ */
+export const setTableHidden = (
+  storage: Storage,
+  localStorageKeyPrefix: string,
+  tableHidden: boolean | undefined
+) => storage.set(getLocalStorageKey(localStorageKeyPrefix, TABLE_HIDDEN_KEY), tableHidden);
+
 /**
  * Set the top panel height in local storage
  */
 export const setTopPanelHeight = (
   storage: Storage,
   localStorageKeyPrefix: string,
-  topPanelHeight: UnifiedHistogramTopPanelHeightContext
+  topPanelHeight: ResizableLayoutProps['fixedPanelSize']
 ) => storage.set(getLocalStorageKey(localStorageKeyPrefix, HISTOGRAM_HEIGHT_KEY), topPanelHeight);
 
 /**

src/platform/packages/shared/kbn-discover-utils/tsconfig.json

@@ -30,6 +30,8 @@
     "@kbn/apm-types",
     "@kbn/core-chrome-app-menu-components",
     "@kbn/core-http-browser",
-    "@kbn/esql-utils"
+    "@kbn/esql-utils",
+    "@kbn/kibana-utils-plugin",
+    "@kbn/resizable-layout"
   ]
 }

src/platform/packages/shared/kbn-unified-histogram/components/chart/chart.test.tsx

@@ -9,7 +9,6 @@
 
 import type { Capabilities } from '@kbn/core/public';
 import type { DataView } from '@kbn/data-views-plugin/public';
-import type { ReactElement } from 'react';
 import type { Suggestion } from '@kbn/lens-plugin/public';
 import type { UnifiedHistogramFetchStatus } from '../../types';
 import React from 'react';
@@ -35,7 +34,6 @@ let mockUseEditVisualization: jest.Mock | undefined = jest.fn();
 const mockedSearchSourceInstanceMockFetch$ = jest.mocked(searchSourceInstanceMock.fetch$);
 
 interface MountComponentProps {
-  customToggle?: ReactElement;
   noChart?: boolean;
   noHits?: boolean;
   noBreakdown?: boolean;
@@ -49,9 +47,10 @@ interface MountComponentProps {
   mockEditVisualization?: jest.Mock | undefined;
 }
 
+const toggleActionsTestId = 'default-chart-toggle-actions';
+
 const mountComponent = async (mountProps: MountComponentProps = {}) => {
   const {
-    customToggle,
     noChart,
     noHits,
     noBreakdown,
@@ -139,7 +138,7 @@ const mountComponent = async (mountProps: MountComponentProps = {}) => {
     onTimeIntervalChange: jest.fn(),
     withDefaultActions: undefined,
     isChartAvailable: checkChartAvailability({ chart, dataView, isPlainRecord }),
-    renderCustomChartToggleActions: customToggle ? () => customToggle : undefined,
+    renderToggleActions: () => <span data-test-subj={toggleActionsTestId}>Toggle actions</span>,
     fetch$: getFetch$Mock(),
     fetchParams,
     dataLoading$: undefined,
@@ -159,56 +158,49 @@ const mountComponent = async (mountProps: MountComponentProps = {}) => {
 };
 
 describe('Chart', () => {
-  test('render when chart is undefined', async () => {
+  test('renders a hidden placeholder when chart is undefined', async () => {
     await mountComponent({ noChart: true });
 
-    expect(screen.getByText('Show chart')).toBeVisible();
+    expect(screen.getByTestId('unifiedHistogramChartPanelHidden')).toBeVisible();
   });
 
-  test('should render a custom toggle when provided', async () => {
-    await mountComponent({
-      customToggle: <span data-test-subj="custom-toggle" />,
-    });
+  test('should render chart toggle actions when chart is defined', async () => {
+    await mountComponent();
 
-    expect(screen.getByTestId('custom-toggle')).toBeVisible();
-    expect(screen.queryByText('Show chart')).not.toBeInTheDocument();
+    expect(screen.queryByTestId(toggleActionsTestId)).toBeVisible();
   });
 
-  test('should not render when custom toggle is provided and chart is hidden', async () => {
-    await mountComponent({
-      customToggle: <span data-test-subj="custom-toggle" />,
-      chartHidden: true,
-    });
+  test('should not render chart toggle actions when chart is hidden', async () => {
+    await mountComponent({ chartHidden: true });
 
-    expect(screen.getByTestId('unifiedHistogramChartPanelHidden')).toBeVisible();
-    expect(screen.queryByTestId('custom-toggle')).not.toBeInTheDocument();
+    expect(screen.queryByTestId(toggleActionsTestId)).not.toBeInTheDocument();
   });
 
   test('render when chart is defined and onEditVisualization is undefined', async () => {
     await mountComponent({ mockEditVisualization: undefined });
 
-    expect(screen.getByText('Hide chart')).toBeVisible();
+    expect(screen.getByTestId(toggleActionsTestId)).toBeVisible();
     expect(screen.queryByText('Edit visualization')).not.toBeInTheDocument();
   });
 
   test('render when chart is defined and onEditVisualization is defined', async () => {
     await mountComponent();
 
-    expect(screen.getByText('Hide chart')).toBeVisible();
+    expect(screen.getByTestId(toggleActionsTestId)).toBeVisible();
     expect(screen.getByText('Edit visualization')).toBeVisible();
   });
 
   test('render when chart.hidden is true', async () => {
     await mountComponent({ chartHidden: true });
 
-    expect(screen.getByText('Show chart')).toBeVisible();
+    expect(screen.getByTestId('unifiedHistogramChartPanelHidden')).toBeVisible();
     expect(screen.queryByTestId('unifiedHistogramChart')).not.toBeInTheDocument();
   });
 
   test('render when chart.hidden is false', async () => {
     await mountComponent({ chartHidden: false });
 
-    expect(screen.getByText('Hide chart')).toBeVisible();
+    expect(screen.getByTestId(toggleActionsTestId)).toBeVisible();
     expect(screen.getByTestId('unifiedHistogramChart')).toBeVisible();
   });
 
@@ -219,7 +211,7 @@ describe('Chart', () => {
       isTransformationalESQL: true,
     });
 
-    expect(screen.getByText('Hide chart')).toBeVisible();
+    expect(screen.getByTestId(toggleActionsTestId)).toBeVisible();
     expect(screen.getByTestId('unifiedHistogramChart')).toBeVisible();
     expect(screen.getByText('Edit visualization')).toBeVisible();
     expect(screen.getByText('Save visualization to dashboard')).toBeVisible();
@@ -232,7 +224,7 @@ describe('Chart', () => {
       isTransformationalESQL: false,
     });
 
-    expect(screen.getByText('Show chart')).toBeVisible();
+    expect(screen.getByTestId('unifiedHistogramChartPanelHidden')).toBeVisible();
     expect(screen.queryByTestId('unifiedHistogramChart')).not.toBeInTheDocument();
     expect(screen.queryByText('Edit visualization')).not.toBeInTheDocument();
     expect(screen.queryByText('Save visualization to dashboard')).not.toBeInTheDocument();
@@ -246,7 +238,7 @@ describe('Chart', () => {
       isTransformationalESQL: false,
     });
 
-    expect(screen.getByText('Show chart')).toBeVisible();
+    expect(screen.getByTestId('unifiedHistogramChartPanelHidden')).toBeVisible();
     expect(screen.queryByTestId('unifiedHistogramChart')).not.toBeInTheDocument();
     expect(screen.queryByText('Edit visualization')).not.toBeInTheDocument();
     expect(screen.queryByText('Save visualization to dashboard')).not.toBeInTheDocument();
@@ -258,7 +250,7 @@ describe('Chart', () => {
       isTransformationalESQL: false,
     });
 
-    expect(screen.getByText('Hide chart')).toBeVisible();
+    expect(screen.getByTestId(toggleActionsTestId)).toBeVisible();
     expect(screen.getByTestId('unifiedHistogramChart')).toBeVisible();
     expect(screen.getByText('Edit visualization')).toBeVisible();
     expect(screen.getByText('Save visualization to dashboard')).toBeVisible();
@@ -270,7 +262,7 @@ describe('Chart', () => {
       isTransformationalESQL: true,
     });
 
-    expect(screen.getByText('Hide chart')).toBeVisible();
+    expect(screen.getByTestId(toggleActionsTestId)).toBeVisible();
     expect(screen.getByTestId('unifiedHistogramChart')).toBeVisible();
     expect(screen.getByText('Edit visualization')).toBeVisible();
     expect(screen.getByText('Save visualization to dashboard')).toBeVisible();
@@ -283,7 +275,7 @@ describe('Chart', () => {
       isTransformationalESQL: true,
     });
 
-    expect(screen.getByText('Show chart')).toBeVisible();
+    expect(screen.getByTestId('unifiedHistogramChartPanelHidden')).toBeVisible();
     expect(screen.queryByTestId('unifiedHistogramChart')).not.toBeInTheDocument();
     expect(screen.queryByText('Edit visualization')).not.toBeInTheDocument();
     expect(screen.queryByText('Save visualization to dashboard')).not.toBeInTheDocument();