From 2b1274b773ee3b975bcc55cf2f191c8f886d8b18 Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Mon, 2 Nov 2020 15:51:26 +0100
Subject: [PATCH 01/12] send to background UI

---
 src/dev/storybook/aliases.ts                  |   1 +
 .../plugins/data_enhanced/.storybook/main.js  |   7 +
 x-pack/plugins/data_enhanced/kibana.json      |   2 +-
 x-pack/plugins/data_enhanced/public/plugin.ts |  13 +-
 .../background_session_indicator.stories.tsx  |  30 +++
 .../background_session_indicator.tsx          | 188 ++++++++++++++++++
 .../ui/background_session_indicator/index.tsx |  23 +++
 .../public/ui/background_session_state.ts     |  33 +++
 ...connected_background_session_indicator.tsx |  32 +++
 9 files changed, 327 insertions(+), 2 deletions(-)
 create mode 100644 x-pack/plugins/data_enhanced/.storybook/main.js
 create mode 100644 x-pack/plugins/data_enhanced/public/ui/background_session_indicator/background_session_indicator.stories.tsx
 create mode 100644 x-pack/plugins/data_enhanced/public/ui/background_session_indicator/background_session_indicator.tsx
 create mode 100644 x-pack/plugins/data_enhanced/public/ui/background_session_indicator/index.tsx
 create mode 100644 x-pack/plugins/data_enhanced/public/ui/background_session_state.ts
 create mode 100644 x-pack/plugins/data_enhanced/public/ui/connected_background_session_indicator.tsx

diff --git a/src/dev/storybook/aliases.ts b/src/dev/storybook/aliases.ts
index 153725fc48e7b4..36c742dc40403c 100644
--- a/src/dev/storybook/aliases.ts
+++ b/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',
diff --git a/x-pack/plugins/data_enhanced/.storybook/main.js b/x-pack/plugins/data_enhanced/.storybook/main.js
new file mode 100644
index 00000000000000..1818aa44a93993
--- /dev/null
+++ b/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;
diff --git a/x-pack/plugins/data_enhanced/kibana.json b/x-pack/plugins/data_enhanced/kibana.json
index 5ded0f8f0dec3a..bc7c8410d3df10 100644
--- a/x-pack/plugins/data_enhanced/kibana.json
+++ b/x-pack/plugins/data_enhanced/kibana.json
@@ -12,5 +12,5 @@
   "optionalPlugins": ["kibanaUtils", "usageCollection"],
   "server": true,
   "ui": true,
-  "requiredBundles": ["kibanaUtils"]
+  "requiredBundles": ["kibanaUtils", "kibanaReact"]
 }
diff --git a/x-pack/plugins/data_enhanced/public/plugin.ts b/x-pack/plugins/data_enhanced/public/plugin.ts
index 43ad4a9ed9b8b3..93564373f6fce5 100644
--- a/x-pack/plugins/data_enhanced/public/plugin.ts
+++ b/x-pack/plugins/data_enhanced/public/plugin.ts
@@ -4,12 +4,15 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import React from 'react';
 import { CoreSetup, CoreStart, Plugin } from 'src/core/public';
 import { DataPublicPluginSetup, DataPublicPluginStart } from '../../../../src/plugins/data/public';
 import { setAutocompleteService } from './services';
-import { setupKqlQuerySuggestionProvider, KUERY_LANGUAGE_NAME } from './autocomplete';
 
+import { setupKqlQuerySuggestionProvider, KUERY_LANGUAGE_NAME } from './autocomplete';
 import { EnhancedSearchInterceptor } from './search/search_interceptor';
