set PropsWithChildren as explicit type on components

Signed-off-by: Oleg S <97077423+RobotSail@users.noreply.github.com>

.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

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';
 

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<PropsWithChildren<{}>>) =>
       wrapInTestApp(
         <>
           <TestApiProvider

packages/core-app-api/api-report.md

@@ -145,14 +145,14 @@ export class ApiResolver implements ApiHolder {
 
 // @public
 export type AppComponents = {
-  NotFoundErrorPage: ComponentType<{}>;
+  NotFoundErrorPage: ComponentType<PropsWithChildren<{}>>;
   BootErrorPage: ComponentType<BootErrorPageProps>;
-  Progress: ComponentType<{}>;
+  Progress: ComponentType<PropsWithChildren<{}>>;
   Router: ComponentType<{
     basename?: string;
   }>;
   ErrorBoundaryFallback: ComponentType<ErrorBoundaryFallbackProps>;
-  ThemeProvider?: ComponentType<{}>;
+  ThemeProvider?: ComponentType<PropsWithChildren<{}>>;
   SignInPage?: ComponentType<SignInPageProps>;
 };
 
@@ -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<PropsWithChildren<{}>>;
+  getProvider(): ComponentType<PropsWithChildren<{}>>;
+  getRouter(): ComponentType<PropsWithChildren<{}>>;
 };
 
 // @public

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<PropsWithChildren<{}>> {
     const AppProvider = this.getProvider();
     const AppRoot = () => {
       return <AppProvider>{element}</AppProvider>;
@@ -251,7 +251,7 @@ export class AppManager implements BackstageApp {
   }
 
   #getProviderCalled = false;
-  getProvider(): ComponentType<{}> {
+  getProvider(): ComponentType<PropsWithChildren<{}>> {
     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<PropsWithChildren<{}>> {
     return AppRouter;
   }
 

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<PropsWithChildren<{}>>;
   BootErrorPage: ComponentType<BootErrorPageProps>;
-  Progress: ComponentType<{}>;
+  Progress: ComponentType<PropsWithChildren<{}>>;
   Router: ComponentType<{ basename?: string }>;
   ErrorBoundaryFallback: ComponentType<ErrorBoundaryFallbackProps>;
-  ThemeProvider?: ComponentType<{}>;
+  ThemeProvider?: ComponentType<PropsWithChildren<{}>>;
 
   /**
    * 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<PropsWithChildren<{}>>;
 
   /**
    * 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<PropsWithChildren<{}>>;
 
   /**
    * 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<PropsWithChildren<{}>>;
 };
 
 /**

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<PropsWithChildren<{}>>) =>
       wrapInTestApp(
         <div>
           <div>

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<PropsWithChildren<{}>>) =>
       wrapInTestApp(
         <>
           <Typography>

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(<Story />)],
+  decorators: [
+    (Story: ComponentType<PropsWithChildren<{}>>) => wrapInTestApp(<Story />),
+  ],
 };
 
 const exampleLog = `Starting up task with 3 steps

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<PropsWithChildren<{}>>) =>
       wrapInTestApp(<Story />, { mountedRoutes: { '/': routeRef } }),
   ],
 };

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<PropsWithChildren<{}>>;
   BootErrorPage: ComponentType<BootErrorPageProps>;
-  Progress: ComponentType<{}>;
+  Progress: ComponentType<PropsWithChildren<{}>>;
   Router: ComponentType<{
     basename?: string;
   }>;
   ErrorBoundaryFallback: ComponentType<ErrorBoundaryFallbackProps>;
-  ThemeProvider?: ComponentType<{}>;
+  ThemeProvider?: ComponentType<PropsWithChildren<{}>>;
   SignInPage?: ComponentType<SignInPageProps>;
 };
 

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<PropsWithChildren<{}>>;
   registerApi<
     Api,
     Impl extends Api,

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<PropsWithChildren<{}>> {
     const fakeRouteRef = createRouteRef({ id: 'fake' });
     const FakePage = () => <Box p={3}>Page belonging to another plugin.</Box>;
     attachComponentData(FakePage, 'core.mountPoint', fakeRouteRef);

plugins/api-docs/src/components/ApiDefinitionCard/ApiDefinitionCard.test.tsx

@@ -30,7 +30,7 @@ describe('<ApiDefinitionCard />', () => {
   const apiDocsConfig: jest.Mocked<ApiDocsConfig> = {
     getApiDefinitionWidget: jest.fn(),
   } as any;
-  let Wrapper: React.ComponentType;
+  let Wrapper: React.ComponentType<React.PropsWithChildren<{}>>;
 
   beforeEach(() => {
     Wrapper = ({ children }: { children?: React.ReactNode }) => (

plugins/api-docs/src/components/ApiDefinitionCard/ApiTypeTitle.test.tsx

@@ -24,7 +24,7 @@ describe('<ApiTypeTitle />', () => {
   const apiDocsConfig: jest.Mocked<ApiDocsConfig> = {
     getApiDefinitionWidget: jest.fn(),
   } as any;
-  let Wrapper: React.ComponentType;
+  let Wrapper: React.ComponentType<React.PropsWithChildren<{}>>;
 
   beforeEach(() => {
     Wrapper = ({ children }: { children?: React.ReactNode }) => (

plugins/api-docs/src/components/ApisCards/ConsumedApisCard.test.tsx

@@ -39,7 +39,7 @@ describe('<ConsumedApisCard />', () => {
     getLocationByRef: jest.fn(),
     removeEntityByUid: jest.fn(),
   } as any;
-  let Wrapper: React.ComponentType;
+  let Wrapper: React.ComponentType<React.PropsWithChildren<{}>>;
 
   beforeEach(() => {
     Wrapper = ({ children }: { children?: React.ReactNode }) => (

plugins/api-docs/src/components/ApisCards/HasApisCard.test.tsx

@@ -39,7 +39,7 @@ describe('<HasApisCard />', () => {
     getLocationByRef: jest.fn(),
     removeEntityByUid: jest.fn(),
   } as any;
-  let Wrapper: React.ComponentType;
+  let Wrapper: React.ComponentType<React.PropsWithChildren<{}>>;
 
   beforeEach(() => {
     Wrapper = ({ children }: { children?: React.ReactNode }) => (

plugins/api-docs/src/components/ApisCards/ProvidedApisCard.test.tsx

@@ -39,7 +39,7 @@ describe('<ProvidedApisCard />', () => {
     getLocationByRef: jest.fn(),
     removeEntityByUid: jest.fn(),
   } as any;
-  let Wrapper: React.ComponentType;
+  let Wrapper: React.ComponentType<React.PropsWithChildren<{}>>;
 
   beforeEach(() => {
     Wrapper = ({ children }: { children?: React.ReactNode }) => (

plugins/api-docs/src/components/ComponentsCards/ConsumingComponentsCard.test.tsx

@@ -35,7 +35,7 @@ describe('<ConsumingComponentsCard />', () => {
     getLocationByRef: jest.fn(),
     removeEntityByUid: jest.fn(),
   } as any;
-  let Wrapper: React.ComponentType;
+  let Wrapper: React.ComponentType<React.PropsWithChildren<{}>>;
 
   beforeEach(() => {
     Wrapper = ({ children }: { children?: React.ReactNode }) => (

plugins/api-docs/src/components/ComponentsCards/ProvidingComponentsCard.test.tsx

@@ -35,7 +35,7 @@ describe('<ProvidingComponentsCard />', () => {
     getLocationByRef: jest.fn(),
     removeEntityByUid: jest.fn(),
   } as any;
-  let Wrapper: React.ComponentType;
+  let Wrapper: React.ComponentType<React.PropsWithChildren<{}>>;
 
   beforeEach(() => {
     Wrapper = ({ children }: { children?: React.ReactNode }) => (

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<PropsWithChildren<{}>>) =>
       wrapInTestApp(
         <>
           <TestApiProvider

plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.stories.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { ComponentType } from 'react';
+import React, { ComponentType, PropsWithChildren } from 'react';
 import { EntityRefLink, EntityRefLinkProps } from './EntityRefLink';
 import { wrapInTestApp } from '@backstage/test-utils';
 import { entityRouteRef } from '../../routes';
@@ -26,7 +26,7 @@ const defaultArgs = {
 export default {
   title: 'Catalog /EntityRefLink',
   decorators: [
-    (Story: ComponentType<{}>) =>
+    (Story: ComponentType<PropsWithChildren<{}>>) =>
       wrapInTestApp(<Story />, {
         mountedRoutes: {
           '/catalog/:namespace/:kind/:name': entityRouteRef,

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<PropsWithChildren<{}>>) =>
       wrapInTestApp(<Story />, {
         mountedRoutes: {
           '/catalog/:namespace/:kind/:name': entityRouteRef,

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<React.PropsWithChildren<{}>>;
 
   const mockEntity: Entity = {
     apiVersion: '1',

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<React.PropsWithChildren<{}>>;
 
   beforeEach(() => {
     wrapper = (props: PropsWithChildren<{}>) => (

plugins/catalog/src/components/DependencyOfComponentsCard/DependencyOfComponentsCard.test.tsx

@@ -28,7 +28,7 @@ import { DependencyOfComponentsCard } from './DependencyOfComponentsCard';
 
 describe('<DependencyOfComponentsCard />', () => {
   const getEntities: jest.MockedFunction<CatalogApi['getEntities']> = jest.fn();
-  let Wrapper: React.ComponentType;
+  let Wrapper: React.ComponentType<React.PropsWithChildren<{}>>;
 
   beforeEach(() => {
     Wrapper = ({ children }: { children?: React.ReactNode }) => (

plugins/catalog/src/components/DependsOnComponentsCard/DependsOnComponentsCard.test.tsx

@@ -28,7 +28,7 @@ import { DependsOnComponentsCard } from './DependsOnComponentsCard';
 
 describe('<DependsOnComponentsCard />', () => {
   const getEntities: jest.MockedFunction<CatalogApi['getEntities']> = jest.fn();
-  let Wrapper: React.ComponentType;
+  let Wrapper: React.ComponentType<React.PropsWithChildren<{}>>;
 
   beforeEach(() => {
     Wrapper = ({ children }: { children?: React.ReactNode }) => (

plugins/catalog/src/components/DependsOnResourcesCard/DependsOnResourcesCard.test.tsx

@@ -28,7 +28,7 @@ import { DependsOnResourcesCard } from './DependsOnResourcesCard';
 
 describe('<DependsOnResourcesCard />', () => {
   const getEntities: jest.MockedFunction<CatalogApi['getEntities']> = jest.fn();
-  let Wrapper: React.ComponentType;
+  let Wrapper: React.ComponentType<React.PropsWithChildren<{}>>;
 
   beforeEach(() => {
     Wrapper = ({ children }: { children?: React.ReactNode }) => (

plugins/catalog/src/components/HasComponentsCard/HasComponentsCard.test.tsx

@@ -28,7 +28,7 @@ import { HasComponentsCard } from './HasComponentsCard';
 
 describe('<HasComponentsCard />', () => {
   const getEntities: jest.MockedFunction<CatalogApi['getEntities']> = jest.fn();
-  let Wrapper: React.ComponentType;
+  let Wrapper: React.ComponentType<React.PropsWithChildren<{}>>;
 
   beforeEach(() => {
     Wrapper = ({ children }: { children?: React.ReactNode }) => (

plugins/catalog/src/components/HasResourcesCard/HasResourcesCard.test.tsx

@@ -28,7 +28,7 @@ import { HasResourcesCard } from './HasResourcesCard';
 
 describe('<HasResourcesCard />', () => {
   const getEntities: jest.MockedFunction<CatalogApi['getEntities']> = jest.fn();
-  let Wrapper: React.ComponentType;
+  let Wrapper: React.ComponentType<React.PropsWithChildren<{}>>;
 
   beforeEach(() => {
     Wrapper = ({ children }: { children?: React.ReactNode }) => (

plugins/catalog/src/components/HasSubcomponentsCard/HasSubcomponentsCard.test.tsx

@@ -28,7 +28,7 @@ import { HasSubcomponentsCard } from './HasSubcomponentsCard';
 
 describe('<HasSubcomponentsCard />', () => {
   const getEntities: jest.MockedFunction<CatalogApi['getEntities']> = jest.fn();
-  let Wrapper: React.ComponentType;
+  let Wrapper: React.ComponentType<React.PropsWithChildren<{}>>;
 
   beforeEach(() => {
     Wrapper = ({ children }: { children?: React.ReactNode }) => (

plugins/catalog/src/components/HasSystemsCard/HasSystemsCard.test.tsx

@@ -28,7 +28,7 @@ import { HasSystemsCard } from './HasSystemsCard';
 
 describe('<HasSystemsCard />', () => {
   const getEntities: jest.MockedFunction<CatalogApi['getEntities']> = jest.fn();
-  let Wrapper: React.ComponentType;
+  let Wrapper: React.ComponentType<React.PropsWithChildren<{}>>;
 
   beforeEach(() => {
     Wrapper = ({ children }: { children?: React.ReactNode }) => (

plugins/fossa/src/components/FossaCard/FossaCard.test.tsx

@@ -26,7 +26,7 @@ describe('<FossaCard />', () => {
     getFindingSummary: jest.fn(),
     getFindingSummaries: jest.fn(),
   };
-  let Wrapper: React.ComponentType;
+  let Wrapper: React.ComponentType<React.PropsWithChildren<{}>>;
 
   beforeEach(() => {
     Wrapper = ({ children }: { children?: React.ReactNode }) => (

plugins/fossa/src/components/FossaPage/FossaPage.test.tsx

@@ -38,7 +38,7 @@ describe('<FossaPage />', () => {
     getFindingSummary: jest.fn(),
     getFindingSummaries: jest.fn(),
   };
-  let Wrapper: React.ComponentType;
+  let Wrapper: React.ComponentType<React.PropsWithChildren<{}>>;
 
   beforeEach(() => {
     Wrapper = ({ children }: { children?: React.ReactNode }) => (

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<PropsWithChildren<{}>>) =>
       wrapInTestApp(
         <TestApiProvider
           apis={[

plugins/home/src/homePageComponents/HeaderWorldClock/HeaderWorldClock.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 { ClockConfig, HeaderWorldClock } from './HeaderWorldClock';
 
 export default {
   title: 'Plugins/Home/Components/HeaderWorldClock',
-  decorators: [(Story: ComponentType<{}>) => wrapInTestApp(<Story />)],
+  decorators: [
+    (Story: ComponentType<PropsWithChildren<{}>>) => wrapInTestApp(<Story />),
+  ],
 };
 
 export const Default = () => {

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<PropsWithChildren<{}>>) =>
       wrapInTestApp(
         <TestApiProvider
           apis={[

plugins/home/src/homePageComponents/Toolkit/Toolkit.stories.tsx

@@ -17,14 +17,16 @@
 import { InfoCard } from '@backstage/core-components';
 import { wrapInTestApp } from '@backstage/test-utils';
 import { Grid } from '@material-ui/core';
-import React, { ComponentType } from 'react';
+import React, { ComponentType, PropsWithChildren } from 'react';
 import { ComponentAccordion } from '../../componentRenderers';
 import { HomePageToolkit } from '../../plugin';
 import { TemplateBackstageLogoIcon } from '../../assets';
 
 export default {
   title: 'Plugins/Home/Components/Toolkit',
-  decorators: [(Story: ComponentType<{}>) => wrapInTestApp(<Story />)],
+  decorators: [
+    (Story: ComponentType<PropsWithChildren<{}>>) => wrapInTestApp(<Story />),
+  ],
 };
 
 export const Default = () => {

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(<Story />)],
+  decorators: [
+    (Story: ComponentType<PropsWithChildren<{}>>) => wrapInTestApp(<Story />),
+  ],
 };
 
 export const Default = () => {

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<PropsWithChildren<{}>>) =>
       wrapInTestApp(
         <TestApiProvider apis={[[catalogApiRef, catalogApi]]}>
           <Story />

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<PropsWithChildren<{}>>) =>
       wrapInTestApp(<Story />, {
         mountedRoutes: {
           '/a': entityRouteRef,

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 = {

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<TInputProps = unknown>(
  *
  * @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);

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<PropsWithChildren<{}>>;
     TemplateOutputsComponent?: React_2.ComponentType<{
       output?: ScaffolderTaskOutput;
     }>;

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<PropsWithChildren<{}>>;
   };
   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;

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<PropsWithChildren<{}>>;
   };
   groups?: Array<{
     title?: React.ReactNode;

plugins/scaffolder/src/components/fields/EntityPicker/EntityPicker.test.tsx

@@ -49,7 +49,7 @@ describe('<EntityPicker />', () => {
     getLocationByRef: jest.fn(),
     removeEntityByUid: jest.fn(),
   } as any;
-  let Wrapper: React.ComponentType;
+  let Wrapper: React.ComponentType<React.PropsWithChildren<{}>>;
 
   beforeEach(() => {
     entities = [

plugins/scaffolder/src/components/fields/OwnerPicker/OwnerPicker.test.tsx

@@ -55,7 +55,7 @@ describe('<OwnerPicker />', () => {
     getLocationByRef: jest.fn(),
     removeEntityByUid: jest.fn(),
   } as any;
-  let Wrapper: React.ComponentType;
+  let Wrapper: React.ComponentType<React.PropsWithChildren<{}>>;
 
   beforeEach(() => {
     entities = [

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<PropsWithChildren<{}>>;
     TemplateOutputsComponent?: React.ComponentType<{
       output?: ScaffolderTaskOutput;
     }>;

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<PropsWithChildren<{}>>) => (
       <TestApiProvider apis={[[searchApiRef, new MockSearchApi()]]}>
         <SearchContextProvider>
           <Grid container direction="row">

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<PropsWithChildren<{}>>) => (
       <TestApiProvider apis={[[searchApiRef, new MockSearchApi()]]}>
         <SearchContextProvider>
           <Grid container direction="row">

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<PropsWithChildren<{}>>) => (
       <TestApiProvider apis={[[searchApiRef, new MockSearchApi()]]}>
         <SearchContextProvider>
           <Grid container direction="row">

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<PropsWithChildren<{}>>) => (
       <TestApiProvider apis={[[searchApiRef, new MockSearchApi()]]}>
         <SearchContextProvider>
           <Grid container direction="row">

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<PropsWithChildren<{}>>) => (
       <TestApiProvider apis={[[searchApiRef, new MockSearchApi()]]}>
         <SearchContextProvider>
           <Grid container direction="row">

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<PropsWithChildren<{}>>) =>
       wrapInTestApp(
         <TestApiProvider apis={[[searchApiRef, searchApiMock]]}>
           <SearchContextProvider>

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<PropsWithChildren<{}>>) =>
       wrapInTestApp(
         <TestApiProvider apis={[[searchApiRef, searchApiMock]]}>
           <Grid container direction="row">

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<PropsWithChildren<{}>>) =>
       wrapInTestApp(
         <TestApiProvider apis={[[searchApiRef, searchApiMock]]}>
           <Grid container direction="row">

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<PropsWithChildren<{}>>) =>
       wrapInTestApp(
         <>
           <TestApiProvider

plugins/search/src/components/SearchModal/SearchModal.stories.tsx

@@ -25,7 +25,7 @@ import {
   Paper,
 } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
-import React, { ComponentType } from 'react';
+import React, { ComponentType, PropsWithChildren } from 'react';
 import { rootRouteRef } from '../../plugin';
 import {
   SearchBar,
@@ -74,7 +74,7 @@ export default {
   title: 'Plugins/Search/SearchModal',
   component: SearchModal,
   decorators: [
-    (Story: ComponentType<{}>) =>
+    (Story: ComponentType<PropsWithChildren<{}>>) =>
       wrapInTestApp(
         <TestApiProvider
           apis={[[searchApiRef, new MockSearchApi(mockResults)]]}

plugins/search/src/components/SearchType/SearchType.stories.tsx

@@ -18,7 +18,7 @@ import { Grid, Paper } from '@material-ui/core';
 import CatalogIcon from '@material-ui/icons/MenuBook';
 import DocsIcon from '@material-ui/icons/Description';
 import UsersGroupsIcon from '@material-ui/icons/Person';
-import React, { ComponentType } from 'react';
+import React, { ComponentType, PropsWithChildren } from 'react';
 import { SearchType } from './SearchType';
 import { TestApiProvider } from '@backstage/test-utils';
 import {
@@ -31,7 +31,7 @@ export default {
   title: 'Plugins/Search/SearchType',
   component: SearchType,
   decorators: [
-    (Story: ComponentType<{}>) => (
+    (Story: ComponentType<PropsWithChildren<{}>>) => (
       <TestApiProvider apis={[[searchApiRef, new MockSearchApi()]]}>
         <SearchContextProvider>
           <Grid container direction="row">

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<PropsWithChildren<{}>>) =>
       wrapInTestApp(
         <>
           <TestApiProvider

plugins/stack-overflow/src/search/StackOverflowSearchResultListItem/StackOverflowSearchResultListItem.stories.tsx

@@ -16,13 +16,15 @@
 
 import { StackOverflowSearchResultListItem } from '../../plugin';
 import { wrapInTestApp } from '@backstage/test-utils';
-import React, { ComponentType } from 'react';
+import React, { ComponentType, PropsWithChildren } from 'react';
 import { StackOverflowIcon } from '../../icons';
 
 export default {
   title: 'Plugins/Search/StackOverflowResultListItem',
   component: StackOverflowSearchResultListItem,
-  decorators: [(Story: ComponentType<{}>) => wrapInTestApp(<Story />)],
+  decorators: [
+    (Story: ComponentType<PropsWithChildren<{}>>) => wrapInTestApp(<Story />),
+  ],
 };
 
 export const Default = () => {

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<React.PropsWithChildren<{}>>;
 
   const techdocsStorageApi: jest.Mocked<typeof techdocsStorageApiRef.T> = {
     getApiOrigin: jest.fn(),

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<PropsWithChildren<{}>> = ({ children }) => (
   <TestApiProvider apis={[[configApiRef, configApiMock]]}>
     {children}
   </TestApiProvider>