[Lens][Inspector] Close the inspector on Lens unmount (elastic#114317)

* 🐛 First attempt to close the inspector automatically on app unmount

* 👌 Integrate feedback

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

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);
     });
   });
 

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<OnSaveProps, 'onTitleDuplicate' | 'newDescription'> & {
@@ -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<Document | undefined>(undefined);
 
-  const lensInspector = getLensInspectorService(inspector);
-
   useEffect(() => {
     if (currentDoc) {
       setLastKnownDoc(currentDoc);

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());
   };

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;

x-pack/plugins/lens/public/lens_inspector_service.ts

@@ -8,16 +8,27 @@
 import type {
   Adapters,
   InspectorOptions,
+  InspectorSession,
   Start as InspectorStartContract,
 } from '../../../../src/plugins/inspector/public';
 
 import { createDefaultInspectorAdapters } from '../../../../src/plugins/expressions/public';
 
 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(),
   };
 };
 

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,

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);
+    });
   });
 }