[Search] Disable "send to background" when auto-refresh is enabled (#…

…84106)

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

@@ -69,6 +69,7 @@ export class DataEnhancedPlugin
             createConnectedBackgroundSessionIndicator({
               sessionService: plugins.data.search.session,
               application: core.application,
+              timeFilter: plugins.data.query.timefilter.timefilter,
             })
           )
         ),

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

@@ -26,5 +26,14 @@ storiesOf('components/BackgroundSessionIndicator', module).add('default', () =>
     <div>
       <BackgroundSessionIndicator state={SessionState.Restored} />
     </div>
+    <div>
+      <BackgroundSessionIndicator
+        state={SessionState.Completed}
+        disabled={true}
+        disabledReasonText={
+          'Send to background capability is unavailable when auto-refresh is enabled'
+        }
+      />
+    </div>
   </>
 ));

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

@@ -100,3 +100,13 @@ test('Canceled state', async () => {
 
   expect(onRefresh).toBeCalled();
 });
+
+test('Disabled state', async () => {
+  render(
+    <Container>
+      <BackgroundSessionIndicator state={SessionState.Loading} disabled={true} />
+    </Container>
+  );
+
+  expect(screen.getByTestId('backgroundSessionIndicator').querySelector('button')).toBeDisabled();
+});

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

@@ -30,6 +30,8 @@ export interface BackgroundSessionIndicatorProps {
   viewBackgroundSessionsLink?: string;
   onSaveResults?: () => void;
   onRefresh?: () => void;
+  disabled?: boolean;
+  disabledReasonText?: string;
 }
 
 type ActionButtonProps = BackgroundSessionIndicatorProps & { buttonProps: EuiButtonEmptyProps };
@@ -285,12 +287,13 @@ export const BackgroundSessionIndicator: React.FC<BackgroundSessionIndicatorProp
       data-test-subj={'backgroundSessionIndicator'}
       data-state={props.state}
       button={
-        <EuiToolTip content={button.tooltipText}>
+        <EuiToolTip content={props.disabled ? props.disabledReasonText : button.tooltipText}>
           <EuiButtonIcon
             color={button.color}
             aria-label={button['aria-label']}
             iconType={button.iconType}
             onClick={onButtonClick}
+            disabled={props.disabled}
           />
         </EuiToolTip>
       }

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

@@ -5,21 +5,36 @@
  */
 
 import React from 'react';
-import { render, waitFor } from '@testing-library/react';
+import { render, waitFor, screen, act } 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, SessionState } from '../../../../../../../src/plugins/data/public';
+import {
+  ISessionService,
+  RefreshInterval,
+  SessionState,
+  TimefilterContract,
+} from '../../../../../../../src/plugins/data/public';
 import { coreMock } from '../../../../../../../src/core/public/mocks';
 
 const coreStart = coreMock.createStart();
-const sessionService = dataPluginMock.createStartContract().search
-  .session as jest.Mocked<ISessionService>;
+const dataStart = dataPluginMock.createStartContract();
+const sessionService = dataStart.search.session as jest.Mocked<ISessionService>;
+
+const refreshInterval$ = new BehaviorSubject<RefreshInterval>({ value: 0, pause: true });
+const timeFilter = dataStart.query.timefilter.timefilter as jest.Mocked<TimefilterContract>;
+timeFilter.getRefreshIntervalUpdate$.mockImplementation(() => refreshInterval$);
+timeFilter.getRefreshInterval.mockImplementation(() => refreshInterval$.getValue());
+
+beforeEach(() => {
+  refreshInterval$.next({ value: 0, pause: true });
+});
 
 test("shouldn't show indicator in case no active search session", async () => {
   const BackgroundSessionIndicator = createConnectedBackgroundSessionIndicator({
     sessionService,
     application: coreStart.application,
+    timeFilter,
   });
   const { getByTestId, container } = render(<BackgroundSessionIndicator />);
 
@@ -35,8 +50,32 @@ test('should show indicator in case there is an active search session', async ()
   const BackgroundSessionIndicator = createConnectedBackgroundSessionIndicator({
     sessionService: { ...sessionService, state$ },
     application: coreStart.application,
+    timeFilter,
   });
   const { getByTestId } = render(<BackgroundSessionIndicator />);
 
   await waitFor(() => getByTestId('backgroundSessionIndicator'));
 });
+
+test('should be disabled during auto-refresh', async () => {
+  const state$ = new BehaviorSubject(SessionState.Loading);
+  const BackgroundSessionIndicator = createConnectedBackgroundSessionIndicator({
+    sessionService: { ...sessionService, state$ },
+    application: coreStart.application,
+    timeFilter,
+  });
+
+  render(<BackgroundSessionIndicator />);
+
+  await waitFor(() => screen.getByTestId('backgroundSessionIndicator'));
+
+  expect(
+    screen.getByTestId('backgroundSessionIndicator').querySelector('button')
+  ).not.toBeDisabled();
+
+  act(() => {
+    refreshInterval$.next({ value: 0, pause: false });
+  });
+
+  expect(screen.getByTestId('backgroundSessionIndicator').querySelector('button')).toBeDisabled();
+});

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

@@ -5,24 +5,46 @@
  */
 
 import React from 'react';
-import { debounceTime } from 'rxjs/operators';
+import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';
 import useObservable from 'react-use/lib/useObservable';
+import { i18n } from '@kbn/i18n';
 import { BackgroundSessionIndicator } from '../background_session_indicator';
-import { ISessionService } from '../../../../../../../src/plugins/data/public/';
+import { ISessionService, TimefilterContract } from '../../../../../../../src/plugins/data/public/';
 import { RedirectAppLinks } from '../../../../../../../src/plugins/kibana_react/public';
 import { ApplicationStart } from '../../../../../../../src/core/public';
 
 export interface BackgroundSessionIndicatorDeps {
   sessionService: ISessionService;
+  timeFilter: TimefilterContract;
   application: ApplicationStart;
 }
 
 export const createConnectedBackgroundSessionIndicator = ({
   sessionService,
   application,
+  timeFilter,
 }: BackgroundSessionIndicatorDeps): React.FC => {
+  const isAutoRefreshEnabled = () => !timeFilter.getRefreshInterval().pause;
+  const isAutoRefreshEnabled$ = timeFilter
+    .getRefreshIntervalUpdate$()
+    .pipe(map(isAutoRefreshEnabled), distinctUntilChanged());
+
   return () => {
     const state = useObservable(sessionService.state$.pipe(debounceTime(500)));
+    const autoRefreshEnabled = useObservable(isAutoRefreshEnabled$, isAutoRefreshEnabled());
+    let disabled = false;
+    let disabledReasonText: string = '';
+
+    if (autoRefreshEnabled) {
+      disabled = true;
+      disabledReasonText = i18n.translate(
+        'xpack.data.backgroundSessionIndicator.disabledDueToAutoRefreshMessage',
+        {
+          defaultMessage: 'Send to background is not available when auto refresh is enabled.',
+        }
+      );
+    }
+
     if (!state) return null;
     return (
       <RedirectAppLinks application={application}>
@@ -40,6 +62,8 @@ export const createConnectedBackgroundSessionIndicator = ({
           onCancel={() => {
             sessionService.cancel();
           }}
+          disabled={disabled}
+          disabledReasonText={disabledReasonText}
         />
       </RedirectAppLinks>
     );