[Discover] Allow to store the configured ES|QL visualization v3

packages/kbn-visualization-utils/src/get_lens_attributes.test.ts

@@ -20,6 +20,7 @@ describe('getLensAttributesFromSuggestion', () => {
     timeFieldName: '@timestamp',
     isPersisted: () => false,
     toSpec: () => ({}),
+    toMinimalSpec: () => ({}),
   } as unknown as DataView;
   const query: AggregateQuery = { esql: 'from foo | limit 10' };
 

packages/kbn-visualization-utils/src/get_lens_attributes.ts

@@ -20,7 +20,17 @@ export const getLensAttributesFromSuggestion = ({
   query: Query | AggregateQuery;
   suggestion: Suggestion | undefined;
   dataView?: DataView;
-}) => {
+}): {
+  references: Array<{ name: string; id: string; type: string }>;
+  visualizationType: string;
+  state: {
+    visualization: {};
+    datasourceStates: Record<string, unknown>;
+    query: Query | AggregateQuery;
+    filters: Filter[];
+  };
+  title: string;
+} => {
   const suggestionDatasourceState = Object.assign({}, suggestion?.datasourceState);
   const suggestionVisualizationState = Object.assign({}, suggestion?.visualizationState);
   const datasourceStates =
@@ -35,11 +45,11 @@ export const getLensAttributesFromSuggestion = ({
         };
   const visualization = suggestionVisualizationState;
   const attributes = {
-    title: suggestion
-      ? suggestion.title
-      : i18n.translate('visualizationUtils.config.suggestion.title', {
-          defaultMessage: 'New suggestion',
-        }),
+    title:
+      suggestion?.title ??
+      i18n.translate('visualizationUtils.config.suggestion.title', {
+        defaultMessage: 'New suggestion',
+      }),
     references: [
       {
         id: dataView?.id ?? '',
@@ -55,7 +65,7 @@ export const getLensAttributesFromSuggestion = ({
       ...(dataView &&
         dataView.id &&
         !dataView.isPersisted() && {
-          adHocDataViews: { [dataView.id]: dataView.toSpec(false) },
+          adHocDataViews: { [dataView.id]: dataView.toMinimalSpec() },
         }),
     },
     visualizationType: suggestion ? suggestion.visualizationId : 'lnsXY',

src/core/server/integration_tests/ci_checks/saved_objects/check_registered_types.test.ts

@@ -135,7 +135,7 @@ describe('checking migration metadata changes on all registered SO types', () =>
         "risk-engine-configuration": "aea0c371a462e6d07c3ceb3aff11891b47feb09d",
         "rules-settings": "892a2918ebaeba809a612b8d97cec0b07c800b5f",
         "sample-data-telemetry": "37441b12f5b0159c2d6d5138a494c9f440e950b5",
-        "search": "cf69e2bf8ae25c10af21887cd6effc4a9ea73064",
+        "search": "7598e4a701ddcaa5e3f44f22e797618a48595e6f",
         "search-session": "b2fcd840e12a45039ada50b1355faeafa39876d1",
         "search-telemetry": "b568601618744720b5662946d3103e3fb75fe8ee",
         "security-rule": "07abb4d7e707d91675ec0495c73816394c7b521f",

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

@@ -10,7 +10,7 @@ import React, { useCallback, useMemo } from 'react';
 import { UnifiedHistogramContainer } from '@kbn/unified-histogram-plugin/public';
 import { css } from '@emotion/react';
 import useObservable from 'react-use/lib/useObservable';
-import { Datatable } from '@kbn/expressions-plugin/common';
+import type { Datatable } from '@kbn/expressions-plugin/common';
 import { useDiscoverHistogram } from './use_discover_histogram';
 import { type DiscoverMainContentProps, DiscoverMainContent } from './discover_main_content';
 import { useAppStateSelector } from '../../services/discover_app_state_container';

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

@@ -8,12 +8,15 @@
 
 import { useQuerySubscriber } from '@kbn/unified-field-list/src/hooks/use_query_subscriber';
 import {
+  canImportVisContext,
   UnifiedHistogramApi,
+  UnifiedHistogramExternalVisContextStatus,
   UnifiedHistogramFetchStatus,
   UnifiedHistogramState,
+  UnifiedHistogramVisContext,
 } from '@kbn/unified-histogram-plugin/public';
 import { isEqual } from 'lodash';
-import { useCallback, useEffect, useRef, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
   debounceTime,
   distinctUntilChanged,
@@ -26,6 +29,9 @@ import {
 } from 'rxjs';
 import useObservable from 'react-use/lib/useObservable';
 import type { RequestAdapter } from '@kbn/inspector-plugin/common';
+import type { DatatableColumn } from '@kbn/expressions-plugin/common';
+import type { SavedSearch } from '@kbn/saved-search-plugin/common';
+import type { Filter } from '@kbn/es-query';
 import { useDiscoverCustomization } from '../../../../customizations';
 import { useDiscoverServices } from '../../../../hooks/use_discover_services';
 import { FetchStatus } from '../../../types';
@@ -35,7 +41,11 @@ import type { DiscoverStateContainer } from '../../services/discover_state';
 import { addLog } from '../../../../utils/add_log';
 import { useInternalStateSelector } from '../../services/discover_internal_state_container';
 import type { DiscoverAppState } from '../../services/discover_app_state_container';
-import { RecordRawType } from '../../services/discover_data_state_container';
+import { DataDocumentsMsg, RecordRawType } from '../../services/discover_data_state_container';
+import { useSavedSearch } from '../../services/discover_state_provider';
+
+const EMPTY_TEXT_BASED_COLUMNS: DatatableColumn[] = [];
+const EMPTY_FILTERS: Filter[] = [];
 
 export interface UseDiscoverHistogramProps {
   stateContainer: DiscoverStateContainer;
@@ -52,6 +62,7 @@ export const useDiscoverHistogram = ({
 }: UseDiscoverHistogramProps) => {
   const services = useDiscoverServices();
   const savedSearchData$ = stateContainer.dataState.data$;
+  const savedSearchState = useSavedSearch();
 
   /**
    * API initialization
@@ -219,15 +230,18 @@ export const useDiscoverHistogram = ({
     [stateContainer]
   );
 
+  const [initialTextBasedProps] = useState(() =>
+    getUnifiedHistogramPropsForTextBased({
+      documentsValue: savedSearchData$.documents$.getValue(),
+      savedSearch: stateContainer.savedSearchState.getState(),
+    })
+  );
+
   const {
     dataView: textBasedDataView,
     query: textBasedQuery,
-    columns,
-  } = useObservable(textBasedFetchComplete$, {
-    dataView: stateContainer.internalState.getState().dataView!,
-    query: stateContainer.appState.getState().query,
-    columns: savedSearchData$.documents$.getValue().textBasedQueryColumns ?? [],
-  });
+    columns: textBasedColumns,
+  } = useObservable(textBasedFetchComplete$, initialTextBasedProps);
 
   useEffect(() => {
     if (!isPlainRecord) {
@@ -316,14 +330,53 @@ export const useDiscoverHistogram = ({
 
   const histogramCustomization = useDiscoverCustomization('unified_histogram');
 
-  const filtersMemoized = useMemo(
-    () => [...(filters ?? []), ...customFilters],
-    [filters, customFilters]
-  );
+  const filtersMemoized = useMemo(() => {
+    const allFilters = [...(filters ?? []), ...customFilters];
+    return allFilters.length ? allFilters : EMPTY_FILTERS;
+  }, [filters, customFilters]);
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const timeRangeMemoized = useMemo(() => timeRange, [timeRange?.from, timeRange?.to]);
 
+  const onVisContextChanged = useCallback(
+    (
+      nextVisContext: UnifiedHistogramVisContext | undefined,
+      externalVisContextStatus: UnifiedHistogramExternalVisContextStatus
+    ) => {
+      switch (externalVisContextStatus) {
+        case UnifiedHistogramExternalVisContextStatus.manuallyCustomized:
+          // if user customized the visualization manually
+          // (only this action should trigger Unsaved changes badge)
+          stateContainer.savedSearchState.updateVisContext({
+            nextVisContext,
+          });
+          stateContainer.internalState.transitions.setOverriddenVisContextAfterInvalidation(
+            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)
+          stateContainer.internalState.transitions.setOverriddenVisContextAfterInvalidation(
+            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
+          stateContainer.internalState.transitions.setOverriddenVisContextAfterInvalidation(
+            undefined
+          );
+          break;
+        case UnifiedHistogramExternalVisContextStatus.unknown:
+          // using `{}` to overwrite the value inside the saved search SO during saving
+          stateContainer.internalState.transitions.setOverriddenVisContextAfterInvalidation({});
+          break;
+      }
+    },
+    [stateContainer]
+  );
+
   return {
     ref,
     getCreationOptions,
@@ -333,12 +386,18 @@ export const useDiscoverHistogram = ({
     filters: filtersMemoized,
     timeRange: timeRangeMemoized,
     relativeTimeRange,
-    columns,
+    columns: isPlainRecord ? textBasedColumns : undefined,
     onFilter: histogramCustomization?.onFilter,
     onBrushEnd: histogramCustomization?.onBrushEnd,
     withDefaultActions: histogramCustomization?.withDefaultActions,
     disabledActions: histogramCustomization?.disabledActions,
     isChartLoading: isSuggestionLoading,
+    // visContext should be in sync with current query
+    externalVisContext:
+      isPlainRecord && canImportVisContext(savedSearchState?.visContext)
+        ? savedSearchState?.visContext
+        : undefined,
+    onVisContextChanged: isPlainRecord ? onVisContextChanged : undefined,
   };
 };
 
@@ -412,12 +471,13 @@ const createAppStateObservable = (state$: Observable<DiscoverAppState>) => {
 const createFetchCompleteObservable = (stateContainer: DiscoverStateContainer) => {
   return stateContainer.dataState.data$.documents$.pipe(
     distinctUntilChanged((prev, curr) => prev.fetchStatus === curr.fetchStatus),
-    filter(({ fetchStatus }) => fetchStatus === FetchStatus.COMPLETE),
-    map(({ textBasedQueryColumns }) => ({
-      dataView: stateContainer.internalState.getState().dataView!,
-      query: stateContainer.appState.getState().query!,
-      columns: textBasedQueryColumns ?? [],
-    }))
+    filter(({ fetchStatus }) => [FetchStatus.COMPLETE, FetchStatus.ERROR].includes(fetchStatus)),
+    map((documentsValue) => {
+      return getUnifiedHistogramPropsForTextBased({
+        documentsValue,
+        savedSearch: stateContainer.savedSearchState.getState(),
+      });
+    })
   );
 };
 
@@ -430,7 +490,27 @@ const createTotalHitsObservable = (state$?: Observable<UnifiedHistogramState>) =
 
 const createCurrentSuggestionObservable = (state$: Observable<UnifiedHistogramState>) => {
   return state$.pipe(
-    map((state) => state.currentSuggestion),
+    map((state) => state.currentSuggestionContext),
     distinctUntilChanged(isEqual)
   );
 };
+
+function getUnifiedHistogramPropsForTextBased({
+  documentsValue,
+  savedSearch,
+}: {
+  documentsValue: DataDocumentsMsg | undefined;
+  savedSearch: SavedSearch;
+}) {
+  const columns = documentsValue?.textBasedQueryColumns || EMPTY_TEXT_BASED_COLUMNS;
+
+  const nextProps = {
+    dataView: savedSearch.searchSource.getField('index')!,
+    query: savedSearch.searchSource.getField('query'),
+    columns,
+  };
+
+  addLog('[UnifiedHistogram] delayed next props for text-based', nextProps);
+
+  return nextProps;
+}

src/plugins/discover/public/application/main/components/top_nav/get_top_nav_badges.tsx

@@ -45,7 +45,13 @@ export const getTopNavBadges = ({
   if (hasUnsavedChanges && !defaultBadges?.unsavedChangesBadge?.disabled) {
     entries.push({
       data: getTopNavUnsavedChangesBadge({
-        onRevert: stateContainer.actions.undoSavedSearchChanges,
+        onRevert: async () => {
+          const lensEditFlyoutCancelButton = document.getElementById('lnsCancelEditOnFlyFlyout');
+          if (lensEditFlyoutCancelButton) {
+            lensEditFlyoutCancelButton.click?.();
+          }
+          await stateContainer.actions.undoSavedSearchChanges();
+        },
         onSave:
           services.capabilities.discover.save && !isManaged
             ? async () => {

src/plugins/discover/public/application/main/components/top_nav/on_save_search.tsx

@@ -93,6 +93,9 @@ export async function onSaveSearch({
 }) {
   const { uiSettings, savedObjectsTagging } = services;
   const dataView = state.internalState.getState().dataView;
+  const overriddenVisContextAfterInvalidation =
+    state.internalState.getState().overriddenVisContextAfterInvalidation;
+
   const onSave = async ({
     newTitle,
     newCopyOnSave,
@@ -116,6 +119,7 @@ export async function onSaveSearch({
     const currentSampleSize = savedSearch.sampleSize;
     const currentDescription = savedSearch.description;
     const currentTags = savedSearch.tags;
+    const currentVisContext = savedSearch.visContext;
     savedSearch.title = newTitle;
     savedSearch.description = newDescription;
     savedSearch.timeRestore = newTimeRestore;
@@ -134,6 +138,11 @@ export async function onSaveSearch({
     if (savedObjectsTagging) {
       savedSearch.tags = newTags;
     }
+
+    if (overriddenVisContextAfterInvalidation) {
+      savedSearch.visContext = overriddenVisContextAfterInvalidation;
+    }
+
     const saveOptions: SaveSavedSearchOptions = {
       onTitleDuplicate,
       copyOnSave: newCopyOnSave,
@@ -159,10 +168,12 @@ export async function onSaveSearch({
       savedSearch.rowsPerPage = currentRowsPerPage;
       savedSearch.sampleSize = currentSampleSize;
       savedSearch.description = currentDescription;
+      savedSearch.visContext = currentVisContext;
       if (savedObjectsTagging) {
         savedSearch.tags = currentTags;
       }
     } else {
+      state.internalState.transitions.resetOnSavedSearchChange();
       state.appState.resetInitialState();
     }
     onSaveCb?.();

src/plugins/discover/public/application/main/services/discover_internal_state_container.ts

@@ -11,9 +11,10 @@ import {
   createStateContainerReactHelpers,
   ReduxLikeStateContainer,
 } from '@kbn/kibana-utils-plugin/common';
-import { DataView, DataViewListItem } from '@kbn/data-views-plugin/common';
-import { Filter } from '@kbn/es-query';
+import type { DataView, DataViewListItem } from '@kbn/data-views-plugin/common';
+import type { Filter } from '@kbn/es-query';
 import type { DataTableRecord } from '@kbn/discover-utils/types';
+import type { UnifiedHistogramVisContext } from '@kbn/unified-histogram-plugin/public';
 
 export interface InternalState {
   dataView: DataView | undefined;
@@ -22,6 +23,7 @@ export interface InternalState {
   adHocDataViews: DataView[];
   expandedDoc: DataTableRecord | undefined;
   customFilters: Filter[];
+  overriddenVisContextAfterInvalidation: UnifiedHistogramVisContext | {} | undefined; // it will be used during saved search saving
 }
 
 export interface InternalStateTransitions {
@@ -40,6 +42,12 @@ export interface InternalStateTransitions {
     state: InternalState
   ) => (dataView: DataTableRecord | undefined) => InternalState;
   setCustomFilters: (state: InternalState) => (customFilters: Filter[]) => InternalState;
+  setOverriddenVisContextAfterInvalidation: (
+    state: InternalState
+  ) => (
+    overriddenVisContextAfterInvalidation: UnifiedHistogramVisContext | {} | undefined
+  ) => InternalState;
+  resetOnSavedSearchChange: (state: InternalState) => () => InternalState;
 }
 
 export type DiscoverInternalStateContainer = ReduxLikeStateContainer<
@@ -59,6 +67,7 @@ export function getInternalStateContainer() {
       savedDataViews: [],
       expandedDoc: undefined,
       customFilters: [],
+      overriddenVisContextAfterInvalidation: undefined,
     },
     {
       setDataView: (prevState: InternalState) => (nextDataView: DataView) => ({
@@ -112,6 +121,16 @@ export function getInternalStateContainer() {
         ...prevState,
         customFilters,
       }),
+      setOverriddenVisContextAfterInvalidation:
+        (prevState: InternalState) =>
+        (overriddenVisContextAfterInvalidation: UnifiedHistogramVisContext | {} | undefined) => ({
+          ...prevState,
+          overriddenVisContextAfterInvalidation,
+        }),
+      resetOnSavedSearchChange: (prevState: InternalState) => () => ({
+        ...prevState,
+        overriddenVisContextAfterInvalidation: undefined,
+      }),
     },
     {},
     { freeze: (state) => state }