set PropsWithChildren as explicit type on components

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

Author: RobotSail

.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,23 +319,23 @@ export type BackstageApp = {
    * );
    * ```
    */
-  createRoot(element: JSX.Element): ComponentType<{}>;
+  createRoot(element: JSX.Element): ComponentType<PropsWithChildren<{}>>;
 
   /**
    * Provider component that should wrap the Router created with getRouter()
    * and any other components that need to be within the app context.
    *
    * @deprecated Use {@link BackstageApp.createRoot} instead.
    */
-  getProvider(): ComponentType<{}>;
+  getProvider(): ComponentType<PropsWithChildren<{}>>;
 
   /**
    * Router component that should wrap the App Routes create with getRoutes()
    * and any other components that should only be available while signed in.
    *
    * @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 } }),
   ],
 };