Merge pull request #19707 from RobotSail/react-18-props-with-children-upgrade

react 18 props with children upgrade

packages/core-app-api/src/app/AppContext.test.tsx

@@ -40,7 +40,7 @@ describe('v1 consumer', () => {
     };
 
     const renderedHook = renderHook(() => useMockAppV1(), {
-      wrapper: ({ children }) => (
+      wrapper: ({ children }: React.PropsWithChildren<{}>) => (
         <AppContextProvider appContext={mockContext} children={children} />
       ),
     });

packages/core-app-api/src/routing/RoutingProvider.beta.test.tsx

@@ -353,7 +353,7 @@ describe('v1 consumer', () => {
         initialProps: {
           routeRef: routeRef1 as AnyRouteRef,
         },
-        wrapper: ({ children }) => (
+        wrapper: ({ children }: React.PropsWithChildren<{}>) => (
           <RoutingProvider
             routePaths={
               new Map<RouteRef<any>, string>([

packages/core-app-api/src/routing/RoutingProvider.stable.test.tsx

@@ -385,7 +385,7 @@ describe('v1 consumer', () => {
         initialProps: {
           routeRef: routeRef1 as AnyRouteRef,
         },
-        wrapper: ({ children }) => (
+        wrapper: ({ children }: React.PropsWithChildren<{}>) => (
           <RoutingProvider
             routePaths={
               new Map<RouteRef<any>, string>([

packages/core-components/api-report.md

@@ -347,10 +347,10 @@ export type EmptyStateImageClassKey = 'generalImg';
 export const ErrorBoundary: ComponentClass<ErrorBoundaryProps, State>;
 
 // @public (undocumented)
-export type ErrorBoundaryProps = {
+export type ErrorBoundaryProps = React_2.PropsWithChildren<{
   slackChannel?: string | SlackChannel;
   onError?: (error: Error, errorInfo: string) => null;
-};
+}>;
 
 // Warning: (ae-forgotten-export) The symbol "IErrorPageProps" needs to be exported by the entry point index.d.ts
 //

packages/core-components/src/components/Link/Link.test.tsx

@@ -134,7 +134,9 @@ describe('<Link />', () => {
   });
 
   describe('useResolvedPath', () => {
-    const wrapper: WrapperComponent<{}> = ({ children }) => {
+    const wrapper: WrapperComponent<React.PropsWithChildren<{}>> = ({
+      children,
+    }) => {
       const configApi = new ConfigReader({
         app: { baseUrl: 'http://localhost:3000/example' },
       });

packages/core-components/src/components/LogViewer/useLogViewerSelection.test.tsx

@@ -40,7 +40,7 @@ const lines = [
 describe('useLogViewerSelection', () => {
   it('should manage a selection', () => {
     const rendered = renderHook(() => useLogViewerSelection(lines), {
-      wrapper: ({ children }) => (
+      wrapper: ({ children }: React.PropsWithChildren<{}>) => (
         <TestApiProvider apis={[[errorApiRef, new MockErrorApi()]]}>
           {children}
         </TestApiProvider>

packages/core-components/src/layout/ErrorBoundary/ErrorBoundary.tsx

@@ -25,10 +25,10 @@ type SlackChannel = {
 };
 
 /** @public */
-export type ErrorBoundaryProps = {
+export type ErrorBoundaryProps = React.PropsWithChildren<{
   slackChannel?: string | SlackChannel;
   onError?: (error: Error, errorInfo: string) => null;
-};
+}>;
 
 type State = {
   error?: Error;

packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx

@@ -18,7 +18,7 @@ import { BackstageTheme } from '@backstage/theme';
 import Grid from '@material-ui/core/Grid';
 import { alpha, makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import { Link } from '../../components/Link';
 
 /** @public */
@@ -46,10 +46,10 @@ const useStyles = makeStyles<BackstageTheme>(
   { name: 'BackstageHeaderLabel' },
 );
 
-type HeaderLabelContentProps = {
+type HeaderLabelContentProps = PropsWithChildren<{
   value: React.ReactNode;
   className: string;
-};
+}>;
 
 const HeaderLabelContent = ({ value, className }: HeaderLabelContentProps) => {
   return (

packages/core-components/src/layout/HeaderTabs/HeaderTabs.test.tsx

@@ -55,18 +55,20 @@ describe('<HeaderTabs />', () => {
       },
     }));
 
-    const TextualBadge = React.forwardRef<HTMLSpanElement>((props, ref) => (
-      <Badge
-        classes={useStyles()}
-        overlap="rectangular"
-        color="secondary"
-        badgeContent="three new alarms"
-      >
-        <span ref={ref} {...props}>
-          {props.children}
-        </span>
-      </Badge>
-    ));
+    const TextualBadge = React.forwardRef<HTMLSpanElement>(
+      (props: React.PropsWithChildren<{}>, ref) => (
+        <Badge
+          classes={useStyles()}
+          overlap="rectangular"
+          color="secondary"
+          badgeContent="three new alarms"
+        >
+          <span ref={ref} {...props}>
+            {props.children}
+          </span>
+        </Badge>
+      ),
+    );
     const iconTab = [
       {
         id: 'icon-tab',

packages/core-plugin-api/src/extensions/PluginErrorBoundary.tsx

@@ -18,10 +18,10 @@ import React from 'react';
 import { AppContext } from '../app/types';
 import { BackstagePlugin } from '../plugin';
 
-type Props = {
+type Props = React.PropsWithChildren<{
   app: AppContext;
   plugin: BackstagePlugin;
-};
+}>;
 
 type State = { error: Error | undefined };
 

packages/core-plugin-api/src/plugin-options/usePluginOptions.test.tsx

@@ -38,7 +38,7 @@ describe('usePluginOptions', () => {
     });
 
     const rendered = renderHook(() => usePluginOptions(), {
-      wrapper: ({ children }) => (
+      wrapper: ({ children }: React.PropsWithChildren<{}>) => (
         <PluginProvider plugin={plugin}>{children}</PluginProvider>
       ),
     });

packages/core-plugin-api/src/routing/useRouteRef.test.tsx

@@ -36,7 +36,7 @@ describe('v1 consumer', () => {
     const routeRef = createRouteRef({ id: 'ref1' });
 
     const renderedHook = renderHook(() => useRouteRef(routeRef), {
-      wrapper: ({ children }) => (
+      wrapper: ({ children }: React.PropsWithChildren<{}>) => (
         <MemoryRouter initialEntries={['/my-page']} children={children} />
       ),
     });
@@ -60,7 +60,7 @@ describe('v1 consumer', () => {
     history.push('/my-page');
 
     const { rerender } = renderHook(() => useRouteRef(routeRef), {
-      wrapper: ({ children }) => (
+      wrapper: ({ children }: React.PropsWithChildren<{}>) => (
         <Router
           location={history.location}
           navigator={history}
@@ -86,7 +86,7 @@ describe('v1 consumer', () => {
     history.push('/my-page');
 
     const { rerender } = renderHook(() => useRouteRef(routeRef), {
-      wrapper: ({ children }) => (
+      wrapper: ({ children }: React.PropsWithChildren<{}>) => (
         <Router
           location={history.location}
           navigator={history}
@@ -112,7 +112,7 @@ describe('v1 consumer', () => {
     history.push('/my-page');
 
     const { rerender } = renderHook(() => useRouteRef(routeRef), {
-      wrapper: ({ children }) => (
+      wrapper: ({ children }: React.PropsWithChildren<{}>) => (
         <Router
           location={history.location}
           navigator={history}
@@ -138,7 +138,7 @@ describe('v1 consumer', () => {
     history.push('/my-page');
 
     const { rerender } = renderHook(() => useRouteRef(routeRef), {
-      wrapper: ({ children }) => (
+      wrapper: ({ children }: React.PropsWithChildren<{}>) => (
         <Router
           location={history.location}
           navigator={history}

packages/test-utils/api-report.md

@@ -26,6 +26,7 @@ import { JsonValue } from '@backstage/types';
 import { MatcherFunction } from '@testing-library/react';
 import { Observable } from '@backstage/types';
 import { PermissionApi } from '@backstage/plugin-permission-react';
+import { PropsWithChildren } from 'react';
 import { default as React_2 } from 'react';
 import { ReactElement } from 'react';
 import { ReactNode } from 'react';
@@ -192,7 +193,7 @@ export type MockStorageBucket = {
 
 // @public
 export function renderInTestApp(
-  Component: ComponentType | ReactNode,
+  Component: ComponentType<PropsWithChildren<{}>> | ReactNode,
   options?: TestAppOptions,
 ): Promise<RenderResult>;
 

packages/test-utils/src/testUtils/appWrappers.tsx

@@ -14,7 +14,12 @@
  * limitations under the License.
  */
 
-import React, { ComponentType, ReactNode, ReactElement } from 'react';
+import React, {
+  ComponentType,
+  ReactNode,
+  ReactElement,
+  PropsWithChildren,
+} from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { Route } from 'react-router-dom';
 import { UnifiedThemeProvider, themes } from '@backstage/theme';
@@ -226,7 +231,7 @@ export function wrapInTestApp(
  * @public
  */
 export async function renderInTestApp(
-  Component: ComponentType | ReactNode,
+  Component: ComponentType<PropsWithChildren<{}>> | ReactNode,
   options: TestAppOptions = {},
 ): Promise<RenderResult> {
   let wrappedElement: React.ReactElement;

packages/version-bridge/src/lib/VersionedContext.test.tsx

@@ -30,7 +30,7 @@ describe('VersionedContext', () => {
     const Context = createVersionedContext<ContextType>('test-context-1');
 
     const rendered = renderHook(() => useContext(Context), {
-      wrapper: ({ children }) => (
+      wrapper: ({ children }: React.PropsWithChildren<{}>) => (
         <Context.Provider
           value={createVersionedValueMap({ 1: '1v1', 2: '1v2' })}
         >
@@ -47,7 +47,7 @@ describe('VersionedContext', () => {
     const Context = createVersionedContext<ContextType>('test-context-2');
 
     const rendered = renderHook(() => useVersionedContext('test-context-2'), {
-      wrapper: ({ children }) => (
+      wrapper: ({ children }: React.PropsWithChildren<{}>) => (
         <Context.Provider
           value={createVersionedValueMap({ 1: '2v1', 2: '2v2' })}
         >

plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.test.tsx

@@ -30,7 +30,7 @@ import React, { FunctionComponent } from 'react';
 import { EntityRelationsGraph } from './EntityRelationsGraph';
 
 describe('<EntityRelationsGraph/>', () => {
-  let Wrapper: FunctionComponent;
+  let Wrapper: FunctionComponent<React.PropsWithChildren<{}>>;
   const entities: { [ref: string]: Entity } = {
     'b:d/c': {
       apiVersion: 'a',

plugins/catalog-react/src/hooks/useEntity.test.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import { renderHook } from '@testing-library/react-hooks';
 import {
   useEntity,
@@ -32,7 +32,9 @@ const entity = { metadata: { name: 'my-entity' }, kind: 'MyKind' } as Entity;
 describe('useEntity', () => {
   it('should throw if no entity is provided', async () => {
     const { result } = renderHook(() => useEntity(), {
-      wrapper: ({ children }) => <EntityProvider children={children} />,
+      wrapper: ({ children }: React.PropsWithChildren<{}>) => (
+        <EntityProvider children={children} />
+      ),
     });
 
     expect(result.error?.message).toMatch(/entity has not been loaded/);
@@ -40,7 +42,7 @@ describe('useEntity', () => {
 
   it('should provide an entity', async () => {
     const { result } = renderHook(() => useEntity(), {
-      wrapper: ({ children }) => (
+      wrapper: ({ children }: React.PropsWithChildren<{}>) => (
         <EntityProvider entity={entity} children={children} />
       ),
     });
@@ -52,7 +54,7 @@ describe('useEntity', () => {
     const analyticsSpy = new MockAnalyticsApi();
     const apis = TestApiRegistry.from([analyticsApiRef, analyticsSpy]);
     const { result } = renderHook(() => useAnalytics(), {
-      wrapper: ({ children }) => (
+      wrapper: ({ children }: React.PropsWithChildren<{}>) => (
         <ApiProvider apis={apis}>
           <EntityProvider entity={entity} children={children} />
         </ApiProvider>
@@ -70,7 +72,7 @@ describe('useEntity', () => {
 describe('useAsyncEntity', () => {
   it('should provide no entity', async () => {
     const { result } = renderHook(() => useAsyncEntity(), {
-      wrapper: ({ children }) => (
+      wrapper: ({ children }: React.PropsWithChildren<{}>) => (
         <AsyncEntityProvider loading={false} children={children} />
       ),
     });
@@ -84,7 +86,7 @@ describe('useAsyncEntity', () => {
   it('should provide an entity', async () => {
     const refresh = () => {};
     const { result } = renderHook(() => useAsyncEntity(), {
-      wrapper: ({ children }) => (
+      wrapper: ({ children }: React.PropsWithChildren<{}>) => (
         <AsyncEntityProvider
           loading={false}
           entity={entity}
@@ -103,7 +105,7 @@ describe('useAsyncEntity', () => {
   it('should provide an error', async () => {
     const error = new Error('oh no');
     const { result } = renderHook(() => useAsyncEntity(), {
-      wrapper: ({ children }) => (
+      wrapper: ({ children }: PropsWithChildren<{}>) => (
         <AsyncEntityProvider
           loading={false}
           error={error}
@@ -122,7 +124,7 @@ describe('useAsyncEntity', () => {
     const analyticsSpy = new MockAnalyticsApi();
     const apis = TestApiRegistry.from([analyticsApiRef, analyticsSpy]);
     const { result } = renderHook(() => useAnalytics(), {
-      wrapper: ({ children }) => (
+      wrapper: ({ children }: React.PropsWithChildren<{}>) => (
         <ApiProvider apis={apis}>
           <AsyncEntityProvider
             loading={false}
@@ -145,7 +147,7 @@ describe('useAsyncEntity', () => {
     const analyticsSpy = new MockAnalyticsApi();
     const apis = TestApiRegistry.from([analyticsApiRef, analyticsSpy]);
     const { result } = renderHook(() => useAnalytics(), {
-      wrapper: ({ children }) => (
+      wrapper: ({ children }: PropsWithChildren<{}>) => (
         <ApiProvider apis={apis}>
           <AsyncEntityProvider loading={false} children={children} />
         </ApiProvider>

plugins/catalog-react/src/hooks/useRelatedEntities.test.tsx

@@ -17,7 +17,7 @@
 import { Entity } from '@backstage/catalog-model';
 import { TestApiProvider } from '@backstage/test-utils';
 import { WrapperComponent, renderHook } from '@testing-library/react-hooks';
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import { catalogApiRef } from '../api';
 import { useRelatedEntities } from './useRelatedEntities';
 
@@ -50,7 +50,7 @@ describe('useRelatedEntities', () => {
     getEntitiesByRefs: jest.fn(),
   };
 
-  const wrapper: WrapperComponent<{}> = ({ children }) => {
+  const wrapper: WrapperComponent<PropsWithChildren<{}>> = ({ children }) => {
     return (
       <TestApiProvider apis={[[catalogApiRef, catalogApi]]}>
         {children}

plugins/github-pull-requests-board/src/components/Card/Card.tsx

@@ -31,7 +31,9 @@ type Props = {
   labels?: Label[];
 };
 
-const Card: FunctionComponent<Props> = (props: PropsWithChildren<Props>) => {
+const Card: FunctionComponent<PropsWithChildren<Props>> = (
+  props: React.PropsWithChildren<Props>,
+) => {
   const {
     title,
     createdAt,

plugins/github-pull-requests-board/src/components/InfoCardHeader/InfoCardHeader.tsx

@@ -21,7 +21,7 @@ type Props = {
   onRefresh: () => void;
 };
 
-const InfoCardHeader: FunctionComponent<Props> = (
+const InfoCardHeader: FunctionComponent<PropsWithChildren<Props>> = (
   props: PropsWithChildren<Props>,
 ) => {
   const { children, onRefresh } = props;

plugins/github-pull-requests-board/src/components/Wrapper/Wrapper.tsx

@@ -20,7 +20,9 @@ type Props = {
   fullscreen: boolean;
 };
 
-const Wrapper: FunctionComponent<Props> = (props: PropsWithChildren<Props>) => {
+const Wrapper: FunctionComponent<PropsWithChildren<Props>> = (
+  props: PropsWithChildren<Props>,
+) => {
   const { children, fullscreen } = props;
 
   return (

plugins/scaffolder-react/src/next/hooks/useTemplateSchema.test.tsx

@@ -50,7 +50,7 @@ describe('useTemplateSchema', () => {
     };
 
     const { result } = renderHook(() => useTemplateSchema(manifest), {
-      wrapper: ({ children }) => (
+      wrapper: ({ children }: React.PropsWithChildren<{}>) => (
         <TestApiProvider
           apis={[[featureFlagsApiRef, { isActive: () => false }]]}
         >
@@ -117,7 +117,7 @@ describe('useTemplateSchema', () => {
       };
 
       const { result } = renderHook(() => useTemplateSchema(manifest), {
-        wrapper: ({ children }) => (
+        wrapper: ({ children }: React.PropsWithChildren<{}>) => (
           <TestApiProvider
             apis={[[featureFlagsApiRef, { isActive: () => false }]]}
           >
@@ -161,7 +161,7 @@ describe('useTemplateSchema', () => {
       };
 
       const { result } = renderHook(() => useTemplateSchema(manifest), {
-        wrapper: ({ children }) => (
+        wrapper: ({ children }: React.PropsWithChildren<{}>) => (
           <TestApiProvider
             apis={[[featureFlagsApiRef, { isActive: () => true }]]}
           >
@@ -212,7 +212,7 @@ describe('useTemplateSchema', () => {
       };
 
       const { result } = renderHook(() => useTemplateSchema(manifest), {
-        wrapper: ({ children }) => (
+        wrapper: ({ children }: React.PropsWithChildren<{}>) => (
           <TestApiProvider
             apis={[[featureFlagsApiRef, { isActive: () => false }]]}
           >
@@ -250,7 +250,7 @@ describe('useTemplateSchema', () => {
       };
 
       const { result } = renderHook(() => useTemplateSchema(manifest), {
-        wrapper: ({ children }) => (
+        wrapper: ({ children }: React.PropsWithChildren<{}>) => (
           <TestApiProvider
             apis={[[featureFlagsApiRef, { isActive: () => false }]]}
           >

plugins/scaffolder-react/src/next/hooks/useTransformSchemaToProps.test.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import { renderHook } from '@testing-library/react-hooks';
 import { TestApiProvider } from '@backstage/test-utils';
 import { type ParsedTemplateSchema } from './useTemplateSchema';
@@ -39,7 +39,7 @@ describe('useTransformSchemaToProps', () => {
     const { result } = renderHook(
       () => useTransformSchemaToProps(step, { layouts }),
       {
-        wrapper: ({ children }) => (
+        wrapper: ({ children }: PropsWithChildren<{}>) => (
           <TestApiProvider apis={[]}>{children}</TestApiProvider>
         ),
       },

plugins/scaffolder-react/src/secrets/SecretsContext.test.tsx

@@ -24,7 +24,7 @@ describe('SecretsContext', () => {
         hook: useTemplateSecrets(),
       }),
       {
-        wrapper: ({ children }) => (
+        wrapper: ({ children }: React.PropsWithChildren<{}>) => (
           <SecretsContextProvider>{children}</SecretsContextProvider>
         ),
       },

plugins/search/src/components/SearchModal/useSearchModal.test.tsx

@@ -85,7 +85,7 @@ describe('useSearchModal', () => {
     const history = createMemoryHistory({ initialEntries: ['/'] });
 
     const rendered = renderHook(() => useSearchModal(true), {
-      wrapper: ({ children }) => (
+      wrapper: ({ children }: React.PropsWithChildren<{}>) => (
         <Router location={history.location} navigator={history}>
           {children}
         </Router>