[Search] Send to background UI (#81793) (#83415)

Also adds xpack.data_enhanced.search.sendToBackground.enabled config option

src/dev/storybook/aliases.ts

@@ -22,6 +22,7 @@ export const storybookAliases = {
   canvas: 'x-pack/plugins/canvas/storybook',
   codeeditor: 'src/plugins/kibana_react/public/code_editor/.storybook',
   dashboard_enhanced: 'x-pack/plugins/dashboard_enhanced/.storybook',
+  data_enhanced: 'x-pack/plugins/data_enhanced/.storybook',
   embeddable: 'src/plugins/embeddable/.storybook',
   infra: 'x-pack/plugins/infra/.storybook',
   security_solution: 'x-pack/plugins/security_solution/.storybook',

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

@@ -17,6 +17,7 @@
  * under the License.
  */
 
+import { BehaviorSubject } from 'rxjs';
 import { ISessionService } from './types';
 
 export function getSessionServiceMock(): jest.Mocked<ISessionService> {
@@ -25,6 +26,6 @@ export function getSessionServiceMock(): jest.Mocked<ISessionService> {
     start: jest.fn(),
     restore: jest.fn(),
     getSessionId: jest.fn(),
-    getSession$: jest.fn(),
+    getSession$: jest.fn(() => new BehaviorSubject(undefined).asObservable()),
   };
 }

x-pack/plugins/data_enhanced/.storybook/main.js

@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+module.exports = require('@kbn/storybook').defaultConfig;

x-pack/plugins/data_enhanced/config.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { schema, TypeOf } from '@kbn/config-schema';
+
+export const configSchema = schema.object({
+  search: schema.object({
+    sendToBackground: schema.object({
+      enabled: schema.boolean({ defaultValue: false }),
+    }),
+  }),
+});
+
+export type ConfigSchema = TypeOf<typeof configSchema>;

x-pack/plugins/data_enhanced/kibana.json

@@ -12,5 +12,5 @@
   "optionalPlugins": ["kibanaUtils", "usageCollection"],
   "server": true,
   "ui": true,
-  "requiredBundles": ["kibanaUtils"]
+  "requiredBundles": ["kibanaUtils", "kibanaReact"]
 }

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

@@ -4,9 +4,12 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { PluginInitializerContext } from 'kibana/public';
 import { DataEnhancedPlugin, DataEnhancedSetup, DataEnhancedStart } from './plugin';
+import { ConfigSchema } from '../config';
 
-export const plugin = () => new DataEnhancedPlugin();
+export const plugin = (initializerContext: PluginInitializerContext<ConfigSchema>) =>
+  new DataEnhancedPlugin(initializerContext);
 
 export { DataEnhancedSetup, DataEnhancedStart };
 

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

@@ -4,12 +4,16 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { CoreSetup, CoreStart, Plugin } from 'src/core/public';
+import React from 'react';
+import { CoreSetup, CoreStart, Plugin, PluginInitializerContext } from 'src/core/public';
 import { DataPublicPluginSetup, DataPublicPluginStart } from '../../../../src/plugins/data/public';
+
 import { setAutocompleteService } from './services';
 import { setupKqlQuerySuggestionProvider, KUERY_LANGUAGE_NAME } from './autocomplete';
-
 import { EnhancedSearchInterceptor } from './search/search_interceptor';
+import { toMountPoint } from '../../../../src/plugins/kibana_react/public';
+import { createConnectedBackgroundSessionIndicator } from './search';
+import { ConfigSchema } from '../config';
 
 export interface DataEnhancedSetupDependencies {
   data: DataPublicPluginSetup;
@@ -25,6 +29,8 @@ export class DataEnhancedPlugin
   implements Plugin<void, void, DataEnhancedSetupDependencies, DataEnhancedStartDependencies> {
   private enhancedSearchInterceptor!: EnhancedSearchInterceptor;
 
+  constructor(private initializerContext: PluginInitializerContext<ConfigSchema>) {}
+
   public setup(
     core: CoreSetup<DataEnhancedStartDependencies>,
     { data }: DataEnhancedSetupDependencies
@@ -52,6 +58,18 @@ export class DataEnhancedPlugin
 
   public start(core: CoreStart, plugins: DataEnhancedStartDependencies) {
     setAutocompleteService(plugins.data.autocomplete);
+
+    if (this.initializerContext.config.get().search.sendToBackground.enabled) {
+      core.chrome.setBreadcrumbsAppendExtension({
+        content: toMountPoint(
+          React.createElement(
+            createConnectedBackgroundSessionIndicator({
+              sessionService: plugins.data.search.session,
+            })
+          )
+        ),
+      });
+    }
   }
 
   public stop() {

x-pack/plugins/data_enhanced/public/search/index.ts

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

x-pack/plugins/data_enhanced/public/search/ui/background_session_indicator/background_session_indicator.scss

@@ -0,0 +1,23 @@
+.backgroundSessionIndicator {
+  padding: 0 $euiSizeXS;
+}
+
+@include euiBreakpoint('xs', 's') {
+  .backgroundSessionIndicator__popoverContainer.euiFlexGroup--responsive .euiFlexItem {
+    margin-bottom: $euiSizeXS !important;
+  }
+}
+
+.backgroundSessionIndicator__verticalDivider {
+  @include euiBreakpoint('xs', 's') {
+    margin-left: $euiSizeXS;
+    padding-left: $euiSizeXS;
+  }
+
+  @include euiBreakpoint('m', 'l', 'xl') {
+    border-left: $euiBorderThin;
+    align-self: stretch;
+    margin-left: $euiSizeS;
+    padding-left: $euiSizeS;
+  }
+}

x-pack/plugins/data_enhanced/public/search/ui/background_session_indicator/background_session_indicator.stories.tsx

@@ -0,0 +1,30 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { BackgroundSessionIndicator } from './background_session_indicator';
+import { BackgroundSessionViewState } from '../connected_background_session_indicator';
+
+storiesOf('components/BackgroundSessionIndicator', module).add('default', () => (
+  <>
+    <div>
+      <BackgroundSessionIndicator state={BackgroundSessionViewState.Loading} />
+    </div>
+    <div>
+      <BackgroundSessionIndicator state={BackgroundSessionViewState.Completed} />
+    </div>
+    <div>
+      <BackgroundSessionIndicator state={BackgroundSessionViewState.BackgroundLoading} />
+    </div>
+    <div>
+      <BackgroundSessionIndicator state={BackgroundSessionViewState.BackgroundCompleted} />
+    </div>
+    <div>
+      <BackgroundSessionIndicator state={BackgroundSessionViewState.Restored} />
+    </div>
+  </>
+));

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

@@ -0,0 +1,98 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { ReactNode } from 'react';
+import { screen, render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { BackgroundSessionIndicator } from './background_session_indicator';
+import { BackgroundSessionViewState } from '../connected_background_session_indicator';
+import { IntlProvider } from 'react-intl';
+
+function Container({ children }: { children?: ReactNode }) {
+  return <IntlProvider locale="en">{children}</IntlProvider>;
+}
+
+test('Loading state', async () => {
+  const onCancel = jest.fn();
+  render(
+    <Container>
+      <BackgroundSessionIndicator state={BackgroundSessionViewState.Loading} onCancel={onCancel} />
+    </Container>
+  );
+
+  await userEvent.click(screen.getByLabelText('Loading results'));
+  await userEvent.click(screen.getByText('Cancel'));
+
+  expect(onCancel).toBeCalled();
+});
+
+test('Completed state', async () => {
+  const onSave = jest.fn();
+  render(
+    <Container>
+      <BackgroundSessionIndicator
+        state={BackgroundSessionViewState.Completed}
+        onSaveResults={onSave}
+      />
+    </Container>
+  );
+
+  await userEvent.click(screen.getByLabelText('Results loaded'));
+  await userEvent.click(screen.getByText('Save'));
+
+  expect(onSave).toBeCalled();
+});
+
+test('Loading in the background state', async () => {
+  const onCancel = jest.fn();
+  render(
+    <Container>
+      <BackgroundSessionIndicator
+        state={BackgroundSessionViewState.BackgroundLoading}
+        onCancel={onCancel}
+      />
+    </Container>
+  );
+
+  await userEvent.click(screen.getByLabelText('Loading results in the background'));
+  await userEvent.click(screen.getByText('Cancel'));
+
+  expect(onCancel).toBeCalled();
+});
+
+test('BackgroundCompleted state', async () => {
+  const onViewSession = jest.fn();
+  render(
+    <Container>
+      <BackgroundSessionIndicator
+        state={BackgroundSessionViewState.BackgroundCompleted}
+        onViewBackgroundSessions={onViewSession}
+      />
+    </Container>
+  );
+
+  await userEvent.click(screen.getByLabelText('Results loaded in the background'));
+  await userEvent.click(screen.getByText('View background sessions'));
+
+  expect(onViewSession).toBeCalled();
+});
+
+test('Restored state', async () => {
+  const onRefresh = jest.fn();
+  render(
+    <Container>
+      <BackgroundSessionIndicator
+        state={BackgroundSessionViewState.Restored}
+        onRefresh={onRefresh}
+      />
+    </Container>
+  );
+
+  await userEvent.click(screen.getByLabelText('Results no longer current'));
+  await userEvent.click(screen.getByText('Refresh'));
+
+  expect(onRefresh).toBeCalled();
+});