[Logs+] Restore Dataset selection from page URL

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

@@ -178,7 +178,7 @@ export const DiscoverTopNav = ({
     currentDataViewId: dataView?.id,
     onAddField: addField,
     onDataViewCreated: createNewDataView,
-    onCreateDefaultAdHocDataView: stateContainer.actions.onCreateDefaultAdHocDataView,
+    onCreateDefaultAdHocDataView: stateContainer.actions.createAndAppendAdHocDataView,
     onChangeDataView: stateContainer.actions.onChangeDataView,
     textBasedLanguages: supportedTextBasedLanguages as DataViewPickerProps['textBasedLanguages'],
     adHocDataViews,

src/plugins/discover/public/application/main/discover_main_route.test.tsx

@@ -27,7 +27,10 @@ jest.mock('../../customizations', () => {
   const originalModule = jest.requireActual('../../customizations');
   return {
     ...originalModule,
-    useDiscoverCustomizationService: () => mockCustomizationService,
+    useDiscoverCustomizationService: () => ({
+      customizationService: mockCustomizationService,
+      isInitialized: Boolean(mockCustomizationService),
+    }),
   };
 });
 

src/plugins/discover/public/application/main/discover_main_route.tsx

@@ -64,10 +64,11 @@ export function DiscoverMainRoute({ customizationCallbacks, isDev }: MainRoutePr
       services,
     })
   );
-  const customizationService = useDiscoverCustomizationService({
-    customizationCallbacks,
-    stateContainer,
-  });
+  const { customizationService, isInitialized: isCustomizationServiceInitialized } =
+    useDiscoverCustomizationService({
+      customizationCallbacks,
+      stateContainer,
+    });
   const [error, setError] = useState<Error>();
   const [loading, setLoading] = useState(true);
   const [hasESData, setHasESData] = useState(false);
@@ -219,25 +220,17 @@ export function DiscoverMainRoute({ customizationCallbacks, isDev }: MainRoutePr
     [loadSavedSearch]
   );
 
