[7.x] [Logs UI] Improve infra plugin compatibility with TS 3.7… (#50701)

Backports the following commits to 7.x:
 - [Logs UI] Improve infra plugin compatibility with TS 3.7 (#50491)

x-pack/legacy/common/eui_styled_components/eui_styled_components.tsx

@@ -38,6 +38,6 @@ const {
   injectGlobal,
   keyframes,
   withTheme,
-} = styledComponents as ThemedStyledComponentsModule<EuiTheme>;
+} = (styledComponents as unknown) as ThemedStyledComponentsModule<EuiTheme>;
 
 export { css, euiStyled, EuiThemeProvider, injectGlobal, keyframes, withTheme };

x-pack/legacy/plugins/infra/public/components/help_center_content.tsx

@@ -5,7 +5,7 @@
  */
 
 import { EuiLink } from '@elastic/eui';
-import React from 'react';
+import React, { useEffect } from 'react';
 import ReactDOM from 'react-dom';
 import chrome from 'ui/chrome';
 
@@ -20,17 +20,21 @@ const Content: React.FC<HelpCenterContentProps> = ({ feedbackLink, feedbackLinkT
   </EuiLink>
 );
 
-export class HelpCenterContent extends React.Component<HelpCenterContentProps> {
-  public componentDidMount = () => {
+export const HelpCenterContent: React.FC<HelpCenterContentProps> = ({
+  feedbackLink,
+  feedbackLinkText,
+}) => {
+  useEffect(() => {
     chrome.helpExtension.set(domElement => {
-      ReactDOM.render(<Content {...this.props} />, domElement);
+      ReactDOM.render(
+        <Content feedbackLink={feedbackLink} feedbackLinkText={feedbackLinkText} />,
+        domElement
+      );
       return () => {
         ReactDOM.unmountComponentAtNode(domElement);
       };
     });
-  };
+  }, [feedbackLink, feedbackLinkText]);
 
-  public render = () => {
-    return null;
-  };
-}
+  return null;
+};

x-pack/legacy/plugins/infra/public/containers/waffle/with_waffle_options.tsx

@@ -90,7 +90,7 @@ export const WithWaffleOptionsUrlState = () => (
       changeAutoBounds,
       changeBoundsOverride,
     }) => (
-      <UrlStateContainer
+      <UrlStateContainer<WaffleOptionsUrlState>
         urlState={urlState}
         urlStateKey="waffleOptions"
         mapToUrlState={mapToUrlState}
@@ -158,8 +158,10 @@ const mapToUrlState = (value: any): WaffleOptionsUrlState | undefined =>
       }
     : undefined;
 
+const isInfraNodeType = (value: any): value is InfraNodeType => value in InfraNodeType;
+
 const isInfraSnapshotMetricInput = (subject: any): subject is InfraSnapshotMetricInput => {
-  return subject != null && subject.type != null && InfraSnapshotMetricType[subject.type] != null;
+  return subject != null && subject.type in InfraSnapshotMetricType;
 };
 
 const isInfraSnapshotGroupbyInput = (subject: any): subject is InfraSnapshotGroupbyInput => {
@@ -181,7 +183,7 @@ const mapToGroupByUrlState = (subject: any) => {
 };
 
 const mapToNodeTypeUrlState = (subject: any) => {
-  return subject && InfraNodeType[subject] ? subject : undefined;
+  return isInfraNodeType(subject) ? subject : undefined;
 };
 
 const mapToViewUrlState = (subject: any) => {

x-pack/legacy/plugins/infra/public/utils/typed_react.tsx

@@ -11,18 +11,18 @@ import { InferableComponentEnhancerWithProps } from 'react-redux';
 export type RendererResult = React.ReactElement<any> | null;
 export type RendererFunction<RenderArgs, Result = RendererResult> = (args: RenderArgs) => Result;
 
-export type ChildFunctionRendererProps<RenderArgs> = {
+export type ChildFunctionRendererProps<RenderArgs extends {}> = {
   children: RendererFunction<RenderArgs>;
   initializeOnMount?: boolean;
   resetOnUnmount?: boolean;
 } & RenderArgs;
 
-interface ChildFunctionRendererOptions<RenderArgs> {
+interface ChildFunctionRendererOptions<RenderArgs extends {}> {
   onInitialize?: (props: RenderArgs) => void;
   onCleanup?: (props: RenderArgs) => void;
 }
 
-export const asChildFunctionRenderer = <InjectedProps, OwnProps>(
+export const asChildFunctionRenderer = <InjectedProps extends {}, OwnProps>(
   hoc: InferableComponentEnhancerWithProps<InjectedProps, OwnProps>,
   { onInitialize, onCleanup }: ChildFunctionRendererOptions<InjectedProps> = {}
 ) =>
@@ -43,7 +43,9 @@ export const asChildFunctionRenderer = <InjectedProps, OwnProps>(
       }
 
       public render() {
-        return this.props.children(this.getRendererArgs());
+        return (this.props.children as ChildFunctionRendererProps<InjectedProps>['children'])(
+          this.getRendererArgs()
+        );
       }
 
       private getRendererArgs = () =>

x-pack/legacy/plugins/infra/server/lib/snapshot/response_helpers.ts

@@ -73,11 +73,19 @@ export const getIPFromBucket = (
   nodeType: InfraNodeType,
   bucket: InfraSnapshotNodeGroupByBucket
 ): string | null => {
-  const ip = get(bucket, `ip.hits.hits[0]._source.${IP_FIELDS[nodeType]}`, null);
+  const ip = get<typeof bucket, unknown>(
+    bucket,
+    `ip.hits.hits[0]._source.${IP_FIELDS[nodeType]}`,
+    null
+  );
+
   if (Array.isArray(ip)) {
     return ip.find(isIPv4) || null;
+  } else if (typeof ip === 'string') {
+    return ip;
   }
-  return ip;
+
+  return null;
 };
 
 export const getNodePath = (