[react@18] Implicit children type fixes (#192011)

## Summary

Part of https://github.com/elastic/kibana/issues/138222

in @types/react@18 types [have become more
strict](https://github.com/DefinitelyTyped/DefinitelyTyped/pull/56210).
This PR addresses a bunch of easy fixes. The most common are:

### 1 Removal of implicit children

For components that do implement children but relied on their implicit
declaration from React.FunctionComponent or React.Component:

```diff
 interface Props {
+  children?: React.ReactNode;
 }

 class SomeClassComponents React.Component<Props> {
   render() {
     return  <div>{this.props.children}</div>
   }
 }
 const SomeFunctionComponent: React.FunctionComponent<Props> = props => <div>{props.children}</div>
```

or 

```diff
- const SomeFunctionComponent: React.FunctionComponent<Props> = props => <div>{props.children}</div>
+ const SomeFunctionComponent: React.FunctionComponent<React.PropsWithChildren<Props>> = props => <div>{props.children}</div>
```


*Note 1:*
The most common change occurs in unit tests where `renderHook` and
`wrapper` are used. I had to re-type the props so that `children` were
there

```diff
const { result } = renderHook(
         () => {
           return useLicense();
         },
         {
-           wrapper: ({ children }) => (
+           wrapper: ({ children }: React.PropsWithChildren<{}>) => (
             <TestProviders license={license}>{children}</TestProviders>
           ),
         }
       );
```

```diff
- const { result } = renderHook<GetCasesColumn, UseCasesColumnsReturnValue>(
+ const { result } = renderHook<React.PropsWithChildren<GetCasesColumn>, UseCasesColumnsReturnValue>(
       () => useCasesColumns(defaultColumnArgs),
       {
         wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
       }
     );
```



*Note 2:*
With @types/react@17 the components that don't have any props apart from
`children` I had to use `React.PropsWithChildren<{}>`, whereas in
@types/react@18 the argument becomes optional, so it can be omitted, and
type simpler with `React.PropsWithChildren` without an argument



### 2 `this.context` becomes `unknown` (was `any`)

In a couple of places where `this.context` is used, I had to type it

### 3 `ComponentType` from enzyme is no longer compatible with
`ComponentType` from react

This one is a bummer, but where `wrappingComponent` with enzyme is used
I had to cast it to type from `enzyme`

```diff
- import { mount } from 'enzyme'
+ import { mount, ComponentType } from 'enzyme'

 wrapper = mount(<ClosureOptions {...props} />, {
-       wrappingComponent: TestProviders,
+       wrappingComponent: TestProviders as ComponentType<{}>,
});
```

packages/cloud/connection_details/components/spa_no_router_link/spa_no_router_link.tsx

@@ -21,7 +21,7 @@ export interface SpaNoRouterLinkProps {
   'data-test-subj'?: string;
 }
 
-export const SpaNoRouterLink: React.FC<SpaNoRouterLinkProps> = ({
+export const SpaNoRouterLink: React.FC<React.PropsWithChildren<SpaNoRouterLinkProps>> = ({
   url,
   go,
   onClick,

packages/cloud/connection_details/context/options.tsx

@@ -14,10 +14,9 @@ import { context as serviceContext } from './service';
 
 export const context = React.createContext<ConnectionDetailsOpts>({});
 
-export const ConnectionDetailsOptsProvider: React.FC<ConnectionDetailsOpts> = ({
-  children,
-  ...opts
-}) => {
+export const ConnectionDetailsOptsProvider: React.FC<
+  React.PropsWithChildren<ConnectionDetailsOpts>
+> = ({ children, ...opts }) => {
   const service = React.useMemo(() => new ConnectionDetailsService(opts), [opts]);
 
   return (

packages/cloud/connection_details/kibana/kibana_connection_details_provider.tsx

@@ -138,9 +138,9 @@ export interface KibanaConnectionDetailsProviderProps {
   };
 }
 
-export const KibanaConnectionDetailsProvider: React.FC<KibanaConnectionDetailsProviderProps> = (
-  props
-) => {
+export const KibanaConnectionDetailsProvider: React.FC<
+  React.PropsWithChildren<KibanaConnectionDetailsProviderProps>
+> = (props) => {
   const opts = useAsyncMemo(
     () => createOpts(props),
     [props.onNavigation, props.options, props.start]

packages/cloud/connection_details/kibana/kibana_wired_connection_details_provider.tsx

@@ -20,7 +20,7 @@ export type KibanaWiredConnectionDetailsProviderProps = Omit<
 >;
 
 export const KibanaWiredConnectionDetailsProvider: React.FC<
-  KibanaWiredConnectionDetailsProviderProps
+  React.PropsWithChildren<KibanaWiredConnectionDetailsProviderProps>
 > = (props) => {
   return (
     <KibanaConnectionDetailsProvider {...props} start={getGlobalDependencies().start}>

packages/cloud/connection_details/stories.tsx

@@ -42,7 +42,7 @@ const defaultOpts: ConnectionDetailsOpts = {
   },
 };
 
-export const StoriesProvider: React.FC<Partial<ConnectionDetailsOpts>> = ({
+export const StoriesProvider: React.FC<React.PropsWithChildren<Partial<ConnectionDetailsOpts>>> = ({
   children,
   ...rest
 }) => {
@@ -53,7 +53,9 @@ export const StoriesProvider: React.FC<Partial<ConnectionDetailsOpts>> = ({
   );
 };
 
-export const StoriesProviderKeyCreationError: React.FC = ({ children }) => {
+export const StoriesProviderKeyCreationError: React.FC<React.PropsWithChildren<{}>> = ({
+  children,
+}) => {
   const opts: ConnectionDetailsOpts = {
     ...defaultOpts,
     apiKeys: {
@@ -68,7 +70,9 @@ export const StoriesProviderKeyCreationError: React.FC = ({ children }) => {
   return <ConnectionDetailsOptsProvider {...opts}>{children}</ConnectionDetailsOptsProvider>;
 };
 
-export const StoriesProviderNoKeyPermissions: React.FC = ({ children }) => {
+export const StoriesProviderNoKeyPermissions: React.FC<React.PropsWithChildren<{}>> = ({
+  children,
+}) => {
   const opts: ConnectionDetailsOpts = {
     ...defaultOpts,
     apiKeys: {

packages/content-management/content_editor/src/components/metadata_form.tsx

@@ -36,7 +36,7 @@ interface Props {
 
 const isFormFieldValid = (field: Field) => !Boolean(field.errors?.length);
 
-export const MetadataForm: FC<Props> = ({
+export const MetadataForm: FC<React.PropsWithChildren<Props>> = ({
   form,
   tagsReferences,
   TagList,

packages/content-management/favorites/favorites_public/src/favorites_context.tsx

@@ -18,7 +18,7 @@ interface FavoritesContextValue {
 
 const FavoritesContext = React.createContext<FavoritesContextValue | null>(null);
 
-export const FavoritesContextProvider: React.FC<FavoritesContextValue> = ({
+export const FavoritesContextProvider: React.FC<React.PropsWithChildren<FavoritesContextValue>> = ({
   favoritesClient,
   notifyError,
   children,

packages/content-management/table_list_view_table/src/components/tag_filter_panel.tsx

@@ -57,7 +57,10 @@ interface Context {
 
 const TagFilterContext = React.createContext<Context | null>(null);
 
-export const TagFilterContextProvider: FC<Context> = ({ children, ...props }) => {
+export const TagFilterContextProvider: FC<React.PropsWithChildren<Context>> = ({
+  children,
+  ...props
+}) => {
   return <TagFilterContext.Provider value={props}>{children}</TagFilterContext.Provider>;
 };
 

packages/content-management/table_list_view_table/src/components/user_filter_panel.tsx

@@ -25,7 +25,10 @@ interface Context {
 
 const UserFilterContext = React.createContext<Context | null>(null);
 
-export const UserFilterContextProvider: FC<Context> = ({ children, ...props }) => {
+export const UserFilterContextProvider: FC<React.PropsWithChildren<Context>> = ({
+  children,
+  ...props
+}) => {
   if (!props.enabled) {
     return <>{children}</>;
   }

packages/core/notifications/core-notifications-browser-internal/src/toasts/deduplicate_toasts.test.tsx

@@ -121,7 +121,7 @@ function verifyTextAndTitle(
   expect(text).toEqual(expectedText);
 }
 
-function getNodeText(node: ReactNode) {
+function getNodeText(node: ReactNode | MountPoint) {
   const rendered = render(node as ReactElement);
   return rendered.text();
 }

packages/kbn-alerts-ui-shared/src/common/hooks/use_alerts_data_view.test.tsx

@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import React, { FunctionComponent } from 'react';
+import React from 'react';
 import { AlertConsumers } from '@kbn/rule-data-utils';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { renderHook } from '@testing-library/react-hooks/dom';
@@ -46,7 +46,7 @@ mockServices.dataViewsService.create.mockResolvedValue(mockDataView);
 
 const queryClient = new QueryClient(testQueryClientConfig);
 
-const wrapper: FunctionComponent = ({ children }) => (
+const wrapper: React.FC<React.PropsWithChildren<{}>> = ({ children }) => (
   <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
 );
 

packages/kbn-alerts-ui-shared/src/common/hooks/use_create_rule.test.tsx

@@ -66,7 +66,7 @@ const ruleToCreate: CreateRuleBody<RuleTypeParams> = {
 
 const queryClient = new QueryClient();
 
-const wrapper = ({ children }: { children: Node }) => (
+const wrapper = ({ children }: { children: React.ReactNode }) => (
   <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
 );
 

packages/kbn-alerts-ui-shared/src/common/hooks/use_fetch_alerts_fields_query.test.tsx

@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import React, { FunctionComponent } from 'react';
+import React, { FC } from 'react';
 import { AlertConsumers } from '@kbn/rule-data-utils';
 import * as ReactQuery from '@tanstack/react-query';
 import { renderHook } from '@testing-library/react-hooks';
@@ -19,7 +19,7 @@ const { QueryClient, QueryClientProvider } = ReactQuery;
 
 const queryClient = new QueryClient(testQueryClientConfig);
 
-const wrapper: FunctionComponent = ({ children }) => (
+const wrapper: FC<React.PropsWithChildren<{}>> = ({ children }) => (
   <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
 );
 
@@ -62,7 +62,10 @@ describe('useFetchAlertsFieldsQuery', () => {
 
   it('should correctly override the `enabled` option', () => {
     const { rerender } = renderHook(
-      ({ featureIds, enabled }: { featureIds: AlertConsumers[]; enabled?: boolean }) =>
+      ({
+        featureIds,
+        enabled,
+      }: React.PropsWithChildren<{ featureIds: AlertConsumers[]; enabled?: boolean }>) =>
         useFetchAlertsFieldsQuery({ http: mockHttpClient, featureIds }, { enabled }),
       {
         wrapper,

packages/kbn-alerts-ui-shared/src/common/hooks/use_fetch_alerts_index_names_query.test.tsx

@@ -19,7 +19,7 @@ jest.mock('../apis/fetch_alerts_index_names');
 
 const queryClient = new QueryClient(testQueryClientConfig);
 
-const wrapper: FunctionComponent = ({ children }) => (
+const wrapper: FunctionComponent<React.PropsWithChildren<{}>> = ({ children }) => (
   <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
 );
 

packages/kbn-alerts-ui-shared/src/common/hooks/use_get_alerts_group_aggregations_query.test.tsx

@@ -26,7 +26,7 @@ const queryClient = new QueryClient({
   },
 });
 
-const wrapper = ({ children }: { children: Node }) => (
+const wrapper = ({ children }: { children: React.ReactNode }) => (
   <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
 );
 

packages/kbn-alerts-ui-shared/src/common/hooks/use_health_check.test.tsx

@@ -33,7 +33,7 @@ const { fetchAlertingFrameworkHealth } = jest.requireMock(
 
 const queryClient = new QueryClient();
 
-const wrapper = ({ children }: { children: Node }) => (
+const wrapper = ({ children }: { children: React.ReactNode }) => (
   <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
 );
 

packages/kbn-alerts-ui-shared/src/common/hooks/use_load_connector_types.test.tsx

@@ -17,7 +17,7 @@ import { useLoadActionTypes } from './use_load_connector_types';
 
 const queryClient = new QueryClient();
 
-const wrapper = ({ children }: { children: Node }) => (
+const wrapper = ({ children }: { children: React.ReactNode }) => (
   <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
 );
 

packages/kbn-alerts-ui-shared/src/common/hooks/use_load_connectors.test.tsx

@@ -17,7 +17,7 @@ import { useLoadConnectors } from './use_load_connectors';
 
 const queryClient = new QueryClient();
 
-const wrapper = ({ children }: { children: Node }) => (
+const wrapper = ({ children }: { children: React.ReactNode }) => (
   <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
 );
 

packages/kbn-alerts-ui-shared/src/common/hooks/use_load_rule_type_aad_template_fields.test.tsx

@@ -17,7 +17,7 @@ import { useLoadRuleTypeAadTemplateField } from './use_load_rule_type_aad_templa
 
 const queryClient = new QueryClient();
 
-const wrapper = ({ children }: { children: Node }) => (
+const wrapper = ({ children }: { children: React.ReactNode }) => (
   <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
 );
 

packages/kbn-alerts-ui-shared/src/common/hooks/use_resolve_rule.test.tsx

@@ -17,7 +17,7 @@ import { useResolveRule } from './use_resolve_rule';
 
 const queryClient = new QueryClient();
 
-const wrapper = ({ children }: { children: Node }) => (
+const wrapper = ({ children }: { children: React.ReactNode }) => (
   <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
 );
 

packages/kbn-alerts-ui-shared/src/common/hooks/use_search_alerts_query.test.tsx

@@ -111,7 +111,7 @@ describe('useSearchAlertsQuery', () => {
     sort: [],
   };
 
-  const wrapper: FunctionComponent = ({ children }) => (
+  const wrapper: FunctionComponent<React.PropsWithChildren<{}>> = ({ children }) => (
     <QueryClientProvider client={queryClient} context={AlertsQueryContext}>
       {children}
     </QueryClientProvider>

packages/kbn-alerts-ui-shared/src/common/hooks/use_update_rule.test.tsx

@@ -63,7 +63,7 @@ const ruleToUpdate: UpdateRuleBody<RuleTypeParams> = {
 
 const queryClient = new QueryClient();
 
-const wrapper = ({ children }: { children: Node }) => (
+const wrapper = ({ children }: { children: React.ReactNode }) => (
   <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
 );
 

packages/kbn-alerts-ui-shared/src/common/hooks/use_virtual_data_view_query.test.tsx

@@ -20,7 +20,7 @@ const useQuerySpy = jest.spyOn(ReactQuery, 'useQuery');
 
 const queryClient = new QueryClient(testQueryClientConfig);
 
-const wrapper: FunctionComponent = ({ children }) => (
+const wrapper: FunctionComponent<React.PropsWithChildren<{}>> = ({ children }) => (
   <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
 );
 
@@ -38,7 +38,7 @@ describe('useVirtualDataViewQuery', () => {
 
   it('does not create a data view if indexNames is empty or nullish', () => {
     const { rerender } = renderHook(
-      ({ indexNames }: { indexNames: string[] }) =>
+      ({ indexNames }: React.PropsWithChildren<{ indexNames: string[] }>) =>
         useVirtualDataViewQuery({ dataViewsService: mockDataViewsService, indexNames }),
       {
         wrapper,

packages/kbn-alerts-ui-shared/src/rule_form/hooks/use_load_dependencies.test.tsx

@@ -143,7 +143,7 @@ getAvailableRuleTypes.mockReturnValue([
 
 const queryClient = new QueryClient();
 
-const wrapper = ({ children }: { children: Node }) => (
+const wrapper = ({ children }: { children: React.ReactNode }) => (
   <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
 );
 

packages/kbn-alerts-ui-shared/src/rule_form/rule_form_errors/rule_form_circuit_breaker_error.tsx

@@ -14,7 +14,7 @@ import {
   CIRCUIT_BREAKER_SEE_FULL_ERROR_TEXT,
 } from '../translations';
 
-export const RuleFormCircuitBreakerError: FC<{}> = ({ children }) => {
+export const RuleFormCircuitBreakerError: FC<React.PropsWithChildren<{}>> = ({ children }) => {
   const [showDetails, setShowDetails] = useState(false);
 
   const onToggleShowDetails = useCallback(() => {

packages/kbn-alerts-ui-shared/src/rule_form/rule_form_errors/rule_form_error_prompt_wrapper.tsx

@@ -15,11 +15,9 @@ interface RuleFormErrorPromptWrapperProps {
   hasShadow?: boolean;
 }
 
-export const RuleFormErrorPromptWrapper: React.FC<RuleFormErrorPromptWrapperProps> = ({
-  children,
-  hasBorder,
-  hasShadow,
-}) => {
+export const RuleFormErrorPromptWrapper: React.FC<
+  React.PropsWithChildren<RuleFormErrorPromptWrapperProps>
+> = ({ children, hasBorder, hasShadow }) => {
   const styles = useEuiBackgroundColorCSS().transparent;
   return (
     <EuiPageTemplate offset={0} css={styles}>

packages/kbn-alerts-ui-shared/src/rule_form/rule_form_state/rule_form_state_provider.tsx

@@ -17,7 +17,9 @@ export interface RuleFormStateProviderProps {
   initialRuleFormState: RuleFormState;
 }
 
-export const RuleFormStateProvider: React.FC<RuleFormStateProviderProps> = (props) => {
+export const RuleFormStateProvider: React.FC<
+  React.PropsWithChildren<RuleFormStateProviderProps>
+> = (props) => {
   const { children, initialRuleFormState } = props;
   const {
     formData,

packages/kbn-cases-components/src/__stories__/tooltip.stories.tsx

@@ -35,17 +35,17 @@ const tooltipContent: CaseTooltipContentProps = {
 };
 
 const tooltipProps: CaseTooltipProps = {
-  children: TestSpan,
+  children: <TestSpan />,
   loading: false,
   content: tooltipContent,
 };
 
-const longTitle = `Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
+const longTitle = `Lorem Ipsum is simply dummy text of the printing and typesetting industry.
   Lorem Ipsum has been the industry standard dummy text ever since the 1500s!! Lorem!!!`;
 
-const longDescription = `Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
-  Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer 
-  took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, 
+const longDescription = `Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+  Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
+  took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
   but also the leap into electronic typesetting, remaining essentially unchanged.`;
 
 const Template = (args: CaseTooltipProps) => (

packages/kbn-cases-components/src/tooltip/tooltip.test.tsx

@@ -33,7 +33,7 @@ const tooltipContent: CaseTooltipContentProps = {
 };
 
 const tooltipProps: CaseTooltipProps = {
-  children: TestSpan,
+  children: <TestSpan />,
   loading: false,
   content: tooltipContent,
 };

packages/kbn-test-jest-helpers/src/enzyme_helpers.tsx

@@ -22,6 +22,7 @@ import {
   shallow,
   MountRendererProps,
   ShallowRendererProps,
+  ComponentType,
 } from 'enzyme';
 import React, { ReactElement } from 'react';
 import { act as reactAct } from 'react-dom/test-utils';
@@ -58,13 +59,16 @@ function getOptions(context = {}, props = {}) {
  *  @param options properties to pass into shallow wrapper
  *  @return The wrapper instance around the rendered output with intl object in context
  */
-export function shallowWithIntl(node: React.ReactElement, options?: ShallowRendererProps) {
+export function shallowWithIntl(
+  node: React.ReactElement,
+  options?: ShallowRendererProps & { wrappingComponent?: React.ComponentType }
+) {
   const { context, ...props } = options || {};
 
   const optionsWithIntl = getOptions(context, props);
 
   return shallow(nodeWithIntlProp(node), {
-    wrappingComponent: I18nProvider,
+    wrappingComponent: I18nProvider as ComponentType<{}>,
     ...optionsWithIntl,
   });
 }
@@ -82,7 +86,7 @@ export function mountWithIntl(node: React.ReactElement, options?: MountRendererP
   const optionsWithIntl = getOptions(context, props);
 
   return mount(nodeWithIntlProp(node), {
-    wrappingComponent: I18nProvider,
+    wrappingComponent: I18nProvider as ComponentType<{}>,
     ...optionsWithIntl,
   });
 }
@@ -100,7 +104,7 @@ export function renderWithIntl<T>(node: React.ReactElement<T>, options?: any) {
   const optionsWithIntl = getOptions(context, props);
 
   return render(nodeWithIntlProp(node), {
-    wrappingComponent: I18nProvider,
+    wrappingComponent: I18nProvider as ComponentType<{}>,
     ...optionsWithIntl,
   });
 }
@@ -136,7 +140,7 @@ interface ReactHookWrapper<Args, HookValue> {
  */
 export const mountHook = <Args extends {}, HookValue extends any>(
   body: (args: Args) => HookValue,
-  WrapperComponent?: React.ComponentType,
+  WrapperComponent?: React.ComponentType<{ children?: React.ReactNode }>,
   initialArgs: Args = {} as Args
 ): ReactHookWrapper<Args, HookValue> => {
   const hookValueCallback = jest.fn();
@@ -182,16 +186,31 @@ export const mountHook = <Args extends {}, HookValue extends any>(
   };
 };
 
-export function shallowWithI18nProvider<T>(child: ReactElement<T>, options?: ShallowRendererProps) {
-  const wrapped = shallow(<I18nProvider>{child}</I18nProvider>, options);
+export function shallowWithI18nProvider<T>(
+  child: ReactElement<T>,
+  options?: Omit<ShallowRendererProps, 'wrappingComponent'> & {
+    wrappingComponent?: React.ComponentType<React.PropsWithChildren<any>> | ComponentType<any>;
+  }
+) {
+  const wrapped = shallow(<I18nProvider>{child}</I18nProvider>, options as ShallowRendererProps);
   return wrapped.children().dive();
 }
 
-export function mountWithI18nProvider<T>(child: ReactElement<T>, options?: MountRendererProps) {
-  const wrapped = mount(<I18nProvider>{child}</I18nProvider>, options);
+export function mountWithI18nProvider<T>(
+  child: ReactElement<T>,
+  options?: Omit<MountRendererProps, 'wrappingComponent'> & {
+    wrappingComponent?: React.ComponentType<React.PropsWithChildren<any>> | ComponentType<any>;
+  }
+) {
+  const wrapped = mount(<I18nProvider>{child}</I18nProvider>, options as MountRendererProps);
   return wrapped.children().childAt(0);
 }
 
-export function renderWithI18nProvider<T>(child: ReactElement<T>, options?: MountRendererProps) {
+export function renderWithI18nProvider<T>(
+  child: ReactElement<T>,
+  options?: Omit<MountRendererProps, 'wrappingComponent'> & {
+    wrappingComponent?: React.ComponentType<React.PropsWithChildren<any>> | ComponentType<any>;
+  }
+) {
   return render(<I18nProvider>{child}</I18nProvider>, options);
 }

packages/kbn-test-jest-helpers/src/testbed/testbed.ts

@@ -7,8 +7,8 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { Component as ReactComponent } from 'react';
-import { ComponentType, HTMLAttributes, ReactWrapper } from 'enzyme';
+import { Component as ReactComponent, ComponentType } from 'react';
+import { HTMLAttributes, ReactWrapper } from 'enzyme';
 
 import { findTestSubject } from '../find_test_subject';
 import { reactRouterMock } from '../router_helpers';

packages/kbn-unified-data-table/src/components/data_table_footer.tsx

@@ -113,12 +113,9 @@ interface UnifiedDataTableFooterContainerProps extends UnifiedDataTableFooterPro
   hasButton: boolean;
 }
 
-const UnifiedDataTableFooterContainer: React.FC<UnifiedDataTableFooterContainerProps> = ({
-  hasButton,
-  rowCount,
-  children,
-  fieldFormats,
-}) => {
+const UnifiedDataTableFooterContainer: React.FC<
+  React.PropsWithChildren<UnifiedDataTableFooterContainerProps>
+> = ({ hasButton, rowCount, children, fieldFormats }) => {
   const { euiTheme } = useEuiTheme();
 
   const formattedRowCount = fieldFormats

packages/kbn-unified-data-table/src/components/data_table_row_control.tsx

@@ -14,7 +14,10 @@ export enum Size {
   normal = 'normal',
 }
 
-export const DataTableRowControl: React.FC<{ size?: Size }> = ({ size, children }) => {
+export const DataTableRowControl: React.FC<React.PropsWithChildren<{ size?: Size }>> = ({
+  size,
+  children,
+}) => {
   const classes = classnames('unifiedDataTable__rowControl', {
     // normalize the size of the control
     [`unifiedDataTable__rowControl--size-${size}`]: size,

packages/kbn-unified-doc-viewer/src/components/field_name/__stories__/field_name.stories.tsx

@@ -24,7 +24,7 @@ const field = new DataViewField({
   readFromDocValues: true,
 });
 
-const renderFieldName = (fldName: {} | null | undefined) => {
+const renderFieldName = (fldName: React.ReactNode) => {
   return (
     <EuiFlexGroup
       alignItems="center"

packages/kbn-unified-field-list/src/components/error_boundary/error_boundary.tsx

@@ -12,7 +12,10 @@ import React from 'react';
 /**
  * Renders nothing instead of a component which triggered an exception.
  */
-export class ErrorBoundary extends React.Component<{}, { hasError: boolean }> {
+export class ErrorBoundary extends React.Component<
+  React.PropsWithChildren<{}>,
+  { hasError: boolean }
+> {
   constructor(props: {}) {
     super(props);
     this.state = { hasError: false };

packages/kbn-unified-field-list/src/components/field_popover/field_popover_header.tsx

@@ -168,7 +168,7 @@ export const FieldPopoverHeader: React.FC<FieldPopoverHeaderProps> = ({
   );
 };
 
-const FieldDescriptionWrapper: React.FC = ({ children }) => {
+const FieldDescriptionWrapper: React.FC<React.PropsWithChildren<{}>> = ({ children }) => {
   return (
     <>
       <EuiSpacer size="xs" />

packages/kbn-user-profile-components/src/hooks/use_update_user_profile.test.tsx

@@ -35,7 +35,7 @@ const security = {
 
 const { http, notifications } = core;
 
-const wrapper: WrapperComponent<void> = ({ children }) => (
+const wrapper: WrapperComponent<React.PropsWithChildren<{}>> = ({ children }) => (
   <UserProfilesKibanaProvider
     core={core}
     security={security}

packages/react/kibana_mount/mount_point_portal.tsx

@@ -66,7 +66,10 @@ export const MountPointPortal: FC<PropsWithChildren<MountPointPortalProps>> = ({
   }
 };
 
-class MountPointPortalErrorBoundary extends Component<{}, { error?: unknown }> {
+class MountPointPortalErrorBoundary extends Component<
+  { children?: React.ReactNode },
+  { error?: unknown }
+> {
   state = {
     error: undefined,
   };

packages/shared-ux/button_toolbar/src/popover/popover.tsx

@@ -26,7 +26,7 @@ type AllowedPopoverProps = Omit<
  * Props for `ToolbarPopover`.
  */
 export type Props = AllowedButtonProps &
-  AllowedPopoverProps & {
+  Omit<AllowedPopoverProps, 'children'> & {
     children: (arg: { closePopover: () => void }) => React.ReactNode;
     label: NonNullable<ToolbarButtonProps<'standard'>['label']>;
   };

packages/shared-ux/chrome/navigation/src/ui/navigation.stories.tsx

@@ -37,7 +37,9 @@ interface Props {
   children?: React.ReactNode | (({ isCollapsed }: { isCollapsed: boolean }) => React.ReactNode);
 }
 
-const NavigationWrapper: FC<Props & Partial<EuiCollapsibleNavBetaProps>> = (props) => {
+const NavigationWrapper: FC<Props & Omit<Partial<EuiCollapsibleNavBetaProps>, 'children'>> = (
+  props
+) => {
   const [isCollapsed, setIsCollapsed] = useState(false);
 
   const onCollapseToggle = (nextIsCollapsed: boolean) => {

packages/shared-ux/router/impl/routes.tsx

@@ -20,7 +20,7 @@ type RouterElementChildren = Array<
       path: string;
       render: Function;
       children: RouterElementChildren;
-      component: Function;
+      component: React.ComponentType;
     },
     string | React.JSXElementConstructor<unknown>
   >

src/plugins/chart_expressions/expression_xy/public/components/legend_action.test.tsx

@@ -12,7 +12,7 @@ import { Datatable } from '@kbn/expressions-plugin/common';
 import { LegendActionProps, SeriesIdentifier } from '@elastic/charts';
 import { EuiPopover } from '@elastic/eui';
 import { mountWithIntl } from '@kbn/test-jest-helpers';
-import { ComponentType, ReactWrapper } from 'enzyme';
+import { ReactWrapper } from 'enzyme';
 import type { DataLayerConfig } from '../../common';
 import { LayerTypes } from '../../common/constants';
 import { getLegendAction } from './legend_action';
@@ -180,7 +180,7 @@ const sampleLayer: DataLayerConfig = {
 
 describe('getLegendAction', function () {
   let wrapperProps: LegendActionProps;
-  const Component: ComponentType<LegendActionProps> = getLegendAction(
+  const Component: React.ComponentType<LegendActionProps> = getLegendAction(
     [sampleLayer],
     jest.fn(),
     [legendCellValueActions],

src/plugins/dashboard/public/dashboard_app/listing_page/dashboard_listing_page.test.tsx

@@ -9,7 +9,7 @@
 
 import React from 'react';
 import { act } from 'react-dom/test-utils';
-import { mount, ReactWrapper } from 'enzyme';
+import { mount, ReactWrapper, ComponentType } from 'enzyme';
 import { I18nProvider } from '@kbn/i18n-react';
 import { createKbnUrlStateStorage } from '@kbn/kibana-utils-plugin/public';
 
@@ -51,7 +51,9 @@ function mountWith({ props: incomingProps }: { props?: DashboardListingPageProps
   }> = ({ children }) => {
     return <I18nProvider>{children}</I18nProvider>;
   };
-  const component = mount(<DashboardListingPage {...props} />, { wrappingComponent });
+  const component = mount(<DashboardListingPage {...props} />, {
+    wrappingComponent: wrappingComponent as ComponentType<{}>,
+  });
   return { component, props };
 }
 

src/plugins/dashboard/public/dashboard_listing/dashboard_listing.test.tsx

@@ -9,7 +9,7 @@
 
 import React, { PropsWithChildren } from 'react';
 import { act } from 'react-dom/test-utils';
-import { mount, ReactWrapper } from 'enzyme';
+import { mount, ReactWrapper, ComponentType } from 'enzyme';
 import { I18nProvider } from '@kbn/i18n-react';
 
 import { pluginServices } from '../services/plugin_services';
@@ -58,7 +58,9 @@ function mountWith({ props: incomingProps }: { props?: Partial<DashboardListingP
   }> = ({ children }) => {
     return <I18nProvider>{children}</I18nProvider>;
   };
-  const component = mount(<DashboardListing {...props} />, { wrappingComponent });
+  const component = mount(<DashboardListing {...props} />, {
+    wrappingComponent: wrappingComponent as ComponentType<{}>,
+  });
   return { component, props };
 }
 

src/plugins/dashboard/public/dashboard_listing/dashboard_listing_empty_prompt.test.tsx

@@ -9,7 +9,7 @@
 
 import React from 'react';
 import { act } from 'react-dom/test-utils';
-import { mount, ReactWrapper } from 'enzyme';
+import { mount, ReactWrapper, ComponentType } from 'enzyme';
 
 import { I18nProvider } from '@kbn/i18n-react';
 
@@ -49,7 +49,9 @@ function mountWith({
   }> = ({ children }) => {
     return <I18nProvider>{children}</I18nProvider>;
   };
-  const component = mount(<DashboardListingEmptyPrompt {...props} />, { wrappingComponent });
+  const component = mount(<DashboardListingEmptyPrompt {...props} />, {
+    wrappingComponent: wrappingComponent as ComponentType<{}>,
+  });
   return { component, props };
 }
 

src/plugins/dashboard/public/dashboard_listing/dashboard_unsaved_listing.test.tsx

@@ -8,7 +8,7 @@
  */
 
 import React from 'react';
-import { mount } from 'enzyme';
+import { mount, ComponentType } from 'enzyme';
 
 import { I18nProvider } from '@kbn/i18n-react';
 import { waitFor } from '@testing-library/react';
@@ -32,7 +32,9 @@ function mountWith({ props: incomingProps }: { props?: Partial<DashboardUnsavedL
   }> = ({ children }) => {
     return <I18nProvider>{children}</I18nProvider>;
   };
-  const component = mount(<DashboardUnsavedListing {...props} />, { wrappingComponent });
+  const component = mount(<DashboardUnsavedListing {...props} />, {
+    wrappingComponent: wrappingComponent as ComponentType<{}>,
+  });
   return { component, props };
 }
 

src/plugins/data_view_field_editor/public/components/field_format_editor/editors/url/url.tsx

@@ -17,7 +17,8 @@ import {
 } from '@elastic/eui';
 import { UrlFormat } from '@kbn/field-formats-plugin/common';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { context as contextType } from '@kbn/kibana-react-plugin/public';
+import { context as contextType, KibanaReactContextValue } from '@kbn/kibana-react-plugin/public';
+import { CoreStart } from '@kbn/core/public';
 import React, { Fragment } from 'react';
 import { FormatEditorSamples } from '../../samples';
 import { DefaultFormatEditor } from '../default/default';
@@ -56,6 +57,9 @@ export class UrlFormatEditor extends DefaultFormatEditor<
 > {
   static contextType = contextType;
   static formatId = formatId;
+
+  declare context: KibanaReactContextValue<Partial<CoreStart>>;
+
   private get sampleIconPath() {
     const sampleIconPath = `/plugins/dataViewFieldEditor/assets/icons/{{value}}.png`;
     return this.context?.services.http
@@ -207,7 +211,7 @@ export class UrlFormatEditor extends DefaultFormatEditor<
           helpText={
             <EuiLink
               target="_blank"
-              href={this.context.services.docLinks.links.indexPatterns.fieldFormattersString}
+              href={this.context.services.docLinks?.links.indexPatterns.fieldFormattersString}
             >
               <FormattedMessage
                 id="indexPatternFieldEditor.url.template.helpLinkText"
@@ -237,7 +241,7 @@ export class UrlFormatEditor extends DefaultFormatEditor<
           helpText={
             <EuiLink
               target="_blank"
-              href={this.context.services.docLinks.links.indexPatterns.fieldFormattersString}
+              href={this.context.services.docLinks?.links.indexPatterns.fieldFormattersString}
             >
               <FormattedMessage
                 id="indexPatternFieldEditor.url.labelTemplateHelpText"

src/plugins/discover/public/application/context/context_app_content.tsx

@@ -250,7 +250,7 @@ export function ContextAppContent({
   );
 }
 
-const WrapperWithPadding: FC = ({ children }) => {
+const WrapperWithPadding: FC<React.PropsWithChildren<{}>> = ({ children }) => {
   const padding = useEuiPaddingSize('s');
 
   return (

src/plugins/discover/public/application/context/hooks/use_context_app_fetch.test.tsx

@@ -106,7 +106,7 @@ const initDefaults = (tieBreakerFields: string[], dataViewId = 'the-data-view-id
 
   return {
     result: renderHook(() => useContextAppFetch(props.props), {
-      wrapper: ({ children }) => (
+      wrapper: ({ children }: React.PropsWithChildren<{}>) => (
         <KibanaContextProvider services={services}>{children}</KibanaContextProvider>
       ),
     }).result,

src/plugins/discover/public/application/main/components/layout/use_discover_histogram.test.tsx

@@ -121,7 +121,9 @@ describe('useDiscoverHistogram', () => {
       hideChart,
     };
 
-    const Wrapper: WrapperComponent<UseDiscoverHistogramProps> = ({ children }) => (
+    const Wrapper: WrapperComponent<React.PropsWithChildren<UseDiscoverHistogramProps>> = ({
+      children,
+    }) => (
       <DiscoverMainProvider value={stateContainer}>{children as ReactElement}</DiscoverMainProvider>
     );
 

src/plugins/discover/public/application/main/components/layout/use_fetch_more_records.test.tsx

@@ -49,7 +49,7 @@ describe('useFetchMoreRecords', () => {
 
   const getWrapper = (
     stateContainer: DiscoverStateContainer
-  ): WrapperComponent<UseFetchMoreRecordsParams> => {
+  ): WrapperComponent<React.PropsWithChildren<UseFetchMoreRecordsParams>> => {
     return ({ children }) => (
       <DiscoverMainProvider value={stateContainer}>
         <>{children}</>

src/plugins/discover/public/context_awareness/hooks/use_profiles.test.tsx

@@ -37,7 +37,7 @@ const getProfiles$Spy = jest.spyOn(discoverServiceMock.profilesManager, 'getProf
 
 const render = () => {
   return renderHook((props) => useProfiles(props), {
-    initialProps: { record } as GetProfilesOptions,
+    initialProps: { record } as React.PropsWithChildren<GetProfilesOptions>,
     wrapper: ({ children }) => (
       <KibanaContextProvider services={discoverServiceMock}>{children}</KibanaContextProvider>
     ),

src/plugins/discover/public/context_awareness/hooks/use_root_profile.test.tsx

@@ -15,7 +15,9 @@ import { useRootProfile } from './use_root_profile';
 
 const render = () => {
   return renderHook((props) => useRootProfile(props), {
-    initialProps: { solutionNavId: 'solutionNavId' },
+    initialProps: { solutionNavId: 'solutionNavId' } as React.PropsWithChildren<{
+      solutionNavId: string;
+    }>,
     wrapper: ({ children }) => (
       <KibanaContextProvider services={discoverServiceMock}>{children}</KibanaContextProvider>
     ),

src/plugins/discover/public/customizations/customization_provider.test.tsx

@@ -66,7 +66,7 @@ describe('useDiscoverCustomization', () => {
   it('should provide customization', () => {
     const customization: DiscoverCustomization = { id: 'top_nav' };
     const wrapper = renderHook(() => useDiscoverCustomization('top_nav'), {
-      wrapper: ({ children }) => {
+      wrapper: ({ children }: React.PropsWithChildren<{}>) => {
         const service = createCustomizationService();
         service.set(customization);
         return (
@@ -80,8 +80,10 @@ describe('useDiscoverCustomization', () => {
   it('should allow changing the customization', () => {
     const customization: DiscoverCustomization = { id: 'top_nav' };
     const service = createCustomizationService();
-    const wrapper = renderHook((id) => useDiscoverCustomization(id), {
-      initialProps: customization.id as DiscoverCustomizationId,
+    const wrapper = renderHook(({ id }) => useDiscoverCustomization(id), {
+      initialProps: { id: customization.id } as React.PropsWithChildren<{
+        id: DiscoverCustomizationId;
+      }>,
       wrapper: ({ children }) => {
         service.set(customization);
         return (
@@ -92,13 +94,13 @@ describe('useDiscoverCustomization', () => {
     expect(wrapper.result.current).toBe(customization);
     const newCustomization: DiscoverCustomization = { id: 'search_bar' };
     service.set(newCustomization);
-    wrapper.rerender('search_bar');
+    wrapper.rerender({ id: 'search_bar' });
     expect(wrapper.result.current).toBe(newCustomization);
   });
 
   it('should provide undefined if customization is not found', () => {
     const wrapper = renderHook(() => useDiscoverCustomization('top_nav'), {
-      wrapper: ({ children }) => {
+      wrapper: ({ children }: React.PropsWithChildren<{}>) => {
         const service = createCustomizationService();
         return (
           <DiscoverCustomizationProvider value={service}>{children}</DiscoverCustomizationProvider>
@@ -113,7 +115,7 @@ describe('useDiscoverCustomization$', () => {
   it('should provide customization$', () => {
     const customization: DiscoverCustomization = { id: 'top_nav' };
     const wrapper = renderHook(() => useDiscoverCustomization$('top_nav'), {
-      wrapper: ({ children }) => {
+      wrapper: ({ children }: React.PropsWithChildren<{}>) => {
         const service = createCustomizationService();
         service.set(customization);
         return (
@@ -131,8 +133,10 @@ describe('useDiscoverCustomization$', () => {
   it('should allow changing the customization', () => {
     const customization: DiscoverCustomization = { id: 'top_nav' };
     const service = createCustomizationService();
-    const wrapper = renderHook((id) => useDiscoverCustomization$(id), {
-      initialProps: customization.id as DiscoverCustomizationId,
+    const wrapper = renderHook(({ id }) => useDiscoverCustomization$(id), {
+      initialProps: { id: customization.id } as React.PropsWithChildren<{
+        id: DiscoverCustomizationId;
+      }>,
       wrapper: ({ children }) => {
         service.set(customization);
         return (
@@ -147,7 +151,7 @@ describe('useDiscoverCustomization$', () => {
     expect(result).toBe(customization);
     const newCustomization: DiscoverCustomization = { id: 'search_bar' };
     service.set(newCustomization);
-    wrapper.rerender('search_bar');
+    wrapper.rerender({ id: 'search_bar' });
     wrapper.result.current.subscribe((current) => {
       result = current;
     });
@@ -156,7 +160,7 @@ describe('useDiscoverCustomization$', () => {
 
   it('should provide undefined if customization is not found', () => {
     const wrapper = renderHook(() => useDiscoverCustomization$('top_nav'), {
-      wrapper: ({ children }) => {
+      wrapper: ({ children }: React.PropsWithChildren<{}>) => {
         const service = createCustomizationService();
         return (
           <DiscoverCustomizationProvider value={service}>{children}</DiscoverCustomizationProvider>

src/plugins/discover/public/hooks/use_data_view.test.tsx

@@ -38,7 +38,7 @@ const mockServices = {
 
 const render = async ({ dataViewId }: { dataViewId: string }) => {
   const hookResult = renderHook(() => useDataView({ index: dataViewId }), {
-    wrapper: ({ children }) => (
+    wrapper: ({ children }: React.PropsWithChildren<{}>) => (
       <KibanaContextProvider services={mockServices}>{children}</KibanaContextProvider>
     ),
   });

src/plugins/discover/public/hooks/use_navigation_props.test.tsx

@@ -58,7 +58,7 @@ const render = async () => {
         columns: ['mock-column'],
       }),
     {
-      wrapper: ({ children }) => (
+      wrapper: ({ children }: React.PropsWithChildren<{}>) => (
         <MemoryRouter initialEntries={['/']}>
           <KibanaContextProvider services={mockServices}>{children}</KibanaContextProvider>
         </MemoryRouter>

src/plugins/es_ui_shared/static/forms/hook_form_lib/components/form.tsx

@@ -16,7 +16,7 @@ import { FormHook } from '../types';
 
 export interface Props {
   form: FormHook<any>;
-  FormWrapper?: React.ComponentType;
+  FormWrapper?: React.ComponentType<React.PropsWithChildren<any>>;
   children: ReactNode | ReactNode[];
   [key: string]: any;
 }

src/plugins/expression_shape/public/components/progress/progress_drawer.tsx

@@ -12,7 +12,7 @@ import { ShapeDrawer, ShapeRef, ShapeDrawerComponentProps } from '../reusable';
 import { getShape } from './shapes';
 
 export const ProgressDrawerComponent = React.forwardRef(
-  (props: ShapeDrawerComponentProps, ref: Ref<ShapeRef>) => (
+  (props: React.PropsWithChildren<ShapeDrawerComponentProps>, ref: Ref<ShapeRef>) => (
     <ShapeDrawer {...props} ref={ref} getShape={getShape} />
   )
 );

src/plugins/expression_shape/public/components/reusable/shape_factory.tsx

@@ -17,7 +17,7 @@ export const getShapeComponent = (svgParams: SvgConfig) =>
     shapeContentAttributes,
     children,
     textAttributes,
-  }: ShapeProps) {
+  }: React.PropsWithChildren<ShapeProps>) {
     const {
       viewBox: initialViewBox,
       shapeProps: defaultShapeContentAttributes,

src/plugins/share/public/components/url_panel_content.tsx

@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import React, { Component, ReactElement } from 'react';
+import React, { Component } from 'react';
 import {
   EuiButton,
   EuiCopy,
@@ -582,7 +582,7 @@ export class UrlPanelContent extends Component<UrlPanelContentProps, State> {
     );
   };
 
-  private renderUrlParamExtensions = (): ReactElement | void => {
+  private renderUrlParamExtensions = (): React.ReactNode => {
     if (!this.props.urlParamExtensions) {
       return;
     }

src/plugins/unified_search/public/filter_badge/filter_badge_error_boundary.tsx

@@ -18,7 +18,7 @@ interface FilterBadgeErrorBoundaryState {
 }
 
 export class FilterBadgeErrorBoundary extends Component<
-  FilterBadgeErrorBoundaryProps,
+  React.PropsWithChildren<FilterBadgeErrorBoundaryProps>,
   FilterBadgeErrorBoundaryState
 > {
   constructor(props: FilterBadgeErrorBoundaryProps) {

src/plugins/vis_types/timeseries/public/application/components/panel_config/table.tsx

@@ -39,6 +39,7 @@ import { QueryBarWrapper } from '../query_bar_wrapper';
 import { getDefaultQueryLanguage } from '../lib/get_default_query_language';
 import { VisDataContext } from '../../contexts/vis_data_context';
 import { BUCKET_TYPES } from '../../../../common/enums';
+import type { TimeseriesUIRestrictions } from '../../../../common/ui_restrictions';
 import { PanelConfigProps, PANEL_CONFIG_TABS } from './types';
 import { TimeseriesVisParams } from '../../../types';
 import { getIndexPatternKey } from '../../../../common/index_patterns_utils';
@@ -48,6 +49,9 @@ export class TablePanelConfig extends Component<
   { selectedTab: PANEL_CONFIG_TABS }
 > {
   static contextType = VisDataContext;
+
+  declare context: { uiRestrictions?: TimeseriesUIRestrictions };
+
   constructor(props: PanelConfigProps) {
     super(props);
     this.state = { selectedTab: PANEL_CONFIG_TABS.DATA };

x-pack/packages/kbn-elastic-assistant/impl/assistant/use_conversation/index.test.tsx

@@ -56,7 +56,7 @@ describe('useConversation', () => {
   it('should create a new conversation when called with valid conversationId and message', async () => {
     await act(async () => {
       const { result, waitForNextUpdate } = renderHook(() => useConversation(), {
-        wrapper: ({ children }) => (
+        wrapper: ({ children }: React.PropsWithChildren<{}>) => (
           <TestProviders providerContext={{ http: httpMock }}>{children}</TestProviders>
         ),
       });
@@ -77,7 +77,7 @@ describe('useConversation', () => {
   it('should delete an existing conversation when called with valid conversationId', async () => {
     await act(async () => {
       const { result, waitForNextUpdate } = renderHook(() => useConversation(), {
-        wrapper: ({ children }) => (
+        wrapper: ({ children }: React.PropsWithChildren<{}>) => (
           <TestProviders providerContext={{ http: httpMock }}>{children}</TestProviders>
         ),
       });
@@ -95,7 +95,7 @@ describe('useConversation', () => {
   it('should update the apiConfig for an existing conversation when called with a valid conversationId and apiConfig', async () => {
     await act(async () => {
       const { result, waitForNextUpdate } = renderHook(() => useConversation(), {
-        wrapper: ({ children }) => (
+        wrapper: ({ children }: React.PropsWithChildren<{}>) => (
           <TestProviders providerContext={{ http: httpMock }}>{children}</TestProviders>
         ),
       });
@@ -116,7 +116,7 @@ describe('useConversation', () => {
   it('should remove the last message from a conversation when called with valid conversationId', async () => {
     await act(async () => {
       const { result, waitForNextUpdate } = renderHook(() => useConversation(), {
-        wrapper: ({ children }) => (
+        wrapper: ({ children }: React.PropsWithChildren<{}>) => (
           <TestProviders providerContext={{ http: httpMock }}>{children}</TestProviders>
         ),
       });

x-pack/packages/security-solution/data_table/components/data_table/helpers.test.tsx

@@ -78,7 +78,7 @@ describe('helpers', () => {
             },
           },
           _owner: null,
-        },
+        } as unknown as React.ReactNode,
         isSortable: true,
       },
       {
@@ -113,7 +113,7 @@ describe('helpers', () => {
             },
           },
           _owner: null,
-        },
+        } as unknown as React.ReactNode,
         isSortable: true,
       },
     ];

x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality_panel/actions/add_to_new_case/index.test.tsx

@@ -64,7 +64,7 @@ describe('AddToNewCaseAction', () => {
 
   describe('when clicking on add to new case link', () => {
     it('should open create case flyout with header content and provided markdown', () => {
-      let headerContent: React.ReactNode = null;
+      let headerContent: HTMLElement | null = null;
       const openCreateCaseFlyout = jest.fn(({ headerContent: _headerContent }) => {
         headerContent = render(_headerContent).container;
       });

x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/hooks/use_ilm_explain/index.test.tsx

@@ -114,7 +114,7 @@ describe('useIlmExplain', () => {
 
     beforeEach(async () => {
       const { result, waitForNextUpdate } = renderHook(() => useIlmExplain(pattern), {
-        wrapper: ({ children }) => (
+        wrapper: ({ children }: React.PropsWithChildren<{}>) => (
           <DataQualityProvider
             httpFetch={mockHttpFetch}
             telemetryEvents={mockTelemetryEvents}

x-pack/packages/security/api_key_management/src/components/time_tool_tip.tsx

@@ -14,7 +14,10 @@ export interface TimeToolTipProps {
   timestamp: number;
 }
 
-export const TimeToolTip: FunctionComponent<TimeToolTipProps> = ({ timestamp, children }) => {
+export const TimeToolTip: FunctionComponent<React.PropsWithChildren<TimeToolTipProps>> = ({
+  timestamp,
+  children,
+}) => {
   return (
     <EuiToolTip content={moment(timestamp).format('LLL')}>
       <span>{children ?? moment(timestamp).fromNow()}</span>

x-pack/plugins/canvas/public/components/app/index.tsx

@@ -14,7 +14,7 @@ import { shortcutManager } from '../../lib/shortcut_manager';
 import { CanvasRouter } from '../../routes';
 import { Flyouts } from '../flyouts';
 
-class ShortcutManagerContextWrapper extends React.Component {
+class ShortcutManagerContextWrapper extends React.Component<React.PropsWithChildren<{}>> {
   static childContextTypes = {
     shortcuts: PropTypes.object.isRequired,
   };

x-pack/plugins/canvas/public/routes/index.tsx

@@ -6,7 +6,7 @@
  */
 
 import React, { FC } from 'react';
-import { RouteComponentProps, Redirect } from 'react-router-dom';
+import { Redirect, RouteChildrenProps } from 'react-router-dom';
 import { Router, Routes, Route } from '@kbn/shared-ux-router';
 import { History } from 'history';
 import { parse, stringify } from 'query-string';
@@ -28,7 +28,7 @@ export const CanvasRouter: FC<{ history: History }> = ({ history }) => (
   <Router history={history}>
     <Route
       path="/"
-      children={(route: RouteComponentProps) => {
+      children={(route: RouteChildrenProps) => {
         // If it looks like the hash is a route then we will do a redirect
         if (isHashPath(route.location.hash) && !route.location.pathname) {
           const [hashPath, hashQuery] = route.location.hash.split('?');

x-pack/plugins/cases/public/common/hooks.test.tsx

@@ -28,7 +28,9 @@ describe('hooks', () => {
 
     it('returns true if it is the main application', () => {
       const { result } = renderHook(() => useIsMainApplication(), {
-        wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+        wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+          <TestProviders>{children}</TestProviders>
+        ),
       });
 
       expect(result.current).toBe(true);
@@ -38,7 +40,9 @@ describe('hooks', () => {
       useApplicationMock.mockReturnValue({ appId: 'testAppId', appTitle: 'Test app' });
 
       const { result } = renderHook(() => useIsMainApplication(), {
-        wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+        wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+          <TestProviders>{children}</TestProviders>
+        ),
       });
 
       expect(result.current).toBe(false);

x-pack/plugins/cases/public/common/lib/kibana/hooks.test.tsx

@@ -14,12 +14,12 @@ import { allCasesPermissions, TestProviders } from '../../mock';
 describe('hooks', () => {
   describe('useApplicationCapabilities', () => {
     it('should return the correct capabilities', async () => {
-      const { result } = renderHook<{}, ReturnType<typeof useApplicationCapabilities>>(
-        () => useApplicationCapabilities(),
-        {
-          wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
-        }
-      );
+      const { result } = renderHook<
+        React.PropsWithChildren<{}>,
+        ReturnType<typeof useApplicationCapabilities>
+      >(() => useApplicationCapabilities(), {
+        wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+      });
 
       expect(result.current).toEqual({
         actions: { crud: true, read: true },

x-pack/plugins/cases/public/common/navigation/hooks.test.tsx

@@ -37,7 +37,9 @@ describe('hooks', () => {
       const { result } = renderHook(
         () => useCasesNavigation({ deepLinkId: CasesDeepLinkId.cases }),
         {
-          wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+          wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+            <TestProviders>{children}</TestProviders>
+          ),
         }
       );
 
@@ -54,7 +56,9 @@ describe('hooks', () => {
       const { result } = renderHook(
         () => useCasesNavigation({ deepLinkId: CasesDeepLinkId.cases }),
         {
-          wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+          wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+            <TestProviders>{children}</TestProviders>
+          ),
         }
       );
       const [, navigateToCases] = result.current;
@@ -70,7 +74,9 @@ describe('hooks', () => {
   describe('useAllCasesNavigation', () => {
     it('it calls getAppUrl with correct arguments', () => {
       const { result } = renderHook(() => useAllCasesNavigation(), {
-        wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+        wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+          <TestProviders>{children}</TestProviders>
+        ),
       });
 
       act(() => {
@@ -82,7 +88,9 @@ describe('hooks', () => {
 
     it('it calls navigateToAllCases with correct arguments', () => {
       const { result } = renderHook(() => useAllCasesNavigation(), {
-        wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+        wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+          <TestProviders>{children}</TestProviders>
+        ),
       });
 
       act(() => {
@@ -96,7 +104,9 @@ describe('hooks', () => {
   describe('useCreateCaseNavigation', () => {
     it('it calls getAppUrl with correct arguments', () => {
       const { result } = renderHook(() => useCreateCaseNavigation(), {
-        wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+        wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+          <TestProviders>{children}</TestProviders>
+        ),
       });
 
       act(() => {
@@ -112,7 +122,9 @@ describe('hooks', () => {
 
     it('it calls navigateToAllCases with correct arguments', () => {
       const { result } = renderHook(() => useCreateCaseNavigation(), {
-        wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+        wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+          <TestProviders>{children}</TestProviders>
+        ),
       });
 
       act(() => {
@@ -126,7 +138,9 @@ describe('hooks', () => {
   describe('useConfigureCasesNavigation', () => {
     it('it calls getAppUrl with correct arguments', () => {
       const { result } = renderHook(() => useConfigureCasesNavigation(), {
-        wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+        wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+          <TestProviders>{children}</TestProviders>
+        ),
       });
 
       act(() => {
@@ -142,7 +156,9 @@ describe('hooks', () => {
 
     it('it calls navigateToAllCases with correct arguments', () => {
       const { result } = renderHook(() => useConfigureCasesNavigation(), {
-        wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+        wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+          <TestProviders>{children}</TestProviders>
+        ),
       });
 
       act(() => {
@@ -156,7 +172,9 @@ describe('hooks', () => {
   describe('useCaseViewNavigation', () => {
     it('it calls getAppUrl with correct arguments', () => {
       const { result } = renderHook(() => useCaseViewNavigation(), {
-        wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+        wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+          <TestProviders>{children}</TestProviders>
+        ),
       });
 
       act(() => {
@@ -172,7 +190,9 @@ describe('hooks', () => {
 
     it('it calls navigateToAllCases with correct arguments', () => {
       const { result } = renderHook(() => useCaseViewNavigation(), {
-        wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+        wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+          <TestProviders>{children}</TestProviders>
+        ),
       });
 
       act(() => {

x-pack/plugins/cases/public/common/use_cases_features.test.tsx

@@ -37,9 +37,14 @@ describe('useCasesFeatures', () => {
   it.each(tests)(
     'returns isAlertsEnabled=%s and isSyncAlertsEnabled=%s if feature.alerts=%s',
     async (isAlertsEnabled, isSyncAlertsEnabled, alerts) => {
-      const { result } = renderHook<{}, UseCasesFeatures>(() => useCasesFeatures(), {
-        wrapper: ({ children }) => <TestProviders features={{ alerts }}>{children}</TestProviders>,
-      });
+      const { result } = renderHook<React.PropsWithChildren<{}>, UseCasesFeatures>(
+        () => useCasesFeatures(),
+        {
+          wrapper: ({ children }) => (
+            <TestProviders features={{ alerts }}>{children}</TestProviders>
+          ),
+        }
+      );
 
       expect(result.current).toEqual({
         isAlertsEnabled,
@@ -52,13 +57,16 @@ describe('useCasesFeatures', () => {
   );
 
   it('returns the metrics correctly', async () => {
-    const { result } = renderHook<{}, UseCasesFeatures>(() => useCasesFeatures(), {
-      wrapper: ({ children }) => (
-        <TestProviders features={{ metrics: [CaseMetricsFeature.CONNECTORS] }}>
-          {children}
-        </TestProviders>
-      ),
-    });
+    const { result } = renderHook<React.PropsWithChildren<{}>, UseCasesFeatures>(
+      () => useCasesFeatures(),
+      {
+        wrapper: ({ children }) => (
+          <TestProviders features={{ metrics: [CaseMetricsFeature.CONNECTORS] }}>
+            {children}
+          </TestProviders>
+        ),
+      }
+    );
 
     expect(result.current).toEqual({
       isAlertsEnabled: true,
@@ -83,9 +91,12 @@ describe('useCasesFeatures', () => {
         license: { type },
       });
 
-      const { result } = renderHook<{}, UseCasesFeatures>(() => useCasesFeatures(), {
-        wrapper: ({ children }) => <TestProviders license={license}>{children}</TestProviders>,
-      });
+      const { result } = renderHook<React.PropsWithChildren<{}>, UseCasesFeatures>(
+        () => useCasesFeatures(),
+        {
+          wrapper: ({ children }) => <TestProviders license={license}>{children}</TestProviders>,
+        }
+      );
 
       expect(result.current).toEqual({
         isAlertsEnabled: true,

x-pack/plugins/cases/public/common/use_license.test.tsx

@@ -18,7 +18,11 @@ describe('useLicense', () => {
         () => {
           return useLicense();
         },
-        { wrapper: ({ children }) => <TestProviders>{children}</TestProviders> }
+        {
+          wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+            <TestProviders>{children}</TestProviders>
+          ),
+        }
       );
 
       expect(result.current.isAtLeast('basic')).toBeTruthy();
@@ -29,7 +33,11 @@ describe('useLicense', () => {
         () => {
           return useLicense();
         },
-        { wrapper: ({ children }) => <TestProviders>{children}</TestProviders> }
+        {
+          wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+            <TestProviders>{children}</TestProviders>
+          ),
+        }
       );
 
       expect(result.current.isAtLeast('platinum')).toBeFalsy();
@@ -44,7 +52,11 @@ describe('useLicense', () => {
         () => {
           return useLicense();
         },
-        { wrapper: ({ children }) => <TestProviders license={license}>{children}</TestProviders> }
+        {
+          wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+            <TestProviders license={license}>{children}</TestProviders>
+          ),
+        }
       );
 
       expect(result.current.isAtLeast('basic')).toBeFalsy();
@@ -59,7 +71,11 @@ describe('useLicense', () => {
         () => {
           return useLicense();
         },
-        { wrapper: ({ children }) => <TestProviders license={license}>{children}</TestProviders> }
+        {
+          wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+            <TestProviders license={license}>{children}</TestProviders>
+          ),
+        }
       );
 
       expect(result.current.isAtLeast('basic')).toBeFalsy();
@@ -76,7 +92,11 @@ describe('useLicense', () => {
         () => {
           return useLicense();
         },
-        { wrapper: ({ children }) => <TestProviders license={license}>{children}</TestProviders> }
+        {
+          wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+            <TestProviders license={license}>{children}</TestProviders>
+          ),
+        }
       );
 
       expect(result.current.isAtLeastPlatinum()).toBeTruthy();
@@ -91,7 +111,11 @@ describe('useLicense', () => {
         () => {
           return useLicense();
         },
-        { wrapper: ({ children }) => <TestProviders license={license}>{children}</TestProviders> }
+        {
+          wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+            <TestProviders license={license}>{children}</TestProviders>
+          ),
+        }
       );
 
       expect(result.current.isAtLeastPlatinum()).toBeFalsy();
@@ -108,7 +132,11 @@ describe('useLicense', () => {
         () => {
           return useLicense();
         },
-        { wrapper: ({ children }) => <TestProviders license={license}>{children}</TestProviders> }
+        {
+          wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+            <TestProviders license={license}>{children}</TestProviders>
+          ),
+        }
       );
 
       expect(result.current.isAtLeastGold()).toBeTruthy();
@@ -123,7 +151,11 @@ describe('useLicense', () => {
         () => {
           return useLicense();
         },
-        { wrapper: ({ children }) => <TestProviders license={license}>{children}</TestProviders> }
+        {
+          wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+            <TestProviders license={license}>{children}</TestProviders>
+          ),
+        }
       );
 
       expect(result.current.isAtLeastGold()).toBeFalsy();
@@ -140,7 +172,11 @@ describe('useLicense', () => {
         () => {
           return useLicense();
         },
-        { wrapper: ({ children }) => <TestProviders license={license}>{children}</TestProviders> }
+        {
+          wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+            <TestProviders license={license}>{children}</TestProviders>
+          ),
+        }
       );
 
       expect(result.current.isAtLeastEnterprise()).toBeTruthy();
@@ -155,7 +191,11 @@ describe('useLicense', () => {
         () => {
           return useLicense();
         },
-        { wrapper: ({ children }) => <TestProviders license={license}>{children}</TestProviders> }
+        {
+          wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+            <TestProviders license={license}>{children}</TestProviders>
+          ),
+        }
       );
 
       expect(result.current.isAtLeastEnterprise()).toBeFalsy();
@@ -172,7 +212,11 @@ describe('useLicense', () => {
         () => {
           return useLicense();
         },
-        { wrapper: ({ children }) => <TestProviders license={license}>{children}</TestProviders> }
+        {
+          wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+            <TestProviders license={license}>{children}</TestProviders>
+          ),
+        }
       );
 
       expect(result.current.getLicense()).toEqual(license);

x-pack/plugins/cases/public/components/all_cases/all_cases_list.test.tsx

@@ -262,12 +262,12 @@ describe('AllCasesListGeneric', () => {
       expect(column[key].querySelector('span')).toHaveTextContent(emptyTag);
     };
 
-    const { result } = renderHook<GetCasesColumn, UseCasesColumnsReturnValue>(
-      () => useCasesColumns(defaultColumnArgs),
-      {
-        wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
-      }
-    );
+    const { result } = renderHook<
+      React.PropsWithChildren<GetCasesColumn>,
+      UseCasesColumnsReturnValue
+    >(() => useCasesColumns(defaultColumnArgs), {
+      wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+    });
 
     await waitFor(() => {
       result.current.columns.map(

x-pack/plugins/cases/public/components/all_cases/table_filter_config/use_filter_config.test.tsx

@@ -64,7 +64,9 @@ describe('useFilterConfig', () => {
 
   it('should remove a selected option if the filter is deleted', async () => {
     const { rerender } = renderHook(useFilterConfig, {
-      wrapper: ({ children }) => <appMockRender.AppWrapper>{children}</appMockRender.AppWrapper>,
+      wrapper: ({ children }: React.PropsWithChildren<Parameters<typeof useFilterConfig>[0]>) => (
+        <appMockRender.AppWrapper>{children}</appMockRender.AppWrapper>
+      ),
       initialProps: {
         systemFilterConfig: filters,
         onFilterOptionsChange,
@@ -104,7 +106,9 @@ describe('useFilterConfig', () => {
     );
 
     const { result } = renderHook(useFilterConfig, {
-      wrapper: ({ children }) => <appMockRender.AppWrapper>{children}</appMockRender.AppWrapper>,
+      wrapper: ({ children }: React.PropsWithChildren<Parameters<typeof useFilterConfig>[0]>) => (
+        <appMockRender.AppWrapper>{children}</appMockRender.AppWrapper>
+      ),
       initialProps: {
         systemFilterConfig: filters,
         onFilterOptionsChange,

x-pack/plugins/cases/public/components/all_cases/use_all_cases_state.test.tsx

@@ -59,7 +59,9 @@ describe('useAllCasesQueryParams', () => {
 
   it('returns default state with empty URL and local storage', () => {
     const { result } = renderHook(() => useAllCasesState(), {
-      wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+      wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+        <TestProviders>{children}</TestProviders>
+      ),
     });
 
     expect(result.current.queryParams).toStrictEqual(DEFAULT_CASES_TABLE_STATE.queryParams);
@@ -80,7 +82,9 @@ describe('useAllCasesQueryParams', () => {
     localStorage.setItem(LS_KEY, JSON.stringify(existingLocalStorageValues));
 
     const { result } = renderHook(() => useAllCasesState(), {
-      wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+      wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+        <TestProviders>{children}</TestProviders>
+      ),
     });
 
     expect(result.current.queryParams).toMatchObject(existingLocalStorageValues.queryParams);
@@ -99,7 +103,9 @@ describe('useAllCasesQueryParams', () => {
     localStorage.setItem(LS_KEY, JSON.stringify(existingLocalStorageValues));
 
     const { result } = renderHook(() => useAllCasesState(), {
-      wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+      wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+        <TestProviders>{children}</TestProviders>
+      ),
     });
 
     expect(result.current.filterOptions).toMatchObject(existingLocalStorageValues.filterOptions);
@@ -109,7 +115,9 @@ describe('useAllCasesQueryParams', () => {
     mockLocation.search = stringifyUrlParams({ page: 2, perPage: 15 });
 
     const { result } = renderHook(() => useAllCasesState(), {
-      wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+      wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+        <TestProviders>{children}</TestProviders>
+      ),
     });
 
     expect(result.current.queryParams).toMatchObject({
@@ -125,7 +133,9 @@ describe('useAllCasesQueryParams', () => {
     });
 
     const { result } = renderHook(() => useAllCasesState(), {
-      wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+      wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+        <TestProviders>{children}</TestProviders>
+      ),
     });
 
     expect(result.current.filterOptions).toMatchObject({
@@ -144,7 +154,9 @@ describe('useAllCasesQueryParams', () => {
     mockLocation.search = nonDefaultUrlParams.toString();
 
     const { result } = renderHook(() => useAllCasesState(), {
-      wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+      wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+        <TestProviders>{children}</TestProviders>
+      ),
     });
 
     expect(result.current.filterOptions).toMatchObject({
@@ -159,7 +171,9 @@ describe('useAllCasesQueryParams', () => {
     })}&foo=bar&foo=baz&test=my-test`;
 
     const { result } = renderHook(() => useAllCasesState(), {
-      wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+      wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+        <TestProviders>{children}</TestProviders>
+      ),
     });
 
     act(() => {
@@ -197,7 +211,9 @@ describe('useAllCasesQueryParams', () => {
     };
 
     const { result } = renderHook(() => useAllCasesState(), {
-      wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+      wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+        <TestProviders>{children}</TestProviders>
+      ),
     });
 
     act(() => {
@@ -238,7 +254,9 @@ describe('useAllCasesQueryParams', () => {
     localStorage.setItem(LS_KEY, JSON.stringify(existingLocalStorageValues));
 
     const { result } = renderHook(() => useAllCasesState(), {
-      wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+      wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+        <TestProviders>{children}</TestProviders>
+      ),
     });
 
     expect(result.current.queryParams).toMatchObject({
@@ -265,7 +283,9 @@ describe('useAllCasesQueryParams', () => {
     localStorage.setItem(LS_KEY, JSON.stringify(existingLocalStorageValues));
 
     const { result } = renderHook(() => useAllCasesState(), {
-      wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+      wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+        <TestProviders>{children}</TestProviders>
+      ),
     });
 
     expect(result.current.filterOptions).toMatchObject({ severity: ['high'], status: ['open'] });
@@ -283,7 +303,9 @@ describe('useAllCasesQueryParams', () => {
     localStorage.setItem(LS_KEY, JSON.stringify(existingLocalStorageValues));
 
     renderHook(() => useAllCasesState(), {
-      wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+      wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+        <TestProviders>{children}</TestProviders>
+      ),
     });
 
     expect(mockReplace).toHaveBeenCalledWith({
@@ -303,7 +325,9 @@ describe('useAllCasesQueryParams', () => {
     localStorage.setItem(LS_KEY, JSON.stringify(existingLocalStorageValues));
 
     const { rerender } = renderHook(() => useAllCasesState(), {
-      wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+      wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+        <TestProviders>{children}</TestProviders>
+      ),
     });
 
     rerender();
@@ -328,7 +352,9 @@ describe('useAllCasesQueryParams', () => {
     localStorage.setItem(LS_KEY, JSON.stringify(existingLocalStorageValues));
 
     renderHook(() => useAllCasesState(), {
-      wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+      wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+        <TestProviders>{children}</TestProviders>
+      ),
     });
 
     expect(mockReplace).toHaveBeenCalledTimes(0);
@@ -341,7 +367,9 @@ describe('useAllCasesQueryParams', () => {
     });
 
     const { result } = renderHook(() => useAllCasesState(), {
-      wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+      wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+        <TestProviders>{children}</TestProviders>
+      ),
     });
 
     expect(result.current.queryParams).toStrictEqual(DEFAULT_CASES_TABLE_STATE.queryParams);
@@ -364,7 +392,9 @@ describe('useAllCasesQueryParams', () => {
     localStorage.setItem(LS_KEY, JSON.stringify(existingLocalStorageValues));
 
     const { result } = renderHook(() => useAllCasesState(), {
-      wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+      wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+        <TestProviders>{children}</TestProviders>
+      ),
     });
 
     expect(result.current.queryParams).toStrictEqual({
@@ -376,7 +406,9 @@ describe('useAllCasesQueryParams', () => {
 
   it('updates the query params correctly', () => {
     const { result } = renderHook(() => useAllCasesState(), {
-      wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+      wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+        <TestProviders>{children}</TestProviders>
+      ),
     });
 
     act(() => {
@@ -394,7 +426,9 @@ describe('useAllCasesQueryParams', () => {
 
   it('updates URL when updating the query params', () => {
     const { result } = renderHook(() => useAllCasesState(), {
-      wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+      wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+        <TestProviders>{children}</TestProviders>
+      ),
     });
 
     act(() => {
@@ -410,7 +444,9 @@ describe('useAllCasesQueryParams', () => {
 
   it('updates the local storage when updating the query params', () => {
     const { result } = renderHook(() => useAllCasesState(), {
-      wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+      wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+        <TestProviders>{children}</TestProviders>
+      ),
     });
 
     act(() => {
@@ -431,7 +467,9 @@ describe('useAllCasesQueryParams', () => {
 
   it('updates the filter options correctly', () => {
     const { result } = renderHook(() => useAllCasesState(), {
-      wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+      wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+        <TestProviders>{children}</TestProviders>
+      ),
     });
 
     act(() => {
@@ -447,7 +485,9 @@ describe('useAllCasesQueryParams', () => {
 
   it('updates the URL when updating the filter options', () => {
     const { result } = renderHook(() => useAllCasesState(), {
-      wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+      wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+        <TestProviders>{children}</TestProviders>
+      ),
     });
 
     act(() => {
@@ -461,7 +501,9 @@ describe('useAllCasesQueryParams', () => {
 
   it('updates the local storage when updating the filter options', () => {
     const { result } = renderHook(() => useAllCasesState(), {
-      wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+      wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+        <TestProviders>{children}</TestProviders>
+      ),
     });
 
     act(() => {
@@ -496,7 +538,9 @@ describe('useAllCasesQueryParams', () => {
     }));
 
     renderHook(() => useAllCasesState(), {
-      wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+      wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+        <TestProviders>{children}</TestProviders>
+      ),
     });
 
     const localStorageState = JSON.parse(localStorage.getItem(LS_KEY) ?? '{}');
@@ -516,7 +560,9 @@ describe('useAllCasesQueryParams', () => {
     const lsSpy = jest.spyOn(Storage.prototype, 'setItem');
 
     renderHook(() => useAllCasesState(), {
-      wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+      wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+        <TestProviders>{children}</TestProviders>
+      ),
     });
 
     // first call is the initial call made by useLocalStorage
@@ -532,7 +578,9 @@ describe('useAllCasesQueryParams', () => {
     const lsSpy = jest.spyOn(Storage.prototype, 'setItem');
 
     const { rerender } = renderHook(() => useAllCasesState(), {
-      wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+      wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+        <TestProviders>{children}</TestProviders>
+      ),
     });
 
     rerender();
@@ -559,7 +607,9 @@ describe('useAllCasesQueryParams', () => {
     localStorage.setItem(LS_KEY, JSON.stringify(existingLocalStorageValues));
 
     renderHook(() => useAllCasesState(), {
-      wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+      wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+        <TestProviders>{children}</TestProviders>
+      ),
     });
 
     // first call is the initial call made by useLocalStorage
@@ -580,7 +630,9 @@ describe('useAllCasesQueryParams', () => {
     const lsSpy = jest.spyOn(Storage.prototype, 'setItem');
 
     renderHook(() => useAllCasesState(), {
-      wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+      wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+        <TestProviders>{children}</TestProviders>
+      ),
     });
 
     // first call is the initial call made by useLocalStorage
@@ -597,7 +649,9 @@ describe('useAllCasesQueryParams', () => {
       localStorage.setItem(LS_KEY, JSON.stringify(existingLocalStorageValues));
 
       const { result } = renderHook(() => useAllCasesState(), {
-        wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+        wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+          <TestProviders>{children}</TestProviders>
+        ),
       });
 
       expect(result.current.queryParams).toMatchObject({
@@ -609,7 +663,9 @@ describe('useAllCasesQueryParams', () => {
       mockLocation.search = stringifyUrlParams({ perPage: 1000 });
 
       const { result } = renderHook(() => useAllCasesState(), {
-        wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+        wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+          <TestProviders>{children}</TestProviders>
+        ),
       });
 
       expect(result.current.queryParams).toMatchObject({
@@ -627,7 +683,9 @@ describe('useAllCasesQueryParams', () => {
       localStorage.setItem(LS_KEY, JSON.stringify(existingLocalStorageValues));
 
       const { result } = renderHook(() => useAllCasesState(), {
-        wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+        wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+          <TestProviders>{children}</TestProviders>
+        ),
       });
 
       expect(result.current.queryParams).toMatchObject({ sortOrder: 'desc' });
@@ -638,7 +696,9 @@ describe('useAllCasesQueryParams', () => {
       mockLocation.search = stringifyUrlParams({ sortOrder: 'foobar' });
 
       const { result } = renderHook(() => useAllCasesState(), {
-        wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+        wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+          <TestProviders>{children}</TestProviders>
+        ),
       });
 
       expect(result.current.queryParams).toMatchObject({ sortOrder: 'desc' });
@@ -648,7 +708,9 @@ describe('useAllCasesQueryParams', () => {
   describe('Modal', () => {
     it('returns default state with empty URL and local storage', () => {
       const { result } = renderHook(() => useAllCasesState(true), {
-        wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+        wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+          <TestProviders>{children}</TestProviders>
+        ),
       });
 
       expect(result.current.queryParams).toStrictEqual(DEFAULT_CASES_TABLE_STATE.queryParams);
@@ -657,7 +719,9 @@ describe('useAllCasesQueryParams', () => {
 
     it('updates the query params correctly', () => {
       const { result } = renderHook(() => useAllCasesState(true), {
-        wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+        wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+          <TestProviders>{children}</TestProviders>
+        ),
       });
 
       act(() => {
@@ -675,7 +739,9 @@ describe('useAllCasesQueryParams', () => {
 
     it('updates the filter options correctly', () => {
       const { result } = renderHook(() => useAllCasesState(true), {
-        wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+        wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+          <TestProviders>{children}</TestProviders>
+        ),
       });
 
       act(() => {
@@ -691,7 +757,9 @@ describe('useAllCasesQueryParams', () => {
 
     it('does not update the URL when changing the state of the table', () => {
       const { result } = renderHook(() => useAllCasesState(true), {
-        wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+        wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+          <TestProviders>{children}</TestProviders>
+        ),
       });
 
       act(() => {
@@ -703,7 +771,9 @@ describe('useAllCasesQueryParams', () => {
 
     it('does not update the local storage when changing the state of the table', () => {
       const { result } = renderHook(() => useAllCasesState(true), {
-        wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+        wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+          <TestProviders>{children}</TestProviders>
+        ),
       });
 
       act(() => {
@@ -728,7 +798,9 @@ describe('useAllCasesQueryParams', () => {
       localStorage.setItem(LS_KEY, JSON.stringify(existingLocalStorageValues));
 
       renderHook(() => useAllCasesState(true), {
-        wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+        wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+          <TestProviders>{children}</TestProviders>
+        ),
       });
 
       expect(mockPush).not.toHaveBeenCalled();
@@ -741,7 +813,9 @@ describe('useAllCasesQueryParams', () => {
       });
 
       const { result } = renderHook(() => useAllCasesState(true), {
-        wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+        wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+          <TestProviders>{children}</TestProviders>
+        ),
       });
 
       expect(result.current.queryParams).toStrictEqual(DEFAULT_CASES_TABLE_STATE.queryParams);
@@ -760,7 +834,9 @@ describe('useAllCasesQueryParams', () => {
       localStorage.setItem(LS_KEY, JSON.stringify(existingLocalStorageValues));
 
       const { result } = renderHook(() => useAllCasesState(true), {
-        wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+        wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+          <TestProviders>{children}</TestProviders>
+        ),
       });
 
       expect(result.current.queryParams).toStrictEqual(DEFAULT_CASES_TABLE_STATE.queryParams);
@@ -774,7 +850,9 @@ describe('useAllCasesQueryParams', () => {
       });
 
       renderHook(() => useAllCasesState(true), {
-        wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+        wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+          <TestProviders>{children}</TestProviders>
+        ),
       });
 
       const localStorageState = JSON.parse(localStorage.getItem(LS_KEY) ?? '{}');

x-pack/plugins/cases/public/components/app/use_readonly_header.test.tsx

@@ -25,7 +25,9 @@ describe('CaseContainerComponent', () => {
 
   it('does not display the readonly glasses badge when the user has write permissions', () => {
     renderHook(() => useReadonlyHeader(), {
-      wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+      wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+        <TestProviders>{children}</TestProviders>
+      ),
     });
 
     expect(mockedSetBadge).not.toBeCalled();
@@ -33,7 +35,7 @@ describe('CaseContainerComponent', () => {
 
   it('displays the readonly glasses badge read permissions but not write', () => {
     renderHook(() => useReadonlyHeader(), {
-      wrapper: ({ children }) => (
+      wrapper: ({ children }: React.PropsWithChildren<{}>) => (
         <TestProviders permissions={readCasesPermissions()}>{children}</TestProviders>
       ),
     });

x-pack/plugins/cases/public/components/configure_cases/closure_options.test.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import type { ReactWrapper } from 'enzyme';
+import type { ReactWrapper, ComponentType } from 'enzyme';
 import { mount } from 'enzyme';
 
 import type { ClosureOptionsProps } from './closure_options';
@@ -24,7 +24,9 @@ describe('ClosureOptions', () => {
   };
 
   beforeAll(() => {
-    wrapper = mount(<ClosureOptions {...props} />, { wrappingComponent: TestProviders });
+    wrapper = mount(<ClosureOptions {...props} />, {
+      wrappingComponent: TestProviders as ComponentType<React.PropsWithChildren<{}>>,
+    });
   });
 
   test('it shows the closure options form group', () => {

x-pack/plugins/cases/public/components/configure_cases/closure_options_radio.test.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import type { ReactWrapper } from 'enzyme';
+import type { ComponentType, ReactWrapper } from 'enzyme';
 import { mount } from 'enzyme';
 
 import type { ClosureOptionsRadioComponentProps } from './closure_options_radio';
@@ -23,7 +23,9 @@ describe('ClosureOptionsRadio', () => {
   };
 
   beforeAll(() => {
-    wrapper = mount(<ClosureOptionsRadio {...props} />, { wrappingComponent: TestProviders });
+    wrapper = mount(<ClosureOptionsRadio {...props} />, {
+      wrappingComponent: TestProviders as ComponentType<React.PropsWithChildren<{}>>,
+    });
   });
 
   test('it renders', () => {
@@ -46,7 +48,7 @@ describe('ClosureOptionsRadio', () => {
 
   test('it disables the close by user radio button', () => {
     const newWrapper = mount(<ClosureOptionsRadio {...props} disabled={true} />, {
-      wrappingComponent: TestProviders,
+      wrappingComponent: TestProviders as ComponentType<React.PropsWithChildren<{}>>,
     });
 
     expect(newWrapper.find('input[id="close-by-user"]').prop('disabled')).toEqual(true);
@@ -54,7 +56,7 @@ describe('ClosureOptionsRadio', () => {
 
   test('it disables correctly the close by pushing radio button', () => {
     const newWrapper = mount(<ClosureOptionsRadio {...props} disabled={true} />, {
-      wrappingComponent: TestProviders,
+      wrappingComponent: TestProviders as ComponentType<React.PropsWithChildren<{}>>,
     });
 
     expect(newWrapper.find('input[id="close-by-pushing"]').prop('disabled')).toEqual(true);
@@ -64,7 +66,7 @@ describe('ClosureOptionsRadio', () => {
     const newWrapper = mount(
       <ClosureOptionsRadio {...props} closureTypeSelected={'close-by-pushing'} />,
       {
-        wrappingComponent: TestProviders,
+        wrappingComponent: TestProviders as ComponentType<React.PropsWithChildren<{}>>,
       }
     );
     expect(newWrapper.find('input[id="close-by-pushing"]').prop('checked')).toEqual(true);

x-pack/plugins/cases/public/components/configure_cases/connectors.test.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import type { ReactWrapper } from 'enzyme';
+import type { ComponentType, ReactWrapper } from 'enzyme';
 import { mount } from 'enzyme';
 import { render, screen } from '@testing-library/react';
 
@@ -41,7 +41,9 @@ describe('Connectors', () => {
   };
 
   beforeAll(() => {
-    wrapper = mount(<Connectors {...props} />, { wrappingComponent: TestProviders });
+    wrapper = mount(<Connectors {...props} />, {
+      wrappingComponent: TestProviders as ComponentType<React.PropsWithChildren<{}>>,
+    });
   });
 
   beforeEach(() => {
@@ -90,7 +92,7 @@ describe('Connectors', () => {
         selectedConnector={{ id: 'servicenow-1', type: ConnectorTypes.serviceNowITSM }}
       />,
       {
-        wrappingComponent: TestProviders,
+        wrappingComponent: TestProviders as ComponentType<React.PropsWithChildren<{}>>,
       }
     );
 
@@ -117,7 +119,7 @@ describe('Connectors', () => {
         selectedConnector={{ id: 'servicenow-1', type: ConnectorTypes.serviceNowITSM }}
       />,
       {
-        wrappingComponent: TestProviders,
+        wrappingComponent: TestProviders as ComponentType<React.PropsWithChildren<{}>>,
       }
     );
 

x-pack/plugins/cases/public/components/configure_cases/connectors_dropdown.test.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import type { ReactWrapper } from 'enzyme';
+import type { ReactWrapper, ComponentType } from 'enzyme';
 import { mount } from 'enzyme';
 import { EuiSuperSelect } from '@elastic/eui';
 import { render, screen } from '@testing-library/react';
@@ -34,7 +34,9 @@ describe('ConnectorsDropdown', () => {
   };
 
   beforeAll(() => {
-    wrapper = mount(<ConnectorsDropdown {...props} />, { wrappingComponent: TestProviders });
+    wrapper = mount(<ConnectorsDropdown {...props} />, {
+      wrappingComponent: TestProviders as ComponentType<React.PropsWithChildren<{}>>,
+    });
   });
 
   test('it renders', () => {
@@ -298,7 +300,7 @@ describe('ConnectorsDropdown', () => {
 
   test('it disables the dropdown', () => {
     const newWrapper = mount(<ConnectorsDropdown {...props} disabled={true} />, {
-      wrappingComponent: TestProviders,
+      wrappingComponent: TestProviders as ComponentType<React.PropsWithChildren<{}>>,
     });
 
     expect(
@@ -308,7 +310,7 @@ describe('ConnectorsDropdown', () => {
 
   test('it loading correctly', () => {
     const newWrapper = mount(<ConnectorsDropdown {...props} isLoading={true} />, {
-      wrappingComponent: TestProviders,
+      wrappingComponent: TestProviders as ComponentType<React.PropsWithChildren<{}>>,
     });
 
     expect(
@@ -318,7 +320,7 @@ describe('ConnectorsDropdown', () => {
 
   test('it selects the correct connector', () => {
     const newWrapper = mount(<ConnectorsDropdown {...props} selectedConnector={'servicenow-1'} />, {
-      wrappingComponent: TestProviders,
+      wrappingComponent: TestProviders as ComponentType<React.PropsWithChildren<{}>>,
     });
 
     expect(
@@ -348,7 +350,7 @@ describe('ConnectorsDropdown', () => {
           ]}
         />,
         {
-          wrappingComponent: TestProviders,
+          wrappingComponent: TestProviders as ComponentType<React.PropsWithChildren<{}>>,
         }
       )
     ).not.toThrowError();

x-pack/plugins/cases/public/components/configure_cases/field_mapping.test.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import type { ReactWrapper } from 'enzyme';
+import type { ComponentType, ReactWrapper } from 'enzyme';
 import { mount } from 'enzyme';
 
 import type { FieldMappingProps } from './field_mapping';
@@ -24,7 +24,9 @@ describe('FieldMappingRow', () => {
   };
 
   beforeAll(() => {
-    wrapper = mount(<FieldMapping {...props} />, { wrappingComponent: TestProviders });
+    wrapper = mount(<FieldMapping {...props} />, {
+      wrappingComponent: TestProviders as ComponentType<React.PropsWithChildren<{}>>,
+    });
   });
 
   test('it renders', () => {
@@ -37,7 +39,7 @@ describe('FieldMappingRow', () => {
 
   test('it does not render without mappings', () => {
     const newWrapper = mount(<FieldMapping {...props} mappings={[]} />, {
-      wrappingComponent: TestProviders,
+      wrappingComponent: TestProviders as ComponentType<React.PropsWithChildren<{}>>,
     });
     expect(
       newWrapper

x-pack/plugins/cases/public/components/configure_cases/index.test.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import type { ReactWrapper } from 'enzyme';
+import type { ComponentType, ReactWrapper } from 'enzyme';
 import { mount } from 'enzyme';
 import { waitFor, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -87,7 +87,7 @@ describe('ConfigureCases', () => {
       useGetUrlSearchMock.mockImplementation(() => searchURL);
 
       wrapper = mount(<ConfigureCases />, {
-        wrappingComponent: TestProviders,
+        wrappingComponent: TestProviders as ComponentType<React.PropsWithChildren<{}>>,
       });
     });
 
@@ -138,7 +138,7 @@ describe('ConfigureCases', () => {
       }));
       useGetUrlSearchMock.mockImplementation(() => searchURL);
       wrapper = mount(<ConfigureCases />, {
-        wrappingComponent: TestProviders,
+        wrappingComponent: TestProviders as ComponentType<React.PropsWithChildren<{}>>,
       });
     });
 
@@ -180,7 +180,7 @@ describe('ConfigureCases', () => {
       useGetUrlSearchMock.mockImplementation(() => searchURL);
 
       wrapper = mount(<ConfigureCases />, {
-        wrappingComponent: TestProviders,
+        wrappingComponent: TestProviders as ComponentType<React.PropsWithChildren<{}>>,
       });
     });
 
@@ -202,7 +202,7 @@ describe('ConfigureCases', () => {
 
     test('it disables correctly when the user cannot update', () => {
       const newWrapper = mount(<ConfigureCases />, {
-        wrappingComponent: TestProviders,
+        wrappingComponent: TestProviders as ComponentType<React.PropsWithChildren<{}>>,
         wrappingComponentProps: { permissions: noUpdateCasesPermissions() },
       });
 
@@ -259,7 +259,7 @@ describe('ConfigureCases', () => {
 
       useGetUrlSearchMock.mockImplementation(() => searchURL);
       wrapper = mount(<ConfigureCases />, {
-        wrappingComponent: TestProviders,
+        wrappingComponent: TestProviders as ComponentType<React.PropsWithChildren<{}>>,
       });
     });
 
@@ -297,7 +297,7 @@ describe('ConfigureCases', () => {
       }));
 
       wrapper = mount(<ConfigureCases />, {
-        wrappingComponent: TestProviders,
+        wrappingComponent: TestProviders as ComponentType<React.PropsWithChildren<{}>>,
       });
       expect(wrapper.find(Connectors).prop('isLoading')).toBe(true);
     });
@@ -328,7 +328,7 @@ describe('ConfigureCases', () => {
       useGetConnectorsMock.mockImplementation(() => useConnectorsResponse);
       useGetUrlSearchMock.mockImplementation(() => searchURL);
       wrapper = mount(<ConfigureCases />, {
-        wrappingComponent: TestProviders,
+        wrappingComponent: TestProviders as ComponentType<React.PropsWithChildren<{}>>,
       });
     });
 
@@ -373,7 +373,7 @@ describe('ConfigureCases', () => {
 
       useGetUrlSearchMock.mockImplementation(() => searchURL);
       wrapper = mount(<ConfigureCases />, {
-        wrappingComponent: TestProviders,
+        wrappingComponent: TestProviders as ComponentType<React.PropsWithChildren<{}>>,
       });
     });
 
@@ -414,7 +414,7 @@ describe('ConfigureCases', () => {
       useGetUrlSearchMock.mockImplementation(() => searchURL);
 
       wrapper = mount(<ConfigureCases />, {
-        wrappingComponent: TestProviders,
+        wrappingComponent: TestProviders as ComponentType<React.PropsWithChildren<{}>>,
       });
     });
 
@@ -468,7 +468,7 @@ describe('ConfigureCases', () => {
         }));
 
       wrapper = mount(<ConfigureCases />, {
-        wrappingComponent: TestProviders,
+        wrappingComponent: TestProviders as ComponentType<React.PropsWithChildren<{}>>,
       });
 
       wrapper.find('button[data-test-subj="dropdown-connectors"]').simulate('click');
@@ -513,7 +513,7 @@ describe('ConfigureCases', () => {
       useGetUrlSearchMock.mockImplementation(() => searchURL);
 
       wrapper = mount(<ConfigureCases />, {
-        wrappingComponent: TestProviders,
+        wrappingComponent: TestProviders as ComponentType<React.PropsWithChildren<{}>>,
       });
     });
 
@@ -562,7 +562,7 @@ describe('ConfigureCases', () => {
 
     test('it show the add flyout when pressing the add connector button', async () => {
       const wrapper = mount(<ConfigureCases />, {
-        wrappingComponent: TestProviders,
+        wrappingComponent: TestProviders as ComponentType<React.PropsWithChildren<{}>>,
       });
 
       wrapper.find('button[data-test-subj="dropdown-connectors"]').simulate('click');
@@ -597,7 +597,7 @@ describe('ConfigureCases', () => {
         .mockReturnValue(true);
 
       const wrapper = mount(<ConfigureCases />, {
-        wrappingComponent: TestProviders,
+        wrappingComponent: TestProviders as ComponentType<React.PropsWithChildren<{}>>,
       });
       wrapper
         .find('button[data-test-subj="case-configure-update-selected-connector-button"]')

x-pack/plugins/cases/public/components/configure_cases/mapping.test.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { mount } from 'enzyme';
+import { mount, type ComponentType } from 'enzyme';
 
 import { TestProviders } from '../../common/mock';
 import type { MappingProps } from './mapping';
@@ -23,12 +23,16 @@ describe('Mapping', () => {
   };
 
   test('it shows mapping form group', () => {
-    const wrapper = mount(<Mapping {...props} />, { wrappingComponent: TestProviders });
+    const wrapper = mount(<Mapping {...props} />, {
+      wrappingComponent: TestProviders as ComponentType<React.PropsWithChildren<{}>>,
+    });
     expect(wrapper.find('[data-test-subj="static-mappings"]').first().exists()).toBe(true);
   });
 
   test('correctly maps fields', () => {
-    const wrapper = mount(<Mapping {...props} />, { wrappingComponent: TestProviders });
+    const wrapper = mount(<Mapping {...props} />, {
+      wrappingComponent: TestProviders as ComponentType<React.PropsWithChildren<{}>>,
+    });
     expect(wrapper.find('[data-test-subj="field-mapping-source"] code').first().text()).toBe(
       'title'
     );
@@ -38,14 +42,18 @@ describe('Mapping', () => {
   });
 
   test('displays the title correctly', () => {
-    const wrapper = mount(<Mapping {...props} />, { wrappingComponent: TestProviders });
+    const wrapper = mount(<Mapping {...props} />, {
+      wrappingComponent: TestProviders as ComponentType<React.PropsWithChildren<{}>>,
+    });
     expect(wrapper.find('[data-test-subj="field-mapping-text"] h4').first().text()).toBe(
       'ServiceNow ITSM field mappings'
     );
   });
 
   test('displays the description correctly', () => {
-    const wrapper = mount(<Mapping {...props} />, { wrappingComponent: TestProviders });
+    const wrapper = mount(<Mapping {...props} />, {
+      wrappingComponent: TestProviders as ComponentType<React.PropsWithChildren<{}>>,
+    });
     expect(wrapper.find('[data-test-subj="field-mapping-desc"]').first().text()).toBe(
       'Map Case fields to ServiceNow ITSM fields when pushing data to ServiceNow ITSM. Field mappings require an established connection to ServiceNow ITSM.'
     );
@@ -53,7 +61,7 @@ describe('Mapping', () => {
 
   test('displays connection warning when isLoading: false and mappings: []', () => {
     const wrapper = mount(<Mapping {...{ ...props, mappings: [] }} />, {
-      wrappingComponent: TestProviders,
+      wrappingComponent: TestProviders as ComponentType<React.PropsWithChildren<{}>>,
     });
     expect(wrapper.find('[data-test-subj="field-mapping-desc"]').first().text()).toBe(
       'Failed to retrieve mappings for ServiceNow ITSM.'

x-pack/plugins/cases/public/components/links/index.test.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import type { ReactWrapper } from 'enzyme';
+import type { ComponentType, ReactWrapper } from 'enzyme';
 import { mount } from 'enzyme';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -29,7 +29,9 @@ describe('Configuration button', () => {
   };
 
   beforeAll(() => {
-    wrapper = mount(<ConfigureCaseButton {...props} />, { wrappingComponent: TestProviders });
+    wrapper = mount(<ConfigureCaseButton {...props} />, {
+      wrappingComponent: TestProviders as ComponentType<React.PropsWithChildren<{}>>,
+    });
   });
 
   test('it renders without the tooltip', () => {
@@ -59,7 +61,7 @@ describe('Configuration button', () => {
         msgTooltip={msgTooltip}
       />,
       {
-        wrappingComponent: TestProviders,
+        wrappingComponent: TestProviders as ComponentType<React.PropsWithChildren<{}>>,
       }
     );
 
@@ -85,7 +87,7 @@ describe('Configuration button', () => {
         msgTooltip={<>{msgTooltip}</>}
       />,
       {
-        wrappingComponent: TestProviders,
+        wrappingComponent: TestProviders as ComponentType<React.PropsWithChildren<{}>>,
       }
     );
 

x-pack/plugins/cases/public/components/use_create_case_modal/index.test.tsx

@@ -27,23 +27,23 @@ describe('useCreateCaseModal', () => {
   });
 
   it('init', async () => {
-    const { result } = renderHook<UseCreateCaseModalProps, UseCreateCaseModalReturnedValues>(
-      () => useCreateCaseModal({ onCaseCreated }),
-      {
-        wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
-      }
-    );
+    const { result } = renderHook<
+      React.PropsWithChildren<UseCreateCaseModalProps>,
+      UseCreateCaseModalReturnedValues
+    >(() => useCreateCaseModal({ onCaseCreated }), {
+      wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+    });
 
     expect(result.current.isModalOpen).toBe(false);
   });
 
   it('opens the modal', async () => {
-    const { result } = renderHook<UseCreateCaseModalProps, UseCreateCaseModalReturnedValues>(
-      () => useCreateCaseModal({ onCaseCreated }),
-      {
-        wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
-      }
-    );
+    const { result } = renderHook<
+      React.PropsWithChildren<UseCreateCaseModalProps>,
+      UseCreateCaseModalReturnedValues
+    >(() => useCreateCaseModal({ onCaseCreated }), {
+      wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+    });
 
     act(() => {
       result.current.openModal();
@@ -53,12 +53,12 @@ describe('useCreateCaseModal', () => {
   });
 
   it('closes the modal', async () => {
-    const { result } = renderHook<UseCreateCaseModalProps, UseCreateCaseModalReturnedValues>(
-      () => useCreateCaseModal({ onCaseCreated }),
-      {
-        wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
-      }
-    );
+    const { result } = renderHook<
+      React.PropsWithChildren<UseCreateCaseModalProps>,
+      UseCreateCaseModalReturnedValues
+    >(() => useCreateCaseModal({ onCaseCreated }), {
+      wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+    });
 
     act(() => {
       result.current.openModal();
@@ -70,7 +70,7 @@ describe('useCreateCaseModal', () => {
 
   it('returns a memoized value', async () => {
     const { result, rerender } = renderHook<
-      UseCreateCaseModalProps,
+      React.PropsWithChildren<UseCreateCaseModalProps>,
       UseCreateCaseModalReturnedValues
     >(() => useCreateCaseModal({ onCaseCreated }), {
       wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
@@ -84,12 +84,12 @@ describe('useCreateCaseModal', () => {
   });
 
   it('closes the modal when creating a case', async () => {
-    const { result } = renderHook<UseCreateCaseModalProps, UseCreateCaseModalReturnedValues>(
-      () => useCreateCaseModal({ onCaseCreated }),
-      {
-        wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
-      }
-    );
+    const { result } = renderHook<
+      React.PropsWithChildren<UseCreateCaseModalProps>,
+      UseCreateCaseModalReturnedValues
+    >(() => useCreateCaseModal({ onCaseCreated }), {
+      wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+    });
 
     act(() => {
       result.current.openModal();

x-pack/plugins/cases/public/components/use_push_to_service/index.test.tsx

@@ -68,12 +68,12 @@ describe('usePushToService', () => {
   });
 
   it('calls pushCaseToExternalService with correct arguments', async () => {
-    const { result } = renderHook<UsePushToService, ReturnUsePushToService>(
-      () => usePushToService(defaultArgs),
-      {
-        wrapper: ({ children }) => <TestProviders> {children}</TestProviders>,
-      }
-    );
+    const { result } = renderHook<
+      React.PropsWithChildren<UsePushToService>,
+      ReturnUsePushToService
+    >(() => usePushToService(defaultArgs), {
+      wrapper: ({ children }) => <TestProviders> {children}</TestProviders>,
+    });
 
     await act(async () => {
       await result.current.handlePushToService();
@@ -94,12 +94,12 @@ describe('usePushToService', () => {
       },
     }));
 
-    const { result } = renderHook<UsePushToService, ReturnUsePushToService>(
-      () => usePushToService(defaultArgs),
-      {
-        wrapper: ({ children }) => <TestProviders> {children}</TestProviders>,
-      }
-    );
+    const { result } = renderHook<
+      React.PropsWithChildren<UsePushToService>,
+      ReturnUsePushToService
+    >(() => usePushToService(defaultArgs), {
+      wrapper: ({ children }) => <TestProviders> {children}</TestProviders>,
+    });
 
     const errorsMsg = result.current.errorsMsg;
     expect(errorsMsg).toHaveLength(1);
@@ -116,12 +116,12 @@ describe('usePushToService', () => {
       },
     }));
 
-    const { result } = renderHook<UsePushToService, ReturnUsePushToService>(
-      () => usePushToService(defaultArgs),
-      {
-        wrapper: ({ children }) => <TestProviders> {children}</TestProviders>,
-      }
-    );
+    const { result } = renderHook<
+      React.PropsWithChildren<UsePushToService>,
+      ReturnUsePushToService
+    >(() => usePushToService(defaultArgs), {
+      wrapper: ({ children }) => <TestProviders> {children}</TestProviders>,
+    });
 
     const errorsMsg = result.current.errorsMsg;
     expect(errorsMsg).toHaveLength(1);
@@ -130,7 +130,10 @@ describe('usePushToService', () => {
   });
 
   it('Displays message when user has select none as connector', async () => {
-    const { result } = renderHook<UsePushToService, ReturnUsePushToService>(
+    const { result } = renderHook<
+      React.PropsWithChildren<UsePushToService>,
+      ReturnUsePushToService
+    >(
       () =>
         usePushToService({
           ...defaultArgs,
@@ -153,7 +156,10 @@ describe('usePushToService', () => {
   });
 
   it('Displays message when connector is deleted', async () => {
-    const { result } = renderHook<UsePushToService, ReturnUsePushToService>(
+    const { result } = renderHook<
+      React.PropsWithChildren<UsePushToService>,
+      ReturnUsePushToService
+    >(
       () =>
         usePushToService({
           ...defaultArgs,
@@ -177,7 +183,10 @@ describe('usePushToService', () => {
   });
 
   it('Displays message when case is closed', async () => {
-    const { result } = renderHook<UsePushToService, ReturnUsePushToService>(
+    const { result } = renderHook<
+      React.PropsWithChildren<UsePushToService>,
+      ReturnUsePushToService
+    >(
       () =>
         usePushToService({
           ...defaultArgs,
@@ -195,7 +204,10 @@ describe('usePushToService', () => {
   });
 
   it('should not call pushCaseToExternalService when the selected connector is none', async () => {
-    const { result } = renderHook<UsePushToService, ReturnUsePushToService>(
+    const { result } = renderHook<
+      React.PropsWithChildren<UsePushToService>,
+      ReturnUsePushToService
+    >(
       () =>
         usePushToService({
           ...defaultArgs,
@@ -219,12 +231,12 @@ describe('usePushToService', () => {
   });
 
   it('refresh case view page after push', async () => {
-    const { result, waitFor } = renderHook<UsePushToService, ReturnUsePushToService>(
-      () => usePushToService(defaultArgs),
-      {
-        wrapper: ({ children }) => <TestProviders> {children}</TestProviders>,
-      }
-    );
+    const { result, waitFor } = renderHook<
+      React.PropsWithChildren<UsePushToService>,
+      ReturnUsePushToService
+    >(() => usePushToService(defaultArgs), {
+      wrapper: ({ children }) => <TestProviders> {children}</TestProviders>,
+    });
 
     await act(async () => {
       await result.current.handlePushToService();
@@ -237,14 +249,14 @@ describe('usePushToService', () => {
 
   describe('user does not have write or push permissions', () => {
     it('returns correct information about push permissions', async () => {
-      const { result } = renderHook<UsePushToService, ReturnUsePushToService>(
-        () => usePushToService(defaultArgs),
-        {
-          wrapper: ({ children }) => (
-            <TestProviders permissions={noPushCasesPermissions()}> {children}</TestProviders>
-          ),
-        }
-      );
+      const { result } = renderHook<
+        React.PropsWithChildren<UsePushToService>,
+        ReturnUsePushToService
+      >(() => usePushToService(defaultArgs), {
+        wrapper: ({ children }) => (
+          <TestProviders permissions={noPushCasesPermissions()}> {children}</TestProviders>
+        ),
+      });
 
       expect(result.current.hasPushPermissions).toBe(false);
     });
@@ -258,14 +270,14 @@ describe('usePushToService', () => {
         },
       }));
 
-      const { result } = renderHook<UsePushToService, ReturnUsePushToService>(
-        () => usePushToService(defaultArgs),
-        {
-          wrapper: ({ children }) => (
-            <TestProviders permissions={readCasesPermissions()}> {children}</TestProviders>
-          ),
-        }
-      );
+      const { result } = renderHook<
+        React.PropsWithChildren<UsePushToService>,
+        ReturnUsePushToService
+      >(() => usePushToService(defaultArgs), {
+        wrapper: ({ children }) => (
+          <TestProviders permissions={readCasesPermissions()}> {children}</TestProviders>
+        ),
+      });
 
       expect(result.current.errorsMsg).toEqual([]);
       expect(result.current.hasErrorMessages).toBe(false);
@@ -280,21 +292,24 @@ describe('usePushToService', () => {
         },
       }));
 
-      const { result } = renderHook<UsePushToService, ReturnUsePushToService>(
-        () => usePushToService(defaultArgs),
-        {
-          wrapper: ({ children }) => (
-            <TestProviders permissions={readCasesPermissions()}> {children}</TestProviders>
-          ),
-        }
-      );
+      const { result } = renderHook<
+        React.PropsWithChildren<UsePushToService>,
+        ReturnUsePushToService
+      >(() => usePushToService(defaultArgs), {
+        wrapper: ({ children }) => (
+          <TestProviders permissions={readCasesPermissions()}> {children}</TestProviders>
+        ),
+      });
 
       expect(result.current.errorsMsg).toEqual([]);
       expect(result.current.hasErrorMessages).toBe(false);
     });
 
     it('does not display a message when user does not have any connector configured', async () => {
-      const { result } = renderHook<UsePushToService, ReturnUsePushToService>(
+      const { result } = renderHook<
+        React.PropsWithChildren<UsePushToService>,
+        ReturnUsePushToService
+      >(
         () =>
           usePushToService({
             ...defaultArgs,
@@ -317,7 +332,10 @@ describe('usePushToService', () => {
     });
 
     it('does not display a message when user does have a connector but is configured to none', async () => {
-      const { result } = renderHook<UsePushToService, ReturnUsePushToService>(
+      const { result } = renderHook<
+        React.PropsWithChildren<UsePushToService>,
+        ReturnUsePushToService
+      >(
         () =>
           usePushToService({
             ...defaultArgs,
@@ -340,7 +358,10 @@ describe('usePushToService', () => {
     });
 
     it('does not display a message when connector is deleted', async () => {
-      const { result } = renderHook<UsePushToService, ReturnUsePushToService>(
+      const { result } = renderHook<
+        React.PropsWithChildren<UsePushToService>,
+        ReturnUsePushToService
+      >(
         () =>
           usePushToService({
             ...defaultArgs,
@@ -364,7 +385,10 @@ describe('usePushToService', () => {
     });
 
     it('does not display a message when case is closed', async () => {
-      const { result } = renderHook<UsePushToService, ReturnUsePushToService>(
+      const { result } = renderHook<
+        React.PropsWithChildren<UsePushToService>,
+        ReturnUsePushToService
+      >(
         () =>
           usePushToService({
             ...defaultArgs,
@@ -384,12 +408,12 @@ describe('usePushToService', () => {
 
   describe('returned values', () => {
     it('initial', async () => {
-      const { result } = renderHook<UsePushToService, ReturnUsePushToService>(
-        () => usePushToService(defaultArgs),
-        {
-          wrapper: ({ children }) => <TestProviders> {children}</TestProviders>,
-        }
-      );
+      const { result } = renderHook<
+        React.PropsWithChildren<UsePushToService>,
+        ReturnUsePushToService
+      >(() => usePushToService(defaultArgs), {
+        wrapper: ({ children }) => <TestProviders> {children}</TestProviders>,
+      });
 
       const { handlePushToService, errorsMsg, ...rest } = result.current;
 
@@ -406,12 +430,12 @@ describe('usePushToService', () => {
     it('isLoading is true when usePostPushToService is loading', async () => {
       usePostPushToServiceMock.mockReturnValue({ ...mockPostPush, isLoading: true });
 
-      const { result } = renderHook<UsePushToService, ReturnUsePushToService>(
-        () => usePushToService(defaultArgs),
-        {
-          wrapper: ({ children }) => <TestProviders> {children}</TestProviders>,
-        }
-      );
+      const { result } = renderHook<
+        React.PropsWithChildren<UsePushToService>,
+        ReturnUsePushToService
+      >(() => usePushToService(defaultArgs), {
+        wrapper: ({ children }) => <TestProviders> {children}</TestProviders>,
+      });
 
       expect(result.current.isLoading).toBe(true);
     });
@@ -422,29 +446,32 @@ describe('usePushToService', () => {
         data: actionLicense,
       });
 
-      const { result } = renderHook<UsePushToService, ReturnUsePushToService>(
-        () => usePushToService(defaultArgs),
-        {
-          wrapper: ({ children }) => <TestProviders> {children}</TestProviders>,
-        }
-      );
+      const { result } = renderHook<
+        React.PropsWithChildren<UsePushToService>,
+        ReturnUsePushToService
+      >(() => usePushToService(defaultArgs), {
+        wrapper: ({ children }) => <TestProviders> {children}</TestProviders>,
+      });
 
       expect(result.current.isLoading).toBe(true);
     });
 
     it('hasErrorMessages=true if there are error messages', async () => {
-      const { result } = renderHook<UsePushToService, ReturnUsePushToService>(
-        () => usePushToService({ ...defaultArgs, caseStatus: CaseStatuses.closed }),
-        {
-          wrapper: ({ children }) => <TestProviders> {children}</TestProviders>,
-        }
-      );
+      const { result } = renderHook<
+        React.PropsWithChildren<UsePushToService>,
+        ReturnUsePushToService
+      >(() => usePushToService({ ...defaultArgs, caseStatus: CaseStatuses.closed }), {
+        wrapper: ({ children }) => <TestProviders> {children}</TestProviders>,
+      });
 
       expect(result.current.hasErrorMessages).toBe(true);
     });
 
     it('needsToBePushed=true if the connector needs to be pushed', async () => {
-      const { result } = renderHook<UsePushToService, ReturnUsePushToService>(
+      const { result } = renderHook<
+        React.PropsWithChildren<UsePushToService>,
+        ReturnUsePushToService
+      >(
         () =>
           usePushToService({
             ...defaultArgs,
@@ -468,7 +495,10 @@ describe('usePushToService', () => {
     });
 
     it('needsToBePushed=false if the connector does not exist', async () => {
-      const { result } = renderHook<UsePushToService, ReturnUsePushToService>(
+      const { result } = renderHook<
+        React.PropsWithChildren<UsePushToService>,
+        ReturnUsePushToService
+      >(
         () =>
           usePushToService({
             ...defaultArgs,
@@ -489,7 +519,10 @@ describe('usePushToService', () => {
     });
 
     it('hasBeenPushed=false if the connector has been pushed', async () => {
-      const { result } = renderHook<UsePushToService, ReturnUsePushToService>(
+      const { result } = renderHook<
+        React.PropsWithChildren<UsePushToService>,
+        ReturnUsePushToService
+      >(
         () =>
           usePushToService({
             ...defaultArgs,
@@ -513,7 +546,10 @@ describe('usePushToService', () => {
     });
 
     it('hasBeenPushed=false if the connector does not exist', async () => {
-      const { result } = renderHook<UsePushToService, ReturnUsePushToService>(
+      const { result } = renderHook<
+        React.PropsWithChildren<UsePushToService>,
+        ReturnUsePushToService
+      >(
         () =>
           usePushToService({
             ...defaultArgs,
@@ -539,14 +575,14 @@ describe('usePushToService', () => {
         data: actionLicense,
       });
 
-      const { result } = renderHook<UsePushToService, ReturnUsePushToService>(
-        () => usePushToService(defaultArgs),
-        {
-          wrapper: ({ children }) => (
-            <TestProviders permissions={noPushCasesPermissions()}> {children}</TestProviders>
-          ),
-        }
-      );
+      const { result } = renderHook<
+        React.PropsWithChildren<UsePushToService>,
+        ReturnUsePushToService
+      >(() => usePushToService(defaultArgs), {
+        wrapper: ({ children }) => (
+          <TestProviders permissions={noPushCasesPermissions()}> {children}</TestProviders>
+        ),
+      });
 
       expect(result.current.hasPushPermissions).toBe(false);
     });
@@ -560,12 +596,12 @@ describe('usePushToService', () => {
         },
       }));
 
-      const { result } = renderHook<UsePushToService, ReturnUsePushToService>(
-        () => usePushToService(defaultArgs),
-        {
-          wrapper: ({ children }) => <TestProviders> {children}</TestProviders>,
-        }
-      );
+      const { result } = renderHook<
+        React.PropsWithChildren<UsePushToService>,
+        ReturnUsePushToService
+      >(() => usePushToService(defaultArgs), {
+        wrapper: ({ children }) => <TestProviders> {children}</TestProviders>,
+      });
 
       expect(result.current.hasLicenseError).toBe(true);
     });
@@ -576,12 +612,12 @@ describe('usePushToService', () => {
         data: undefined,
       }));
 
-      const { result } = renderHook<UsePushToService, ReturnUsePushToService>(
-        () => usePushToService(defaultArgs),
-        {
-          wrapper: ({ children }) => <TestProviders> {children}</TestProviders>,
-        }
-      );
+      const { result } = renderHook<
+        React.PropsWithChildren<UsePushToService>,
+        ReturnUsePushToService
+      >(() => usePushToService(defaultArgs), {
+        wrapper: ({ children }) => <TestProviders> {children}</TestProviders>,
+      });
 
       expect(result.current.hasLicenseError).toBe(false);
     });

x-pack/plugins/cases/public/components/user_actions/copy_link.test.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import type { ReactWrapper } from 'enzyme';
+import type { ReactWrapper, ComponentType } from 'enzyme';
 import { mount } from 'enzyme';
 import copy from 'copy-to-clipboard';
 
@@ -33,7 +33,9 @@ describe('UserActionCopyLink ', () => {
   let wrapper: ReactWrapper;
 
   beforeAll(() => {
-    wrapper = mount(<UserActionCopyLink {...props} />, { wrappingComponent: TestProviders });
+    wrapper = mount(<UserActionCopyLink {...props} />, {
+      wrappingComponent: TestProviders as ComponentType<React.PropsWithChildren<{}>>,
+    });
   });
 
   beforeEach(() => {

x-pack/plugins/cases/public/components/user_actions/timestamp.test.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import type { ReactWrapper } from 'enzyme';
+import type { ComponentType, ReactWrapper } from 'enzyme';
 import { mount } from 'enzyme';
 import { TestProviders } from '../../common/mock';
 import { UserActionTimestamp } from './timestamp';
@@ -35,7 +35,9 @@ describe('UserActionTimestamp ', () => {
   let wrapper: ReactWrapper;
 
   beforeAll(() => {
-    wrapper = mount(<UserActionTimestamp {...props} />, { wrappingComponent: TestProviders });
+    wrapper = mount(<UserActionTimestamp {...props} />, {
+      wrappingComponent: TestProviders as ComponentType<React.PropsWithChildren<{}>>,
+    });
   });
 
   it('it renders', async () => {
@@ -49,7 +51,7 @@ describe('UserActionTimestamp ', () => {
 
   it('it shows only the created time when the updated time is missing', async () => {
     const newWrapper = mount(<UserActionTimestamp createdAt="2020-09-06T14:40:59.889Z" />, {
-      wrappingComponent: TestProviders,
+      wrappingComponent: TestProviders as ComponentType<React.PropsWithChildren<{}>>,
     });
 
     expect(

x-pack/plugins/cases/public/containers/configure/use_get_supported_action_connectors.tsx.test.tsx

@@ -27,7 +27,9 @@ describe('useConnectors', () => {
   it('fetches connectors', async () => {
     const spy = jest.spyOn(api, 'getSupportedActionConnectors');
     const { waitForNextUpdate } = renderHook(() => useGetSupportedActionConnectors(), {
-      wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+      wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+        <TestProviders>{children}</TestProviders>
+      ),
     });
 
     await waitForNextUpdate();
@@ -45,7 +47,9 @@ describe('useConnectors', () => {
     });
 
     const { waitForNextUpdate } = renderHook(() => useGetSupportedActionConnectors(), {
-      wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+      wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+        <TestProviders>{children}</TestProviders>
+      ),
     });
     await waitForNextUpdate();
 
@@ -57,7 +61,9 @@ describe('useConnectors', () => {
     useApplicationCapabilitiesMock().actions = { crud: false, read: false };
 
     const { result, waitForNextUpdate } = renderHook(() => useGetSupportedActionConnectors(), {
-      wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+      wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+        <TestProviders>{children}</TestProviders>
+      ),
     });
 
     await waitForNextUpdate();
@@ -71,7 +77,7 @@ describe('useConnectors', () => {
     useApplicationCapabilitiesMock().actions = { crud: true, read: true };
 
     const { result, waitForNextUpdate } = renderHook(() => useGetSupportedActionConnectors(), {
-      wrapper: ({ children }) => (
+      wrapper: ({ children }: React.PropsWithChildren<{}>) => (
         <TestProviders permissions={noConnectorsCasePermission()}>{children}</TestProviders>
       ),
     });

x-pack/plugins/cases/public/containers/use_get_categories.test.tsx

@@ -25,7 +25,9 @@ describe('useGetCategories', () => {
   it('calls getCategories api', async () => {
     const spyOnGetCategories = jest.spyOn(api, 'getCategories');
     const { waitForNextUpdate } = renderHook(() => useGetCategories(), {
-      wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+      wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+        <TestProviders>{children}</TestProviders>
+      ),
     });
 
     await waitForNextUpdate();
@@ -46,7 +48,9 @@ describe('useGetCategories', () => {
     (useToasts as jest.Mock).mockReturnValue({ addError });
 
     const { waitForNextUpdate } = renderHook(() => useGetCategories(), {
-      wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+      wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+        <TestProviders>{children}</TestProviders>
+      ),
     });
 
     await waitForNextUpdate();

x-pack/plugins/cases/public/containers/use_get_tags.test.tsx

@@ -25,7 +25,9 @@ describe('useGetTags', () => {
   it('calls getTags api', async () => {
     const spyOnGetTags = jest.spyOn(api, 'getTags');
     const { waitForNextUpdate } = renderHook(() => useGetTags(), {
-      wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+      wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+        <TestProviders>{children}</TestProviders>
+      ),
     });
     await waitForNextUpdate();
     expect(spyOnGetTags).toBeCalledWith({
@@ -42,7 +44,9 @@ describe('useGetTags', () => {
       throw new Error('Something went wrong');
     });
     const { waitForNextUpdate } = renderHook(() => useGetTags(), {
-      wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
+      wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+        <TestProviders>{children}</TestProviders>
+      ),
     });
     await waitForNextUpdate();
     expect(addError).toBeCalled();

x-pack/plugins/cross_cluster_replication/public/app/components/auto_follow_pattern_delete_provider.d.ts

@@ -5,6 +5,8 @@
  * 2.0.
  */
 
-import { FC, PropsWithChildren } from 'react';
+import { FC, ReactNode } from 'react';
 
-declare const AutoFollowPatternDeleteProvider: FC<PropsWithChildren<unknown>>;
+declare const AutoFollowPatternDeleteProvider: FC<{
+  children: (deleteAutoFollowPattern: (ids: string[]) => void) => ReactNode;
+}>;

x-pack/plugins/enterprise_search/public/applications/shared/layout/endpoints_header_action.tsx

@@ -17,7 +17,7 @@ import { i18n } from '@kbn/i18n';
 
 import { EndpointIcon } from './endpoint_icon';
 
-export const EndpointsHeaderAction: React.FC = ({ children }) => {
+export const EndpointsHeaderAction: React.FC<React.PropsWithChildren<{}>> = ({ children }) => {
   const [open, setOpen] = React.useState(false);
 
   return (

x-pack/plugins/fleet/public/applications/fleet/app.tsx

@@ -288,10 +288,12 @@ const FleetTopNav = memo(
   }
 );
 
-const AppLayout: React.FC<{
-  setHeaderActionMenu: AppMountParameters['setHeaderActionMenu'];
-  isReadOnly?: boolean;
-}> = ({ children, setHeaderActionMenu, isReadOnly }) => {
+const AppLayout: React.FC<
+  React.PropsWithChildren<{
+    setHeaderActionMenu: AppMountParameters['setHeaderActionMenu'];
+    isReadOnly?: boolean;
+  }>
+> = ({ children, setHeaderActionMenu, isReadOnly }) => {
   return (
     <>
       <FleetTopNav setHeaderActionMenu={setHeaderActionMenu} isReadOnly={isReadOnly} />

x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/single_page_layout/index.tsx

@@ -337,7 +337,7 @@ export const CreatePackagePolicySinglePage: CreatePackagePolicyParams = ({
 
   // If an auth block view is registered to the UI Extension context, we expect the registered component to return a React component when the PLI is not sufficient,
   // or simply a wrapper returning the children if the PLI is sufficient.
-  const PliAuthBlockWrapper: React.FC = useMemo(
+  const PliAuthBlockWrapper: React.FC<React.PropsWithChildren<{}>> = useMemo(
     () =>
       pliAuthBlockView?.Component && !isPackageInfoLoading
         ? pliAuthBlockView.Component

x-pack/plugins/fleet/public/applications/fleet/sections/settings/index.tsx

@@ -106,9 +106,9 @@ export const SettingsApp = withConfirmModalProvider(() => {
     <DefaultLayout section="settings">
       <Routes>
         <Route path={FLEET_ROUTING_PATHS.settings_edit_fleet_server_hosts}>
-          {(route: { match: { params: { itemId: string } } }) => {
+          {(route: { match: { params: { itemId: string } } | null }) => {
             const fleetServerHost = fleetServerHostsItems.find(
-              (o) => route.match.params.itemId === o.id
+              (o) => route.match?.params.itemId === o.id
             );
             if (!fleetServerHost) {
               return <Redirect to={FLEET_ROUTING_PATHS.settings} />;
@@ -155,9 +155,9 @@ export const SettingsApp = withConfirmModalProvider(() => {
           </EuiPortal>
         </Route>
         <Route path={FLEET_ROUTING_PATHS.settings_edit_fleet_proxy}>
-          {(route: { match: { params: { itemId: string } } }) => {
+          {(route: { match: { params: { itemId: string } } | null }) => {
             const fleetProxy = proxies.data?.items.find(
-              (item) => route.match.params.itemId === item.id
+              (item) => route.match?.params.itemId === item.id
             );
             if (!fleetProxy) {
               return <Redirect to={FLEET_ROUTING_PATHS.settings} />;
@@ -170,8 +170,8 @@ export const SettingsApp = withConfirmModalProvider(() => {
           }}
         </Route>
         <Route path={FLEET_ROUTING_PATHS.settings_edit_outputs}>
-          {(route: { match: { params: { outputId: string } } }) => {
-            const output = outputItems.find((o) => route.match.params.outputId === o.id);
+          {(route: { match: { params: { outputId: string } } | null }) => {
+            const output = outputItems.find((o) => route.match?.params.outputId === o.id);
             if (!output) {
               return <Redirect to={FLEET_ROUTING_PATHS.settings} />;
             }
@@ -199,9 +199,9 @@ export const SettingsApp = withConfirmModalProvider(() => {
           </EuiPortal>
         </Route>
         <Route path={FLEET_ROUTING_PATHS.settings_edit_download_sources}>
-          {(route: { match: { params: { downloadSourceId: string } } }) => {
+          {(route: { match: { params: { downloadSourceId: string } } | null }) => {
             const downloadSource = downloadSources.data?.items.find(
-              (o) => route.match.params.downloadSourceId === o.id
+              (o) => route.match?.params.downloadSourceId === o.id
             );
             if (!downloadSource) {
               return <Redirect to={FLEET_ROUTING_PATHS.settings} />;

x-pack/plugins/fleet/public/applications/integrations/hooks/use_read_only_context.tsx

@@ -11,7 +11,7 @@ const ReadOnlyContext = createContext<{ isReadOnly: boolean; setIsReadOnly: (v:
   { isReadOnly: false, setIsReadOnly: () => {} }
 );
 
-export const ReadOnlyContextProvider: React.FC = ({ children }) => {
+export const ReadOnlyContextProvider: React.FC<React.PropsWithChildren<{}>> = ({ children }) => {
   const [isReadOnly, setIsReadOnly] = useState(false);
   return (
     <ReadOnlyContext.Provider

x-pack/plugins/fleet/public/components/agent_enrollment_flyout/steps/installation_mode_selection_step.tsx

@@ -15,9 +15,11 @@ import type { EuiContainedStepProps } from '@elastic/eui/src/components/steps/st
 import { useAuthz } from '../../../hooks';
 import type { FlyoutMode } from '../types';
 
-const PermissionWrapper: React.FunctionComponent<{
-  showTooltip: boolean;
-}> = ({ children, showTooltip }) => {
+const PermissionWrapper: React.FunctionComponent<
+  React.PropsWithChildren<{
+    showTooltip: boolean;
+  }>
+> = ({ children, showTooltip }) => {
   return showTooltip && children ? (
     <EuiToolTip
       content={