+import { toMountPoint } from '../../../../src/plugins/kibana_react/public';
+import { createConnectedBackgroundSessionIndicator } from './ui/connected_background_session_indicator';
 
 export interface DataEnhancedSetupDependencies {
   data: DataPublicPluginSetup;
@@ -52,6 +55,14 @@ export class DataEnhancedPlugin
 
   public start(core: CoreStart, plugins: DataEnhancedStartDependencies) {
     setAutocompleteService(plugins.data.autocomplete);
+
+    core.chrome.setBreadcrumbsAppendExtension({
+      content: toMountPoint(
+        React.createElement(
+          createConnectedBackgroundSessionIndicator({ sessionService: plugins.data.search.session })
+        )
+      ),
+    });
   }
 
   public stop() {
diff --git a/x-pack/plugins/data_enhanced/public/ui/background_session_indicator/background_session_indicator.stories.tsx b/x-pack/plugins/data_enhanced/public/ui/background_session_indicator/background_session_indicator.stories.tsx
new file mode 100644
index 00000000000000..c94df39793547e
--- /dev/null
+++ b/x-pack/plugins/data_enhanced/public/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 '../background_session_state';
+
+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>
+  </>
+));
diff --git a/x-pack/plugins/data_enhanced/public/ui/background_session_indicator/background_session_indicator.tsx b/x-pack/plugins/data_enhanced/public/ui/background_session_indicator/background_session_indicator.tsx
new file mode 100644
index 00000000000000..66940ded77096c
--- /dev/null
+++ b/x-pack/plugins/data_enhanced/public/ui/background_session_indicator/background_session_indicator.tsx
@@ -0,0 +1,188 @@
+/*
+ * 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 {
+  EuiButtonEmpty,
+  EuiButtonIcon,
+  EuiButtonIconProps,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiLoadingSpinner,
+  EuiPopover,
+  EuiText,
+  EuiToolTip,
+} from '@elastic/eui';
+import { BackgroundSessionViewState } from '../background_session_state';
+
+export interface BackgroundSessionIndicatorProps {
+  state: BackgroundSessionViewState;
+  onContinueInBackground?: () => {};
+  onStopLoading?: () => {};
+  onViewBackgroundRequests?: () => {};
+  onSaveResults?: () => {};
+  onReload?: () => {};
+}
+
+const backgroundSessionIndicatorViewStateToProps: {
+  [state in BackgroundSessionViewState]: {
+    button: Pick<EuiButtonIconProps, 'color' | 'iconType' | 'aria-label'> & { tooltipText: string };
+    popover: {
+      text: string;
+      buttons: Array<React.ComponentType<BackgroundSessionIndicatorProps>>;
+    };
+  };
+} = {
+  [BackgroundSessionViewState.Loading]: {
+    button: {
+      color: 'subdued',
+      iconType: 'clock',
+      'aria-label': 'Loading results...',
+      tooltipText: 'Loading results',
+    },
+    popover: {
+      text: 'Loading',
+      buttons: [
+        ({ onStopLoading = () => {} }) => (
+          <EuiButtonEmpty size="xs" onClick={onStopLoading} iconType={'cross'} flush={'both'}>
+            Cancel
+          </EuiButtonEmpty>
+        ),
+        ({ onContinueInBackground = () => {} }) => (
+          <EuiButtonEmpty size="xs" onClick={onContinueInBackground} flush={'both'}>
+            Continue in background
+          </EuiButtonEmpty>
+        ),
+      ],
+    },
+  },
+  [BackgroundSessionViewState.Completed]: {
+    button: {
+      color: 'subdued',
+      iconType: 'checkInCircleFilled',
+      'aria-label': 'Results loaded',
+      tooltipText: 'Results loaded',
+    },
+    popover: {
+      text: 'Results loaded',
+      buttons: [
+        ({ onSaveResults = () => {} }) => (
+          <EuiButtonEmpty size="xs" onClick={onSaveResults} flush={'both'}>
+            Save results
+          </EuiButtonEmpty>
+        ),
+        ({ onViewBackgroundRequests = () => {} }) => (
+          // TODO: make this a link
+          <EuiButtonEmpty size="xs" onClick={onViewBackgroundRequests} flush={'both'}>
+            View requests
+          </EuiButtonEmpty>
+        ),
+      ],
+    },
+  },
+  [BackgroundSessionViewState.BackgroundLoading]: {
+    button: {
+      iconType: EuiLoadingSpinner,
+      'aria-label': 'Loading results in the background',
+      tooltipText: 'Loading results in the background',
+    },
+    popover: {
+      text: 'Loading in the background',
+      buttons: [
+        ({ onStopLoading = () => {} }) => (
+          <EuiButtonEmpty size="xs" onClick={onStopLoading} iconType={'cross'} flush={'both'}>
+            Cancel
+          </EuiButtonEmpty>
+        ),
+        ({ onViewBackgroundRequests = () => {} }) => (
+          <EuiButtonEmpty size="xs" onClick={onViewBackgroundRequests} flush={'both'}>
+            View requests
+          </EuiButtonEmpty>
+        ),
+      ],
+    },
+  },
+  [BackgroundSessionViewState.BackgroundCompleted]: {
+    button: {
+      color: 'success',
+      iconType: 'checkInCircleFilled',
+      'aria-label': 'Results loaded in the background',
+      tooltipText: 'Results loaded in the background',
+    },
+    popover: {
+      text: 'Loaded in the background',
+      buttons: [
+        ({ onViewBackgroundRequests = () => {} }) => (
+          <EuiButtonEmpty size="xs" onClick={onViewBackgroundRequests} flush={'both'}>
+            View background requests
+          </EuiButtonEmpty>
+        ),
+      ],
+    },
+  },
+  [BackgroundSessionViewState.Restored]: {
+    button: {
+      color: 'warning',
+      iconType: 'refresh',
+      'aria-label': 'Restored older results. The data is not current.',
+      tooltipText: 'Restored older results. The data is not current.',
+    },
+    popover: {
+      text: 'The data is not current',
+      buttons: [
+        ({ onReload = () => {} }) => (
+          <EuiButtonEmpty size="xs" onClick={onReload} iconType={'refresh'} flush={'both'}>
+            Reload
+          </EuiButtonEmpty>
+        ),
+      ],
+    },
+  },
+};
+
+export const BackgroundSessionIndicator: React.FC<BackgroundSessionIndicatorProps> = (props) => {
+  const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
+  const onButtonClick = () => setIsPopoverOpen((isOpen) => !isOpen);
+  const closePopover = () => setIsPopoverOpen(false);
+
+  const { button, popover } = backgroundSessionIndicatorViewStateToProps[props.state];
+
+  return (
+    <EuiPopover
+      ownFocus
+      isOpen={isPopoverOpen}
+      closePopover={closePopover}
+      anchorPosition={'leftCenter'}
+      button={
+        <EuiToolTip content={button.tooltipText}>
+          <EuiButtonIcon
+            color={button.color}
+            aria-label={button['aria-label']}
+            iconType={button.iconType}
+            onClick={onButtonClick}
+          />
+        </EuiToolTip>
+      }
+    >
+      <EuiFlexGroup responsive={false} alignItems={'center'} gutterSize={'s'}>
+        <EuiFlexItem grow={true} style={{ marginRight: '12px' }}>
+          <EuiText size="s" color={'subdued'}>
+            <p>{popover.text}</p>
+          </EuiText>
+        </EuiFlexItem>
+        {popover.buttons.map((Button, index) => (
+          <EuiFlexItem key={props.state + index} grow={false}>
+            <Button {...props} />
+          </EuiFlexItem>
+        ))}
+      </EuiFlexGroup>
+    </EuiPopover>
+  );
+};
+
+// React.lazy() needs default:
+// eslint-disable-next-line import/no-default-export
+export default BackgroundSessionIndicator;
diff --git a/x-pack/plugins/data_enhanced/public/ui/background_session_indicator/index.tsx b/x-pack/plugins/data_enhanced/public/ui/background_session_indicator/index.tsx
new file mode 100644
index 00000000000000..2346d3343f1146
--- /dev/null
+++ b/x-pack/plugins/data_enhanced/public/ui/background_session_indicator/index.tsx
@@ -0,0 +1,23 @@
+/*
+ * 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 { EuiDelayRender, EuiLoadingSpinner } from '@elastic/eui';
+import React from 'react';
+import type { BackgroundSessionIndicatorProps } from './background_session_indicator';
+export type { BackgroundSessionIndicatorProps };
+
+const Fallback = () => (
+  <EuiDelayRender>
+    <EuiLoadingSpinner />
+  </EuiDelayRender>
+);
+
+const LazyBackgroundSearchIndicator = React.lazy(() => import('./background_session_indicator'));
+export const BackgroundSearchIndicator = (props: BackgroundSessionIndicatorProps) => (
+  <React.Suspense fallback={<Fallback />}>
+    <LazyBackgroundSearchIndicator {...props} />
+  </React.Suspense>
+);
diff --git a/x-pack/plugins/data_enhanced/public/ui/background_session_state.ts b/x-pack/plugins/data_enhanced/public/ui/background_session_state.ts
new file mode 100644
index 00000000000000..b75c2a536f6248
--- /dev/null
+++ b/x-pack/plugins/data_enhanced/public/ui/background_session_state.ts
@@ -0,0 +1,33 @@
+/*
+ * 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 enum BackgroundSessionViewState {
+  /**
+   * Pending search request has not been sent to the background yet
+   */
+  Loading = 'loading',
+
+  /**
+   * No action was taken and the page completed loading without background session creation.
+   */
+  Completed = 'completed',
+
+  /**
+   * Search request was sent to the background.
+   * The page is loading in background.
+   */
+  BackgroundLoading = 'backgroundLoading',
+
+  /**
+   * Page load completed with background session created.
+   */
+  BackgroundCompleted = 'backgroundCompleted',
+
+  /**
+   * Revisiting the page after background completion
+   */
+  Restored = 'restored',
+}
diff --git a/x-pack/plugins/data_enhanced/public/ui/connected_background_session_indicator.tsx b/x-pack/plugins/data_enhanced/public/ui/connected_background_session_indicator.tsx
new file mode 100644
index 00000000000000..dc9c634e041e69
--- /dev/null
+++ b/x-pack/plugins/data_enhanced/public/ui/connected_background_session_indicator.tsx
@@ -0,0 +1,32 @@
+/*
+ * 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 useObservable from 'react-use/lib/useObservable';
+import { distinctUntilChanged, map } from 'rxjs/operators';
+import { BackgroundSearchIndicator } from './background_session_indicator';
+import { DataPublicPluginStart } from '../../../../../src/plugins/data/public/';
+import { BackgroundSessionViewState } from './background_session_state';
+
+export interface BackgroundSessionIndicatorDeps {
+  sessionService: DataPublicPluginStart['search']['session'];
+}
+
+export const createConnectedBackgroundSessionIndicator = ({
+  sessionService,
+}: BackgroundSessionIndicatorDeps): React.FC => {
+  const sessionId$ = sessionService.getSession$();
+  const isSession$ = sessionId$.pipe(
+    map((sessionId) => !!sessionId),
+    distinctUntilChanged()
+  );
+
+  return () => {
+    const isSession = useObservable(isSession$, !!sessionService.getSessionId());
+    if (!isSession) return null;
+    return <BackgroundSearchIndicator state={BackgroundSessionViewState.Loading} />;
+  };
+};

From c8ea282aaf1f61b7985973136c5d9469f9c39859 Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Mon, 2 Nov 2020 15:56:02 +0100
Subject: [PATCH 02/12] reduce padding size

---
 .../background_session_indicator.tsx                             | 1 +
 1 file changed, 1 insertion(+)

diff --git a/x-pack/plugins/data_enhanced/public/ui/background_session_indicator/background_session_indicator.tsx b/x-pack/plugins/data_enhanced/public/ui/background_session_indicator/background_session_indicator.tsx
index 66940ded77096c..c272661f704bda 100644
--- a/x-pack/plugins/data_enhanced/public/ui/background_session_indicator/background_session_indicator.tsx
+++ b/x-pack/plugins/data_enhanced/public/ui/background_session_indicator/background_session_indicator.tsx
@@ -156,6 +156,7 @@ export const BackgroundSessionIndicator: React.FC<BackgroundSessionIndicatorProp
       isOpen={isPopoverOpen}
       closePopover={closePopover}
       anchorPosition={'leftCenter'}
+      panelPaddingSize={'s'}
       button={
         <EuiToolTip content={button.tooltipText}>
           <EuiButtonIcon

From 30858b641f44bfa494ee3aef030396644e2f97c4 Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Mon, 2 Nov 2020 16:07:07 +0100
Subject: [PATCH 03/12] nicer spacing

---
 .../background_session_indicator.tsx           | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/x-pack/plugins/data_enhanced/public/ui/background_session_indicator/background_session_indicator.tsx b/x-pack/plugins/data_enhanced/public/ui/background_session_indicator/background_session_indicator.tsx
index c272661f704bda..98ed10beefcd09 100644
--- a/x-pack/plugins/data_enhanced/public/ui/background_session_indicator/background_session_indicator.tsx
+++ b/x-pack/plugins/data_enhanced/public/ui/background_session_indicator/background_session_indicator.tsx
@@ -47,12 +47,12 @@ const backgroundSessionIndicatorViewStateToProps: {
       text: 'Loading',
       buttons: [
         ({ onStopLoading = () => {} }) => (
-          <EuiButtonEmpty size="xs" onClick={onStopLoading} iconType={'cross'} flush={'both'}>
+          <EuiButtonEmpty size="xs" onClick={onStopLoading} iconType={'cross'}>
             Cancel
           </EuiButtonEmpty>
         ),
         ({ onContinueInBackground = () => {} }) => (
-          <EuiButtonEmpty size="xs" onClick={onContinueInBackground} flush={'both'}>
+          <EuiButtonEmpty size="xs" onClick={onContinueInBackground}>
             Continue in background
           </EuiButtonEmpty>
         ),
@@ -70,13 +70,13 @@ const backgroundSessionIndicatorViewStateToProps: {
       text: 'Results loaded',
       buttons: [
         ({ onSaveResults = () => {} }) => (
-          <EuiButtonEmpty size="xs" onClick={onSaveResults} flush={'both'}>
+          <EuiButtonEmpty size="xs" onClick={onSaveResults}>
             Save results
           </EuiButtonEmpty>
         ),
         ({ onViewBackgroundRequests = () => {} }) => (
           // TODO: make this a link
-          <EuiButtonEmpty size="xs" onClick={onViewBackgroundRequests} flush={'both'}>
+          <EuiButtonEmpty size="xs" onClick={onViewBackgroundRequests}>
             View requests
           </EuiButtonEmpty>
         ),
@@ -93,12 +93,12 @@ const backgroundSessionIndicatorViewStateToProps: {
       text: 'Loading in the background',
       buttons: [
         ({ onStopLoading = () => {} }) => (
-          <EuiButtonEmpty size="xs" onClick={onStopLoading} iconType={'cross'} flush={'both'}>
+          <EuiButtonEmpty size="xs" onClick={onStopLoading} iconType={'cross'}>
             Cancel
           </EuiButtonEmpty>
         ),
         ({ onViewBackgroundRequests = () => {} }) => (
-          <EuiButtonEmpty size="xs" onClick={onViewBackgroundRequests} flush={'both'}>
+          <EuiButtonEmpty size="xs" onClick={onViewBackgroundRequests}>
             View requests
           </EuiButtonEmpty>
         ),
@@ -116,7 +116,7 @@ const backgroundSessionIndicatorViewStateToProps: {
       text: 'Loaded in the background',
       buttons: [
         ({ onViewBackgroundRequests = () => {} }) => (
-          <EuiButtonEmpty size="xs" onClick={onViewBackgroundRequests} flush={'both'}>
+          <EuiButtonEmpty size="xs" onClick={onViewBackgroundRequests}>
             View background requests
           </EuiButtonEmpty>
         ),
@@ -134,7 +134,7 @@ const backgroundSessionIndicatorViewStateToProps: {
       text: 'The data is not current',
       buttons: [
         ({ onReload = () => {} }) => (
-          <EuiButtonEmpty size="xs" onClick={onReload} iconType={'refresh'} flush={'both'}>
+          <EuiButtonEmpty size="xs" onClick={onReload} iconType={'refresh'}>
             Reload
           </EuiButtonEmpty>
         ),
@@ -168,7 +168,7 @@ export const BackgroundSessionIndicator: React.FC<BackgroundSessionIndicatorProp
         </EuiToolTip>
       }
     >
-      <EuiFlexGroup responsive={false} alignItems={'center'} gutterSize={'s'}>
+      <EuiFlexGroup responsive={false} alignItems={'center'} gutterSize={'none'}>
         <EuiFlexItem grow={true} style={{ marginRight: '12px' }}>
           <EuiText size="s" color={'subdued'}>
             <p>{popover.text}</p>

From f5b84a5942f94c7553f6d22319b8570733232d91 Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Mon, 9 Nov 2020 14:36:58 +0100
Subject: [PATCH 04/12] update

---
 .../background_session_indicator.tsx          | 141 ++++++++++--------
 1 file changed, 77 insertions(+), 64 deletions(-)

diff --git a/x-pack/plugins/data_enhanced/public/ui/background_session_indicator/background_session_indicator.tsx b/x-pack/plugins/data_enhanced/public/ui/background_session_indicator/background_session_indicator.tsx
index 98ed10beefcd09..e9f1626173fe01 100644
--- a/x-pack/plugins/data_enhanced/public/ui/background_session_indicator/background_session_indicator.tsx
+++ b/x-pack/plugins/data_enhanced/public/ui/background_session_indicator/background_session_indicator.tsx
@@ -7,6 +7,7 @@
 import React from 'react';
 import {
   EuiButtonEmpty,
+  EuiButtonEmptyProps,
   EuiButtonIcon,
   EuiButtonIconProps,
   EuiFlexGroup,
@@ -32,7 +33,12 @@ const backgroundSessionIndicatorViewStateToProps: {
     button: Pick<EuiButtonIconProps, 'color' | 'iconType' | 'aria-label'> & { tooltipText: string };
     popover: {
       text: string;
-      buttons: Array<React.ComponentType<BackgroundSessionIndicatorProps>>;
+      primaryAction?: React.ComponentType<
+        BackgroundSessionIndicatorProps & { buttonProps: EuiButtonEmptyProps }
+      >;
+      secondaryAction?: React.ComponentType<
+        BackgroundSessionIndicatorProps & { buttonProps: EuiButtonEmptyProps }
+      >;
     };
   };
 } = {
@@ -40,23 +46,21 @@ const backgroundSessionIndicatorViewStateToProps: {
     button: {
       color: 'subdued',
       iconType: 'clock',
-      'aria-label': 'Loading results...',
+      'aria-label': 'Loading results',
       tooltipText: 'Loading results',
     },
     popover: {
       text: 'Loading',
-      buttons: [
-        ({ onStopLoading = () => {} }) => (
-          <EuiButtonEmpty size="xs" onClick={onStopLoading} iconType={'cross'}>
-            Cancel
-          </EuiButtonEmpty>
-        ),
-        ({ onContinueInBackground = () => {} }) => (
-          <EuiButtonEmpty size="xs" onClick={onContinueInBackground}>
-            Continue in background
-          </EuiButtonEmpty>
-        ),
-      ],
+      primaryAction: ({ onStopLoading = () => {}, buttonProps = {} }) => (
+        <EuiButtonEmpty onClick={onStopLoading} {...buttonProps}>
+          Cancel
+        </EuiButtonEmpty>
+      ),
+      secondaryAction: ({ onContinueInBackground = () => {}, buttonProps = {} }) => (
+        <EuiButtonEmpty onClick={onContinueInBackground} {...buttonProps}>
+          Continue in background
+        </EuiButtonEmpty>
+      ),
     },
   },
   [BackgroundSessionViewState.Completed]: {
@@ -68,19 +72,17 @@ const backgroundSessionIndicatorViewStateToProps: {
     },
     popover: {
       text: 'Results loaded',
-      buttons: [
-        ({ onSaveResults = () => {} }) => (
-          <EuiButtonEmpty size="xs" onClick={onSaveResults}>
-            Save results
-          </EuiButtonEmpty>
-        ),
-        ({ onViewBackgroundRequests = () => {} }) => (
-          // TODO: make this a link
-          <EuiButtonEmpty size="xs" onClick={onViewBackgroundRequests}>
-            View requests
-          </EuiButtonEmpty>
-        ),
-      ],
+      primaryAction: ({ onSaveResults = () => {}, buttonProps = {} }) => (
+        <EuiButtonEmpty onClick={onSaveResults} {...buttonProps}>
+          Save
+        </EuiButtonEmpty>
+      ),
+      secondaryAction: ({ onViewBackgroundRequests = () => {}, buttonProps = {} }) => (
+        // TODO: make this a link
+        <EuiButtonEmpty onClick={onViewBackgroundRequests} {...buttonProps}>
+          View background sessions
+        </EuiButtonEmpty>
+      ),
     },
   },
   [BackgroundSessionViewState.BackgroundLoading]: {
@@ -91,18 +93,16 @@ const backgroundSessionIndicatorViewStateToProps: {
     },
     popover: {
       text: 'Loading in the background',
-      buttons: [
-        ({ onStopLoading = () => {} }) => (
-          <EuiButtonEmpty size="xs" onClick={onStopLoading} iconType={'cross'}>
-            Cancel
-          </EuiButtonEmpty>
-        ),
-        ({ onViewBackgroundRequests = () => {} }) => (
-          <EuiButtonEmpty size="xs" onClick={onViewBackgroundRequests}>
-            View requests
-          </EuiButtonEmpty>
-        ),
-      ],
+      primaryAction: ({ onStopLoading = () => {}, buttonProps = {} }) => (
+        <EuiButtonEmpty onClick={onStopLoading} {...buttonProps}>
+          Cancel
+        </EuiButtonEmpty>
+      ),
+      secondaryAction: ({ onViewBackgroundRequests = () => {}, buttonProps = {} }) => (
+        <EuiButtonEmpty onClick={onViewBackgroundRequests} {...buttonProps}>
+          View background sessions
+        </EuiButtonEmpty>
+      ),
     },
   },
   [BackgroundSessionViewState.BackgroundCompleted]: {
@@ -113,14 +113,12 @@ const backgroundSessionIndicatorViewStateToProps: {
       tooltipText: 'Results loaded in the background',
     },
     popover: {
-      text: 'Loaded in the background',
-      buttons: [
-        ({ onViewBackgroundRequests = () => {} }) => (
-          <EuiButtonEmpty size="xs" onClick={onViewBackgroundRequests}>
-            View background requests
-          </EuiButtonEmpty>
-        ),
-      ],
+      text: 'Results loaded',
+      primaryAction: ({ onViewBackgroundRequests = () => {}, buttonProps = {} }) => (
+        <EuiButtonEmpty onClick={onViewBackgroundRequests} {...buttonProps}>
+          View background sessions
+        </EuiButtonEmpty>
+      ),
     },
   },
   [BackgroundSessionViewState.Restored]: {
@@ -131,14 +129,17 @@ const backgroundSessionIndicatorViewStateToProps: {
       tooltipText: 'Restored older results. The data is not current.',
     },
     popover: {
-      text: 'The data is not current',
-      buttons: [
-        ({ onReload = () => {} }) => (
-          <EuiButtonEmpty size="xs" onClick={onReload} iconType={'refresh'}>
-            Reload
-          </EuiButtonEmpty>
-        ),
-      ],
+      text: 'Results no longer current',
+      primaryAction: ({ onReload = () => {}, buttonProps = {} }) => (
+        <EuiButtonEmpty onClick={onReload} {...buttonProps}>
+          Refresh
+        </EuiButtonEmpty>
+      ),
+      secondaryAction: ({ onViewBackgroundRequests = () => {}, buttonProps = {} }) => (
+        <EuiButtonEmpty onClick={onViewBackgroundRequests} {...buttonProps}>
+          View background sessions
+        </EuiButtonEmpty>
+      ),
     },
   },
 };
@@ -168,17 +169,29 @@ export const BackgroundSessionIndicator: React.FC<BackgroundSessionIndicatorProp
         </EuiToolTip>
       }
     >
-      <EuiFlexGroup responsive={false} alignItems={'center'} gutterSize={'none'}>
-        <EuiFlexItem grow={true} style={{ marginRight: '12px' }}>
-          <EuiText size="s" color={'subdued'}>
-            <p>{popover.text}</p>
-          </EuiText>
+      <EuiFlexGroup responsive={false} alignItems={'center'} gutterSize={'s'}>
+        <EuiFlexItem grow={true}>
+          <EuiFlexGroup responsive={false} alignItems={'center'} gutterSize={'xs'}>
+            <EuiFlexItem grow={true}>
+              <EuiText size="s" color={'subdued'}>
+                <p>{popover.text}</p>
+              </EuiText>
+            </EuiFlexItem>
+            {popover.primaryAction && (
+              <EuiFlexItem grow={false}>
+                <popover.primaryAction {...props} buttonProps={{ size: 'xs' }} />
+              </EuiFlexItem>
+            )}
+          </EuiFlexGroup>
         </EuiFlexItem>
-        {popover.buttons.map((Button, index) => (
-          <EuiFlexItem key={props.state + index} grow={false}>
-            <Button {...props} />
+        {popover.secondaryAction && (
+          <EuiFlexItem grow={false} style={{ borderLeft: '1px solid #D3DAE6' }}>
+            <popover.secondaryAction
+              {...props}
+              buttonProps={{ size: 'xs', style: { marginLeft: 8 } }}
+            />
           </EuiFlexItem>
-        ))}
+        )}
       </EuiFlexGroup>
     </EuiPopover>
   );

From 40c94bd32d5d61f797aaf297843759dd1b148ea6 Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Mon, 9 Nov 2020 18:00:55 +0100
Subject: [PATCH 05/12] wip

---
 .../data/common/search/session/mocks.ts       |   5 +-
 x-pack/plugins/data_enhanced/config.ts        |  17 ++
 x-pack/plugins/data_enhanced/public/index.ts  |   5 +-
 x-pack/plugins/data_enhanced/public/plugin.ts |  25 +-
 .../background_session_indicator.scss         |   3 +
 .../background_session_indicator.stories.tsx  |   2 +-
 .../background_session_indicator.test.tsx     |  98 ++++++++
 .../background_session_indicator.tsx          | 231 ++++++++++++------
 .../ui/background_session_indicator/index.tsx |   6 +-
 .../background_session_view_state.ts}         |   0
 ...cted_background_session_indicator.test.tsx |  37 +++
 ...connected_background_session_indicator.tsx |  14 +-
 .../index.ts                                  |  11 +
 .../plugins/data_enhanced/public/ui/index.ts  |   7 +
 x-pack/plugins/data_enhanced/server/index.ts  |  12 +-
 15 files changed, 374 insertions(+), 99 deletions(-)
 create mode 100644 x-pack/plugins/data_enhanced/config.ts
 create mode 100644 x-pack/plugins/data_enhanced/public/ui/background_session_indicator/background_session_indicator.scss
 create mode 100644 x-pack/plugins/data_enhanced/public/ui/background_session_indicator/background_session_indicator.test.tsx
 rename x-pack/plugins/data_enhanced/public/ui/{background_session_state.ts => connected_background_session_indicator/background_session_view_state.ts} (100%)
 create mode 100644 x-pack/plugins/data_enhanced/public/ui/connected_background_session_indicator/connected_background_session_indicator.test.tsx
 rename x-pack/plugins/data_enhanced/public/ui/{ => connected_background_session_indicator}/connected_background_session_indicator.tsx (65%)
 create mode 100644 x-pack/plugins/data_enhanced/public/ui/connected_background_session_indicator/index.ts
 create mode 100644 x-pack/plugins/data_enhanced/public/ui/index.ts

diff --git a/src/plugins/data/common/search/session/mocks.ts b/src/plugins/data/common/search/session/mocks.ts
index 2b64bbbd275650..a582d396287e7c 100644
--- a/src/plugins/data/common/search/session/mocks.ts
+++ b/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> {
@@ -24,7 +25,7 @@ export function getSessionServiceMock(): jest.Mocked<ISessionService> {
     clear: jest.fn(),
     start: jest.fn(),
     restore: jest.fn(),
-    getSessionId: jest.fn(),
-    getSession$: jest.fn(),
+    getSessionId: jest.fn(() => undefined),
+    getSession$: jest.fn(() => new BehaviorSubject(undefined).asObservable()),
   };
 }
diff --git a/x-pack/plugins/data_enhanced/config.ts b/x-pack/plugins/data_enhanced/config.ts
new file mode 100644
index 00000000000000..9838f0959ef198
--- /dev/null
+++ b/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>;
diff --git a/x-pack/plugins/data_enhanced/public/index.ts b/x-pack/plugins/data_enhanced/public/index.ts
index 22ac0c98839665..7fe34e21fde5c9 100644
--- a/x-pack/plugins/data_enhanced/public/index.ts
+++ b/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 };
 
diff --git a/x-pack/plugins/data_enhanced/public/plugin.ts b/x-pack/plugins/data_enhanced/public/plugin.ts
index 93564373f6fce5..713ff726eee65c 100644
--- a/x-pack/plugins/data_enhanced/public/plugin.ts
+++ b/x-pack/plugins/data_enhanced/public/plugin.ts
@@ -5,14 +5,15 @@
  */
 
 import React from 'react';
