mirror of
https://github.com/elastic/kibana.git
synced 2025-04-20 16:03:20 -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<{}>, }); ``` |
||
|---|---|---|
| .. | ||
| .storybook | ||
| src | ||
| index.ts | ||
| jest.config.js | ||
| kibana.jsonc | ||
| package.json | ||
| README.md | ||
| setup_tests.ts | ||
| tsconfig.json | ||
@kbn/cases-components
The package exports a collection of pure Cases components.
Components
Status
The component renders the status of a case. Usage:
import { Status, CaseStatuses } from '@kbn/cases-components';
<Status status={CaseStatuses.open} />
Tooltip
The component renders the tooltip with case details on hover of an Element. Usage:
import { Tooltip, CaseStatuses } from '@kbn/cases-components';
import type { CaseTooltipContentProps, CaseTooltipProps } from '@kbn/cases-components';
const tooltipContent: CaseTooltipContentProps = {
title: 'Case title',
description: 'Case description',
createdAt: '2020-02-19T23:06:33.798Z',
createdBy: {
fullName: 'Elastic User',
username: 'elastic',
},
totalComments: 1,
status: CaseStatuses.open,
}
const tooltipProps: CaseTooltipProps = {
loading: false,
content: tooltipContent,
className: 'customClass',
};
<Tooltip {...tooltipProps}>
<span>This is a demo span</span>
</Tooltip>