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

react 18 props with children upgrade

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>