From 74b216ee4e506737217a111c0f002be7c3beb6d9 Mon Sep 17 00:00:00 2001 From: Oleg S <97077423+RobotSail@users.noreply.github.com> Date: Fri, 5 May 2023 13:26:58 -0400 Subject: [PATCH 1/2] set PropsWithChildren as explicit type on components Signed-off-by: Oleg S <97077423+RobotSail@users.noreply.github.com> --- .changeset/weak-rats-serve.md | 15 +++++++++++++++ .../src/components/contentBlock/contentBlock.tsx | 2 +- .../home/templates/DefaultTemplate.stories.tsx | 4 ++-- packages/core-app-api/api-report.md | 12 ++++++------ packages/core-app-api/src/app/AppManager.tsx | 6 +++--- packages/core-app-api/src/app/types.ts | 14 +++++++------- .../src/components/Link/Link.stories.tsx | 4 ++-- .../components/LinkButton/LinkButton.stories.tsx | 4 ++-- .../components/LogViewer/LogViewer.stories.tsx | 6 ++++-- .../src/layout/Sidebar/Sidebar.stories.tsx | 4 ++-- packages/core-plugin-api/api-report.md | 7 ++++--- packages/dev-utils/api-report.md | 3 ++- packages/dev-utils/src/devApp/render.tsx | 4 ++-- .../ApiDefinitionCard/ApiDefinitionCard.test.tsx | 2 +- .../ApiDefinitionCard/ApiTypeTitle.test.tsx | 2 +- .../ApisCards/ConsumedApisCard.test.tsx | 2 +- .../src/components/ApisCards/HasApisCard.test.tsx | 2 +- .../ApisCards/ProvidedApisCard.test.tsx | 2 +- .../ConsumingComponentsCard.test.tsx | 2 +- .../ProvidingComponentsCard.test.tsx | 2 +- .../EntityPeekAheadPopover.stories.tsx | 4 ++-- .../EntityRefLink/EntityRefLink.stories.tsx | 4 ++-- .../EntityRefLink/EntityRefLinks.stories.tsx | 4 ++-- .../src/hooks/useStarredEntities.test.tsx | 2 +- .../src/hooks/useStarredEntity.test.tsx | 2 +- .../DependencyOfComponentsCard.test.tsx | 2 +- .../DependsOnComponentsCard.test.tsx | 2 +- .../DependsOnResourcesCard.test.tsx | 2 +- .../HasComponentsCard/HasComponentsCard.test.tsx | 2 +- .../HasResourcesCard/HasResourcesCard.test.tsx | 2 +- .../HasSubcomponentsCard.test.tsx | 2 +- .../HasSystemsCard/HasSystemsCard.test.tsx | 2 +- .../src/components/FossaCard/FossaCard.test.tsx | 2 +- .../src/components/FossaPage/FossaPage.test.tsx | 2 +- .../CompanyLogo/CompanyLogo.stories.tsx | 4 ++-- .../HeaderWorldClock/HeaderWorldClock.stories.tsx | 6 ++++-- .../StarredEntities/StarredEntities.stories.tsx | 4 ++-- .../Toolkit/Toolkit.stories.tsx | 6 ++++-- .../WelcomeTitle/WelcomeTitle.stories.tsx | 6 ++++-- .../GroupProfile/GroupProfileCard.stories.tsx | 4 ++-- .../UserProfileCard/UserProfileCard.stories.tsx | 4 ++-- plugins/scaffolder-react/api-report.md | 4 +++- .../src/layouts/createScaffolderLayout.ts | 6 ++++-- plugins/scaffolder/alpha-api-report.md | 2 +- plugins/scaffolder/api-report.md | 7 +++++-- plugins/scaffolder/src/components/Router.tsx | 4 ++-- .../fields/EntityPicker/EntityPicker.test.tsx | 2 +- .../fields/OwnerPicker/OwnerPicker.test.tsx | 2 +- plugins/scaffolder/src/next/Router/Router.tsx | 2 +- .../SearchAutocomplete.stories.tsx | 4 ++-- .../SearchAutocompleteDefaultOption.stories.tsx | 2 +- .../components/SearchBar/SearchBar.stories.tsx | 4 ++-- .../SearchFilter/SearchFilter.stories.tsx | 4 ++-- .../SearchPagination/SearchPagination.stories.tsx | 4 ++-- .../SearchResult/SearchResult.stories.tsx | 4 ++-- .../SearchResultGroup.stories.tsx | 9 +++++++-- .../SearchResultList/SearchResultList.stories.tsx | 4 ++-- .../HomePageSearchBar.stories.tsx | 4 ++-- .../SearchModal/SearchModal.stories.tsx | 4 ++-- .../components/SearchType/SearchType.stories.tsx | 4 ++-- .../StackOverflowQuestions.stories.tsx | 4 ++-- .../StackOverflowSearchResultListItem.stories.tsx | 6 ++++-- .../src/reader/components/useReaderState.test.tsx | 2 +- .../reader/transformers/html/transformer.test.tsx | 4 ++-- 64 files changed, 149 insertions(+), 110 deletions(-) create mode 100644 .changeset/weak-rats-serve.md diff --git a/.changeset/weak-rats-serve.md b/.changeset/weak-rats-serve.md new file mode 100644 index 0000000000..e3030d130a --- /dev/null +++ b/.changeset/weak-rats-serve.md @@ -0,0 +1,15 @@ +--- +'@backstage/core-components': patch +'@backstage/plugin-stack-overflow': patch +'@backstage/plugin-catalog-react': patch +'@backstage/plugin-search-react': patch +'@backstage/plugin-api-docs': patch +'@backstage/plugin-techdocs': patch +'@backstage/plugin-catalog': patch +'@backstage/plugin-search': patch +'@backstage/plugin-fossa': patch +'@backstage/plugin-home': patch +'@backstage/plugin-org': patch +--- + +Components with empty default props now explicitly declare PropsWithChildren as type diff --git a/microsite/src/components/contentBlock/contentBlock.tsx b/microsite/src/components/contentBlock/contentBlock.tsx index aae065db44..983f684927 100644 --- a/microsite/src/components/contentBlock/contentBlock.tsx +++ b/microsite/src/components/contentBlock/contentBlock.tsx @@ -1,6 +1,6 @@ import Link from '@docusaurus/Link'; import clsx from 'clsx'; -import React, { FC, PropsWithChildren, ReactNode } from 'react'; +import React, { PropsWithChildren, ReactNode } from 'react'; import contentBlockStyles from './contentBlock.module.scss'; diff --git a/packages/app/src/components/home/templates/DefaultTemplate.stories.tsx b/packages/app/src/components/home/templates/DefaultTemplate.stories.tsx index 52fab3c55f..05d9a4eecd 100644 --- a/packages/app/src/components/home/templates/DefaultTemplate.stories.tsx +++ b/packages/app/src/components/home/templates/DefaultTemplate.stories.tsx @@ -38,7 +38,7 @@ import { } from '@backstage/plugin-search-react'; import { stackOverflowApiRef, HomePageStackOverflowQuestions } from '@backstage/plugin-stack-overflow'; import { Grid, makeStyles } from '@material-ui/core'; -import React, { ComponentType } from 'react'; +import React, { ComponentType, PropsWithChildren } from 'react'; const entities = [ { @@ -107,7 +107,7 @@ starredEntitiesApi.toggleStarred('component:default/example-starred-entity-4'); export default { title: 'Plugins/Home/Templates', decorators: [ - (Story: ComponentType<{}>) => + (Story: ComponentType>) => wrapInTestApp( <> ; + NotFoundErrorPage: ComponentType>; BootErrorPage: ComponentType; - Progress: ComponentType<{}>; + Progress: ComponentType>; Router: ComponentType<{ basename?: string; }>; ErrorBoundaryFallback: ComponentType; - ThemeProvider?: ComponentType<{}>; + ThemeProvider?: ComponentType>; SignInPage?: ComponentType; }; @@ -274,9 +274,9 @@ export type AuthApiCreateOptions = { export type BackstageApp = { getPlugins(): BackstagePlugin[]; getSystemIcon(key: string): IconComponent | undefined; - createRoot(element: JSX.Element): ComponentType<{}>; - getProvider(): ComponentType<{}>; - getRouter(): ComponentType<{}>; + createRoot(element: JSX.Element): ComponentType>; + getProvider(): ComponentType>; + getRouter(): ComponentType>; }; // @public diff --git a/packages/core-app-api/src/app/AppManager.tsx b/packages/core-app-api/src/app/AppManager.tsx index 33d43cbca6..470f7f8d75 100644 --- a/packages/core-app-api/src/app/AppManager.tsx +++ b/packages/core-app-api/src/app/AppManager.tsx @@ -242,7 +242,7 @@ export class AppManager implements BackstageApp { return this.components; } - createRoot(element: JSX.Element): ComponentType<{}> { + createRoot(element: JSX.Element): ComponentType> { const AppProvider = this.getProvider(); const AppRoot = () => { return {element}; @@ -251,7 +251,7 @@ export class AppManager implements BackstageApp { } #getProviderCalled = false; - getProvider(): ComponentType<{}> { + getProvider(): ComponentType> { if (this.#getProviderCalled) { throw new Error( 'app.getProvider() or app.createRoot() has already been called, and can only be called once', @@ -404,7 +404,7 @@ export class AppManager implements BackstageApp { return Provider; } - getRouter(): ComponentType<{}> { + getRouter(): ComponentType> { return AppRouter; } diff --git a/packages/core-app-api/src/app/types.ts b/packages/core-app-api/src/app/types.ts index c34407ca3a..584674a52d 100644 --- a/packages/core-app-api/src/app/types.ts +++ b/packages/core-app-api/src/app/types.ts @@ -14,7 +14,7 @@ * limitations under the License. */ -import { ComponentType } from 'react'; +import { ComponentType, PropsWithChildren } from 'react'; import { AnyApiFactory, AppTheme, @@ -67,12 +67,12 @@ export type ErrorBoundaryFallbackProps = { * @public */ export type AppComponents = { - NotFoundErrorPage: ComponentType<{}>; + NotFoundErrorPage: ComponentType>; BootErrorPage: ComponentType; - Progress: ComponentType<{}>; + Progress: ComponentType>; Router: ComponentType<{ basename?: string }>; ErrorBoundaryFallback: ComponentType; - ThemeProvider?: ComponentType<{}>; + ThemeProvider?: ComponentType>; /** * An optional sign-in page that will be rendered instead of the AppRouter at startup. @@ -319,7 +319,7 @@ export type BackstageApp = { * ); * ``` */ - createRoot(element: JSX.Element): ComponentType<{}>; + createRoot(element: JSX.Element): ComponentType>; /** * Provider component that should wrap the Router created with getRouter() @@ -327,7 +327,7 @@ export type BackstageApp = { * * @deprecated Use {@link BackstageApp.createRoot} instead. */ - getProvider(): ComponentType<{}>; + getProvider(): ComponentType>; /** * Router component that should wrap the App Routes create with getRoutes() @@ -335,7 +335,7 @@ export type BackstageApp = { * * @deprecated Import and use the {@link AppRouter} component from `@backstage/core-app-api` instead */ - getRouter(): ComponentType<{}>; + getRouter(): ComponentType>; }; /** diff --git a/packages/core-components/src/components/Link/Link.stories.tsx b/packages/core-components/src/components/Link/Link.stories.tsx index 6049ec68b1..e069459e76 100644 --- a/packages/core-components/src/components/Link/Link.stories.tsx +++ b/packages/core-components/src/components/Link/Link.stories.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, { ComponentType } from 'react'; +import React, { ComponentType, PropsWithChildren } from 'react'; import { Link } from './Link'; import { Route, @@ -37,7 +37,7 @@ export default { title: 'Navigation/Link', component: Link, decorators: [ - (Story: ComponentType<{}>) => + (Story: ComponentType>) => wrapInTestApp(
diff --git a/packages/core-components/src/components/LinkButton/LinkButton.stories.tsx b/packages/core-components/src/components/LinkButton/LinkButton.stories.tsx index 3dc49abb7f..ec9398e47d 100644 --- a/packages/core-components/src/components/LinkButton/LinkButton.stories.tsx +++ b/packages/core-components/src/components/LinkButton/LinkButton.stories.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, { ComponentType } from 'react'; +import React, { ComponentType, PropsWithChildren } from 'react'; import { LinkButton } from './LinkButton'; import { useLocation } from 'react-router-dom'; import { createRouteRef, useRouteRef } from '@backstage/core-plugin-api'; @@ -39,7 +39,7 @@ export default { title: 'Inputs/Button', component: LinkButton, decorators: [ - (Story: ComponentType<{}>) => + (Story: ComponentType>) => wrapInTestApp( <> diff --git a/packages/core-components/src/components/LogViewer/LogViewer.stories.tsx b/packages/core-components/src/components/LogViewer/LogViewer.stories.tsx index d244ef7715..fca963eb74 100644 --- a/packages/core-components/src/components/LogViewer/LogViewer.stories.tsx +++ b/packages/core-components/src/components/LogViewer/LogViewer.stories.tsx @@ -14,14 +14,16 @@ * limitations under the License. */ -import React, { ComponentType } from 'react'; +import React, { ComponentType, PropsWithChildren } from 'react'; import { wrapInTestApp } from '@backstage/test-utils'; import { LogViewer } from './LogViewer'; export default { title: 'Data Display/LogViewer', component: LogViewer, - decorators: [(Story: ComponentType<{}>) => wrapInTestApp()], + decorators: [ + (Story: ComponentType>) => wrapInTestApp(), + ], }; const exampleLog = `Starting up task with 3 steps diff --git a/packages/core-components/src/layout/Sidebar/Sidebar.stories.tsx b/packages/core-components/src/layout/Sidebar/Sidebar.stories.tsx index 8daf7b69b6..f647166250 100644 --- a/packages/core-components/src/layout/Sidebar/Sidebar.stories.tsx +++ b/packages/core-components/src/layout/Sidebar/Sidebar.stories.tsx @@ -23,7 +23,7 @@ import MenuBookIcon from '@material-ui/icons/MenuBook'; import CloudQueueIcon from '@material-ui/icons/CloudQueue'; import AcUnitIcon from '@material-ui/icons/AcUnit'; import AppsIcon from '@material-ui/icons/Apps'; -import React, { ComponentType } from 'react'; +import React, { ComponentType, PropsWithChildren } from 'react'; import { SidebarPage } from './Page'; import { Sidebar } from './Bar'; import { SidebarGroup } from './SidebarGroup'; @@ -46,7 +46,7 @@ export default { title: 'Layout/Sidebar', component: Sidebar, decorators: [ - (Story: ComponentType<{}>) => + (Story: ComponentType>) => wrapInTestApp(, { mountedRoutes: { '/': routeRef } }), ], }; diff --git a/packages/core-plugin-api/api-report.md b/packages/core-plugin-api/api-report.md index 52ee47f6bb..827b173094 100644 --- a/packages/core-plugin-api/api-report.md +++ b/packages/core-plugin-api/api-report.md @@ -12,6 +12,7 @@ import { IconComponent as IconComponent_2 } from '@backstage/core-plugin-api'; import { IdentityApi as IdentityApi_2 } from '@backstage/core-plugin-api'; import { JsonValue } from '@backstage/types'; import { Observable } from '@backstage/types'; +import { PropsWithChildren } from 'react'; import { default as React_2 } from 'react'; import { ReactElement } from 'react'; import { ReactNode } from 'react'; @@ -137,14 +138,14 @@ export type ApiRefConfig = { // @public export type AppComponents = { - NotFoundErrorPage: ComponentType<{}>; + NotFoundErrorPage: ComponentType>; BootErrorPage: ComponentType; - Progress: ComponentType<{}>; + Progress: ComponentType>; Router: ComponentType<{ basename?: string; }>; ErrorBoundaryFallback: ComponentType; - ThemeProvider?: ComponentType<{}>; + ThemeProvider?: ComponentType>; SignInPage?: ComponentType; }; diff --git a/packages/dev-utils/api-report.md b/packages/dev-utils/api-report.md index e1cb93313f..7ff48db175 100644 --- a/packages/dev-utils/api-report.md +++ b/packages/dev-utils/api-report.md @@ -12,6 +12,7 @@ import { ComponentType } from 'react'; import { Entity } from '@backstage/catalog-model'; import { GridProps } from '@material-ui/core'; import { IconComponent } from '@backstage/core-plugin-api'; +import { PropsWithChildren } from 'react'; import { ReactNode } from 'react'; // @public @@ -22,7 +23,7 @@ export class DevAppBuilder { addPage(opts: DevAppPageOptions): DevAppBuilder; addRootChild(node: ReactNode): DevAppBuilder; addThemes(themes: AppTheme[]): this; - build(): ComponentType<{}>; + build(): ComponentType>; registerApi< Api, Impl extends Api, diff --git a/packages/dev-utils/src/devApp/render.tsx b/packages/dev-utils/src/devApp/render.tsx index d2c91c9394..36e87855ed 100644 --- a/packages/dev-utils/src/devApp/render.tsx +++ b/packages/dev-utils/src/devApp/render.tsx @@ -44,7 +44,7 @@ import { } from '@backstage/integration-react'; import { Box } from '@material-ui/core'; import BookmarkIcon from '@material-ui/icons/Bookmark'; -import React, { ComponentType, ReactNode } from 'react'; +import React, { ComponentType, ReactNode, PropsWithChildren } from 'react'; import ReactDOM from 'react-dom'; import { createRoutesFromChildren, Route } from 'react-router-dom'; import { SidebarThemeSwitcher } from './SidebarThemeSwitcher'; @@ -164,7 +164,7 @@ export class DevAppBuilder { /** * Build a DevApp component using the resources registered so far */ - build(): ComponentType<{}> { + build(): ComponentType> { const fakeRouteRef = createRouteRef({ id: 'fake' }); const FakePage = () => Page belonging to another plugin.; attachComponentData(FakePage, 'core.mountPoint', fakeRouteRef); diff --git a/plugins/api-docs/src/components/ApiDefinitionCard/ApiDefinitionCard.test.tsx b/plugins/api-docs/src/components/ApiDefinitionCard/ApiDefinitionCard.test.tsx index e2938dc9fc..eda3597225 100644 --- a/plugins/api-docs/src/components/ApiDefinitionCard/ApiDefinitionCard.test.tsx +++ b/plugins/api-docs/src/components/ApiDefinitionCard/ApiDefinitionCard.test.tsx @@ -30,7 +30,7 @@ describe('', () => { const apiDocsConfig: jest.Mocked = { getApiDefinitionWidget: jest.fn(), } as any; - let Wrapper: React.ComponentType; + let Wrapper: React.ComponentType>; beforeEach(() => { Wrapper = ({ children }: { children?: React.ReactNode }) => ( diff --git a/plugins/api-docs/src/components/ApiDefinitionCard/ApiTypeTitle.test.tsx b/plugins/api-docs/src/components/ApiDefinitionCard/ApiTypeTitle.test.tsx index 5476857a06..d249e59aeb 100644 --- a/plugins/api-docs/src/components/ApiDefinitionCard/ApiTypeTitle.test.tsx +++ b/plugins/api-docs/src/components/ApiDefinitionCard/ApiTypeTitle.test.tsx @@ -24,7 +24,7 @@ describe('', () => { const apiDocsConfig: jest.Mocked = { getApiDefinitionWidget: jest.fn(), } as any; - let Wrapper: React.ComponentType; + let Wrapper: React.ComponentType>; beforeEach(() => { Wrapper = ({ children }: { children?: React.ReactNode }) => ( diff --git a/plugins/api-docs/src/components/ApisCards/ConsumedApisCard.test.tsx b/plugins/api-docs/src/components/ApisCards/ConsumedApisCard.test.tsx index afb836ecc9..ea51d3989d 100644 --- a/plugins/api-docs/src/components/ApisCards/ConsumedApisCard.test.tsx +++ b/plugins/api-docs/src/components/ApisCards/ConsumedApisCard.test.tsx @@ -39,7 +39,7 @@ describe('', () => { getLocationByRef: jest.fn(), removeEntityByUid: jest.fn(), } as any; - let Wrapper: React.ComponentType; + let Wrapper: React.ComponentType>; beforeEach(() => { Wrapper = ({ children }: { children?: React.ReactNode }) => ( diff --git a/plugins/api-docs/src/components/ApisCards/HasApisCard.test.tsx b/plugins/api-docs/src/components/ApisCards/HasApisCard.test.tsx index 85b353f04e..6ab55c5c66 100644 --- a/plugins/api-docs/src/components/ApisCards/HasApisCard.test.tsx +++ b/plugins/api-docs/src/components/ApisCards/HasApisCard.test.tsx @@ -39,7 +39,7 @@ describe('', () => { getLocationByRef: jest.fn(), removeEntityByUid: jest.fn(), } as any; - let Wrapper: React.ComponentType; + let Wrapper: React.ComponentType>; beforeEach(() => { Wrapper = ({ children }: { children?: React.ReactNode }) => ( diff --git a/plugins/api-docs/src/components/ApisCards/ProvidedApisCard.test.tsx b/plugins/api-docs/src/components/ApisCards/ProvidedApisCard.test.tsx index 40ffeff330..5f69e90f9f 100644 --- a/plugins/api-docs/src/components/ApisCards/ProvidedApisCard.test.tsx +++ b/plugins/api-docs/src/components/ApisCards/ProvidedApisCard.test.tsx @@ -39,7 +39,7 @@ describe('', () => { getLocationByRef: jest.fn(), removeEntityByUid: jest.fn(), } as any; - let Wrapper: React.ComponentType; + let Wrapper: React.ComponentType>; beforeEach(() => { Wrapper = ({ children }: { children?: React.ReactNode }) => ( diff --git a/plugins/api-docs/src/components/ComponentsCards/ConsumingComponentsCard.test.tsx b/plugins/api-docs/src/components/ComponentsCards/ConsumingComponentsCard.test.tsx index abc91d8793..f7a18cf671 100644 --- a/plugins/api-docs/src/components/ComponentsCards/ConsumingComponentsCard.test.tsx +++ b/plugins/api-docs/src/components/ComponentsCards/ConsumingComponentsCard.test.tsx @@ -35,7 +35,7 @@ describe('', () => { getLocationByRef: jest.fn(), removeEntityByUid: jest.fn(), } as any; - let Wrapper: React.ComponentType; + let Wrapper: React.ComponentType>; beforeEach(() => { Wrapper = ({ children }: { children?: React.ReactNode }) => ( diff --git a/plugins/api-docs/src/components/ComponentsCards/ProvidingComponentsCard.test.tsx b/plugins/api-docs/src/components/ComponentsCards/ProvidingComponentsCard.test.tsx index bdd45c3d58..8b003bf2e2 100644 --- a/plugins/api-docs/src/components/ComponentsCards/ProvidingComponentsCard.test.tsx +++ b/plugins/api-docs/src/components/ComponentsCards/ProvidingComponentsCard.test.tsx @@ -35,7 +35,7 @@ describe('', () => { getLocationByRef: jest.fn(), removeEntityByUid: jest.fn(), } as any; - let Wrapper: React.ComponentType; + let Wrapper: React.ComponentType>; beforeEach(() => { Wrapper = ({ children }: { children?: React.ReactNode }) => ( diff --git a/plugins/catalog-react/src/components/EntityPeekAheadPopover/EntityPeekAheadPopover.stories.tsx b/plugins/catalog-react/src/components/EntityPeekAheadPopover/EntityPeekAheadPopover.stories.tsx index bee5587ea1..d50fdc964b 100644 --- a/plugins/catalog-react/src/components/EntityPeekAheadPopover/EntityPeekAheadPopover.stories.tsx +++ b/plugins/catalog-react/src/components/EntityPeekAheadPopover/EntityPeekAheadPopover.stories.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { ComponentType } from 'react'; +import React, { ComponentType, PropsWithChildren } from 'react'; import { EntityPeekAheadPopover, EntityPeekAheadPopoverProps, @@ -80,7 +80,7 @@ const defaultArgs = { export default { title: 'Catalog /PeekAheadPopover', decorators: [ - (Story: ComponentType<{}>) => + (Story: ComponentType>) => wrapInTestApp( <> ) => + (Story: ComponentType>) => wrapInTestApp(, { mountedRoutes: { '/catalog/:namespace/:kind/:name': entityRouteRef, diff --git a/plugins/catalog-react/src/components/EntityRefLink/EntityRefLinks.stories.tsx b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLinks.stories.tsx index 176dd24530..7b94bd14df 100644 --- a/plugins/catalog-react/src/components/EntityRefLink/EntityRefLinks.stories.tsx +++ b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLinks.stories.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { ComponentType } from 'react'; +import React, { ComponentType, PropsWithChildren } from 'react'; import { EntityRefLinks, EntityRefLinksProps } from './EntityRefLinks'; import { wrapInTestApp } from '@backstage/test-utils'; import { CompoundEntityRef } from '@backstage/catalog-model'; @@ -27,7 +27,7 @@ const defaultArgs = { export default { title: 'Catalog /EntityRefLinks', decorators: [ - (Story: ComponentType<{}>) => + (Story: ComponentType>) => wrapInTestApp(, { mountedRoutes: { '/catalog/:namespace/:kind/:name': entityRouteRef, diff --git a/plugins/catalog-react/src/hooks/useStarredEntities.test.tsx b/plugins/catalog-react/src/hooks/useStarredEntities.test.tsx index eccad8e17f..f21b3cb710 100644 --- a/plugins/catalog-react/src/hooks/useStarredEntities.test.tsx +++ b/plugins/catalog-react/src/hooks/useStarredEntities.test.tsx @@ -27,7 +27,7 @@ import { useStarredEntities } from './useStarredEntities'; describe('useStarredEntities', () => { let mockApi: StarredEntitiesApi; - let wrapper: React.ComponentType; + let wrapper: React.ComponentType>; const mockEntity: Entity = { apiVersion: '1', diff --git a/plugins/catalog-react/src/hooks/useStarredEntity.test.tsx b/plugins/catalog-react/src/hooks/useStarredEntity.test.tsx index ad168e5f9d..d24b27f903 100644 --- a/plugins/catalog-react/src/hooks/useStarredEntity.test.tsx +++ b/plugins/catalog-react/src/hooks/useStarredEntity.test.tsx @@ -27,7 +27,7 @@ describe('useStarredEntity', () => { toggleStarred: jest.fn(), starredEntitie$: jest.fn(), }; - let wrapper: React.ComponentType; + let wrapper: React.ComponentType>; beforeEach(() => { wrapper = (props: PropsWithChildren<{}>) => ( diff --git a/plugins/catalog/src/components/DependencyOfComponentsCard/DependencyOfComponentsCard.test.tsx b/plugins/catalog/src/components/DependencyOfComponentsCard/DependencyOfComponentsCard.test.tsx index 94a9a86b70..e5900d75e0 100644 --- a/plugins/catalog/src/components/DependencyOfComponentsCard/DependencyOfComponentsCard.test.tsx +++ b/plugins/catalog/src/components/DependencyOfComponentsCard/DependencyOfComponentsCard.test.tsx @@ -28,7 +28,7 @@ import { DependencyOfComponentsCard } from './DependencyOfComponentsCard'; describe('', () => { const getEntities: jest.MockedFunction = jest.fn(); - let Wrapper: React.ComponentType; + let Wrapper: React.ComponentType>; beforeEach(() => { Wrapper = ({ children }: { children?: React.ReactNode }) => ( diff --git a/plugins/catalog/src/components/DependsOnComponentsCard/DependsOnComponentsCard.test.tsx b/plugins/catalog/src/components/DependsOnComponentsCard/DependsOnComponentsCard.test.tsx index 657f95c60f..9255ee4f36 100644 --- a/plugins/catalog/src/components/DependsOnComponentsCard/DependsOnComponentsCard.test.tsx +++ b/plugins/catalog/src/components/DependsOnComponentsCard/DependsOnComponentsCard.test.tsx @@ -28,7 +28,7 @@ import { DependsOnComponentsCard } from './DependsOnComponentsCard'; describe('', () => { const getEntities: jest.MockedFunction = jest.fn(); - let Wrapper: React.ComponentType; + let Wrapper: React.ComponentType>; beforeEach(() => { Wrapper = ({ children }: { children?: React.ReactNode }) => ( diff --git a/plugins/catalog/src/components/DependsOnResourcesCard/DependsOnResourcesCard.test.tsx b/plugins/catalog/src/components/DependsOnResourcesCard/DependsOnResourcesCard.test.tsx index 5a77cd6ab4..3b0d7dcff3 100644 --- a/plugins/catalog/src/components/DependsOnResourcesCard/DependsOnResourcesCard.test.tsx +++ b/plugins/catalog/src/components/DependsOnResourcesCard/DependsOnResourcesCard.test.tsx @@ -28,7 +28,7 @@ import { DependsOnResourcesCard } from './DependsOnResourcesCard'; describe('', () => { const getEntities: jest.MockedFunction = jest.fn(); - let Wrapper: React.ComponentType; + let Wrapper: React.ComponentType>; beforeEach(() => { Wrapper = ({ children }: { children?: React.ReactNode }) => ( diff --git a/plugins/catalog/src/components/HasComponentsCard/HasComponentsCard.test.tsx b/plugins/catalog/src/components/HasComponentsCard/HasComponentsCard.test.tsx index 9d46f2ed42..3651421797 100644 --- a/plugins/catalog/src/components/HasComponentsCard/HasComponentsCard.test.tsx +++ b/plugins/catalog/src/components/HasComponentsCard/HasComponentsCard.test.tsx @@ -28,7 +28,7 @@ import { HasComponentsCard } from './HasComponentsCard'; describe('', () => { const getEntities: jest.MockedFunction = jest.fn(); - let Wrapper: React.ComponentType; + let Wrapper: React.ComponentType>; beforeEach(() => { Wrapper = ({ children }: { children?: React.ReactNode }) => ( diff --git a/plugins/catalog/src/components/HasResourcesCard/HasResourcesCard.test.tsx b/plugins/catalog/src/components/HasResourcesCard/HasResourcesCard.test.tsx index 364d503a96..4bf6524a9c 100644 --- a/plugins/catalog/src/components/HasResourcesCard/HasResourcesCard.test.tsx +++ b/plugins/catalog/src/components/HasResourcesCard/HasResourcesCard.test.tsx @@ -28,7 +28,7 @@ import { HasResourcesCard } from './HasResourcesCard'; describe('', () => { const getEntities: jest.MockedFunction = jest.fn(); - let Wrapper: React.ComponentType; + let Wrapper: React.ComponentType>; beforeEach(() => { Wrapper = ({ children }: { children?: React.ReactNode }) => ( diff --git a/plugins/catalog/src/components/HasSubcomponentsCard/HasSubcomponentsCard.test.tsx b/plugins/catalog/src/components/HasSubcomponentsCard/HasSubcomponentsCard.test.tsx index b76a0a68ec..97e69e93d1 100644 --- a/plugins/catalog/src/components/HasSubcomponentsCard/HasSubcomponentsCard.test.tsx +++ b/plugins/catalog/src/components/HasSubcomponentsCard/HasSubcomponentsCard.test.tsx @@ -28,7 +28,7 @@ import { HasSubcomponentsCard } from './HasSubcomponentsCard'; describe('', () => { const getEntities: jest.MockedFunction = jest.fn(); - let Wrapper: React.ComponentType; + let Wrapper: React.ComponentType>; beforeEach(() => { Wrapper = ({ children }: { children?: React.ReactNode }) => ( diff --git a/plugins/catalog/src/components/HasSystemsCard/HasSystemsCard.test.tsx b/plugins/catalog/src/components/HasSystemsCard/HasSystemsCard.test.tsx index 634fe57e82..224e0c6703 100644 --- a/plugins/catalog/src/components/HasSystemsCard/HasSystemsCard.test.tsx +++ b/plugins/catalog/src/components/HasSystemsCard/HasSystemsCard.test.tsx @@ -28,7 +28,7 @@ import { HasSystemsCard } from './HasSystemsCard'; describe('', () => { const getEntities: jest.MockedFunction = jest.fn(); - let Wrapper: React.ComponentType; + let Wrapper: React.ComponentType>; beforeEach(() => { Wrapper = ({ children }: { children?: React.ReactNode }) => ( diff --git a/plugins/fossa/src/components/FossaCard/FossaCard.test.tsx b/plugins/fossa/src/components/FossaCard/FossaCard.test.tsx index 046e3e9860..52ddaa0f4e 100644 --- a/plugins/fossa/src/components/FossaCard/FossaCard.test.tsx +++ b/plugins/fossa/src/components/FossaCard/FossaCard.test.tsx @@ -26,7 +26,7 @@ describe('', () => { getFindingSummary: jest.fn(), getFindingSummaries: jest.fn(), }; - let Wrapper: React.ComponentType; + let Wrapper: React.ComponentType>; beforeEach(() => { Wrapper = ({ children }: { children?: React.ReactNode }) => ( diff --git a/plugins/fossa/src/components/FossaPage/FossaPage.test.tsx b/plugins/fossa/src/components/FossaPage/FossaPage.test.tsx index be07b4707f..ec78ac906b 100644 --- a/plugins/fossa/src/components/FossaPage/FossaPage.test.tsx +++ b/plugins/fossa/src/components/FossaPage/FossaPage.test.tsx @@ -38,7 +38,7 @@ describe('', () => { getFindingSummary: jest.fn(), getFindingSummaries: jest.fn(), }; - let Wrapper: React.ComponentType; + let Wrapper: React.ComponentType>; beforeEach(() => { Wrapper = ({ children }: { children?: React.ReactNode }) => ( diff --git a/plugins/home/src/homePageComponents/CompanyLogo/CompanyLogo.stories.tsx b/plugins/home/src/homePageComponents/CompanyLogo/CompanyLogo.stories.tsx index 741ad2e977..da5c318af2 100644 --- a/plugins/home/src/homePageComponents/CompanyLogo/CompanyLogo.stories.tsx +++ b/plugins/home/src/homePageComponents/CompanyLogo/CompanyLogo.stories.tsx @@ -21,12 +21,12 @@ import { wrapInTestApp, TestApiProvider } from '@backstage/test-utils'; import { configApiRef } from '@backstage/core-plugin-api'; import { ConfigReader } from '@backstage/core-app-api'; import { Grid, makeStyles } from '@material-ui/core'; -import React, { ComponentType } from 'react'; +import React, { ComponentType, PropsWithChildren } from 'react'; export default { title: 'Plugins/Home/Components/CompanyLogo', decorators: [ - (Story: ComponentType<{}>) => + (Story: ComponentType>) => wrapInTestApp( ) => wrapInTestApp()], + decorators: [ + (Story: ComponentType>) => wrapInTestApp(), + ], }; export const Default = () => { diff --git a/plugins/home/src/homePageComponents/StarredEntities/StarredEntities.stories.tsx b/plugins/home/src/homePageComponents/StarredEntities/StarredEntities.stories.tsx index a5e05e56c1..8172041f94 100644 --- a/plugins/home/src/homePageComponents/StarredEntities/StarredEntities.stories.tsx +++ b/plugins/home/src/homePageComponents/StarredEntities/StarredEntities.stories.tsx @@ -23,7 +23,7 @@ import { entityRouteRef, } from '@backstage/plugin-catalog-react'; import { Grid } from '@material-ui/core'; -import React, { ComponentType } from 'react'; +import React, { ComponentType, PropsWithChildren } from 'react'; const starredEntitiesApi = new MockStarredEntitiesApi(); starredEntitiesApi.toggleStarred('component:default/example-starred-entity'); @@ -73,7 +73,7 @@ const mockCatalogApi = { export default { title: 'Plugins/Home/Components/StarredEntities', decorators: [ - (Story: ComponentType<{}>) => + (Story: ComponentType>) => wrapInTestApp( ) => wrapInTestApp()], + decorators: [ + (Story: ComponentType>) => wrapInTestApp(), + ], }; export const Default = () => { diff --git a/plugins/home/src/homePageComponents/WelcomeTitle/WelcomeTitle.stories.tsx b/plugins/home/src/homePageComponents/WelcomeTitle/WelcomeTitle.stories.tsx index ddcce2fe41..d7d12f02c6 100644 --- a/plugins/home/src/homePageComponents/WelcomeTitle/WelcomeTitle.stories.tsx +++ b/plugins/home/src/homePageComponents/WelcomeTitle/WelcomeTitle.stories.tsx @@ -16,12 +16,14 @@ import { Header } from '@backstage/core-components'; import { wrapInTestApp } from '@backstage/test-utils'; -import React, { ComponentType } from 'react'; +import React, { ComponentType, PropsWithChildren } from 'react'; import { WelcomeTitle } from './WelcomeTitle'; export default { title: 'Plugins/Home/Components/WelcomeTitle', - decorators: [(Story: ComponentType<{}>) => wrapInTestApp()], + decorators: [ + (Story: ComponentType>) => wrapInTestApp(), + ], }; export const Default = () => { diff --git a/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.stories.tsx b/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.stories.tsx index 526d7c9c4c..e10d6322e0 100644 --- a/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.stories.tsx +++ b/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.stories.tsx @@ -23,7 +23,7 @@ import { } from '@backstage/plugin-catalog-react'; import { TestApiProvider, wrapInTestApp } from '@backstage/test-utils'; import { Grid } from '@material-ui/core'; -import React, { ComponentType } from 'react'; +import React, { ComponentType, PropsWithChildren } from 'react'; import { GroupProfileCard } from './GroupProfileCard'; const dummyDepartment = { @@ -74,7 +74,7 @@ export default { title: 'Plugins/Org/Group Profile Card', component: GroupProfileCard, decorators: [ - (Story: ComponentType<{}>) => + (Story: ComponentType>) => wrapInTestApp( diff --git a/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.stories.tsx b/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.stories.tsx index a27be7857b..02598691e0 100644 --- a/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.stories.tsx +++ b/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.stories.tsx @@ -21,7 +21,7 @@ import { } from '@backstage/plugin-catalog-react'; import { wrapInTestApp } from '@backstage/test-utils'; import { Grid } from '@material-ui/core'; -import React, { ComponentType } from 'react'; +import React, { ComponentType, PropsWithChildren } from 'react'; import { UserProfileCard } from './UserProfileCard'; const dummyGroup = { @@ -94,7 +94,7 @@ export default { title: 'Plugins/Org/User Profile Card', component: UserProfileCard, decorators: [ - (Story: ComponentType<{}>) => + (Story: ComponentType>) => wrapInTestApp(, { mountedRoutes: { '/a': entityRouteRef, diff --git a/plugins/scaffolder-react/api-report.md b/plugins/scaffolder-react/api-report.md index 1761c88edf..82610a2fc3 100644 --- a/plugins/scaffolder-react/api-report.md +++ b/plugins/scaffolder-react/api-report.md @@ -207,7 +207,9 @@ export interface ScaffolderGetIntegrationsListResponse { } // @public -export const ScaffolderLayouts: React.ComponentType; +export const ScaffolderLayouts: React_2.ComponentType< + React_2.PropsWithChildren<{}> +>; // @public (undocumented) export type ScaffolderOutputLink = { diff --git a/plugins/scaffolder-react/src/layouts/createScaffolderLayout.ts b/plugins/scaffolder-react/src/layouts/createScaffolderLayout.ts index 328f366007..6b2ae1b33b 100644 --- a/plugins/scaffolder-react/src/layouts/createScaffolderLayout.ts +++ b/plugins/scaffolder-react/src/layouts/createScaffolderLayout.ts @@ -17,6 +17,7 @@ import { LAYOUTS_KEY, LAYOUTS_WRAPPER_KEY } from './keys'; import { attachComponentData, Extension } from '@backstage/core-plugin-api'; import type { FormProps as SchemaFormProps } from '@rjsf/core-v5'; +import React from 'react'; /** * The field template from `@rjsf/core` which is a react component that gets passed `@rjsf/core` field related props. @@ -67,7 +68,8 @@ export function createScaffolderLayout( * * @public */ -export const ScaffolderLayouts: React.ComponentType = (): JSX.Element | null => - null; +export const ScaffolderLayouts: React.ComponentType< + React.PropsWithChildren<{}> +> = (): JSX.Element | null => null; attachComponentData(ScaffolderLayouts, LAYOUTS_WRAPPER_KEY, true); diff --git a/plugins/scaffolder/alpha-api-report.md b/plugins/scaffolder/alpha-api-report.md index 6ceacdc008..de657c2138 100644 --- a/plugins/scaffolder/alpha-api-report.md +++ b/plugins/scaffolder/alpha-api-report.md @@ -27,7 +27,7 @@ export type NextRouterProps = { TemplateCardComponent?: React_2.ComponentType<{ template: TemplateEntityV1beta3; }>; - TaskPageComponent?: React_2.ComponentType<{}>; + TaskPageComponent?: React_2.ComponentType>; TemplateOutputsComponent?: React_2.ComponentType<{ output?: ScaffolderTaskOutput; }>; diff --git a/plugins/scaffolder/api-report.md b/plugins/scaffolder/api-report.md index 3495522310..e50395be05 100644 --- a/plugins/scaffolder/api-report.md +++ b/plugins/scaffolder/api-report.md @@ -29,6 +29,7 @@ import { ListActionsResponse as ListActionsResponse_2 } from '@backstage/plugin- import { LogEvent as LogEvent_2 } from '@backstage/plugin-scaffolder-react'; import { Observable } from '@backstage/types'; import { PathParams } from '@backstage/core-plugin-api'; +import { PropsWithChildren } from 'react'; import { default as React_2 } from 'react'; import { ReactNode } from 'react'; import { RouteRef } from '@backstage/core-plugin-api'; @@ -382,7 +383,7 @@ export type RouterProps = { template: TemplateEntityV1beta3; }> | undefined; - TaskPageComponent?: ComponentType<{}>; + TaskPageComponent?: ComponentType>; }; groups?: Array<{ title?: React_2.ReactNode; @@ -466,7 +467,9 @@ export type ScaffolderGetIntegrationsListResponse = ScaffolderGetIntegrationsListResponse_2; // @public @deprecated (undocumented) -export const ScaffolderLayouts: ComponentType<{}>; +export const ScaffolderLayouts: ComponentType<{ + children?: ReactNode; +}>; // @public @deprecated (undocumented) export type ScaffolderOutputlink = ScaffolderOutputLink; diff --git a/plugins/scaffolder/src/components/Router.tsx b/plugins/scaffolder/src/components/Router.tsx index 05d5cc9f0a..3ceda359cc 100644 --- a/plugins/scaffolder/src/components/Router.tsx +++ b/plugins/scaffolder/src/components/Router.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { ComponentType, useEffect } from 'react'; +import React, { ComponentType, useEffect, PropsWithChildren } from 'react'; import { Navigate, Route, Routes, useOutlet } from 'react-router-dom'; import { Entity } from '@backstage/catalog-model'; import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common'; @@ -52,7 +52,7 @@ export type RouterProps = { TemplateCardComponent?: | ComponentType<{ template: TemplateEntityV1beta3 }> | undefined; - TaskPageComponent?: ComponentType<{}>; + TaskPageComponent?: ComponentType>; }; groups?: Array<{ title?: React.ReactNode; diff --git a/plugins/scaffolder/src/components/fields/EntityPicker/EntityPicker.test.tsx b/plugins/scaffolder/src/components/fields/EntityPicker/EntityPicker.test.tsx index 598616aaa3..cbc587a732 100644 --- a/plugins/scaffolder/src/components/fields/EntityPicker/EntityPicker.test.tsx +++ b/plugins/scaffolder/src/components/fields/EntityPicker/EntityPicker.test.tsx @@ -49,7 +49,7 @@ describe('', () => { getLocationByRef: jest.fn(), removeEntityByUid: jest.fn(), } as any; - let Wrapper: React.ComponentType; + let Wrapper: React.ComponentType>; beforeEach(() => { entities = [ diff --git a/plugins/scaffolder/src/components/fields/OwnerPicker/OwnerPicker.test.tsx b/plugins/scaffolder/src/components/fields/OwnerPicker/OwnerPicker.test.tsx index 00508593f5..1d843ea8a2 100644 --- a/plugins/scaffolder/src/components/fields/OwnerPicker/OwnerPicker.test.tsx +++ b/plugins/scaffolder/src/components/fields/OwnerPicker/OwnerPicker.test.tsx @@ -55,7 +55,7 @@ describe('', () => { getLocationByRef: jest.fn(), removeEntityByUid: jest.fn(), } as any; - let Wrapper: React.ComponentType; + let Wrapper: React.ComponentType>; beforeEach(() => { entities = [ diff --git a/plugins/scaffolder/src/next/Router/Router.tsx b/plugins/scaffolder/src/next/Router/Router.tsx index 9c50d0d979..2061cd1243 100644 --- a/plugins/scaffolder/src/next/Router/Router.tsx +++ b/plugins/scaffolder/src/next/Router/Router.tsx @@ -58,7 +58,7 @@ export type NextRouterProps = { TemplateCardComponent?: React.ComponentType<{ template: TemplateEntityV1beta3; }>; - TaskPageComponent?: React.ComponentType<{}>; + TaskPageComponent?: React.ComponentType>; TemplateOutputsComponent?: React.ComponentType<{ output?: ScaffolderTaskOutput; }>; diff --git a/plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.stories.tsx b/plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.stories.tsx index 6db7955ec8..0eaece87bb 100644 --- a/plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.stories.tsx +++ b/plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.stories.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { ComponentType } from 'react'; +import React, { ComponentType, PropsWithChildren } from 'react'; import { Grid } from '@material-ui/core'; import LabelIcon from '@material-ui/icons/Label'; @@ -31,7 +31,7 @@ export default { title: 'Plugins/Search/SearchAutocomplete', component: SearchAutocomplete, decorators: [ - (Story: ComponentType<{}>) => ( + (Story: ComponentType>) => ( diff --git a/plugins/search-react/src/components/SearchAutocomplete/SearchAutocompleteDefaultOption.stories.tsx b/plugins/search-react/src/components/SearchAutocomplete/SearchAutocompleteDefaultOption.stories.tsx index 40a3c5cdca..f671546efa 100644 --- a/plugins/search-react/src/components/SearchAutocomplete/SearchAutocompleteDefaultOption.stories.tsx +++ b/plugins/search-react/src/components/SearchAutocomplete/SearchAutocompleteDefaultOption.stories.tsx @@ -30,7 +30,7 @@ export default { title: 'Plugins/Search/SearchAutocompleteDefaultOption', component: SearchAutocompleteDefaultOption, decorators: [ - (Story: ComponentType<{}>) => ( + (Story: ComponentType>) => ( diff --git a/plugins/search-react/src/components/SearchBar/SearchBar.stories.tsx b/plugins/search-react/src/components/SearchBar/SearchBar.stories.tsx index 05a46d11e1..f342eed211 100644 --- a/plugins/search-react/src/components/SearchBar/SearchBar.stories.tsx +++ b/plugins/search-react/src/components/SearchBar/SearchBar.stories.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { ComponentType } from 'react'; +import React, { ComponentType, PropsWithChildren } from 'react'; import { Grid, makeStyles } from '@material-ui/core'; import { TestApiProvider } from '@backstage/test-utils'; @@ -28,7 +28,7 @@ export default { title: 'Plugins/Search/SearchBar', component: SearchBar, decorators: [ - (Story: ComponentType<{}>) => ( + (Story: ComponentType>) => ( diff --git a/plugins/search-react/src/components/SearchFilter/SearchFilter.stories.tsx b/plugins/search-react/src/components/SearchFilter/SearchFilter.stories.tsx index 2c8a629f01..505c1e13c3 100644 --- a/plugins/search-react/src/components/SearchFilter/SearchFilter.stories.tsx +++ b/plugins/search-react/src/components/SearchFilter/SearchFilter.stories.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { ComponentType } from 'react'; +import React, { ComponentType, PropsWithChildren } from 'react'; import { Grid, Paper } from '@material-ui/core'; import { TestApiProvider } from '@backstage/test-utils'; @@ -27,7 +27,7 @@ export default { title: 'Plugins/Search/SearchFilter', component: SearchFilter, decorators: [ - (Story: ComponentType<{}>) => ( + (Story: ComponentType>) => ( diff --git a/plugins/search-react/src/components/SearchPagination/SearchPagination.stories.tsx b/plugins/search-react/src/components/SearchPagination/SearchPagination.stories.tsx index 4e72c0fa25..dfb4e7ea91 100644 --- a/plugins/search-react/src/components/SearchPagination/SearchPagination.stories.tsx +++ b/plugins/search-react/src/components/SearchPagination/SearchPagination.stories.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { ComponentType } from 'react'; +import React, { ComponentType, PropsWithChildren } from 'react'; import { Grid } from '@material-ui/core'; import { TestApiProvider } from '@backstage/test-utils'; @@ -28,7 +28,7 @@ export default { title: 'Plugins/Search/SearchPagination', component: SearchPagination, decorators: [ - (Story: ComponentType<{}>) => ( + (Story: ComponentType>) => ( diff --git a/plugins/search-react/src/components/SearchResult/SearchResult.stories.tsx b/plugins/search-react/src/components/SearchResult/SearchResult.stories.tsx index f3086fc40a..a64d053dae 100644 --- a/plugins/search-react/src/components/SearchResult/SearchResult.stories.tsx +++ b/plugins/search-react/src/components/SearchResult/SearchResult.stories.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { ComponentType } from 'react'; +import React, { ComponentType, PropsWithChildren } from 'react'; import { List, ListItem } from '@material-ui/core'; import DefaultIcon from '@material-ui/icons/InsertDriveFile'; @@ -70,7 +70,7 @@ export default { title: 'Plugins/Search/SearchResult', component: SearchResult, decorators: [ - (Story: ComponentType<{}>) => + (Story: ComponentType>) => wrapInTestApp( diff --git a/plugins/search-react/src/components/SearchResultGroup/SearchResultGroup.stories.tsx b/plugins/search-react/src/components/SearchResultGroup/SearchResultGroup.stories.tsx index 40f7d30ff4..2f497d4568 100644 --- a/plugins/search-react/src/components/SearchResultGroup/SearchResultGroup.stories.tsx +++ b/plugins/search-react/src/components/SearchResultGroup/SearchResultGroup.stories.tsx @@ -14,7 +14,12 @@ * limitations under the License. */ -import React, { ComponentType, useCallback, useState } from 'react'; +import React, { + ComponentType, + useCallback, + useState, + PropsWithChildren, +} from 'react'; import { Grid, @@ -72,7 +77,7 @@ export default { title: 'Plugins/Search/SearchResultGroup', component: SearchResultGroup, decorators: [ - (Story: ComponentType<{}>) => + (Story: ComponentType>) => wrapInTestApp( diff --git a/plugins/search-react/src/components/SearchResultList/SearchResultList.stories.tsx b/plugins/search-react/src/components/SearchResultList/SearchResultList.stories.tsx index 4369b6636e..d822d0f52d 100644 --- a/plugins/search-react/src/components/SearchResultList/SearchResultList.stories.tsx +++ b/plugins/search-react/src/components/SearchResultList/SearchResultList.stories.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { ComponentType, useState } from 'react'; +import React, { ComponentType, useState, PropsWithChildren } from 'react'; import { Grid, ListItem, ListItemIcon, ListItemText } from '@material-ui/core'; @@ -59,7 +59,7 @@ export default { title: 'Plugins/Search/SearchResultList', component: SearchResultList, decorators: [ - (Story: ComponentType<{}>) => + (Story: ComponentType>) => wrapInTestApp( diff --git a/plugins/search/src/components/HomePageComponent/HomePageSearchBar.stories.tsx b/plugins/search/src/components/HomePageComponent/HomePageSearchBar.stories.tsx index 9a10aaa41b..c1b1f0df87 100644 --- a/plugins/search/src/components/HomePageComponent/HomePageSearchBar.stories.tsx +++ b/plugins/search/src/components/HomePageComponent/HomePageSearchBar.stories.tsx @@ -18,12 +18,12 @@ import { rootRouteRef, HomePageSearchBar } from '../../plugin'; import { searchApiRef } from '@backstage/plugin-search-react'; import { wrapInTestApp, TestApiProvider } from '@backstage/test-utils'; import { Grid, makeStyles } from '@material-ui/core'; -import React, { ComponentType } from 'react'; +import React, { ComponentType, PropsWithChildren } from 'react'; export default { title: 'Plugins/Home/Components/SearchBar', decorators: [ - (Story: ComponentType<{}>) => + (Story: ComponentType>) => wrapInTestApp( <> ) => + (Story: ComponentType>) => wrapInTestApp( ) => ( + (Story: ComponentType>) => ( diff --git a/plugins/stack-overflow/src/home/StackOverflowQuestions/StackOverflowQuestions.stories.tsx b/plugins/stack-overflow/src/home/StackOverflowQuestions/StackOverflowQuestions.stories.tsx index aed1ed25aa..9f0fd75341 100644 --- a/plugins/stack-overflow/src/home/StackOverflowQuestions/StackOverflowQuestions.stories.tsx +++ b/plugins/stack-overflow/src/home/StackOverflowQuestions/StackOverflowQuestions.stories.tsx @@ -19,7 +19,7 @@ import { wrapInTestApp, TestApiProvider } from '@backstage/test-utils'; import { configApiRef } from '@backstage/core-plugin-api'; import { ConfigReader } from '@backstage/config'; import { Grid } from '@material-ui/core'; -import React, { ComponentType } from 'react'; +import React, { ComponentType, PropsWithChildren } from 'react'; import { StackOverflowIcon } from '../../icons'; import { stackOverflowApiRef } from '../../api'; @@ -46,7 +46,7 @@ export default { title: 'Plugins/Home/Components/StackOverflow', component: HomePageStackOverflowQuestions, decorators: [ - (Story: ComponentType<{}>) => + (Story: ComponentType>) => wrapInTestApp( <> ) => wrapInTestApp()], + decorators: [ + (Story: ComponentType>) => wrapInTestApp(), + ], }; export const Default = () => { diff --git a/plugins/techdocs/src/reader/components/useReaderState.test.tsx b/plugins/techdocs/src/reader/components/useReaderState.test.tsx index 08bfa8f9ad..5f3e2d9662 100644 --- a/plugins/techdocs/src/reader/components/useReaderState.test.tsx +++ b/plugins/techdocs/src/reader/components/useReaderState.test.tsx @@ -26,7 +26,7 @@ import { } from './useReaderState'; describe('useReaderState', () => { - let Wrapper: React.ComponentType; + let Wrapper: React.ComponentType>; const techdocsStorageApi: jest.Mocked = { getApiOrigin: jest.fn(), diff --git a/plugins/techdocs/src/reader/transformers/html/transformer.test.tsx b/plugins/techdocs/src/reader/transformers/html/transformer.test.tsx index dc4eeb85be..2b1f427be3 100644 --- a/plugins/techdocs/src/reader/transformers/html/transformer.test.tsx +++ b/plugins/techdocs/src/reader/transformers/html/transformer.test.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { FC } from 'react'; +import React, { FC, PropsWithChildren } from 'react'; import { renderHook } from '@testing-library/react-hooks'; import { ConfigReader } from '@backstage/core-app-api'; @@ -31,7 +31,7 @@ const configApiMock: ConfigApi = new ConfigReader({ }, }); -const wrapper: FC = ({ children }) => ( +const wrapper: FC> = ({ children }) => ( {children} From b2200ff04808ee871af2d15a80ac974a6961611b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fredrik=20Adel=C3=B6w?= Date: Wed, 24 May 2023 14:23:25 +0200 Subject: [PATCH 2/2] fixup the last bits MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Fredrik Adelöw --- .changeset/weak-rats-serve.md | 18 ++++++------------ packages/core-app-api/api-report.md | 20 +++++++++++--------- packages/core-app-api/src/app/types.ts | 14 +++++++------- packages/core-plugin-api/api-report.md | 20 +++++++++++--------- 4 files changed, 35 insertions(+), 37 deletions(-) diff --git a/.changeset/weak-rats-serve.md b/.changeset/weak-rats-serve.md index e3030d130a..fe7cd78510 100644 --- a/.changeset/weak-rats-serve.md +++ b/.changeset/weak-rats-serve.md @@ -1,15 +1,9 @@ --- -'@backstage/core-components': patch -'@backstage/plugin-stack-overflow': patch -'@backstage/plugin-catalog-react': patch -'@backstage/plugin-search-react': patch -'@backstage/plugin-api-docs': patch -'@backstage/plugin-techdocs': patch -'@backstage/plugin-catalog': patch -'@backstage/plugin-search': patch -'@backstage/plugin-fossa': patch -'@backstage/plugin-home': patch -'@backstage/plugin-org': patch +'@backstage/core-app-api': patch +'@backstage/core-plugin-api': patch +'@backstage/dev-utils': patch +'@backstage/plugin-scaffolder-react': patch +'@backstage/plugin-scaffolder': patch --- -Components with empty default props now explicitly declare PropsWithChildren as type +Add `PropsWithChildren` to usages of `ComponentType`, in preparation for React 18 where the children are no longer implicit. diff --git a/packages/core-app-api/api-report.md b/packages/core-app-api/api-report.md index 0def835e50..09efe516b9 100644 --- a/packages/core-app-api/api-report.md +++ b/packages/core-app-api/api-report.md @@ -148,9 +148,11 @@ export type AppComponents = { NotFoundErrorPage: ComponentType>; BootErrorPage: ComponentType; Progress: ComponentType>; - Router: ComponentType<{ - basename?: string; - }>; + Router: ComponentType< + PropsWithChildren<{ + basename?: string; + }> + >; ErrorBoundaryFallback: ComponentType; ThemeProvider?: ComponentType>; SignInPage?: ComponentType; @@ -316,10 +318,10 @@ export type BitbucketSession = { }; // @public -export type BootErrorPageProps = { +export type BootErrorPageProps = PropsWithChildren<{ step: 'load-config' | 'load-chunk'; error: Error; -}; +}>; export { ConfigReader }; @@ -359,11 +361,11 @@ export class ErrorApiForwarder implements ErrorApi { } // @public -export type ErrorBoundaryFallbackProps = { +export type ErrorBoundaryFallbackProps = PropsWithChildren<{ plugin?: BackstagePlugin; error: Error; resetError: () => void; -}; +}>; // @public export const FeatureFlagged: (props: FeatureFlaggedProps) => JSX.Element; @@ -596,9 +598,9 @@ export class SamlAuth } // @public -export type SignInPageProps = { +export type SignInPageProps = PropsWithChildren<{ onSignInSuccess(identityApi: IdentityApi): void; -}; +}>; // @public export class UnhandledErrorForwarder { diff --git a/packages/core-app-api/src/app/types.ts b/packages/core-app-api/src/app/types.ts index 584674a52d..7f38e2d006 100644 --- a/packages/core-app-api/src/app/types.ts +++ b/packages/core-app-api/src/app/types.ts @@ -33,33 +33,33 @@ import { AppConfig } from '@backstage/config'; * * @public */ -export type BootErrorPageProps = { +export type BootErrorPageProps = PropsWithChildren<{ step: 'load-config' | 'load-chunk'; error: Error; -}; +}>; /** * Props for the `SignInPage` component of {@link AppComponents}. * * @public */ -export type SignInPageProps = { +export type SignInPageProps = PropsWithChildren<{ /** * Set the IdentityApi on successful sign-in. This should only be called once. */ onSignInSuccess(identityApi: IdentityApi): void; -}; +}>; /** * Props for the fallback error boundary. * * @public */ -export type ErrorBoundaryFallbackProps = { +export type ErrorBoundaryFallbackProps = PropsWithChildren<{ plugin?: BackstagePlugin; error: Error; resetError: () => void; -}; +}>; /** * A set of replaceable core components that are part of every Backstage app. @@ -70,7 +70,7 @@ export type AppComponents = { NotFoundErrorPage: ComponentType>; BootErrorPage: ComponentType; Progress: ComponentType>; - Router: ComponentType<{ basename?: string }>; + Router: ComponentType>; ErrorBoundaryFallback: ComponentType; ThemeProvider?: ComponentType>; diff --git a/packages/core-plugin-api/api-report.md b/packages/core-plugin-api/api-report.md index 827b173094..227b9b9816 100644 --- a/packages/core-plugin-api/api-report.md +++ b/packages/core-plugin-api/api-report.md @@ -141,9 +141,11 @@ export type AppComponents = { NotFoundErrorPage: ComponentType>; BootErrorPage: ComponentType; Progress: ComponentType>; - Router: ComponentType<{ - basename?: string; - }>; + Router: ComponentType< + PropsWithChildren<{ + basename?: string; + }> + >; ErrorBoundaryFallback: ComponentType; ThemeProvider?: ComponentType>; SignInPage?: ComponentType; @@ -248,10 +250,10 @@ export const bitbucketServerAuthApiRef: ApiRef< >; // @public -export type BootErrorPageProps = { +export type BootErrorPageProps = PropsWithChildren<{ step: 'load-config' | 'load-chunk'; error: Error; -}; +}>; // @public export type CommonAnalyticsContext = { @@ -406,11 +408,11 @@ export type ErrorApiErrorContext = { export const errorApiRef: ApiRef; // @public -export type ErrorBoundaryFallbackProps = { +export type ErrorBoundaryFallbackProps = PropsWithChildren<{ plugin?: BackstagePlugin_2; error: Error; resetError: () => void; -}; +}>; // @public export type Extension = { @@ -691,9 +693,9 @@ export enum SessionState { } // @public -export type SignInPageProps = { +export type SignInPageProps = PropsWithChildren<{ onSignInSuccess(identityApi: IdentityApi_2): void; -}; +}>; // @public export interface StorageApi {