[Search Session] Revamp search session indicator UI and tour.

src/plugins/dashboard/public/application/dashboard_app.tsx

@@ -192,7 +192,6 @@ export function DashboardApp({
 
     subscriptions.add(
       merge(
-        data.search.session.onRefresh$,
         data.query.timefilter.timefilter.getAutoRefreshFetch$(),
         searchSessionIdQuery$
       ).subscribe(() => {

src/plugins/data/public/search/session/mocks.ts

@@ -6,7 +6,7 @@
  * Public License, v 1.
  */
 
-import { BehaviorSubject, Subject } from 'rxjs';
+import { BehaviorSubject } from 'rxjs';
 import { ISessionsClient } from './sessions_client';
 import { ISessionService } from './session_service';
 import { SearchSessionState } from './search_session_state';
@@ -31,8 +31,6 @@ export function getSessionServiceMock(): jest.Mocked<ISessionService> {
     state$: new BehaviorSubject<SearchSessionState>(SearchSessionState.None).asObservable(),
     trackSearch: jest.fn((searchDescriptor) => () => {}),
     destroy: jest.fn(),
-    onRefresh$: new Subject(),
-    refresh: jest.fn(),
     cancel: jest.fn(),
     isStored: jest.fn(),
     isRestore: jest.fn(),

src/plugins/data/public/search/session/session_service.ts

@@ -8,7 +8,7 @@
 
 import { PublicContract } from '@kbn/utility-types';
 import { distinctUntilChanged, map, startWith } from 'rxjs/operators';
-import { Observable, Subject, Subscription } from 'rxjs';
+import { Observable, Subscription } from 'rxjs';
 import { PluginInitializerContext, StartServicesAccessor } from 'kibana/public';
 import { UrlGeneratorId, UrlGeneratorStateMapping } from '../../../../share/public/';
 import { ConfigSchema } from '../../../config';
@@ -193,21 +193,6 @@ export class SessionService {
     this.searchSessionIndicatorUiConfig = undefined;
   }
 
-  private refresh$ = new Subject<void>();
-  /**
-   * Observable emits when search result refresh was requested
-   * For example, the UI could have it's own "refresh" button
-   * Application would use this observable to handle user interaction on that button
-   */
-  public onRefresh$ = this.refresh$.asObservable();
-
-  /**
-   * Request a search results refresh
-   */
-  public refresh() {
-    this.refresh$.next();
-  }
-
   /**
    * Request a cancellation of on-going search requests within current session
    */

src/plugins/discover/public/application/angular/discover.js

@@ -513,13 +513,6 @@ function discoverController($route, $scope, Promise) {
         )
       );
 
-      subscriptions.add(
-        data.search.session.onRefresh$.subscribe(() => {
-          searchSessionManager.removeSearchSessionIdFromURL({ replace: false });
-          refetch$.next();
-        })
-      );
-
       $scope.changeInterval = (interval) => {
         if (interval) {
           setAppState({ interval });

x-pack/plugins/data_enhanced/public/plugin.ts

@@ -18,6 +18,7 @@ import { registerSearchSessionsMgmt } from './search/sessions_mgmt';
 import { toMountPoint } from '../../../../src/plugins/kibana_react/public';
 import { createConnectedSearchSessionIndicator } from './search';
 import { ConfigSchema } from '../config';
+import { Storage } from '../../../../src/plugins/kibana_utils/public';
 
 export interface DataEnhancedSetupDependencies {
   bfetch: BfetchPublicSetup;
@@ -36,6 +37,7 @@ export class DataEnhancedPlugin
   implements Plugin<void, void, DataEnhancedSetupDependencies, DataEnhancedStartDependencies> {
   private enhancedSearchInterceptor!: EnhancedSearchInterceptor;
   private config!: ConfigSchema;
+  private readonly storage = new Storage(window.localStorage);
 
   constructor(private initializerContext: PluginInitializerContext<ConfigSchema>) {}
 
@@ -82,6 +84,7 @@ export class DataEnhancedPlugin
               sessionService: plugins.data.search.session,
               application: core.application,
               timeFilter: plugins.data.query.timefilter.timefilter,
+              storage: this.storage,
             })
           )
         ),

x-pack/plugins/data_enhanced/public/search/ui/connected_search_session_indicator/connected_search_session_indicator.test.tsx

@@ -5,7 +5,9 @@
  */
 
 import React from 'react';
+import { StubBrowserStorage } from '@kbn/test/jest';
 import { render, waitFor, screen, act } from '@testing-library/react';
+import { Storage } from '../../../../../../../src/plugins/kibana_utils/public/';
 import { dataPluginMock } from '../../../../../../../src/plugins/data/public/mocks';
 import { createConnectedSearchSessionIndicator } from './connected_search_session_indicator';
 import { BehaviorSubject } from 'rxjs';
@@ -16,17 +18,19 @@ import {
   TimefilterContract,
 } from '../../../../../../../src/plugins/data/public';
 import { coreMock } from '../../../../../../../src/core/public/mocks';
+import { TOUR_RESTORE_STEP_KEY, TOUR_TAKING_TOO_LONG_STEP_KEY } from './search_session_tour';
 
 const coreStart = coreMock.createStart();
 const dataStart = dataPluginMock.createStartContract();
 const sessionService = dataStart.search.session as jest.Mocked<ISessionService>;
-
+let storage: Storage;
 const refreshInterval$ = new BehaviorSubject<RefreshInterval>({ value: 0, pause: true });
 const timeFilter = dataStart.query.timefilter.timefilter as jest.Mocked<TimefilterContract>;
 timeFilter.getRefreshIntervalUpdate$.mockImplementation(() => refreshInterval$);
 timeFilter.getRefreshInterval.mockImplementation(() => refreshInterval$.getValue());
 
 beforeEach(() => {
+  storage = new Storage(new StubBrowserStorage());
   refreshInterval$.next({ value: 0, pause: true });
   sessionService.isSessionStorageReady.mockImplementation(() => true);
   sessionService.getSearchSessionIndicatorUiConfig.mockImplementation(() => ({
@@ -41,6 +45,7 @@ test("shouldn't show indicator in case no active search session", async () => {
     sessionService,
     application: coreStart.application,
     timeFilter,
+    storage,
   });
   const { getByTestId, container } = render(<SearchSessionIndicator />);
 
@@ -56,6 +61,7 @@ test("shouldn't show indicator in case app hasn't opt-in", async () => {
     sessionService,
     application: coreStart.application,
     timeFilter,
+    storage,
   });
   const { getByTestId, container } = render(<SearchSessionIndicator />);
   sessionService.isSessionStorageReady.mockImplementation(() => false);
@@ -73,6 +79,7 @@ test('should show indicator in case there is an active search session', async ()
     sessionService: { ...sessionService, state$ },
     application: coreStart.application,
     timeFilter,
+    storage,
   });
   const { getByTestId } = render(<SearchSessionIndicator />);
 
@@ -97,6 +104,7 @@ test('should be disabled in case uiConfig says so ', async () => {
     sessionService: { ...sessionService, state$ },
     application: coreStart.application,
     timeFilter,
+    storage,
   });
 
   render(<SearchSessionIndicator />);
@@ -113,6 +121,7 @@ test('should be disabled during auto-refresh', async () => {
     sessionService: { ...sessionService, state$ },
     application: coreStart.application,
     timeFilter,
+    storage,
   });
 
   render(<SearchSessionIndicator />);
@@ -127,3 +136,107 @@ test('should be disabled during auto-refresh', async () => {
 
   expect(screen.getByTestId('searchSessionIndicator').querySelector('button')).toBeDisabled();
 });
+
+describe('tour steps', () => {
+  describe('loading state', () => {
+    beforeAll(() => {
+      jest.useFakeTimers();
+    });
+
+    afterAll(() => {
+      jest.useRealTimers();
+    });
+
+    test('shows tour step on slow loading with delay', async () => {
+      const state$ = new BehaviorSubject(SearchSessionState.Loading);
+      const SearchSessionIndicator = createConnectedSearchSessionIndicator({
+        sessionService: { ...sessionService, state$ },
+        application: coreStart.application,
+        timeFilter,
+        storage,
+      });
+      const rendered = render(<SearchSessionIndicator />);
+
+      await waitFor(() => rendered.getByTestId('searchSessionIndicator'));
+
+      expect(() => screen.getByTestId('searchSessionIndicatorPopoverContainer')).toThrow();
+
+      act(() => {
+        jest.advanceTimersByTime(10001);
+      });
+
+      expect(screen.getByTestId('searchSessionIndicatorPopoverContainer')).toBeInTheDocument();
+
+      act(() => {
+        jest.advanceTimersByTime(5000);
+        state$.next(SearchSessionState.Completed);
+      });
+
+      // Open tour should stay on screen after state change
+      expect(screen.getByTestId('searchSessionIndicatorPopoverContainer')).toBeInTheDocument();
+
+      expect(storage.get(TOUR_RESTORE_STEP_KEY)).toBeFalsy();
+      expect(storage.get(TOUR_TAKING_TOO_LONG_STEP_KEY)).toBeTruthy();
+    });
+
+    test("doesn't show tour step if state changed before delay", async () => {
+      const state$ = new BehaviorSubject(SearchSessionState.Loading);
+      const SearchSessionIndicator = createConnectedSearchSessionIndicator({
+        sessionService: { ...sessionService, state$ },
+        application: coreStart.application,
+        timeFilter,
+        storage,
+      });
+      const rendered = render(<SearchSessionIndicator />);
+
+      const searchSessionIndicator = await rendered.findByTestId('searchSessionIndicator');
+      expect(searchSessionIndicator).toBeTruthy();
+
+      act(() => {
+        jest.advanceTimersByTime(3000);
+        state$.next(SearchSessionState.Completed);
+        jest.advanceTimersByTime(3000);
+      });
+
+      expect(rendered.queryByTestId('searchSessionIndicatorPopoverContainer')).toBeFalsy();
+
+      expect(storage.get(TOUR_RESTORE_STEP_KEY)).toBeFalsy();
+      expect(storage.get(TOUR_TAKING_TOO_LONG_STEP_KEY)).toBeFalsy();
+    });
+  });
+
+  test('shows tour step for restored', async () => {
+    const state$ = new BehaviorSubject(SearchSessionState.Restored);
+    const SearchSessionIndicator = createConnectedSearchSessionIndicator({
+      sessionService: { ...sessionService, state$ },
+      application: coreStart.application,
+      timeFilter,
+      storage,
+    });
+    const rendered = render(<SearchSessionIndicator />);
+
+    await waitFor(() => rendered.getByTestId('searchSessionIndicator'));
+    expect(screen.getByTestId('searchSessionIndicatorPopoverContainer')).toBeInTheDocument();
+
+    expect(storage.get(TOUR_RESTORE_STEP_KEY)).toBeTruthy();
+    expect(storage.get(TOUR_TAKING_TOO_LONG_STEP_KEY)).toBeTruthy();
+  });
+
+  test("doesn't show tour for irrelevant state", async () => {
+    const state$ = new BehaviorSubject(SearchSessionState.Completed);
+    const SearchSessionIndicator = createConnectedSearchSessionIndicator({
+      sessionService: { ...sessionService, state$ },
+      application: coreStart.application,
+      timeFilter,
+      storage,
+    });
+    const rendered = render(<SearchSessionIndicator />);
+
+    await waitFor(() => rendered.getByTestId('searchSessionIndicator'));
+
+    expect(rendered.queryByTestId('searchSessionIndicatorPopoverContainer')).toBeFalsy();
+
+    expect(storage.get(TOUR_RESTORE_STEP_KEY)).toBeFalsy();
+    expect(storage.get(TOUR_TAKING_TOO_LONG_STEP_KEY)).toBeFalsy();
+  });
+});

x-pack/plugins/data_enhanced/public/search/ui/connected_search_session_indicator/connected_search_session_indicator.tsx

@@ -4,33 +4,47 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
-import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';
+import React, { useRef } from 'react';
+import { debounce, distinctUntilChanged, map } from 'rxjs/operators';
+import { timer } from 'rxjs';
 import useObservable from 'react-use/lib/useObservable';
 import { i18n } from '@kbn/i18n';
-import { SearchSessionIndicator } from '../search_session_indicator';
-import { ISessionService, TimefilterContract } from '../../../../../../../src/plugins/data/public/';
+import { SearchSessionIndicator, SearchSessionIndicatorRef } from '../search_session_indicator';
+import {
+  ISessionService,
+  SearchSessionState,
+  TimefilterContract,
+} from '../../../../../../../src/plugins/data/public/';
 import { RedirectAppLinks } from '../../../../../../../src/plugins/kibana_react/public';
 import { ApplicationStart } from '../../../../../../../src/core/public';
+import { IStorageWrapper } from '../../../../../../../src/plugins/kibana_utils/public';
+import { useSearchSessionTour } from './search_session_tour';
 
 export interface SearchSessionIndicatorDeps {
   sessionService: ISessionService;
   timeFilter: TimefilterContract;
   application: ApplicationStart;
+  storage: IStorageWrapper;
 }
 
 export const createConnectedSearchSessionIndicator = ({
   sessionService,
   application,
   timeFilter,
+  storage,
 }: SearchSessionIndicatorDeps): React.FC => {
   const isAutoRefreshEnabled = () => !timeFilter.getRefreshInterval().pause;
   const isAutoRefreshEnabled$ = timeFilter
     .getRefreshIntervalUpdate$()
     .pipe(map(isAutoRefreshEnabled), distinctUntilChanged());
 
+  const debouncedSessionServiceState$ = sessionService.state$.pipe(
+    debounce((_state) => timer(_state === SearchSessionState.None ? 50 : 300)) // switch to None faster to quickly remove indicator when navigating away
+  );
+
   return () => {
-    const state = useObservable(sessionService.state$.pipe(debounceTime(500)));
+    const ref = useRef<SearchSessionIndicatorRef>(null);
+    const state = useObservable(debouncedSessionServiceState$, SearchSessionState.None);
     const autoRefreshEnabled = useObservable(isAutoRefreshEnabled$, isAutoRefreshEnabled());
     const isDisabledByApp = sessionService.getSearchSessionIndicatorUiConfig().isDisabled();
 
@@ -42,36 +56,47 @@ export const createConnectedSearchSessionIndicator = ({
       disabledReasonText = i18n.translate(
         'xpack.data.searchSessionIndicator.disabledDueToAutoRefreshMessage',
         {
-          defaultMessage: 'Send to background is not available when auto refresh is enabled.',
+          defaultMessage: 'Search sessions are not available when auto refresh is enabled.',
         }
       );
     }
 
+    const { markOpenedDone, markRestoredDone } = useSearchSessionTour(
+      storage,
+      ref,
+      state,
+      disabled
+    );
+
     if (isDisabledByApp.disabled) {
       disabled = true;
       disabledReasonText = isDisabledByApp.reasonText;
     }
 
     if (!sessionService.isSessionStorageReady()) return null;
-    if (!state) return null;
+    if (state === SearchSessionState.None) return null;
     return (
       <RedirectAppLinks application={application}>
         <SearchSessionIndicator
+          ref={ref}
           state={state}
           onContinueInBackground={() => {
             sessionService.save();
           }}
           onSaveResults={() => {
             sessionService.save();
           }}
-          onRefresh={() => {
-            sessionService.refresh();
-          }}
           onCancel={() => {
             sessionService.cancel();
           }}
           disabled={disabled}
           disabledReasonText={disabledReasonText}
+          onOpened={(openedState) => {
+            markOpenedDone();
+            if (openedState === SearchSessionState.Restored) {
+              markRestoredDone();
+            }
+          }}
         />
       </RedirectAppLinks>
     );