-import { CoreSetup, CoreStart, Plugin } from 'src/core/public';
+import { CoreSetup, CoreStart, Plugin, PluginInitializerContext } from 'src/core/public';
 import { DataPublicPluginSetup, DataPublicPluginStart } from '../../../../src/plugins/data/public';
-import { setAutocompleteService } from './services';
 
+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 './ui/connected_background_session_indicator';
+import { ConfigSchema } from '../config';
 
 export interface DataEnhancedSetupDependencies {
   data: DataPublicPluginSetup;
@@ -28,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
@@ -56,13 +59,17 @@ export class DataEnhancedPlugin
   public start(core: CoreStart, plugins: DataEnhancedStartDependencies) {
     setAutocompleteService(plugins.data.autocomplete);
 
-    core.chrome.setBreadcrumbsAppendExtension({
-      content: toMountPoint(
-        React.createElement(
-          createConnectedBackgroundSessionIndicator({ sessionService: plugins.data.search.session })
-        )
-      ),
-    });
+    if (this.initializerContext.config.get()?.search?.sendToBackground?.enabled) {
+      core.chrome.setBreadcrumbsAppendExtension({
+        content: toMountPoint(
+          React.createElement(
+            createConnectedBackgroundSessionIndicator({
+              sessionService: plugins.data.search.session,
+            })
+          )
+        ),
+      });
+    }
   }
 
   public stop() {
diff --git a/x-pack/plugins/data_enhanced/public/ui/background_session_indicator/background_session_indicator.scss b/x-pack/plugins/data_enhanced/public/ui/background_session_indicator/background_session_indicator.scss
new file mode 100644
index 00000000000000..895ce28b758e54
--- /dev/null
+++ b/x-pack/plugins/data_enhanced/public/ui/background_session_indicator/background_session_indicator.scss
@@ -0,0 +1,3 @@
+.backgroundSessionIndicator__secondaryActionContainer {
+  border-left: 1px solid $euiColorLightShade;
+}
diff --git a/x-pack/plugins/data_enhanced/public/ui/background_session_indicator/background_session_indicator.stories.tsx b/x-pack/plugins/data_enhanced/public/ui/background_session_indicator/background_session_indicator.stories.tsx
index c94df39793547e..9cef76c62279c1 100644
--- a/x-pack/plugins/data_enhanced/public/ui/background_session_indicator/background_session_indicator.stories.tsx
+++ b/x-pack/plugins/data_enhanced/public/ui/background_session_indicator/background_session_indicator.stories.tsx
@@ -7,7 +7,7 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { BackgroundSessionIndicator } from './background_session_indicator';
-import { BackgroundSessionViewState } from '../background_session_state';
+import { BackgroundSessionViewState } from '../connected_background_session_indicator';
 
 storiesOf('components/BackgroundSessionIndicator', module).add('default', () => (
   <>
diff --git a/x-pack/plugins/data_enhanced/public/ui/background_session_indicator/background_session_indicator.test.tsx b/x-pack/plugins/data_enhanced/public/ui/background_session_indicator/background_session_indicator.test.tsx
new file mode 100644
index 00000000000000..1370a1182b5a11
--- /dev/null
+++ b/x-pack/plugins/data_enhanced/public/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 '../background_session_view_state';
+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();
+});
diff --git a/x-pack/plugins/data_enhanced/public/ui/background_session_indicator/background_session_indicator.tsx b/x-pack/plugins/data_enhanced/public/ui/background_session_indicator/background_session_indicator.tsx
index e9f1626173fe01..a198ca0878bebc 100644
--- a/x-pack/plugins/data_enhanced/public/ui/background_session_indicator/background_session_indicator.tsx
+++ b/x-pack/plugins/data_enhanced/public/ui/background_session_indicator/background_session_indicator.tsx
@@ -17,28 +17,81 @@ import {
   EuiText,
   EuiToolTip,
 } from '@elastic/eui';
-import { BackgroundSessionViewState } from '../background_session_state';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
+import { BackgroundSessionViewState } from '../connected_background_session_indicator';
+import './background_session_indicator.scss';
 
 export interface BackgroundSessionIndicatorProps {
   state: BackgroundSessionViewState;
-  onContinueInBackground?: () => {};
-  onStopLoading?: () => {};
-  onViewBackgroundRequests?: () => {};
-  onSaveResults?: () => {};
-  onReload?: () => {};
+  onContinueInBackground?: () => void;
+  onCancel?: () => void;
+  onViewBackgroundSessions?: () => void;
+  onSaveResults?: () => void;
+  onRefresh?: () => void;
 }
 
+type ActionButtonProps = BackgroundSessionIndicatorProps & { buttonProps: EuiButtonEmptyProps };
+
+const CancelButton = ({ onCancel = () => {}, buttonProps = {} }: ActionButtonProps) => (
+  <EuiButtonEmpty onClick={onCancel} {...buttonProps}>
+    <FormattedMessage
+      id={'xpack.dataEnhanced.backgroundSessionIndicator.cancelButtonText'}
+      defaultMessage={'Cancel'}
+    />
+  </EuiButtonEmpty>
+);
+
+const ContinueInBackgroundButton = ({
+  onContinueInBackground = () => {},
+  buttonProps = {},
+}: ActionButtonProps) => (
+  <EuiButtonEmpty onClick={onContinueInBackground} {...buttonProps}>
+    <FormattedMessage
+      id={'xpack.dataEnhanced.backgroundSessionIndicator.continueInBackgroundButtonText'}
+      defaultMessage={'Continue in background'}
+    />
+  </EuiButtonEmpty>
+);
+
+const ViewBackgroundSessionsButton = ({
+  onViewBackgroundSessions = () => {},
+  buttonProps = {},
+}: ActionButtonProps) => (
+  // TODO: make this a link
+  <EuiButtonEmpty onClick={onViewBackgroundSessions} {...buttonProps}>
+    <FormattedMessage
+      id={'xpack.dataEnhanced.backgroundSessionIndicator.viewBackgroundSessionsLinkText'}
+      defaultMessage={'View background sessions'}
+    />
+  </EuiButtonEmpty>
+);
+
+const RefreshButton = ({ onRefresh = () => {}, buttonProps = {} }: ActionButtonProps) => (
+  <EuiButtonEmpty onClick={onRefresh} {...buttonProps}>
+    <FormattedMessage
+      id={'xpack.dataEnhanced.backgroundSessionIndicator.refreshButtonText'}
+      defaultMessage={'Refresh'}
+    />
+  </EuiButtonEmpty>
+);
+
+const SaveButton = ({ onSaveResults = () => {}, buttonProps = {} }: ActionButtonProps) => (
+  <EuiButtonEmpty onClick={onSaveResults} {...buttonProps}>
+    <FormattedMessage
+      id={'xpack.dataEnhanced.backgroundSessionIndicator.saveButtonText'}
+      defaultMessage={'Save'}
+    />
+  </EuiButtonEmpty>
+);
+
 const backgroundSessionIndicatorViewStateToProps: {
   [state in BackgroundSessionViewState]: {
     button: Pick<EuiButtonIconProps, 'color' | 'iconType' | 'aria-label'> & { tooltipText: string };
     popover: {
       text: string;
-      primaryAction?: React.ComponentType<
-        BackgroundSessionIndicatorProps & { buttonProps: EuiButtonEmptyProps }
-      >;
-      secondaryAction?: React.ComponentType<
-        BackgroundSessionIndicatorProps & { buttonProps: EuiButtonEmptyProps }
-      >;
+      primaryAction?: React.ComponentType<ActionButtonProps>;
+      secondaryAction?: React.ComponentType<ActionButtonProps>;
     };
   };
 } = {
@@ -46,101 +99,126 @@ const backgroundSessionIndicatorViewStateToProps: {
     button: {
       color: 'subdued',
       iconType: 'clock',
-      'aria-label': 'Loading results',
-      tooltipText: 'Loading results',
-    },
-    popover: {
-      text: 'Loading',
-      primaryAction: ({ onStopLoading = () => {}, buttonProps = {} }) => (
-        <EuiButtonEmpty onClick={onStopLoading} {...buttonProps}>
-          Cancel
-        </EuiButtonEmpty>
+      'aria-label': i18n.translate(
+        'xpack.dataEnhanced.backgroundSessionIndicator.loadingResultsIconAriaLabel',
+        { defaultMessage: 'Loading results' }
       ),
-      secondaryAction: ({ onContinueInBackground = () => {}, buttonProps = {} }) => (
-        <EuiButtonEmpty onClick={onContinueInBackground} {...buttonProps}>
-          Continue in background
-        </EuiButtonEmpty>
+      tooltipText: i18n.translate(
+        'xpack.dataEnhanced.backgroundSessionIndicator.loadingResultsIconTooltipText',
+        { defaultMessage: 'Loading results' }
       ),
     },
+    popover: {
+      text: i18n.translate('xpack.dataEnhanced.backgroundSessionIndicator.loadingResultsText', {
+        defaultMessage: 'Loading',
+      }),
+      primaryAction: CancelButton,
+      secondaryAction: ContinueInBackgroundButton,
+    },
   },
   [BackgroundSessionViewState.Completed]: {
     button: {
       color: 'subdued',
       iconType: 'checkInCircleFilled',
-      'aria-label': 'Results loaded',
-      tooltipText: 'Results loaded',
-    },
-    popover: {
-      text: 'Results loaded',
-      primaryAction: ({ onSaveResults = () => {}, buttonProps = {} }) => (
-        <EuiButtonEmpty onClick={onSaveResults} {...buttonProps}>
-          Save
-        </EuiButtonEmpty>
+      'aria-label': i18n.translate(
+        'xpack.dataEnhanced.backgroundSessionIndicator.resultsLoadedIconAriaLabel',
+        {
+          defaultMessage: 'Results loaded',
+        }
       ),
-      secondaryAction: ({ onViewBackgroundRequests = () => {}, buttonProps = {} }) => (
-        // TODO: make this a link
-        <EuiButtonEmpty onClick={onViewBackgroundRequests} {...buttonProps}>
-          View background sessions
-        </EuiButtonEmpty>
+      tooltipText: i18n.translate(
+        'xpack.dataEnhanced.backgroundSessionIndicator.resultsLoadedIconTooltipText',
+        {
+          defaultMessage: 'Results loaded',
+        }
       ),
     },
+    popover: {
+      text: i18n.translate('xpack.dataEnhanced.backgroundSessionIndicator.resultsLoadedText', {
+        defaultMessage: 'Results loaded',
+      }),
+      primaryAction: SaveButton,
+      secondaryAction: ViewBackgroundSessionsButton,
+    },
   },
   [BackgroundSessionViewState.BackgroundLoading]: {
     button: {
       iconType: EuiLoadingSpinner,
-      'aria-label': 'Loading results in the background',
-      tooltipText: 'Loading results in the background',
+      'aria-label': i18n.translate(
+        'xpack.dataEnhanced.backgroundSessionIndicator.loadingInTheBackgroundIconAriaLabel',
+        {
+          defaultMessage: 'Loading results in the background',
+        }
+      ),
+      tooltipText: i18n.translate(
+        'xpack.dataEnhanced.backgroundSessionIndicator.loadingInTheBackgroundIconTooltipText',
+        {
+          defaultMessage: 'Loading results in the background',
+        }
+      ),
     },
     popover: {
-      text: 'Loading in the background',
-      primaryAction: ({ onStopLoading = () => {}, buttonProps = {} }) => (
-        <EuiButtonEmpty onClick={onStopLoading} {...buttonProps}>
-          Cancel
-        </EuiButtonEmpty>
-      ),
-      secondaryAction: ({ onViewBackgroundRequests = () => {}, buttonProps = {} }) => (
-        <EuiButtonEmpty onClick={onViewBackgroundRequests} {...buttonProps}>
-          View background sessions
-        </EuiButtonEmpty>
+      text: i18n.translate(
+        'xpack.dataEnhanced.backgroundSessionIndicator.loadingInTheBackgroundText',
+        {
+          defaultMessage: 'Loading in the background',
+        }
       ),
+      primaryAction: CancelButton,
+      secondaryAction: ViewBackgroundSessionsButton,
     },
   },
   [BackgroundSessionViewState.BackgroundCompleted]: {
     button: {
       color: 'success',
       iconType: 'checkInCircleFilled',
-      'aria-label': 'Results loaded in the background',
-      tooltipText: 'Results loaded in the background',
+      'aria-label': i18n.translate(
+        'xpack.dataEnhanced.backgroundSessionIndicator.resultLoadedInTheBackgroundIconAraText',
+        {
+          defaultMessage: 'Results loaded in the background',
+        }
+      ),
+      tooltipText: i18n.translate(
+        'xpack.dataEnhanced.backgroundSessionIndicator.resultLoadedInTheBackgroundIconTooltipText',
+        {
+          defaultMessage: 'Results loaded in the background',
+        }
+      ),
     },
     popover: {
-      text: 'Results loaded',
-      primaryAction: ({ onViewBackgroundRequests = () => {}, buttonProps = {} }) => (
-        <EuiButtonEmpty onClick={onViewBackgroundRequests} {...buttonProps}>
-          View background sessions
-        </EuiButtonEmpty>
+      text: i18n.translate(
+        'xpack.dataEnhanced.backgroundSessionIndicator.resultLoadedInTheBackgroundText',
+        {
+          defaultMessage: 'Results loaded',
+        }
       ),
+      primaryAction: ViewBackgroundSessionsButton,
     },
   },
   [BackgroundSessionViewState.Restored]: {
     button: {
       color: 'warning',
       iconType: 'refresh',
-      'aria-label': 'Restored older results. The data is not current.',
-      tooltipText: 'Restored older results. The data is not current.',
-    },
-    popover: {
-      text: 'Results no longer current',
-      primaryAction: ({ onReload = () => {}, buttonProps = {} }) => (
-        <EuiButtonEmpty onClick={onReload} {...buttonProps}>
-          Refresh
-        </EuiButtonEmpty>
+      'aria-label': i18n.translate(
+        'xpack.dataEnhanced.backgroundSessionIndicator.restoredResultsIconAriaLabel',
+        {
+          defaultMessage: 'Results no longer current',
+        }
       ),
-      secondaryAction: ({ onViewBackgroundRequests = () => {}, buttonProps = {} }) => (
-        <EuiButtonEmpty onClick={onViewBackgroundRequests} {...buttonProps}>
-          View background sessions
-        </EuiButtonEmpty>
+      tooltipText: i18n.translate(
+        'xpack.dataEnhanced.backgroundSessionIndicator.restoredResultsTooltipText',
+        {
+          defaultMessage: 'Results no longer current',
+        }
       ),
     },
+    popover: {
+      text: i18n.translate('xpack.dataEnhanced.backgroundSessionIndicator.restoredText', {
+        defaultMessage: 'Results no longer current',
+      }),
+      primaryAction: RefreshButton,
+      secondaryAction: ViewBackgroundSessionsButton,
+    },
   },
 };
 
@@ -156,8 +234,9 @@ export const BackgroundSessionIndicator: React.FC<BackgroundSessionIndicatorProp
       ownFocus
       isOpen={isPopoverOpen}
       closePopover={closePopover}
-      anchorPosition={'leftCenter'}
+      anchorPosition={'rightCenter'}
       panelPaddingSize={'s'}
+      data-test-subj={'backgroundSessionIndicator'}
       button={
         <EuiToolTip content={button.tooltipText}>
           <EuiButtonIcon
@@ -185,10 +264,14 @@ export const BackgroundSessionIndicator: React.FC<BackgroundSessionIndicatorProp
           </EuiFlexGroup>
         </EuiFlexItem>
         {popover.secondaryAction && (
-          <EuiFlexItem grow={false} style={{ borderLeft: '1px solid #D3DAE6' }}>
+          <EuiFlexItem
+            grow={false}
+            className={'backgroundSessionIndicator__secondaryActionContainer'}
+          >
             <popover.secondaryAction
               {...props}
-              buttonProps={{ size: 'xs', style: { marginLeft: 8 } }}
+              // marginLeft: 10 to make borderLeft look like a separator
+              buttonProps={{ size: 'xs', style: { marginLeft: 10 } }}
             />
           </EuiFlexItem>
         )}
diff --git a/x-pack/plugins/data_enhanced/public/ui/background_session_indicator/index.tsx b/x-pack/plugins/data_enhanced/public/ui/background_session_indicator/index.tsx
index 2346d3343f1146..55c8c453dd5d2f 100644
--- a/x-pack/plugins/data_enhanced/public/ui/background_session_indicator/index.tsx
+++ b/x-pack/plugins/data_enhanced/public/ui/background_session_indicator/index.tsx
@@ -15,9 +15,9 @@ const Fallback = () => (
   </EuiDelayRender>
 );
 
-const LazyBackgroundSearchIndicator = React.lazy(() => import('./background_session_indicator'));
-export const BackgroundSearchIndicator = (props: BackgroundSessionIndicatorProps) => (
+const LazyBackgroundSessionIndicator = React.lazy(() => import('./background_session_indicator'));
+export const BackgroundSessionIndicator = (props: BackgroundSessionIndicatorProps) => (
   <React.Suspense fallback={<Fallback />}>
-    <LazyBackgroundSearchIndicator {...props} />
+    <LazyBackgroundSessionIndicator {...props} />
   </React.Suspense>
 );
diff --git a/x-pack/plugins/data_enhanced/public/ui/background_session_state.ts b/x-pack/plugins/data_enhanced/public/ui/connected_background_session_indicator/background_session_view_state.ts
similarity index 100%
rename from x-pack/plugins/data_enhanced/public/ui/background_session_state.ts
rename to x-pack/plugins/data_enhanced/public/ui/connected_background_session_indicator/background_session_view_state.ts
diff --git a/x-pack/plugins/data_enhanced/public/ui/connected_background_session_indicator/connected_background_session_indicator.test.tsx b/x-pack/plugins/data_enhanced/public/ui/connected_background_session_indicator/connected_background_session_indicator.test.tsx
new file mode 100644
index 00000000000000..9c08cd23cc0cfc
--- /dev/null
+++ b/x-pack/plugins/data_enhanced/public/ui/connected_background_session_indicator/connected_background_session_indicator.test.tsx
@@ -0,0 +1,37 @@
+/*
+ * 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 { render, waitFor } from '@testing-library/react';
+import { dataPluginMock } from '../../../../../../src/plugins/data/public/mocks';
+import { createConnectedBackgroundSessionIndicator } from './connected_background_session_indicator';
+import { BehaviorSubject } from 'rxjs';
+import { ISessionService } from '../../../../../../src/plugins/data/public';
+
+const sessionService = dataPluginMock.createStartContract().search.session as jest.Mocked<
+  ISessionService
+>;
+
+test("shouldn't show indicator in case no active search session", async () => {
+  const BackgroundSessionIndicator = createConnectedBackgroundSessionIndicator({ sessionService });
+  const { getByTestId, container } = render(<BackgroundSessionIndicator />);
+
+  // make sure `backgroundSessionIndicator` isn't appearing after some time (lazy-loading)
+  await expect(
+    waitFor(() => getByTestId('backgroundSessionIndicator'), { timeout: 100 })
+  ).rejects.toThrow();
+  expect(container).toMatchInlineSnapshot(`<div />`);
+});
+
+test('should show indicator in case there is an active search session', async () => {
+  const session$ = new BehaviorSubject('session_id');
+  sessionService.getSession$.mockImplementation(() => session$);
+  sessionService.getSessionId.mockImplementation(() => session$.getValue());
+  const BackgroundSessionIndicator = createConnectedBackgroundSessionIndicator({ sessionService });
+  const { getByTestId } = render(<BackgroundSessionIndicator />);
+
+  await waitFor(() => getByTestId('backgroundSessionIndicator'));
+});
diff --git a/x-pack/plugins/data_enhanced/public/ui/connected_background_session_indicator.tsx b/x-pack/plugins/data_enhanced/public/ui/connected_background_session_indicator/connected_background_session_indicator.tsx
similarity index 65%
rename from x-pack/plugins/data_enhanced/public/ui/connected_background_session_indicator.tsx
rename to x-pack/plugins/data_enhanced/public/ui/connected_background_session_indicator/connected_background_session_indicator.tsx
index dc9c634e041e69..c02e5f0e7b5dbb 100644
--- a/x-pack/plugins/data_enhanced/public/ui/connected_background_session_indicator.tsx
+++ b/x-pack/plugins/data_enhanced/public/ui/connected_background_session_indicator/connected_background_session_indicator.tsx
@@ -7,26 +7,26 @@
 import React from 'react';
 import useObservable from 'react-use/lib/useObservable';
 import { distinctUntilChanged, map } from 'rxjs/operators';
-import { BackgroundSearchIndicator } from './background_session_indicator';
-import { DataPublicPluginStart } from '../../../../../src/plugins/data/public/';
-import { BackgroundSessionViewState } from './background_session_state';
+import { BackgroundSessionIndicator } from '../background_session_indicator';
+import { ISessionService } from '../../../../../../src/plugins/data/public/';
+import { BackgroundSessionViewState } from './background_session_view_state';
 
 export interface BackgroundSessionIndicatorDeps {
-  sessionService: DataPublicPluginStart['search']['session'];
+  sessionService: ISessionService;
 }
 
 export const createConnectedBackgroundSessionIndicator = ({
   sessionService,
 }: BackgroundSessionIndicatorDeps): React.FC => {
   const sessionId$ = sessionService.getSession$();
-  const isSession$ = sessionId$.pipe(
+  const hasActiveSession$ = sessionId$.pipe(
     map((sessionId) => !!sessionId),
     distinctUntilChanged()
   );
 
   return () => {
-    const isSession = useObservable(isSession$, !!sessionService.getSessionId());
+    const isSession = useObservable(hasActiveSession$, !!sessionService.getSessionId());
     if (!isSession) return null;
-    return <BackgroundSearchIndicator state={BackgroundSessionViewState.Loading} />;
+    return <BackgroundSessionIndicator state={BackgroundSessionViewState.Loading} />;
   };
 };
diff --git a/x-pack/plugins/data_enhanced/public/ui/connected_background_session_indicator/index.ts b/x-pack/plugins/data_enhanced/public/ui/connected_background_session_indicator/index.ts
new file mode 100644
index 00000000000000..adbb6edbbfcf3f
--- /dev/null
+++ b/x-pack/plugins/data_enhanced/public/ui/connected_background_session_indicator/index.ts
@@ -0,0 +1,11 @@
+/*
+ * 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 {
+  BackgroundSessionIndicatorDeps,
+  createConnectedBackgroundSessionIndicator,
+} from './connected_background_session_indicator';
+export { BackgroundSessionViewState } from './background_session_view_state';
diff --git a/x-pack/plugins/data_enhanced/public/ui/index.ts b/x-pack/plugins/data_enhanced/public/ui/index.ts
new file mode 100644
index 00000000000000..04201325eb5db3
--- /dev/null
+++ b/x-pack/plugins/data_enhanced/public/ui/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 './connected_background_session_indicator';
diff --git a/x-pack/plugins/data_enhanced/server/index.ts b/x-pack/plugins/data_enhanced/server/index.ts
index a0edd2e26ebefd..c3907b3b674393 100644
--- a/x-pack/plugins/data_enhanced/server/index.ts
+++ b/x-pack/plugins/data_enhanced/server/index.ts
@@ -4,10 +4,18 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { PluginInitializerContext } from 'kibana/server';
+import { PluginConfigDescriptor, PluginInitializerContext } from 'kibana/server';
 import { EnhancedDataServerPlugin } from './plugin';
+import { configSchema, ConfigSchema } from '../config';
 
-export function plugin(initializerContext: PluginInitializerContext) {
+export const config: PluginConfigDescriptor<ConfigSchema> = {
+  exposeToBrowser: {
+    search: true,
+  },
+  schema: configSchema,
+};
+
+export function plugin(initializerContext: PluginInitializerContext<ConfigSchema>) {
   return new EnhancedDataServerPlugin(initializerContext);
 }
 

From 57a7597cad4f760f56e8aaf1fcd9b4d670083a24 Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Mon, 9 Nov 2020 19:49:52 +0100
Subject: [PATCH 06/12] fix

---
 .../background_session_indicator.test.tsx     |  2 +-
 .../background_session_indicator.tsx          | 57 +++++++++----------
 2 files changed, 28 insertions(+), 31 deletions(-)

diff --git a/x-pack/plugins/data_enhanced/public/ui/background_session_indicator/background_session_indicator.test.tsx b/x-pack/plugins/data_enhanced/public/ui/background_session_indicator/background_session_indicator.test.tsx
index 1370a1182b5a11..5b7ab2e4f9b1f0 100644
--- a/x-pack/plugins/data_enhanced/public/ui/background_session_indicator/background_session_indicator.test.tsx
+++ b/x-pack/plugins/data_enhanced/public/ui/background_session_indicator/background_session_indicator.test.tsx
@@ -8,7 +8,7 @@ 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 '../background_session_view_state';
+import { BackgroundSessionViewState } from '../connected_background_session_indicator';
 import { IntlProvider } from 'react-intl';
 
 function Container({ children }: { children?: ReactNode }) {
diff --git a/x-pack/plugins/data_enhanced/public/ui/background_session_indicator/background_session_indicator.tsx b/x-pack/plugins/data_enhanced/public/ui/background_session_indicator/background_session_indicator.tsx
index a198ca0878bebc..56b3b7d710ff95 100644
--- a/x-pack/plugins/data_enhanced/public/ui/background_session_indicator/background_session_indicator.tsx
+++ b/x-pack/plugins/data_enhanced/public/ui/background_session_indicator/background_session_indicator.tsx
@@ -36,8 +36,8 @@ type ActionButtonProps = BackgroundSessionIndicatorProps & { buttonProps: EuiBut
 const CancelButton = ({ onCancel = () => {}, buttonProps = {} }: ActionButtonProps) => (
   <EuiButtonEmpty onClick={onCancel} {...buttonProps}>
     <FormattedMessage
-      id={'xpack.dataEnhanced.backgroundSessionIndicator.cancelButtonText'}
-      defaultMessage={'Cancel'}
+      id="xpack.data.backgroundSessionIndicator.cancelButtonText"
+      defaultMessage="Cancel"
     />
   </EuiButtonEmpty>
 );
@@ -48,8 +48,8 @@ const ContinueInBackgroundButton = ({
 }: ActionButtonProps) => (
   <EuiButtonEmpty onClick={onContinueInBackground} {...buttonProps}>
     <FormattedMessage
-      id={'xpack.dataEnhanced.backgroundSessionIndicator.continueInBackgroundButtonText'}
-      defaultMessage={'Continue in background'}
+      id="xpack.data.backgroundSessionIndicator.continueInBackgroundButtonText"
+      defaultMessage="Continue in background"
     />
   </EuiButtonEmpty>
 );
@@ -61,8 +61,8 @@ const ViewBackgroundSessionsButton = ({
   // TODO: make this a link
   <EuiButtonEmpty onClick={onViewBackgroundSessions} {...buttonProps}>
     <FormattedMessage
-      id={'xpack.dataEnhanced.backgroundSessionIndicator.viewBackgroundSessionsLinkText'}
-      defaultMessage={'View background sessions'}
+      id="xpack.data.backgroundSessionIndicator.viewBackgroundSessionsLinkText"
+      defaultMessage="View background sessions"
     />
   </EuiButtonEmpty>
 );
@@ -70,8 +70,8 @@ const ViewBackgroundSessionsButton = ({
 const RefreshButton = ({ onRefresh = () => {}, buttonProps = {} }: ActionButtonProps) => (
   <EuiButtonEmpty onClick={onRefresh} {...buttonProps}>
     <FormattedMessage
-      id={'xpack.dataEnhanced.backgroundSessionIndicator.refreshButtonText'}
-      defaultMessage={'Refresh'}
+      id="xpack.data.backgroundSessionIndicator.refreshButtonText"
+      defaultMessage="Refresh"
     />
   </EuiButtonEmpty>
 );
@@ -79,8 +79,8 @@ const RefreshButton = ({ onRefresh = () => {}, buttonProps = {} }: ActionButtonP
 const SaveButton = ({ onSaveResults = () => {}, buttonProps = {} }: ActionButtonProps) => (
   <EuiButtonEmpty onClick={onSaveResults} {...buttonProps}>
     <FormattedMessage
-      id={'xpack.dataEnhanced.backgroundSessionIndicator.saveButtonText'}
-      defaultMessage={'Save'}
+      id="xpack.data.backgroundSessionIndicator.saveButtonText"
+      defaultMessage="Save"
     />
   </EuiButtonEmpty>
 );
@@ -100,16 +100,16 @@ const backgroundSessionIndicatorViewStateToProps: {
       color: 'subdued',
       iconType: 'clock',
       'aria-label': i18n.translate(
-        'xpack.dataEnhanced.backgroundSessionIndicator.loadingResultsIconAriaLabel',
+        'xpack.data.backgroundSessionIndicator.loadingResultsIconAriaLabel',
         { defaultMessage: 'Loading results' }
       ),
       tooltipText: i18n.translate(
-        'xpack.dataEnhanced.backgroundSessionIndicator.loadingResultsIconTooltipText',
+        'xpack.data.backgroundSessionIndicator.loadingResultsIconTooltipText',
         { defaultMessage: 'Loading results' }
       ),
     },
     popover: {
-      text: i18n.translate('xpack.dataEnhanced.backgroundSessionIndicator.loadingResultsText', {
+      text: i18n.translate('xpack.data.backgroundSessionIndicator.loadingResultsText', {
         defaultMessage: 'Loading',
       }),
       primaryAction: CancelButton,
@@ -121,20 +121,20 @@ const backgroundSessionIndicatorViewStateToProps: {
       color: 'subdued',
       iconType: 'checkInCircleFilled',
       'aria-label': i18n.translate(
-        'xpack.dataEnhanced.backgroundSessionIndicator.resultsLoadedIconAriaLabel',
+        'xpack.data.backgroundSessionIndicator.resultsLoadedIconAriaLabel',
         {
           defaultMessage: 'Results loaded',
         }
       ),
       tooltipText: i18n.translate(
-        'xpack.dataEnhanced.backgroundSessionIndicator.resultsLoadedIconTooltipText',
+        'xpack.data.backgroundSessionIndicator.resultsLoadedIconTooltipText',
         {
           defaultMessage: 'Results loaded',
         }
       ),
     },
     popover: {
-      text: i18n.translate('xpack.dataEnhanced.backgroundSessionIndicator.resultsLoadedText', {
+      text: i18n.translate('xpack.data.backgroundSessionIndicator.resultsLoadedText', {
         defaultMessage: 'Results loaded',
       }),
       primaryAction: SaveButton,
@@ -145,25 +145,22 @@ const backgroundSessionIndicatorViewStateToProps: {
     button: {
       iconType: EuiLoadingSpinner,
       'aria-label': i18n.translate(
-        'xpack.dataEnhanced.backgroundSessionIndicator.loadingInTheBackgroundIconAriaLabel',
+        'xpack.data.backgroundSessionIndicator.loadingInTheBackgroundIconAriaLabel',
         {
           defaultMessage: 'Loading results in the background',
         }
       ),
       tooltipText: i18n.translate(
-        'xpack.dataEnhanced.backgroundSessionIndicator.loadingInTheBackgroundIconTooltipText',
+        'xpack.data.backgroundSessionIndicator.loadingInTheBackgroundIconTooltipText',
         {
           defaultMessage: 'Loading results in the background',
         }
       ),
     },
     popover: {
-      text: i18n.translate(
-        'xpack.dataEnhanced.backgroundSessionIndicator.loadingInTheBackgroundText',
-        {
-          defaultMessage: 'Loading in the background',
-        }
-      ),
+      text: i18n.translate('xpack.data.backgroundSessionIndicator.loadingInTheBackgroundText', {
+        defaultMessage: 'Loading in the background',
+      }),
       primaryAction: CancelButton,
       secondaryAction: ViewBackgroundSessionsButton,
     },
@@ -173,13 +170,13 @@ const backgroundSessionIndicatorViewStateToProps: {
       color: 'success',
       iconType: 'checkInCircleFilled',
       'aria-label': i18n.translate(
-        'xpack.dataEnhanced.backgroundSessionIndicator.resultLoadedInTheBackgroundIconAraText',
+        'xpack.data.backgroundSessionIndicator.resultLoadedInTheBackgroundIconAraText',
         {
           defaultMessage: 'Results loaded in the background',
         }
       ),
       tooltipText: i18n.translate(
-        'xpack.dataEnhanced.backgroundSessionIndicator.resultLoadedInTheBackgroundIconTooltipText',
+        'xpack.data.backgroundSessionIndicator.resultLoadedInTheBackgroundIconTooltipText',
         {
           defaultMessage: 'Results loaded in the background',
         }
@@ -187,7 +184,7 @@ const backgroundSessionIndicatorViewStateToProps: {
     },
     popover: {
       text: i18n.translate(
-        'xpack.dataEnhanced.backgroundSessionIndicator.resultLoadedInTheBackgroundText',
+        'xpack.data.backgroundSessionIndicator.resultLoadedInTheBackgroundText',
         {
           defaultMessage: 'Results loaded',
         }
@@ -200,20 +197,20 @@ const backgroundSessionIndicatorViewStateToProps: {
       color: 'warning',
       iconType: 'refresh',
       'aria-label': i18n.translate(
-        'xpack.dataEnhanced.backgroundSessionIndicator.restoredResultsIconAriaLabel',
+        'xpack.data.backgroundSessionIndicator.restoredResultsIconAriaLabel',
         {
           defaultMessage: 'Results no longer current',
         }
       ),
       tooltipText: i18n.translate(
-        'xpack.dataEnhanced.backgroundSessionIndicator.restoredResultsTooltipText',
+        'xpack.data.backgroundSessionIndicator.restoredResultsTooltipText',
         {
           defaultMessage: 'Results no longer current',
         }
       ),
     },
     popover: {
-      text: i18n.translate('xpack.dataEnhanced.backgroundSessionIndicator.restoredText', {
+      text: i18n.translate('xpack.data.backgroundSessionIndicator.restoredText', {
         defaultMessage: 'Results no longer current',
       }),
       primaryAction: RefreshButton,

From 9958b2fd48a5525c7af0f75a3266425ace6bfb5a Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Tue, 10 Nov 2020 12:01:22 +0100
Subject: [PATCH 07/12] move ui under search

---
 x-pack/plugins/data_enhanced/public/plugin.ts              | 2 +-
 x-pack/plugins/data_enhanced/public/search/index.ts        | 7 +++++++
 .../background_session_indicator.scss                      | 0
 .../background_session_indicator.stories.tsx               | 0
 .../background_session_indicator.test.tsx                  | 0
 .../background_session_indicator.tsx                       | 0
 .../{ => search}/ui/background_session_indicator/index.tsx | 0
 .../background_session_view_state.ts                       | 0
 .../connected_background_session_indicator.test.tsx        | 0
 .../connected_background_session_indicator.tsx             | 0
 .../ui/connected_background_session_indicator/index.ts     | 0
 .../plugins/data_enhanced/public/{ => search}/ui/index.ts  | 0
 12 files changed, 8 insertions(+), 1 deletion(-)
 create mode 100644 x-pack/plugins/data_enhanced/public/search/index.ts
 rename x-pack/plugins/data_enhanced/public/{ => search}/ui/background_session_indicator/background_session_indicator.scss (100%)
 rename x-pack/plugins/data_enhanced/public/{ => search}/ui/background_session_indicator/background_session_indicator.stories.tsx (100%)
 rename x-pack/plugins/data_enhanced/public/{ => search}/ui/background_session_indicator/background_session_indicator.test.tsx (100%)
 rename x-pack/plugins/data_enhanced/public/{ => search}/ui/background_session_indicator/background_session_indicator.tsx (100%)
 rename x-pack/plugins/data_enhanced/public/{ => search}/ui/background_session_indicator/index.tsx (100%)
 rename x-pack/plugins/data_enhanced/public/{ => search}/ui/connected_background_session_indicator/background_session_view_state.ts (100%)
 rename x-pack/plugins/data_enhanced/public/{ => search}/ui/connected_background_session_indicator/connected_background_session_indicator.test.tsx (100%)
 rename x-pack/plugins/data_enhanced/public/{ => search}/ui/connected_background_session_indicator/connected_background_session_indicator.tsx (100%)
 rename x-pack/plugins/data_enhanced/public/{ => search}/ui/connected_background_session_indicator/index.ts (100%)
 rename x-pack/plugins/data_enhanced/public/{ => search}/ui/index.ts (100%)

diff --git a/x-pack/plugins/data_enhanced/public/plugin.ts b/x-pack/plugins/data_enhanced/public/plugin.ts
index 713ff726eee65c..ca7d1be9cda26d 100644
--- a/x-pack/plugins/data_enhanced/public/plugin.ts
+++ b/x-pack/plugins/data_enhanced/public/plugin.ts
@@ -12,7 +12,7 @@ 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 './ui/connected_background_session_indicator';
+import { createConnectedBackgroundSessionIndicator } from './search';
 import { ConfigSchema } from '../config';
 
 export interface DataEnhancedSetupDependencies {
diff --git a/x-pack/plugins/data_enhanced/public/search/index.ts b/x-pack/plugins/data_enhanced/public/search/index.ts
new file mode 100644
index 00000000000000..1a33812ca85662
--- /dev/null
+++ b/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';
diff --git a/x-pack/plugins/data_enhanced/public/ui/background_session_indicator/background_session_indicator.scss b/x-pack/plugins/data_enhanced/public/search/ui/background_session_indicator/background_session_indicator.scss
similarity index 100%
rename from x-pack/plugins/data_enhanced/public/ui/background_session_indicator/background_session_indicator.scss
rename to x-pack/plugins/data_enhanced/public/search/ui/background_session_indicator/background_session_indicator.scss
diff --git a/x-pack/plugins/data_enhanced/public/ui/background_session_indicator/background_session_indicator.stories.tsx b/x-pack/plugins/data_enhanced/public/search/ui/background_session_indicator/background_session_indicator.stories.tsx
similarity index 100%
rename from x-pack/plugins/data_enhanced/public/ui/background_session_indicator/background_session_indicator.stories.tsx
rename to x-pack/plugins/data_enhanced/public/search/ui/background_session_indicator/background_session_indicator.stories.tsx
diff --git a/x-pack/plugins/data_enhanced/public/ui/background_session_indicator/background_session_indicator.test.tsx b/x-pack/plugins/data_enhanced/public/search/ui/background_session_indicator/background_session_indicator.test.tsx
similarity index 100%
rename from x-pack/plugins/data_enhanced/public/ui/background_session_indicator/background_session_indicator.test.tsx
rename to x-pack/plugins/data_enhanced/public/search/ui/background_session_indicator/background_session_indicator.test.tsx
diff --git a/x-pack/plugins/data_enhanced/public/ui/background_session_indicator/background_session_indicator.tsx b/x-pack/plugins/data_enhanced/public/search/ui/background_session_indicator/background_session_indicator.tsx
similarity index 100%
rename from x-pack/plugins/data_enhanced/public/ui/background_session_indicator/background_session_indicator.tsx
rename to x-pack/plugins/data_enhanced/public/search/ui/background_session_indicator/background_session_indicator.tsx
diff --git a/x-pack/plugins/data_enhanced/public/ui/background_session_indicator/index.tsx b/x-pack/plugins/data_enhanced/public/search/ui/background_session_indicator/index.tsx
similarity index 100%
rename from x-pack/plugins/data_enhanced/public/ui/background_session_indicator/index.tsx
rename to x-pack/plugins/data_enhanced/public/search/ui/background_session_indicator/index.tsx
diff --git a/x-pack/plugins/data_enhanced/public/ui/connected_background_session_indicator/background_session_view_state.ts b/x-pack/plugins/data_enhanced/public/search/ui/connected_background_session_indicator/background_session_view_state.ts
similarity index 100%
rename from x-pack/plugins/data_enhanced/public/ui/connected_background_session_indicator/background_session_view_state.ts
rename to x-pack/plugins/data_enhanced/public/search/ui/connected_background_session_indicator/background_session_view_state.ts
diff --git a/x-pack/plugins/data_enhanced/public/ui/connected_background_session_indicator/connected_background_session_indicator.test.tsx b/x-pack/plugins/data_enhanced/public/search/ui/connected_background_session_indicator/connected_background_session_indicator.test.tsx
similarity index 100%
rename from x-pack/plugins/data_enhanced/public/ui/connected_background_session_indicator/connected_background_session_indicator.test.tsx
rename to x-pack/plugins/data_enhanced/public/search/ui/connected_background_session_indicator/connected_background_session_indicator.test.tsx
diff --git a/x-pack/plugins/data_enhanced/public/ui/connected_background_session_indicator/connected_background_session_indicator.tsx b/x-pack/plugins/data_enhanced/public/search/ui/connected_background_session_indicator/connected_background_session_indicator.tsx
similarity index 100%
rename from x-pack/plugins/data_enhanced/public/ui/connected_background_session_indicator/connected_background_session_indicator.tsx
rename to x-pack/plugins/data_enhanced/public/search/ui/connected_background_session_indicator/connected_background_session_indicator.tsx
diff --git a/x-pack/plugins/data_enhanced/public/ui/connected_background_session_indicator/index.ts b/x-pack/plugins/data_enhanced/public/search/ui/connected_background_session_indicator/index.ts
similarity index 100%
rename from x-pack/plugins/data_enhanced/public/ui/connected_background_session_indicator/index.ts
rename to x-pack/plugins/data_enhanced/public/search/ui/connected_background_session_indicator/index.ts
diff --git a/x-pack/plugins/data_enhanced/public/ui/index.ts b/x-pack/plugins/data_enhanced/public/search/ui/index.ts
similarity index 100%
rename from x-pack/plugins/data_enhanced/public/ui/index.ts
rename to x-pack/plugins/data_enhanced/public/search/ui/index.ts

From d50a7741b74e97943f8f67d76dd4b1387f56087d Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Tue, 10 Nov 2020 12:47:14 +0100
Subject: [PATCH 08/12] typecheck

---
 .../connected_background_session_indicator.test.tsx           | 4 ++--
 .../connected_background_session_indicator.tsx                | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/x-pack/plugins/data_enhanced/public/search/ui/connected_background_session_indicator/connected_background_session_indicator.test.tsx b/x-pack/plugins/data_enhanced/public/search/ui/connected_background_session_indicator/connected_background_session_indicator.test.tsx
index 9c08cd23cc0cfc..b21081e10bbe1f 100644
--- a/x-pack/plugins/data_enhanced/public/search/ui/connected_background_session_indicator/connected_background_session_indicator.test.tsx
+++ b/x-pack/plugins/data_enhanced/public/search/ui/connected_background_session_indicator/connected_background_session_indicator.test.tsx
@@ -6,10 +6,10 @@
 
 import React from 'react';
 import { render, waitFor } from '@testing-library/react';
-import { dataPluginMock } from '../../../../../../src/plugins/data/public/mocks';
+import { dataPluginMock } from '../../../../../../../src/plugins/data/public/mocks';
 import { createConnectedBackgroundSessionIndicator } from './connected_background_session_indicator';
 import { BehaviorSubject } from 'rxjs';
-import { ISessionService } from '../../../../../../src/plugins/data/public';
+import { ISessionService } from '../../../../../../../src/plugins/data/public';
 
 const sessionService = dataPluginMock.createStartContract().search.session as jest.Mocked<
   ISessionService
diff --git a/x-pack/plugins/data_enhanced/public/search/ui/connected_background_session_indicator/connected_background_session_indicator.tsx b/x-pack/plugins/data_enhanced/public/search/ui/connected_background_session_indicator/connected_background_session_indicator.tsx
index c02e5f0e7b5dbb..d097a1aecb66af 100644
--- a/x-pack/plugins/data_enhanced/public/search/ui/connected_background_session_indicator/connected_background_session_indicator.tsx
+++ b/x-pack/plugins/data_enhanced/public/search/ui/connected_background_session_indicator/connected_background_session_indicator.tsx
@@ -8,7 +8,7 @@ import React from 'react';
 import useObservable from 'react-use/lib/useObservable';
 import { distinctUntilChanged, map } from 'rxjs/operators';
 import { BackgroundSessionIndicator } from '../background_session_indicator';
-import { ISessionService } from '../../../../../../src/plugins/data/public/';
+import { ISessionService } from '../../../../../../../src/plugins/data/public/';
 import { BackgroundSessionViewState } from './background_session_view_state';
 
 export interface BackgroundSessionIndicatorDeps {

From 21399bc20b8c848e804d4e9243bfc6fbb8fbb0d2 Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Wed, 11 Nov 2020 12:20:15 +0100
Subject: [PATCH 09/12] euiBorderWidthThin

---
 .../background_session_indicator.scss                           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/data_enhanced/public/search/ui/background_session_indicator/background_session_indicator.scss b/x-pack/plugins/data_enhanced/public/search/ui/background_session_indicator/background_session_indicator.scss
index 895ce28b758e54..d1d40c3ddb2d7a 100644
--- a/x-pack/plugins/data_enhanced/public/search/ui/background_session_indicator/background_session_indicator.scss
+++ b/x-pack/plugins/data_enhanced/public/search/ui/background_session_indicator/background_session_indicator.scss
@@ -1,3 +1,3 @@
 .backgroundSessionIndicator__secondaryActionContainer {
-  border-left: 1px solid $euiColorLightShade;
+  border-left: $euiBorderWidthThin;
 }

From 1d8cae2d5677d27170836e0a5679c8ddadbda547 Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Wed, 11 Nov 2020 12:33:59 +0100
Subject: [PATCH 10/12] euiBorderThin

---
 .../background_session_indicator.scss                           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/data_enhanced/public/search/ui/background_session_indicator/background_session_indicator.scss b/x-pack/plugins/data_enhanced/public/search/ui/background_session_indicator/background_session_indicator.scss
index d1d40c3ddb2d7a..4856e6b4274d9f 100644
--- a/x-pack/plugins/data_enhanced/public/search/ui/background_session_indicator/background_session_indicator.scss
+++ b/x-pack/plugins/data_enhanced/public/search/ui/background_session_indicator/background_session_indicator.scss
@@ -1,3 +1,3 @@
 .backgroundSessionIndicator__secondaryActionContainer {
-  border-left: $euiBorderWidthThin;
+  border-left: $euiBorderThin;
 }

From 458c6e416dc0bf857dce7c2c697408da19a3dd56 Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Wed, 11 Nov 2020 14:53:03 +0100
Subject: [PATCH 11/12] better on mobile

---
 .../background_session_indicator.scss         | 24 +++++++++-
 .../background_session_indicator.tsx          | 44 ++++++++++---------
 2 files changed, 46 insertions(+), 22 deletions(-)

diff --git a/x-pack/plugins/data_enhanced/public/search/ui/background_session_indicator/background_session_indicator.scss b/x-pack/plugins/data_enhanced/public/search/ui/background_session_indicator/background_session_indicator.scss
index 4856e6b4274d9f..2d13d320ae78b6 100644
--- a/x-pack/plugins/data_enhanced/public/search/ui/background_session_indicator/background_session_indicator.scss
+++ b/x-pack/plugins/data_enhanced/public/search/ui/background_session_indicator/background_session_indicator.scss
@@ -1,3 +1,23 @@
-.backgroundSessionIndicator__secondaryActionContainer {
-  border-left: $euiBorderThin;
+.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;
+  }
 }
diff --git a/x-pack/plugins/data_enhanced/public/search/ui/background_session_indicator/background_session_indicator.tsx b/x-pack/plugins/data_enhanced/public/search/ui/background_session_indicator/background_session_indicator.tsx
index 56b3b7d710ff95..b55bd6b6553716 100644
--- a/x-pack/plugins/data_enhanced/public/search/ui/background_session_indicator/background_session_indicator.tsx
+++ b/x-pack/plugins/data_enhanced/public/search/ui/background_session_indicator/background_session_indicator.tsx
@@ -219,6 +219,10 @@ const backgroundSessionIndicatorViewStateToProps: {
   },
 };
 
+const VerticalDivider: React.FC = () => (
+  <div className="backgroundSessionIndicator__verticalDivider" />
+);
+
 export const BackgroundSessionIndicator: React.FC<BackgroundSessionIndicatorProps> = (props) => {
   const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
   const onButtonClick = () => setIsPopoverOpen((isOpen) => !isOpen);
@@ -233,6 +237,7 @@ export const BackgroundSessionIndicator: React.FC<BackgroundSessionIndicatorProp
       closePopover={closePopover}
       anchorPosition={'rightCenter'}
       panelPaddingSize={'s'}
+      className="backgroundSessionIndicator"
       data-test-subj={'backgroundSessionIndicator'}
       button={
         <EuiToolTip content={button.tooltipText}>
@@ -245,33 +250,32 @@ export const BackgroundSessionIndicator: React.FC<BackgroundSessionIndicatorProp
         </EuiToolTip>
       }
     >
-      <EuiFlexGroup responsive={false} alignItems={'center'} gutterSize={'s'}>
+      <EuiFlexGroup
+        responsive={true}
+        alignItems={'center'}
+        gutterSize={'s'}
+        className="backgroundSessionIndicator__popoverContainer"
+      >
         <EuiFlexItem grow={true}>
-          <EuiFlexGroup responsive={false} alignItems={'center'} gutterSize={'xs'}>
-            <EuiFlexItem grow={true}>
-              <EuiText size="s" color={'subdued'}>
-                <p>{popover.text}</p>
-              </EuiText>
-            </EuiFlexItem>
+          <EuiText size="s" color={'subdued'}>
+            <p>{popover.text}</p>
+          </EuiText>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiFlexGroup wrap={true} responsive={false} alignItems={'center'} gutterSize={'s'}>
             {popover.primaryAction && (
               <EuiFlexItem grow={false}>
-                <popover.primaryAction {...props} buttonProps={{ size: 'xs' }} />
+                <popover.primaryAction {...props} buttonProps={{ size: 'xs', flush: 'both' }} />
+              </EuiFlexItem>
+            )}
+            {popover.primaryAction && popover.secondaryAction && <VerticalDivider />}
+            {popover.secondaryAction && (
+              <EuiFlexItem grow={false}>
+                <popover.secondaryAction {...props} buttonProps={{ size: 'xs', flush: 'both' }} />
               </EuiFlexItem>
             )}
           </EuiFlexGroup>
         </EuiFlexItem>
-        {popover.secondaryAction && (
-          <EuiFlexItem
-            grow={false}
-            className={'backgroundSessionIndicator__secondaryActionContainer'}
-          >
-            <popover.secondaryAction
-              {...props}
-              // marginLeft: 10 to make borderLeft look like a separator
-              buttonProps={{ size: 'xs', style: { marginLeft: 10 } }}
-            />
-          </EuiFlexItem>
-        )}
       </EuiFlexGroup>
     </EuiPopover>
   );

From a0869231fe48c4fa1541e2fc7ac47530bd9d4028 Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Mon, 16 Nov 2020 11:26:55 +0100
Subject: [PATCH 12/12] review nits

---
 src/plugins/data/common/search/session/mocks.ts | 2 +-
 x-pack/plugins/data_enhanced/public/plugin.ts   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/plugins/data/common/search/session/mocks.ts b/src/plugins/data/common/search/session/mocks.ts
index a582d396287e7c..370faaa640c56d 100644
--- a/src/plugins/data/common/search/session/mocks.ts
+++ b/src/plugins/data/common/search/session/mocks.ts
@@ -25,7 +25,7 @@ export function getSessionServiceMock(): jest.Mocked<ISessionService> {
     clear: jest.fn(),
     start: jest.fn(),
     restore: jest.fn(),
-    getSessionId: jest.fn(() => undefined),
+    getSessionId: jest.fn(),
     getSession$: jest.fn(() => new BehaviorSubject(undefined).asObservable()),
   };
 }
diff --git a/x-pack/plugins/data_enhanced/public/plugin.ts b/x-pack/plugins/data_enhanced/public/plugin.ts
index ca7d1be9cda26d..948858a5ed4c18 100644
--- a/x-pack/plugins/data_enhanced/public/plugin.ts
+++ b/x-pack/plugins/data_enhanced/public/plugin.ts
@@ -59,7 +59,7 @@ export class DataEnhancedPlugin
   public start(core: CoreStart, plugins: DataEnhancedStartDependencies) {
     setAutocompleteService(plugins.data.autocomplete);
 
-    if (this.initializerContext.config.get()?.search?.sendToBackground?.enabled) {
+    if (this.initializerContext.config.get().search.sendToBackground.enabled) {
       core.chrome.setBreadcrumbsAppendExtension({
         content: toMountPoint(
           React.createElement(