[UX Dashboard] Enabled inspector panel for ux dashboard (#113118) (#1…

…13369)

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

Co-authored-by: Shahzad <shahzad.muhammad@elastic.co>

x-pack/plugins/apm/public/application/uxApp.tsx

@@ -37,6 +37,7 @@ import { redirectTo } from '../components/routing/redirect_to';
 import { useBreadcrumbs } from '../../../observability/public';
 import { useApmPluginContext } from '../context/apm_plugin/use_apm_plugin_context';
 import { APP_WRAPPER_CLASS } from '../../../../../src/core/public';
+import { InspectorContextProvider } from '../context/inspector/inspector_context';
 
 export const uxRoutes: APMRouteDefinition[] = [
   {
@@ -128,10 +129,12 @@ export function UXAppRoot({
         >
           <i18nCore.Context>
             <RouterProvider history={history} router={uxRouter}>
-              <UrlParamsProvider>
-                <UxApp />
-                <UXActionMenu appMountParameters={appMountParameters} />
-              </UrlParamsProvider>
+              <InspectorContextProvider>
+                <UrlParamsProvider>
+                  <UxApp />
+                  <UXActionMenu appMountParameters={appMountParameters} />
+                </UrlParamsProvider>
+              </InspectorContextProvider>
             </RouterProvider>
           </i18nCore.Context>
         </KibanaContextProvider>

x-pack/plugins/apm/public/components/app/RumDashboard/ActionMenu/index.tsx

@@ -16,6 +16,7 @@ import {
 import { useUrlParams } from '../../../../context/url_params_context/use_url_params';
 import { useKibana } from '../../../../../../../../src/plugins/kibana_react/public';
 import { AppMountParameters } from '../../../../../../../../src/core/public';
+import { InspectorHeaderLink } from '../../../shared/apm_header_action_menu/inspector_header_link';
 
 const ANALYZE_DATA = i18n.translate('xpack.apm.analyzeDataButtonLabel', {
   defaultMessage: 'Analyze data',
@@ -79,6 +80,7 @@ export function UXActionMenu({
             defaultMessage: 'Add data',
           })}
         </EuiHeaderLink>
+        <InspectorHeaderLink />
       </EuiHeaderLinks>
     </HeaderMenuPortal>
   );

x-pack/plugins/apm/public/components/app/RumDashboard/ActionMenu/inpector_link.tsx

@@ -0,0 +1,40 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { EuiHeaderLink } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import React from 'react';
+import { useApmPluginContext } from '../../../../context/apm_plugin/use_apm_plugin_context';
+import { useKibana } from '../../../../../../../../src/plugins/kibana_react/public';
+import { useInspectorContext } from '../../../../context/inspector/use_inspector_context';
+import { enableInspectEsQueries } from '../../../../../../observability/common/ui_settings_keys';
+
+export function UxInspectorHeaderLink() {
+  const { inspector } = useApmPluginContext();
+  const { inspectorAdapters } = useInspectorContext();
+  const {
+    services: { uiSettings },
+  } = useKibana();
+
+  const isInspectorEnabled = uiSettings?.get<boolean>(enableInspectEsQueries);
+
+  const inspect = () => {
+    inspector.open(inspectorAdapters);
+  };
+
+  if (!isInspectorEnabled) {
+    return null;
+  }
+
+  return (
+    <EuiHeaderLink color="primary" onClick={inspect}>
+      {i18n.translate('xpack.apm.inspectButtonText', {
+        defaultMessage: 'Inspect',
+      })}
+    </EuiHeaderLink>
+  );
+}