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:
@@ -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}
|
||||
|
||||
+8
-3
@@ -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([]);
|
||||
|
||||
@@ -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 = () => {
|
||||
|
||||
+2
-2
@@ -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}
|
||||
|
||||
@@ -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']
|
||||
|
||||
Reference in New Issue
Block a user