[ML] Using PropsWithChildren type (#182008)

Following up on #181257, adding `PropsWithChildren` to the types which
were missed.

x-pack/plugins/data_visualizer/public/application/common/components/stats_table/components/expanded_row_field_header/expanded_row_field_header.tsx

@@ -6,10 +6,11 @@
  */
 
 import { EuiText, useEuiTheme } from '@elastic/eui';
+import type { FC, PropsWithChildren } from 'react';
 import React from 'react';
 import { css } from '@emotion/react';
 
-export const ExpandedRowFieldHeader = ({ children }: { children: React.ReactNode }) => {
+export const ExpandedRowFieldHeader: FC<PropsWithChildren<unknown>> = ({ children }) => {
   const { euiTheme } = useEuiTheme();
 
   const dvExpandedRowFieldHeader = css({

x-pack/plugins/data_visualizer/public/application/common/components/stats_table/components/field_data_expanded_row/expanded_row_content.tsx

@@ -5,15 +5,14 @@
  * 2.0.
  */
 
-import type { FC, ReactNode } from 'react';
+import type { FC, PropsWithChildren } from 'react';
 import React from 'react';
 import { EuiFlexGroup } from '@elastic/eui';
 
 interface Props {
-  children: ReactNode;
   dataTestSubj: string;
 }
-export const ExpandedRowContent: FC<Props> = ({ children, dataTestSubj }) => {
+export const ExpandedRowContent: FC<PropsWithChildren<Props>> = ({ children, dataTestSubj }) => {
   return (
     <EuiFlexGroup data-test-subj={dataTestSubj} gutterSize={'s'} wrap={true}>
       {children}

x-pack/plugins/data_visualizer/public/application/common/components/stats_table/components/field_data_expanded_row/expanded_row_panel.tsx

@@ -5,18 +5,22 @@
  * 2.0.
  */
 
-import type { FC, ReactNode } from 'react';
+import type { FC, PropsWithChildren } from 'react';
 import React from 'react';
 import { EuiPanel } from '@elastic/eui';
 import type { EuiFlexItemProps } from '@elastic/eui/src/components/flex/flex_item';
 
 interface Props {
-  children: ReactNode;
   dataTestSubj?: string;
   grow?: EuiFlexItemProps['grow'];
   className?: string;
 }
-export const ExpandedRowPanel: FC<Props> = ({ children, dataTestSubj, grow, className }) => {
+export const ExpandedRowPanel: FC<PropsWithChildren<Props>> = ({
+  children,
+  dataTestSubj,
+  grow,
+  className,
+}) => {
   return (
     <EuiPanel
       data-test-subj={dataTestSubj}

x-pack/plugins/ml/public/application/components/collapsible_panel/collapsible_panel.tsx

@@ -14,19 +14,19 @@ import {
   EuiText,
   EuiTitle,
 } from '@elastic/eui';
+import type { PropsWithChildren } from 'react';
 import React, { type FC } from 'react';
 import { PanelHeaderItems } from './panel_header_items';
 import { useCurrentThemeVars } from '../../contexts/kibana';
 
 export interface CollapsiblePanelProps {
   isOpen: boolean;
   onToggle: (isOpen: boolean) => void;
-  children: React.ReactNode;
   header: React.ReactElement;
   headerItems?: React.ReactElement[];
 }
 
-export const CollapsiblePanel: FC<CollapsiblePanelProps> = ({
+export const CollapsiblePanel: FC<PropsWithChildren<CollapsiblePanelProps>> = ({
   isOpen,
   onToggle,
   children,

x-pack/plugins/ml/public/application/components/field_stats_flyout/field_stats_flyout_provider.tsx

@@ -5,7 +5,8 @@
  * 2.0.
  */
 
-import React, { useCallback, useState, type FC } from 'react';
+import type { PropsWithChildren, FC } from 'react';
+import React, { useCallback, useState } from 'react';
 import type { DataView } from '@kbn/data-plugin/common';
 import type { FieldStatsServices } from '@kbn/unified-field-list/src/components/field_stats';
 import type { TimeRange as TimeRangeMs } from '@kbn/ml-date-picker';
@@ -21,14 +22,15 @@ import { FieldStatsFlyout } from './field_stats_flyout';
 import { MLFieldStatsFlyoutContext } from './use_field_stats_flytout_context';
 import { PopulatedFieldsCacheManager } from './populated_fields/populated_fields_cache_manager';
 
-export const FieldStatsFlyoutProvider: FC<{
-  children?: React.ReactNode;
-  dataView: DataView;
-  fieldStatsServices: FieldStatsServices;
-  timeRangeMs?: TimeRangeMs;
-  dslQuery?: FieldStatsProps['dslQuery'];
-  disablePopulatedFields?: boolean;
-}> = ({
+export const FieldStatsFlyoutProvider: FC<
+  PropsWithChildren<{
+    dataView: DataView;
+    fieldStatsServices: FieldStatsServices;
+    timeRangeMs?: TimeRangeMs;
+    dslQuery?: FieldStatsProps['dslQuery'];
+    disablePopulatedFields?: boolean;
+  }>
+> = ({
   dataView,
   fieldStatsServices,
   timeRangeMs,

x-pack/plugins/ml/public/application/components/header_menu_portal/header_menu_portal.tsx

@@ -5,19 +5,15 @@
  * 2.0.
  */
 
-import type { FC, ReactNode } from 'react';
+import type { FC, PropsWithChildren } from 'react';
 import React, { useContext, useEffect, useMemo } from 'react';
 import { createHtmlPortalNode, InPortal, OutPortal } from 'react-reverse-portal';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 import { toMountPoint } from '@kbn/react-kibana-mount';
 import { useMlKibana } from '../../contexts/kibana';
 import { MlPageControlsContext } from '../ml_page';
 
-export interface HeaderMenuPortalProps {
-  children: ReactNode;
-}
-
-export const HeaderMenuPortal: FC<HeaderMenuPortalProps> = ({ children }) => {
+export const HeaderMenuPortal: FC<PropsWithChildren<unknown>> = ({ children }) => {
   const { services } = useMlKibana();
 
   const { setHeaderActionMenu } = useContext(MlPageControlsContext);

x-pack/plugins/ml/public/application/components/help_popover/help_popover.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import type { FC } from 'react';
+import type { FC, PropsWithChildren } from 'react';
 import React, { useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import type { EuiLinkButtonProps, EuiPopoverProps } from '@elastic/eui';
@@ -27,12 +27,15 @@ export const HelpPopoverButton: FC<{ onClick: EuiLinkButtonProps['onClick'] }> =
 };
 
 interface HelpPopoverProps {
-  children: React.ReactNode;
   anchorPosition?: EuiPopoverProps['anchorPosition'];
   title?: string;
 }
 
-export const HelpPopover: FC<HelpPopoverProps> = ({ anchorPosition, children, title }) => {
+export const HelpPopover: FC<PropsWithChildren<HelpPopoverProps>> = ({
+  anchorPosition,
+  children,
+  title,
+}) => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
   return (

x-pack/plugins/ml/public/application/contexts/ml/data_source_context.tsx

@@ -5,6 +5,7 @@
  * 2.0.
  */
 
+import type { PropsWithChildren } from 'react';
 import React, { type FC, useCallback, useContext, useEffect, useState } from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { useLocation } from 'react-router-dom';
@@ -34,7 +35,7 @@ export const DataSourceContext = React.createContext<DataSourceContextValue>(
  * @param children
  * @constructor
  */
-export const DataSourceContextProvider: FC<{ children?: React.ReactNode }> = ({ children }) => {
+export const DataSourceContextProvider: FC<PropsWithChildren<unknown>> = ({ children }) => {
   const [value, setValue] = useState<DataSourceContextValue>();
   const [error, setError] = useState<Error>();
 

x-pack/plugins/ml/public/application/contexts/ml/ml_notifications_context.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import type { FC } from 'react';
+import type { FC, PropsWithChildren } from 'react';
 import React, { useContext, useState, useEffect } from 'react';
 import { combineLatest, timer } from 'rxjs';
 import { switchMap, map, tap, retry } from 'rxjs';
@@ -39,9 +39,7 @@ export const MlNotificationsContext = React.createContext<{
   setLastCheckedAt: () => {},
 });
 
-export const MlNotificationsContextProvider: FC<{ children?: React.ReactNode }> = ({
-  children,
-}) => {
+export const MlNotificationsContextProvider: FC<PropsWithChildren<unknown>> = ({ children }) => {
   const {
     services: {
       mlServices: { mlApiServices },

x-pack/plugins/ml/public/application/contexts/ml/serverless_context.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import type { FC } from 'react';
+import type { FC, PropsWithChildren } from 'react';
 import React, { createContext, useContext, useMemo } from 'react';
 import type { ExperimentalFeatures, MlFeatures } from '../../../../common/constants/app';
 
@@ -28,14 +28,13 @@ export const EnabledFeaturesContext = createContext({
 });
 
 interface Props {
-  children: React.ReactNode;
   isServerless: boolean;
   mlFeatures: MlFeatures;
   showMLNavMenu?: boolean;
   experimentalFeatures?: ExperimentalFeatures;
 }
 
-export const EnabledFeaturesContextProvider: FC<Props> = ({
+export const EnabledFeaturesContextProvider: FC<PropsWithChildren<Props>> = ({
   children,
   isServerless,
   showMLNavMenu = true,

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/details_step/description.tsx

@@ -13,7 +13,7 @@ import { EuiDescribedFormGroup, EuiFormRow, EuiLink } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { useMlKibana } from '../../../../../contexts/kibana';
 
-export const Description: FC<PropsWithChildren<{}>> = memo(({ children }) => {
+export const Description: FC<PropsWithChildren<unknown>> = memo(({ children }) => {
   const {
     services: { docLinks },
   } = useMlKibana();

x-pack/plugins/ml/public/application/data_frame_analytics/pages/job_map/components/cytoscape.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import type { CSSProperties, ReactNode } from 'react';
+import type { CSSProperties, PropsWithChildren } from 'react';
 import React, { useState, useRef, useEffect, createContext, useCallback, useMemo } from 'react';
 import { css } from '@emotion/react';
 import cytoscape, { type Stylesheet } from 'cytoscape';
@@ -19,7 +19,6 @@ cytoscape.use(dagre);
 export const CytoscapeContext = createContext<cytoscape.Core | undefined>(undefined);
 
 interface CytoscapeProps {
-  children?: ReactNode;
   elements: cytoscape.ElementDefinition[];
   theme: EuiThemeType;
   height: number;
@@ -77,7 +76,7 @@ export function Cytoscape({
   resetCy,
   style,
   width,
-}: CytoscapeProps) {
+}: PropsWithChildren<CytoscapeProps>) {
   const cytoscapeOptions = useMemo(() => {
     return {
       ...getCytoscapeOptions(theme),

x-pack/plugins/ml/public/application/explorer/alerts/swim_lane_wrapper.tsx

@@ -26,6 +26,7 @@ import {
   type AlertStatus,
 } from '@kbn/rule-data-utils';
 import { pick } from 'lodash';
+import type { PropsWithChildren } from 'react';
 import React, { type FC, useCallback, useMemo, useRef } from 'react';
 import useObservable from 'react-use/lib/useObservable';
 import { i18n } from '@kbn/i18n';
@@ -49,7 +50,6 @@ import { statusNameMap } from './const';
 import { Y_AXIS_LABEL_WIDTH } from '../constants';
 
 export interface SwimLaneWrapperProps {
-  children: React.ReactNode;
   selection?: AppStateSelectedCells | null;
   swimlaneContainerWidth?: number;
   swimLaneData: SwimlaneData;
@@ -59,7 +59,7 @@ export interface SwimLaneWrapperProps {
  * Wrapper component for the swim lane
  * that handles the popover for the selected cells.
  */
-export const SwimLaneWrapper: FC<SwimLaneWrapperProps> = ({
+export const SwimLaneWrapper: FC<PropsWithChildren<SwimLaneWrapperProps>> = ({
   children,
   selection,
   swimlaneContainerWidth,

x-pack/plugins/ml/public/application/explorer/anomaly_explorer_context.tsx

@@ -5,6 +5,7 @@
  * 2.0.
  */
 
+import type { PropsWithChildren } from 'react';
 import React, { useContext, useEffect, useMemo, useState, type FC } from 'react';
 import { useTimefilter } from '@kbn/ml-date-picker';
 import { AnomalyTimelineStateService } from './anomaly_timeline_state_service';
@@ -52,9 +53,7 @@ export function useAnomalyExplorerContext() {
 /**
  * Anomaly Explorer Context Provider.
  */
-export const AnomalyExplorerContextProvider: FC<{ children?: React.ReactNode }> = ({
-  children,
-}) => {
+export const AnomalyExplorerContextProvider: FC<PropsWithChildren<unknown>> = ({ children }) => {
   const [, , anomalyExplorerUrlStateService] = useExplorerUrlState();
 
   const timefilter = useTimefilter();

x-pack/plugins/ml/public/application/explorer/explorer.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import type { FC } from 'react';
+import type { FC, PropsWithChildren } from 'react';
 import React, { useCallback, useEffect, useMemo, useState, useRef } from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
@@ -102,10 +102,9 @@ interface ExplorerPageProps {
   queryString?: string;
   updateLanguage?: (language: string) => void;
   dataViews?: DataView[];
-  children: React.ReactNode;
 }
 
-const ExplorerPage: FC<ExplorerPageProps> = ({
+const ExplorerPage: FC<PropsWithChildren<ExplorerPageProps>> = ({
   children,
   jobSelectorProps,
   noInfluencersConfigured,

x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/loading_wrapper/loading_wrapper.tsx

@@ -5,18 +5,22 @@
  * 2.0.
  */
 
-import type { FC } from 'react';
+import type { FC, PropsWithChildren } from 'react';
 import React, { Fragment } from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui';
 
 interface Props {
   hasData: boolean;
   height?: string;
   loading?: boolean;
-  children?: React.ReactNode;
 }
 
-export const LoadingWrapper: FC<Props> = ({ hasData, loading = false, height, children }) => {
+export const LoadingWrapper: FC<PropsWithChildren<Props>> = ({
+  hasData,
+  loading = false,
+  height,
+  children,
+}) => {
   const opacity = loading === true ? (hasData === true ? 0.3 : 0) : 1;
 
   return (

x-pack/plugins/ml/public/application/jobs/new_job/pages/components/common/model_memory_limit/description.tsx

@@ -5,19 +5,18 @@
  * 2.0.
  */
 
-import type { FC } from 'react';
+import type { FC, PropsWithChildren } from 'react';
 import React, { memo } from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { EuiDescribedFormGroup, EuiFormRow } from '@elastic/eui';
 import type { Validation } from '../../../../common/job_validator';
 
 interface Props {
-  children: React.ReactNode;
   validation: Validation;
 }
 
-export const Description: FC<Props> = memo(({ children, validation }) => {
+export const Description: FC<PropsWithChildren<Props>> = memo(({ children, validation }) => {
   const title = i18n.translate(
     'xpack.ml.newJob.wizard.jobDetailsStep.advancedSection.modelMemoryLimit.title',
     {

x-pack/plugins/ml/public/application/jobs/new_job/pages/components/datafeed_step/components/data_view/description.tsx

@@ -5,12 +5,13 @@
  * 2.0.
  */
 
+import type { FC, PropsWithChildren } from 'react';
 import React, { memo } from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { EuiDescribedFormGroup, EuiFormRow } from '@elastic/eui';
 
-export const Description = memo(({ children }: { children?: React.ReactNode }) => {
+export const Description: FC<PropsWithChildren<unknown>> = memo(({ children }) => {
   const title = i18n.translate('xpack.ml.newJob.wizard.datafeedStep.dataView.title', {
     defaultMessage: 'Data view',
   });