mirror of
https://github.com/elastic/kibana.git
synced 2025-06-27 18:51:07 -04:00
fccfd4cf75
## 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<{}>, }); ``` |
||
|---|---|---|
| .. | ||
| index-management | ||
| kbn-alerting-comparators | ||
| kbn-alerting-state-types | ||
| kbn-cloud-security-posture | ||
| kbn-cloud-security-posture-common | ||
| kbn-data-forge | ||
| kbn-elastic-assistant | ||
| kbn-elastic-assistant-common | ||
| kbn-entities-schema | ||
| kbn-infra-forge | ||
| kbn-langchain | ||
| kbn-random-sampling | ||
| kbn-slo-schema | ||
| kbn-synthetics-private-location | ||
| maps/vector_tile_utils | ||
| ml | ||
| observability | ||
| rollup | ||
| security | ||
| security-solution | ||