-  // primary fetch: on initial search + triggered when id changes
   useEffect(() => {
+    if (!isCustomizationServiceInitialized) return;
+
     setLoading(true);
     setHasESData(false);
     setHasUserDataView(false);
     setShowNoDataPage(false);
     setError(undefined);
     // restore the previously selected data view for a new state
     loadSavedSearch(!savedSearchId ? stateContainer.internalState.getState().dataView : undefined);
-  }, [
-    loadSavedSearch,
-    savedSearchId,
-    stateContainer,
-    setLoading,
-    setHasESData,
-    setHasUserDataView,
-    setShowNoDataPage,
-    setError,
-  ]);
+  }, [isCustomizationServiceInitialized, loadSavedSearch, savedSearchId, stateContainer]);
 
   // secondary fetch: in case URL is set to `/`, used to reset to 'new' state, keeping the current data view
   useUrl({

src/plugins/discover/public/application/main/services/discover_state.test.ts

@@ -678,7 +678,7 @@ describe('Test discover state actions', () => {
     const { state } = await getState('/', { savedSearch: savedSearchMock });
     await state.actions.loadSavedSearch({ savedSearchId: savedSearchMock.id });
     const unsubscribe = state.actions.initializeAndSync();
-    await state.actions.onCreateDefaultAdHocDataView({ title: 'ad-hoc-test' });
+    await state.actions.createAndAppendAdHocDataView({ title: 'ad-hoc-test' });
     expect(state.appState.getState().index).toBe('ad-hoc-id');
     expect(state.internalState.getState().adHocDataViews[0].id).toBe('ad-hoc-id');
     unsubscribe();

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

@@ -129,7 +129,7 @@ export interface DiscoverStateContainer {
      * Used by the Data View Picker
      * @param pattern
      */
-    onCreateDefaultAdHocDataView: (dataViewSpec: DataViewSpec) => Promise<void>;
+    createAndAppendAdHocDataView: (dataViewSpec: DataViewSpec) => Promise<DataView>;
     /**
      * Triggered when a new data view is created
      * @param dataView
@@ -389,14 +389,15 @@ export function getDiscoverStateContainer({
     };
   };
 
-  const onCreateDefaultAdHocDataView = async (dataViewSpec: DataViewSpec) => {
+  const createAndAppendAdHocDataView = async (dataViewSpec: DataViewSpec) => {
     const newDataView = await services.dataViews.create(dataViewSpec);
     if (newDataView.fields.getByName('@timestamp')?.type === 'date') {
       newDataView.timeFieldName = '@timestamp';
     }
     internalStateContainer.transitions.appendAdHocDataViews(newDataView);
 
     await onChangeDataView(newDataView);
+    return newDataView;
   };
   /**
    * Triggered when a user submits a query in the search bar
@@ -457,7 +458,7 @@ export function getDiscoverStateContainer({
       loadDataViewList,
       loadSavedSearch,
       onChangeDataView,
-      onCreateDefaultAdHocDataView,
+      createAndAppendAdHocDataView,
       onDataViewCreated,
       onDataViewEdited,
       onOpenSavedSearch,

src/plugins/discover/public/customizations/customization_provider.test.tsx

@@ -39,15 +39,17 @@ describe('useDiscoverCustomizationService', () => {
         customizationCallbacks: [callback],
       })
     );
-    expect(wrapper.result.current).toBeUndefined();
+    expect(wrapper.result.current.isInitialized).toBe(false);
+    expect(wrapper.result.current.customizationService).toBeUndefined();
     expect(callback).toHaveBeenCalledTimes(1);
     const cleanup = jest.fn();
     await act(async () => {
       resolveCallback(cleanup);
       await promise;
     });
-    expect(wrapper.result.current).toBeDefined();
-    expect(wrapper.result.current).toBe(service);
+    expect(wrapper.result.current.isInitialized).toBe(true);
+    expect(wrapper.result.current.customizationService).toBeDefined();
+    expect(wrapper.result.current.customizationService).toBe(service);
     expect(callback).toHaveBeenCalledTimes(1);
     expect(cleanup).not.toHaveBeenCalled();
     wrapper.unmount();

src/plugins/discover/public/customizations/customization_provider.ts

@@ -49,7 +49,9 @@ export const useDiscoverCustomizationService = ({
     };
   });
 
-  return customizationService;
+  const isInitialized = Boolean(customizationService);
+
+  return { customizationService, isInitialized };
 };
 
 export const useDiscoverCustomization$ = <TCustomizationId extends DiscoverCustomizationId>(

x-pack/plugins/discover_log_explorer/common/datasets/models/integration.ts

@@ -30,10 +30,14 @@ export class Integration {
   }
 
   public static create(integration: IntegrationType) {
-    return new Integration({
+    const integrationProps = {
       ...integration,
       id: `integration-${integration.name}-${integration.version}` as IntegrationId,
-      datasets: integration.dataStreams.map((dataset) => Dataset.create(dataset, integration)),
+      title: integration.title ?? integration.name,
+    };
+    return new Integration({
+      ...integrationProps,
+      datasets: integration.dataStreams.map((dataset) => Dataset.create(dataset, integrationProps)),
     });
   }
 }

x-pack/plugins/discover_log_explorer/public/components/dataset_selector/sub_components/datasets_popover.tsx

@@ -53,6 +53,7 @@ export const DatasetsPopover = ({
           iconSide="right"
           onClick={onClick}
           fullWidth={isMobile}
+          data-test-subj={`${POPOVER_ID}-button`}
         >
           {iconType ? (
             <EuiIcon type={iconType} />

x-pack/plugins/discover_log_explorer/public/customizations/custom_dataset_selector.tsx

@@ -5,38 +5,23 @@
  * 2.0.
  */
 
-/* eslint-disable react-hooks/exhaustive-deps */
-
-import React, { useState } from 'react';
-import { DiscoverStateContainer } from '@kbn/discover-plugin/public';
+import React from 'react';
 import { DatasetSelector } from '../components/dataset_selector';
 import { DatasetsProvider, useDatasetsContext } from '../hooks/use_datasets';
-import { InternalStateProvider } from '../hooks/use_data_view';
 import { IntegrationsProvider, useIntegrationsContext } from '../hooks/use_integrations';
 import { IDatasetsClient } from '../services/datasets';
-import {
-  AllDatasetSelection,
-  DatasetSelection,
-  DatasetSelectionChange,
-} from '../utils/dataset_selection';
+import { LogExplorerProfileStateService } from '../state_machines/log_explorer_profile';
+import { useLogExplorerProfile } from '../hooks/use_log_explorer_profile';
 
 interface CustomDatasetSelectorProps {
-  stateContainer: DiscoverStateContainer;
+  logExplorerProfileStateService: LogExplorerProfileStateService;
 }
 
-export const CustomDatasetSelector = withProviders(({ stateContainer }) => {
-  /**
-   * TOREMOVE: This is a temporary workaround to control the datasetSelection value
-   * until we handle the restore/initialization of the dataview with https://github.com/elastic/kibana/issues/160425,
-   * where this value will be used to control the DatasetSelector selection with a top level state machine.
-   */
-  const [datasetSelection, setDatasetSelection] = useState<DatasetSelection>(() =>
-    AllDatasetSelection.create()
+export const CustomDatasetSelector = withProviders(({ logExplorerProfileStateService }) => {
+  const { datasetSelection, handleDatasetSelectionChange } = useLogExplorerProfile(
+    logExplorerProfileStateService
   );
 
-  // Restore All dataset selection on refresh until restore from url is not available
-  React.useEffect(() => handleStreamSelection(datasetSelection), []);
-
   const {
     error: integrationsError,
     integrations,
@@ -59,17 +44,6 @@ export const CustomDatasetSelector = withProviders(({ stateContainer }) => {
     sortDatasets,
   } = useDatasetsContext();
 
-  /**
-   * TODO: this action will be abstracted into a method of a class adapter in a follow-up PR
-   * since we'll need to handle more actions from the stateContainer
-   */
-  const handleStreamSelection: DatasetSelectionChange = (nextDatasetSelection) => {
-    setDatasetSelection(nextDatasetSelection);
-    return stateContainer.actions.onCreateDefaultAdHocDataView(
-      nextDatasetSelection.toDataviewSpec()
-    );
-  };
-
   return (
     <DatasetSelector
       datasets={datasets}
@@ -85,7 +59,7 @@ export const CustomDatasetSelector = withProviders(({ stateContainer }) => {
       onIntegrationsSort={sortIntegrations}
       onIntegrationsStreamsSearch={searchIntegrationsStreams}
       onIntegrationsStreamsSort={sortIntegrationsStreams}
-      onSelectionChange={handleStreamSelection}
+      onSelectionChange={handleDatasetSelectionChange}
       onStreamsEntryClick={loadDatasets}
       onUnmanagedStreamsReload={reloadDatasets}
       onUnmanagedStreamsSearch={searchDatasets}
@@ -103,17 +77,15 @@ export type CustomDatasetSelectorBuilderProps = CustomDatasetSelectorProps & {
 
 function withProviders(Component: React.FunctionComponent<CustomDatasetSelectorProps>) {
   return function ComponentWithProviders({
-    stateContainer,
+    logExplorerProfileStateService,
     datasetsClient,
   }: CustomDatasetSelectorBuilderProps) {
     return (
-      <InternalStateProvider value={stateContainer.internalState}>
-        <IntegrationsProvider datasetsClient={datasetsClient}>
-          <DatasetsProvider datasetsClient={datasetsClient}>
-            <Component stateContainer={stateContainer} />
-          </DatasetsProvider>
-        </IntegrationsProvider>
-      </InternalStateProvider>
+      <IntegrationsProvider datasetsClient={datasetsClient}>
+        <DatasetsProvider datasetsClient={datasetsClient}>
+          <Component logExplorerProfileStateService={logExplorerProfileStateService} />
+        </DatasetsProvider>
+      </IntegrationsProvider>
     );
   };
 }

x-pack/plugins/discover_log_explorer/public/customizations/log_explorer_profile.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { CoreStart } from '@kbn/core/public';
+import type { CoreStart } from '@kbn/core/public';
 import { CustomizationCallback } from '@kbn/discover-plugin/public';
 import React from 'react';
 import { dynamic } from '../utils/dynamic';
@@ -19,11 +19,29 @@ interface CreateLogExplorerProfileCustomizationsDeps {
 export const createLogExplorerProfileCustomizations =
   ({ core }: CreateLogExplorerProfileCustomizationsDeps): CustomizationCallback =>
   async ({ customizations, stateContainer }) => {
-    const { DatasetsService } = await import('../services/datasets');
+    // Lazy load dependencies
+    const datasetServiceModuleLoadable = import('../services/datasets');
+    const logExplorerMachineModuleLoadable = import('../state_machines/log_explorer_profile');
+
+    const [{ DatasetsService }, { initializeLogExplorerProfileStateService, waitForState }] =
+      await Promise.all([datasetServiceModuleLoadable, logExplorerMachineModuleLoadable]);
+
     const datasetsService = new DatasetsService().start({
       http: core.http,
     });
 
+    const logExplorerProfileStateService = initializeLogExplorerProfileStateService({
+      stateContainer,
+      toasts: core.notifications.toasts,
+    });
+
+    //
+    /**
+     * Wait for the machine to be fully initialized to set the restored selection
+     * create the DataView and set it in the stateContainer from Discover
+     */
+    await waitForState(logExplorerProfileStateService, 'initialized');
+
     /**
      * Replace the DataViewPicker with a custom `DatasetSelector` to pick integrations streams
      */
@@ -32,7 +50,7 @@ export const createLogExplorerProfileCustomizations =
       CustomDataViewPicker: () => (
         <LazyCustomDatasetSelector
           datasetsClient={datasetsService.client}
-          stateContainer={stateContainer}
+          logExplorerProfileStateService={logExplorerProfileStateService}
         />
       ),
     });

x-pack/plugins/discover_log_explorer/public/hooks/use_log_explorer_profile.ts

@@ -0,0 +1,29 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { useSelector } from '@xstate/react';
+import { useCallback } from 'react';
+import { LogExplorerProfileStateService } from '../state_machines/log_explorer_profile';
+import { DatasetSelectionChange } from '../utils/dataset_selection';
+
+export const useLogExplorerProfile = (
+  logExplorerProfileStateService: LogExplorerProfileStateService
+) => {
+  const datasetSelection = useSelector(
+    logExplorerProfileStateService,
+    (state) => state.context.datasetSelection
+  );
+
+  const handleDatasetSelectionChange: DatasetSelectionChange = useCallback(
+    (data) => {
+      logExplorerProfileStateService.send({ type: 'UPDATE_DATASET_SELECTION', data });
+    },
+    [logExplorerProfileStateService]
+  );
+
+  return { datasetSelection, handleDatasetSelectionChange };
+};

x-pack/plugins/discover_log_explorer/public/state_machines/log_explorer_profile/index.ts

@@ -0,0 +1,8 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export * from './src';