[Logs UI] Replace deprecated getInjectedVar with NP spaces API (#74280)…

… (#74517)

* Replace getInjectedVar() with NP spaces API

* Fix typo in comment

* Fix typo in comment

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

x-pack/plugins/infra/public/apps/common_providers.tsx

@@ -4,19 +4,17 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
-import { CoreStart } from 'kibana/public';
 import { ApolloClient } from 'apollo-client';
-import {
-  useUiSetting$,
-  KibanaContextProvider,
-} from '../../../../../src/plugins/kibana_react/public';
-import { TriggersActionsProvider } from '../utils/triggers_actions_context';
-import { InfraClientStartDeps } from '../types';
+import { CoreStart } from 'kibana/public';
+import React, { useMemo } from 'react';
+import { useUiSetting$ } from '../../../../../src/plugins/kibana_react/public';
+import { EuiThemeProvider } from '../../../observability/public';
 import { TriggersAndActionsUIPublicPluginStart } from '../../../triggers_actions_ui/public';
+import { createKibanaContextForPlugin } from '../hooks/use_kibana';
+import { InfraClientStartDeps } from '../types';
 import { ApolloClientContext } from '../utils/apollo_context';
-import { EuiThemeProvider } from '../../../observability/public';
 import { NavigationWarningPromptProvider } from '../utils/navigation_warning_prompt';
+import { TriggersActionsProvider } from '../utils/triggers_actions_context';
 
 export const CommonInfraProviders: React.FC<{
   apolloClient: ApolloClient<{}>;
@@ -39,9 +37,14 @@ export const CoreProviders: React.FC<{
   core: CoreStart;
   plugins: InfraClientStartDeps;
 }> = ({ children, core, plugins }) => {
+  const { Provider: KibanaContextProviderForPlugin } = useMemo(
+    () => createKibanaContextForPlugin(core, plugins),
+    [core, plugins]
+  );
+
   return (
-    <KibanaContextProvider services={{ ...core, ...plugins }}>
+    <KibanaContextProviderForPlugin services={{ ...core, ...plugins }}>
       <core.i18n.Context>{children}</core.i18n.Context>
-    </KibanaContextProvider>
+    </KibanaContextProviderForPlugin>
   );
 };

x-pack/plugins/infra/public/components/loading_page.tsx

@@ -11,12 +11,12 @@ import {
   EuiPageBody,
   EuiPageContent,
 } from '@elastic/eui';
-import React from 'react';
+import React, { ReactNode } from 'react';
 
 import { FlexPage } from './page';
 
 interface LoadingPageProps {
-  message?: string | JSX.Element;
+  message?: ReactNode;
 }
 
 export const LoadingPage = ({ message }: LoadingPageProps) => (

x-pack/plugins/infra/public/hooks/use_kibana.ts

@@ -0,0 +1,25 @@
+/*
+ * 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 { CoreStart } from '../../../../../src/core/public';
+import {
+  createKibanaReactContext,
+  KibanaReactContextValue,
+  useKibana,
+} from '../../../../../src/plugins/kibana_react/public';
+import { InfraClientStartDeps } from '../types';
+
+export type PluginKibanaContextValue = CoreStart & InfraClientStartDeps;
+
+export const createKibanaContextForPlugin = (core: CoreStart, pluginsStart: InfraClientStartDeps) =>
+  createKibanaReactContext<PluginKibanaContextValue>({
+    ...core,
+    ...pluginsStart,
+  });
+
+export const useKibanaContextForPlugin = useKibana as () => KibanaReactContextValue<
+  PluginKibanaContextValue
+>;

x-pack/plugins/infra/public/hooks/use_kibana_space.ts

@@ -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;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { useAsync } from 'react-use';
+import { useKibanaContextForPlugin } from '../hooks/use_kibana';
+import type { Space } from '../../../spaces/public';
+
+export type ActiveSpace =
+  | { isLoading: true; error: undefined; space: undefined }
+  | { isLoading: false; error: Error; space: undefined }
+  | { isLoading: false; error: undefined; space: Space };
+
+export const useActiveKibanaSpace = (): ActiveSpace => {
+  const kibana = useKibanaContextForPlugin();
+
+  const asyncActiveSpace = useAsync(kibana.services.spaces.getActiveSpace);
+
+  if (asyncActiveSpace.loading) {
+    return {
+      isLoading: true,
+      error: undefined,
+      space: undefined,
+    };
+  } else if (asyncActiveSpace.error) {
+    return {
+      isLoading: false,
+      error: asyncActiveSpace.error,
+      space: undefined,
+    };
+  } else {
+    return {
+      isLoading: false,
+      error: undefined,
+      space: asyncActiveSpace.value!,
+    };
+  }
+};

x-pack/plugins/infra/public/pages/logs/log_entry_categories/page_providers.tsx

@@ -7,18 +7,25 @@
 import React from 'react';
 import { LogEntryCategoriesModuleProvider } from '../../../containers/logs/log_analysis/modules/log_entry_categories';
 import { useLogSourceContext } from '../../../containers/logs/log_source';
-import { useKibanaSpaceId } from '../../../utils/use_kibana_space_id';
+import { useActiveKibanaSpace } from '../../../hooks/use_kibana_space';
 
 export const LogEntryCategoriesPageProviders: React.FunctionComponent = ({ children }) => {
-  const { sourceId, sourceConfiguration } = useLogSourceContext();
-  const spaceId = useKibanaSpaceId();
+  const { sourceConfiguration, sourceId } = useLogSourceContext();
+  const { space } = useActiveKibanaSpace();
+
+  // This is a rather crude way of guarding the dependent providers against
+  // arguments that are only made available asynchronously. Ideally, we'd use
+  // React concurrent mode and Suspense in order to handle that more gracefully.
+  if (sourceConfiguration?.configuration.logAlias == null || space == null) {
+    return null;
+  }
 
   return (
     <LogEntryCategoriesModuleProvider
-      indexPattern={sourceConfiguration?.configuration.logAlias ?? ''}
+      indexPattern={sourceConfiguration.configuration.logAlias}
       sourceId={sourceId}
-      spaceId={spaceId}
-      timestampField={sourceConfiguration?.configuration.fields.timestamp ?? ''}
+      spaceId={space.id}
+      timestampField={sourceConfiguration.configuration.fields.timestamp}
     >
       {children}
     </LogEntryCategoriesModuleProvider>

x-pack/plugins/infra/public/pages/logs/log_entry_rate/page_providers.tsx

@@ -9,23 +9,30 @@ import { LogAnalysisSetupFlyoutStateProvider } from '../../../components/logging
 import { LogEntryCategoriesModuleProvider } from '../../../containers/logs/log_analysis/modules/log_entry_categories';
 import { LogEntryRateModuleProvider } from '../../../containers/logs/log_analysis/modules/log_entry_rate';
 import { useLogSourceContext } from '../../../containers/logs/log_source';
-import { useKibanaSpaceId } from '../../../utils/use_kibana_space_id';
+import { useActiveKibanaSpace } from '../../../hooks/use_kibana_space';
 
 export const LogEntryRatePageProviders: React.FunctionComponent = ({ children }) => {
   const { sourceId, sourceConfiguration } = useLogSourceContext();
-  const spaceId = useKibanaSpaceId();
+  const { space } = useActiveKibanaSpace();
+
+  // This is a rather crude way of guarding the dependent providers against
+  // arguments that are only made available asynchronously. Ideally, we'd use
+  // React concurrent mode and Suspense in order to handle that more gracefully.
+  if (sourceConfiguration?.configuration.logAlias == null || space == null) {
+    return null;
+  }
 
   return (
     <LogEntryRateModuleProvider
       indexPattern={sourceConfiguration?.configuration.logAlias ?? ''}
       sourceId={sourceId}
-      spaceId={spaceId}
+      spaceId={space.id}
       timestampField={sourceConfiguration?.configuration.fields.timestamp ?? ''}
     >
       <LogEntryCategoriesModuleProvider
         indexPattern={sourceConfiguration?.configuration.logAlias ?? ''}
         sourceId={sourceId}
-        spaceId={spaceId}
+        spaceId={space.id}
         timestampField={sourceConfiguration?.configuration.fields.timestamp ?? ''}
       >
         <LogAnalysisSetupFlyoutStateProvider>{children}</LogAnalysisSetupFlyoutStateProvider>

x-pack/plugins/infra/public/types.ts

@@ -4,16 +4,20 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { CoreSetup, CoreStart, Plugin as PluginClass } from 'kibana/public';
-import { DataPublicPluginStart } from '../../../../src/plugins/data/public';
-import { HomePublicPluginSetup } from '../../../../src/plugins/home/public';
-import {
+import type { CoreSetup, CoreStart, Plugin as PluginClass } from 'kibana/public';
+import type { DataPublicPluginStart } from '../../../../src/plugins/data/public';
+import type { HomePublicPluginSetup } from '../../../../src/plugins/home/public';
+import type {
   UsageCollectionSetup,
   UsageCollectionStart,
 } from '../../../../src/plugins/usage_collection/public';
-import { TriggersAndActionsUIPublicPluginSetup } from '../../../plugins/triggers_actions_ui/public';
-import { DataEnhancedSetup, DataEnhancedStart } from '../../data_enhanced/public';
-import { ObservabilityPluginSetup, ObservabilityPluginStart } from '../../observability/public';
+import type { TriggersAndActionsUIPublicPluginSetup } from '../../../plugins/triggers_actions_ui/public';
+import type { DataEnhancedSetup, DataEnhancedStart } from '../../data_enhanced/public';
+import type {
+  ObservabilityPluginSetup,
+  ObservabilityPluginStart,
+} from '../../observability/public';
+import type { SpacesPluginStart } from '../../spaces/public';
 
 // Our own setup and start contract values
 export type InfraClientSetupExports = void;
@@ -31,6 +35,7 @@ export interface InfraClientStartDeps {
   data: DataPublicPluginStart;
   dataEnhanced: DataEnhancedStart;
   observability: ObservabilityPluginStart;
+  spaces: SpacesPluginStart;
   triggers_actions_ui: TriggersAndActionsUIPublicPluginSetup;
   usageCollection: UsageCollectionStart;
 }