remove React's FC type from codebase (#3527)

* WIP-packages: remove React's FC type from codebase

* remove FC from other directories

* fix build failures

* add types to required packages

plugins/lighthouse/package.json

@@ -41,7 +41,6 @@
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.45",
     "@testing-library/react-hooks": "^3.4.2",
-    "@types/react": "^16.9",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-router-dom": "6.0.0-beta.0",
@@ -56,6 +55,7 @@
     "@testing-library/user-event": "^12.0.7",
     "@types/jest": "^26.0.7",
     "@types/node": "^12.0.0",
+    "@types/react": "^16.9",
     "cross-fetch": "^3.0.6",
     "msw": "^0.21.2"
   },

plugins/lighthouse/src/components/AuditList/AuditListTable.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, { FC, useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Table, TableColumn, TrendLine, useApi } from '@backstage/core';
 import { Website, lighthouseApiRef } from '../../api';
 import { useInterval } from 'react-use';
@@ -52,7 +52,7 @@ const columns: TableColumn[] = [
   },
 ];
 
-export const AuditListTable: FC<{ items: Website[] }> = ({ items }) => {
+export const AuditListTable = ({ items }: { items: Website[] }) => {
   const [websiteState, setWebsiteState] = useState(items);
   const lighthouseApi = useApi(lighthouseApiRef);
 

plugins/lighthouse/src/components/AuditList/index.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, { useState, useMemo, FC, ReactNode } from 'react';
+import React, { useState, useMemo, ReactNode } from 'react';
 import { useLocalStorage, useAsync } from 'react-use';
 import { useNavigate } from 'react-router-dom';
 import { Grid, Button } from '@material-ui/core';
@@ -39,7 +39,7 @@ import { createAuditRouteRef } from '../../plugin';
 
 export const LIMIT = 10;
 
-const AuditList: FC<{}> = () => {
+const AuditList = () => {
   const [dismissedStored] = useLocalStorage(LIGHTHOUSE_INTRO_LOCAL_STORAGE);
   const [dismissed, setDismissed] = useState(dismissedStored);
 

plugins/lighthouse/src/components/AuditStatusIcon/index.tsx

@@ -13,12 +13,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, { FC } from 'react';
+import React from 'react';
 import { StatusPending, StatusError, StatusOK } from '@backstage/core';
 
 import { Audit } from '../../api';
 
-const AuditStatusIcon: FC<{ audit: Audit }> = ({ audit }) => {
+const AuditStatusIcon = ({ audit }: { audit: Audit }) => {
   if (audit.status === 'FAILED') return <StatusError />;
   if (audit.status === 'COMPLETED') return <StatusOK />;
   return <StatusPending />;

plugins/lighthouse/src/components/AuditView/index.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, { useState, useEffect, ReactNode, FC } from 'react';
+import React, { useState, useEffect, ReactNode } from 'react';
 import {
   Link,
   useParams,
@@ -65,10 +65,7 @@ interface AuditLinkListProps {
   audits?: Audit[];
   selectedId: string;
 }
-const AuditLinkList: FC<AuditLinkListProps> = ({
-  audits = [],
-  selectedId,
-}: AuditLinkListProps) => (
+const AuditLinkList = ({ audits = [], selectedId }: AuditLinkListProps) => (
   <List
     data-testid="audit-sidebar"
     component="nav"
@@ -97,7 +94,7 @@ const AuditLinkList: FC<AuditLinkListProps> = ({
   </List>
 );
 
-const AuditView: FC<{ audit?: Audit }> = ({ audit }: { audit?: Audit }) => {
+const AuditView = ({ audit }: { audit?: Audit }) => {
   const classes = useStyles();
   const params = useParams() as { id: string };
   const { url: lighthouseUrl } = useApi(lighthouseApiRef);
@@ -123,7 +120,7 @@ const AuditView: FC<{ audit?: Audit }> = ({ audit }: { audit?: Audit }) => {
   );
 };
 
-export const AuditViewContent: FC<{}> = () => {
+export const AuditViewContent = () => {
   const lighthouseApi = useApi(lighthouseApiRef);
   const params = useParams() as { id: string };
   const classes = useStyles();

plugins/lighthouse/src/components/Cards/LastLighthouseAuditCard.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, { FC } from 'react';
+import React from 'react';
 import { Audit, AuditCompleted, LighthouseCategoryId } from '../../api';
 import {
   InfoCard,
@@ -26,7 +26,7 @@ import {
 import { useWebsiteForEntity } from '../../hooks/useWebsiteForEntity';
 import AuditStatusIcon from '../AuditStatusIcon';
 
-const LighthouseCategoryScoreStatus: FC<{ score: number }> = ({ score }) => {
+const LighthouseCategoryScoreStatus = ({ score }: { score: number }) => {
   const scoreAsPercentage = score * 100;
   switch (true) {
     case scoreAsPercentage >= 90:
@@ -55,16 +55,19 @@ const LighthouseCategoryScoreStatus: FC<{ score: number }> = ({ score }) => {
   }
 };
 
-const LighthouseAuditStatus: FC<{ audit: Audit }> = ({ audit }) => (
+const LighthouseAuditStatus = ({ audit }: { audit: Audit }) => (
   <>
     <AuditStatusIcon audit={audit} />
     {audit.status.toUpperCase()}
   </>
 );
 
-const LighthouseAuditSummary: FC<{ audit: Audit; dense?: boolean }> = ({
+const LighthouseAuditSummary = ({
   audit,
   dense = false,
+}: {
+  audit: Audit;
+  dense?: boolean;
 }) => {
   const { url } = audit;
   const flattenedCategoryData: Record<string, React.ReactNode> = {};
@@ -88,10 +91,13 @@ const LighthouseAuditSummary: FC<{ audit: Audit; dense?: boolean }> = ({
   return <StructuredMetadataTable metadata={tableData} dense={dense} />;
 };
 
-export const LastLighthouseAuditCard: FC<{
+export const LastLighthouseAuditCard = ({
+  dense = false,
+  variant,
+}: {
   dense?: boolean;
   variant?: string;
-}> = ({ dense = false, variant }) => {
+}) => {
   const { value: website, loading, error } = useWebsiteForEntity();
 
   let content;

plugins/lighthouse/src/components/CreateAudit/index.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, { useState, useCallback, FC } from 'react';
+import React, { useState, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import {
   makeStyles,
@@ -63,7 +63,7 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-export const CreateAuditContent: FC<{}> = () => {
+export const CreateAuditContent = () => {
   const errorApi = useApi(errorApiRef);
   const lighthouseApi = useApi(lighthouseApiRef);
   const classes = useStyles();

plugins/lighthouse/src/hooks/useWebsiteForEntity.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 { ApiProvider, ApiRegistry, errorApiRef } from '@backstage/core-api';
 import { lighthouseApiRef, WebsiteListResponse } from '../api';
@@ -51,7 +51,7 @@ describe('useWebsiteForEntity', () => {
     },
   };
 
-  const wrapper: React.FC<{}> = ({ children }) => {
+  const wrapper = ({ children }: PropsWithChildren<{}>) => {
     return (
       <ApiProvider
         apis={ApiRegistry.with(errorApiRef, mockErrorApi).with(