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/gitops-profiles/src/components/ClusterList/ClusterList.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { FC, useState } from 'react';
+import React, { useState } from 'react';
 import {
   Content,
   ContentHeader,
@@ -33,7 +33,7 @@ import { useAsync } from 'react-use';
 import { gitOpsApiRef } from '../../api';
 import { Alert } from '@material-ui/lab';
 
-const ClusterList: FC<{}> = () => {
+const ClusterList = () => {
   const api = useApi(gitOpsApiRef);
   const githubAuth = useApi(githubAuthApiRef);
   const [githubUsername, setGithubUsername] = useState(String);

plugins/gitops-profiles/src/components/ClusterPage/ClusterPage.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, { FC, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   Content,
   Header,
@@ -30,7 +30,7 @@ import { useParams } from 'react-router-dom';
 import { gitOpsApiRef, Status } from '../../api';
 import { transformRunStatus } from '../ProfileCatalog';
 
-const ClusterPage: FC<{}> = () => {
+const ClusterPage = () => {
   const params = useParams() as { owner: string; repo: string };
 
   const [pollingLog, setPollingLog] = useState(true);

plugins/gitops-profiles/src/components/ClusterTable/ClusterTable.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 { Table, TableColumn } from '@backstage/core';
 import { Link } from '@material-ui/core';
 import { ClusterStatus } from '../../api';
@@ -61,7 +61,7 @@ const columns: TableColumn[] = [
 type ClusterTableProps = {
   components: ClusterStatus[];
 };
-const ClusterTable: FC<ClusterTableProps> = ({ components }) => {
+const ClusterTable = ({ components }: ClusterTableProps) => {
   return (
     <Table columns={columns} options={{ paging: false }} data={components} />
   );

plugins/gitops-profiles/src/components/ClusterTemplateCard/ClusterTemplateCard.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 { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
 import Card from '@material-ui/core/Card';
 import CardHeader from '@material-ui/core/CardHeader';
@@ -62,7 +62,7 @@ interface Props {
   activeIndex: number;
 }
 
-const ClusterTemplateCard: FC<Props> = props => {
+const ClusterTemplateCard = (props: Props) => {
   const classes = useStyles();
 
   const handleSelect = () => {

plugins/gitops-profiles/src/components/ClusterTemplateCardList/ClusterTemplateCardList.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { FC } from 'react';
+import React from 'react';
 import { Grid } from '@material-ui/core';
 import ClusterTemplateCard from '../ClusterTemplateCard';
 
@@ -27,7 +27,7 @@ interface Props {
   }[];
 }
 
-const ClusterTemplateCardList: FC<Props> = props => {
+const ClusterTemplateCardList = (props: Props) => {
   const [activeIndex, setActiveIndex] = React.useState(-1);
 
   const handleClicked = (index: number, repository: string) => {

plugins/gitops-profiles/src/components/ProfileCard/ProfileCard.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { FC, useState } from 'react';
+import React, { useState } from 'react';
 import {
   Avatar,
   Card,
@@ -66,7 +66,7 @@ interface Props {
   selections: Set<number>;
 }
 
-const ProfileCard: FC<Props> = props => {
+const ProfileCard = (props: Props) => {
   const [selection, setSelection] = useState(false);
 
   const handleSelect = () => {

plugins/gitops-profiles/src/components/ProfileCardList/ProfileCardList.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, { FC, useState } from 'react';
+import React, { useState } from 'react';
 import { Grid } from '@material-ui/core';
 import ProfileCard from '../ProfileCard';
 
@@ -26,7 +26,7 @@ interface Props {
   }[];
 }
 
-const ProfileCardList: FC<Props> = props => {
+const ProfileCardList = (props: Props) => {
   const [selections, setSelections] = useState<Set<number>>(new Set<number>());
   const [profiles, setProfiles] = useState<Set<string>>(new Set<string>());
 

plugins/gitops-profiles/src/components/ProfileCatalog/ProfileCatalog.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { FC, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   Header,
   Page,
@@ -79,7 +79,7 @@ export const transformRunStatus = (x: Status[]) => {
   });
 };
 
-const ProfileCatalog: FC<{}> = () => {
+const ProfileCatalog = () => {
   // TODO: get data from REST API
   const [clusterTemplates] = React.useState([
     {