mirror of
https://github.com/elastic/kibana.git
synced 2025-04-23 01:13:23 -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<{}>, }); ``` |
||
|---|---|---|
| .. | ||
| __snapshots__ | ||
| index.ts | ||
| jest.config.js | ||
| kibana.jsonc | ||
| package.json | ||
| README.mdx | ||
| route.test.tsx | ||
| route.tsx | ||
| router.tsx | ||
| routes.tsx | ||
| services.ts | ||
| tsconfig.json | ||
| types.ts | ||
| use_execution_context.ts | ||
---
id: sharedUX/Router
slug: /shared-ux/router
title: Router
description: A router component
tags: ['shared-ux', 'component', 'router', 'route']
date: 2022-08-12
---
## Summary
This is a wrapper around the `react-router-dom` Route component that inserts MatchPropagator in every application route. It helps track all route changes and send them to the execution context, later used to enrich APM 'route-change' transactions.
The component does not require any props and accepts props from the RouteProps interface such as a `path`, or a component like `AppContainer`.
```jsx
<Route path="/url" />
```
### Explanation of RouteProps
```jsx
export interface RouteProps {
location?: H.Location;
component?: React.ComponentType<RouteComponentProps<any>> | React.ComponentType<any>;
render?: (props: RouteComponentProps<any>) => React.ReactNode;
children?: ((props: RouteChildrenProps<any>) => React.ReactNode) | React.ReactNode;
path?: string | string[];
exact?: boolean;
sensitive?: boolean;
strict?: boolean;
}
```
All props are optional
| Prop Name | Prop Type | Description |
|---|---|---|
| `location` | `H.Location` | the location of one instance of history |
| `component` | `React.ComponentType<RouteComponentProps<any>>` or `React.ComponentType<any>;` | a react component |
| `render` | `(props: RouteComponentProps<any>) => React.ReactNode;` | render props to a react node|
| `children` | `((props: RouteChildrenProps<any>) => React.ReactNode)` or `React.ReactNode;` | pass children to a react node |
| `path` | `string` or `string[];` | a url path or array of paths |
| `exact` | `boolean` | exact match for a route (see: https://stackoverflow.com/questions/52275146/usage-of-exact-and-strict-props) |
| `sensitive` | `boolean` | case senstive route |
| `strict` | `boolean` | strict entry of the requested path in the path name |
This component removes the need for manual calls to `useExecutionContext` and they should be removed.
## EUI Promotion Status
This component is not currently considered for promotion to EUI.