paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 47 Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files
contrib/docs/tutorials/quickstart-app-plugin/ExampleComponent.md
+2 -2
View File
@@ -3,7 +3,7 @@
ExampleComponent.tsx reference
```tsx
import React, { FC } from 'react';
import React from 'react';
import { Typography, Grid } from '@material-ui/core';
import {
InfoCard,
@@ -18,7 +18,7 @@ import {
import { useApi } from '@backstage/core-api';
import ExampleFetchComponent from '../ExampleFetchComponent';
const ExampleComponent: FC<{}> = () => {
const ExampleComponent = () => {
const identityApi = useApi(identityApiRef);
const userId = identityApi.getUserId();
const profile = identityApi.getProfile();
contrib/docs/tutorials/quickstart-app-plugin/ExampleFetchComponent.md
+3 -3
View File
@@ -3,7 +3,7 @@
ExampleFetchComponent.tsx reference
```tsx
import React, { FC } from 'react';
import React from 'react';
import { useAsync } from 'react-use';
import Alert from '@material-ui/lab/Alert';
import {
@@ -57,7 +57,7 @@ type DenseTableProps = {
viewer: Viewer;
};
export const DenseTable: FC<DenseTableProps> = ({ viewer }) => {
export const DenseTable = ({ viewer }: DenseTableProps) => {
const columns: TableColumn[] = [
{ title: 'Name', field: 'name' },
{ title: 'Created', field: 'createdAt' },
@@ -76,7 +76,7 @@ export const DenseTable: FC<DenseTableProps> = ({ viewer }) => {
);
};
const ExampleFetchComponent: FC<{}> = () => {
const ExampleFetchComponent = () => {
const auth = useApi(githubAuthApiRef);
const { value, loading, error } = useAsync(async (): Promise<any> => {
docs/api/utility-apis.md
+2 -2
View File
@@ -33,10 +33,10 @@ hook exported by `@backstage/core`, or the `withApis` HOC if you prefer class
components. For example, the `ErrorApi` can be accessed like this:
```tsx
import React, { FC } from 'react';
import React from 'react';
import { useApi, errorApiRef } from '@backstage/core';
export const MyComponent: FC<{}> = () => {
export const MyComponent = () => {
const errorApi = useApi(errorApiRef);
// Signal to the app that something went wrong, and display the error to the user.
docs/reference/createPlugin-feature-flags.md
+1 -1
View File
@@ -27,7 +27,7 @@ To inspect the state of a feature flag inside your plugin, you can use the
`FeatureFlagsApi`, accessed via the `featureFlagsApiRef`. For example:
```tsx
import React, { FC } from 'react';
import React from 'react';
import { Button } from '@material-ui/core';
import { featureFlagsApiRef, useApi } from '@backstage/core';
docs/tutorials/quickstart-app-plugin.md
+5 -5
View File
@@ -81,13 +81,13 @@ import { useApi } from '@backstage/core-api';
_from inline:_
```tsx
const ExampleComponent: FC<{}> = () => ( ... )
const ExampleComponent = () => ( ... )
```
_to block:_
```tsx
const ExampleComponent: FC<{}> = () => {
const ExampleComponent = () => {
return (
...
@@ -135,7 +135,7 @@ changes, let's start by wiping this component clean.
1. Replace everything in the file with the following:
```tsx
import React, { FC } from 'react';
import React from 'react';
import { useAsync } from 'react-use';
import Alert from '@material-ui/lab/Alert';
import {
@@ -147,7 +147,7 @@ import {
import { useApi } from '@backstage/core-api';
import { graphql } from '@octokit/graphql';
const ExampleFetchComponent: FC<{}> = () => {
const ExampleFetchComponent = () => {
return <div>Nothing to see yet</div>;
};
@@ -223,7 +223,7 @@ type DenseTableProps = {
viewer: Viewer;
};
export const DenseTable: FC<DenseTableProps> = ({ viewer }) => {
export const DenseTable = ({ viewer }: DenseTableProps) => {
const columns: TableColumn[] = [
{ title: 'Name', field: 'name' },
{ title: 'Created', field: 'createdAt' },
packages/app/src/App.tsx
+2 -2
View File
@@ -21,7 +21,7 @@ import {
SignInPage,
createRouteRef,
} from '@backstage/core';
import React, { FC } from 'react';
import React from 'react';
import Root from './components/Root';
import * as plugins from './plugins';
import { apis } from './apis';
@@ -92,7 +92,7 @@ const AppRoutes = () => (
</Routes>
);
const App: FC<{}> = () => (
const App = () => (
<AppProvider>
<AlertDisplay />
<OAuthRequestDialog />
packages/app/src/components/Root/LogoFull.tsx
+2 -2
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import React, { FC } from 'react';
import React from 'react';
import { makeStyles } from '@material-ui/core';
const useStyles = makeStyles({
@@ -26,7 +26,7 @@ const useStyles = makeStyles({
fill: '#7df3e1',
},
});
const LogoFull: FC<{}> = () => {
const LogoFull = () => {
const classes = useStyles();
return (
packages/app/src/components/Root/LogoIcon.tsx
+2 -2
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import React, { FC } from 'react';
import React from 'react';
import { makeStyles } from '@material-ui/core';
const useStyles = makeStyles({
@@ -27,7 +27,7 @@ const useStyles = makeStyles({
},
});
const LogoIcon: FC<{}> = () => {
const LogoIcon = () => {
const classes = useStyles();
return (
packages/app/src/components/Root/Root.tsx
+3 -8
View File
@@ -14,8 +14,7 @@
* limitations under the License.
*/
import React, { FC, useContext } from 'react';
import PropTypes from 'prop-types';
import React, { useContext, PropsWithChildren } from 'react';
import { Link, makeStyles } from '@material-ui/core';
import HomeIcon from '@material-ui/icons/Home';
import ExtensionIcon from '@material-ui/icons/Extension';
@@ -55,7 +54,7 @@ const useSidebarLogoStyles = makeStyles({
},
});
const SidebarLogo: FC<{}> = () => {
const SidebarLogo = () => {
const classes = useSidebarLogoStyles();
const { isOpen } = useContext(SidebarContext);
@@ -73,7 +72,7 @@ const SidebarLogo: FC<{}> = () => {
);
};
const Root: FC<{}> = ({ children }) => (
const Root = ({ children }: PropsWithChildren<{}>) => (
<SidebarPage>
<Sidebar>
<SidebarLogo />
@@ -102,8 +101,4 @@ const Root: FC<{}> = ({ children }) => (
</SidebarPage>
);
Root.propTypes = {
children: PropTypes.node,
};
export default Root;
packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs
+2 -2
View File
@@ -1,4 +1,4 @@
import React, { FC } from 'react';
import React from 'react';
import { Typography, Grid } from '@material-ui/core';
import {
InfoCard,
@@ -11,7 +11,7 @@ import {
} from '@backstage/core';
import ExampleFetchComponent from '../ExampleFetchComponent';
const ExampleComponent: FC<{}> = () => (
const ExampleComponent = () => (
<Page themeId="tool">
<Header title="Welcome to {{ id }}!" subtitle="Optional subtitle">
<HeaderLabel label="Owner" value="Team X" />
packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs
+3 -3
View File
@@ -1,4 +1,4 @@
import React, { FC } from 'react';
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { Table, TableColumn, Progress } from '@backstage/core';
import Alert from '@material-ui/lab/Alert';
@@ -38,7 +38,7 @@ type DenseTableProps = {
users: User[];
};
export const DenseTable: FC<DenseTableProps> = ({ users }) => {
export const DenseTable = ({ users }: DenseTableProps) => {
const classes = useStyles();
const columns: TableColumn[] = [
@@ -73,7 +73,7 @@ export const DenseTable: FC<DenseTableProps> = ({ users }) => {
);
};
const ExampleFetchComponent: FC<{}> = () => {
const ExampleFetchComponent = () => {
const { value, loading, error } = useAsync(async (): Promise<User[]> => {
const response = await fetch('https://randomuser.me/api/?results=20');
const data = await response.json();
packages/core-api/package.json
+1
View File
@@ -35,6 +35,7 @@
"@material-ui/core": "^4.11.0",
"@material-ui/icons": "^4.9.1",
"@types/react": "^16.9",
"@types/prop-types": "^15.7.3",
"prop-types": "^15.7.2",
"react": "^16.12.0",
"react-router-dom": "6.0.0-beta.0",
packages/core-api/src/apis/system/ApiProvider.tsx
+11 -3
View File
@@ -14,7 +14,12 @@
* limitations under the License.
*/
import React, { FC, createContext, useContext, ReactNode } from 'react';
import React, {
createContext,
useContext,
ReactNode,
PropsWithChildren,
} from 'react';
import PropTypes from 'prop-types';
import { ApiRef, ApiHolder, TypesToApiRefs } from './types';
import { ApiAggregator } from './ApiAggregator';
@@ -26,7 +31,10 @@ type ApiProviderProps = {
const Context = createContext<ApiHolder | undefined>(undefined);
export const ApiProvider: FC<ApiProviderProps> = ({ apis, children }) => {
export const ApiProvider = ({
apis,
children,
}: PropsWithChildren<ApiProviderProps>) => {
const parentHolder = useContext(Context);
const holder = parentHolder ? new ApiAggregator(apis, parentHolder) : apis;
@@ -62,7 +70,7 @@ export function withApis<T>(apis: TypesToApiRefs<T>) {
return function withApisWrapper<P extends T>(
WrappedComponent: React.ComponentType<P>,
) {
const Hoc: FC<Omit<P, keyof T>> = props => {
const Hoc = (props: PropsWithChildren<Omit<P, keyof T>>) => {
const apiHolder = useContext(Context);
if (!apiHolder) {
packages/core-api/src/app/App.tsx
+8 -5
View File
@@ -15,10 +15,10 @@
*/
import React, {
ComponentType,
FC,
useMemo,
useState,
ReactElement,
PropsWithChildren,
} from 'react';
import { Route, Routes, Navigate } from 'react-router-dom';
import { AppContextProvider } from './AppContext';
@@ -196,7 +196,7 @@ export class PrivateAppImpl implements BackstageApp {
}
getProvider(): ComponentType<{}> {
const Provider: FC<{}> = ({ children }) => {
const Provider = ({ children }: PropsWithChildren<{}>) => {
const appThemeApi = useMemo(
() => AppThemeSelector.createWithStorage(this.themes),
[],
@@ -233,10 +233,13 @@ export class PrivateAppImpl implements BackstageApp {
} = this.components;
// This wraps the sign-in page and waits for sign-in to be completed before rendering the app
const SignInPageWrapper: FC<{
const SignInPageWrapper = ({
component: Component,
children,
}: {
component: ComponentType<SignInPageProps>;
children: ReactElement;
}> = ({ component: Component, children }) => {
}) => {
const [result, setResult] = useState<SignInResult>();
if (result) {
@@ -247,7 +250,7 @@ export class PrivateAppImpl implements BackstageApp {
return <Component onResult={setResult} />;
};
const AppRouter: FC<{}> = ({ children }) => {
const AppRouter = ({ children }: PropsWithChildren<{}>) => {
const configApi = useApi(configApiRef);
let { pathname } = new URL(
packages/core-api/src/app/AppContext.tsx
+5 -2
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import React, { createContext, useContext, FC } from 'react';
import React, { createContext, PropsWithChildren, useContext } from 'react';
import { BackstageApp } from './types';
const Context = createContext<BackstageApp | undefined>(undefined);
@@ -23,7 +23,10 @@ type Props = {
app: BackstageApp;
};
export const AppContextProvider: FC<Props> = ({ app, children }) => (
export const AppContextProvider = ({
app,
children,
}: PropsWithChildren<Props>) => (
<Context.Provider value={app} children={children} />
);
packages/core-api/src/app/AppThemeProvider.tsx
+3 -3
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import React, { FC, useMemo, useEffect, useState } from 'react';
import React, { useMemo, useEffect, useState, PropsWithChildren } from 'react';
import { ThemeProvider, CssBaseline } from '@material-ui/core';
import { useApi, appThemeApiRef, AppTheme } from '../apis';
import { useObservable } from 'react-use';
@@ -68,7 +68,7 @@ const useShouldPreferDarkTheme = () => {
return shouldPreferDark;
};
export const AppThemeProvider: FC<{}> = ({ children }) => {
export function AppThemeProvider({ children }: PropsWithChildren<{}>) {
const appThemeApi = useApi(appThemeApiRef);
const themeId = useObservable(
appThemeApi.activeThemeId$(),
@@ -94,4 +94,4 @@ export const AppThemeProvider: FC<{}> = ({ children }) => {
<CssBaseline>{children}</CssBaseline>
</ThemeProvider>
);
};
}
packages/core-api/src/icons/icons.tsx
+2 -2
View File
@@ -17,7 +17,7 @@
import { SvgIconProps } from '@material-ui/core';
import PeopleIcon from '@material-ui/icons/People';
import PersonIcon from '@material-ui/icons/Person';
import React, { FC } from 'react';
import React from 'react';
import { useApp } from '../app/AppContext';
import { IconComponent, SystemIconKey, SystemIcons } from './types';
@@ -27,7 +27,7 @@ export const defaultSystemIcons: SystemIcons = {
};
const overridableSystemIcon = (key: SystemIconKey): IconComponent => {
const Component: FC<SvgIconProps> = props => {
const Component = (props: SvgIconProps) => {
const app = useApp();
const Icon = app.getSystemIcon(key);
return <Icon {...props} />;
packages/core/package.json
+1
View File
@@ -38,6 +38,7 @@
"@types/dagre": "^0.7.44",
"@types/react": "^16.9",
"@types/react-sparklines": "^1.7.0",
"@types/prop-types": "^15.7.3",
"classnames": "^2.2.6",
"clsx": "^1.1.0",
"d3-selection": "^2.0.0",
packages/core/src/api-wrappers/createApp.tsx
+2 -2
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import React, { FC } from 'react';
import React from 'react';
import privateExports, {
AppOptions,
defaultSystemIcons,
@@ -93,7 +93,7 @@ export function createApp(options?: AppOptions) {
const DefaultNotFoundPage = () => (
<ErrorPage status="404" statusMessage="PAGE NOT FOUND" />
);
const DefaultBootErrorPage: FC<BootErrorPageProps> = ({ step, error }) => {
const DefaultBootErrorPage = ({ step, error }: BootErrorPageProps) => {
let message = '';
if (step === 'load-config') {
message = `The configuration failed to load, someone should have a look at this error: ${error.message}`;
packages/core/src/components/AlertDisplay/AlertDisplay.tsx
+2 -4
View File
@@ -14,16 +14,14 @@
* limitations under the License.
*/
import React, { FC, useEffect, useState } from 'react';
import React, { useEffect, useState } from 'react';
import { Snackbar, IconButton } from '@material-ui/core';
import CloseIcon from '@material-ui/icons/Close';
import { Alert } from '@material-ui/lab';
import { AlertMessage, useApi, alertApiRef } from '@backstage/core-api';
type Props = {};
// TODO: improve on this and promote to a shared component for use by all apps.
export const AlertDisplay: FC<Props> = () => {
export const AlertDisplay = () => {
const [messages, setMessages] = useState<Array<AlertMessage>>([]);
const alertApi = useApi(alertApiRef);
packages/core/src/components/CopyTextButton/CopyTextButton.tsx
+2 -2
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import React, { FC, useRef, useState, MouseEventHandler } from 'react';
import React, { useRef, useState, MouseEventHandler } from 'react';
import { IconButton, makeStyles, Tooltip } from '@material-ui/core';
import PropTypes from 'prop-types';
import CopyIcon from '@material-ui/icons/FileCopy';
@@ -56,7 +56,7 @@ const defaultProps = {
tooltipText: 'Text copied to clipboard',
};
export const CopyTextButton: FC<Props> = props => {
export const CopyTextButton = (props: Props) => {
const { text, tooltipDelay, tooltipText } = {
...defaultProps,
...props,
packages/core/src/components/FeatureDiscovery/FeatureCalloutCircular.tsx
+3 -3
View File
@@ -16,7 +16,7 @@
import { ClickAwayListener, makeStyles, Typography } from '@material-ui/core';
import React, {
FC,
PropsWithChildren,
useCallback,
useEffect,
useLayoutEffect,
@@ -93,12 +93,12 @@ type Placement = {
textWidth: number;
};
export const FeatureCalloutCircular: FC<Props> = ({
export const FeatureCalloutCircular = ({
featureId,
title,
description,
children,
}) => {
}: PropsWithChildren<Props>) => {
const { show, hide } = useShowCallout(featureId);
const portalElement = usePortal('core.callout');
const wrapperRef = useRef<HTMLDivElement>(null);
packages/core/src/components/HorizontalScrollGrid/HorizontalScrollGrid.tsx
+2 -2
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import React, { FC } from 'react';
import React, { PropsWithChildren } from 'react';
import classNames from 'classnames';
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
import ChevronRightIcon from '@material-ui/icons/ChevronRight';
@@ -181,7 +181,7 @@ function useSmoothScroll(
return setScrollTarget;
}
export const HorizontalScrollGrid: FC<Props> = props => {
export const HorizontalScrollGrid = (props: PropsWithChildren<Props>) => {
const {
scrollStep = 100,
scrollSpeed = 50,
packages/core/src/components/Lifecycle/Lifecycle.tsx
+2 -2
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import React, { FC } from 'react';
import React from 'react';
import CSS from 'csstype';
import { makeStyles } from '@material-ui/core';
@@ -38,7 +38,7 @@ const useStyles = makeStyles({
},
});
export const Lifecycle: FC<Props> = props => {
export const Lifecycle = (props: Props) => {
const classes = useStyles(props);
const { shorthand, alpha } = props;
return shorthand ? (
packages/core/src/components/Link/Link.tsx
+1 -1
View File
@@ -19,7 +19,7 @@ import { Link as MaterialLink } from '@material-ui/core';
import { Link as RouterLink } from 'react-router-dom';
type Props = ComponentProps<typeof MaterialLink> &
ComponentProps<typeof RouterLink> & { component?: React.FC<any> };
ComponentProps<typeof RouterLink> & { component?: React.ReactNode };
/**
* Thin wrapper on top of material-ui's Link component
packages/core/src/components/OAuthRequestDialog/LoginRequestListItem.tsx
+2 -2
View File
@@ -22,7 +22,7 @@ import {
Typography,
Theme,
} from '@material-ui/core';
import React, { FC, useState } from 'react';
import React, { useState } from 'react';
import { PendingAuthRequest } from '@backstage/core-api';
const useItemStyles = makeStyles<Theme>(theme => ({
@@ -37,7 +37,7 @@ type RowProps = {
setBusy: (busy: boolean) => void;
};
const LoginRequestListItem: FC<RowProps> = ({ request, busy, setBusy }) => {
const LoginRequestListItem = ({ request, busy, setBusy }: RowProps) => {
const classes = useItemStyles();
const [error, setError] = useState<Error>();
packages/core/src/components/OAuthRequestDialog/OAuthRequestDialog.tsx
+2 -4
View File
@@ -24,7 +24,7 @@ import {
Theme,
Button,
} from '@material-ui/core';
import React, { FC, useMemo, useState } from 'react';
import React, { useMemo, useState } from 'react';
import { useObservable } from 'react-use';
import LoginRequestListItem from './LoginRequestListItem';
import { useApi, oauthRequestApiRef } from '@backstage/core-api';
@@ -41,9 +41,7 @@ const useStyles = makeStyles<Theme>(theme => ({
},
}));
type OAuthRequestDialogProps = {};
export const OAuthRequestDialog: FC<OAuthRequestDialogProps> = () => {
export const OAuthRequestDialog = () => {
const classes = useStyles();
const [busy, setBusy] = useState(false);
const oauthRequestApi = useApi(oauthRequestApiRef);
packages/core/src/components/Progress/Progress.tsx
+2 -2
View File
@@ -14,10 +14,10 @@
* limitations under the License.
*/
import React, { FC, useState, useEffect } from 'react';
import React, { useState, useEffect, PropsWithChildren } from 'react';
import { LinearProgress, LinearProgressProps } from '@material-ui/core';
export const Progress: FC<LinearProgressProps> = props => {
export const Progress = (props: PropsWithChildren<LinearProgressProps>) => {
const [isVisible, setIsVisible] = useState(false);
useEffect(() => {
packages/core/src/components/ProgressBars/Gauge.tsx
+2 -2
View File
@@ -17,7 +17,7 @@
import { makeStyles, useTheme } from '@material-ui/core';
import { BackstageTheme } from '@backstage/theme';
import { Circle } from 'rc-progress';
import React, { FC } from 'react';
import React from 'react';
const useStyles = makeStyles<BackstageTheme>(theme => ({
root: {
@@ -77,7 +77,7 @@ export function getProgressColor(
return palette.status.ok;
}
export const Gauge: FC<Props> = props => {
export const Gauge = (props: Props) => {
const classes = useStyles(props);
const theme = useTheme<BackstageTheme>();
const { value, fractional, inverse, unit, max } = {
packages/core/src/components/ProgressBars/GaugeCard.tsx
+2 -2
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import React, { FC } from 'react';
import React from 'react';
import { makeStyles } from '@material-ui/core';
import { InfoCard } from '../../layout/InfoCard';
import { BottomLinkProps } from '../../layout/BottomLink';
@@ -36,7 +36,7 @@ const useStyles = makeStyles({
},
});
export const GaugeCard: FC<Props> = props => {
export const GaugeCard = (props: Props) => {
const classes = useStyles(props);
const { title, subheader, progress, deepLink, variant } = props;
packages/core/src/components/ProgressBars/LinearGauge.tsx
+2 -2
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import React, { FC } from 'react';
import React from 'react';
import { Tooltip, useTheme } from '@material-ui/core';
// @ts-ignore
import { Line } from 'rc-progress';
@@ -28,7 +28,7 @@ type Props = {
value: number;
};
export const LinearGauge: FC<Props> = ({ value }) => {
export const LinearGauge = ({ value }: Props) => {
const theme = useTheme<BackstageTheme>();
if (isNaN(value)) {
return null;
packages/core/src/components/SimpleStepper/SimpleStepper.tsx
+3 -3
View File
@@ -16,9 +16,9 @@
import React, {
Children,
isValidElement,
FC,
useState,
useEffect,
PropsWithChildren,
} from 'react';
import { Stepper as MuiStepper } from '@material-ui/core';
@@ -47,12 +47,12 @@ export interface StepperProps {
activeStep?: number;
}
export const SimpleStepper: FC<StepperProps> = ({
export const SimpleStepper = ({
children,
elevated,
onStepChange,
activeStep = 0,
}) => {
}: PropsWithChildren<StepperProps>) => {
const [stepIndex, setStepIndex] = useState<number>(activeStep);
const [stepHistory, setStepHistory] = useState<number[]>([0]);
packages/core/src/components/SimpleStepper/SimpleStepperFooter.tsx
+26 -17
View File
@@ -13,7 +13,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React, { useContext, FC, ReactNode } from 'react';
import React, { useContext, ReactNode, PropsWithChildren } from 'react';
import { Button, makeStyles } from '@material-ui/core';
import { StepActions } from './SimpleStepperStep';
import { VerticalStepperContext } from './SimpleStepper';
@@ -27,20 +27,33 @@ const useStyles = makeStyles(theme => ({
},
}));
export const RestartBtn: FC<{
interface CommonBtnProps {
text?: string;
handleClick?: () => void;
stepIndex: number;
}> = ({ text, handleClick }) => (
<Button onClick={handleClick}>{text || 'Reset'}</Button>
);
const NextBtn: FC<{
text?: string;
handleClick?: () => void;
}
interface RestartBtnProps extends CommonBtnProps {}
interface NextBtnProps extends CommonBtnProps {
disabled?: boolean;
last?: boolean;
stepIndex: number;
}> = ({ text, handleClick, disabled, last, stepIndex }) => (
}
interface BackBtnProps extends CommonBtnProps {
disabled?: boolean;
stepIndex: number;
}
export const RestartBtn = ({ text, handleClick }: RestartBtnProps) => (
<Button onClick={handleClick}>{text || 'Reset'}</Button>
);
const NextBtn = ({
text,
handleClick,
disabled,
last,
stepIndex,
}: NextBtnProps) => (
<Button
variant="contained"
color="primary"
@@ -51,12 +64,8 @@ const NextBtn: FC<{
{text || (last ? 'Finish' : 'Next')}
</Button>
);
const BackBtn: FC<{
text?: string;
handleClick?: () => void;
disabled?: boolean;
stepIndex: number;
}> = ({ text, handleClick, disabled, stepIndex }) => (
const BackBtn = ({ text, handleClick, disabled, stepIndex }: BackBtnProps) => (
<Button
onClick={handleClick}
data-testid={`backButton-${stepIndex}`}
@@ -71,10 +80,10 @@ export type SimpleStepperFooterProps = {
children?: ReactNode;
};
export const SimpleStepperFooter: FC<SimpleStepperFooterProps> = ({
export const SimpleStepperFooter = ({
actions = {},
children,
}) => {
}: PropsWithChildren<SimpleStepperFooterProps>) => {
const classes = useStyles();
const {
stepperLength,
packages/core/src/components/SimpleStepper/SimpleStepperStep.tsx
+3 -3
View File
@@ -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, { PropsWithChildren } from 'react';
import {
Step as MuiStep,
StepContent,
@@ -53,13 +53,13 @@ export type StepProps = {
actions?: StepActions;
};
export const SimpleStepperStep: FC<StepProps> = ({
export const SimpleStepperStep = ({
title,
children,
end,
actions,
...muiProps
}) => {
}: PropsWithChildren<StepProps>) => {
const classes = useStyles();
// The end step is not a part of the stepper
packages/core/src/components/Status/Status.tsx
+7 -7
View File
@@ -17,7 +17,7 @@
import { makeStyles } from '@material-ui/core';
import { BackstageTheme } from '@backstage/theme';
import classNames from 'classnames';
import React, { FC } from 'react';
import React, { PropsWithChildren } from 'react';
const useStyles = makeStyles<BackstageTheme>(theme => ({
status: {
@@ -63,7 +63,7 @@ const useStyles = makeStyles<BackstageTheme>(theme => ({
},
}));
export const StatusOK: FC<{}> = props => {
export const StatusOK = (props: PropsWithChildren<{}>) => {
const classes = useStyles(props);
return (
<span
@@ -74,7 +74,7 @@ export const StatusOK: FC<{}> = props => {
);
};
export const StatusWarning: FC<{}> = props => {
export const StatusWarning = (props: PropsWithChildren<{}>) => {
const classes = useStyles(props);
return (
<span
@@ -85,7 +85,7 @@ export const StatusWarning: FC<{}> = props => {
);
};
export const StatusError: FC<{}> = props => {
export const StatusError = (props: PropsWithChildren<{}>) => {
const classes = useStyles(props);
return (
<span
@@ -96,7 +96,7 @@ export const StatusError: FC<{}> = props => {
);
};
export const StatusPending: FC<{}> = props => {
export const StatusPending = (props: PropsWithChildren<{}>) => {
const classes = useStyles(props);
return (
<span
@@ -107,7 +107,7 @@ export const StatusPending: FC<{}> = props => {
);
};
export const StatusRunning: FC<{}> = props => {
export const StatusRunning = (props: PropsWithChildren<{}>) => {
const classes = useStyles(props);
return (
<span
@@ -118,7 +118,7 @@ export const StatusRunning: FC<{}> = props => {
);
};
export const StatusAborted: FC<{}> = props => {
export const StatusAborted = (props: PropsWithChildren<{}>) => {
const classes = useStyles(props);
return (
<span
packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.stories.tsx
+2 -2
View File
@@ -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, { PropsWithChildren } from 'react';
import { InfoCard } from '../../layout/InfoCard';
import { Grid } from '@material-ui/core';
import { StructuredMetadataTable } from './StructuredMetadataTable';
@@ -43,7 +43,7 @@ export default {
component: StructuredMetadataTable,
};
const Wrapper: FC<{}> = ({ children }) => (
const Wrapper = ({ children }: PropsWithChildren<{}>) => (
<Grid container spacing={4}>
<Grid item>{children}</Grid>
</Grid>
packages/core/src/components/SupportButton/SupportButton.tsx
+9 -4
View File
@@ -14,7 +14,12 @@
* limitations under the License.
*/
import React, { FC, Fragment, useState, MouseEventHandler } from 'react';
import React, {
Fragment,
useState,
MouseEventHandler,
PropsWithChildren,
} from 'react';
import {
Button,
Link,
@@ -49,12 +54,12 @@ const useStyles = makeStyles(theme => ({
},
}));
export const SupportButton: FC<Props> = ({
export const SupportButton = ({
slackChannel = '#backstage',
email = [],
children,
// plugin,
}) => {
}: // plugin,
PropsWithChildren<Props>) => {
// TODO: get plugin manifest with hook
const [popoverOpen, setPopoverOpen] = useState(false);
packages/core/src/components/Table/SubvalueCell.tsx
+2 -2
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import React, { FC } from 'react';
import React from 'react';
import { BackstageTheme } from '@backstage/theme';
import { makeStyles } from '@material-ui/core';
@@ -33,7 +33,7 @@ type SubvalueCellProps = {
subvalue: React.ReactNode;
};
export const SubvalueCell: FC<SubvalueCellProps> = ({ value, subvalue }) => {
export const SubvalueCell = ({ value, subvalue }: SubvalueCellProps) => {
const classes = useSubvalueCellStyles();
return (
packages/core/src/components/Tabs/TabBar.tsx
+2 -2
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import React, { FC } from 'react';
import React, { PropsWithChildren } from 'react';
import { Tabs, makeStyles } from '@material-ui/core';
import { BackstageTheme } from '@backstage/theme';
@@ -40,7 +40,7 @@ const useStyles = makeStyles<BackstageTheme>(theme => ({
},
}));
export const StyledTabs: FC<StyledTabsProps> = props => {
export const StyledTabs = (props: PropsWithChildren<StyledTabsProps>) => {
const classes = useStyles(props);
return (
<Tabs
packages/core/src/components/Tabs/TabPanel.tsx
+2 -3
View File
@@ -14,16 +14,15 @@
* limitations under the License.
*/
import React, { FC } from 'react';
import React, { PropsWithChildren } from 'react';
import Box from '@material-ui/core/Box';
export interface TabPanelProps {
children: any;
value?: any;
index?: number;
}
export const TabPanel: FC<TabPanelProps> = props => {
export const TabPanel = (props: PropsWithChildren<TabPanelProps>) => {
const { children, value, index, ...other } = props;
return (
packages/core/src/components/Tabs/Tabs.tsx
+2 -8
View File
@@ -14,13 +14,7 @@
* limitations under the License.
*/
import React, {
FC,
useRef,
useEffect,
MutableRefObject,
useState,
} from 'react';
import React, { useRef, useEffect, MutableRefObject, useState } from 'react';
import { BackstageTheme } from '@backstage/theme';
import { AppBar } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
@@ -64,7 +58,7 @@ const useStyles = makeStyles<BackstageTheme>(theme => ({
},
}));
export const Tabs: FC<TabsProps> = ({ tabs }) => {
export const Tabs = ({ tabs }: TabsProps) => {
const classes = useStyles();
const [value, setValue] = useState([0, 0]); // [selectedChunkedNavIndex, selectedIndex]
const [navIndex, setNavIndex] = useState(0);
packages/core/src/components/TrendLine/TrendLine.tsx
+2 -2
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import React, { FC } from 'react';
import React from 'react';
import { Sparklines, SparklinesLine, SparklinesProps } from 'react-sparklines';
import { useTheme } from '@material-ui/core';
import { BackstageTheme } from '@backstage/theme';
@@ -27,7 +27,7 @@ function color(data: number[], theme: BackstageTheme): string | undefined {
return theme.palette.status.error;
}
export const TrendLine: FC<SparklinesProps & { title?: string }> = props => {
export const TrendLine = (props: SparklinesProps & { title?: string }) => {
const theme = useTheme<BackstageTheme>();
if (!props.data) return null;
packages/core/src/layout/BottomLink/BottomLink.tsx
+2 -2
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import React, { FC } from 'react';
import React from 'react';
import {
ListItem,
ListItemIcon,
@@ -47,7 +47,7 @@ export type BottomLinkProps = {
onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
};
export const BottomLink: FC<BottomLinkProps> = ({ link, title, onClick }) => {
export const BottomLink = ({ link, title, onClick }: BottomLinkProps) => {
const classes = useStyles();
return (
packages/core/src/layout/Content/Content.tsx
+3 -3
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import React, { FC } from 'react';
import React, { PropsWithChildren } from 'react';
import classNames from 'classnames';
import { Theme, makeStyles } from '@material-ui/core';
@@ -42,13 +42,13 @@ type Props = {
className?: string;
};
export const Content: FC<Props> = ({
export const Content = ({
className,
stretch,
noPadding,
children,
...props
}) => {
}: PropsWithChildren<Props>) => {
const classes = useStyles();
return (
<article
packages/core/src/layout/ContentHeader/ContentHeader.tsx
+5 -5
View File
@@ -18,7 +18,7 @@
* TODO favoriteable capability
*/
import React, { ComponentType, Fragment, FC } from 'react';
import React, { ComponentType, Fragment, PropsWithChildren } from 'react';
import { Typography, makeStyles } from '@material-ui/core';
import { Helmet } from 'react-helmet';
@@ -62,10 +62,10 @@ type DefaultTitleProps = {
className: string;
};
const DefaultTitle: FC<DefaultTitleProps> = ({
const DefaultTitle = ({
title = 'Unknown page',
className,
}) => (
}: DefaultTitleProps) => (
<Typography variant="h4" className={className} data-testid="header-title">
{title}
</Typography>
@@ -78,13 +78,13 @@ type ContentHeaderProps = {
textAlign?: 'left' | 'right' | 'center';
};
export const ContentHeader: FC<ContentHeaderProps> = ({
export const ContentHeader = ({
description,
title,
titleComponent: TitleComponent = undefined,
children,
textAlign = 'left',
}) => {
}: PropsWithChildren<ContentHeaderProps>) => {
const classes = useStyles({ textAlign })();
const renderedTitle = TitleComponent ? (
packages/core/src/layout/Header/Header.tsx
+7 -11
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import React, { ReactNode, CSSProperties, FC } from 'react';
import React, { ReactNode, CSSProperties, PropsWithChildren } from 'react';
import { Helmet } from 'react-helmet';
import {
Link,
@@ -121,12 +121,12 @@ type SubtitleFragmentProps = {
subtitle?: Props['subtitle'];
};
const TypeFragment: FC<TypeFragmentProps> = ({
const TypeFragment = ({
type,
typeLink,
classes,
pageTitle,
}) => {
}: TypeFragmentProps) => {
if (!type) {
return null;
}
@@ -149,11 +149,7 @@ const TypeFragment: FC<TypeFragmentProps> = ({
);
};
const TitleFragment: FC<TitleFragmentProps> = ({
pageTitle,
classes,
tooltip,
}) => {
const TitleFragment = ({ pageTitle, classes, tooltip }: TitleFragmentProps) => {
const FinalTitle = (
<Typography className={classes.title} variant="h4">
{pageTitle}
@@ -171,7 +167,7 @@ const TitleFragment: FC<TitleFragmentProps> = ({
);
};
const SubtitleFragment: FC<SubtitleFragmentProps> = ({ classes, subtitle }) => {
const SubtitleFragment = ({ classes, subtitle }: SubtitleFragmentProps) => {
if (!subtitle) {
return null;
}
@@ -187,7 +183,7 @@ const SubtitleFragment: FC<SubtitleFragmentProps> = ({ classes, subtitle }) => {
);
};
export const Header: FC<Props> = ({
export const Header = ({
children,
pageTitleOverride,
style,
@@ -196,7 +192,7 @@ export const Header: FC<Props> = ({
tooltip,
type,
typeLink,
}) => {
}: PropsWithChildren<Props>) => {
const classes = useStyles();
const documentTitle = pageTitleOverride || title;
const pageTitle = title || pageTitleOverride;
packages/core/src/layout/HeaderActionMenu/HeaderActionMenu.tsx
+4 -6
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import React, { Fragment, ReactElement, FC, ComponentType } from 'react';
import React, { Fragment, ReactElement, ComponentType } from 'react';
import {
IconButton,
List,
@@ -35,14 +35,14 @@ type ActionItemProps = {
WrapperComponent?: ComponentType;
};
const ActionItem: FC<ActionItemProps> = ({
const ActionItem = ({
label,
secondaryLabel,
icon,
disabled = false,
onClick,
WrapperComponent = React.Fragment,
}) => {
}: ActionItemProps) => {
return (
<WrapperComponent>
<ListItem
@@ -66,9 +66,7 @@ export type HeaderActionMenuProps = {
actionItems: ActionItemProps[];
};
export const HeaderActionMenu: FC<HeaderActionMenuProps> = ({
actionItems,
}) => {
export const HeaderActionMenu = ({ actionItems }: HeaderActionMenuProps) => {
const [open, setOpen] = React.useState(false);
const anchorElRef = React.useRef(null);
packages/core/src/layout/HeaderLabel/HeaderLabel.tsx
+5 -6
View File
@@ -15,7 +15,7 @@
*/
import { Link, makeStyles, Typography } from '@material-ui/core';
import React, { FC } from 'react';
import React from 'react';
const useStyles = makeStyles(theme => ({
root: {
@@ -45,10 +45,9 @@ type HeaderLabelContentProps = {
className: string;
};
const HeaderLabelContent: FC<HeaderLabelContentProps> = ({
value,
className,
}) => <Typography className={className}>{value}</Typography>;
const HeaderLabelContent = ({ value, className }: HeaderLabelContentProps) => (
<Typography className={className}>{value}</Typography>
);
type HeaderLabelProps = {
label: string;
@@ -56,7 +55,7 @@ type HeaderLabelProps = {
url?: string;
};
export const HeaderLabel: FC<HeaderLabelProps> = ({ label, value, url }) => {
export const HeaderLabel = ({ label, value, url }: HeaderLabelProps) => {
const classes = useStyles();
const content = (
<HeaderLabelContent
packages/core/src/layout/HeaderTabs/HeaderTabs.tsx
+7 -2
View File
@@ -43,11 +43,16 @@ export type Tab = {
label: string;
};
export const HeaderTabs: React.FC<{
type HeaderTabsProps = {
tabs: Tab[];
onChange?: (index: number) => void;
selectedIndex?: number;
}> = ({ tabs, onChange, selectedIndex }) => {
};
export const HeaderTabs = ({
tabs,
onChange,
selectedIndex,
}: HeaderTabsProps) => {
const [selectedTab, setSelectedTab] = useState<number>(selectedIndex ?? 0);
const styles = useStyles();
packages/core/src/layout/ItemCard/ItemCard.tsx
+3 -3
View File
@@ -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 { Button, Card, Chip, Typography, makeStyles } from '@material-ui/core';
const useStyles = makeStyles(theme => ({
@@ -44,14 +44,14 @@ type ItemCardProps = {
label: string;
onClick?: () => void;
};
export const ItemCard: FC<ItemCardProps> = ({
export const ItemCard = ({
description,
tags,
title,
type,
label,
onClick,
}) => {
}: ItemCardProps) => {
const classes = useStyles();
return (
packages/core/src/layout/Page/Page.tsx
+2 -2
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import React, { FC } from 'react';
import React, { PropsWithChildren } from 'react';
import { BackstageTheme } from '@backstage/theme';
import { makeStyles, ThemeProvider } from '@material-ui/core';
@@ -33,7 +33,7 @@ type Props = {
themeId: string;
};
export const Page: FC<Props> = ({ themeId, children }) => {
export const Page = ({ themeId, children }: PropsWithChildren<Props>) => {
const classes = useStyles();
return (
<ThemeProvider
packages/core/src/layout/Sidebar/Bar.tsx
+3 -3
View File
@@ -16,7 +16,7 @@
import { makeStyles } from '@material-ui/core';
import clsx from 'clsx';
import React, { FC, useRef, useState, useContext } from 'react';
import React, { useRef, useState, useContext, PropsWithChildren } from 'react';
import { sidebarConfig, SidebarContext } from './config';
import { BackstageTheme } from '@backstage/theme';
import { SidebarPinStateContext } from './Page';
@@ -71,11 +71,11 @@ type Props = {
closeDelayMs?: number;
};
export const Sidebar: FC<Props> = ({
export const Sidebar = ({
openDelayMs = sidebarConfig.defaultOpenDelayMs,
closeDelayMs = sidebarConfig.defaultCloseDelayMs,
children,
}) => {
}: PropsWithChildren<Props>) => {
const classes = useStyles();
const [state, setState] = useState(State.Closed);
const hoverTimerRef = useRef<number>();
packages/core/src/layout/Sidebar/Intro.tsx
+4 -4
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import React, { FC, useContext, useState } from 'react';
import React, { useContext, useState } from 'react';
import { useLocalStorage } from 'react-use';
import { Link, Typography, makeStyles, Collapse } from '@material-ui/core';
import CloseIcon from '@material-ui/icons/Close';
@@ -74,7 +74,7 @@ type IntroCardProps = {
onClose: () => void;
};
export const IntroCard: FC<IntroCardProps> = props => {
export const IntroCard = (props: IntroCardProps) => {
const classes = useStyles();
const { text, onClose } = props;
const handleClose = () => onClose();
@@ -109,7 +109,7 @@ type SidebarIntroCardProps = {
onDismiss: () => void;
};
const SidebarIntroCard: FC<SidebarIntroCardProps> = props => {
const SidebarIntroCard = (props: SidebarIntroCardProps) => {
const { text, onDismiss } = props;
const [collapsing, setCollapsing] = useState(false);
const startDismissing = () => {
@@ -127,7 +127,7 @@ Keep an eye out for the little star icon (⭐) next to the plugin name and give
const recentlyViewedIntroText =
'And your recently viewed plugins will pop up here!';
export const SidebarIntro: FC = () => {
export const SidebarIntro = () => {
const { isOpen } = useContext(SidebarContext);
const defaultValue = {
starredItemsDismissed: false,
packages/core/src/layout/Sidebar/Page.tsx
+7 -2
View File
@@ -15,7 +15,12 @@
*/
import { makeStyles } from '@material-ui/core';
import React, { createContext, FC, useEffect, useState } from 'react';
import React, {
createContext,
PropsWithChildren,
useEffect,
useState,
} from 'react';
import { sidebarConfig } from './config';
import { BackstageTheme } from '@backstage/theme';
import { LocalStorage } from './localStorage';
@@ -44,7 +49,7 @@ export const SidebarPinStateContext = createContext<SidebarPinStateContextType>(
},
);
export const SidebarPage: FC<{}> = props => {
export const SidebarPage = (props: PropsWithChildren<{}>) => {
const [isPinned, setIsPinned] = useState(() =>
LocalStorage.getSidebarPinState(),
);
packages/core/src/layout/SignInPage/SignInPage.tsx
+3 -3
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import React, { FC } from 'react';
import React from 'react';
import { Page } from '../Page';
import { Header } from '../Header';
import { Content } from '../Content/Content';
@@ -32,12 +32,12 @@ export type Props = SignInPageProps & {
align?: 'center' | 'left';
};
export const SignInPage: FC<Props> = ({
export const SignInPage = ({
onResult,
providers = [],
title,
align = 'left',
}) => {
}: Props) => {
const configApi = useApi(configApiRef);
const classes = useStyles();
packages/core/src/layout/TabbedCard/TabbedCard.tsx
+9 -4
View File
@@ -14,7 +14,12 @@
* limitations under the License.
*/
import React, { FC, useState, ReactElement, ReactNode } from 'react';
import React, {
useState,
ReactElement,
ReactNode,
PropsWithChildren,
} from 'react';
import {
Card,
CardContent,
@@ -55,14 +60,14 @@ type Props = {
deepLink?: BottomLinkProps;
};
const TabbedCard: FC<Props> = ({
const TabbedCard = ({
slackChannel = '#backstage',
children,
title,
deepLink,
value,
onChange,
}) => {
}: PropsWithChildren<Props>) => {
const tabsClasses = useTabsStyles();
const [selectedIndex, selectIndex] = useState(0);
@@ -118,7 +123,7 @@ type CardTabProps = TabProps & {
children: ReactNode;
};
const CardTab: FC<CardTabProps> = ({ children, ...props }) => {
const CardTab = ({ children, ...props }: PropsWithChildren<CardTabProps>) => {
const classes = useCardTabStyles();
return <Tab disableRipple classes={classes} {...props} />;
packages/create-app/templates/default-app/packages/app/src/App.tsx
+2 -2
View File
@@ -1,4 +1,4 @@
import React, { FC } from 'react';
import React from 'react';
import {
createApp,
AlertDisplay,
@@ -32,7 +32,7 @@ const catalogRouteRef = createRouteRef({
});
const App: FC<{}> = () => (
const App = () => (
<AppProvider>
<AlertDisplay />
<OAuthRequestDialog />
packages/create-app/templates/default-app/packages/app/src/LogoFull.tsx
+2 -2
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import React, { FC } from 'react';
import React from 'react';
import { makeStyles } from '@material-ui/core';
const useStyles = makeStyles({
@@ -26,7 +26,7 @@ const useStyles = makeStyles({
fill: '#7df3e1',
},
});
const LogoFull: FC<{}> = () => {
const LogoFull = () => {
const classes = useStyles();
return (
packages/create-app/templates/default-app/packages/app/src/LogoIcon.tsx
+2 -2
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import React, { FC } from 'react';
import React from 'react';
import { makeStyles } from '@material-ui/core';
const useStyles = makeStyles({
@@ -27,7 +27,7 @@ const useStyles = makeStyles({
},
});
const LogoIcon: FC<{}> = () => {
const LogoIcon = () => {
const classes = useStyles();
return (
packages/create-app/templates/default-app/packages/app/src/sidebar.tsx
+2 -2
View File
@@ -1,4 +1,4 @@
import React, { FC, useContext } from 'react';
import React, { useContext } from 'react';
import HomeIcon from '@material-ui/icons/Home';
import LibraryBooks from '@material-ui/icons/LibraryBooks';
import ExtensionIcon from '@material-ui/icons/Extension';
@@ -57,7 +57,7 @@ const useSidebarLogoStyles = makeStyles({
},
});
const SidebarLogo: FC<{}> = () => {
const SidebarLogo = () => {
const classes = useSidebarLogoStyles();
const { isOpen } = useContext(SidebarContext);
packages/dev-utils/src/devApp/render.tsx
+2 -2
View File
@@ -15,7 +15,7 @@
*/
import { hot } from 'react-hot-loader/root';
import React, { FC, ComponentType, ReactNode } from 'react';
import React, { ComponentType, ReactNode } from 'react';
import ReactDOM from 'react-dom';
import BookmarkIcon from '@material-ui/icons/Bookmark';
import {
@@ -90,7 +90,7 @@ class DevAppBuilder {
const sidebar = this.setupSidebar(this.plugins);
const DevApp: FC<{}> = () => {
const DevApp = () => {
return (
<AppProvider>
<AlertDisplay />
packages/test-utils/src/testUtils/appWrappers.test.tsx
+5 -5
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import React, { FC, useEffect } from 'react';
import React, { useEffect } from 'react';
import { render } from '@testing-library/react';
import { wrapInTestApp, renderInTestApp } from './appWrappers';
import { Route, Routes } from 'react-router';
@@ -54,7 +54,7 @@ describe('wrapInTestApp', () => {
it('should render a component in a test app without warning about missing act()', async () => {
const { error } = await withLogCollector(['error'], async () => {
const Foo: FC<{}> = () => {
const Foo = () => {
return <p>foo</p>;
};
@@ -66,7 +66,7 @@ describe('wrapInTestApp', () => {
});
it('should render a node in a test app', async () => {
const Foo: FC<{}> = () => {
const Foo = () => {
return <p>foo</p>;
};
@@ -75,7 +75,7 @@ describe('wrapInTestApp', () => {
});
it('should provide mock API implementations', async () => {
const A: FC<{}> = () => {
const A = () => {
const errorApi = useApi(errorApiRef);
errorApi.post(new Error('NOPE'));
return null;
@@ -96,7 +96,7 @@ describe('wrapInTestApp', () => {
it('should allow custom API implementations', async () => {
const mockErrorApi = new MockErrorApi({ collect: true });
const A: FC<{}> = () => {
const A = () => {
const errorApi = useApi(errorApiRef);
useEffect(() => {
errorApi.post(new Error('NOPE'));
packages/test-utils/src/testUtils/appWrappers.tsx
+3 -3
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import React, { ComponentType, ReactNode, FC, ReactElement } from 'react';
import React, { ComponentType, ReactNode, ReactElement } from 'react';
import { MemoryRouter } from 'react-router';
import { Route } from 'react-router-dom';
import { lightTheme } from '@backstage/theme';
@@ -31,7 +31,7 @@ const { PrivateAppImpl } = privateExports;
const NotFoundErrorPage = () => {
throw new Error('Reached NotFound Page');
};
const BootErrorPage: FC<BootErrorPageProps> = ({ step, error }) => {
const BootErrorPage = ({ step, error }: BootErrorPageProps) => {
throw new Error(`Reached BootError Page at step ${step} with error ${error}`);
};
const Progress = () => <div data-testid="progress" />;
@@ -86,7 +86,7 @@ export function wrapInTestApp(
if (Component instanceof Function) {
Wrapper = Component;
} else {
Wrapper = (() => Component) as FC;
Wrapper = () => Component as React.ReactElement;
}
const AppProvider = app.getProvider();
plugins/catalog/src/components/EntityContextMenu/EntityContextMenu.tsx
+2 -2
View File
@@ -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();
plugins/catalog/src/components/FavouriteEntity/FavouriteEntity.tsx
+1 -1
View File
@@ -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 (
plugins/catalog/src/components/UnregisterEntityDialog/UnregisterEntityDialog.tsx
+3 -3
View File
@@ -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'));
plugins/catalog/src/hooks/useStarredEntities.test.tsx
+2 -2
View File
@@ -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}
plugins/circleci/src/components/BuildWithStepsPage/lib/ActionOutput/ActionOutput.tsx
+8 -3
View File
@@ -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([]);
plugins/circleci/src/route-refs.tsx
+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"
plugins/cloudbuild/src/components/WorkflowRunsTable/WorkflowRunsTable.tsx
+3 -3
View File
@@ -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}
plugins/cost-insights/src/components/AlertActionCardList/AlertActionCardList.tsx
+2 -2
View File
@@ -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}`}>
plugins/explore/src/components/ExploreCard.tsx
+2 -2
View File
@@ -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;
plugins/github-actions/src/components/WorkflowRunsTable/WorkflowRunsTable.tsx
+3 -3
View File
@@ -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}
plugins/gitops-profiles/src/components/ClusterList/ClusterList.tsx
+2 -2
View File
@@ -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
+2 -2
View File
@@ -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
+2 -2
View File
@@ -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
+2 -2
View File
@@ -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
+2 -2
View File
@@ -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
+2 -2
View File
@@ -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
+2 -2
View File
@@ -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
+2 -2
View File
@@ -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([
{
plugins/graphiql/src/components/GraphiQLBrowser/GraphiQLBrowser.tsx
+2 -2
View File
@@ -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);
plugins/jenkins/src/components/BuildWithStepsPage/lib/ActionOutput/ActionOutput.tsx
+5 -3
View File
@@ -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]);
plugins/jenkins/src/components/BuildsPage/lib/CITable/CITable.tsx
+3 -3
View File
@@ -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}
plugins/lighthouse/package.json
+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"
},
plugins/lighthouse/src/components/AuditList/AuditListTable.tsx
+2 -2
View File
@@ -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
+2 -2
View File
@@ -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
+2 -2
View File
@@ -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
+4 -7
View File
@@ -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
+12 -6
View File
@@ -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
+2 -2
View File
@@ -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
+2 -2
View File
@@ -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(
plugins/newrelic/src/components/NewRelicComponent/NewRelicComponent.tsx
+2 -2
View File
@@ -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" />
plugins/newrelic/src/components/NewRelicFetchComponent/NewRelicFetchComponent.tsx
+3 -5
View File
@@ -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 () => {
plugins/sentry/src/components/ErrorCell/ErrorCell.tsx
+2 -4
View File
@@ -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}>
plugins/sentry/src/components/ErrorGraph/ErrorGraph.tsx
+2 -4
View File
@@ -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']