[Lens] Keep global filters, time range and refresh interval on refresh (#68075)

x-pack/plugins/lens/public/app_plugin/app.test.tsx

@@ -13,6 +13,7 @@ import { AppMountParameters } from 'kibana/public';
 import { Storage } from '../../../../../src/plugins/kibana_utils/public';
 import { Document, SavedObjectStore } from '../persistence';
 import { mount } from 'enzyme';
+import { createMemoryHistory, History } from 'history';
 import { SavedObjectSaveModal } from '../../../../../src/plugins/saved_objects/public';
 import {
   esFilters,
@@ -27,6 +28,7 @@ const dataStartMock = dataPluginMock.createStartContract();
 import { navigationPluginMock } from '../../../../../src/plugins/navigation/public/mocks';
 import { TopNavMenuData } from '../../../../../src/plugins/navigation/public';
 import { coreMock } from 'src/core/public/mocks';
+import { Observable } from 'rxjs';
 
 jest.mock('../persistence');
 jest.mock('src/core/public');
@@ -90,6 +92,8 @@ function createMockTimefilter() {
         return unsubscribe;
       },
     }),
+    getRefreshInterval: () => {},
+    getRefreshIntervalDefaults: () => {},
   };
 }
 
@@ -114,6 +118,7 @@ describe('Lens App', () => {
     ) => void;
     originatingApp: string | undefined;
     onAppLeave: AppMountParameters['onAppLeave'];
+    history: History;
   }> {
     return ({
       navigation: navigationStartMock,
@@ -134,6 +139,7 @@ describe('Lens App', () => {
           timefilter: {
             timefilter: createMockTimefilter(),
           },
+          state$: new Observable(),
         },
         indexPatterns: {
           get: jest.fn((id) => {
@@ -157,6 +163,7 @@ describe('Lens App', () => {
         ) => {}
       ),
       onAppLeave: jest.fn(),
+      history: createMemoryHistory(),
     } as unknown) as jest.Mocked<{
       navigation: typeof navigationStartMock;
       editorFrame: EditorFrameInstance;
@@ -173,6 +180,7 @@ describe('Lens App', () => {
       ) => void;
       originatingApp: string | undefined;
       onAppLeave: AppMountParameters['onAppLeave'];
+      history: History;
     }>;
   }
 
@@ -186,6 +194,8 @@ describe('Lens App', () => {
           return { from: 'now-7d', to: 'now' };
         } else if (type === UI_SETTINGS.SEARCH_QUERY_LANGUAGE) {
           return 'kuery';
+        } else if (type === 'state:storeInSessionStorage') {
+          return false;
         } else {
           return [];
         }

x-pack/plugins/lens/public/app_plugin/app.tsx

@@ -8,10 +8,18 @@ import _ from 'lodash';
 import React, { useState, useEffect, useCallback } from 'react';
 import { I18nProvider } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
-import { Query, DataPublicPluginStart } from 'src/plugins/data/public';
 import { NavigationPublicPluginStart } from 'src/plugins/navigation/public';
 import { AppMountContext, AppMountParameters, NotificationsStart } from 'kibana/public';
-import { IStorageWrapper } from 'src/plugins/kibana_utils/public';
+import { History } from 'history';
+import {
+  Query,
+  DataPublicPluginStart,
+  syncQueryStateWithUrl,
+} from '../../../../../src/plugins/data/public';
+import {
+  createKbnUrlStateStorage,
+  IStorageWrapper,
+} from '../../../../../src/plugins/kibana_utils/public';
 import { KibanaContextProvider } from '../../../../../src/plugins/kibana_react/public';
 import {
   SavedObjectSaveModalOrigin,
@@ -59,6 +67,7 @@ export function App({
   originatingAppFromUrl,
   navigation,
   onAppLeave,
+  history,
 }: {
   editorFrame: EditorFrameInstance;
   data: DataPublicPluginStart;
@@ -75,6 +84,7 @@ export function App({
   ) => void;
   originatingAppFromUrl?: string | undefined;
   onAppLeave: AppMountParameters['onAppLeave'];
+  history: History;
 }) {
   const language =
     storage.get('kibana.userQueryLanguage') ||
@@ -129,7 +139,17 @@ export function App({
       },
     });
 
+    const kbnUrlStateStorage = createKbnUrlStateStorage({
+      history,
+      useHash: core.uiSettings.get('state:storeInSessionStorage'),
+    });
+    const { stop: stopSyncingQueryServiceStateWithUrl } = syncQueryStateWithUrl(
+      data.query,
+      kbnUrlStateStorage
+    );
+
     return () => {
+      stopSyncingQueryServiceStateWithUrl();
       filterSubscription.unsubscribe();
       timeSubscription.unsubscribe();
     };

x-pack/plugins/lens/public/app_plugin/mounter.tsx

@@ -93,6 +93,7 @@ export async function mountApp(
         }
         originatingAppFromUrl={originatingAppFromUrl}
         onAppLeave={params.onAppLeave}
+        history={routeProps.history}
       />
     );
   };

x-pack/test/functional/apps/lens/index.ts

@@ -29,6 +29,7 @@ export default function ({ getService, loadTestFile }: FtrProviderContext) {
       this.tags(['ciGroup4', 'skipFirefox']);
 
       loadTestFile(require.resolve('./smokescreen'));
+      loadTestFile(require.resolve('./persistent_context'));
       loadTestFile(require.resolve('./lens_reporting'));
     });
   });

x-pack/test/functional/apps/lens/persistent_context.ts

@@ -0,0 +1,60 @@
+/*
+ * 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 _ from 'lodash';
+import expect from '@kbn/expect';
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+// eslint-disable-next-line import/no-default-export
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
+  const PageObjects = getPageObjects(['visualize', 'header', 'timePicker']);
+  const browser = getService('browser');
+  const filterBar = getService('filterBar');
+  const appsMenu = getService('appsMenu');
+
+  describe('lens query context', () => {
+    it('should carry over time range and pinned filters to discover', async () => {
+      await PageObjects.visualize.navigateToNewVisualization();
+      await PageObjects.visualize.clickVisType('lens');
+      await PageObjects.timePicker.setAbsoluteRange(
+        'Sep 06, 2015 @ 06:31:44.000',
+        'Sep 18, 2025 @ 06:31:44.000'
+      );
+      await filterBar.addFilter('ip', 'is', '97.220.3.248');
+      await filterBar.toggleFilterPinned('ip');
+      await PageObjects.header.clickDiscover();
+      const timeRange = await PageObjects.timePicker.getTimeConfig();
+      expect(timeRange.start).to.equal('Sep 6, 2015 @ 06:31:44.000');
+      expect(timeRange.end).to.equal('Sep 18, 2025 @ 06:31:44.000');
+      await filterBar.hasFilter('ip', '97.220.3.248', true, true);
+    });
+
+    it('should remember time range and pinned filters from discover', async () => {
+      await PageObjects.timePicker.setAbsoluteRange(
+        'Sep 07, 2015 @ 06:31:44.000',
+        'Sep 19, 2025 @ 06:31:44.000'
+      );
+      await filterBar.toggleFilterEnabled('ip');
+      await appsMenu.clickLink('Visualize', { category: 'kibana' });
+      await PageObjects.visualize.clickNewVisualization();
+      await PageObjects.visualize.waitForVisualizationSelectPage();
+      await PageObjects.visualize.clickVisType('lens');
+      const timeRange = await PageObjects.timePicker.getTimeConfig();
+      expect(timeRange.start).to.equal('Sep 7, 2015 @ 06:31:44.000');
+      expect(timeRange.end).to.equal('Sep 19, 2025 @ 06:31:44.000');
+      await filterBar.hasFilter('ip', '97.220.3.248', false, true);
+    });
+
+    it('keep time range and pinned filters after refresh', async () => {
+      await browser.refresh();
+      await PageObjects.header.waitUntilLoadingHasFinished();
+      const timeRange = await PageObjects.timePicker.getTimeConfig();
+      expect(timeRange.start).to.equal('Sep 7, 2015 @ 06:31:44.000');
+      expect(timeRange.end).to.equal('Sep 19, 2025 @ 06:31:44.000');
+      await filterBar.hasFilter('ip', '97.220.3.248', false, true);
+    });
+  });
+}