From d0e19e49602b92abd1c255ed51eebfc578c21c5d Mon Sep 17 00:00:00 2001 From: Marco Liberati Date: Thu, 14 Oct 2021 18:45:31 +0200 Subject: [PATCH] [Lens][Inspector] Close the inspector on Lens unmount (#114317) * :bug: First attempt to close the inspector automatically on app unmount * :ok_hand: Integrate feedback Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> --- .../__snapshots__/app.test.tsx.snap | 35 ++----------------- .../lens/public/app_plugin/app.test.tsx | 2 +- x-pack/plugins/lens/public/app_plugin/app.tsx | 6 ++-- .../lens/public/app_plugin/mounter.tsx | 4 ++- .../plugins/lens/public/app_plugin/types.ts | 3 +- .../lens/public/lens_inspector_service.ts | 13 ++++++- x-pack/plugins/lens/public/mocks.tsx | 7 +++- x-pack/test/functional/apps/lens/inspector.ts | 6 ++++ 8 files changed, 33 insertions(+), 43 deletions(-) diff --git a/x-pack/plugins/lens/public/app_plugin/__snapshots__/app.test.tsx.snap b/x-pack/plugins/lens/public/app_plugin/__snapshots__/app.test.tsx.snap index 51adf7737fd4b9..ca14bc908eb80d 100644 --- a/x-pack/plugins/lens/public/app_plugin/__snapshots__/app.test.tsx.snap +++ b/x-pack/plugins/lens/public/app_plugin/__snapshots__/app.test.tsx.snap @@ -28,39 +28,8 @@ Array [ Symbol(kCapture): false, }, }, - "inspect": [Function], - }, - "showNoDataPopover": [Function], - }, - Object {}, - ], - Array [ - Object { - "lensInspector": Object { - "adapters": Object { - "expression": ExpressionsInspectorAdapter { - "_ast": Object {}, - "_events": Object {}, - "_eventsCount": 0, - "_maxListeners": undefined, - Symbol(kCapture): false, - }, - "requests": RequestAdapter { - "_events": Object {}, - "_eventsCount": 0, - "_maxListeners": undefined, - "requests": Map {}, - Symbol(kCapture): false, - }, - "tables": TablesAdapter { - "_events": Object {}, - "_eventsCount": 0, - "_maxListeners": undefined, - "_tables": Object {}, - Symbol(kCapture): false, - }, - }, - "inspect": [Function], + "close": [MockFunction], + "inspect": [MockFunction], }, "showNoDataPopover": [Function], }, diff --git a/x-pack/plugins/lens/public/app_plugin/app.test.tsx b/x-pack/plugins/lens/public/app_plugin/app.test.tsx index 0b800940e17871..b55d424c0db484 100644 --- a/x-pack/plugins/lens/public/app_plugin/app.test.tsx +++ b/x-pack/plugins/lens/public/app_plugin/app.test.tsx @@ -812,7 +812,7 @@ describe('Lens App', () => { await runInspect(instance); - expect(services.inspector.open).toHaveBeenCalledTimes(1); + expect(services.inspector.inspect).toHaveBeenCalledTimes(1); }); }); diff --git a/x-pack/plugins/lens/public/app_plugin/app.tsx b/x-pack/plugins/lens/public/app_plugin/app.tsx index ae2edaa1b98d31..5638a35d1cc6d3 100644 --- a/x-pack/plugins/lens/public/app_plugin/app.tsx +++ b/x-pack/plugins/lens/public/app_plugin/app.tsx @@ -37,7 +37,7 @@ import { getLastKnownDocWithoutPinnedFilters, runSaveLensVisualization, } from './save_modal_container'; -import { getLensInspectorService, LensInspector } from '../lens_inspector_service'; +import { LensInspector } from '../lens_inspector_service'; import { getEditPath } from '../../common'; export type SaveProps = Omit & { @@ -66,7 +66,7 @@ export function App({ data, chrome, uiSettings, - inspector, + inspector: lensInspector, application, notifications, savedObjectsTagging, @@ -101,8 +101,6 @@ export function App({ const [isSaveModalVisible, setIsSaveModalVisible] = useState(false); const [lastKnownDoc, setLastKnownDoc] = useState(undefined); - const lensInspector = getLensInspectorService(inspector); - useEffect(() => { if (currentDoc) { setLastKnownDoc(currentDoc); diff --git a/x-pack/plugins/lens/public/app_plugin/mounter.tsx b/x-pack/plugins/lens/public/app_plugin/mounter.tsx index 22b345a64fa22a..d4bc59a1e9e2ca 100644 --- a/x-pack/plugins/lens/public/app_plugin/mounter.tsx +++ b/x-pack/plugins/lens/public/app_plugin/mounter.tsx @@ -41,6 +41,7 @@ import { LensState, } from '../state_management'; import { getPreloadedState } from '../state_management/lens_slice'; +import { getLensInspectorService } from '../lens_inspector_service'; export async function getLensServices( coreStart: CoreStart, @@ -65,7 +66,7 @@ export async function getLensServices( return { data, storage, - inspector, + inspector: getLensInspectorService(inspector), navigation, fieldFormats, stateTransfer, @@ -278,6 +279,7 @@ export async function mountApp( return () => { data.search.session.clear(); unmountComponentAtNode(params.element); + lensServices.inspector.close(); unlistenParentHistory(); lensStore.dispatch(navigateAway()); }; diff --git a/x-pack/plugins/lens/public/app_plugin/types.ts b/x-pack/plugins/lens/public/app_plugin/types.ts index 8a3a848ffa204c..a5cd8bfef71f35 100644 --- a/x-pack/plugins/lens/public/app_plugin/types.ts +++ b/x-pack/plugins/lens/public/app_plugin/types.ts @@ -21,7 +21,6 @@ import type { import type { DataPublicPluginStart } from '../../../../../src/plugins/data/public'; import type { UsageCollectionStart } from '../../../../../src/plugins/usage_collection/public'; import type { DashboardStart } from '../../../../../src/plugins/dashboard/public'; -import type { Start as InspectorStart } from '../../../../../src/plugins/inspector/public'; import type { LensEmbeddableInput } from '../embeddable/embeddable'; import type { NavigationPublicPluginStart } from '../../../../../src/plugins/navigation/public'; import type { LensAttributeService } from '../lens_attribute_service'; @@ -105,7 +104,7 @@ export interface LensAppServices { dashboard: DashboardStart; fieldFormats: FieldFormatsStart; data: DataPublicPluginStart; - inspector: InspectorStart; + inspector: LensInspector; uiSettings: IUiSettingsClient; application: ApplicationStart; notifications: NotificationsStart; diff --git a/x-pack/plugins/lens/public/lens_inspector_service.ts b/x-pack/plugins/lens/public/lens_inspector_service.ts index d9573962f12d42..6cac381871d73d 100644 --- a/x-pack/plugins/lens/public/lens_inspector_service.ts +++ b/x-pack/plugins/lens/public/lens_inspector_service.ts @@ -8,6 +8,7 @@ import type { Adapters, InspectorOptions, + InspectorSession, Start as InspectorStartContract, } from '../../../../src/plugins/inspector/public'; @@ -15,9 +16,19 @@ import { createDefaultInspectorAdapters } from '../../../../src/plugins/expressi export const getLensInspectorService = (inspector: InspectorStartContract) => { const adapters: Adapters = createDefaultInspectorAdapters(); + let overlayRef: InspectorSession | undefined; return { adapters, - inspect: (options?: InspectorOptions) => inspector.open(adapters, options), + inspect: (options?: InspectorOptions) => { + overlayRef = inspector.open(adapters, options); + overlayRef.onClose.then(() => { + if (overlayRef) { + overlayRef = undefined; + } + }); + return overlayRef; + }, + close: () => overlayRef?.close(), }; }; diff --git a/x-pack/plugins/lens/public/mocks.tsx b/x-pack/plugins/lens/public/mocks.tsx index 3b48c13f2585ab..989c858b1f29d5 100644 --- a/x-pack/plugins/lens/public/mocks.tsx +++ b/x-pack/plugins/lens/public/mocks.tsx @@ -56,6 +56,7 @@ import { DatasourceMap, VisualizationMap, } from './types'; +import { getLensInspectorService } from './lens_inspector_service'; export function mockDatasourceStates() { return { @@ -417,7 +418,11 @@ export function makeDefaultServices( navigation: navigationStartMock, notifications: core.notifications, attributeService: makeAttributeService(), - inspector: inspectorPluginMock.createStartContract(), + inspector: { + adapters: getLensInspectorService(inspectorPluginMock.createStartContract()).adapters, + inspect: jest.fn(), + close: jest.fn(), + }, dashboard: dashboardPluginMock.createStartContract(), presentationUtil: presentationUtilPluginMock.createStartContract(core), savedObjectsClient: core.savedObjects.client, diff --git a/x-pack/test/functional/apps/lens/inspector.ts b/x-pack/test/functional/apps/lens/inspector.ts index 0783124079d4c1..9db804d324936b 100644 --- a/x-pack/test/functional/apps/lens/inspector.ts +++ b/x-pack/test/functional/apps/lens/inspector.ts @@ -11,6 +11,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { const PageObjects = getPageObjects(['visualize', 'lens', 'common', 'header']); const elasticChart = getService('elasticChart'); const inspector = getService('inspector'); + const testSubjects = getService('testSubjects'); describe('lens inspector', () => { before(async () => { @@ -55,5 +56,10 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await inspector.openInspectorRequestsView(); expect(await inspector.getRequestNames()).to.be('Data,Other bucket'); }); + + it('should close the inspector when navigating away from Lens', async () => { + await PageObjects.visualize.navigateToNewVisualization(); + expect(await testSubjects.exists('inspectorPanel')).to.be(false); + }); }); }