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

## Summary

Part of elastic#138222

in @types/react@18 types [have become more
strict](DefinitelyTyped/DefinitelyTyped#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,
 };