Fix auto refresh in visualizations and lens (#57667) (#57804)

src/legacy/core_plugins/kibana/public/visualize/np_ready/editor/editor.js

@@ -432,14 +432,6 @@ function VisualizeAppController(
       })
     );
 
-    subscriptions.add(
-      subscribeWithScope($scope, timefilter.getAutoRefreshFetch$(), {
-        next: () => {
-          $scope.vis.forceReload();
-        },
-      })
-    );
-
     $scope.$on('$destroy', () => {
       if ($scope._handler) {
         $scope._handler.destroy();

src/legacy/core_plugins/kibana/public/visualize_embeddable/visualize_embeddable.ts

@@ -38,6 +38,7 @@ import {
   onlyDisabledFiltersChanged,
   esFilters,
   mapAndFlattenFilters,
+  TimefilterContract,
 } from '../../../../../plugins/data/public';
 import {
   EmbeddableInput,
@@ -109,8 +110,10 @@ export class VisualizeEmbeddable extends Embeddable<VisualizeInput, VisualizeOut
   private vis: Vis;
   private domNode: any;
   public readonly type = VISUALIZE_EMBEDDABLE_TYPE;
+  private autoRefreshFetchSubscription: Subscription;
 
   constructor(
+    timefilter: TimefilterContract,
     {
       savedVisualization,
       editUrl,
@@ -154,6 +157,10 @@ export class VisualizeEmbeddable extends Embeddable<VisualizeInput, VisualizeOut
 
     this.vis._setUiState(this.uiState);
 
+    this.autoRefreshFetchSubscription = timefilter
+      .getAutoRefreshFetch$()
+      .subscribe(this.updateHandler.bind(this));
+
     this.subscriptions.push(
       Rx.merge(this.getOutput$(), this.getInput$()).subscribe(() => {
         this.handleChanges();
@@ -357,6 +364,7 @@ export class VisualizeEmbeddable extends Embeddable<VisualizeInput, VisualizeOut
       this.handler.destroy();
       this.handler.getElement().remove();
     }
+    this.autoRefreshFetchSubscription.unsubscribe();
   }
 
   public reload = () => {

src/legacy/core_plugins/kibana/public/visualize_embeddable/visualize_embeddable_factory.tsx

@@ -152,6 +152,7 @@ export class VisualizeEmbeddableFactory extends EmbeddableFactory<
       const indexPattern = await getIndexPattern(savedObject);
       const indexPatterns = indexPattern ? [indexPattern] : [];
       return new VisualizeEmbeddable(
+        npStart.plugins.data.query.timefilter.timefilter,
         {
           savedVisualization: savedObject,
           indexPatterns,

src/plugins/data/public/query/timefilter/timefilter_service.mock.ts

@@ -18,6 +18,7 @@
  */
 
 import { TimefilterService, TimeHistoryContract, TimefilterContract } from '.';
+import { Observable } from 'rxjs';
 
 export type TimefilterServiceClientContract = PublicMethodsOf<TimefilterService>;
 
@@ -28,7 +29,7 @@ const createSetupContractMock = () => {
     getEnabledUpdated$: jest.fn(),
     getTimeUpdate$: jest.fn(),
     getRefreshIntervalUpdate$: jest.fn(),
-    getAutoRefreshFetch$: jest.fn(),
+    getAutoRefreshFetch$: jest.fn(() => new Observable<unknown>()),
     getFetch$: jest.fn(),
     getTime: jest.fn(),
     setTime: jest.fn(),

x-pack/legacy/plugins/lens/public/editor_frame_plugin/embeddable/embeddable.test.tsx

@@ -8,6 +8,7 @@ import { Embeddable } from './embeddable';
 import { ExpressionRendererProps } from 'src/plugins/expressions/public';
 import { Query, TimeRange, esFilters } from 'src/plugins/data/public';
 import { Document } from '../../persistence';
+import { dataPluginMock } from '../../../../../../../src/plugins/data/public/mocks';
 
 jest.mock('../../../../../../../src/legacy/ui/public/inspector', () => ({
   isAvailable: false,
@@ -44,6 +45,7 @@ describe('embeddable', () => {
 
   it('should render expression with expression renderer', () => {
     const embeddable = new Embeddable(
+      dataPluginMock.createSetupContract().query.timefilter.timefilter,
       expressionRenderer,
       {
         editUrl: '',
@@ -66,6 +68,7 @@ describe('embeddable', () => {
     ];
 
     const embeddable = new Embeddable(
+      dataPluginMock.createSetupContract().query.timefilter.timefilter,
       expressionRenderer,
       {
         editUrl: '',
@@ -93,6 +96,7 @@ describe('embeddable', () => {
     ];
 
     const embeddable = new Embeddable(
+      dataPluginMock.createSetupContract().query.timefilter.timefilter,
       expressionRenderer,
       {
         editUrl: '',
@@ -119,6 +123,7 @@ describe('embeddable', () => {
     ];
 
     const embeddable = new Embeddable(
+      dataPluginMock.createSetupContract().query.timefilter.timefilter,
       expressionRenderer,
       {
         editUrl: '',

x-pack/legacy/plugins/lens/public/editor_frame_plugin/embeddable/embeddable.tsx

@@ -7,7 +7,7 @@
 import _ from 'lodash';
 import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
-import { Query, TimeRange, esFilters } from 'src/plugins/data/public';
+import { Query, TimeRange, esFilters, TimefilterContract } from 'src/plugins/data/public';
 import { ExpressionRenderer } from 'src/plugins/expressions/public';
 import { IIndexPattern } from 'src/plugins/data/public';
 import { Subscription } from 'rxjs';
@@ -44,6 +44,7 @@ export class Embeddable extends AbstractEmbeddable<LensEmbeddableInput, LensEmbe
   private savedVis: Document;
   private domNode: HTMLElement | Element | undefined;
   private subscription: Subscription;
+  private autoRefreshFetchSubscription: Subscription;
 
   private currentContext: {
     timeRange?: TimeRange;
@@ -53,6 +54,7 @@ export class Embeddable extends AbstractEmbeddable<LensEmbeddableInput, LensEmbe
   } = {};
 
   constructor(
+    timefilter: TimefilterContract,
     expressionRenderer: ExpressionRenderer,
     { savedVis, editUrl, editable, indexPatterns }: LensEmbeddableConfiguration,
     initialInput: LensEmbeddableInput,
@@ -77,6 +79,10 @@ export class Embeddable extends AbstractEmbeddable<LensEmbeddableInput, LensEmbe
     this.savedVis = savedVis;
     this.subscription = this.getInput$().subscribe(input => this.onContainerStateChanged(input));
     this.onContainerStateChanged(initialInput);
+
+    this.autoRefreshFetchSubscription = timefilter
+      .getAutoRefreshFetch$()
+      .subscribe(this.reload.bind(this));
   }
 
   onContainerStateChanged(containerState: LensEmbeddableInput) {
@@ -126,6 +132,7 @@ export class Embeddable extends AbstractEmbeddable<LensEmbeddableInput, LensEmbe
     if (this.subscription) {
       this.subscription.unsubscribe();
     }
+    this.autoRefreshFetchSubscription.unsubscribe();
   }
 
   reload() {

x-pack/legacy/plugins/lens/public/editor_frame_plugin/embeddable/embeddable_factory.ts

@@ -9,7 +9,12 @@ import { Chrome } from 'ui/chrome';
 
 import { capabilities } from 'ui/capabilities';
 import { i18n } from '@kbn/i18n';
-import { IndexPatternsContract, IndexPattern } from '../../../../../../../src/plugins/data/public';
+import {
+  IndexPatternsContract,
+  IndexPattern,
+  TimefilterContract,
+} from '../../../../../../../src/plugins/data/public';
+
 import { ExpressionRenderer } from '../../../../../../../src/plugins/expressions/public';
 import {
   EmbeddableFactory as AbstractEmbeddableFactory,
@@ -29,6 +34,7 @@ export class EmbeddableFactory extends AbstractEmbeddableFactory {
   private expressionRenderer: ExpressionRenderer;
 
   constructor(
+    private timefilter: TimefilterContract,
     chrome: Chrome,
     expressionRenderer: ExpressionRenderer,
     indexPatternService: IndexPatternsContract
@@ -88,6 +94,7 @@ export class EmbeddableFactory extends AbstractEmbeddableFactory {
     );
 
     return new Embeddable(
+      this.timefilter,
       this.expressionRenderer,
       {
         savedVis,

x-pack/legacy/plugins/lens/public/editor_frame_plugin/mocks.tsx

@@ -16,6 +16,7 @@ import { embeddablePluginMock } from '../../../../../../src/plugins/embeddable/p
 import { expressionsPluginMock } from '../../../../../../src/plugins/expressions/public/mocks';
 import { DatasourcePublicAPI, FramePublicAPI, Datasource, Visualization } from '../types';
 import { EditorFrameSetupPlugins, EditorFrameStartPlugins } from './plugin';
+import { dataPluginMock } from '../../../../../../src/plugins/data/public/mocks';
 
 export function createMockVisualization(): jest.Mocked<Visualization> {
   return {
@@ -105,7 +106,7 @@ export function createExpressionRendererMock(): jest.Mock<
 
 export function createMockSetupDependencies() {
   return ({
-    data: {},
+    data: dataPluginMock.createSetupContract(),
     embeddable: embeddablePluginMock.createSetupContract(),
     expressions: expressionsPluginMock.createSetupContract(),
     chrome: {
@@ -116,11 +117,7 @@ export function createMockSetupDependencies() {
 
 export function createMockStartDependencies() {
   return ({
-    data: {
-      indexPatterns: {
-        indexPatterns: {},
-      },
-    },
+    data: dataPluginMock.createSetupContract(),
     embeddable: embeddablePluginMock.createStartContract(),
     expressions: expressionsPluginMock.createStartContract(),
   } as unknown) as MockedStartDependencies;

x-pack/legacy/plugins/lens/public/editor_frame_plugin/plugin.tsx

@@ -70,6 +70,7 @@ export class EditorFramePlugin {
     plugins.embeddable.registerEmbeddableFactory(
       'lens',
       new EmbeddableFactory(
+        plugins.data.query.timefilter.timefilter,
         plugins.chrome,
         plugins.expressions.ExpressionRenderer,
         plugins.data.indexPatterns