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
This commit is contained in:
Askar
2020-12-10 11:23:29 +01:00
committed by GitHub
parent 2cc444f16c
commit a6a2ca6204
96 changed files with 316 additions and 290 deletions
@@ -26,7 +26,7 @@ import { makeStyles } from '@material-ui/core/styles';
import Cancel from '@material-ui/icons/Cancel';
import MoreVert from '@material-ui/icons/MoreVert';
import SwapHoriz from '@material-ui/icons/SwapHoriz';
import React, { FC, useState } from 'react';
import React, { useState } from 'react';
// TODO(freben): It should probably instead be the case that Header sets the theme text color to white inside itself unconditionally instead
const useStyles = makeStyles({
@@ -39,7 +39,7 @@ type Props = {
onUnregisterEntity: () => void;
};
export const EntityContextMenu: FC<Props> = ({ onUnregisterEntity }) => {
export const EntityContextMenu = ({ onUnregisterEntity }: Props) => {
const [anchorEl, setAnchorEl] = useState<HTMLButtonElement>();
const classes = useStyles();
@@ -39,7 +39,7 @@ export const favouriteEntityIcon = (isStarred: boolean) =>
* IconButton for showing if a current entity is starred and adding/removing it from the favourite entities
* @param props MaterialUI IconButton props extended by required `entity` prop
*/
export const FavouriteEntity: React.FC<Props> = props => {
export const FavouriteEntity = (props: Props) => {
const { toggleStarredEntity, isStarredEntity } = useStarredEntities();
const isStarred = isStarredEntity(props.entity);
return (
@@ -28,7 +28,7 @@ import {
useTheme,
} from '@material-ui/core';
import Alert from '@material-ui/lab/Alert';
import React, { FC } from 'react';
import React from 'react';
import { useAsync } from 'react-use';
import { AsyncState } from 'react-use/lib/useAsync';
import { catalogApiRef } from '../../plugin';
@@ -54,12 +54,12 @@ function useColocatedEntities(entity: Entity): AsyncState<Entity[]> {
}, [catalogApi, entity]);
}
export const UnregisterEntityDialog: FC<Props> = ({
export const UnregisterEntityDialog = ({
open,
onConfirm,
onClose,
entity,
}) => {
}: Props) => {
const { value: entities, loading, error } = useColocatedEntities(entity);
const theme = useTheme();
const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import React from 'react';
import React, { PropsWithChildren } from 'react';
import { renderHook, act } from '@testing-library/react-hooks';
import { useStarredEntities } from './useStarredEntities';
import {
@@ -47,7 +47,7 @@ describe('useStarredEntities', () => {
},
};
const wrapper: React.FC<{}> = ({ children }) => {
const wrapper = ({ children }: PropsWithChildren<{}>) => {
return (
<ApiProvider apis={ApiRegistry.with(storageApiRef, mockStorage)}>
{children}
@@ -25,7 +25,7 @@ import { makeStyles } from '@material-ui/core/styles';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import { BuildStepAction } from 'circleci-api';
import moment from 'moment';
import React, { FC, Suspense, useEffect, useState } from 'react';
import React, { Suspense, useEffect, useState } from 'react';
const LazyLog = React.lazy(() => import('react-lazylog/build/LazyLog'));
moment.relativeTimeThreshold('ss', 0);
@@ -40,12 +40,17 @@ const useStyles = makeStyles({
},
});
export const ActionOutput: FC<{
export const ActionOutput = ({
url,
name,
className,
action,
}: {
url: string;
name: string;
className?: string;
action: BuildStepAction;
}> = ({ url, name, className, action }) => {
}) => {
const classes = useStyles();
const [messages, setMessages] = useState([]);
+2 -2
View File
@@ -14,11 +14,11 @@
* limitations under the License.
*/
import React, { FC } from 'react';
import React from 'react';
import { createRouteRef } from '@backstage/core';
import { SvgIcon, SvgIconProps } from '@material-ui/core';
const CircleCIIcon: FC<SvgIconProps> = props => (
const CircleCIIcon = (props: SvgIconProps) => (
<SvgIcon
{...props}
enableBackground="new 0 0 200 200"
@@ -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 { Link, Typography, Box, IconButton, Tooltip } from '@material-ui/core';
import RetryIcon from '@material-ui/icons/Replay';
import GoogleIcon from '@material-ui/icons/CloudCircle';
@@ -124,7 +124,7 @@ type Props = {
onChangePageSize: (pageSize: number) => void;
};
export const WorkflowRunsTableView: FC<Props> = ({
export const WorkflowRunsTableView = ({
projectName,
loading,
pageSize,
@@ -134,7 +134,7 @@ export const WorkflowRunsTableView: FC<Props> = ({
onChangePage,
onChangePageSize,
total,
}) => {
}: Props) => {
return (
<Table
isLoading={loading}
@@ -13,7 +13,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React, { FC, Fragment } from 'react';
import React, { Fragment } from 'react';
import { Paper, Divider } from '@material-ui/core';
import { AlertActionCard } from './AlertActionCard';
import { Alert } from '../../types';
@@ -22,7 +22,7 @@ type AlertActionCardList = {
alerts: Array<Alert>;
};
export const AlertActionCardList: FC<AlertActionCardList> = ({ alerts }) => (
export const AlertActionCardList = ({ alerts }: AlertActionCardList) => (
<Paper>
{alerts.map((alert, index) => (
<Fragment key={`alert-${index}`}>
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import React, { FC } from 'react';
import React from 'react';
import classNames from 'classnames';
import {
Button,
@@ -80,7 +80,7 @@ type Props = {
objectFit?: 'cover' | 'contain';
};
const ExploreCard: FC<Props> = ({ card, objectFit }) => {
const ExploreCard = ({ card, objectFit }: Props) => {
const classes = useStyles();
const { title, description, url, image, lifecycle, newsTag, tags } = card;
@@ -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 {
Link,
Typography,
@@ -114,7 +114,7 @@ type Props = {
onChangePageSize: (pageSize: number) => void;
};
export const WorkflowRunsTableView: FC<Props> = ({
export const WorkflowRunsTableView = ({
projectName,
loading,
pageSize,
@@ -124,7 +124,7 @@ export const WorkflowRunsTableView: FC<Props> = ({
onChangePage,
onChangePageSize,
total,
}) => {
}: Props) => {
return (
<Table
isLoading={loading}
@@ -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);
@@ -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);
@@ -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} />
);
@@ -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 = () => {
@@ -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) => {
@@ -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 = () => {
@@ -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>());
@@ -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([
{
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import React, { FC, useState, Suspense } from 'react';
import React, { useState, Suspense } from 'react';
import { Tabs, Tab, makeStyles, Typography, Divider } from '@material-ui/core';
import 'graphiql/graphiql.css';
import { StorageBucket } from '../../lib/storage';
@@ -47,7 +47,7 @@ type GraphiQLBrowserProps = {
endpoints: GraphQLEndpoint[];
};
export const GraphiQLBrowser: FC<GraphiQLBrowserProps> = ({ endpoints }) => {
export const GraphiQLBrowser = ({ endpoints }: GraphiQLBrowserProps) => {
const classes = useStyles();
const [tabIndex, setTabIndex] = useState(0);
@@ -22,7 +22,7 @@ import {
} from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import React, { FC, useEffect } from 'react';
import React, { useEffect } from 'react';
const useStyles = makeStyles({
accordionDetails: {
@@ -35,12 +35,14 @@ const useStyles = makeStyles({
},
});
export const ActionOutput: FC<{
type ActionOutputProps = {
url: string;
name: string;
className?: string;
action: any;
}> = ({ url, name, className }) => {
};
export const ActionOutput = ({ url, name, className }: ActionOutputProps) => {
const classes = useStyles();
useEffect(() => {}, [url]);
@@ -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 { Box, IconButton, Link, Typography, Tooltip } from '@material-ui/core';
import RetryIcon from '@material-ui/icons/Replay';
import GitHubIcon from '@material-ui/icons/GitHub';
@@ -201,7 +201,7 @@ type Props = {
onChangePageSize: (pageSize: number) => void;
};
export const CITableView: FC<Props> = ({
export const CITableView = ({
projectName,
loading,
pageSize,
@@ -211,7 +211,7 @@ export const CITableView: FC<Props> = ({
onChangePage,
onChangePageSize,
total,
}) => {
}: Props) => {
return (
<Table
isLoading={loading}
+1 -1
View File
@@ -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"
},
@@ -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);
@@ -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);
@@ -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 />;
@@ -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();
@@ -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;
@@ -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();
@@ -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(
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import React, { FC } from 'react';
import React from 'react';
import { Grid } from '@material-ui/core';
import {
Header,
@@ -26,7 +26,7 @@ import {
} from '@backstage/core';
import NewRelicFetchComponent from '../NewRelicFetchComponent';
const NewRelicComponent: FC<{}> = () => (
const NewRelicComponent = () => (
<Page themeId="tool">
<Header title="New Relic">
<HeaderLabel label="Owner" value="Engineering" />
@@ -14,15 +14,13 @@
* limitations under the License.
*/
import React, { FC } from 'react';
import React from 'react';
import { Progress, Table, TableColumn, useApi } from '@backstage/core';
import Alert from '@material-ui/lab/Alert';
import { useAsync } from 'react-use';
import { newRelicApiRef, NewRelicApplications } from '../../api';
export const NewRelicAPMTable: FC<NewRelicApplications> = ({
applications,
}) => {
export const NewRelicAPMTable = ({ applications }: NewRelicApplications) => {
const columns: TableColumn[] = [
{ title: 'Application', field: 'name' },
{ title: 'Response Time', field: 'responseTime' },
@@ -61,7 +59,7 @@ export const NewRelicAPMTable: FC<NewRelicApplications> = ({
);
};
const NewRelicFetchComponent: FC<{}> = () => {
const NewRelicFetchComponent = () => {
const api = useApi(newRelicApiRef);
const { value, loading, error } = useAsync(async () => {
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import React, { FC } from 'react';
import React from 'react';
import { SentryIssue } from '../../api';
import { Link, Typography } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
@@ -42,9 +42,7 @@ const useStyles = makeStyles<BackstageTheme>(theme => ({
},
}));
export const ErrorCell: FC<{ sentryIssue: SentryIssue }> = ({
sentryIssue,
}) => {
export const ErrorCell = ({ sentryIssue }: { sentryIssue: SentryIssue }) => {
const classes = useStyles();
return (
<div className={classes.root}>
@@ -14,13 +14,11 @@
* limitations under the License.
*/
import React, { FC } from 'react';
import React from 'react';
import { SentryIssue } from '../../api';
import { Sparklines, SparklinesBars } from 'react-sparklines';
export const ErrorGraph: FC<{ sentryIssue: SentryIssue }> = ({
sentryIssue,
}) => {
export const ErrorGraph = ({ sentryIssue }: { sentryIssue: SentryIssue }) => {
const data =
'12h' in sentryIssue.stats
? sentryIssue.stats['12h']