diff --git a/.eslintrc.js b/.eslintrc.js index eb2a07b3b0..8db17ed5a8 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -20,6 +20,7 @@ module.exports = { root: true, plugins: ['@spotify', 'notice', 'react', 'testing-library'], rules: { + 'react/react-in-jsx-scope': 'off', 'notice/notice': [ 'error', { @@ -47,6 +48,17 @@ module.exports = { selector: "CallExpression[arguments.length=0] > MemberExpression[property.name='toUpperCase']", }, + { + message: "Default React import not allowed.", + selector: + "ImportDeclaration[source.value='react'][specifiers.0.type='ImportDefaultSpecifier']", + }, + { + message: + "Default React import not allowed. If you need a global type that collides with a React named export (such as `MouseEvent`), try using `globalThis.MouseHandler`.", + selector: + "ImportDeclaration[source.value='react'] :matches(ImportDefaultSpecifier, ImportNamespaceSpecifier)", + }, ], 'testing-library/await-async-queries': 'error', 'testing-library/await-async-utils': 'error', diff --git a/canon-docs/src/components/Banner/Banner.tsx b/canon-docs/src/components/Banner/Banner.tsx index 18aecba79f..0f055d6c92 100644 --- a/canon-docs/src/components/Banner/Banner.tsx +++ b/canon-docs/src/components/Banner/Banner.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import styles from './styles.module.css'; export const Banner = ({ diff --git a/canon-docs/src/components/Chip/Chip.tsx b/canon-docs/src/components/Chip/Chip.tsx index d6a74502e0..fd9a9f84c3 100644 --- a/canon-docs/src/components/Chip/Chip.tsx +++ b/canon-docs/src/components/Chip/Chip.tsx @@ -14,14 +14,14 @@ * limitations under the License. */ -import React from 'react'; +import { ReactNode } from 'react'; import styles from './styles.module.css'; export const Chip = ({ children, head = false, }: { - children: React.ReactNode; + children: ReactNode; head?: boolean; }) => { return ( diff --git a/canon-docs/src/components/Columns/Columns.tsx b/canon-docs/src/components/Columns/Columns.tsx index 115ec50010..ec7f83ea75 100644 --- a/canon-docs/src/components/Columns/Columns.tsx +++ b/canon-docs/src/components/Columns/Columns.tsx @@ -14,14 +14,14 @@ * limitations under the License. */ -import React from 'react'; +import { ReactNode, CSSProperties } from 'react'; export const Columns = ({ children, style, }: { - children: React.ReactNode; - style?: React.CSSProperties; + children: ReactNode; + style?: CSSProperties; }) => { return (
diff --git a/canon-docs/src/components/LayoutComponents/LayoutComponents.tsx b/canon-docs/src/components/LayoutComponents/LayoutComponents.tsx index 05238717f1..ac31381cd8 100644 --- a/canon-docs/src/components/LayoutComponents/LayoutComponents.tsx +++ b/canon-docs/src/components/LayoutComponents/LayoutComponents.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { BoxSvg } from './svgs/box'; import { FlexSvg } from './svgs/flex'; import { GridSvg } from './svgs/grid'; diff --git a/canon-docs/src/components/LayoutComponents/svgs/box.tsx b/canon-docs/src/components/LayoutComponents/svgs/box.tsx index 5b90f971c3..b7f6a097e5 100644 --- a/canon-docs/src/components/LayoutComponents/svgs/box.tsx +++ b/canon-docs/src/components/LayoutComponents/svgs/box.tsx @@ -13,8 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; - export const BoxSvg = () => { return ( { return ( { return ( { return ( { return ( { diff --git a/canon-docs/src/components/Table/Table.tsx b/canon-docs/src/components/Table/Table.tsx index d817ce3b1b..4d0e48dbce 100644 --- a/canon-docs/src/components/Table/Table.tsx +++ b/canon-docs/src/components/Table/Table.tsx @@ -1,7 +1,7 @@ -import React from 'react'; +import { CSSProperties, ReactNode } from 'react'; import styles from './styles.module.css'; -export const Root = ({ children }: { children: React.ReactNode }) => { +export const Root = ({ children }: { children: ReactNode }) => { return (
{children}
@@ -9,15 +9,15 @@ export const Root = ({ children }: { children: React.ReactNode }) => { ); }; -export const Header = ({ children }: { children: React.ReactNode }) => { +export const Header = ({ children }: { children: ReactNode }) => { return {children}; }; -export const Body = ({ children }: { children: React.ReactNode }) => { +export const Body = ({ children }: { children: ReactNode }) => { return {children}; }; -export const HeaderRow = ({ children }: { children: React.ReactNode }) => { +export const HeaderRow = ({ children }: { children: ReactNode }) => { return {children}; }; @@ -25,8 +25,8 @@ export const HeaderCell = ({ children, style, }: { - children: React.ReactNode; - style?: React.CSSProperties; + children: ReactNode; + style?: CSSProperties; }) => { return ( { +export const Row = ({ children }: { children: ReactNode }) => { return {children}; }; @@ -46,8 +46,8 @@ export const Cell = ({ children, style, }: { - children: React.ReactNode; - style?: React.CSSProperties; + children: ReactNode; + style?: CSSProperties; }) => { return ( diff --git a/canon-docs/src/mdx-components.tsx b/canon-docs/src/mdx-components.tsx index 9517e882cc..22b389a641 100644 --- a/canon-docs/src/mdx-components.tsx +++ b/canon-docs/src/mdx-components.tsx @@ -1,4 +1,4 @@ -import React, { ReactNode } from 'react'; +import { isValidElement, ReactNode } from 'react'; import type { MDXComponents } from 'mdx/types'; import Image, { ImageProps } from 'next/image'; import { CodeBlock } from '@/components/CodeBlock'; @@ -28,7 +28,7 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
  • {children as ReactNode}
    • ), pre: ({ children }) => { - const codeContent = React.isValidElement(children) + const codeContent = isValidElement(children) ? (children.props as { children: string }).children : ''; diff --git a/canon-docs/src/utils/playground-context.tsx b/canon-docs/src/utils/playground-context.tsx index 721851c3e4..9d4e23217f 100644 --- a/canon-docs/src/utils/playground-context.tsx +++ b/canon-docs/src/utils/playground-context.tsx @@ -1,4 +1,4 @@ -import React, { +import { createContext, useContext, ReactNode, diff --git a/contrib/docs/tutorials/aws-alb-aad-oidc-auth.md b/contrib/docs/tutorials/aws-alb-aad-oidc-auth.md index d742c33498..178c45567f 100644 --- a/contrib/docs/tutorials/aws-alb-aad-oidc-auth.md +++ b/contrib/docs/tutorials/aws-alb-aad-oidc-auth.md @@ -55,15 +55,15 @@ When using ALB authentication Backstage will only be loaded once the user has su - add the following definition just before the app is created (`const app = createApp`): ```ts -import React from 'react'; +import { useState, useEffect } from 'react'; import { UserIdentity } from '@backstage/core-components'; import { SignInPageProps } from '@backstage/core-app-api'; import { useApi, configApiRef } from '@backstage/core-plugin-api'; const SampleSignInComponent: any = (props: SignInPageProps) => { - const [error, setError] = React.useState(); + const [error, setError] = useState(); const config = useApi(configApiRef); - React.useEffect(() => { + useEffect(() => { const shouldAuth = !!config.getOptionalConfig('auth.providers.awsalb'); if (shouldAuth) { fetch(`${window.location.origin}/api/auth/awsalb/refresh`) diff --git a/contrib/docs/tutorials/quickstart-app-plugin/ExampleComponent.md b/contrib/docs/tutorials/quickstart-app-plugin/ExampleComponent.md index fe56adddd8..78b76cd1a2 100644 --- a/contrib/docs/tutorials/quickstart-app-plugin/ExampleComponent.md +++ b/contrib/docs/tutorials/quickstart-app-plugin/ExampleComponent.md @@ -3,7 +3,6 @@ ExampleComponent.tsx reference ```tsx -import React from 'react'; import { Typography, Grid } from '@material-ui/core'; import { identityApiRef, useApi } from '@backstage/core-plugin-api'; import { diff --git a/contrib/docs/tutorials/quickstart-app-plugin/ExampleFetchComponent.md b/contrib/docs/tutorials/quickstart-app-plugin/ExampleFetchComponent.md index f45b70cdb1..d2c0553e34 100644 --- a/contrib/docs/tutorials/quickstart-app-plugin/ExampleFetchComponent.md +++ b/contrib/docs/tutorials/quickstart-app-plugin/ExampleFetchComponent.md @@ -3,7 +3,6 @@ ExampleFetchComponent.tsx reference ```tsx -import React from 'react'; import useAsync from 'react-use/lib/useAsync'; import Alert from '@material-ui/lab/Alert'; import { githubAuthApiRef, useApi } from '@backstage/core-plugin-api'; diff --git a/contrib/search/confluence/ConfluenceResultListItem.md b/contrib/search/confluence/ConfluenceResultListItem.md index 059048d731..4061f833bd 100644 --- a/contrib/search/confluence/ConfluenceResultListItem.md +++ b/contrib/search/confluence/ConfluenceResultListItem.md @@ -1,7 +1,6 @@ ConfluenceResultListItem.tsx reference ```tsx -import React from 'react'; import { Link } from '@backstage/core-components'; import { IndexableDocument } from '@backstage/plugin-search-common'; import { diff --git a/docs/api/utility-apis.md b/docs/api/utility-apis.md index 06183f1fc0..fbb71221fc 100644 --- a/docs/api/utility-apis.md +++ b/docs/api/utility-apis.md @@ -37,7 +37,6 @@ components. For example, the [`ErrorApi`](../reference/core-plugin-api.errorapi.md) can be accessed like this: ```tsx -import React from 'react'; import { useApi, errorApiRef } from '@backstage/core-plugin-api'; export const MyComponent = () => { diff --git a/docs/features/search/getting-started.md b/docs/features/search/getting-started.md index e543df5ab8..e5029ed35f 100644 --- a/docs/features/search/getting-started.md +++ b/docs/features/search/getting-started.md @@ -24,7 +24,6 @@ Create a new `packages/app/src/components/search/SearchPage.tsx` file in your Backstage app with the following contents: ```tsx -import React from 'react'; import { Content, Header, Page } from '@backstage/core-components'; import { Grid, List, Card, CardContent } from '@material-ui/core'; import { diff --git a/docs/features/search/how-to-guides.md b/docs/features/search/how-to-guides.md index 0476ef6c24..7055db1138 100644 --- a/docs/features/search/how-to-guides.md +++ b/docs/features/search/how-to-guides.md @@ -242,8 +242,6 @@ which renderers to use. Note that the order of the renderers matters! The first Here is an example of customizing your `SearchPage`: ```tsx title="packages/app/src/components/searchPage.tsx" -import React from 'react'; - import { Grid, Paper } from '@material-ui/core'; import BuildIcon from '@material-ui/icons/Build'; @@ -325,8 +323,6 @@ export const Root = ({ children }: PropsWithChildren<{}>) => { Assuming you have completely customized your SearchModal, here's an example that renders results with extensions: ```tsx title="packages/app/src/components/searchModal.tsx" -import React from 'react'; - import { DialogContent, DialogTitle, Paper } from '@material-ui/core'; import BuildIcon from '@material-ui/icons/Build'; diff --git a/docs/features/software-catalog/catalog-customization.md b/docs/features/software-catalog/catalog-customization.md index 38c4b2a951..1c36301605 100644 --- a/docs/features/software-catalog/catalog-customization.md +++ b/docs/features/software-catalog/catalog-customization.md @@ -442,7 +442,6 @@ import { EntityTypePicker, UserListPicker, } from '@backstage/plugin-catalog-react'; -import React from 'react'; export const CustomCatalogPage = () => { const orgName = diff --git a/docs/features/software-templates/writing-custom-field-extensions.md b/docs/features/software-templates/writing-custom-field-extensions.md index 6ff9f195eb..20f36fd1a6 100644 --- a/docs/features/software-templates/writing-custom-field-extensions.md +++ b/docs/features/software-templates/writing-custom-field-extensions.md @@ -29,7 +29,6 @@ As an example, we will create a component that validates whether a string is in ```tsx //packages/app/src/scaffolder/ValidateKebabCase/ValidateKebabCaseExtension.tsx -import React from 'react'; import { FieldExtensionComponentProps } from '@backstage/plugin-scaffolder-react'; import type { FieldValidation } from '@rjsf/utils'; import FormControl from '@material-ui/core/FormControl'; diff --git a/docs/features/software-templates/writing-custom-step-layouts.md b/docs/features/software-templates/writing-custom-step-layouts.md index 93e49efb44..f2ed5eb96d 100644 --- a/docs/features/software-templates/writing-custom-step-layouts.md +++ b/docs/features/software-templates/writing-custom-step-layouts.md @@ -18,8 +18,7 @@ This is the same [field](https://rjsf-team.github.io/react-jsonschema-form/docs/ The [createScaffolderLayout](https://backstage.io/docs/reference/plugin-scaffolder-react.createscaffolderlayout) function is used to mark a component as a custom step layout: -```ts -import React from 'react'; +```tsx import { scaffolderPlugin } from '@backstage/plugin-scaffolder'; import { createScaffolderLayout, diff --git a/docs/features/techdocs/addons.md b/docs/features/techdocs/addons.md index a34c2f1162..435239794b 100644 --- a/docs/features/techdocs/addons.md +++ b/docs/features/techdocs/addons.md @@ -181,8 +181,7 @@ provided by the Addon framework. ```tsx // plugins/your-plugin/src/addons/MakeAllImagesCatGifs.tsx - -import React, { useEffect } from 'react'; +import { useEffect } from 'react'; import { useShadowRootElements } from '@backstage/plugin-techdocs-react'; // This is a normal react component; in order to make it an Addon, you would diff --git a/docs/features/techdocs/how-to-guides.md b/docs/features/techdocs/how-to-guides.md index 9444dc9b6e..014c8309b0 100644 --- a/docs/features/techdocs/how-to-guides.md +++ b/docs/features/techdocs/how-to-guides.md @@ -135,6 +135,7 @@ You can easily customize the TechDocs home page using TechDocs panel layout Modify your `App.tsx` as follows: ```tsx +import { Fragment, PropsWithChildren } from 'react'; import { TechDocsCustomHome } from '@backstage/plugin-techdocs'; //... @@ -175,7 +176,7 @@ const techDocsTabsConfig = [ filterPredicate: filterEntity, panelType: 'TechDocsIndexPage', title: 'All', - panelProps: { PageWrapper: React.Fragment, CustomHeader: React.Fragment, options: options }, + panelProps: { PageWrapper: Fragment, CustomHeader: Fragment, options: options }, }, ], }, @@ -184,7 +185,7 @@ const docsFilter = { kind: ['Location', 'Resource', 'Component'], 'metadata.annotations.featured-docs': CATALOG_FILTER_EXISTS, } -const customPageWrapper = ({ children }: React.PropsWithChildren<{}>) => +const customPageWrapper = ({ children }: PropsWithChildren<{}>) => ({children}) const AppRoutes = () => { @@ -212,7 +213,7 @@ maintain such a component in a new directory at For example, you can define the following Custom home page component: ```tsx -import React from 'react'; +import { ReactNode } from 'react'; import { Content } from '@backstage/core-components'; import { @@ -232,7 +233,7 @@ import { EntityListDocsGrid } from '@backstage/plugin-techdocs'; export type CustomTechDocsHomeProps = { groups?: Array<{ - title: React.ReactNode; + title: ReactNode; filterPredicate: ((entity: Entity) => boolean) | string; }>; }; diff --git a/docs/frontend-system/architecture/36-routes.md b/docs/frontend-system/architecture/36-routes.md index 8ed3024edd..e5d316e751 100644 --- a/docs/frontend-system/architecture/36-routes.md +++ b/docs/frontend-system/architecture/36-routes.md @@ -40,7 +40,6 @@ Route refs do not have any behavior themselves. They are an opaque value that re The code snippet in the previous section does not indicate which plugin the route belongs to. To do so, you have to use it in the creation of any kind of routable extension, such as a page extension: ```tsx title="plugins/catalog/src/plugin.tsx" -import React from 'react'; import { createFrontendPlugin, createPageExtension, @@ -91,7 +90,6 @@ Route references can be used to link to page in the same plugin, or to pages in Suppose we are creating a plugin that renders a Catalog index page with a link to a "Foo" component details page. Here is the code for the index page: ```tsx title="plugins/catalog/src/components/IndexPage.tsx" -import React from 'react'; import { useRouteRef } from '@backstage/frontend-plugin-api'; import { detailsRouteRef } from '../routes'; @@ -125,7 +123,6 @@ We use the `useRouteRef` hook to create a link generator function that returns t Let's see how the details page can get the parameters from the URL: ```tsx title="plugins/catalog/src/components/DetailsPage.tsx" -import React from 'react'; import { useRouteRefParams } from '@backstage/frontend-plugin-api'; import { detailsRouteRef } from '../routes'; @@ -169,7 +166,6 @@ export const createComponentExternalRouteRef = createExternalRouteRef(); External routes are also used in a similar way as regular routes: ```tsx title="plugins/catalog/src/components/IndexPage.tsx" -import React from 'react'; import { useRouteRef } from '@backstage/frontend-plugin-api'; import { createComponentExternalRouteRef } from '../routes'; @@ -194,7 +190,6 @@ Given the above binding, using `useRouteRef(createComponentExternalRouteRef)` wi Now the only thing left is to provide the page and external route via a plugin: ```tsx title="plugins/catalog/src/plugin.tsx" -import React from 'react'; import { createFrontendPlugin, createPageExtension, @@ -333,7 +328,6 @@ export const detailsSubRouteRef = createSubRouteRef({ Using subroutes in a page extension is as simple as this: ```tsx title="plugins/catalog/src/components/IndexPage.tsx" -import React from 'react'; import { Routes, Route, useLocation } from 'react-router-dom'; import { useRouteRef } from '@backstage/frontend-plugin-api'; import { indexRouteRef, detailsSubRouteRef } from '../routes'; @@ -381,7 +375,6 @@ export const IndexPage = () => { This is how you can get the parameters of a sub route URL: ```tsx title="plugins/catalog/src/components/DetailsPage.tsx" -import React from 'react'; import { useParams } from 'react-router-dom'; export const DetailsPage = () => { @@ -405,7 +398,6 @@ export const DetailsPage = () => { Finally, see how a plugin can provide subroutes: ```tsx title="plugins/catalog/src/plugin.tsx" -import React from 'react'; import { createFrontendPlugin, createPageExtension, diff --git a/docs/frontend-system/building-apps/08-migrating.md b/docs/frontend-system/building-apps/08-migrating.md index 304bc0f84b..ecd036af61 100644 --- a/docs/frontend-system/building-apps/08-migrating.md +++ b/docs/frontend-system/building-apps/08-migrating.md @@ -86,7 +86,6 @@ There is one more detail that we need to deal with before moving on. The `app.cr ```tsx title="in packages/app/src/index.tsx" import '@backstage/cli/asset-types'; -import React from 'react'; import ReactDOM from 'react-dom/client'; // highlight-remove-next-line import App from './App'; diff --git a/docs/frontend-system/building-plugins/02-testing.md b/docs/frontend-system/building-plugins/02-testing.md index 225c570fbd..87c22b839b 100644 --- a/docs/frontend-system/building-plugins/02-testing.md +++ b/docs/frontend-system/building-plugins/02-testing.md @@ -25,7 +25,6 @@ A component can be used for more than one extension, and it should be tested ind Use the `renderInTestApp` helper to render a given component inside a Backstage test app: ```tsx -import React from 'react'; import { screen } from '@testing-library/react'; import { renderInTestApp } from '@backstage/frontend-test-utils'; import { EntityDetails } from './plugin'; @@ -44,7 +43,6 @@ describe('Entity details component', () => { To mock [Utility APIs](../architecture/33-utility-apis.md) that are used by your component you can use the `TestApiProvider` to override individual API implementations. In the snippet below, we wrap the component within a `TestApiProvider` in order to mock the catalog client API: ```tsx -import React from 'react'; import { screen } from '@testing-library/react'; import { renderInTestApp, diff --git a/docs/getting-started/app-custom-theme.md b/docs/getting-started/app-custom-theme.md index 1bff5b1eb0..c8c4ee8e5a 100644 --- a/docs/getting-started/app-custom-theme.md +++ b/docs/getting-started/app-custom-theme.md @@ -416,8 +416,6 @@ In your front-end application, locate the `src` folder. We suggest creating the ```tsx title="customIcons.tsx" import { SvgIcon, SvgIconProps } from '@material-ui/core'; -import React from 'react'; - export const ExampleIcon = (props: SvgIconProps) => ( ( /* We will shortly compose a pretty homepage here. */

    Welcome to Backstage!

    @@ -156,7 +154,6 @@ contribute, check the > [Contributing documentation](https://github.com/backstage/backstage/blob/master/plugins/home/README.md#contributing) ```tsx -import React from 'react'; import Grid from '@material-ui/core/Grid'; import { HomePageCompanyLogo } from '@backstage/plugin-home'; diff --git a/docs/tutorials/enable-public-entry.md b/docs/tutorials/enable-public-entry.md index 1ba4983618..e430768785 100644 --- a/docs/tutorials/enable-public-entry.md +++ b/docs/tutorials/enable-public-entry.md @@ -32,7 +32,6 @@ With that, Backstage's cli and backend will detect public entry point and serve 2. This file is the public entry point for your application, and it should only contain what unauthenticated users should see: ```tsx title="in packages/app/src/index-public-experimental.tsx" - import React from 'react'; import ReactDOM from 'react-dom/client'; import { createApp } from '@backstage/app-defaults'; import { AppRouter } from '@backstage/core-app-api'; diff --git a/docs/tutorials/quickstart-app-plugin.md b/docs/tutorials/quickstart-app-plugin.md index e02d2f546f..e9b670c3ba 100644 --- a/docs/tutorials/quickstart-app-plugin.md +++ b/docs/tutorials/quickstart-app-plugin.md @@ -134,7 +134,6 @@ changes, let's start by wiping this component clean. 1. Replace everything in the file with the following: ```tsx -import React from 'react'; import useAsync from 'react-use/lib/useAsync'; import Alert from '@material-ui/lab/Alert'; import { Table, TableColumn, Progress } from '@backstage/core-components'; diff --git a/docs/tutorials/react18-migration.md b/docs/tutorials/react18-migration.md index c11bc83a7e..67f3dabb5d 100644 --- a/docs/tutorials/react18-migration.md +++ b/docs/tutorials/react18-migration.md @@ -50,7 +50,6 @@ To switch a project to React 18, there are generally three changes that need to ```tsx title="packages/app/src/index.tsx" import '@backstage/cli/asset-types'; -import React from 'react'; // highlight-remove-next-line import ReactDOM from 'react-dom'; // highlight-add-next-line diff --git a/packages/app-defaults/src/createApp.test.tsx b/packages/app-defaults/src/createApp.test.tsx index 45988a4840..a3bc7eacb7 100644 --- a/packages/app-defaults/src/createApp.test.tsx +++ b/packages/app-defaults/src/createApp.test.tsx @@ -16,7 +16,7 @@ import { screen } from '@testing-library/react'; import { renderWithEffects } from '@backstage/test-utils'; -import React, { PropsWithChildren } from 'react'; +import { PropsWithChildren } from 'react'; import { MemoryRouter } from 'react-router-dom'; import { createApp } from './createApp'; diff --git a/packages/app-defaults/src/defaults/components.test.tsx b/packages/app-defaults/src/defaults/components.test.tsx index 865eeed8a7..14e32be99e 100644 --- a/packages/app-defaults/src/defaults/components.test.tsx +++ b/packages/app-defaults/src/defaults/components.test.tsx @@ -15,7 +15,6 @@ */ import { render, screen } from '@testing-library/react'; -import React from 'react'; import { MemoryRouter } from 'react-router-dom'; import { OptionallyWrapInRouter } from './components'; diff --git a/packages/app-defaults/src/defaults/components.tsx b/packages/app-defaults/src/defaults/components.tsx index 9b58694f2b..609bc6a7dd 100644 --- a/packages/app-defaults/src/defaults/components.tsx +++ b/packages/app-defaults/src/defaults/components.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { ReactNode } from 'react'; +import { ReactNode } from 'react'; import Button from '@material-ui/core/Button'; import { ErrorPanel, Progress, ErrorPage } from '@backstage/core-components'; import { diff --git a/packages/app-defaults/src/defaults/themes.tsx b/packages/app-defaults/src/defaults/themes.tsx index 10368bd3bc..6929b53727 100644 --- a/packages/app-defaults/src/defaults/themes.tsx +++ b/packages/app-defaults/src/defaults/themes.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { UnifiedThemeProvider, themes as builtinThemes, diff --git a/packages/app-next-example-plugin/src/Component.tsx b/packages/app-next-example-plugin/src/Component.tsx index e90be162ed..225af0454b 100644 --- a/packages/app-next-example-plugin/src/Component.tsx +++ b/packages/app-next-example-plugin/src/Component.tsx @@ -14,8 +14,6 @@ * limitations under the License. */ -import React from 'react'; - export const Component = () => (

    SHIP IT!

    diff --git a/packages/app-next-example-plugin/src/ExampleSidebarItem.tsx b/packages/app-next-example-plugin/src/ExampleSidebarItem.tsx index 20e84f1933..1b206d7d1c 100644 --- a/packages/app-next-example-plugin/src/ExampleSidebarItem.tsx +++ b/packages/app-next-example-plugin/src/ExampleSidebarItem.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { SidebarItem } from '@backstage/core-components'; import SaveIcon from '@material-ui/icons/Save'; diff --git a/packages/app-next-example-plugin/src/plugin.tsx b/packages/app-next-example-plugin/src/plugin.tsx index 818e8abc84..9d335f480c 100644 --- a/packages/app-next-example-plugin/src/plugin.tsx +++ b/packages/app-next-example-plugin/src/plugin.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { PageBlueprint, createFrontendPlugin, diff --git a/packages/app-next/src/App.tsx b/packages/app-next/src/App.tsx index 1992d5b35f..0ecb46e06a 100644 --- a/packages/app-next/src/App.tsx +++ b/packages/app-next/src/App.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { createApp } from '@backstage/frontend-defaults'; import { pagesPlugin } from './examples/pagesPlugin'; import notFoundErrorPage from './examples/notFoundErrorPageExtension'; diff --git a/packages/app-next/src/HomePage.tsx b/packages/app-next/src/HomePage.tsx index d6ee5cbb04..574f285f19 100644 --- a/packages/app-next/src/HomePage.tsx +++ b/packages/app-next/src/HomePage.tsx @@ -27,7 +27,6 @@ import { WelcomeTitle, } from '@backstage/plugin-home'; import { Content, Header, Page } from '@backstage/core-components'; -import React from 'react'; import HomeIcon from '@material-ui/icons/Home'; const clockConfigs: ClockConfig[] = [ diff --git a/packages/app-next/src/examples/notFoundErrorPageExtension.tsx b/packages/app-next/src/examples/notFoundErrorPageExtension.tsx index 458e716910..a636b2b220 100644 --- a/packages/app-next/src/examples/notFoundErrorPageExtension.tsx +++ b/packages/app-next/src/examples/notFoundErrorPageExtension.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { createComponentExtension, coreComponentRefs, diff --git a/packages/app-next/src/examples/pagesPlugin.tsx b/packages/app-next/src/examples/pagesPlugin.tsx index 8eca7d1e6c..1d0f9f3e0e 100644 --- a/packages/app-next/src/examples/pagesPlugin.tsx +++ b/packages/app-next/src/examples/pagesPlugin.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { Link } from '@backstage/core-components'; import { createFrontendPlugin, diff --git a/packages/app/src/App.test.tsx b/packages/app/src/App.test.tsx index 919a60e53d..c29eb2f3d9 100644 --- a/packages/app/src/App.test.tsx +++ b/packages/app/src/App.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { render, waitFor } from '@testing-library/react'; import App from './App'; diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx index 7e914bdc9b..3927992fd4 100644 --- a/packages/app/src/App.tsx +++ b/packages/app/src/App.tsx @@ -63,7 +63,6 @@ import { } from '@backstage/plugin-user-settings'; import { AdvancedSettings } from './components/advancedSettings'; import AlarmIcon from '@material-ui/icons/Alarm'; -import React from 'react'; import { Navigate, Route } from 'react-router-dom'; import { apis } from './apis'; import { entityPage } from './components/catalog/EntityPage'; diff --git a/packages/app/src/components/Root/LogoFull.tsx b/packages/app/src/components/Root/LogoFull.tsx index da6911bb17..e25416f5dc 100644 --- a/packages/app/src/components/Root/LogoFull.tsx +++ b/packages/app/src/components/Root/LogoFull.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; const useStyles = makeStyles({ diff --git a/packages/app/src/components/Root/LogoIcon.jsx b/packages/app/src/components/Root/LogoIcon.jsx index 966b491674..9ebb7800cf 100644 --- a/packages/app/src/components/Root/LogoIcon.jsx +++ b/packages/app/src/components/Root/LogoIcon.jsx @@ -16,7 +16,6 @@ // @ts-check // NOTE: This file is intentionally .jsx, so that there is one file in this repo where we make sure .jsx files work. -import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; const useStyles = makeStyles({ diff --git a/packages/app/src/components/Root/Root.tsx b/packages/app/src/components/Root/Root.tsx index b74c6459d8..6f2c85c934 100644 --- a/packages/app/src/components/Root/Root.tsx +++ b/packages/app/src/components/Root/Root.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { PropsWithChildren } from 'react'; +import { PropsWithChildren } from 'react'; import { makeStyles } from '@material-ui/core/styles'; import HomeIcon from '@material-ui/icons/Home'; import RuleIcon from '@material-ui/icons/AssignmentTurnedIn'; diff --git a/packages/app/src/components/advancedSettings/AdvancedSettings.tsx b/packages/app/src/components/advancedSettings/AdvancedSettings.tsx index 3383198a1f..a67db21fff 100644 --- a/packages/app/src/components/advancedSettings/AdvancedSettings.tsx +++ b/packages/app/src/components/advancedSettings/AdvancedSettings.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React from 'react'; +import { ChangeEvent } from 'react'; import { InfoCard } from '@backstage/core-components'; import List from '@material-ui/core/List'; import Grid from '@material-ui/core/Grid'; @@ -30,7 +30,7 @@ export function AdvancedSettings() { 'off', ); - const toggleValue = (ev: React.ChangeEvent) => { + const toggleValue = (ev: ChangeEvent) => { setValue(ev.currentTarget.checked ? 'on' : 'off'); }; diff --git a/packages/app/src/components/catalog/EntityPage.test.tsx b/packages/app/src/components/catalog/EntityPage.test.tsx index 06a568279b..effa2d09ad 100644 --- a/packages/app/src/components/catalog/EntityPage.test.tsx +++ b/packages/app/src/components/catalog/EntityPage.test.tsx @@ -26,7 +26,6 @@ import { renderInTestApp, TestApiProvider, } from '@backstage/test-utils'; -import React from 'react'; import { cicdContent } from './EntityPage'; import { catalogApiMock } from '@backstage/plugin-catalog-react/testUtils'; diff --git a/packages/app/src/components/catalog/EntityPage.tsx b/packages/app/src/components/catalog/EntityPage.tsx index 11fc60bd0e..08d4d921b5 100644 --- a/packages/app/src/components/catalog/EntityPage.tsx +++ b/packages/app/src/components/catalog/EntityPage.tsx @@ -72,7 +72,7 @@ import { } from '@backstage/plugin-org'; import Button from '@material-ui/core/Button'; import Grid from '@material-ui/core/Grid'; -import React, { ReactNode } from 'react'; +import { ReactNode } from 'react'; import { TechDocsAddons } from '@backstage/plugin-techdocs-react'; import { TextSize, diff --git a/packages/app/src/components/devtools/CustomDevToolsPage.tsx b/packages/app/src/components/devtools/CustomDevToolsPage.tsx index 788b555c6d..d1c68d9884 100644 --- a/packages/app/src/components/devtools/CustomDevToolsPage.tsx +++ b/packages/app/src/components/devtools/CustomDevToolsPage.tsx @@ -20,7 +20,6 @@ import { InfoContent, } from '@backstage/plugin-devtools'; import { DevToolsLayout } from '@backstage/plugin-devtools'; -import React from 'react'; import { UnprocessedEntitiesContent } from '@backstage/plugin-catalog-unprocessed-entities'; const DevToolsPage = () => { diff --git a/packages/app/src/components/home/HomePage.tsx b/packages/app/src/components/home/HomePage.tsx index 026cd5faff..f0f49ab34e 100644 --- a/packages/app/src/components/home/HomePage.tsx +++ b/packages/app/src/components/home/HomePage.tsx @@ -28,7 +28,6 @@ import { } from '@backstage/plugin-home'; import { Content, Header, Page } from '@backstage/core-components'; import { HomePageSearchBar } from '@backstage/plugin-search'; -import React from 'react'; import HomeIcon from '@material-ui/icons/Home'; const clockConfigs: ClockConfig[] = [ diff --git a/packages/app/src/components/home/templates/CustomizableTemplate.stories.tsx b/packages/app/src/components/home/templates/CustomizableTemplate.stories.tsx index eb90b1fe84..325fee4ca4 100644 --- a/packages/app/src/components/home/templates/CustomizableTemplate.stories.tsx +++ b/packages/app/src/components/home/templates/CustomizableTemplate.stories.tsx @@ -1,148 +1,148 @@ -/* - * Copyright 2023 The Backstage Authors - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { - HomePageStarredEntities, - HomePageRandomJoke, - CustomHomepageGrid, -} from '@backstage/plugin-home'; -import { - starredEntitiesApiRef, - MockStarredEntitiesApi, - entityRouteRef, - catalogApiRef, -} from '@backstage/plugin-catalog-react'; -import { catalogApiMock } from '@backstage/plugin-catalog-react/testUtils'; -import { wrapInTestApp, TestApiProvider } from '@backstage/test-utils'; -import { configApiRef } from '@backstage/core-plugin-api'; -import { ConfigReader } from '@backstage/config'; -import { searchApiRef } from '@backstage/plugin-search-react'; -import { HomePageSearchBar, searchPlugin } from '@backstage/plugin-search'; -import React, { ComponentType } from 'react'; - -const entities = [ - { - apiVersion: '1', - kind: 'Component', - metadata: { - name: 'mock-starred-entity', - title: 'Mock Starred Entity!', - }, - }, - { - apiVersion: '1', - kind: 'Component', - metadata: { - name: 'mock-starred-entity-2', - title: 'Mock Starred Entity 2!', - }, - }, - { - apiVersion: '1', - kind: 'Component', - metadata: { - name: 'mock-starred-entity-3', - title: 'Mock Starred Entity 3!', - }, - }, - { - apiVersion: '1', - kind: 'Component', - metadata: { - name: 'mock-starred-entity-4', - title: 'Mock Starred Entity 4!', - }, - }, -]; - -const catalogApi = catalogApiMock({ entities }); - -const starredEntitiesApi = new MockStarredEntitiesApi(); -starredEntitiesApi.toggleStarred('component:default/example-starred-entity'); -starredEntitiesApi.toggleStarred('component:default/example-starred-entity-2'); -starredEntitiesApi.toggleStarred('component:default/example-starred-entity-3'); -starredEntitiesApi.toggleStarred('component:default/example-starred-entity-4'); - -export default { - title: 'Plugins/Home/Templates', - decorators: [ - (Story: ComponentType<{}>) => - wrapInTestApp( - <> - Promise.resolve({ results: [] }) }], - [ - configApiRef, - new ConfigReader({ - backend: { - baseUrl: 'https://localhost:7007', - }, - }), - ], - ]} - > - - - , - { - mountedRoutes: { - '/hello-company': searchPlugin.routes.root, - '/catalog/:namespace/:kind/:name': entityRouteRef, - }, - }, - ), - ], -}; -export const CustomizableTemplate = () => { - // This is the default configuration that is shown to the user - // when first arriving to the homepage. - const defaultConfig = [ - { - component: 'HomePageSearchBar', - x: 0, - y: 0, - width: 12, - height: 5, - }, - { - component: 'HomePageRandomJoke', - x: 0, - y: 2, - width: 6, - height: 16, - }, - { - component: 'HomePageStarredEntities', - x: 6, - y: 2, - width: 6, - height: 12, - }, - ]; - - return ( - - // Insert the allowed widgets inside the grid. User can add, organize and - // remove the widgets as they want. - - - - - ); -}; +/* + * Copyright 2023 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { + HomePageStarredEntities, + HomePageRandomJoke, + CustomHomepageGrid, +} from '@backstage/plugin-home'; +import { + starredEntitiesApiRef, + MockStarredEntitiesApi, + entityRouteRef, + catalogApiRef, +} from '@backstage/plugin-catalog-react'; +import { catalogApiMock } from '@backstage/plugin-catalog-react/testUtils'; +import { wrapInTestApp, TestApiProvider } from '@backstage/test-utils'; +import { configApiRef } from '@backstage/core-plugin-api'; +import { ConfigReader } from '@backstage/config'; +import { searchApiRef } from '@backstage/plugin-search-react'; +import { HomePageSearchBar, searchPlugin } from '@backstage/plugin-search'; +import { ComponentType } from 'react'; + +const entities = [ + { + apiVersion: '1', + kind: 'Component', + metadata: { + name: 'mock-starred-entity', + title: 'Mock Starred Entity!', + }, + }, + { + apiVersion: '1', + kind: 'Component', + metadata: { + name: 'mock-starred-entity-2', + title: 'Mock Starred Entity 2!', + }, + }, + { + apiVersion: '1', + kind: 'Component', + metadata: { + name: 'mock-starred-entity-3', + title: 'Mock Starred Entity 3!', + }, + }, + { + apiVersion: '1', + kind: 'Component', + metadata: { + name: 'mock-starred-entity-4', + title: 'Mock Starred Entity 4!', + }, + }, +]; + +const catalogApi = catalogApiMock({ entities }); + +const starredEntitiesApi = new MockStarredEntitiesApi(); +starredEntitiesApi.toggleStarred('component:default/example-starred-entity'); +starredEntitiesApi.toggleStarred('component:default/example-starred-entity-2'); +starredEntitiesApi.toggleStarred('component:default/example-starred-entity-3'); +starredEntitiesApi.toggleStarred('component:default/example-starred-entity-4'); + +export default { + title: 'Plugins/Home/Templates', + decorators: [ + (Story: ComponentType<{}>) => + wrapInTestApp( + <> + Promise.resolve({ results: [] }) }], + [ + configApiRef, + new ConfigReader({ + backend: { + baseUrl: 'https://localhost:7007', + }, + }), + ], + ]} + > + + + , + { + mountedRoutes: { + '/hello-company': searchPlugin.routes.root, + '/catalog/:namespace/:kind/:name': entityRouteRef, + }, + }, + ), + ], +}; +export const CustomizableTemplate = () => { + // This is the default configuration that is shown to the user + // when first arriving to the homepage. + const defaultConfig = [ + { + component: 'HomePageSearchBar', + x: 0, + y: 0, + width: 12, + height: 5, + }, + { + component: 'HomePageRandomJoke', + x: 0, + y: 2, + width: 6, + height: 16, + }, + { + component: 'HomePageStarredEntities', + x: 6, + y: 2, + width: 6, + height: 12, + }, + ]; + + return ( + + // Insert the allowed widgets inside the grid. User can add, organize and + // remove the widgets as they want. + + + + + ); +}; diff --git a/packages/app/src/components/home/templates/DefaultTemplate.stories.tsx b/packages/app/src/components/home/templates/DefaultTemplate.stories.tsx index f16f98f9af..9ac8bdaaf8 100644 --- a/packages/app/src/components/home/templates/DefaultTemplate.stories.tsx +++ b/packages/app/src/components/home/templates/DefaultTemplate.stories.tsx @@ -1,196 +1,196 @@ -/* - * Copyright 2021 The Backstage Authors - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { - HomePageToolkit, - HomePageCompanyLogo, - HomePageStarredEntities, - TemplateBackstageLogo, - TemplateBackstageLogoIcon, -} from '@backstage/plugin-home'; -import { wrapInTestApp, TestApiProvider } from '@backstage/test-utils'; -import { Content, Page, InfoCard } from '@backstage/core-components'; -import { - starredEntitiesApiRef, - MockStarredEntitiesApi, - entityRouteRef, - catalogApiRef, -} from '@backstage/plugin-catalog-react'; -import { catalogApiMock } from '@backstage/plugin-catalog-react/testUtils'; -import { configApiRef } from '@backstage/core-plugin-api'; -import { ConfigReader } from '@backstage/config'; -import { HomePageSearchBar, searchPlugin } from '@backstage/plugin-search'; -import { - searchApiRef, - SearchContextProvider, -} from '@backstage/plugin-search-react'; -import Grid from '@material-ui/core/Grid'; -import { makeStyles } from '@material-ui/core/styles'; -import React, { ComponentType, PropsWithChildren } from 'react'; - -const entities = [ - { - apiVersion: '1', - kind: 'Component', - metadata: { - name: 'mock-starred-entity', - title: 'Mock Starred Entity!', - }, - }, - { - apiVersion: '1', - kind: 'Component', - metadata: { - name: 'mock-starred-entity-2', - title: 'Mock Starred Entity 2!', - }, - }, - { - apiVersion: '1', - kind: 'Component', - metadata: { - name: 'mock-starred-entity-3', - title: 'Mock Starred Entity 3!', - }, - }, - { - apiVersion: '1', - kind: 'Component', - metadata: { - name: 'mock-starred-entity-4', - title: 'Mock Starred Entity 4!', - }, - }, -]; - -const catalogApi = catalogApiMock({ entities }); - -const starredEntitiesApi = new MockStarredEntitiesApi(); -starredEntitiesApi.toggleStarred('component:default/example-starred-entity'); -starredEntitiesApi.toggleStarred('component:default/example-starred-entity-2'); -starredEntitiesApi.toggleStarred('component:default/example-starred-entity-3'); -starredEntitiesApi.toggleStarred('component:default/example-starred-entity-4'); - -export default { - title: 'Plugins/Home/Templates', - decorators: [ - (Story: ComponentType>) => - wrapInTestApp( - <> - Promise.resolve({ results: [] }) }], - [ - configApiRef, - new ConfigReader({ - stackoverflow: { - baseUrl: 'https://api.stackexchange.com/2.2', - }, - }), - ], - ]} - > - - - , - { - mountedRoutes: { - '/hello-company': searchPlugin.routes.root, - '/catalog/:namespace/:kind/:name': entityRouteRef, - }, - }, - ), - ], -}; - -const useStyles = makeStyles(theme => ({ - searchBarInput: { - maxWidth: '60vw', - margin: 'auto', - backgroundColor: theme.palette.background.paper, - borderRadius: '50px', - boxShadow: theme.shadows[1], - }, - searchBarOutline: { - borderStyle: 'none', - }, -})); - -const useLogoStyles = makeStyles(theme => ({ - container: { - margin: theme.spacing(5, 0), - }, - svg: { - width: 'auto', - height: 100, - }, - path: { - fill: '#7df3e1', - }, -})); - -export const DefaultTemplate = () => { - const classes = useStyles(); - const { svg, path, container } = useLogoStyles(); - - return ( - - - - - } - /> - - - - - - - - - , - })} - /> - - - - {/* placeholder for content */} -
    - - - - - - - - ); -}; +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { + HomePageToolkit, + HomePageCompanyLogo, + HomePageStarredEntities, + TemplateBackstageLogo, + TemplateBackstageLogoIcon, +} from '@backstage/plugin-home'; +import { wrapInTestApp, TestApiProvider } from '@backstage/test-utils'; +import { Content, Page, InfoCard } from '@backstage/core-components'; +import { + starredEntitiesApiRef, + MockStarredEntitiesApi, + entityRouteRef, + catalogApiRef, +} from '@backstage/plugin-catalog-react'; +import { catalogApiMock } from '@backstage/plugin-catalog-react/testUtils'; +import { configApiRef } from '@backstage/core-plugin-api'; +import { ConfigReader } from '@backstage/config'; +import { HomePageSearchBar, searchPlugin } from '@backstage/plugin-search'; +import { + searchApiRef, + SearchContextProvider, +} from '@backstage/plugin-search-react'; +import Grid from '@material-ui/core/Grid'; +import { makeStyles } from '@material-ui/core/styles'; +import { ComponentType, PropsWithChildren } from 'react'; + +const entities = [ + { + apiVersion: '1', + kind: 'Component', + metadata: { + name: 'mock-starred-entity', + title: 'Mock Starred Entity!', + }, + }, + { + apiVersion: '1', + kind: 'Component', + metadata: { + name: 'mock-starred-entity-2', + title: 'Mock Starred Entity 2!', + }, + }, + { + apiVersion: '1', + kind: 'Component', + metadata: { + name: 'mock-starred-entity-3', + title: 'Mock Starred Entity 3!', + }, + }, + { + apiVersion: '1', + kind: 'Component', + metadata: { + name: 'mock-starred-entity-4', + title: 'Mock Starred Entity 4!', + }, + }, +]; + +const catalogApi = catalogApiMock({ entities }); + +const starredEntitiesApi = new MockStarredEntitiesApi(); +starredEntitiesApi.toggleStarred('component:default/example-starred-entity'); +starredEntitiesApi.toggleStarred('component:default/example-starred-entity-2'); +starredEntitiesApi.toggleStarred('component:default/example-starred-entity-3'); +starredEntitiesApi.toggleStarred('component:default/example-starred-entity-4'); + +export default { + title: 'Plugins/Home/Templates', + decorators: [ + (Story: ComponentType>) => + wrapInTestApp( + <> + Promise.resolve({ results: [] }) }], + [ + configApiRef, + new ConfigReader({ + stackoverflow: { + baseUrl: 'https://api.stackexchange.com/2.2', + }, + }), + ], + ]} + > + + + , + { + mountedRoutes: { + '/hello-company': searchPlugin.routes.root, + '/catalog/:namespace/:kind/:name': entityRouteRef, + }, + }, + ), + ], +}; + +const useStyles = makeStyles(theme => ({ + searchBarInput: { + maxWidth: '60vw', + margin: 'auto', + backgroundColor: theme.palette.background.paper, + borderRadius: '50px', + boxShadow: theme.shadows[1], + }, + searchBarOutline: { + borderStyle: 'none', + }, +})); + +const useLogoStyles = makeStyles(theme => ({ + container: { + margin: theme.spacing(5, 0), + }, + svg: { + width: 'auto', + height: 100, + }, + path: { + fill: '#7df3e1', + }, +})); + +export const DefaultTemplate = () => { + const classes = useStyles(); + const { svg, path, container } = useLogoStyles(); + + return ( + + + + + } + /> + + + + + + + + + , + })} + /> + + + + {/* placeholder for content */} +
    + + + + + + + + ); +}; diff --git a/packages/app/src/components/scaffolder/customScaffolderExtensions.tsx b/packages/app/src/components/scaffolder/customScaffolderExtensions.tsx index 953420c3e6..b8a1021804 100644 --- a/packages/app/src/components/scaffolder/customScaffolderExtensions.tsx +++ b/packages/app/src/components/scaffolder/customScaffolderExtensions.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import type { FieldValidation } from '@rjsf/utils'; import { scaffolderPlugin } from '@backstage/plugin-scaffolder'; import TextField from '@material-ui/core/TextField'; diff --git a/packages/app/src/components/scaffolder/customScaffolderLayouts.tsx b/packages/app/src/components/scaffolder/customScaffolderLayouts.tsx index d05635314f..cd5ffd30d2 100644 --- a/packages/app/src/components/scaffolder/customScaffolderLayouts.tsx +++ b/packages/app/src/components/scaffolder/customScaffolderLayouts.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import { createScaffolderLayout, LayoutTemplate, diff --git a/packages/app/src/components/search/SearchModal.tsx b/packages/app/src/components/search/SearchModal.tsx index 0f80d0fc68..77c95399d0 100644 --- a/packages/app/src/components/search/SearchModal.tsx +++ b/packages/app/src/components/search/SearchModal.tsx @@ -39,7 +39,7 @@ import Button from '@material-ui/core/Button'; import IconButton from '@material-ui/core/IconButton'; import ArrowForwardIcon from '@material-ui/icons/ArrowForward'; import CloseIcon from '@material-ui/icons/Close'; -import React, { useCallback, useEffect, useRef } from 'react'; +import { useCallback, useEffect, useRef } from 'react'; import { useNavigate } from 'react-router-dom'; const useStyles = makeStyles(theme => ({ diff --git a/packages/app/src/components/search/SearchPage.tsx b/packages/app/src/components/search/SearchPage.tsx index 5a520e9211..9d45583044 100644 --- a/packages/app/src/components/search/SearchPage.tsx +++ b/packages/app/src/components/search/SearchPage.tsx @@ -42,7 +42,6 @@ import Paper from '@material-ui/core/Paper'; import Grid from '@material-ui/core/Grid'; import { Theme } from '@material-ui/core/styles/createTheme'; import { makeStyles } from '@material-ui/core/styles'; -import React from 'react'; const useStyles = makeStyles((theme: Theme) => ({ filter: { diff --git a/packages/app/src/components/techdocs/TechDocsPage.tsx b/packages/app/src/components/techdocs/TechDocsPage.tsx index d79acbe0a7..158df00069 100644 --- a/packages/app/src/components/techdocs/TechDocsPage.tsx +++ b/packages/app/src/components/techdocs/TechDocsPage.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { Page } from '@backstage/core-components'; import { TechDocsReaderPageHeader, diff --git a/packages/app/src/index-public-experimental.tsx b/packages/app/src/index-public-experimental.tsx index d295c7da09..fb79eb921a 100644 --- a/packages/app/src/index-public-experimental.tsx +++ b/packages/app/src/index-public-experimental.tsx @@ -22,7 +22,6 @@ import { SignInPage, } from '@backstage/core-components'; import { CookieAuthRedirect } from '@backstage/plugin-auth-react'; -import React from 'react'; import ReactDOM from 'react-dom/client'; import { providers } from '../src/identityProviders'; import { diff --git a/packages/app/src/index.tsx b/packages/app/src/index.tsx index a26c26e284..cb6eeb3185 100644 --- a/packages/app/src/index.tsx +++ b/packages/app/src/index.tsx @@ -15,7 +15,6 @@ */ import '@backstage/cli/asset-types'; -import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import '@backstage/canon/css/styles.css'; diff --git a/packages/canon/.storybook/preview.tsx b/packages/canon/.storybook/preview.tsx index b1bfa2dc88..405cdfa093 100644 --- a/packages/canon/.storybook/preview.tsx +++ b/packages/canon/.storybook/preview.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import type { Preview, ReactRenderer } from '@storybook/react'; import { withThemeByDataAttribute } from '@storybook/addon-themes'; import '../src/css/styles.css'; diff --git a/packages/canon/src/components/Box/Box.stories.tsx b/packages/canon/src/components/Box/Box.stories.tsx index e46dadb60a..620b2818a1 100644 --- a/packages/canon/src/components/Box/Box.stories.tsx +++ b/packages/canon/src/components/Box/Box.stories.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React from 'react'; +import { ReactNode } from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import { Box } from './Box'; import { Flex } from '../Flex'; @@ -67,7 +67,7 @@ export const Preview: Story = { }, }; -const CardDisplay = ({ children }: { children?: React.ReactNode }) => { +const CardDisplay = ({ children }: { children?: ReactNode }) => { return (
    ( +export const Checkbox = forwardRef( (props, ref) => { const { label, diff --git a/packages/canon/src/components/Container/Container.stories.tsx b/packages/canon/src/components/Container/Container.stories.tsx index c1b886f530..5e434b7eb0 100644 --- a/packages/canon/src/components/Container/Container.stories.tsx +++ b/packages/canon/src/components/Container/Container.stories.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import { Box } from '../Box/Box'; import { Container } from './Container'; diff --git a/packages/canon/src/components/Flex/Flex.stories.tsx b/packages/canon/src/components/Flex/Flex.stories.tsx index 58f96ce157..bbb5e84692 100644 --- a/packages/canon/src/components/Flex/Flex.stories.tsx +++ b/packages/canon/src/components/Flex/Flex.stories.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import { Flex } from './Flex'; diff --git a/packages/canon/src/components/Grid/Grid.stories.tsx b/packages/canon/src/components/Grid/Grid.stories.tsx index b767c687b7..233d66bae7 100644 --- a/packages/canon/src/components/Grid/Grid.stories.tsx +++ b/packages/canon/src/components/Grid/Grid.stories.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import { Grid } from './Grid'; import type { GridItemProps } from './types'; diff --git a/packages/canon/src/components/Heading/Heading.stories.tsx b/packages/canon/src/components/Heading/Heading.stories.tsx index d568bcaf7f..1fbc882d5d 100644 --- a/packages/canon/src/components/Heading/Heading.stories.tsx +++ b/packages/canon/src/components/Heading/Heading.stories.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import { Heading } from './Heading'; import { Flex } from '../Flex'; diff --git a/packages/canon/src/components/Heading/Heading.tsx b/packages/canon/src/components/Heading/Heading.tsx index 6c16f32ffd..5fe69bbc57 100644 --- a/packages/canon/src/components/Heading/Heading.tsx +++ b/packages/canon/src/components/Heading/Heading.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { forwardRef } from 'react'; +import { forwardRef } from 'react'; import clsx from 'clsx'; import { useResponsiveValue } from '../../hooks/useResponsiveValue'; diff --git a/packages/canon/src/components/Icon/Icon.stories.tsx b/packages/canon/src/components/Icon/Icon.stories.tsx index 0325e04914..92f15d8ce2 100644 --- a/packages/canon/src/components/Icon/Icon.stories.tsx +++ b/packages/canon/src/components/Icon/Icon.stories.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { Meta, StoryObj } from '@storybook/react'; import { Icon } from './Icon'; import { IconProvider } from './provider'; diff --git a/packages/canon/src/components/Icon/Icon.tsx b/packages/canon/src/components/Icon/Icon.tsx index e81acd4c74..8877420a84 100644 --- a/packages/canon/src/components/Icon/Icon.tsx +++ b/packages/canon/src/components/Icon/Icon.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React from 'react'; +import { ComponentType } from 'react'; import { useIcons } from './context'; import type { IconProps } from './types'; import clsx from 'clsx'; @@ -24,7 +24,7 @@ export const Icon = (props: IconProps) => { const { name, size, className, style, ...restProps } = props; const { icons } = useIcons(); - const CanonIcon = icons[name] as React.ComponentType>; + const CanonIcon = icons[name] as ComponentType>; if (!CanonIcon) { console.error(`Icon "${name}" not found or is not a valid component.`); diff --git a/packages/canon/src/components/Icon/provider.tsx b/packages/canon/src/components/Icon/provider.tsx index 0f296cfee4..7f78096edb 100644 --- a/packages/canon/src/components/Icon/provider.tsx +++ b/packages/canon/src/components/Icon/provider.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { icons } from './icons'; import { IconContext } from './context'; import type { IconProviderProps } from './types'; diff --git a/packages/canon/src/components/IconButton/IconButton.stories.tsx b/packages/canon/src/components/IconButton/IconButton.stories.tsx index d9b591cec8..edac9bd7e8 100644 --- a/packages/canon/src/components/IconButton/IconButton.stories.tsx +++ b/packages/canon/src/components/IconButton/IconButton.stories.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import { IconButton } from './IconButton'; import { Flex } from '../Flex'; diff --git a/packages/canon/src/components/IconButton/IconButton.tsx b/packages/canon/src/components/IconButton/IconButton.tsx index 0f28ed963f..e05e27e372 100644 --- a/packages/canon/src/components/IconButton/IconButton.tsx +++ b/packages/canon/src/components/IconButton/IconButton.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { forwardRef } from 'react'; +import { forwardRef } from 'react'; import { Icon } from '../Icon'; import clsx from 'clsx'; import { useResponsiveValue } from '../../hooks/useResponsiveValue'; diff --git a/packages/canon/src/components/Link/Link.stories.tsx b/packages/canon/src/components/Link/Link.stories.tsx index bdaa4006ae..03850a5be3 100644 --- a/packages/canon/src/components/Link/Link.stories.tsx +++ b/packages/canon/src/components/Link/Link.stories.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import { Link } from './Link'; import { Flex } from '../Flex'; diff --git a/packages/canon/src/components/Link/Link.tsx b/packages/canon/src/components/Link/Link.tsx index e9d0d6aadf..a4ccb8428b 100644 --- a/packages/canon/src/components/Link/Link.tsx +++ b/packages/canon/src/components/Link/Link.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { forwardRef } from 'react'; +import { useRef, forwardRef } from 'react'; import { useRender } from '@base-ui-components/react/use-render'; import { useResponsiveValue } from '../../hooks/useResponsiveValue'; import clsx from 'clsx'; @@ -33,7 +33,7 @@ export const Link = forwardRef((props, ref) => { const responsiveVariant = useResponsiveValue(variant); const responsiveWeight = useResponsiveValue(weight); - const internalRef = React.useRef(null); + const internalRef = useRef(null); const { renderElement } = useRender({ render, diff --git a/packages/canon/src/components/Menu/Menu.stories.tsx b/packages/canon/src/components/Menu/Menu.stories.tsx index 58284052af..77bff661e3 100644 --- a/packages/canon/src/components/Menu/Menu.stories.tsx +++ b/packages/canon/src/components/Menu/Menu.stories.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import { Menu } from './Menu'; import { Button } from '../Button'; diff --git a/packages/canon/src/components/Menu/Menu.tsx b/packages/canon/src/components/Menu/Menu.tsx index b1f5224bf0..6b93d14865 100644 --- a/packages/canon/src/components/Menu/Menu.tsx +++ b/packages/canon/src/components/Menu/Menu.tsx @@ -14,12 +14,12 @@ * limitations under the License. */ -import React from 'react'; +import { forwardRef } from 'react'; import { Menu as MenuPrimitive } from '@base-ui-components/react/menu'; import clsx from 'clsx'; import { MenuComponent } from './types'; -const MenuTrigger = React.forwardRef< +const MenuTrigger = forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( @@ -31,7 +31,7 @@ const MenuTrigger = React.forwardRef< )); MenuTrigger.displayName = MenuPrimitive.Trigger.displayName; -const MenuBackdrop = React.forwardRef< +const MenuBackdrop = forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( @@ -43,7 +43,7 @@ const MenuBackdrop = React.forwardRef< )); MenuBackdrop.displayName = MenuPrimitive.Backdrop.displayName; -const MenuPositioner = React.forwardRef< +const MenuPositioner = forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( @@ -55,7 +55,7 @@ const MenuPositioner = React.forwardRef< )); MenuPositioner.displayName = MenuPrimitive.Positioner.displayName; -const MenuPopup = React.forwardRef< +const MenuPopup = forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( @@ -67,7 +67,7 @@ const MenuPopup = React.forwardRef< )); MenuPopup.displayName = MenuPrimitive.Popup.displayName; -const MenuArrow = React.forwardRef< +const MenuArrow = forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( @@ -79,7 +79,7 @@ const MenuArrow = React.forwardRef< )); MenuArrow.displayName = MenuPrimitive.Arrow.displayName; -const MenuItem = React.forwardRef< +const MenuItem = forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( @@ -91,7 +91,7 @@ const MenuItem = React.forwardRef< )); MenuItem.displayName = MenuPrimitive.Item.displayName; -const MenuGroup = React.forwardRef< +const MenuGroup = forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( @@ -103,7 +103,7 @@ const MenuGroup = React.forwardRef< )); MenuGroup.displayName = MenuPrimitive.Group.displayName; -const MenuGroupLabel = React.forwardRef< +const MenuGroupLabel = forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( @@ -115,7 +115,7 @@ const MenuGroupLabel = React.forwardRef< )); MenuGroupLabel.displayName = MenuPrimitive.GroupLabel.displayName; -const MenuRadioGroup = React.forwardRef< +const MenuRadioGroup = forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( @@ -127,7 +127,7 @@ const MenuRadioGroup = React.forwardRef< )); MenuRadioGroup.displayName = MenuPrimitive.RadioGroup.displayName; -const MenuRadioItem = React.forwardRef< +const MenuRadioItem = forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( @@ -139,7 +139,7 @@ const MenuRadioItem = React.forwardRef< )); MenuRadioItem.displayName = MenuPrimitive.RadioItem.displayName; -const MenuRadioItemIndicator = React.forwardRef< +const MenuRadioItemIndicator = forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( @@ -152,7 +152,7 @@ const MenuRadioItemIndicator = React.forwardRef< MenuRadioItemIndicator.displayName = MenuPrimitive.RadioItemIndicator.displayName; -const MenuCheckboxItem = React.forwardRef< +const MenuCheckboxItem = forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( @@ -164,7 +164,7 @@ const MenuCheckboxItem = React.forwardRef< )); MenuCheckboxItem.displayName = MenuPrimitive.CheckboxItem.displayName; -const MenuCheckboxItemIndicator = React.forwardRef< +const MenuCheckboxItemIndicator = forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( @@ -177,7 +177,7 @@ const MenuCheckboxItemIndicator = React.forwardRef< MenuCheckboxItemIndicator.displayName = MenuPrimitive.CheckboxItemIndicator.displayName; -const MenuSubmenuTrigger = React.forwardRef< +const MenuSubmenuTrigger = forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( @@ -189,7 +189,7 @@ const MenuSubmenuTrigger = React.forwardRef< )); MenuSubmenuTrigger.displayName = MenuPrimitive.SubmenuTrigger.displayName; -const MenuSeparator = React.forwardRef< +const MenuSeparator = forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( diff --git a/packages/canon/src/components/ScrollArea/ScrollArea.stories.tsx b/packages/canon/src/components/ScrollArea/ScrollArea.stories.tsx index 3caf39a29e..25a3d5f3d8 100644 --- a/packages/canon/src/components/ScrollArea/ScrollArea.stories.tsx +++ b/packages/canon/src/components/ScrollArea/ScrollArea.stories.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import { ScrollArea } from './ScrollArea'; import { Text } from '../Text/Text'; diff --git a/packages/canon/src/components/ScrollArea/ScrollArea.tsx b/packages/canon/src/components/ScrollArea/ScrollArea.tsx index 1c0036d005..e96e76c29b 100644 --- a/packages/canon/src/components/ScrollArea/ScrollArea.tsx +++ b/packages/canon/src/components/ScrollArea/ScrollArea.tsx @@ -14,11 +14,11 @@ * limitations under the License. */ -import React from 'react'; +import { forwardRef } from 'react'; import { ScrollArea as ScrollAreaPrimitive } from '@base-ui-components/react/scroll-area'; import clsx from 'clsx'; -const ScrollAreaRoot = React.forwardRef< +const ScrollAreaRoot = forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( @@ -30,7 +30,7 @@ const ScrollAreaRoot = React.forwardRef< )); ScrollAreaRoot.displayName = ScrollAreaPrimitive.Root.displayName; -const ScrollAreaViewport = React.forwardRef< +const ScrollAreaViewport = forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( @@ -42,7 +42,7 @@ const ScrollAreaViewport = React.forwardRef< )); ScrollAreaViewport.displayName = ScrollAreaPrimitive.Viewport.displayName; -const ScrollAreaScrollbar = React.forwardRef< +const ScrollAreaScrollbar = forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( @@ -54,7 +54,7 @@ const ScrollAreaScrollbar = React.forwardRef< )); ScrollAreaScrollbar.displayName = ScrollAreaPrimitive.Scrollbar.displayName; -const ScrollAreaThumb = React.forwardRef< +const ScrollAreaThumb = forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( diff --git a/packages/canon/src/components/Select/Select.stories.tsx b/packages/canon/src/components/Select/Select.stories.tsx index 96bfb31f9f..a4a06a810b 100644 --- a/packages/canon/src/components/Select/Select.stories.tsx +++ b/packages/canon/src/components/Select/Select.stories.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import { Select } from './Select'; import { Flex } from '../Flex'; diff --git a/packages/canon/src/components/Select/Select.tsx b/packages/canon/src/components/Select/Select.tsx index 835bb8303a..9463735829 100644 --- a/packages/canon/src/components/Select/Select.tsx +++ b/packages/canon/src/components/Select/Select.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React from 'react'; +import { forwardRef, useId } from 'react'; import { Select as SelectPrimitive } from '@base-ui-components/react/select'; import { Icon } from '../Icon'; import clsx from 'clsx'; @@ -23,91 +23,89 @@ import { SelectProps } from './types'; import { useResponsiveValue } from '../../hooks/useResponsiveValue'; /** @public */ -export const Select = React.forwardRef( - (props, ref) => { - const { - className, - label, - description, - options, - placeholder = 'Select an option', - size = 'medium', - required, - error, - style, - ...rest - } = props; +export const Select = forwardRef((props, ref) => { + const { + className, + label, + description, + options, + placeholder = 'Select an option', + size = 'medium', + required, + error, + style, + ...rest + } = props; - // Get the responsive value for the variant - const responsiveSize = useResponsiveValue(size); + // Get the responsive value for the variant + const responsiveSize = useResponsiveValue(size); - // Generate unique IDs for accessibility - const selectId = React.useId(); - const descriptionId = React.useId(); - const errorId = React.useId(); + // Generate unique IDs for accessibility + const selectId = useId(); + const descriptionId = useId(); + const errorId = useId(); - return ( -
    - {label && ( - - )} - - - - - - - - - - - - {options?.map(option => ( - - - - - - {option.label} - - - ))} - - - - - {description && ( -

    - {description} -

    - )} - {error && ( - - )} -
    - ); - }, -); + return ( +
    + {label && ( + + )} + + + + + + + + + + + + {options?.map(option => ( + + + + + + {option.label} + + + ))} + + + + + {description && ( +

    + {description} +

    + )} + {error && ( + + )} +
    + ); +}); Select.displayName = 'Select'; diff --git a/packages/canon/src/components/Table/Table.stories.tsx b/packages/canon/src/components/Table/Table.stories.tsx index c4c08be527..baf840878d 100644 --- a/packages/canon/src/components/Table/Table.stories.tsx +++ b/packages/canon/src/components/Table/Table.stories.tsx @@ -59,7 +59,7 @@ const invoices = [ }, ]; -import React from 'react'; +import { ComponentType } from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import { Table, @@ -75,12 +75,12 @@ const meta = { title: 'Components/Table', component: Table, subcomponents: { - TableBody: TableBody as React.ComponentType, - TableCell: TableCell as React.ComponentType, - TableFooter: TableFooter as React.ComponentType, - TableHead: TableHead as React.ComponentType, - TableHeader: TableHeader as React.ComponentType, - TableRow: TableRow as React.ComponentType, + TableBody: TableBody as ComponentType, + TableCell: TableCell as ComponentType, + TableFooter: TableFooter as ComponentType, + TableHead: TableHead as ComponentType, + TableHeader: TableHeader as ComponentType, + TableRow: TableRow as ComponentType, }, } satisfies Meta; diff --git a/packages/canon/src/components/Table/Table.tsx b/packages/canon/src/components/Table/Table.tsx index efd5181036..08b613104d 100644 --- a/packages/canon/src/components/Table/Table.tsx +++ b/packages/canon/src/components/Table/Table.tsx @@ -13,10 +13,10 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import * as React from 'react'; +import { forwardRef } from 'react'; /** @public */ -const Table = React.forwardRef< +const Table = forwardRef< HTMLTableElement, React.HTMLAttributes >(({ className, ...props }, ref) => ( @@ -27,7 +27,7 @@ const Table = React.forwardRef< Table.displayName = 'Table'; /** @public */ -const TableHeader = React.forwardRef< +const TableHeader = forwardRef< HTMLTableSectionElement, React.HTMLAttributes >(({ className, ...props }, ref) => ( @@ -40,7 +40,7 @@ const TableHeader = React.forwardRef< TableHeader.displayName = 'TableHeader'; /** @public */ -const TableBody = React.forwardRef< +const TableBody = forwardRef< HTMLTableSectionElement, React.HTMLAttributes >(({ className, ...props }, ref) => ( @@ -49,7 +49,7 @@ const TableBody = React.forwardRef< TableBody.displayName = 'TableBody'; /** @public */ -const TableFooter = React.forwardRef< +const TableFooter = forwardRef< HTMLTableSectionElement, React.HTMLAttributes >(({ className, ...props }, ref) => ( @@ -62,7 +62,7 @@ const TableFooter = React.forwardRef< TableFooter.displayName = 'TableFooter'; /** @public */ -const TableRow = React.forwardRef< +const TableRow = forwardRef< HTMLTableRowElement, React.HTMLAttributes >(({ className, ...props }, ref) => ( @@ -73,7 +73,7 @@ const TableRow = React.forwardRef< TableRow.displayName = 'TableRow'; /** @public */ -const TableHead = React.forwardRef< +const TableHead = forwardRef< HTMLTableCellElement, React.ThHTMLAttributes >(({ className, ...props }, ref) => ( @@ -82,7 +82,7 @@ const TableHead = React.forwardRef< TableHead.displayName = 'TableHead'; /** @public */ -const TableCell = React.forwardRef< +const TableCell = forwardRef< HTMLTableCellElement, React.TdHTMLAttributes >(({ className, ...props }, ref) => ( @@ -91,7 +91,7 @@ const TableCell = React.forwardRef< TableCell.displayName = 'TableCell'; /** @public */ -const TableCaption = React.forwardRef< +const TableCaption = forwardRef< HTMLTableCaptionElement, React.HTMLAttributes >(({ className, ...props }, ref) => ( diff --git a/packages/canon/src/components/Text/Text.stories.tsx b/packages/canon/src/components/Text/Text.stories.tsx index ab904f524c..0b0ffd2712 100644 --- a/packages/canon/src/components/Text/Text.stories.tsx +++ b/packages/canon/src/components/Text/Text.stories.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import { Text } from './Text'; import { Flex } from '../Flex'; diff --git a/packages/canon/src/components/Text/Text.tsx b/packages/canon/src/components/Text/Text.tsx index 8bc1daf465..643afc539a 100644 --- a/packages/canon/src/components/Text/Text.tsx +++ b/packages/canon/src/components/Text/Text.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { forwardRef } from 'react'; +import { forwardRef } from 'react'; import { useResponsiveValue } from '../../hooks/useResponsiveValue'; import clsx from 'clsx'; diff --git a/packages/canon/src/components/TextField/TextField.stories.tsx b/packages/canon/src/components/TextField/TextField.stories.tsx index 70affa6cf6..34f81af4f4 100644 --- a/packages/canon/src/components/TextField/TextField.stories.tsx +++ b/packages/canon/src/components/TextField/TextField.stories.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import { TextField } from './TextField'; import { Flex } from '../Flex'; diff --git a/packages/canon/src/components/TextField/TextField.tsx b/packages/canon/src/components/TextField/TextField.tsx index d144781983..8a22ee305b 100644 --- a/packages/canon/src/components/TextField/TextField.tsx +++ b/packages/canon/src/components/TextField/TextField.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { forwardRef } from 'react'; +import { useId, forwardRef } from 'react'; import { Input } from '@base-ui-components/react/input'; import { useResponsiveValue } from '../../hooks/useResponsiveValue'; import clsx from 'clsx'; @@ -39,9 +39,9 @@ export const TextField = forwardRef( const responsiveSize = useResponsiveValue(size); // Generate unique IDs for accessibility - const inputId = React.useId(); - const descriptionId = React.useId(); - const errorId = React.useId(); + const inputId = useId(); + const descriptionId = useId(); + const errorId = useId(); return (
    , React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( @@ -30,7 +30,7 @@ const TooltipTrigger = React.forwardRef< )); TooltipTrigger.displayName = TooltipPrimitive.Trigger.displayName; -const TooltipPositioner = React.forwardRef< +const TooltipPositioner = forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( @@ -42,7 +42,7 @@ const TooltipPositioner = React.forwardRef< )); TooltipPositioner.displayName = TooltipPrimitive.Positioner.displayName; -const TooltipPopup = React.forwardRef< +const TooltipPopup = forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( @@ -54,7 +54,7 @@ const TooltipPopup = React.forwardRef< )); TooltipPopup.displayName = TooltipPrimitive.Popup.displayName; -const TooltipArrow = React.forwardRef< +const TooltipArrow = forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( diff --git a/packages/canon/src/stories/Form.stories.tsx b/packages/canon/src/stories/Form.stories.tsx index 457d0470f8..3bffca6554 100644 --- a/packages/canon/src/stories/Form.stories.tsx +++ b/packages/canon/src/stories/Form.stories.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React from 'react'; +import { useState } from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import { useForm, SubmitHandler, Controller } from 'react-hook-form'; import { TextField } from '../components/TextField'; @@ -105,9 +105,9 @@ export const Controlled: Story = { formState: { errors }, } = useForm(); - const [firstname, setFirstname] = React.useState('John'); - const [lastname, setLastname] = React.useState('Doe'); - const [city, setCity] = React.useState('london'); + const [firstname, setFirstname] = useState('John'); + const [lastname, setLastname] = useState('Doe'); + const [city, setCity] = useState('london'); const onSubmit: SubmitHandler = data => { console.log('data', data); diff --git a/packages/cli/config/eslint-factory.js b/packages/cli/config/eslint-factory.js index 8f50e184ff..914979043e 100644 --- a/packages/cli/config/eslint-factory.js +++ b/packages/cli/config/eslint-factory.js @@ -243,8 +243,26 @@ function createConfigForRole(dir, role, extraConfig = {}) { '@mui/*/*/*', ...(extraConfig.restrictedImportPatterns ?? []), ], + rules: { + 'react/react-in-jsx-scope': 'off', + 'no-restricted-syntax': [ + 'error', + { + message: 'Default React import not allowed.', + selector: + "ImportDeclaration[source.value='react'][specifiers.0.type='ImportDefaultSpecifier']", + }, + { + message: + 'Default React import not allowed. If you need a global type that collides with a React named export (such as `MouseEvent`), try using `globalThis.MouseHandler`.', + selector: + "ImportDeclaration[source.value='react'] :matches(ImportDefaultSpecifier, ImportNamespaceSpecifier)", + }, + ], + ...extraConfig.rules, + }, tsRules: { - 'react/prop-types': 0, + 'react/prop-types': 'off', ...extraConfig.tsRules, }, }); diff --git a/packages/cli/config/tsconfig.json b/packages/cli/config/tsconfig.json index ac5e62b52e..4aa5665b02 100644 --- a/packages/cli/config/tsconfig.json +++ b/packages/cli/config/tsconfig.json @@ -11,7 +11,7 @@ "importHelpers": false, "incremental": true, "isolatedModules": true, - "jsx": "react", + "jsx": "react-jsx", "lib": ["DOM", "DOM.Iterable", "ScriptHost", "ES2022"], "module": "ESNext", "moduleResolution": "node", diff --git a/packages/cli/templates/frontend-plugin/dev/index.tsx.hbs b/packages/cli/templates/frontend-plugin/dev/index.tsx.hbs index 61cd8f2695..dd17ae58c5 100644 --- a/packages/cli/templates/frontend-plugin/dev/index.tsx.hbs +++ b/packages/cli/templates/frontend-plugin/dev/index.tsx.hbs @@ -1,4 +1,3 @@ -import React from 'react'; import { createDevApp } from '@backstage/dev-utils'; import { {{ pluginVar }}, {{ extensionName }} } from '../src/plugin'; diff --git a/packages/cli/templates/frontend-plugin/src/components/ExampleComponent/ExampleComponent.test.tsx.hbs b/packages/cli/templates/frontend-plugin/src/components/ExampleComponent/ExampleComponent.test.tsx.hbs index 81b4dec2c3..c7c20863c2 100644 --- a/packages/cli/templates/frontend-plugin/src/components/ExampleComponent/ExampleComponent.test.tsx.hbs +++ b/packages/cli/templates/frontend-plugin/src/components/ExampleComponent/ExampleComponent.test.tsx.hbs @@ -1,4 +1,3 @@ -import React from 'react'; import { ExampleComponent } from './ExampleComponent'; import { rest } from 'msw'; import { setupServer } from 'msw/node'; diff --git a/packages/cli/templates/frontend-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs b/packages/cli/templates/frontend-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs index 95a8f044d1..d117fad131 100644 --- a/packages/cli/templates/frontend-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs +++ b/packages/cli/templates/frontend-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs @@ -1,4 +1,3 @@ -import React from 'react'; import { Typography, Grid } from '@material-ui/core'; import { InfoCard, diff --git a/packages/cli/templates/frontend-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.test.tsx.hbs b/packages/cli/templates/frontend-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.test.tsx.hbs index be43c05ba2..820e54fa37 100644 --- a/packages/cli/templates/frontend-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.test.tsx.hbs +++ b/packages/cli/templates/frontend-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.test.tsx.hbs @@ -1,4 +1,3 @@ -import React from 'react'; import { renderInTestApp } from '@backstage/test-utils'; import { ExampleFetchComponent } from './ExampleFetchComponent'; diff --git a/packages/cli/templates/frontend-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs b/packages/cli/templates/frontend-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs index 6134ee9b06..bd6bd9d75b 100644 --- a/packages/cli/templates/frontend-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs +++ b/packages/cli/templates/frontend-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs @@ -1,4 +1,3 @@ -import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import { Table, diff --git a/packages/cli/templates/plugin-web-library/src/components/ExampleComponent/ExampleComponent.test.tsx b/packages/cli/templates/plugin-web-library/src/components/ExampleComponent/ExampleComponent.test.tsx index c421e05209..0a7703ddb2 100644 --- a/packages/cli/templates/plugin-web-library/src/components/ExampleComponent/ExampleComponent.test.tsx +++ b/packages/cli/templates/plugin-web-library/src/components/ExampleComponent/ExampleComponent.test.tsx @@ -1,18 +1,17 @@ -import React from 'react'; -import { screen } from '@testing-library/react'; -import { renderInTestApp } from '@backstage/test-utils'; -import { ExampleComponent } from './ExampleComponent'; - -describe('ExampleComponent', () => { - it('should render', async () => { - await renderInTestApp(); - - expect(screen.getByText('Hello World')).toBeInTheDocument(); - }); - - it('should display a custom message', async () => { - await renderInTestApp(); - - expect(screen.getByText('Hello Example')).toBeInTheDocument(); - }); -}); +import { screen } from '@testing-library/react'; +import { renderInTestApp } from '@backstage/test-utils'; +import { ExampleComponent } from './ExampleComponent'; + +describe('ExampleComponent', () => { + it('should render', async () => { + await renderInTestApp(); + + expect(screen.getByText('Hello World')).toBeInTheDocument(); + }); + + it('should display a custom message', async () => { + await renderInTestApp(); + + expect(screen.getByText('Hello Example')).toBeInTheDocument(); + }); +}); diff --git a/packages/cli/templates/plugin-web-library/src/components/ExampleComponent/ExampleComponent.tsx b/packages/cli/templates/plugin-web-library/src/components/ExampleComponent/ExampleComponent.tsx index a1ab0937db..f29135a6a8 100644 --- a/packages/cli/templates/plugin-web-library/src/components/ExampleComponent/ExampleComponent.tsx +++ b/packages/cli/templates/plugin-web-library/src/components/ExampleComponent/ExampleComponent.tsx @@ -1,29 +1,28 @@ -import React from 'react'; -import { Typography } from '@material-ui/core'; - -/** - * Props for {@link ExampleComponent}. - * - * @public - */ -export interface ExampleComponentProps { - message?: string; -} - -/** - * Displays an example. - * - * @remarks - * - * Longer descriptions should be put after the `@remarks` tag. That way the initial summary - * will show up in the API docs overview section, while the longer description will only be - * displayed on the page for the specific API. - * - * @public - */ -export function ExampleComponent(props: ExampleComponentProps) { - // By destructuring props here rather than in the signature the API docs will look nicer - const { message = 'Hello World' } = props; - - return {message}; -} +import { Typography } from '@material-ui/core'; + +/** + * Props for {@link ExampleComponent}. + * + * @public + */ +export interface ExampleComponentProps { + message?: string; +} + +/** + * Displays an example. + * + * @remarks + * + * Longer descriptions should be put after the `@remarks` tag. That way the initial summary + * will show up in the API docs overview section, while the longer description will only be + * displayed on the page for the specific API. + * + * @public + */ +export function ExampleComponent(props: ExampleComponentProps) { + // By destructuring props here rather than in the signature the API docs will look nicer + const { message = 'Hello World' } = props; + + return {message}; +} diff --git a/packages/core-app-api/src/apis/system/ApiProvider.test.tsx b/packages/core-app-api/src/apis/system/ApiProvider.test.tsx index ceb3a0d12a..095fc88627 100644 --- a/packages/core-app-api/src/apis/system/ApiProvider.test.tsx +++ b/packages/core-app-api/src/apis/system/ApiProvider.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { useApi, createApiRef, diff --git a/packages/core-app-api/src/apis/system/ApiProvider.tsx b/packages/core-app-api/src/apis/system/ApiProvider.tsx index c75f883a51..5d0a13f84d 100644 --- a/packages/core-app-api/src/apis/system/ApiProvider.tsx +++ b/packages/core-app-api/src/apis/system/ApiProvider.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useContext, ReactNode, PropsWithChildren } from 'react'; +import { useContext, ReactNode, PropsWithChildren } from 'react'; import PropTypes from 'prop-types'; import { ApiHolder } from '@backstage/core-plugin-api'; import { ApiAggregator } from './ApiAggregator'; diff --git a/packages/core-app-api/src/app/AppContext.test.tsx b/packages/core-app-api/src/app/AppContext.test.tsx index a011b5966b..e281a3809a 100644 --- a/packages/core-app-api/src/app/AppContext.test.tsx +++ b/packages/core-app-api/src/app/AppContext.test.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React from 'react'; +import { PropsWithChildren } from 'react'; import { renderHook } from '@testing-library/react'; import { useVersionedContext } from '@backstage/version-bridge'; import { AppContext as AppContextV1 } from './types'; @@ -40,7 +40,7 @@ describe('v1 consumer', () => { }; const renderedHook = renderHook(() => useMockAppV1(), { - wrapper: ({ children }: React.PropsWithChildren<{}>) => ( + wrapper: ({ children }: PropsWithChildren<{}>) => ( ), }); diff --git a/packages/core-app-api/src/app/AppContext.tsx b/packages/core-app-api/src/app/AppContext.tsx index f39d9a095e..b402c1abd6 100644 --- a/packages/core-app-api/src/app/AppContext.tsx +++ b/packages/core-app-api/src/app/AppContext.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { PropsWithChildren } from 'react'; +import { PropsWithChildren } from 'react'; import { createVersionedValueMap, createVersionedContext, diff --git a/packages/core-app-api/src/app/AppManager.compat.test.tsx b/packages/core-app-api/src/app/AppManager.compat.test.tsx index cfbcc87a01..ae2c75dbc3 100644 --- a/packages/core-app-api/src/app/AppManager.compat.test.tsx +++ b/packages/core-app-api/src/app/AppManager.compat.test.tsx @@ -14,8 +14,8 @@ * limitations under the License. */ +import { default as React } from 'react'; import tlr, { render } from '@testing-library/react'; -import React from 'react'; describe.each(['beta', 'stable'])('react-router %s', rrVersion => { beforeAll(() => { diff --git a/packages/core-app-api/src/app/AppManager.stable.test.tsx b/packages/core-app-api/src/app/AppManager.stable.test.tsx index ba16353d47..d45a3282d7 100644 --- a/packages/core-app-api/src/app/AppManager.stable.test.tsx +++ b/packages/core-app-api/src/app/AppManager.stable.test.tsx @@ -15,7 +15,6 @@ */ import { render } from '@testing-library/react'; -import React from 'react'; import { MemoryRouter, Navigate, Route } from 'react-router-dom'; import { FlatRoutes } from '../routing'; import { AppManager } from './AppManager'; diff --git a/packages/core-app-api/src/app/AppManager.test.tsx b/packages/core-app-api/src/app/AppManager.test.tsx index d995edffdf..054c28ad03 100644 --- a/packages/core-app-api/src/app/AppManager.test.tsx +++ b/packages/core-app-api/src/app/AppManager.test.tsx @@ -25,7 +25,7 @@ import { screen, act } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { setupServer } from 'msw/node'; import { rest } from 'msw'; -import React, { PropsWithChildren, ReactNode } from 'react'; +import { PropsWithChildren, ReactNode } from 'react'; import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom'; import { configApiRef, diff --git a/packages/core-app-api/src/app/AppManager.tsx b/packages/core-app-api/src/app/AppManager.tsx index b28b843d34..98067267b5 100644 --- a/packages/core-app-api/src/app/AppManager.tsx +++ b/packages/core-app-api/src/app/AppManager.tsx @@ -15,7 +15,7 @@ */ import { Config } from '@backstage/config'; -import React, { +import { ComponentType, PropsWithChildren, Suspense, diff --git a/packages/core-app-api/src/app/AppRouter.test.tsx b/packages/core-app-api/src/app/AppRouter.test.tsx index b595f91794..7658db0168 100644 --- a/packages/core-app-api/src/app/AppRouter.test.tsx +++ b/packages/core-app-api/src/app/AppRouter.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { AppComponents, configApiRef, diff --git a/packages/core-app-api/src/app/AppRouter.tsx b/packages/core-app-api/src/app/AppRouter.tsx index 7481f6662a..afc87d6753 100644 --- a/packages/core-app-api/src/app/AppRouter.tsx +++ b/packages/core-app-api/src/app/AppRouter.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useContext, ReactNode, ComponentType, useState } from 'react'; +import { useContext, ReactNode, ComponentType, useState } from 'react'; import { attachComponentData, ConfigApi, diff --git a/packages/core-app-api/src/app/AppThemeProvider.tsx b/packages/core-app-api/src/app/AppThemeProvider.tsx index b6fba540ec..719736eabb 100644 --- a/packages/core-app-api/src/app/AppThemeProvider.tsx +++ b/packages/core-app-api/src/app/AppThemeProvider.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useMemo, useEffect, useState, PropsWithChildren } from 'react'; +import { useMemo, useEffect, useState, PropsWithChildren } from 'react'; import { useApi, appThemeApiRef, AppTheme } from '@backstage/core-plugin-api'; import useObservable from 'react-use/esm/useObservable'; diff --git a/packages/core-app-api/src/app/defaultConfigLoader.test.tsx b/packages/core-app-api/src/app/defaultConfigLoader.test.tsx index 556e4c928e..603a321fb1 100644 --- a/packages/core-app-api/src/app/defaultConfigLoader.test.tsx +++ b/packages/core-app-api/src/app/defaultConfigLoader.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { render } from '@testing-library/react'; import { defaultConfigLoaderSync } from './defaultConfigLoader'; import { ConfigReader } from '@backstage/config'; diff --git a/packages/core-app-api/src/app/isReactRouterBeta.tsx b/packages/core-app-api/src/app/isReactRouterBeta.tsx index bef4f8521f..82702c0ee3 100644 --- a/packages/core-app-api/src/app/isReactRouterBeta.tsx +++ b/packages/core-app-api/src/app/isReactRouterBeta.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { createRoutesFromChildren, Route } from 'react-router-dom'; export function isReactRouterBeta(): boolean { diff --git a/packages/core-app-api/src/extensions/traversal.test.tsx b/packages/core-app-api/src/extensions/traversal.test.tsx index 0acc51fb27..d129120971 100644 --- a/packages/core-app-api/src/extensions/traversal.test.tsx +++ b/packages/core-app-api/src/extensions/traversal.test.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { Children, isValidElement } from 'react'; +import { Children, isValidElement } from 'react'; import { childDiscoverer, createCollector, diff --git a/packages/core-app-api/src/plugins/collectors.test.tsx b/packages/core-app-api/src/plugins/collectors.test.tsx index 056652423e..b85cdaac05 100644 --- a/packages/core-app-api/src/plugins/collectors.test.tsx +++ b/packages/core-app-api/src/plugins/collectors.test.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { PropsWithChildren } from 'react'; +import { PropsWithChildren } from 'react'; import { createPlugin, createRouteRef, diff --git a/packages/core-app-api/src/routing/FeatureFlagged.test.tsx b/packages/core-app-api/src/routing/FeatureFlagged.test.tsx index 8ee74c0a23..8bd32b6dd9 100644 --- a/packages/core-app-api/src/routing/FeatureFlagged.test.tsx +++ b/packages/core-app-api/src/routing/FeatureFlagged.test.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React from 'react'; +import { ReactNode } from 'react'; import { FeatureFlagged } from './FeatureFlagged'; import { render, screen } from '@testing-library/react'; import { LocalStorageFeatureFlags } from '../apis'; @@ -22,7 +22,7 @@ import { TestApiProvider } from '@backstage/test-utils'; import { featureFlagsApiRef } from '@backstage/core-plugin-api'; const mockFeatureFlagsApi = new LocalStorageFeatureFlags(); -const Wrapper = ({ children }: { children?: React.ReactNode }) => ( +const Wrapper = ({ children }: { children?: ReactNode }) => ( {children} diff --git a/packages/core-app-api/src/routing/FeatureFlagged.tsx b/packages/core-app-api/src/routing/FeatureFlagged.tsx index 2b0b5afe34..2a4dc8b877 100644 --- a/packages/core-app-api/src/routing/FeatureFlagged.tsx +++ b/packages/core-app-api/src/routing/FeatureFlagged.tsx @@ -19,7 +19,7 @@ import { useApi, attachComponentData, } from '@backstage/core-plugin-api'; -import React, { ReactNode } from 'react'; +import { ReactNode } from 'react'; /** * Props for the {@link FeatureFlagged} component. diff --git a/packages/core-app-api/src/routing/FlatRoutes.beta.test.tsx b/packages/core-app-api/src/routing/FlatRoutes.beta.test.tsx index 8d4d10c52a..f6b4348aa1 100644 --- a/packages/core-app-api/src/routing/FlatRoutes.beta.test.tsx +++ b/packages/core-app-api/src/routing/FlatRoutes.beta.test.tsx @@ -15,7 +15,7 @@ */ import { render, RenderResult } from '@testing-library/react'; -import React, { ReactNode } from 'react'; +import { ReactNode } from 'react'; import { MemoryRouter, Route, Routes, useOutlet } from 'react-router-dom'; import { LocalStorageFeatureFlags } from '../apis'; import { featureFlagsApiRef } from '@backstage/core-plugin-api'; @@ -30,7 +30,7 @@ jest.mock('react-router-dom', () => ); const mockFeatureFlagsApi = new LocalStorageFeatureFlags(); -const Wrapper = ({ children }: { children?: React.ReactNode }) => ( +const Wrapper = ({ children }: { children?: ReactNode }) => ( {children} diff --git a/packages/core-app-api/src/routing/FlatRoutes.compat.test.tsx b/packages/core-app-api/src/routing/FlatRoutes.compat.test.tsx index c32b306387..24a7c592ff 100644 --- a/packages/core-app-api/src/routing/FlatRoutes.compat.test.tsx +++ b/packages/core-app-api/src/routing/FlatRoutes.compat.test.tsx @@ -15,7 +15,7 @@ */ import tlr, { render, RenderResult } from '@testing-library/react'; -import React, { ReactNode } from 'react'; +import { default as React, ReactNode } from 'react'; import { LocalStorageFeatureFlags } from '../apis'; import { featureFlagsApiRef } from '@backstage/core-plugin-api'; import { AppContext } from '../app'; @@ -59,7 +59,7 @@ describe.each(['beta', 'stable'])('FlatRoutes %s', rrVersion => { const { MemoryRouter, TestApiProvider } = requireDeps(); let rendered: RenderResult | undefined = undefined; - const Wrapper = ({ children }: { children?: React.ReactNode }) => ( + const Wrapper = ({ children }: { children?: ReactNode }) => ( {children} diff --git a/packages/core-app-api/src/routing/FlatRoutes.stable.test.tsx b/packages/core-app-api/src/routing/FlatRoutes.stable.test.tsx index ece6c22ff2..093b0635e7 100644 --- a/packages/core-app-api/src/routing/FlatRoutes.stable.test.tsx +++ b/packages/core-app-api/src/routing/FlatRoutes.stable.test.tsx @@ -15,7 +15,7 @@ */ import { render, RenderResult } from '@testing-library/react'; -import React, { ReactNode } from 'react'; +import { ReactNode } from 'react'; import { MemoryRouter, Route, useOutlet } from 'react-router-dom'; import { LocalStorageFeatureFlags } from '../apis'; import { featureFlagsApiRef } from '@backstage/core-plugin-api'; @@ -30,7 +30,7 @@ jest.mock('react-router-dom', () => ); const mockFeatureFlagsApi = new LocalStorageFeatureFlags(); -const Wrapper = ({ children }: { children?: React.ReactNode }) => ( +const Wrapper = ({ children }: { children?: ReactNode }) => ( {children} diff --git a/packages/core-app-api/src/routing/FlatRoutes.tsx b/packages/core-app-api/src/routing/FlatRoutes.tsx index 46c2270d0d..32c3db7615 100644 --- a/packages/core-app-api/src/routing/FlatRoutes.tsx +++ b/packages/core-app-api/src/routing/FlatRoutes.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { ReactNode, useMemo } from 'react'; +import { ReactNode, useMemo } from 'react'; import { useRoutes } from 'react-router-dom'; import { attachComponentData, diff --git a/packages/core-app-api/src/routing/RouteTracker.test.tsx b/packages/core-app-api/src/routing/RouteTracker.test.tsx index ecbd44315d..03441ffa20 100644 --- a/packages/core-app-api/src/routing/RouteTracker.test.tsx +++ b/packages/core-app-api/src/routing/RouteTracker.test.tsx @@ -15,7 +15,6 @@ */ import { TestApiProvider, mockApis } from '@backstage/test-utils'; -import React from 'react'; import { BackstageRouteObject } from './types'; import { fireEvent, render } from '@testing-library/react'; import { RouteTracker } from './RouteTracker'; diff --git a/packages/core-app-api/src/routing/RouteTracker.tsx b/packages/core-app-api/src/routing/RouteTracker.tsx index 69903268ac..7a4614dc33 100644 --- a/packages/core-app-api/src/routing/RouteTracker.tsx +++ b/packages/core-app-api/src/routing/RouteTracker.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useEffect } from 'react'; +import { useEffect } from 'react'; import { matchRoutes, useLocation } from 'react-router-dom'; import { useAnalytics, diff --git a/packages/core-app-api/src/routing/RoutingProvider.beta.test.tsx b/packages/core-app-api/src/routing/RoutingProvider.beta.test.tsx index ca089d0014..e7c45bfb25 100644 --- a/packages/core-app-api/src/routing/RoutingProvider.beta.test.tsx +++ b/packages/core-app-api/src/routing/RoutingProvider.beta.test.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { PropsWithChildren, ReactElement } from 'react'; +import { Suspense, PropsWithChildren, ReactElement } from 'react'; import { MemoryRouter, Routes } from 'react-router-dom'; import { render } from '@testing-library/react'; import { renderHook } from '@testing-library/react'; @@ -246,7 +246,7 @@ describe('discovery', () => { const root = ( - + @@ -259,7 +259,7 @@ describe('discovery', () => { routeRef={ref3} params={{ id: 'blob' }} /> - + ); diff --git a/packages/core-app-api/src/routing/RoutingProvider.compat.test.tsx b/packages/core-app-api/src/routing/RoutingProvider.compat.test.tsx index ac54780f7c..2fb6892b9b 100644 --- a/packages/core-app-api/src/routing/RoutingProvider.compat.test.tsx +++ b/packages/core-app-api/src/routing/RoutingProvider.compat.test.tsx @@ -14,7 +14,12 @@ * limitations under the License. */ -import React, { PropsWithChildren, ReactElement } from 'react'; +import { + default as React, + PropsWithChildren, + ReactElement, + Suspense, +} from 'react'; import { render } from '@testing-library/react'; import type { BackstagePlugin, @@ -315,7 +320,7 @@ describe.each(['beta', 'stable'])('react-router %s', rrVersion => { const root = ( - + }> { routeRef={refPage2} params={{ id: 'other' }} /> - + ); diff --git a/packages/core-app-api/src/routing/RoutingProvider.stable.test.tsx b/packages/core-app-api/src/routing/RoutingProvider.stable.test.tsx index df0ce32e2b..dd53165fb0 100644 --- a/packages/core-app-api/src/routing/RoutingProvider.stable.test.tsx +++ b/packages/core-app-api/src/routing/RoutingProvider.stable.test.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { PropsWithChildren, ReactElement } from 'react'; +import { Suspense, PropsWithChildren, ReactElement } from 'react'; import { MemoryRouter, Routes, Route, useOutlet } from 'react-router-dom'; import { render } from '@testing-library/react'; import { renderHook } from '@testing-library/react'; @@ -266,7 +266,7 @@ describe('discovery', () => { const root = ( - + }> { routeRef={refPage2} params={{ id: 'other' }} /> - + ); diff --git a/packages/core-app-api/src/routing/RoutingProvider.tsx b/packages/core-app-api/src/routing/RoutingProvider.tsx index 3d8a274922..67121d6429 100644 --- a/packages/core-app-api/src/routing/RoutingProvider.tsx +++ b/packages/core-app-api/src/routing/RoutingProvider.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { ReactNode } from 'react'; +import { ReactNode } from 'react'; import { ExternalRouteRef, RouteRef, diff --git a/packages/core-app-api/src/routing/collectors.beta.test.tsx b/packages/core-app-api/src/routing/collectors.beta.test.tsx index 057674a7e4..366557573c 100644 --- a/packages/core-app-api/src/routing/collectors.beta.test.tsx +++ b/packages/core-app-api/src/routing/collectors.beta.test.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { PropsWithChildren } from 'react'; +import { PropsWithChildren } from 'react'; import { routingV1Collector } from './collectors'; import { diff --git a/packages/core-app-api/src/routing/collectors.compat.test.tsx b/packages/core-app-api/src/routing/collectors.compat.test.tsx index 5dab06d03e..8e88013b7c 100644 --- a/packages/core-app-api/src/routing/collectors.compat.test.tsx +++ b/packages/core-app-api/src/routing/collectors.compat.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import type { PropsWithChildren } from 'react'; import { RouteRef, diff --git a/packages/core-app-api/src/routing/collectors.stable.test.tsx b/packages/core-app-api/src/routing/collectors.stable.test.tsx index 20c7643b9e..e9a5512b28 100644 --- a/packages/core-app-api/src/routing/collectors.stable.test.tsx +++ b/packages/core-app-api/src/routing/collectors.stable.test.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { ComponentType, PropsWithChildren } from 'react'; +import { ComponentType, PropsWithChildren } from 'react'; import { routingV2Collector } from './collectors'; import { diff --git a/packages/core-compat-api/src/collectEntityPageContents.test.tsx b/packages/core-compat-api/src/collectEntityPageContents.test.tsx index 53aa90f247..fd74a7e89b 100644 --- a/packages/core-compat-api/src/collectEntityPageContents.test.tsx +++ b/packages/core-compat-api/src/collectEntityPageContents.test.tsx @@ -16,7 +16,7 @@ import { ExtensionAttachToSpec } from '@backstage/frontend-plugin-api'; import { EntityLayout, EntitySwitch, isKind } from '@backstage/plugin-catalog'; -import React from 'react'; +import { JSX } from 'react'; import { collectEntityPageContents } from './collectEntityPageContents'; import { createComponentExtension, @@ -70,7 +70,7 @@ const otherTestContent = ( ); -function collect(element: React.JSX.Element) { +function collect(element: JSX.Element) { const result = new Array<{ id: string; attachTo: ExtensionAttachToSpec; diff --git a/packages/core-compat-api/src/collectEntityPageContents.ts b/packages/core-compat-api/src/collectEntityPageContents.ts index 503642733e..6748c8939a 100644 --- a/packages/core-compat-api/src/collectEntityPageContents.ts +++ b/packages/core-compat-api/src/collectEntityPageContents.ts @@ -20,7 +20,7 @@ import { BackstagePlugin as LegacyBackstagePlugin, } from '@backstage/core-plugin-api'; import { ExtensionDefinition } from '@backstage/frontend-plugin-api'; -import React from 'react'; +import { JSX, ReactNode, isValidElement, Children } from 'react'; import { EntityCardBlueprint, EntityContentBlueprint, @@ -73,7 +73,7 @@ function invertFilter(ifFunc?: EntityFilter): EntityFilter { } export function collectEntityPageContents( - entityPageElement: React.JSX.Element, + entityPageElement: JSX.Element, context: { discoverExtension( extension: ExtensionDefinition, @@ -84,8 +84,8 @@ export function collectEntityPageContents( let cardCounter = 1; let routeCounter = 1; - function traverse(element: React.ReactNode, parentFilter?: EntityFilter) { - if (!React.isValidElement(element)) { + function traverse(element: ReactNode, parentFilter?: EntityFilter) { + if (!isValidElement(element)) { return; } @@ -152,8 +152,8 @@ export function collectEntityPageContents( return; } - React.Children.forEach( - (element.props as { children?: React.ReactNode })?.children, + Children.forEach( + (element.props as { children?: ReactNode })?.children, child => { traverse(child, parentFilter); }, @@ -173,7 +173,7 @@ type EntityRoute = { type EntitySwitchCase = { if?: EntityFilter; - children: React.ReactNode; + children: ReactNode; }; type EntitySwitch = { @@ -206,7 +206,7 @@ function wrapAsyncEntityFilter( } function maybeParseEntityPageNode( - element: React.JSX.Element, + element: JSX.Element, ): EntityRoute | EntitySwitch | undefined { if (getComponentData(element, ENTITY_ROUTE_KEY)) { const props = element.props as EntityRoute; @@ -220,11 +220,11 @@ function maybeParseEntityPageNode( } const parentProps = element.props as { - children?: React.ReactNode; + children?: ReactNode; renderMultipleMatches?: 'first' | 'all'; }; - const children = React.Children.toArray(parentProps?.children); + const children = Children.toArray(parentProps?.children); if (!children.length) { return undefined; } diff --git a/packages/core-compat-api/src/collectLegacyRoutes.test.tsx b/packages/core-compat-api/src/collectLegacyRoutes.test.tsx index 2d64f88535..d536fbe9a1 100644 --- a/packages/core-compat-api/src/collectLegacyRoutes.test.tsx +++ b/packages/core-compat-api/src/collectLegacyRoutes.test.tsx @@ -26,7 +26,7 @@ import { import { PuppetDbPage } from '@backstage-community/plugin-puppetdb'; import { StackstormPage } from '@backstage-community/plugin-stackstorm'; import { ScoreBoardPage } from '@oriflame/backstage-plugin-score-card'; -import React, { Fragment } from 'react'; +import { Fragment } from 'react'; // TODO(rugvip): this should take into account that this is a test file, so these deps don't need to be in the dependencies // eslint-disable-next-line @backstage/no-undeclared-imports import { OpaqueFrontendPlugin } from '@internal/frontend'; diff --git a/packages/core-compat-api/src/collectLegacyRoutes.tsx b/packages/core-compat-api/src/collectLegacyRoutes.tsx index 072e6b3bb2..f65856ec08 100644 --- a/packages/core-compat-api/src/collectLegacyRoutes.tsx +++ b/packages/core-compat-api/src/collectLegacyRoutes.tsx @@ -33,7 +33,7 @@ import { FrontendModule, createFrontendModule, } from '@backstage/frontend-plugin-api'; -import React, { Children, ReactNode, isValidElement } from 'react'; +import { Children, ReactNode, isValidElement } from 'react'; import { Route, Routes } from 'react-router-dom'; import { convertLegacyRouteRef, @@ -187,87 +187,84 @@ export function collectLegacyRoutes( return extensions; }; - React.Children.forEach( - flatRoutesElement.props.children, - (route: ReactNode) => { - if (route === null) { - return; - } - // TODO(freben): Handle feature flag and permissions framework wrapper elements - if (!React.isValidElement(route)) { - throw new Error( - `Invalid element inside FlatRoutes, expected Route but found element of type ${typeof route}.`, - ); - } - if (route.type !== Route) { - throw new Error( - `Invalid element inside FlatRoutes, expected Route but found ${route.type}.`, - ); - } - const routeElement = route.props.element; - const path: string | undefined = route.props.path; - const plugin = - getComponentData(routeElement, 'core.plugin') ?? - orphanRoutesPlugin; - const routeRef = getComponentData( - routeElement, - 'core.mountPoint', + Children.forEach(flatRoutesElement.props.children, (route: ReactNode) => { + if (route === null) { + return; + } + // TODO(freben): Handle feature flag and permissions framework wrapper elements + if (!isValidElement(route)) { + throw new Error( + `Invalid element inside FlatRoutes, expected Route but found element of type ${typeof route}.`, ); - if (path === undefined) { - throw new Error( - `Route element inside FlatRoutes had no path prop value given`, - ); - } - - const extensions = getPluginExtensions(plugin); - const pageExtensionName = extensions.length ? getUniqueName() : undefined; - const pageExtensionId = `page:${plugin.getId()}${ - pageExtensionName ? `/${pageExtensionName}` : pageExtensionName - }`; - - extensions.push( - PageBlueprint.makeWithOverrides({ - name: pageExtensionName, - inputs: { - childRoutingShims: createExtensionInput([ - coreExtensionData.routePath.optional(), - coreExtensionData.routeRef.optional(), - ]), - }, - factory(originalFactory, { inputs: _inputs }) { - // todo(blam): why do we not use the inputs here? - return originalFactory({ - defaultPath: normalizeRoutePath(path), - routeRef: routeRef ? convertLegacyRouteRef(routeRef) : undefined, - loader: async () => - compatWrapper( - route.props.children ? ( - - - - - - ) : ( - routeElement - ), - ), - }); - }, - }), + } + if (route.type !== Route) { + throw new Error( + `Invalid element inside FlatRoutes, expected Route but found ${route.type}.`, ); + } + const routeElement = route.props.element; + const path: string | undefined = route.props.path; + const plugin = + getComponentData(routeElement, 'core.plugin') ?? + orphanRoutesPlugin; + const routeRef = getComponentData( + routeElement, + 'core.mountPoint', + ); + if (path === undefined) { + throw new Error( + `Route element inside FlatRoutes had no path prop value given`, + ); + } - visitRouteChildren({ - children: route.props.children, - parentExtensionId: pageExtensionId, - context: { - pluginId: plugin.getId(), - extensions, - getUniqueName, - discoverPlugin: getPluginExtensions, + const extensions = getPluginExtensions(plugin); + const pageExtensionName = extensions.length ? getUniqueName() : undefined; + const pageExtensionId = `page:${plugin.getId()}${ + pageExtensionName ? `/${pageExtensionName}` : pageExtensionName + }`; + + extensions.push( + PageBlueprint.makeWithOverrides({ + name: pageExtensionName, + inputs: { + childRoutingShims: createExtensionInput([ + coreExtensionData.routePath.optional(), + coreExtensionData.routeRef.optional(), + ]), }, - }); - }, - ); + factory(originalFactory, { inputs: _inputs }) { + // todo(blam): why do we not use the inputs here? + return originalFactory({ + defaultPath: normalizeRoutePath(path), + routeRef: routeRef ? convertLegacyRouteRef(routeRef) : undefined, + loader: async () => + compatWrapper( + route.props.children ? ( + + + + + + ) : ( + routeElement + ), + ), + }); + }, + }), + ); + + visitRouteChildren({ + children: route.props.children, + parentExtensionId: pageExtensionId, + context: { + pluginId: plugin.getId(), + extensions, + getUniqueName, + discoverPlugin: getPluginExtensions, + }, + }); + }); if (entityPage) { collectEntityPageContents(entityPage, { diff --git a/packages/core-compat-api/src/compatWrapper/BackwardsCompatProvider.tsx b/packages/core-compat-api/src/compatWrapper/BackwardsCompatProvider.tsx index 0f9ccfb2ad..3faaf124fd 100644 --- a/packages/core-compat-api/src/compatWrapper/BackwardsCompatProvider.tsx +++ b/packages/core-compat-api/src/compatWrapper/BackwardsCompatProvider.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useMemo } from 'react'; +import { useMemo } from 'react'; import { ReactNode } from 'react'; // eslint-disable-next-line @backstage/no-relative-monorepo-imports import { AppContextProvider } from '../../../core-app-api/src/app/AppContext'; diff --git a/packages/core-compat-api/src/compatWrapper/ForwardsCompatProvider.tsx b/packages/core-compat-api/src/compatWrapper/ForwardsCompatProvider.tsx index 9c646d5b00..ffa8bea9ab 100644 --- a/packages/core-compat-api/src/compatWrapper/ForwardsCompatProvider.tsx +++ b/packages/core-compat-api/src/compatWrapper/ForwardsCompatProvider.tsx @@ -40,7 +40,7 @@ import { iconsApiRef, routeResolutionApiRef, } from '@backstage/frontend-plugin-api'; -import React, { ComponentType, useMemo } from 'react'; +import { ComponentType, useMemo } from 'react'; import { ReactNode } from 'react'; import { toLegacyPlugin } from './BackwardsCompatProvider'; // eslint-disable-next-line @backstage/no-relative-monorepo-imports diff --git a/packages/core-compat-api/src/compatWrapper/compatWrapper.test.tsx b/packages/core-compat-api/src/compatWrapper/compatWrapper.test.tsx index 94fc8705e6..f1418e545f 100644 --- a/packages/core-compat-api/src/compatWrapper/compatWrapper.test.tsx +++ b/packages/core-compat-api/src/compatWrapper/compatWrapper.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { componentsApiRef, coreComponentRefs, diff --git a/packages/core-compat-api/src/compatWrapper/compatWrapper.tsx b/packages/core-compat-api/src/compatWrapper/compatWrapper.tsx index cd7378a384..206422ffa9 100644 --- a/packages/core-compat-api/src/compatWrapper/compatWrapper.tsx +++ b/packages/core-compat-api/src/compatWrapper/compatWrapper.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { useVersionedContext } from '@backstage/version-bridge'; import { ReactNode } from 'react'; import { BackwardsCompatProvider } from './BackwardsCompatProvider'; diff --git a/packages/core-compat-api/src/convertLegacyApp.test.tsx b/packages/core-compat-api/src/convertLegacyApp.test.tsx index c532c6da1a..810a5d3c97 100644 --- a/packages/core-compat-api/src/convertLegacyApp.test.tsx +++ b/packages/core-compat-api/src/convertLegacyApp.test.tsx @@ -18,7 +18,7 @@ import { AppRouter, FlatRoutes } from '@backstage/core-app-api'; import { PuppetDbPage } from '@backstage-community/plugin-puppetdb'; import { StackstormPage } from '@backstage-community/plugin-stackstorm'; import { ScoreBoardPage } from '@oriflame/backstage-plugin-score-card'; -import React, { ReactNode } from 'react'; +import { ReactNode } from 'react'; import { Route } from 'react-router-dom'; import { convertLegacyApp } from './convertLegacyApp'; import { diff --git a/packages/core-compat-api/src/convertLegacyApp.ts b/packages/core-compat-api/src/convertLegacyApp.ts index 2a62a6c1c6..0c3a8c0060 100644 --- a/packages/core-compat-api/src/convertLegacyApp.ts +++ b/packages/core-compat-api/src/convertLegacyApp.ts @@ -14,7 +14,9 @@ * limitations under the License. */ -import React, { +import { + JSX, + cloneElement, Children, Fragment, ReactElement, @@ -78,12 +80,12 @@ export interface ConvertLegacyAppOptions { * page content provided both via the old structure and the new plugins. Any * duplicate content needs to be removed from the old structure. */ - entityPage?: React.JSX.Element; + entityPage?: JSX.Element; } /** @public */ export function convertLegacyApp( - rootElement: React.JSX.Element, + rootElement: JSX.Element, options: ConvertLegacyAppOptions = {}, ): (FrontendPlugin | FrontendModule)[] { if (getComponentData(rootElement, 'core.type') === 'FlatRoutes') { @@ -141,7 +143,7 @@ export function convertLegacyApp( return [ coreExtensionData.reactElement( compatWrapper( - React.cloneElement( + cloneElement( rootEl, undefined, inputs.content.get(coreExtensionData.reactElement), diff --git a/packages/core-compat-api/src/convertLegacyAppOptions.tsx b/packages/core-compat-api/src/convertLegacyAppOptions.tsx index 7a0a016161..56aec7c1c5 100644 --- a/packages/core-compat-api/src/convertLegacyAppOptions.tsx +++ b/packages/core-compat-api/src/convertLegacyAppOptions.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React from 'react'; +import { ComponentType } from 'react'; import { ApiBlueprint, coreComponentRefs, @@ -41,7 +41,7 @@ import { toLegacyPlugin } from './compatWrapper/BackwardsCompatProvider'; import { compatWrapper } from './compatWrapper'; function componentCompatWrapper( - Component: React.ComponentType, + Component: ComponentType, ) { return (props: TProps) => compatWrapper(); } diff --git a/packages/core-compat-api/src/convertLegacyPageExtension.test.tsx b/packages/core-compat-api/src/convertLegacyPageExtension.test.tsx index c1630b31b5..4248cef098 100644 --- a/packages/core-compat-api/src/convertLegacyPageExtension.test.tsx +++ b/packages/core-compat-api/src/convertLegacyPageExtension.test.tsx @@ -25,7 +25,6 @@ import { renderInTestApp, } from '@backstage/frontend-test-utils'; import { screen } from '@testing-library/react'; -import React from 'react'; import { convertLegacyPageExtension } from './convertLegacyPageExtension'; import { convertLegacyRouteRef } from './convertLegacyRouteRef'; diff --git a/packages/core-compat-api/src/convertLegacyPageExtension.tsx b/packages/core-compat-api/src/convertLegacyPageExtension.tsx index 3931a730c8..f14b297047 100644 --- a/packages/core-compat-api/src/convertLegacyPageExtension.tsx +++ b/packages/core-compat-api/src/convertLegacyPageExtension.tsx @@ -25,7 +25,6 @@ import { import kebabCase from 'lodash/kebabCase'; import { convertLegacyRouteRef } from './convertLegacyRouteRef'; import { ComponentType } from 'react'; -import React from 'react'; import { compatWrapper } from './compatWrapper'; /** @public */ diff --git a/packages/core-components/src/components/AlertDisplay/AlertDisplay.test.tsx b/packages/core-components/src/components/AlertDisplay/AlertDisplay.test.tsx index f2f904a3e0..c934737065 100644 --- a/packages/core-components/src/components/AlertDisplay/AlertDisplay.test.tsx +++ b/packages/core-components/src/components/AlertDisplay/AlertDisplay.test.tsx @@ -21,7 +21,6 @@ import { fireEvent, screen } from '@testing-library/react'; import { AlertApiForwarder } from '@backstage/core-app-api'; import { AlertDisplay } from './AlertDisplay'; import Observable from 'zen-observable'; -import React from 'react'; import { act } from '@testing-library/react'; const TEST_MESSAGE = 'TEST_MESSAGE'; diff --git a/packages/core-components/src/components/AlertDisplay/AlertDisplay.tsx b/packages/core-components/src/components/AlertDisplay/AlertDisplay.tsx index 61876bd58b..a21192c91b 100644 --- a/packages/core-components/src/components/AlertDisplay/AlertDisplay.tsx +++ b/packages/core-components/src/components/AlertDisplay/AlertDisplay.tsx @@ -20,7 +20,7 @@ import Snackbar from '@material-ui/core/Snackbar'; import Typography from '@material-ui/core/Typography'; import CloseIcon from '@material-ui/icons/Close'; import Alert from '@material-ui/lab/Alert'; -import React, { useEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; import { coreComponentsTranslationRef } from '../../translation'; /** diff --git a/packages/core-components/src/components/AutoLogout/AutoLogout.tsx b/packages/core-components/src/components/AutoLogout/AutoLogout.tsx index a345ca4b2d..b328705e51 100644 --- a/packages/core-components/src/components/AutoLogout/AutoLogout.tsx +++ b/packages/core-components/src/components/AutoLogout/AutoLogout.tsx @@ -21,7 +21,7 @@ import { identityApiRef, useApi, } from '@backstage/core-plugin-api'; -import React, { useEffect, useMemo, useState } from 'react'; +import { useEffect, useMemo, useState } from 'react'; import { EventsType, IIdleTimer, diff --git a/packages/core-components/src/components/AutoLogout/Autologout.test.tsx b/packages/core-components/src/components/AutoLogout/Autologout.test.tsx index 5a555cd215..2885f12f31 100644 --- a/packages/core-components/src/components/AutoLogout/Autologout.test.tsx +++ b/packages/core-components/src/components/AutoLogout/Autologout.test.tsx @@ -24,7 +24,6 @@ import { renderInTestApp, mockApis, } from '@backstage/test-utils'; -import React from 'react'; import { AutoLogout } from './AutoLogout'; import { cleanup } from '@testing-library/react'; diff --git a/packages/core-components/src/components/AutoLogout/StillTherePrompt.stories.tsx b/packages/core-components/src/components/AutoLogout/StillTherePrompt.stories.tsx index 446afc226e..7de1bef509 100644 --- a/packages/core-components/src/components/AutoLogout/StillTherePrompt.stories.tsx +++ b/packages/core-components/src/components/AutoLogout/StillTherePrompt.stories.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import { StillTherePrompt, StillTherePromptProps } from './StillTherePrompt'; export default { diff --git a/packages/core-components/src/components/AutoLogout/StillTherePrompt.tsx b/packages/core-components/src/components/AutoLogout/StillTherePrompt.tsx index 9496199fd9..b42295fba2 100644 --- a/packages/core-components/src/components/AutoLogout/StillTherePrompt.tsx +++ b/packages/core-components/src/components/AutoLogout/StillTherePrompt.tsx @@ -20,7 +20,7 @@ import DialogActions from '@material-ui/core/DialogActions'; import DialogContent from '@material-ui/core/DialogContent'; import DialogContentText from '@material-ui/core/DialogContentText'; import DialogTitle from '@material-ui/core/DialogTitle'; -import React, { useEffect } from 'react'; +import { useEffect } from 'react'; import { IIdleTimer } from 'react-idle-timer'; import { coreComponentsTranslationRef } from '../../translation'; import { useTranslationRef } from '@backstage/core-plugin-api/alpha'; diff --git a/packages/core-components/src/components/Avatar/Avatar.stories.tsx b/packages/core-components/src/components/Avatar/Avatar.stories.tsx index dc0f7c00e7..4843e2bb73 100644 --- a/packages/core-components/src/components/Avatar/Avatar.stories.tsx +++ b/packages/core-components/src/components/Avatar/Avatar.stories.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { Avatar } from './Avatar'; import { makeStyles } from '@material-ui/core/styles'; diff --git a/packages/core-components/src/components/Avatar/Avatar.test.tsx b/packages/core-components/src/components/Avatar/Avatar.test.tsx index 1c08d57679..3f8b401277 100644 --- a/packages/core-components/src/components/Avatar/Avatar.test.tsx +++ b/packages/core-components/src/components/Avatar/Avatar.test.tsx @@ -15,7 +15,6 @@ */ import { render } from '@testing-library/react'; -import React from 'react'; import { Avatar } from './Avatar'; describe('', () => { diff --git a/packages/core-components/src/components/Avatar/Avatar.tsx b/packages/core-components/src/components/Avatar/Avatar.tsx index d3b0a13602..de1f76bcab 100644 --- a/packages/core-components/src/components/Avatar/Avatar.tsx +++ b/packages/core-components/src/components/Avatar/Avatar.tsx @@ -16,7 +16,7 @@ import MaterialAvatar from '@material-ui/core/Avatar'; import { makeStyles, Theme } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; -import React, { CSSProperties } from 'react'; +import { CSSProperties } from 'react'; import { extractInitials, stringToColor } from './utils'; import classNames from 'classnames'; diff --git a/packages/core-components/src/components/Chip/Chip.stories.tsx b/packages/core-components/src/components/Chip/Chip.stories.tsx index 5e00779209..4423a2ca58 100644 --- a/packages/core-components/src/components/Chip/Chip.stories.tsx +++ b/packages/core-components/src/components/Chip/Chip.stories.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import AddIcon from '@material-ui/icons/Add'; import WarningIcon from '@material-ui/icons/Warning'; import EditIcon from '@material-ui/icons/Edit'; diff --git a/packages/core-components/src/components/CodeSnippet/CodeSnippet.stories.tsx b/packages/core-components/src/components/CodeSnippet/CodeSnippet.stories.tsx index c4ed5ae072..bea5cf778e 100644 --- a/packages/core-components/src/components/CodeSnippet/CodeSnippet.stories.tsx +++ b/packages/core-components/src/components/CodeSnippet/CodeSnippet.stories.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { CodeSnippet } from './CodeSnippet'; import { InfoCard } from '../../layout/InfoCard'; diff --git a/packages/core-components/src/components/CodeSnippet/CodeSnippet.test.tsx b/packages/core-components/src/components/CodeSnippet/CodeSnippet.test.tsx index c0096e7ae9..753b9e69c4 100644 --- a/packages/core-components/src/components/CodeSnippet/CodeSnippet.test.tsx +++ b/packages/core-components/src/components/CodeSnippet/CodeSnippet.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { renderInTestApp } from '@backstage/test-utils'; import { CodeSnippet } from './CodeSnippet'; diff --git a/packages/core-components/src/components/CodeSnippet/CodeSnippet.tsx b/packages/core-components/src/components/CodeSnippet/CodeSnippet.tsx index 6eb274b015..8c31bc4e6d 100644 --- a/packages/core-components/src/components/CodeSnippet/CodeSnippet.tsx +++ b/packages/core-components/src/components/CodeSnippet/CodeSnippet.tsx @@ -16,7 +16,6 @@ import Box from '@material-ui/core/Box'; import { useTheme } from '@material-ui/core/styles'; -import React from 'react'; import type {} from 'react-syntax-highlighter'; import LightAsync from 'react-syntax-highlighter/dist/esm/light-async'; import dark from 'react-syntax-highlighter/dist/esm/styles/hljs/dark'; diff --git a/packages/core-components/src/components/CopyTextButton/CopyTextButton.stories.tsx b/packages/core-components/src/components/CopyTextButton/CopyTextButton.stories.tsx index 3e6435ddad..39c6782207 100644 --- a/packages/core-components/src/components/CopyTextButton/CopyTextButton.stories.tsx +++ b/packages/core-components/src/components/CopyTextButton/CopyTextButton.stories.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { CopyTextButton } from './CopyTextButton'; export default { diff --git a/packages/core-components/src/components/CopyTextButton/CopyTextButton.test.tsx b/packages/core-components/src/components/CopyTextButton/CopyTextButton.test.tsx index 92dcb9163e..3430daaf73 100644 --- a/packages/core-components/src/components/CopyTextButton/CopyTextButton.test.tsx +++ b/packages/core-components/src/components/CopyTextButton/CopyTextButton.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { act, fireEvent } from '@testing-library/react'; import { renderInTestApp, TestApiProvider } from '@backstage/test-utils'; import { CopyTextButton } from './CopyTextButton'; diff --git a/packages/core-components/src/components/CopyTextButton/CopyTextButton.tsx b/packages/core-components/src/components/CopyTextButton/CopyTextButton.tsx index a82965916f..fd8179c6f9 100644 --- a/packages/core-components/src/components/CopyTextButton/CopyTextButton.tsx +++ b/packages/core-components/src/components/CopyTextButton/CopyTextButton.tsx @@ -18,7 +18,7 @@ import { errorApiRef, useApi } from '@backstage/core-plugin-api'; import IconButton from '@material-ui/core/IconButton'; import Tooltip from '@material-ui/core/Tooltip'; import CopyIcon from '@material-ui/icons/FileCopy'; -import React, { MouseEventHandler, useEffect, useState } from 'react'; +import { MouseEventHandler, useEffect, useState } from 'react'; import useCopyToClipboard from 'react-use/esm/useCopyToClipboard'; import { coreComponentsTranslationRef } from '../../translation'; import { useTranslationRef } from '@backstage/core-plugin-api/alpha'; diff --git a/packages/core-components/src/components/CreateButton/CreateButton.tsx b/packages/core-components/src/components/CreateButton/CreateButton.tsx index beca7e8c73..04105b3182 100644 --- a/packages/core-components/src/components/CreateButton/CreateButton.tsx +++ b/packages/core-components/src/components/CreateButton/CreateButton.tsx @@ -17,7 +17,6 @@ import Button from '@material-ui/core/Button'; import IconButton from '@material-ui/core/IconButton'; import useMediaQuery from '@material-ui/core/useMediaQuery'; -import React from 'react'; import { Link as RouterLink, LinkProps } from 'react-router-dom'; import AddCircleOutline from '@material-ui/icons/AddCircleOutline'; import { Theme } from '@material-ui/core/styles'; diff --git a/packages/core-components/src/components/DependencyGraph/DefaultLabel.tsx b/packages/core-components/src/components/DependencyGraph/DefaultLabel.tsx index d4a91e50db..88816d5b45 100644 --- a/packages/core-components/src/components/DependencyGraph/DefaultLabel.tsx +++ b/packages/core-components/src/components/DependencyGraph/DefaultLabel.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import makeStyles from '@material-ui/core/styles/makeStyles'; import { DependencyGraphTypes as Types } from './types'; diff --git a/packages/core-components/src/components/DependencyGraph/DefaultNode.tsx b/packages/core-components/src/components/DependencyGraph/DefaultNode.tsx index 81a918c7b8..71138001f7 100644 --- a/packages/core-components/src/components/DependencyGraph/DefaultNode.tsx +++ b/packages/core-components/src/components/DependencyGraph/DefaultNode.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React from 'react'; +import { useState, useRef, useLayoutEffect } from 'react'; import { makeStyles } from '@material-ui/core/styles'; import { DependencyGraphTypes as Types } from './types'; @@ -37,11 +37,11 @@ const useStyles = makeStyles( /** @public */ export function DefaultNode({ node: { id } }: Types.RenderNodeProps) { const classes = useStyles(); - const [width, setWidth] = React.useState(0); - const [height, setHeight] = React.useState(0); - const idRef = React.useRef(null); + const [width, setWidth] = useState(0); + const [height, setHeight] = useState(0); + const idRef = useRef(null); - React.useLayoutEffect(() => { + useLayoutEffect(() => { // set the width to the length of the ID if (idRef.current) { let { height: renderedHeight, width: renderedWidth } = diff --git a/packages/core-components/src/components/DependencyGraph/DependencyGraph.stories.tsx b/packages/core-components/src/components/DependencyGraph/DependencyGraph.stories.tsx index 99d6e7d0fd..3ed4a25730 100644 --- a/packages/core-components/src/components/DependencyGraph/DependencyGraph.stories.tsx +++ b/packages/core-components/src/components/DependencyGraph/DependencyGraph.stories.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { DependencyGraph } from './DependencyGraph'; import { DependencyGraphTypes as Types } from './types'; diff --git a/packages/core-components/src/components/DependencyGraph/DependencyGraph.test.tsx b/packages/core-components/src/components/DependencyGraph/DependencyGraph.test.tsx index 30481a7c85..6535808059 100644 --- a/packages/core-components/src/components/DependencyGraph/DependencyGraph.test.tsx +++ b/packages/core-components/src/components/DependencyGraph/DependencyGraph.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { render } from '@testing-library/react'; import { DependencyGraph } from './DependencyGraph'; import { DependencyGraphTypes as Types } from './types'; diff --git a/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx b/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx index 770f1c9c23..d690253b06 100644 --- a/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx +++ b/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx @@ -14,7 +14,14 @@ * limitations under the License. */ -import React from 'react'; +import { + SVGProps, + useState, + useRef, + useMemo, + useCallback, + useEffect, +} from 'react'; import * as d3Zoom from 'd3-zoom'; import * as d3Selection from 'd3-selection'; import useTheme from '@material-ui/core/styles/useTheme'; @@ -33,7 +40,7 @@ import { ARROW_MARKER_ID } from './constants'; * `` and `` are useful when rendering custom or edge labels */ export interface DependencyGraphProps - extends React.SVGProps { + extends SVGProps { /** * Edges of graph */ @@ -212,20 +219,20 @@ export function DependencyGraph( ...svgProps } = props; const theme = useTheme(); - const [containerWidth, setContainerWidth] = React.useState(100); - const [containerHeight, setContainerHeight] = React.useState(100); + const [containerWidth, setContainerWidth] = useState(100); + const [containerHeight, setContainerHeight] = useState(100); - const graph = React.useRef< - dagre.graphlib.Graph> - >(new dagre.graphlib.Graph()); - const [graphWidth, setGraphWidth] = React.useState( + const graph = useRef>>( + new dagre.graphlib.Graph(), + ); + const [graphWidth, setGraphWidth] = useState( graph.current.graph()?.width || 0, ); - const [graphHeight, setGraphHeight] = React.useState( + const [graphHeight, setGraphHeight] = useState( graph.current.graph()?.height || 0, ); - const [graphNodes, setGraphNodes] = React.useState([]); - const [graphEdges, setGraphEdges] = React.useState([]); + const [graphNodes, setGraphNodes] = useState([]); + const [graphEdges, setGraphEdges] = useState([]); const maxWidth = Math.max(graphWidth, containerWidth); const maxHeight = Math.max(graphHeight, containerHeight); @@ -233,7 +240,7 @@ export function DependencyGraph( const scalableHeight = fit === 'grow' ? maxHeight : minHeight; - const containerRef = React.useMemo( + const containerRef = useMemo( () => debounce((node: SVGSVGElement) => { if (!node) { @@ -286,7 +293,7 @@ export function DependencyGraph( [containerHeight, containerWidth, maxWidth, maxHeight, zoom], ); - const setNodesAndEdges = React.useCallback(() => { + const setNodesAndEdges = useCallback(() => { // Cleaning up lingering nodes and edges const currentGraphNodes = graph.current.nodes(); const currentGraphEdges = graph.current.edges(); @@ -335,7 +342,7 @@ export function DependencyGraph( }); }, [edges, nodes, labelPosition, labelOffset, edgeWeight, edgeRanks]); - const updateGraph = React.useMemo( + const updateGraph = useMemo( () => debounce( () => { @@ -355,7 +362,7 @@ export function DependencyGraph( [], ); - React.useEffect(() => { + useEffect(() => { graph.current.setGraph({ rankdir: direction, align, diff --git a/packages/core-components/src/components/DependencyGraph/Edge.test.tsx b/packages/core-components/src/components/DependencyGraph/Edge.test.tsx index 78fb27f15f..78d63fa48e 100644 --- a/packages/core-components/src/components/DependencyGraph/Edge.test.tsx +++ b/packages/core-components/src/components/DependencyGraph/Edge.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { render } from '@testing-library/react'; import { Edge } from './Edge'; import { DependencyGraphTypes as Types } from './types'; diff --git a/packages/core-components/src/components/DependencyGraph/Edge.tsx b/packages/core-components/src/components/DependencyGraph/Edge.tsx index cd8dd0642a..0f28c59403 100644 --- a/packages/core-components/src/components/DependencyGraph/Edge.tsx +++ b/packages/core-components/src/components/DependencyGraph/Edge.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React from 'react'; +import { useRef, useLayoutEffect, useMemo } from 'react'; import * as d3Shape from 'd3-shape'; import isFinite from 'lodash/isFinite'; import makeStyles from '@material-ui/core/styles/makeStyles'; @@ -86,9 +86,9 @@ export function Edge({ const labelProps: Types.DependencyEdge = edge; const classes = useStyles(); - const labelRef = React.useRef(null); + const labelRef = useRef(null); - React.useLayoutEffect(() => { + useLayoutEffect(() => { // set the label width to the actual rendered width to properly layout graph if (labelRef.current) { let { height: renderedHeight, width: renderedWidth } = @@ -108,7 +108,7 @@ export function Edge({ let path: string = ''; - const createPath = React.useMemo( + const createPath = useMemo( () => d3Shape .line() diff --git a/packages/core-components/src/components/DependencyGraph/Node.test.tsx b/packages/core-components/src/components/DependencyGraph/Node.test.tsx index a507213495..4879b4fda3 100644 --- a/packages/core-components/src/components/DependencyGraph/Node.test.tsx +++ b/packages/core-components/src/components/DependencyGraph/Node.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import dagre from '@dagrejs/dagre'; import { render } from '@testing-library/react'; import { Node } from './Node'; diff --git a/packages/core-components/src/components/DependencyGraph/Node.tsx b/packages/core-components/src/components/DependencyGraph/Node.tsx index aac1cd81aa..4ed06b17f7 100644 --- a/packages/core-components/src/components/DependencyGraph/Node.tsx +++ b/packages/core-components/src/components/DependencyGraph/Node.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React from 'react'; +import { useRef, useLayoutEffect } from 'react'; import makeStyles from '@material-ui/core/styles/makeStyles'; import { DefaultNode } from './DefaultNode'; import { DependencyGraphTypes as Types } from './types'; @@ -53,9 +53,9 @@ export function Node({ const { width, height, x = 0, y = 0 } = node; const nodeProps: Types.DependencyNode = node; const classes = useStyles(); - const nodeRef = React.useRef(null); + const nodeRef = useRef(null); - React.useLayoutEffect(() => { + useLayoutEffect(() => { // set the node width to the actual rendered width to properly layout graph if (nodeRef.current) { let { height: renderedHeight, width: renderedWidth } = diff --git a/packages/core-components/src/components/DependencyGraph/types.ts b/packages/core-components/src/components/DependencyGraph/types.ts index f4df5b3066..e8fc9f6da3 100644 --- a/packages/core-components/src/components/DependencyGraph/types.ts +++ b/packages/core-components/src/components/DependencyGraph/types.ts @@ -20,7 +20,7 @@ * @packageDocumentation */ -import React from 'react'; +import { ReactNode } from 'react'; /** * Types for the {@link DependencyGraph} component. @@ -62,7 +62,7 @@ export namespace DependencyGraphTypes { */ export type RenderLabelFunction = ( props: RenderLabelProps, - ) => React.ReactNode; + ) => ReactNode; /** * Node of {@link DependencyGraph} @@ -87,7 +87,7 @@ export namespace DependencyGraphTypes { */ export type RenderNodeFunction = ( props: RenderNodeProps, - ) => React.ReactNode; + ) => ReactNode; /** * Graph direction diff --git a/packages/core-components/src/components/Dialog/Dialog.stories.tsx b/packages/core-components/src/components/Dialog/Dialog.stories.tsx index ecdd218cf6..7171e9c543 100644 --- a/packages/core-components/src/components/Dialog/Dialog.stories.tsx +++ b/packages/core-components/src/components/Dialog/Dialog.stories.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import Button from '@material-ui/core/Button'; import Dialog from '@material-ui/core/Dialog'; import DialogActions from '@material-ui/core/DialogActions'; diff --git a/packages/core-components/src/components/DismissableBanner/DismissableBanner.stories.tsx b/packages/core-components/src/components/DismissableBanner/DismissableBanner.stories.tsx index ac341071bf..7cf6374e13 100644 --- a/packages/core-components/src/components/DismissableBanner/DismissableBanner.stories.tsx +++ b/packages/core-components/src/components/DismissableBanner/DismissableBanner.stories.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { DismissableBanner, Props } from './DismissableBanner'; import Typography from '@material-ui/core/Typography'; import { WebStorage } from '@backstage/core-app-api'; diff --git a/packages/core-components/src/components/DismissableBanner/DismissableBanner.test.tsx b/packages/core-components/src/components/DismissableBanner/DismissableBanner.test.tsx index 6f6da1231f..c48989a7a5 100644 --- a/packages/core-components/src/components/DismissableBanner/DismissableBanner.test.tsx +++ b/packages/core-components/src/components/DismissableBanner/DismissableBanner.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { fireEvent } from '@testing-library/react'; import { TestApiRegistry, diff --git a/packages/core-components/src/components/DismissableBanner/DismissableBanner.tsx b/packages/core-components/src/components/DismissableBanner/DismissableBanner.tsx index f65db08393..ceca5861ab 100644 --- a/packages/core-components/src/components/DismissableBanner/DismissableBanner.tsx +++ b/packages/core-components/src/components/DismissableBanner/DismissableBanner.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { ReactNode, useMemo } from 'react'; +import { ReactNode, useMemo } from 'react'; import { useApi, storageApiRef } from '@backstage/core-plugin-api'; import useObservable from 'react-use/esm/useObservable'; import classNames from 'classnames'; diff --git a/packages/core-components/src/components/Drawer/Drawer.stories.tsx b/packages/core-components/src/components/Drawer/Drawer.stories.tsx index 7e1c8a728f..0c7e8dbfdb 100644 --- a/packages/core-components/src/components/Drawer/Drawer.stories.tsx +++ b/packages/core-components/src/components/Drawer/Drawer.stories.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useState } from 'react'; +import { useState } from 'react'; import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'; import Drawer from '@material-ui/core/Drawer'; import Button from '@material-ui/core/Button'; diff --git a/packages/core-components/src/components/EmptyState/EmptyState.stories.tsx b/packages/core-components/src/components/EmptyState/EmptyState.stories.tsx index f87d0a82ce..07f6ea8fa1 100644 --- a/packages/core-components/src/components/EmptyState/EmptyState.stories.tsx +++ b/packages/core-components/src/components/EmptyState/EmptyState.stories.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { EmptyState } from './EmptyState'; import Button from '@material-ui/core/Button'; import { MissingAnnotationEmptyState } from './MissingAnnotationEmptyState'; diff --git a/packages/core-components/src/components/EmptyState/EmptyState.test.tsx b/packages/core-components/src/components/EmptyState/EmptyState.test.tsx index 35dc3a80f2..5d54d686f5 100644 --- a/packages/core-components/src/components/EmptyState/EmptyState.test.tsx +++ b/packages/core-components/src/components/EmptyState/EmptyState.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { EmptyState } from './EmptyState'; import { renderInTestApp } from '@backstage/test-utils'; import Button from '@material-ui/core/Button'; diff --git a/packages/core-components/src/components/EmptyState/EmptyState.tsx b/packages/core-components/src/components/EmptyState/EmptyState.tsx index 3691ffca9e..51c860327c 100644 --- a/packages/core-components/src/components/EmptyState/EmptyState.tsx +++ b/packages/core-components/src/components/EmptyState/EmptyState.tsx @@ -17,7 +17,6 @@ import Grid from '@material-ui/core/Grid'; import { makeStyles } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; -import React from 'react'; import { EmptyStateImage } from './EmptyStateImage'; /** @public */ diff --git a/packages/core-components/src/components/EmptyState/EmptyStateImage.test.tsx b/packages/core-components/src/components/EmptyState/EmptyStateImage.test.tsx index 6b7d01ea3f..4750540660 100644 --- a/packages/core-components/src/components/EmptyState/EmptyStateImage.test.tsx +++ b/packages/core-components/src/components/EmptyState/EmptyStateImage.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { renderInTestApp } from '@backstage/test-utils'; import { EmptyStateImage } from './EmptyStateImage'; import { screen } from '@testing-library/react'; diff --git a/packages/core-components/src/components/EmptyState/EmptyStateImage.tsx b/packages/core-components/src/components/EmptyState/EmptyStateImage.tsx index 0200e3a39b..2d738ac7fd 100644 --- a/packages/core-components/src/components/EmptyState/EmptyStateImage.tsx +++ b/packages/core-components/src/components/EmptyState/EmptyStateImage.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import missingAnnotation from './assets/missingAnnotation.svg'; import noInformation from './assets/noInformation.svg'; import createComponent from './assets/createComponent.svg'; diff --git a/packages/core-components/src/components/EmptyState/MissingAnnotationEmptyState.tsx b/packages/core-components/src/components/EmptyState/MissingAnnotationEmptyState.tsx index 31168b4ac7..67481ed97a 100644 --- a/packages/core-components/src/components/EmptyState/MissingAnnotationEmptyState.tsx +++ b/packages/core-components/src/components/EmptyState/MissingAnnotationEmptyState.tsx @@ -18,7 +18,6 @@ import Box from '@material-ui/core/Box'; import Button from '@material-ui/core/Button'; import { makeStyles } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; -import React from 'react'; import { CodeSnippet } from '../CodeSnippet'; import { Link } from '../Link'; diff --git a/packages/core-components/src/components/ErrorPanel/ErrorPanel.test.tsx b/packages/core-components/src/components/ErrorPanel/ErrorPanel.test.tsx index 3158f9a1d4..3d3c2c8d4c 100644 --- a/packages/core-components/src/components/ErrorPanel/ErrorPanel.test.tsx +++ b/packages/core-components/src/components/ErrorPanel/ErrorPanel.test.tsx @@ -16,7 +16,6 @@ import { WarningPanel } from '../WarningPanel'; import { screen } from '@testing-library/react'; -import React from 'react'; import { renderInTestApp } from '@backstage/test-utils'; import { WarningProps } from '../WarningPanel/WarningPanel'; diff --git a/packages/core-components/src/components/ErrorPanel/ErrorPanel.tsx b/packages/core-components/src/components/ErrorPanel/ErrorPanel.tsx index 848dc51d75..f86b65e257 100644 --- a/packages/core-components/src/components/ErrorPanel/ErrorPanel.tsx +++ b/packages/core-components/src/components/ErrorPanel/ErrorPanel.tsx @@ -18,7 +18,7 @@ import { makeStyles } from '@material-ui/core/styles'; import List from '@material-ui/core/List'; import ListItem from '@material-ui/core/ListItem'; import ListItemText from '@material-ui/core/ListItemText'; -import React, { PropsWithChildren } from 'react'; +import { PropsWithChildren } from 'react'; import { CopyTextButton } from '../CopyTextButton'; import { WarningPanel } from '../WarningPanel'; diff --git a/packages/core-components/src/components/FavoriteToggle/FavoriteToggle.stories.tsx b/packages/core-components/src/components/FavoriteToggle/FavoriteToggle.stories.tsx index e531e9b254..af3787023a 100644 --- a/packages/core-components/src/components/FavoriteToggle/FavoriteToggle.stories.tsx +++ b/packages/core-components/src/components/FavoriteToggle/FavoriteToggle.stories.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, { ComponentType, PropsWithChildren } from 'react'; +import { useState, ComponentType, PropsWithChildren } from 'react'; import { FavoriteToggle } from './FavoriteToggle'; import { UnifiedThemeProvider, @@ -32,7 +32,7 @@ export default { }; export const Default = () => { - const [isFavorite, setFavorite] = React.useState(false); + const [isFavorite, setFavorite] = useState(false); return ( { - const [isFavorite, setFavorite] = React.useState(false); + const [isFavorite, setFavorite] = useState(false); return ( ', () => { diff --git a/packages/core-components/src/components/FavoriteToggle/FavoriteToggle.tsx b/packages/core-components/src/components/FavoriteToggle/FavoriteToggle.tsx index ba7b4edb99..df6b367b57 100644 --- a/packages/core-components/src/components/FavoriteToggle/FavoriteToggle.tsx +++ b/packages/core-components/src/components/FavoriteToggle/FavoriteToggle.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, { ComponentProps } from 'react'; +import { ComponentProps } from 'react'; import IconButton from '@material-ui/core/IconButton'; import Tooltip from '@material-ui/core/Tooltip'; import Typography from '@material-ui/core/Typography'; diff --git a/packages/core-components/src/components/FeatureDiscovery/FeatureCalloutCircular.test.tsx b/packages/core-components/src/components/FeatureDiscovery/FeatureCalloutCircular.test.tsx index b5106e1bf9..f1c8b159df 100644 --- a/packages/core-components/src/components/FeatureDiscovery/FeatureCalloutCircular.test.tsx +++ b/packages/core-components/src/components/FeatureDiscovery/FeatureCalloutCircular.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { act, fireEvent } from '@testing-library/react'; import { renderInTestApp } from '@backstage/test-utils'; import { FeatureCalloutCircular } from './FeatureCalloutCircular'; diff --git a/packages/core-components/src/components/FeatureDiscovery/FeatureCalloutCircular.tsx b/packages/core-components/src/components/FeatureDiscovery/FeatureCalloutCircular.tsx index 92c10497f4..0131c3ac81 100644 --- a/packages/core-components/src/components/FeatureDiscovery/FeatureCalloutCircular.tsx +++ b/packages/core-components/src/components/FeatureDiscovery/FeatureCalloutCircular.tsx @@ -17,7 +17,7 @@ import Box from '@material-ui/core/Box'; import ClickAwayListener from '@material-ui/core/ClickAwayListener'; import { makeStyles } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; -import React, { +import { PropsWithChildren, useCallback, useEffect, diff --git a/packages/core-components/src/components/HeaderIconLinkRow/HeaderIconLinkRow.stories.tsx b/packages/core-components/src/components/HeaderIconLinkRow/HeaderIconLinkRow.stories.tsx index e472ab5599..a02944a827 100644 --- a/packages/core-components/src/components/HeaderIconLinkRow/HeaderIconLinkRow.stories.tsx +++ b/packages/core-components/src/components/HeaderIconLinkRow/HeaderIconLinkRow.stories.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { HeaderIconLinkRow } from '../HeaderIconLinkRow'; import { IconLinkVerticalProps } from './IconLinkVertical'; diff --git a/packages/core-components/src/components/HeaderIconLinkRow/HeaderIconLinkRow.tsx b/packages/core-components/src/components/HeaderIconLinkRow/HeaderIconLinkRow.tsx index e30d407377..1fcf664bab 100644 --- a/packages/core-components/src/components/HeaderIconLinkRow/HeaderIconLinkRow.tsx +++ b/packages/core-components/src/components/HeaderIconLinkRow/HeaderIconLinkRow.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ import { makeStyles } from '@material-ui/core/styles'; -import React from 'react'; import { IconLinkVertical, IconLinkVerticalProps } from './IconLinkVertical'; /** @public */ diff --git a/packages/core-components/src/components/HeaderIconLinkRow/IconLinkVertical.stories.tsx b/packages/core-components/src/components/HeaderIconLinkRow/IconLinkVertical.stories.tsx index de5e8144fb..956ee6fd0e 100644 --- a/packages/core-components/src/components/HeaderIconLinkRow/IconLinkVertical.stories.tsx +++ b/packages/core-components/src/components/HeaderIconLinkRow/IconLinkVertical.stories.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import { IconLinkVertical, IconLinkVerticalProps } from './IconLinkVertical'; import LinkIcon from '@material-ui/icons/Link'; diff --git a/packages/core-components/src/components/HeaderIconLinkRow/IconLinkVertical.tsx b/packages/core-components/src/components/HeaderIconLinkRow/IconLinkVertical.tsx index c1c0bd4ec8..a15e600e8c 100644 --- a/packages/core-components/src/components/HeaderIconLinkRow/IconLinkVertical.tsx +++ b/packages/core-components/src/components/HeaderIconLinkRow/IconLinkVertical.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; +import { ReactNode, MouseEventHandler } from 'react'; import classnames from 'classnames'; import { makeStyles } from '@material-ui/core/styles'; import LinkIcon from '@material-ui/icons/Link'; @@ -25,9 +25,9 @@ export type IconLinkVerticalProps = { color?: 'primary' | 'secondary'; disabled?: boolean; href?: string; - icon?: React.ReactNode; + icon?: ReactNode; label: string; - onClick?: React.MouseEventHandler; + onClick?: MouseEventHandler; title?: string; }; diff --git a/packages/core-components/src/components/HorizontalScrollGrid/HorizontalScrollGrid.stories.tsx b/packages/core-components/src/components/HorizontalScrollGrid/HorizontalScrollGrid.stories.tsx index 55fff2430a..8f5904bc1d 100644 --- a/packages/core-components/src/components/HorizontalScrollGrid/HorizontalScrollGrid.stories.tsx +++ b/packages/core-components/src/components/HorizontalScrollGrid/HorizontalScrollGrid.stories.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import { HorizontalScrollGrid } from './HorizontalScrollGrid'; const cardContentStyle = { height: 0, padding: 150, margin: 20 }; diff --git a/packages/core-components/src/components/HorizontalScrollGrid/HorizontalScrollGrid.test.tsx b/packages/core-components/src/components/HorizontalScrollGrid/HorizontalScrollGrid.test.tsx index a3ef93d9fa..31ec7dbaae 100644 --- a/packages/core-components/src/components/HorizontalScrollGrid/HorizontalScrollGrid.test.tsx +++ b/packages/core-components/src/components/HorizontalScrollGrid/HorizontalScrollGrid.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { fireEvent } from '@testing-library/react'; import { renderInTestApp } from '@backstage/test-utils'; import { HorizontalScrollGrid } from './HorizontalScrollGrid'; diff --git a/packages/core-components/src/components/HorizontalScrollGrid/HorizontalScrollGrid.tsx b/packages/core-components/src/components/HorizontalScrollGrid/HorizontalScrollGrid.tsx index e89b7896dd..bc72a6ac3f 100644 --- a/packages/core-components/src/components/HorizontalScrollGrid/HorizontalScrollGrid.tsx +++ b/packages/core-components/src/components/HorizontalScrollGrid/HorizontalScrollGrid.tsx @@ -20,7 +20,13 @@ import { makeStyles } from '@material-ui/core/styles'; import ChevronLeftIcon from '@material-ui/icons/ChevronLeft'; import ChevronRightIcon from '@material-ui/icons/ChevronRight'; import classNames from 'classnames'; -import React, { PropsWithChildren } from 'react'; +import { + MutableRefObject, + useState, + useLayoutEffect, + useRef, + PropsWithChildren, +} from 'react'; const generateGradientStops = (themeType: 'dark' | 'light') => { // 97% corresponds to the theme.palette.background.default for the light theme @@ -120,13 +126,13 @@ const useStyles = makeStyles( // Returns scroll distance from left and right function useScrollDistance( - ref: React.MutableRefObject, + ref: MutableRefObject, ): [number, number] { - const [[scrollLeft, scrollRight], setScroll] = React.useState< - [number, number] - >([0, 0]); + const [[scrollLeft, scrollRight], setScroll] = useState<[number, number]>([ + 0, 0, + ]); - React.useLayoutEffect(() => { + useLayoutEffect(() => { const el = ref.current; if (!el) { setScroll([0, 0]); @@ -158,13 +164,13 @@ function useScrollDistance( // Used to animate scrolling. Returns a single setScrollTarget function, when called with e.g. 200, // the element pointer to by the ref will be scrolled 200px forwards over time. function useSmoothScroll( - ref: React.MutableRefObject, + ref: MutableRefObject, speed: number, minDistance: number, ) { - const [scrollTarget, setScrollTarget] = React.useState(0); + const [scrollTarget, setScrollTarget] = useState(0); - React.useLayoutEffect(() => { + useLayoutEffect(() => { if (scrollTarget === 0) { return; } @@ -213,7 +219,7 @@ export function HorizontalScrollGrid(props: PropsWithChildren) { ...otherProps } = props; const classes = useStyles(props); - const ref = React.useRef(); + const ref = useRef(); const [scrollLeft, scrollRight] = useScrollDistance(ref); const setScrollTarget = useSmoothScroll(ref, scrollSpeed, minScrollDistance); diff --git a/packages/core-components/src/components/Lifecycle/Lifecycle.stories.tsx b/packages/core-components/src/components/Lifecycle/Lifecycle.stories.tsx index 8640dd28e9..1e7db283c8 100644 --- a/packages/core-components/src/components/Lifecycle/Lifecycle.stories.tsx +++ b/packages/core-components/src/components/Lifecycle/Lifecycle.stories.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import { Lifecycle } from './Lifecycle'; export default { diff --git a/packages/core-components/src/components/Lifecycle/Lifecycle.test.tsx b/packages/core-components/src/components/Lifecycle/Lifecycle.test.tsx index 05b0f650dd..3d78a76ba1 100644 --- a/packages/core-components/src/components/Lifecycle/Lifecycle.test.tsx +++ b/packages/core-components/src/components/Lifecycle/Lifecycle.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { renderInTestApp } from '@backstage/test-utils'; import { Lifecycle } from './Lifecycle'; diff --git a/packages/core-components/src/components/Lifecycle/Lifecycle.tsx b/packages/core-components/src/components/Lifecycle/Lifecycle.tsx index f6f4c3cd3e..0478f7dee1 100644 --- a/packages/core-components/src/components/Lifecycle/Lifecycle.tsx +++ b/packages/core-components/src/components/Lifecycle/Lifecycle.tsx @@ -16,7 +16,6 @@ import { makeStyles } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; import CSS from 'csstype'; -import React from 'react'; type Props = CSS.Properties & { shorthand?: boolean; diff --git a/packages/core-components/src/components/Link/Link.stories.tsx b/packages/core-components/src/components/Link/Link.stories.tsx index e069459e76..cd9cb825e5 100644 --- a/packages/core-components/src/components/Link/Link.stories.tsx +++ b/packages/core-components/src/components/Link/Link.stories.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, { ComponentType, PropsWithChildren } from 'react'; +import { ComponentType, PropsWithChildren } from 'react'; import { Link } from './Link'; import { Route, diff --git a/packages/core-components/src/components/Link/Link.test.tsx b/packages/core-components/src/components/Link/Link.test.tsx index 0a86c06d43..c132d832a2 100644 --- a/packages/core-components/src/components/Link/Link.test.tsx +++ b/packages/core-components/src/components/Link/Link.test.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { ComponentType } from 'react'; +import { PropsWithChildren, ComponentType } from 'react'; import { fireEvent, waitFor, screen, renderHook } from '@testing-library/react'; import { mockApis, @@ -153,9 +153,7 @@ describe('', () => { }); describe('useResolvedPath', () => { - const wrapper: ComponentType> = ({ - children, - }) => { + const wrapper: ComponentType> = ({ children }) => { const configApi = new ConfigReader({ app: { baseUrl: 'http://localhost:3000/example' }, }); diff --git a/packages/core-components/src/components/Link/Link.tsx b/packages/core-components/src/components/Link/Link.tsx index 0008a9ff2c..f968d7b098 100644 --- a/packages/core-components/src/components/Link/Link.tsx +++ b/packages/core-components/src/components/Link/Link.tsx @@ -13,7 +13,12 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { configApiRef, useAnalytics, useApi } from '@backstage/core-plugin-api'; +import { + configApiRef, + useAnalytics, + useApi, + useApp, +} from '@backstage/core-plugin-api'; // eslint-disable-next-line no-restricted-imports import MaterialLink, { LinkProps as MaterialLinkProps, @@ -22,7 +27,13 @@ import { makeStyles } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; import classnames from 'classnames'; import { trimEnd } from 'lodash'; -import React, { ElementType } from 'react'; +import { + ReactNode, + ReactElement, + MouseEvent as ReactMouseEvent, + ElementType, + forwardRef, +} from 'react'; import { createRoutesFromChildren, Link as RouterLink, @@ -30,7 +41,6 @@ import { Route, } from 'react-router-dom'; import OpenInNew from '@material-ui/icons/OpenInNew'; -import { useApp } from '@backstage/core-plugin-api'; export function isReactRouterBeta(): boolean { const [obj] = createRoutesFromChildren(} />); @@ -149,7 +159,7 @@ export const useResolvedPath = (uri: LinkProps['to']) => { /** * Given a react node, try to retrieve its text content. */ -const getNodeText = (node: React.ReactNode): string => { +const getNodeText = (node: ReactNode): string => { // If the node is an array of children, recurse and join. if (node instanceof Array) { return node.map(getNodeText).join(' ').trim(); @@ -157,7 +167,7 @@ const getNodeText = (node: React.ReactNode): string => { // If the node is a react element, recurse on its children. if (typeof node === 'object' && node) { - return getNodeText((node as React.ReactElement)?.props?.children); + return getNodeText((node as ReactElement)?.props?.children); } // Base case: the node is just text. Return it. @@ -174,7 +184,7 @@ const getNodeText = (node: React.ReactNode): string => { * - Makes the Link use react-router * - Captures Link clicks as analytics events. */ -export const Link = React.forwardRef( +export const Link = forwardRef( ({ onClick, noTrack, externalLinkIcon, ...props }, ref) => { const classes = useStyles(); const analytics = useAnalytics(); @@ -194,7 +204,7 @@ export const Link = React.forwardRef( ); } - const handleClick = (event: React.MouseEvent) => { + const handleClick = (event: ReactMouseEvent) => { onClick?.(event); if (!noTrack) { analytics.captureEvent('click', linkText, { attributes: { to } }); diff --git a/packages/core-components/src/components/LinkButton/LinkButton.stories.tsx b/packages/core-components/src/components/LinkButton/LinkButton.stories.tsx index da8ef51db1..9d33ad3fc1 100644 --- a/packages/core-components/src/components/LinkButton/LinkButton.stories.tsx +++ b/packages/core-components/src/components/LinkButton/LinkButton.stories.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, { ComponentType, PropsWithChildren } from 'react'; +import { ComponentType, PropsWithChildren } from 'react'; import { LinkButton } from './LinkButton'; import { useLocation } from 'react-router-dom'; import { createRouteRef, useRouteRef } from '@backstage/core-plugin-api'; diff --git a/packages/core-components/src/components/LinkButton/LinkButton.test.tsx b/packages/core-components/src/components/LinkButton/LinkButton.test.tsx index 39ba7bc498..9334bffaf8 100644 --- a/packages/core-components/src/components/LinkButton/LinkButton.test.tsx +++ b/packages/core-components/src/components/LinkButton/LinkButton.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { screen, fireEvent, act } from '@testing-library/react'; import { renderInTestApp } from '@backstage/test-utils'; import { LinkButton } from './LinkButton'; diff --git a/packages/core-components/src/components/LinkButton/LinkButton.tsx b/packages/core-components/src/components/LinkButton/LinkButton.tsx index a093aa6628..820a438955 100644 --- a/packages/core-components/src/components/LinkButton/LinkButton.tsx +++ b/packages/core-components/src/components/LinkButton/LinkButton.tsx @@ -17,7 +17,7 @@ import MaterialButton, { ButtonProps as MaterialButtonProps, } from '@material-ui/core/Button'; -import React from 'react'; +import { forwardRef } from 'react'; import { Link, LinkProps } from '../Link'; /** @@ -34,7 +34,7 @@ export type LinkButtonProps = MaterialButtonProps & /** * This wrapper is here to reset the color of the Link and make typescript happy. */ -const LinkWrapper = React.forwardRef((props, ref) => ( +const LinkWrapper = forwardRef((props, ref) => ( )); @@ -44,11 +44,9 @@ const LinkWrapper = React.forwardRef((props, ref) => ( * @public * @remarks */ -export const LinkButton = React.forwardRef( - (props, ref) => ( - - ), -) as (props: LinkButtonProps) => JSX.Element; +export const LinkButton = forwardRef((props, ref) => ( + +)) as (props: LinkButtonProps) => JSX.Element; /** * @public diff --git a/packages/core-components/src/components/LogViewer/LogLine.test.tsx b/packages/core-components/src/components/LogViewer/LogLine.test.tsx index 73c58d1e3e..30d9bbbd15 100644 --- a/packages/core-components/src/components/LogViewer/LogLine.test.tsx +++ b/packages/core-components/src/components/LogViewer/LogLine.test.tsx @@ -22,7 +22,6 @@ import { findSearchResults, getModifierClasses, } from './LogLine'; -import React from 'react'; describe('getModifierClasses', () => { const classes = { diff --git a/packages/core-components/src/components/LogViewer/LogLine.tsx b/packages/core-components/src/components/LogViewer/LogLine.tsx index 951b2154bf..4ec7e21d2f 100644 --- a/packages/core-components/src/components/LogViewer/LogLine.tsx +++ b/packages/core-components/src/components/LogViewer/LogLine.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useMemo } from 'react'; +import { useMemo } from 'react'; import { AnsiChunk, AnsiLine, ChunkModifiers } from './AnsiProcessor'; import startCase from 'lodash/startCase'; import classnames from 'classnames'; diff --git a/packages/core-components/src/components/LogViewer/LogViewer.stories.tsx b/packages/core-components/src/components/LogViewer/LogViewer.stories.tsx index fca963eb74..86a2b2ebcd 100644 --- a/packages/core-components/src/components/LogViewer/LogViewer.stories.tsx +++ b/packages/core-components/src/components/LogViewer/LogViewer.stories.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { ComponentType, PropsWithChildren } from 'react'; +import { ComponentType, PropsWithChildren } from 'react'; import { wrapInTestApp } from '@backstage/test-utils'; import { LogViewer } from './LogViewer'; diff --git a/packages/core-components/src/components/LogViewer/LogViewer.tsx b/packages/core-components/src/components/LogViewer/LogViewer.tsx index 20530cffaf..afe20b9dc9 100644 --- a/packages/core-components/src/components/LogViewer/LogViewer.tsx +++ b/packages/core-components/src/components/LogViewer/LogViewer.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { lazy, Suspense } from 'react'; +import { lazy, Suspense } from 'react'; import { useApp } from '@backstage/core-plugin-api'; const RealLogViewer = lazy(() => diff --git a/packages/core-components/src/components/LogViewer/LogViewerControls.tsx b/packages/core-components/src/components/LogViewer/LogViewerControls.tsx index 4d3baae68d..e920d623e8 100644 --- a/packages/core-components/src/components/LogViewer/LogViewerControls.tsx +++ b/packages/core-components/src/components/LogViewer/LogViewerControls.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React from 'react'; +import { KeyboardEvent } from 'react'; import IconButton from '@material-ui/core/IconButton'; import TextField from '@material-ui/core/TextField'; import Typography from '@material-ui/core/Typography'; @@ -29,7 +29,7 @@ export function LogViewerControls(props: LogViewerControlsProps) { const { resultCount, resultIndexStep, toggleShouldFilter } = props; const resultIndex = props.resultIndex ?? 0; - const handleKeyPress = (event: React.KeyboardEvent) => { + const handleKeyPress = (event: KeyboardEvent) => { if (event.key === 'Enter') { if (event.metaKey || event.ctrlKey || event.altKey) { toggleShouldFilter(); diff --git a/packages/core-components/src/components/LogViewer/RealLogViewer.test.tsx b/packages/core-components/src/components/LogViewer/RealLogViewer.test.tsx index e1aac76381..928bc77678 100644 --- a/packages/core-components/src/components/LogViewer/RealLogViewer.test.tsx +++ b/packages/core-components/src/components/LogViewer/RealLogViewer.test.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { ReactNode } from 'react'; +import { ReactNode } from 'react'; import userEvent from '@testing-library/user-event'; import { renderInTestApp } from '@backstage/test-utils'; import { RealLogViewer } from './RealLogViewer'; diff --git a/packages/core-components/src/components/LogViewer/RealLogViewer.tsx b/packages/core-components/src/components/LogViewer/RealLogViewer.tsx index 37768ad80b..8430ac4bd0 100644 --- a/packages/core-components/src/components/LogViewer/RealLogViewer.tsx +++ b/packages/core-components/src/components/LogViewer/RealLogViewer.tsx @@ -18,7 +18,7 @@ import Box from '@material-ui/core/Box'; import IconButton from '@material-ui/core/IconButton'; import CopyIcon from '@material-ui/icons/FileCopy'; import classnames from 'classnames'; -import React, { useEffect, useMemo, useState } from 'react'; +import { useEffect, useMemo, useState } from 'react'; import { useLocation } from 'react-router-dom'; import AutoSizer from 'react-virtualized-auto-sizer'; import { FixedSizeList } from 'react-window'; diff --git a/packages/core-components/src/components/LogViewer/useLogViewerSelection.test.tsx b/packages/core-components/src/components/LogViewer/useLogViewerSelection.test.tsx index 6c6f7da71b..5314f4e7f6 100644 --- a/packages/core-components/src/components/LogViewer/useLogViewerSelection.test.tsx +++ b/packages/core-components/src/components/LogViewer/useLogViewerSelection.test.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React from 'react'; +import { PropsWithChildren } from 'react'; import { act, renderHook } from '@testing-library/react'; import { TestApiProvider, MockErrorApi } from '@backstage/test-utils'; import { errorApiRef } from '@backstage/core-plugin-api'; @@ -40,7 +40,7 @@ const lines = [ describe('useLogViewerSelection', () => { it('should manage a selection', () => { const rendered = renderHook(() => useLogViewerSelection(lines), { - wrapper: ({ children }: React.PropsWithChildren<{}>) => ( + wrapper: ({ children }: PropsWithChildren<{}>) => ( {children} diff --git a/packages/core-components/src/components/MarkdownContent/MarkdownContent.stories.tsx b/packages/core-components/src/components/MarkdownContent/MarkdownContent.stories.tsx index b16eea150c..b6770e7d37 100644 --- a/packages/core-components/src/components/MarkdownContent/MarkdownContent.stories.tsx +++ b/packages/core-components/src/components/MarkdownContent/MarkdownContent.stories.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { MarkdownContent } from './MarkdownContent'; export default { diff --git a/packages/core-components/src/components/MarkdownContent/MarkdownContent.test.tsx b/packages/core-components/src/components/MarkdownContent/MarkdownContent.test.tsx index 21b576dd9f..6f20f776e3 100644 --- a/packages/core-components/src/components/MarkdownContent/MarkdownContent.test.tsx +++ b/packages/core-components/src/components/MarkdownContent/MarkdownContent.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { renderInTestApp } from '@backstage/test-utils'; import { MarkdownContent } from './MarkdownContent'; import { screen } from '@testing-library/react'; diff --git a/packages/core-components/src/components/MarkdownContent/MarkdownContent.tsx b/packages/core-components/src/components/MarkdownContent/MarkdownContent.tsx index f536b20106..5ad23cce09 100644 --- a/packages/core-components/src/components/MarkdownContent/MarkdownContent.tsx +++ b/packages/core-components/src/components/MarkdownContent/MarkdownContent.tsx @@ -17,7 +17,7 @@ import { makeStyles } from '@material-ui/core/styles'; import ReactMarkdown, { Options } from 'react-markdown'; import gfm from 'remark-gfm'; -import React from 'react'; +import { Children, createElement } from 'react'; import { CodeSnippet } from '../CodeSnippet'; import { HeadingProps } from 'react-markdown/lib/ast-to-react'; @@ -78,14 +78,14 @@ const flatten = (text: string, child: any): string => { return typeof child === 'string' ? text + child - : React.Children.toArray(child.props.children).reduce(flatten, text); + : Children.toArray(child.props.children).reduce(flatten, text); }; const headingRenderer = ({ level, children }: HeadingProps) => { - const childrenArray = React.Children.toArray(children); + const childrenArray = Children.toArray(children); const text = childrenArray.reduce(flatten, ''); const slug = text.toLocaleLowerCase('en-US').replace(/\W/g, '-'); - return React.createElement(`h${level}`, { id: slug }, children); + return createElement(`h${level}`, { id: slug }, children); }; const components: Options['components'] = { diff --git a/packages/core-components/src/components/OAuthRequestDialog/LoginRequestListItem.tsx b/packages/core-components/src/components/OAuthRequestDialog/LoginRequestListItem.tsx index 375ea66953..7c85b1608f 100644 --- a/packages/core-components/src/components/OAuthRequestDialog/LoginRequestListItem.tsx +++ b/packages/core-components/src/components/OAuthRequestDialog/LoginRequestListItem.tsx @@ -20,7 +20,7 @@ import ListItemAvatar from '@material-ui/core/ListItemAvatar'; import ListItemText from '@material-ui/core/ListItemText'; import Typography from '@material-ui/core/Typography'; import Button from '@material-ui/core/Button'; -import React, { useState } from 'react'; +import { useState } from 'react'; import { isError } from '@backstage/errors'; import { PendingOAuthRequest } from '@backstage/core-plugin-api'; import { coreComponentsTranslationRef } from '../../translation'; diff --git a/packages/core-components/src/components/OAuthRequestDialog/OAuthRequestDialog.tsx b/packages/core-components/src/components/OAuthRequestDialog/OAuthRequestDialog.tsx index 79366da310..162adc5a9c 100644 --- a/packages/core-components/src/components/OAuthRequestDialog/OAuthRequestDialog.tsx +++ b/packages/core-components/src/components/OAuthRequestDialog/OAuthRequestDialog.tsx @@ -21,7 +21,7 @@ import DialogContent from '@material-ui/core/DialogContent'; import DialogTitle from '@material-ui/core/DialogTitle'; import List from '@material-ui/core/List'; import Button from '@material-ui/core/Button'; -import React, { useMemo, useState } from 'react'; +import { useMemo, useState } from 'react'; import useObservable from 'react-use/esm/useObservable'; import LoginRequestListItem from './LoginRequestListItem'; import { diff --git a/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.stories.tsx b/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.stories.tsx index 5ab5ba7dc4..3b5df0e358 100644 --- a/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.stories.tsx +++ b/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.stories.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ import Box from '@material-ui/core/Box'; -import React from 'react'; import { OverflowTooltip } from './OverflowTooltip'; export default { diff --git a/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.test.tsx b/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.test.tsx index a65c758c28..1cfc3edf55 100644 --- a/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.test.tsx +++ b/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { render } from '@testing-library/react'; import { OverflowTooltip } from './OverflowTooltip'; diff --git a/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.tsx b/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.tsx index dd4838bd8d..68499e2dc1 100644 --- a/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.tsx +++ b/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.tsx @@ -16,7 +16,6 @@ import { makeStyles } from '@material-ui/core/styles'; import Tooltip, { TooltipProps } from '@material-ui/core/Tooltip'; -import React from 'react'; import Typography from '@material-ui/core/Typography'; type Props = { diff --git a/packages/core-components/src/components/Progress/Progress.stories.tsx b/packages/core-components/src/components/Progress/Progress.stories.tsx index af24019a69..7c7932101e 100644 --- a/packages/core-components/src/components/Progress/Progress.stories.tsx +++ b/packages/core-components/src/components/Progress/Progress.stories.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { Progress } from './Progress'; export default { diff --git a/packages/core-components/src/components/Progress/Progress.test.tsx b/packages/core-components/src/components/Progress/Progress.test.tsx index 71e2e70f23..918c9ba518 100644 --- a/packages/core-components/src/components/Progress/Progress.test.tsx +++ b/packages/core-components/src/components/Progress/Progress.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { renderInTestApp } from '@backstage/test-utils'; import { Progress } from './Progress'; diff --git a/packages/core-components/src/components/Progress/Progress.tsx b/packages/core-components/src/components/Progress/Progress.tsx index 865c4673b8..b7176a5825 100644 --- a/packages/core-components/src/components/Progress/Progress.tsx +++ b/packages/core-components/src/components/Progress/Progress.tsx @@ -19,7 +19,7 @@ import LinearProgress, { LinearProgressProps, } from '@material-ui/core/LinearProgress'; import { useTheme } from '@material-ui/core/styles'; -import React, { PropsWithChildren, useEffect, useState } from 'react'; +import { PropsWithChildren, useEffect, useState } from 'react'; export function Progress(props: PropsWithChildren) { const theme = useTheme(); diff --git a/packages/core-components/src/components/ProgressBars/Gauge.stories.tsx b/packages/core-components/src/components/ProgressBars/Gauge.stories.tsx index 401f502697..4dcb788289 100644 --- a/packages/core-components/src/components/ProgressBars/Gauge.stories.tsx +++ b/packages/core-components/src/components/ProgressBars/Gauge.stories.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { Gauge } from './Gauge'; const containerStyle = { width: 300 }; diff --git a/packages/core-components/src/components/ProgressBars/Gauge.test.tsx b/packages/core-components/src/components/ProgressBars/Gauge.test.tsx index 0c19d5acb2..a1827f1ec6 100644 --- a/packages/core-components/src/components/ProgressBars/Gauge.test.tsx +++ b/packages/core-components/src/components/ProgressBars/Gauge.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { renderInTestApp } from '@backstage/test-utils'; import { Gauge, getProgressColor } from './Gauge'; import * as theme from '@backstage/theme'; diff --git a/packages/core-components/src/components/ProgressBars/Gauge.tsx b/packages/core-components/src/components/ProgressBars/Gauge.tsx index a1ddbff4ea..1eaa7cae59 100644 --- a/packages/core-components/src/components/ProgressBars/Gauge.tsx +++ b/packages/core-components/src/components/ProgressBars/Gauge.tsx @@ -17,7 +17,7 @@ import { BackstagePalette } from '@backstage/theme'; import { makeStyles, useTheme } from '@material-ui/core/styles'; import { Circle } from 'rc-progress'; -import React, { ReactNode, useEffect, useState } from 'react'; +import { ReactNode, useEffect, useState } from 'react'; import Box from '@material-ui/core/Box'; import classNames from 'classnames'; diff --git a/packages/core-components/src/components/ProgressBars/GaugeCard.stories.tsx b/packages/core-components/src/components/ProgressBars/GaugeCard.stories.tsx index f7e2eb69c6..0377c37ef0 100644 --- a/packages/core-components/src/components/ProgressBars/GaugeCard.stories.tsx +++ b/packages/core-components/src/components/ProgressBars/GaugeCard.stories.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { PropsWithChildren } from 'react'; +import { PropsWithChildren } from 'react'; import { GaugeCard } from './GaugeCard'; import Grid from '@material-ui/core/Grid'; import { MemoryRouter } from 'react-router-dom'; diff --git a/packages/core-components/src/components/ProgressBars/GaugeCard.test.tsx b/packages/core-components/src/components/ProgressBars/GaugeCard.test.tsx index e4d84ca059..baa0137fe0 100644 --- a/packages/core-components/src/components/ProgressBars/GaugeCard.test.tsx +++ b/packages/core-components/src/components/ProgressBars/GaugeCard.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { renderInTestApp, withLogCollector } from '@backstage/test-utils'; import { GaugeCard } from './GaugeCard'; diff --git a/packages/core-components/src/components/ProgressBars/GaugeCard.tsx b/packages/core-components/src/components/ProgressBars/GaugeCard.tsx index 9f6de8eafe..b1249d2ff8 100644 --- a/packages/core-components/src/components/ProgressBars/GaugeCard.tsx +++ b/packages/core-components/src/components/ProgressBars/GaugeCard.tsx @@ -15,7 +15,7 @@ */ import Box from '@material-ui/core/Box'; import { makeStyles } from '@material-ui/core/styles'; -import React, { ReactNode } from 'react'; +import { ReactNode } from 'react'; import { BottomLinkProps } from '../../layout/BottomLink'; import { InfoCard, InfoCardVariants } from '../../layout/InfoCard'; diff --git a/packages/core-components/src/components/ProgressBars/LinearGauge.stories.tsx b/packages/core-components/src/components/ProgressBars/LinearGauge.stories.tsx index 5d36ea9178..295856bd51 100644 --- a/packages/core-components/src/components/ProgressBars/LinearGauge.stories.tsx +++ b/packages/core-components/src/components/ProgressBars/LinearGauge.stories.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { LinearGauge } from './LinearGauge'; const containerStyle = { width: 300 }; diff --git a/packages/core-components/src/components/ProgressBars/LinearGauge.test.tsx b/packages/core-components/src/components/ProgressBars/LinearGauge.test.tsx index 1d76f59faf..fd22de608e 100644 --- a/packages/core-components/src/components/ProgressBars/LinearGauge.test.tsx +++ b/packages/core-components/src/components/ProgressBars/LinearGauge.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { renderInTestApp } from '@backstage/test-utils'; import { LinearGauge } from './LinearGauge'; diff --git a/packages/core-components/src/components/ProgressBars/LinearGauge.tsx b/packages/core-components/src/components/ProgressBars/LinearGauge.tsx index a41b41f3dc..4fcbb6511f 100644 --- a/packages/core-components/src/components/ProgressBars/LinearGauge.tsx +++ b/packages/core-components/src/components/ProgressBars/LinearGauge.tsx @@ -18,7 +18,6 @@ import { useTheme } from '@material-ui/core/styles'; import Tooltip from '@material-ui/core/Tooltip'; import Typography from '@material-ui/core/Typography'; import { Line } from 'rc-progress'; -import React from 'react'; import { GaugePropsGetColor, getProgressColor } from './Gauge'; diff --git a/packages/core-components/src/components/ResponseErrorPanel/ResponseErrorPanel.stories.tsx b/packages/core-components/src/components/ResponseErrorPanel/ResponseErrorPanel.stories.tsx index 8d03e7359f..7eab08f55f 100644 --- a/packages/core-components/src/components/ResponseErrorPanel/ResponseErrorPanel.stories.tsx +++ b/packages/core-components/src/components/ResponseErrorPanel/ResponseErrorPanel.stories.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { ResponseErrorPanel } from '../ResponseErrorPanel'; import { ErrorPanelProps } from '../ErrorPanel'; diff --git a/packages/core-components/src/components/ResponseErrorPanel/ResponseErrorPanel.tsx b/packages/core-components/src/components/ResponseErrorPanel/ResponseErrorPanel.tsx index f51c73195c..9f0886aa9b 100644 --- a/packages/core-components/src/components/ResponseErrorPanel/ResponseErrorPanel.tsx +++ b/packages/core-components/src/components/ResponseErrorPanel/ResponseErrorPanel.tsx @@ -19,7 +19,6 @@ import { makeStyles } from '@material-ui/core/styles'; import Divider from '@material-ui/core/Divider'; import ListItem from '@material-ui/core/ListItem'; import ListItemText from '@material-ui/core/ListItemText'; -import React from 'react'; import { CodeSnippet } from '../CodeSnippet'; import { CopyTextButton } from '../CopyTextButton'; import { ErrorPanel, ErrorPanelProps } from '../ErrorPanel'; diff --git a/packages/core-components/src/components/Select/Select.stories.tsx b/packages/core-components/src/components/Select/Select.stories.tsx index af595605c7..f3eaea1021 100644 --- a/packages/core-components/src/components/Select/Select.stories.tsx +++ b/packages/core-components/src/components/Select/Select.stories.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { SelectComponent as Select, SelectProps } from './Select'; export default { diff --git a/packages/core-components/src/components/Select/Select.test.tsx b/packages/core-components/src/components/Select/Select.test.tsx index 505152db5f..892bedba84 100644 --- a/packages/core-components/src/components/Select/Select.test.tsx +++ b/packages/core-components/src/components/Select/Select.test.tsx @@ -15,7 +15,6 @@ */ import { fireEvent, render, within } from '@testing-library/react'; -import React from 'react'; import { SelectComponent as Select } from './Select'; const SELECT_ITEMS = [ diff --git a/packages/core-components/src/components/Select/Select.tsx b/packages/core-components/src/components/Select/Select.tsx index 7a862678b8..72512b3ec2 100644 --- a/packages/core-components/src/components/Select/Select.tsx +++ b/packages/core-components/src/components/Select/Select.tsx @@ -29,7 +29,7 @@ import { } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; import CancelIcon from '@material-ui/icons/Cancel'; -import React, { useEffect, useState } from 'react'; +import { ChangeEvent, useEffect, useState } from 'react'; import ClosedDropdown from './static/ClosedDropdown'; import OpenedDropdown from './static/OpenedDropdown'; @@ -169,12 +169,12 @@ export function SelectComponent(props: SelectProps) { setValue(selected || (multiple ? [] : '')); }, [selected, multiple]); - const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => { + const handleChange = (event: ChangeEvent<{ value: unknown }>) => { setValue(event.target.value as SelectedItems); onChange(event.target.value as SelectedItems); }; - const handleOpen = (event: React.ChangeEvent) => { + const handleOpen = (event: ChangeEvent) => { if (disabled) { event.preventDefault(); return; diff --git a/packages/core-components/src/components/Select/static/ClosedDropdown.tsx b/packages/core-components/src/components/Select/static/ClosedDropdown.tsx index 00c748ce29..46f222bdfb 100644 --- a/packages/core-components/src/components/Select/static/ClosedDropdown.tsx +++ b/packages/core-components/src/components/Select/static/ClosedDropdown.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import { makeStyles, createStyles } from '@material-ui/core/styles'; import SvgIcon from '@material-ui/core/SvgIcon'; diff --git a/packages/core-components/src/components/Select/static/OpenedDropdown.tsx b/packages/core-components/src/components/Select/static/OpenedDropdown.tsx index 4ca2a5a065..4e61e2e78d 100644 --- a/packages/core-components/src/components/Select/static/OpenedDropdown.tsx +++ b/packages/core-components/src/components/Select/static/OpenedDropdown.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import { makeStyles, createStyles } from '@material-ui/core/styles'; import SvgIcon from '@material-ui/core/SvgIcon'; diff --git a/packages/core-components/src/components/SimpleStepper/SimpleStepper.stories.tsx b/packages/core-components/src/components/SimpleStepper/SimpleStepper.stories.tsx index aedd5e6b80..a50183b179 100644 --- a/packages/core-components/src/components/SimpleStepper/SimpleStepper.stories.tsx +++ b/packages/core-components/src/components/SimpleStepper/SimpleStepper.stories.tsx @@ -15,7 +15,7 @@ */ import TextField from '@material-ui/core/TextField'; -import React, { useState } from 'react'; +import { useState } from 'react'; import { SimpleStepper, StepperProps } from './SimpleStepper'; import { SimpleStepperStep } from './SimpleStepperStep'; diff --git a/packages/core-components/src/components/SimpleStepper/SimpleStepper.test.tsx b/packages/core-components/src/components/SimpleStepper/SimpleStepper.test.tsx index e4093f07d2..2ff685c19f 100644 --- a/packages/core-components/src/components/SimpleStepper/SimpleStepper.test.tsx +++ b/packages/core-components/src/components/SimpleStepper/SimpleStepper.test.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import { fireEvent, within } from '@testing-library/react'; import { renderInTestApp } from '@backstage/test-utils'; import { SimpleStepper as Stepper } from './SimpleStepper'; diff --git a/packages/core-components/src/components/SimpleStepper/SimpleStepper.tsx b/packages/core-components/src/components/SimpleStepper/SimpleStepper.tsx index b0b6c1afd0..04dc7bf3c7 100644 --- a/packages/core-components/src/components/SimpleStepper/SimpleStepper.tsx +++ b/packages/core-components/src/components/SimpleStepper/SimpleStepper.tsx @@ -13,7 +13,9 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, { +import { + ReactNode, + createContext, Children, isValidElement, useState, @@ -33,7 +35,7 @@ type InternalState = { const noop = () => {}; -export const VerticalStepperContext = React.createContext({ +export const VerticalStepperContext = createContext({ stepperLength: 0, stepIndex: 0, setStepIndex: noop, @@ -67,7 +69,7 @@ export function SimpleStepper(props: PropsWithChildren) { setStepIndex(activeStep); }, [activeStep]); - const steps: React.ReactNode[] = []; + const steps: ReactNode[] = []; let endStep; Children.forEach(children, child => { if (isValidElement(child)) { diff --git a/packages/core-components/src/components/SimpleStepper/SimpleStepperFooter.tsx b/packages/core-components/src/components/SimpleStepper/SimpleStepperFooter.tsx index 8db3ac8d72..cf7d968495 100644 --- a/packages/core-components/src/components/SimpleStepper/SimpleStepperFooter.tsx +++ b/packages/core-components/src/components/SimpleStepper/SimpleStepperFooter.tsx @@ -16,7 +16,7 @@ import Box from '@material-ui/core/Box'; import Button from '@material-ui/core/Button'; import { makeStyles } from '@material-ui/core/styles'; -import React, { PropsWithChildren, ReactNode, useContext } from 'react'; +import { PropsWithChildren, ReactNode, useContext } from 'react'; import { VerticalStepperContext } from './SimpleStepper'; import { StepActions } from './types'; diff --git a/packages/core-components/src/components/SimpleStepper/SimpleStepperStep.tsx b/packages/core-components/src/components/SimpleStepper/SimpleStepperStep.tsx index 911ad2e73e..aca5d882f8 100644 --- a/packages/core-components/src/components/SimpleStepper/SimpleStepperStep.tsx +++ b/packages/core-components/src/components/SimpleStepper/SimpleStepperStep.tsx @@ -19,7 +19,7 @@ import StepContent from '@material-ui/core/StepContent'; import StepLabel from '@material-ui/core/StepLabel'; import { makeStyles } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; -import React, { PropsWithChildren } from 'react'; +import { PropsWithChildren } from 'react'; import { SimpleStepperFooter } from './SimpleStepperFooter'; import { StepProps } from './types'; diff --git a/packages/core-components/src/components/SimpleStepper/types.ts b/packages/core-components/src/components/SimpleStepper/types.ts index eacfc94065..66e78565f2 100644 --- a/packages/core-components/src/components/SimpleStepper/types.ts +++ b/packages/core-components/src/components/SimpleStepper/types.ts @@ -14,7 +14,7 @@ * limitations under the License. */ -import React from 'react'; +import { ReactElement } from 'react'; export type StepActions = { showNext?: boolean; @@ -40,7 +40,7 @@ export type StepActions = { export type StepProps = { title: string; - children: React.ReactElement; + children: ReactElement; end?: boolean; actions?: StepActions; }; diff --git a/packages/core-components/src/components/Status/Status.stories.tsx b/packages/core-components/src/components/Status/Status.stories.tsx index 26a6fd2219..1237a02432 100644 --- a/packages/core-components/src/components/Status/Status.stories.tsx +++ b/packages/core-components/src/components/Status/Status.stories.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { StatusError, StatusAborted, diff --git a/packages/core-components/src/components/Status/Status.test.tsx b/packages/core-components/src/components/Status/Status.test.tsx index 34f1a587bd..b795f98c67 100644 --- a/packages/core-components/src/components/Status/Status.test.tsx +++ b/packages/core-components/src/components/Status/Status.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { renderInTestApp } from '@backstage/test-utils'; import { diff --git a/packages/core-components/src/components/Status/Status.tsx b/packages/core-components/src/components/Status/Status.tsx index 63e3d3d3a6..9e4ec0f892 100644 --- a/packages/core-components/src/components/Status/Status.tsx +++ b/packages/core-components/src/components/Status/Status.tsx @@ -20,7 +20,7 @@ import CheckCircleOutline from '@material-ui/icons/CheckCircleOutline'; import WarningOutline from '@material-ui/icons/ReportProblemOutlined'; import ErrorOutline from '@material-ui/icons/ErrorOutline'; import classNames from 'classnames'; -import React, { PropsWithChildren } from 'react'; +import { PropsWithChildren } from 'react'; import { PendingIcon } from './icons/PendingIcon'; import { RunningIcon } from './icons/RunningIcon'; import { AbortedIcon } from './icons/AbortedIcon'; diff --git a/packages/core-components/src/components/Status/icons/AbortedIcon.tsx b/packages/core-components/src/components/Status/icons/AbortedIcon.tsx index 397f613e4a..0512de67f7 100644 --- a/packages/core-components/src/components/Status/icons/AbortedIcon.tsx +++ b/packages/core-components/src/components/Status/icons/AbortedIcon.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import * as React from 'react'; +import { ReactElement } from 'react'; export const AbortedIcon = ({ className, @@ -22,7 +22,7 @@ export const AbortedIcon = ({ }: { className: string; dataTestId: string; -}): React.ReactElement => { +}): ReactElement => { return ( { +}): ReactElement => { return ( { +}): ReactElement => { return ( ( {children} @@ -93,7 +93,7 @@ export const MetadataTableItem = ({ ...rest }: { title: string; - children: React.ReactNode; + children: ReactNode; }) => ( {title && {title}} @@ -104,7 +104,7 @@ export const MetadataTableItem = ({ ); interface StyleProps extends WithStyles { - children?: React.ReactNode; + children?: ReactNode; } export const MetadataList = withStyles(listStyles, { diff --git a/packages/core-components/src/components/StructuredMetadataTable/StructuredMetadataTable.stories.tsx b/packages/core-components/src/components/StructuredMetadataTable/StructuredMetadataTable.stories.tsx index 17d01090a7..8a30300685 100644 --- a/packages/core-components/src/components/StructuredMetadataTable/StructuredMetadataTable.stories.tsx +++ b/packages/core-components/src/components/StructuredMetadataTable/StructuredMetadataTable.stories.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, { PropsWithChildren } from 'react'; +import { PropsWithChildren } from 'react'; import { InfoCard } from '../../layout/InfoCard'; import Grid from '@material-ui/core/Grid'; import { StructuredMetadataTable } from './StructuredMetadataTable'; diff --git a/packages/core-components/src/components/StructuredMetadataTable/StructuredMetadataTable.test.tsx b/packages/core-components/src/components/StructuredMetadataTable/StructuredMetadataTable.test.tsx index 8e6c4bbff0..d1f5b603d6 100644 --- a/packages/core-components/src/components/StructuredMetadataTable/StructuredMetadataTable.test.tsx +++ b/packages/core-components/src/components/StructuredMetadataTable/StructuredMetadataTable.test.tsx @@ -16,7 +16,6 @@ import { render, within } from '@testing-library/react'; import { startCase } from 'lodash'; -import React from 'react'; import { StructuredMetadataTable } from './StructuredMetadataTable'; describe('', () => { diff --git a/packages/core-components/src/components/StructuredMetadataTable/StructuredMetadataTable.tsx b/packages/core-components/src/components/StructuredMetadataTable/StructuredMetadataTable.tsx index b839280cdd..c35cd2cf91 100644 --- a/packages/core-components/src/components/StructuredMetadataTable/StructuredMetadataTable.tsx +++ b/packages/core-components/src/components/StructuredMetadataTable/StructuredMetadataTable.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { Fragment, ReactElement } from 'react'; +import { ReactNode, isValidElement, Fragment, ReactElement } from 'react'; import startCase from 'lodash/startCase'; import Typography from '@material-ui/core/Typography'; @@ -52,7 +52,7 @@ const nestedListStyle = (theme: Theme) => }); interface StyleProps extends WithStyles { - children?: React.ReactNode; + children?: ReactNode; } // Sub Components const StyledList = withStyles(listStyle, { @@ -108,7 +108,7 @@ function toValue( options: Options, nested: boolean, ) { - if (React.isValidElement(value)) { + if (isValidElement(value)) { return {value}; } if (value !== null && typeof value === 'object') { diff --git a/packages/core-components/src/components/SupportButton/SupportButton.test.tsx b/packages/core-components/src/components/SupportButton/SupportButton.test.tsx index 4036884130..46be5d0ec6 100644 --- a/packages/core-components/src/components/SupportButton/SupportButton.test.tsx +++ b/packages/core-components/src/components/SupportButton/SupportButton.test.tsx @@ -21,7 +21,6 @@ import { TestApiProvider, } from '@backstage/test-utils'; import { act, fireEvent, screen } from '@testing-library/react'; -import React from 'react'; import { SupportButton } from './SupportButton'; const configApi = mockApis.config({ diff --git a/packages/core-components/src/components/SupportButton/SupportButton.tsx b/packages/core-components/src/components/SupportButton/SupportButton.tsx index c3a6e283b6..298c97c433 100644 --- a/packages/core-components/src/components/SupportButton/SupportButton.tsx +++ b/packages/core-components/src/components/SupportButton/SupportButton.tsx @@ -27,7 +27,7 @@ import Popover from '@material-ui/core/Popover'; import { Theme, makeStyles } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; import useMediaQuery from '@material-ui/core/useMediaQuery'; -import React, { MouseEventHandler, useState } from 'react'; +import { ReactNode, Children, MouseEventHandler, useState } from 'react'; import { SupportItem, SupportItemLink, useSupportConfig } from '../../hooks'; import { HelpIcon } from '../../icons'; import { Link } from '../Link'; @@ -37,7 +37,7 @@ import { useTranslationRef } from '@backstage/core-plugin-api/alpha'; type SupportButtonProps = { title?: string; items?: SupportItem[]; - children?: React.ReactNode; + children?: ReactNode; }; export type SupportButtonClassKey = 'popoverList'; @@ -164,7 +164,7 @@ export function SupportButton(props: SupportButtonProps) { {title} )} - {React.Children.map(children, (child, i) => ( + {Children.map(children, (child, i) => ( ; + tabProps?: TabProps; }; const Route: (props: SubRoute) => null = () => null; diff --git a/packages/core-components/src/components/TabbedLayout/types.ts b/packages/core-components/src/components/TabbedLayout/types.ts index 59e26305bd..be0fb581e4 100644 --- a/packages/core-components/src/components/TabbedLayout/types.ts +++ b/packages/core-components/src/components/TabbedLayout/types.ts @@ -15,11 +15,11 @@ */ import { TabProps } from '@material-ui/core/Tab'; -import * as React from 'react'; +import { ElementType } from 'react'; export type SubRoute = { path: string; title: string; children: JSX.Element; - tabProps?: TabProps; + tabProps?: TabProps; }; diff --git a/packages/core-components/src/components/Table/Filters.tsx b/packages/core-components/src/components/Table/Filters.tsx index 999676f4d9..c5f0b2940d 100644 --- a/packages/core-components/src/components/Table/Filters.tsx +++ b/packages/core-components/src/components/Table/Filters.tsx @@ -17,7 +17,7 @@ import Box from '@material-ui/core/Box'; import Button from '@material-ui/core/Button'; import { makeStyles } from '@material-ui/core/styles'; -import React, { useEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; import { Select } from '../Select'; import { SelectProps } from '../Select/Select'; diff --git a/packages/core-components/src/components/Table/SubvalueCell.tsx b/packages/core-components/src/components/Table/SubvalueCell.tsx index 8ccebbe65a..51e707f04d 100644 --- a/packages/core-components/src/components/Table/SubvalueCell.tsx +++ b/packages/core-components/src/components/Table/SubvalueCell.tsx @@ -16,7 +16,7 @@ import Box from '@material-ui/core/Box'; import { makeStyles } from '@material-ui/core/styles'; -import React from 'react'; +import { ReactNode } from 'react'; export type SubvalueCellClassKey = 'value' | 'subvalue'; @@ -34,8 +34,8 @@ const useSubvalueCellStyles = makeStyles( ); type SubvalueCellProps = { - value: React.ReactNode; - subvalue: React.ReactNode; + value: ReactNode; + subvalue: ReactNode; }; export function SubvalueCell(props: SubvalueCellProps) { diff --git a/packages/core-components/src/components/Table/Table.stories.tsx b/packages/core-components/src/components/Table/Table.stories.tsx index b38941012c..ac8303cde7 100644 --- a/packages/core-components/src/components/Table/Table.stories.tsx +++ b/packages/core-components/src/components/Table/Table.stories.tsx @@ -15,7 +15,7 @@ */ import { makeStyles } from '@material-ui/core/styles'; -import React from 'react'; +import { ReactNode } from 'react'; import { Link } from '../Link'; import { SubvalueCell } from './SubvalueCell'; import { Table, TableColumn, TableFilter } from './Table'; @@ -254,7 +254,7 @@ export const SubvalueTable = () => { .includes(query.toLocaleUpperCase('en-US')), field: 'col1', highlight: true, - render: (row: any): React.ReactNode => ( + render: (row: any): ReactNode => ( ), }, diff --git a/packages/core-components/src/components/Table/Table.test.tsx b/packages/core-components/src/components/Table/Table.test.tsx index 43c8cfe41d..dfae66d1c2 100644 --- a/packages/core-components/src/components/Table/Table.test.tsx +++ b/packages/core-components/src/components/Table/Table.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { renderInTestApp } from '@backstage/test-utils'; import { Table } from './Table'; diff --git a/packages/core-components/src/components/Table/Table.tsx b/packages/core-components/src/components/Table/Table.tsx index f5b0716589..08fc746ca4 100644 --- a/packages/core-components/src/components/Table/Table.tsx +++ b/packages/core-components/src/components/Table/Table.tsx @@ -52,7 +52,8 @@ import Remove from '@material-ui/icons/Remove'; import SaveAlt from '@material-ui/icons/SaveAlt'; import ViewColumn from '@material-ui/icons/ViewColumn'; import { isEqual, transform } from 'lodash'; -import React, { +import { + CSSProperties, forwardRef, MutableRefObject, ReactNode, @@ -212,7 +213,7 @@ function convertColumns( theme: Theme, ): TableColumn[] { return columns.map(column => { - const headerStyle: React.CSSProperties = column.headerStyle ?? {}; + const headerStyle: CSSProperties = column.headerStyle ?? {}; let cellStyle = column.cellStyle || {}; @@ -220,14 +221,14 @@ function convertColumns( headerStyle.color = theme.palette.textContrast; if (typeof cellStyle === 'object') { - (cellStyle as React.CSSProperties).fontWeight = + (cellStyle as CSSProperties).fontWeight = theme.typography.fontWeightBold; } else { const cellStyleFn = cellStyle as ( data: any, rowData: T, column?: Column, - ) => React.CSSProperties; + ) => CSSProperties; cellStyle = (data, rowData, rowColumn) => { const style = cellStyleFn(data, rowData, rowColumn); return { ...style, fontWeight: theme.typography.fontWeightBold }; diff --git a/packages/core-components/src/components/Table/TableLoadingBody.tsx b/packages/core-components/src/components/Table/TableLoadingBody.tsx index 3671bf1c51..eefd377e7c 100644 --- a/packages/core-components/src/components/Table/TableLoadingBody.tsx +++ b/packages/core-components/src/components/Table/TableLoadingBody.tsx @@ -16,7 +16,6 @@ import Box from '@material-ui/core/Box'; import CircularProgress from '@material-ui/core/CircularProgress'; -import React from 'react'; /** * @internal diff --git a/packages/core-components/src/components/TrendLine/TrendLine.stories.tsx b/packages/core-components/src/components/TrendLine/TrendLine.stories.tsx index 03d227fad3..2f1e9bc4f1 100644 --- a/packages/core-components/src/components/TrendLine/TrendLine.stories.tsx +++ b/packages/core-components/src/components/TrendLine/TrendLine.stories.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { Table } from '../Table'; import { TrendLine } from './TrendLine'; import { InfoCard } from '../../layout/InfoCard'; diff --git a/packages/core-components/src/components/TrendLine/TrendLine.test.tsx b/packages/core-components/src/components/TrendLine/TrendLine.test.tsx index 3cb54875c5..c121169f19 100644 --- a/packages/core-components/src/components/TrendLine/TrendLine.test.tsx +++ b/packages/core-components/src/components/TrendLine/TrendLine.test.tsx @@ -15,7 +15,6 @@ */ /* eslint-disable jest/no-disabled-tests */ -import React from 'react'; import { screen } from '@testing-library/react'; import { renderInTestApp } from '@backstage/test-utils'; diff --git a/packages/core-components/src/components/TrendLine/TrendLine.tsx b/packages/core-components/src/components/TrendLine/TrendLine.tsx index 25d1045e09..e928464cd3 100644 --- a/packages/core-components/src/components/TrendLine/TrendLine.tsx +++ b/packages/core-components/src/components/TrendLine/TrendLine.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { Sparklines, SparklinesLine, diff --git a/packages/core-components/src/components/WarningPanel/WarningPanel.stories.tsx b/packages/core-components/src/components/WarningPanel/WarningPanel.stories.tsx index 2a8918c055..7e45f3c398 100644 --- a/packages/core-components/src/components/WarningPanel/WarningPanel.stories.tsx +++ b/packages/core-components/src/components/WarningPanel/WarningPanel.stories.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { WarningPanel } from './WarningPanel'; import Button from '@material-ui/core/Button'; import Typography from '@material-ui/core/Typography'; diff --git a/packages/core-components/src/components/WarningPanel/WarningPanel.test.tsx b/packages/core-components/src/components/WarningPanel/WarningPanel.test.tsx index c3ffb63c07..6723a3f37b 100644 --- a/packages/core-components/src/components/WarningPanel/WarningPanel.test.tsx +++ b/packages/core-components/src/components/WarningPanel/WarningPanel.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { fireEvent, screen } from '@testing-library/react'; import { renderInTestApp } from '@backstage/test-utils'; import Typography from '@material-ui/core/Typography'; diff --git a/packages/core-components/src/components/WarningPanel/WarningPanel.tsx b/packages/core-components/src/components/WarningPanel/WarningPanel.tsx index 634b8f7b09..7d9c4d472d 100644 --- a/packages/core-components/src/components/WarningPanel/WarningPanel.tsx +++ b/packages/core-components/src/components/WarningPanel/WarningPanel.tsx @@ -22,7 +22,7 @@ import Grid from '@material-ui/core/Grid'; import Typography from '@material-ui/core/Typography'; import ErrorOutline from '@material-ui/icons/ErrorOutline'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; -import React from 'react'; +import { ReactNode } from 'react'; import { MarkdownContent } from '../MarkdownContent'; const getWarningTextColor = ( @@ -131,9 +131,9 @@ export type WarningProps = { title?: string; severity?: 'warning' | 'error' | 'info'; titleFormat?: string; - message?: React.ReactNode; + message?: ReactNode; defaultExpanded?: boolean; - children?: React.ReactNode; + children?: ReactNode; }; const capitalize = (s: string) => { diff --git a/packages/core-components/src/icons/icons.test.tsx b/packages/core-components/src/icons/icons.test.tsx index 7cd54f37d0..bbc5cead2c 100644 --- a/packages/core-components/src/icons/icons.test.tsx +++ b/packages/core-components/src/icons/icons.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { screen } from '@testing-library/react'; import { renderInTestApp } from '@backstage/test-utils'; import { AppIcon } from './icons'; diff --git a/packages/core-components/src/icons/icons.tsx b/packages/core-components/src/icons/icons.tsx index bd1bf9e86e..60513e1c3d 100644 --- a/packages/core-components/src/icons/icons.tsx +++ b/packages/core-components/src/icons/icons.tsx @@ -16,7 +16,7 @@ import { IconComponent, useApp } from '@backstage/core-plugin-api'; import MuiBrokenImageIcon from '@material-ui/icons/BrokenImage'; -import React, { ComponentProps } from 'react'; +import { ComponentProps } from 'react'; /** * @public diff --git a/packages/core-components/src/layout/BottomLink/BottomLink.stories.tsx b/packages/core-components/src/layout/BottomLink/BottomLink.stories.tsx index e05af86993..93607c35f5 100644 --- a/packages/core-components/src/layout/BottomLink/BottomLink.stories.tsx +++ b/packages/core-components/src/layout/BottomLink/BottomLink.stories.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { BottomLink } from '../BottomLink'; export default { diff --git a/packages/core-components/src/layout/BottomLink/BottomLink.test.tsx b/packages/core-components/src/layout/BottomLink/BottomLink.test.tsx index 6eae7d2bef..9afb92b207 100644 --- a/packages/core-components/src/layout/BottomLink/BottomLink.test.tsx +++ b/packages/core-components/src/layout/BottomLink/BottomLink.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { renderInTestApp } from '@backstage/test-utils'; import { BottomLink } from './BottomLink'; diff --git a/packages/core-components/src/layout/BottomLink/BottomLink.tsx b/packages/core-components/src/layout/BottomLink/BottomLink.tsx index ea706002a4..f60c0a95c8 100644 --- a/packages/core-components/src/layout/BottomLink/BottomLink.tsx +++ b/packages/core-components/src/layout/BottomLink/BottomLink.tsx @@ -19,7 +19,7 @@ import Divider from '@material-ui/core/Divider'; import { makeStyles } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; import ArrowIcon from '@material-ui/icons/ArrowForward'; -import React from 'react'; +import { MouseEvent } from 'react'; import { Link } from '../../components/Link'; /** @public */ @@ -46,7 +46,7 @@ const useStyles = makeStyles( export type BottomLinkProps = { link: string; title: string; - onClick?: (event: React.MouseEvent) => void; + onClick?: (event: MouseEvent) => void; }; /** diff --git a/packages/core-components/src/layout/Breadcrumbs/Breadcrumbs.stories.tsx b/packages/core-components/src/layout/Breadcrumbs/Breadcrumbs.stories.tsx index 71d6f295e7..f962e4673e 100644 --- a/packages/core-components/src/layout/Breadcrumbs/Breadcrumbs.stories.tsx +++ b/packages/core-components/src/layout/Breadcrumbs/Breadcrumbs.stories.tsx @@ -21,7 +21,7 @@ import Popover from '@material-ui/core/Popover'; import Typography from '@material-ui/core/Typography'; import ExpandLessIcon from '@material-ui/icons/ExpandLess'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; -import React, { Fragment } from 'react'; +import { MouseEvent, useState, Fragment } from 'react'; import { MemoryRouter } from 'react-router-dom'; import { Link } from '../../components/Link'; import { Header } from '../Header'; @@ -47,10 +47,8 @@ export const InHeader = () => ( ); export const OutsideOfHeader = () => { - const [anchorEl, setAnchorEl] = React.useState( - null, - ); - const handleClick = (event: React.MouseEvent) => { + const [anchorEl, setAnchorEl] = useState(null); + const handleClick = (event: MouseEvent) => { setAnchorEl(event.currentTarget); }; diff --git a/packages/core-components/src/layout/Breadcrumbs/Breadcrumbs.test.tsx b/packages/core-components/src/layout/Breadcrumbs/Breadcrumbs.test.tsx index 12125bafc9..9187c146d0 100644 --- a/packages/core-components/src/layout/Breadcrumbs/Breadcrumbs.test.tsx +++ b/packages/core-components/src/layout/Breadcrumbs/Breadcrumbs.test.tsx @@ -17,7 +17,6 @@ import { renderInTestApp } from '@backstage/test-utils'; import Typography from '@material-ui/core/Typography'; import { fireEvent } from '@testing-library/react'; -import React from 'react'; import { Link } from '../../components/Link'; import { Breadcrumbs } from './Breadcrumbs'; diff --git a/packages/core-components/src/layout/Breadcrumbs/Breadcrumbs.tsx b/packages/core-components/src/layout/Breadcrumbs/Breadcrumbs.tsx index 49880e203b..9e8ad2d174 100644 --- a/packages/core-components/src/layout/Breadcrumbs/Breadcrumbs.tsx +++ b/packages/core-components/src/layout/Breadcrumbs/Breadcrumbs.tsx @@ -21,7 +21,13 @@ import ListItem from '@material-ui/core/ListItem'; import Popover from '@material-ui/core/Popover'; import { withStyles } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; -import React, { ComponentProps, Fragment } from 'react'; +import { + MouseEvent, + useState, + Children, + ComponentProps, + Fragment, +} from 'react'; type Props = ComponentProps; @@ -71,11 +77,9 @@ const BreadcrumbsCurrentPage = withStyles( */ export function Breadcrumbs(props: Props) { const { children, ...restProps } = props; - const [anchorEl, setAnchorEl] = React.useState( - null, - ); + const [anchorEl, setAnchorEl] = useState(null); - const childrenArray = React.Children.toArray(children); + const childrenArray = Children.toArray(children); const [firstPage, secondPage, ...expandablePages] = childrenArray; const currentPage = expandablePages.length @@ -83,7 +87,7 @@ export function Breadcrumbs(props: Props) { : childrenArray[childrenArray.length - 1]; const hasHiddenBreadcrumbs = childrenArray.length > 3; - const handleClick = (event: React.MouseEvent) => { + const handleClick = (event: MouseEvent) => { setAnchorEl(event.currentTarget); }; diff --git a/packages/core-components/src/layout/Content/Content.stories.tsx b/packages/core-components/src/layout/Content/Content.stories.tsx index fcf8858adc..8879c3c51d 100644 --- a/packages/core-components/src/layout/Content/Content.stories.tsx +++ b/packages/core-components/src/layout/Content/Content.stories.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import { Content } from './Content'; export default { diff --git a/packages/core-components/src/layout/Content/Content.tsx b/packages/core-components/src/layout/Content/Content.tsx index f949e0d3fc..10acb302f4 100644 --- a/packages/core-components/src/layout/Content/Content.tsx +++ b/packages/core-components/src/layout/Content/Content.tsx @@ -16,7 +16,7 @@ import { makeStyles, Theme } from '@material-ui/core/styles'; import classNames from 'classnames'; -import React, { PropsWithChildren } from 'react'; +import { PropsWithChildren } from 'react'; /** @public */ export type BackstageContentClassKey = 'root' | 'stretch' | 'noPadding'; diff --git a/packages/core-components/src/layout/ContentHeader/ContentHeader.stories.tsx b/packages/core-components/src/layout/ContentHeader/ContentHeader.stories.tsx index 27df00e72c..6b4ced0edd 100644 --- a/packages/core-components/src/layout/ContentHeader/ContentHeader.stories.tsx +++ b/packages/core-components/src/layout/ContentHeader/ContentHeader.stories.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { ReactNode } from 'react'; +import { ReactNode } from 'react'; import { ContentHeader } from '../ContentHeader'; export default { diff --git a/packages/core-components/src/layout/ContentHeader/ContentHeader.test.tsx b/packages/core-components/src/layout/ContentHeader/ContentHeader.test.tsx index 8be54b9114..617483a579 100644 --- a/packages/core-components/src/layout/ContentHeader/ContentHeader.test.tsx +++ b/packages/core-components/src/layout/ContentHeader/ContentHeader.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { ContentHeader } from './ContentHeader'; import { renderInTestApp } from '@backstage/test-utils'; import _ from 'lodash'; diff --git a/packages/core-components/src/layout/ContentHeader/ContentHeader.tsx b/packages/core-components/src/layout/ContentHeader/ContentHeader.tsx index 1e8ab5e3ff..5cd2f35755 100644 --- a/packages/core-components/src/layout/ContentHeader/ContentHeader.tsx +++ b/packages/core-components/src/layout/ContentHeader/ContentHeader.tsx @@ -16,7 +16,7 @@ import Box from '@material-ui/core/Box'; import { makeStyles } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; -import React, { PropsWithChildren, ReactNode } from 'react'; +import { PropsWithChildren, ReactNode } from 'react'; import { Helmet } from 'react-helmet'; /** diff --git a/packages/core-components/src/layout/ErrorBoundary/ErrorBoundary.test.tsx b/packages/core-components/src/layout/ErrorBoundary/ErrorBoundary.test.tsx index c96ab67782..4011fd2125 100644 --- a/packages/core-components/src/layout/ErrorBoundary/ErrorBoundary.test.tsx +++ b/packages/core-components/src/layout/ErrorBoundary/ErrorBoundary.test.tsx @@ -15,7 +15,7 @@ * limitations under the License. */ -import React from 'react'; +import { ReactNode } from 'react'; import { ErrorBoundary } from './ErrorBoundary'; import { MockErrorApi, @@ -27,7 +27,7 @@ import { errorApiRef } from '@backstage/core-plugin-api'; type BombProps = { shouldThrow?: boolean; - children?: React.ReactNode; + children?: ReactNode; }; const Bomb = ({ shouldThrow }: BombProps) => { diff --git a/packages/core-components/src/layout/ErrorBoundary/ErrorBoundary.tsx b/packages/core-components/src/layout/ErrorBoundary/ErrorBoundary.tsx index b3a5d1db90..4fe960b702 100644 --- a/packages/core-components/src/layout/ErrorBoundary/ErrorBoundary.tsx +++ b/packages/core-components/src/layout/ErrorBoundary/ErrorBoundary.tsx @@ -15,7 +15,7 @@ */ import Typography from '@material-ui/core/Typography'; -import React, { ComponentClass, Component, ErrorInfo } from 'react'; +import { PropsWithChildren, ComponentClass, Component, ErrorInfo } from 'react'; import { LinkButton } from '../../components/LinkButton'; import { ErrorPanel } from '../../components/ErrorPanel'; import { coreComponentsTranslationRef } from '../../translation'; @@ -27,7 +27,7 @@ type SlackChannel = { }; /** @public */ -export type ErrorBoundaryProps = React.PropsWithChildren<{ +export type ErrorBoundaryProps = PropsWithChildren<{ slackChannel?: string | SlackChannel; onError?: (error: Error, errorInfo: string) => null; }>; diff --git a/packages/core-components/src/layout/ErrorPage/ErrorPage.test.tsx b/packages/core-components/src/layout/ErrorPage/ErrorPage.test.tsx index d7036d0a5b..88e3ec4930 100644 --- a/packages/core-components/src/layout/ErrorPage/ErrorPage.test.tsx +++ b/packages/core-components/src/layout/ErrorPage/ErrorPage.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { ErrorPage } from './ErrorPage'; import { Link } from '../../components/Link'; import { renderInTestApp } from '@backstage/test-utils'; diff --git a/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx b/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx index 72c00ed6a9..055f325144 100644 --- a/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx +++ b/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx @@ -17,7 +17,7 @@ import Grid from '@material-ui/core/Grid'; import { makeStyles } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; -import React from 'react'; +import { ReactNode } from 'react'; import { useNavigate } from 'react-router-dom'; import { Link } from '../../components/Link'; import { useSupportConfig } from '../../hooks'; @@ -29,7 +29,7 @@ import { useTranslationRef } from '@backstage/core-plugin-api/alpha'; interface IErrorPageProps { status?: string; statusMessage: string; - additionalInfo?: React.ReactNode; + additionalInfo?: ReactNode; supportUrl?: string; stack?: string; } diff --git a/packages/core-components/src/layout/ErrorPage/MicDrop.tsx b/packages/core-components/src/layout/ErrorPage/MicDrop.tsx index d55c50bd29..790091aa3c 100644 --- a/packages/core-components/src/layout/ErrorPage/MicDrop.tsx +++ b/packages/core-components/src/layout/ErrorPage/MicDrop.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import MicDropSvgUrl from './mic-drop.svg'; diff --git a/packages/core-components/src/layout/ErrorPage/StackDetails.tsx b/packages/core-components/src/layout/ErrorPage/StackDetails.tsx index 307e44e435..f2b0e1c616 100644 --- a/packages/core-components/src/layout/ErrorPage/StackDetails.tsx +++ b/packages/core-components/src/layout/ErrorPage/StackDetails.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ import Typography from '@material-ui/core/Typography'; -import React from 'react'; import { useState } from 'react'; import { Link } from '../../components/Link'; import { CodeSnippet } from '../../components'; diff --git a/packages/core-components/src/layout/Header/Header.stories.tsx b/packages/core-components/src/layout/Header/Header.stories.tsx index 19871dfc75..3b9c67fce5 100644 --- a/packages/core-components/src/layout/Header/Header.stories.tsx +++ b/packages/core-components/src/layout/Header/Header.stories.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import { HeaderLabel } from '../HeaderLabel'; import { Page } from '../Page'; import { Header } from './Header'; diff --git a/packages/core-components/src/layout/Header/Header.test.tsx b/packages/core-components/src/layout/Header/Header.test.tsx index 2a63b4fedc..d19df6314e 100644 --- a/packages/core-components/src/layout/Header/Header.test.tsx +++ b/packages/core-components/src/layout/Header/Header.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { renderInTestApp, TestApiProvider } from '@backstage/test-utils'; import { Header } from './Header'; import { ConfigReader } from '@backstage/core-app-api'; diff --git a/packages/core-components/src/layout/Header/Header.tsx b/packages/core-components/src/layout/Header/Header.tsx index c6ceda1070..f5facda641 100644 --- a/packages/core-components/src/layout/Header/Header.tsx +++ b/packages/core-components/src/layout/Header/Header.tsx @@ -20,7 +20,7 @@ import Grid from '@material-ui/core/Grid'; import { makeStyles } from '@material-ui/core/styles'; import Tooltip from '@material-ui/core/Tooltip'; import Typography from '@material-ui/core/Typography'; -import React, { CSSProperties, PropsWithChildren, ReactNode } from 'react'; +import { CSSProperties, PropsWithChildren, ReactNode } from 'react'; import { Helmet } from 'react-helmet'; import { Link } from '../../components/Link'; import { Breadcrumbs } from '../Breadcrumbs'; diff --git a/packages/core-components/src/layout/HeaderActionMenu/HeaderActionMenu.stories.tsx b/packages/core-components/src/layout/HeaderActionMenu/HeaderActionMenu.stories.tsx index dc50456f7e..0fc4139dfb 100644 --- a/packages/core-components/src/layout/HeaderActionMenu/HeaderActionMenu.stories.tsx +++ b/packages/core-components/src/layout/HeaderActionMenu/HeaderActionMenu.stories.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import { HeaderActionMenu, HeaderActionMenuProps } from './HeaderActionMenu'; export default { diff --git a/packages/core-components/src/layout/HeaderActionMenu/HeaderActionMenu.test.tsx b/packages/core-components/src/layout/HeaderActionMenu/HeaderActionMenu.test.tsx index fc9b4f449c..39e365c392 100644 --- a/packages/core-components/src/layout/HeaderActionMenu/HeaderActionMenu.test.tsx +++ b/packages/core-components/src/layout/HeaderActionMenu/HeaderActionMenu.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { fireEvent } from '@testing-library/react'; import { renderInTestApp } from '@backstage/test-utils'; import { HeaderActionMenu } from './HeaderActionMenu'; diff --git a/packages/core-components/src/layout/HeaderActionMenu/HeaderActionMenu.tsx b/packages/core-components/src/layout/HeaderActionMenu/HeaderActionMenu.tsx index d2b11f9a3b..5ddbb750ae 100644 --- a/packages/core-components/src/layout/HeaderActionMenu/HeaderActionMenu.tsx +++ b/packages/core-components/src/layout/HeaderActionMenu/HeaderActionMenu.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { Fragment, ReactElement } from 'react'; +import { MouseEvent, useState, useRef, Fragment, ReactElement } from 'react'; import IconButton from '@material-ui/core/IconButton'; import List from '@material-ui/core/List'; import ListItem from '@material-ui/core/ListItem'; @@ -34,7 +34,7 @@ export type HeaderActionMenuItem = { secondaryLabel?: ListItemTextProps['secondary']; icon?: ReactElement; disabled?: boolean; - onClick?: (event: React.MouseEvent) => void; + onClick?: (event: MouseEvent) => void; }; const ActionItem = ({ @@ -80,8 +80,8 @@ export function HeaderActionMenu(props: HeaderActionMenuProps) { }, } = useTheme(); const { actionItems } = props; - const [open, setOpen] = React.useState(false); - const anchorElRef = React.useRef(null); + const [open, setOpen] = useState(false); + const anchorElRef = useRef(null); return ( diff --git a/packages/core-components/src/layout/HeaderLabel/HeaderLabel.stories.tsx b/packages/core-components/src/layout/HeaderLabel/HeaderLabel.stories.tsx index 58566a27d2..dd93b0768c 100644 --- a/packages/core-components/src/layout/HeaderLabel/HeaderLabel.stories.tsx +++ b/packages/core-components/src/layout/HeaderLabel/HeaderLabel.stories.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import { HeaderLabel } from './HeaderLabel'; export default { diff --git a/packages/core-components/src/layout/HeaderLabel/HeaderLabel.test.tsx b/packages/core-components/src/layout/HeaderLabel/HeaderLabel.test.tsx index 7f863d57fa..12f74a702b 100644 --- a/packages/core-components/src/layout/HeaderLabel/HeaderLabel.test.tsx +++ b/packages/core-components/src/layout/HeaderLabel/HeaderLabel.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { renderInTestApp } from '@backstage/test-utils'; import { HeaderLabel } from './HeaderLabel'; diff --git a/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx b/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx index 6a41d6aedc..4ba59573ab 100644 --- a/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx +++ b/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx @@ -17,7 +17,7 @@ import Grid from '@material-ui/core/Grid'; import { alpha, makeStyles } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; -import React, { PropsWithChildren } from 'react'; +import { ReactNode, PropsWithChildren } from 'react'; import { Link } from '../../components/Link'; /** @public */ @@ -46,7 +46,7 @@ const useStyles = makeStyles( ); type HeaderLabelContentProps = PropsWithChildren<{ - value: React.ReactNode; + value: ReactNode; className: string; typographyRootComponent?: keyof JSX.IntrinsicElements; }>; diff --git a/packages/core-components/src/layout/HeaderTabs/HeaderTabs.stories.tsx b/packages/core-components/src/layout/HeaderTabs/HeaderTabs.stories.tsx index 4c3b1235fd..08ea2a0648 100644 --- a/packages/core-components/src/layout/HeaderTabs/HeaderTabs.stories.tsx +++ b/packages/core-components/src/layout/HeaderTabs/HeaderTabs.stories.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import { HeaderTabs } from './HeaderTabs'; export default { diff --git a/packages/core-components/src/layout/HeaderTabs/HeaderTabs.test.tsx b/packages/core-components/src/layout/HeaderTabs/HeaderTabs.test.tsx index 5aec83bc2b..18eb1c3753 100644 --- a/packages/core-components/src/layout/HeaderTabs/HeaderTabs.test.tsx +++ b/packages/core-components/src/layout/HeaderTabs/HeaderTabs.test.tsx @@ -17,7 +17,7 @@ import { renderInTestApp } from '@backstage/test-utils'; import Badge from '@material-ui/core/Badge'; import { makeStyles } from '@material-ui/core/styles'; -import React from 'react'; +import { PropsWithChildren, forwardRef } from 'react'; import { HeaderTabs } from './HeaderTabs'; import userEvent from '@testing-library/user-event'; @@ -56,8 +56,8 @@ describe('', () => { }, })); - const TextualBadge = React.forwardRef( - (props: React.PropsWithChildren<{}>, ref) => ( + const TextualBadge = forwardRef( + (props: PropsWithChildren<{}>, ref) => ( ; + tabProps?: TabProps; }; type HeaderTabsProps = { @@ -81,7 +87,7 @@ export function HeaderTabs(props: HeaderTabsProps) { const styles = useStyles(); const handleChange = useCallback( - (_: React.ChangeEvent<{}>, index: number) => { + (_: ChangeEvent<{}>, index: number) => { if (selectedIndex === undefined) { setSelectedTab(index); } diff --git a/packages/core-components/src/layout/InfoCard/InfoCard.stories.tsx b/packages/core-components/src/layout/InfoCard/InfoCard.stories.tsx index 0e136800ca..72bc79b674 100644 --- a/packages/core-components/src/layout/InfoCard/InfoCard.stories.tsx +++ b/packages/core-components/src/layout/InfoCard/InfoCard.stories.tsx @@ -16,7 +16,7 @@ import Grid from '@material-ui/core/Grid'; import Typography from '@material-ui/core/Typography'; -import React, { PropsWithChildren } from 'react'; +import { PropsWithChildren } from 'react'; import { MemoryRouter } from 'react-router-dom'; import { InfoCard, Props } from './InfoCard'; diff --git a/packages/core-components/src/layout/InfoCard/InfoCard.test.tsx b/packages/core-components/src/layout/InfoCard/InfoCard.test.tsx index 0db7c24c96..6f4575b1b1 100644 --- a/packages/core-components/src/layout/InfoCard/InfoCard.test.tsx +++ b/packages/core-components/src/layout/InfoCard/InfoCard.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { renderInTestApp } from '@backstage/test-utils'; import { within } from '@testing-library/react'; import { InfoCard } from './InfoCard'; diff --git a/packages/core-components/src/layout/InfoCard/InfoCard.tsx b/packages/core-components/src/layout/InfoCard/InfoCard.tsx index a08a816c2e..d7571d0ea0 100644 --- a/packages/core-components/src/layout/InfoCard/InfoCard.tsx +++ b/packages/core-components/src/layout/InfoCard/InfoCard.tsx @@ -21,7 +21,7 @@ import CardHeader, { CardHeaderProps } from '@material-ui/core/CardHeader'; import Divider from '@material-ui/core/Divider'; import { makeStyles, withStyles } from '@material-ui/core/styles'; import classNames from 'classnames'; -import React, { ReactNode } from 'react'; +import { ReactNode } from 'react'; import { BottomLink, BottomLinkProps } from '../BottomLink'; import { ErrorBoundary, ErrorBoundaryProps } from '../ErrorBoundary'; diff --git a/packages/core-components/src/layout/ItemCard/ItemCard.stories.tsx b/packages/core-components/src/layout/ItemCard/ItemCard.stories.tsx index a03ad9be41..def451d418 100644 --- a/packages/core-components/src/layout/ItemCard/ItemCard.stories.tsx +++ b/packages/core-components/src/layout/ItemCard/ItemCard.stories.tsx @@ -20,7 +20,6 @@ import CardActions from '@material-ui/core/CardActions'; import CardContent from '@material-ui/core/CardContent'; import CardMedia from '@material-ui/core/CardMedia'; import Typography from '@material-ui/core/Typography'; -import React from 'react'; import { MemoryRouter } from 'react-router-dom'; import { LinkButton } from '../../components/LinkButton/LinkButton'; import { ItemCardGrid } from './ItemCardGrid'; diff --git a/packages/core-components/src/layout/ItemCard/ItemCard.test.tsx b/packages/core-components/src/layout/ItemCard/ItemCard.test.tsx index 4375fb8181..027f9105fb 100644 --- a/packages/core-components/src/layout/ItemCard/ItemCard.test.tsx +++ b/packages/core-components/src/layout/ItemCard/ItemCard.test.tsx @@ -15,7 +15,6 @@ */ import { renderInTestApp } from '@backstage/test-utils'; -import React from 'react'; import { ItemCard } from './ItemCard'; const minProps = { diff --git a/packages/core-components/src/layout/ItemCard/ItemCard.tsx b/packages/core-components/src/layout/ItemCard/ItemCard.tsx index 2d1123b19c..a121e9be2d 100644 --- a/packages/core-components/src/layout/ItemCard/ItemCard.tsx +++ b/packages/core-components/src/layout/ItemCard/ItemCard.tsx @@ -20,7 +20,7 @@ import CardActions from '@material-ui/core/CardActions'; import CardContent from '@material-ui/core/CardContent'; import CardMedia from '@material-ui/core/CardMedia'; import Chip from '@material-ui/core/Chip'; -import React, { ReactNode } from 'react'; +import { ReactNode } from 'react'; import { LinkButton } from '../../components/LinkButton/LinkButton'; import { ItemCardHeader } from './ItemCardHeader'; diff --git a/packages/core-components/src/layout/ItemCard/ItemCardGrid.test.tsx b/packages/core-components/src/layout/ItemCard/ItemCardGrid.test.tsx index f8759ffd17..975b397498 100644 --- a/packages/core-components/src/layout/ItemCard/ItemCardGrid.test.tsx +++ b/packages/core-components/src/layout/ItemCard/ItemCardGrid.test.tsx @@ -17,7 +17,6 @@ import { renderInTestApp } from '@backstage/test-utils'; import Card from '@material-ui/core/Card'; import { screen } from '@testing-library/react'; -import React from 'react'; import { ItemCardGrid } from './ItemCardGrid'; describe('', () => { diff --git a/packages/core-components/src/layout/ItemCard/ItemCardGrid.tsx b/packages/core-components/src/layout/ItemCard/ItemCardGrid.tsx index 30710bdc26..30efbab415 100644 --- a/packages/core-components/src/layout/ItemCard/ItemCardGrid.tsx +++ b/packages/core-components/src/layout/ItemCard/ItemCardGrid.tsx @@ -20,7 +20,7 @@ import { Theme, WithStyles, } from '@material-ui/core/styles'; -import React from 'react'; +import { ReactNode } from 'react'; /** @public */ export type ItemCardGridClassKey = 'root'; @@ -42,7 +42,7 @@ export type ItemCardGridProps = Partial> & { /** * The Card items of the grid. */ - children?: React.ReactNode; + children?: ReactNode; }; /** diff --git a/packages/core-components/src/layout/ItemCard/ItemCardHeader.test.tsx b/packages/core-components/src/layout/ItemCard/ItemCardHeader.test.tsx index a401dfb4a5..23351e109e 100644 --- a/packages/core-components/src/layout/ItemCard/ItemCardHeader.test.tsx +++ b/packages/core-components/src/layout/ItemCard/ItemCardHeader.test.tsx @@ -18,7 +18,6 @@ import { renderInTestApp } from '@backstage/test-utils'; import Card from '@material-ui/core/Card'; import CardMedia from '@material-ui/core/CardMedia'; import { screen } from '@testing-library/react'; -import React from 'react'; import { ItemCardHeader } from './ItemCardHeader'; describe('', () => { diff --git a/packages/core-components/src/layout/ItemCard/ItemCardHeader.tsx b/packages/core-components/src/layout/ItemCard/ItemCardHeader.tsx index 6dc4725f09..b21ac53cf6 100644 --- a/packages/core-components/src/layout/ItemCard/ItemCardHeader.tsx +++ b/packages/core-components/src/layout/ItemCard/ItemCardHeader.tsx @@ -22,7 +22,7 @@ import { WithStyles, } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; -import React from 'react'; +import { ReactNode } from 'react'; /** @public */ export type ItemCardHeaderClassKey = 'root'; @@ -47,7 +47,7 @@ export type ItemCardHeaderProps = Partial> & { * * Use this if you want to have the default styling and placement of a title. */ - title?: React.ReactNode; + title?: ReactNode; /** * A slightly smaller title to show in the header, providing additional * details. @@ -55,14 +55,14 @@ export type ItemCardHeaderProps = Partial> & { * Use this if you want to have the default styling and placement of a * subtitle. */ - subtitle?: React.ReactNode; + subtitle?: ReactNode; /** * Custom children to draw in the header. * * If the title and/or subtitle were specified, the children are drawn below * those. */ - children?: React.ReactNode; + children?: ReactNode; }; /** diff --git a/packages/core-components/src/layout/Page/Page.stories.tsx b/packages/core-components/src/layout/Page/Page.stories.tsx index e8fdeea17b..aa0aedbe5d 100644 --- a/packages/core-components/src/layout/Page/Page.stories.tsx +++ b/packages/core-components/src/layout/Page/Page.stories.tsx @@ -19,7 +19,7 @@ import Box from '@material-ui/core/Box'; import Chip from '@material-ui/core/Chip'; import Grid from '@material-ui/core/Grid'; import Typography from '@material-ui/core/Typography'; -import React, { useState } from 'react'; +import { useState } from 'react'; import { GaugeCard, StatusOK, diff --git a/packages/core-components/src/layout/Page/Page.tsx b/packages/core-components/src/layout/Page/Page.tsx index 541172ab7f..4bfeb90b94 100644 --- a/packages/core-components/src/layout/Page/Page.tsx +++ b/packages/core-components/src/layout/Page/Page.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React from 'react'; +import { ReactNode } from 'react'; import { makeStyles, Theme, ThemeProvider } from '@material-ui/core/styles'; import classNames from 'classnames'; @@ -46,7 +46,7 @@ const useStyles = makeStyles( type Props = { themeId: string; className?: string; - children?: React.ReactNode; + children?: ReactNode; }; export function Page(props: Props) { diff --git a/packages/core-components/src/layout/Page/PageWithHeader.tsx b/packages/core-components/src/layout/Page/PageWithHeader.tsx index 541b655dff..9a4dab6699 100644 --- a/packages/core-components/src/layout/Page/PageWithHeader.tsx +++ b/packages/core-components/src/layout/Page/PageWithHeader.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { PropsWithChildren, ComponentProps } from 'react'; +import { PropsWithChildren, ComponentProps } from 'react'; import { Header } from '../Header'; import { Page } from './Page'; diff --git a/packages/core-components/src/layout/ProxiedSignInPage/ProxiedSignInPage.test.tsx b/packages/core-components/src/layout/ProxiedSignInPage/ProxiedSignInPage.test.tsx index d0cfbbbe31..225d91a00b 100644 --- a/packages/core-components/src/layout/ProxiedSignInPage/ProxiedSignInPage.test.tsx +++ b/packages/core-components/src/layout/ProxiedSignInPage/ProxiedSignInPage.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { render, screen } from '@testing-library/react'; import { rest } from 'msw'; import { setupServer } from 'msw/node'; diff --git a/packages/core-components/src/layout/ProxiedSignInPage/ProxiedSignInPage.tsx b/packages/core-components/src/layout/ProxiedSignInPage/ProxiedSignInPage.tsx index 01519ce0b3..f67f8d3f13 100644 --- a/packages/core-components/src/layout/ProxiedSignInPage/ProxiedSignInPage.tsx +++ b/packages/core-components/src/layout/ProxiedSignInPage/ProxiedSignInPage.tsx @@ -19,7 +19,7 @@ import { SignInPageProps, useApi, } from '@backstage/core-plugin-api'; -import React, { ComponentType } from 'react'; +import { ComponentType } from 'react'; import { useAsync, useMountEffect } from '@react-hookz/web'; import { ErrorPanel } from '../../components/ErrorPanel'; import { Progress } from '../../components/Progress'; diff --git a/packages/core-components/src/layout/Sidebar/Bar.test.tsx b/packages/core-components/src/layout/Sidebar/Bar.test.tsx index fb92e491f8..c79b7b1b46 100644 --- a/packages/core-components/src/layout/Sidebar/Bar.test.tsx +++ b/packages/core-components/src/layout/Sidebar/Bar.test.tsx @@ -21,7 +21,6 @@ import BuildRoundedIcon from '@material-ui/icons/BuildRounded'; import MenuBookIcon from '@material-ui/icons/MenuBook'; import { screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import React from 'react'; import { Sidebar } from './Bar'; import { SidebarExpandButton, SidebarItem, SidebarSearchField } from './Items'; import { SidebarPinStateProvider } from './SidebarPinStateContext'; diff --git a/packages/core-components/src/layout/Sidebar/Bar.tsx b/packages/core-components/src/layout/Sidebar/Bar.tsx index c5aa9585bb..a73c0375cd 100644 --- a/packages/core-components/src/layout/Sidebar/Bar.tsx +++ b/packages/core-components/src/layout/Sidebar/Bar.tsx @@ -19,7 +19,7 @@ import Button from '@material-ui/core/Button'; import { makeStyles, Theme } from '@material-ui/core/styles'; import useMediaQuery from '@material-ui/core/useMediaQuery'; import classnames from 'classnames'; -import React, { useContext, useRef, useState } from 'react'; +import { ReactNode, useContext, useRef, useState } from 'react'; import { makeSidebarConfig, @@ -104,14 +104,14 @@ export type SidebarProps = { sidebarOptions?: SidebarOptions; submenuOptions?: SubmenuOptions; disableExpandOnHover?: boolean; - children?: React.ReactNode; + children?: ReactNode; }; export type DesktopSidebarProps = { openDelayMs?: number; closeDelayMs?: number; disableExpandOnHover?: boolean; - children?: React.ReactNode; + children?: ReactNode; }; /** diff --git a/packages/core-components/src/layout/Sidebar/Items.test.tsx b/packages/core-components/src/layout/Sidebar/Items.test.tsx index ee0f0ea401..3121228ccd 100644 --- a/packages/core-components/src/layout/Sidebar/Items.test.tsx +++ b/packages/core-components/src/layout/Sidebar/Items.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { mockApis, TestApiProvider, diff --git a/packages/core-components/src/layout/Sidebar/Items.tsx b/packages/core-components/src/layout/Sidebar/Items.tsx index cb5b801b6d..efe1f97dfb 100644 --- a/packages/core-components/src/layout/Sidebar/Items.tsx +++ b/packages/core-components/src/layout/Sidebar/Items.tsx @@ -35,7 +35,8 @@ import ArrowRightIcon from '@material-ui/icons/ArrowRight'; import SearchIcon from '@material-ui/icons/Search'; import classnames from 'classnames'; import type { Location } from 'history'; -import React, { + +import { ComponentProps, ComponentType, CSSProperties, @@ -46,7 +47,12 @@ import React, { useContext, useMemo, useState, + MouseEvent, + ChangeEvent, + ReactElement, + createElement, } from 'react'; + import { Link, NavLinkProps, @@ -227,7 +233,7 @@ function useMemoStyles(sidebarConfig: SidebarConfig) { * @returns boolean */ const useLocationMatch = ( - submenu: React.ReactElement, + submenu: ReactElement, location: Location, ): boolean => useElementFilter( @@ -270,22 +276,22 @@ type SidebarItemBaseProps = { disableHighlight?: boolean; className?: string; noTrack?: boolean; - onClick?: (ev: React.MouseEvent) => void; + onClick?: (ev: MouseEvent) => void; }; type SidebarItemButtonProps = SidebarItemBaseProps & { - onClick: (ev: React.MouseEvent) => void; + onClick: (ev: MouseEvent) => void; children?: ReactNode; }; type SidebarItemLinkProps = SidebarItemBaseProps & { to: string; - onClick?: (ev: React.MouseEvent) => void; + onClick?: (ev: MouseEvent) => void; } & NavLinkProps; type SidebarItemWithSubmenuProps = SidebarItemBaseProps & { to?: string; - onClick?: (ev: React.MouseEvent) => void; + onClick?: (ev: MouseEvent) => void; children: ReactNode; }; @@ -305,12 +311,12 @@ function isButtonItem( return (props as SidebarItemLinkProps).to === undefined; } -const sidebarSubmenuType = React.createElement(SidebarSubmenu).type; +const sidebarSubmenuType = createElement(SidebarSubmenu).type; // TODO(Rugvip): Remove this once NavLink is updated in react-router-dom. // This is needed because react-router doesn't handle the path comparison // properly yet, matching for example /foobar with /foo. -export const WorkaroundNavLink = React.forwardRef< +export const WorkaroundNavLink = forwardRef< HTMLAnchorElement, NavLinkProps & { children?: ReactNode; @@ -449,7 +455,7 @@ const SidebarItemBase = forwardRef< ); const handleClick = useCallback( - (event: React.MouseEvent) => { + (event: MouseEvent) => { if (!noTrack) { const action = 'click'; const subject = text ?? 'Sidebar Item'; @@ -494,7 +500,7 @@ const SidebarItemWithSubmenu = ({ children, ...props }: SidebarItemBaseProps & { - children: React.ReactElement; + children: ReactElement; }) => { const { sidebarConfig } = useContext(SidebarConfigContext); const classes = useMemoStyles(sidebarConfig); @@ -576,7 +582,7 @@ export const SidebarItem = forwardRef< if (submenu) { return ( - {submenu as React.ReactElement} + {submenu as ReactElement} ); } @@ -608,17 +614,17 @@ export function SidebarSearchField(props: SidebarSearchFieldProps) { } }; - const handleInput = (ev: React.ChangeEvent) => { + const handleInput = (ev: ChangeEvent) => { setInput(ev.target.value); }; - const handleInputClick = (ev: React.MouseEvent) => { + const handleInputClick = (ev: MouseEvent) => { // Clicking into the search fields shouldn't navigate to the search page ev.preventDefault(); ev.stopPropagation(); }; - const handleItemClick = (ev: React.MouseEvent) => { + const handleItemClick = (ev: MouseEvent) => { // Clicking on the search icon while should execute a query with the current field content search(); ev.preventDefault(); diff --git a/packages/core-components/src/layout/Sidebar/MobileSidebar.test.tsx b/packages/core-components/src/layout/Sidebar/MobileSidebar.test.tsx index c29276a6cf..d806d1a3db 100644 --- a/packages/core-components/src/layout/Sidebar/MobileSidebar.test.tsx +++ b/packages/core-components/src/layout/Sidebar/MobileSidebar.test.tsx @@ -21,7 +21,6 @@ import HomeIcon from '@material-ui/icons/Home'; import LayersIcon from '@material-ui/icons/Layers'; import LibraryBooks from '@material-ui/icons/LibraryBooks'; import { fireEvent } from '@testing-library/react'; -import React from 'react'; import { Sidebar } from './Bar'; import { SidebarItem } from './Items'; import { MobileSidebar } from './MobileSidebar'; diff --git a/packages/core-components/src/layout/Sidebar/MobileSidebar.tsx b/packages/core-components/src/layout/Sidebar/MobileSidebar.tsx index bc38f5510c..0006b4bfd7 100644 --- a/packages/core-components/src/layout/Sidebar/MobileSidebar.tsx +++ b/packages/core-components/src/layout/Sidebar/MobileSidebar.tsx @@ -24,7 +24,14 @@ import Typography from '@material-ui/core/Typography'; import CloseIcon from '@material-ui/icons/Close'; import MenuIcon from '@material-ui/icons/Menu'; import { orderBy } from 'lodash'; -import React, { useEffect, useState, useContext, ReactNode } from 'react'; +import { + useEffect, + useState, + useContext, + ReactNode, + ReactElement, + createElement, +} from 'react'; import { useLocation } from 'react-router-dom'; import { SidebarOpenStateProvider } from './SidebarOpenStateContext'; import { SidebarGroup } from './SidebarGroup'; @@ -37,7 +44,7 @@ import { MobileSidebarContext } from './MobileSidebarContext'; * @public */ export type MobileSidebarProps = { - children?: React.ReactNode; + children?: ReactNode; }; /** @@ -47,7 +54,7 @@ type OverlayMenuProps = { label?: string; onClose: () => void; open: boolean; - children?: React.ReactNode; + children?: ReactNode; }; const useStyles = makeStyles( @@ -94,14 +101,14 @@ const useStyles = makeStyles( }), ); -const sortSidebarGroupsForPriority = (children: React.ReactElement[]) => +const sortSidebarGroupsForPriority = (children: ReactElement[]) => orderBy( children, ({ props: { priority } }) => (Number.isInteger(priority) ? priority : -1), 'desc', ); -const sidebarGroupType = React.createElement(SidebarGroup).type; +const sidebarGroupType = createElement(SidebarGroup).type; const OverlayMenu = ({ children, diff --git a/packages/core-components/src/layout/Sidebar/MobileSidebarContext.ts b/packages/core-components/src/layout/Sidebar/MobileSidebarContext.ts index 92635be5c0..3f976ffc2b 100644 --- a/packages/core-components/src/layout/Sidebar/MobileSidebarContext.ts +++ b/packages/core-components/src/layout/Sidebar/MobileSidebarContext.ts @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { createContext } from 'react'; +import { SetStateAction, Dispatch, createContext } from 'react'; /** * Type of `MobileSidebarContext` @@ -23,7 +23,7 @@ import React, { createContext } from 'react'; */ export type MobileSidebarContextType = { selectedMenuItemIndex: number; - setSelectedMenuItemIndex: React.Dispatch>; + setSelectedMenuItemIndex: Dispatch>; }; /** diff --git a/packages/core-components/src/layout/Sidebar/Page.tsx b/packages/core-components/src/layout/Sidebar/Page.tsx index 3d618fc5a0..2e72dae368 100644 --- a/packages/core-components/src/layout/Sidebar/Page.tsx +++ b/packages/core-components/src/layout/Sidebar/Page.tsx @@ -17,7 +17,9 @@ import Box from '@material-ui/core/Box'; import { makeStyles, Theme } from '@material-ui/core/styles'; import useMediaQuery from '@material-ui/core/useMediaQuery'; -import React, { +import { + ReactNode, + MutableRefObject, createContext, useCallback, useContext, @@ -72,12 +74,12 @@ const useStyles = makeStyles( * @public */ export type SidebarPageProps = { - children?: React.ReactNode; + children?: ReactNode; }; type PageContextType = { content: { - contentRef?: React.MutableRefObject; + contentRef?: MutableRefObject; }; }; diff --git a/packages/core-components/src/layout/Sidebar/Sidebar.stories.tsx b/packages/core-components/src/layout/Sidebar/Sidebar.stories.tsx index aef837b646..f02fad5095 100644 --- a/packages/core-components/src/layout/Sidebar/Sidebar.stories.tsx +++ b/packages/core-components/src/layout/Sidebar/Sidebar.stories.tsx @@ -23,7 +23,7 @@ import MenuBookIcon from '@material-ui/icons/MenuBook'; import CloudQueueIcon from '@material-ui/icons/CloudQueue'; import AcUnitIcon from '@material-ui/icons/AcUnit'; import AppsIcon from '@material-ui/icons/Apps'; -import React, { ComponentType, PropsWithChildren } from 'react'; +import { ComponentType, PropsWithChildren } from 'react'; import { SidebarPage } from './Page'; import { Sidebar } from './Bar'; import { SidebarGroup } from './SidebarGroup'; diff --git a/packages/core-components/src/layout/Sidebar/SidebarGroup.test.tsx b/packages/core-components/src/layout/Sidebar/SidebarGroup.test.tsx index b59395efab..a32defb828 100644 --- a/packages/core-components/src/layout/Sidebar/SidebarGroup.test.tsx +++ b/packages/core-components/src/layout/Sidebar/SidebarGroup.test.tsx @@ -20,7 +20,6 @@ import HomeIcon from '@material-ui/icons/Home'; import LayersIcon from '@material-ui/icons/Layers'; import LibraryBooks from '@material-ui/icons/LibraryBooks'; import { fireEvent } from '@testing-library/react'; -import React from 'react'; import { SidebarItem } from './Items'; import { MobileSidebarContext } from './MobileSidebarContext'; import { SidebarPage } from './Page'; diff --git a/packages/core-components/src/layout/Sidebar/SidebarGroup.tsx b/packages/core-components/src/layout/Sidebar/SidebarGroup.tsx index 7944728af6..4c5d8fbbff 100644 --- a/packages/core-components/src/layout/Sidebar/SidebarGroup.tsx +++ b/packages/core-components/src/layout/Sidebar/SidebarGroup.tsx @@ -19,7 +19,7 @@ import BottomNavigationAction, { BottomNavigationActionProps, } from '@material-ui/core/BottomNavigationAction'; import { Theme, makeStyles } from '@material-ui/core/styles'; -import React, { useContext } from 'react'; +import { ReactNode, ChangeEvent, useContext } from 'react'; import { useLocation } from 'react-router-dom'; import { Link } from '../../components/Link/Link'; import { SidebarConfig, SidebarConfigContext } from './config'; @@ -44,7 +44,7 @@ export interface SidebarGroupProps extends BottomNavigationActionProps { /** * React children */ - children?: React.ReactNode; + children?: ReactNode; } const useStyles = makeStyles( @@ -82,7 +82,7 @@ const MobileSidebarGroup = (props: SidebarGroupProps) => { const { selectedMenuItemIndex, setSelectedMenuItemIndex } = useContext(MobileSidebarContext); - const onChange = (_: React.ChangeEvent<{}>, value: number) => { + const onChange = (_: ChangeEvent<{}>, value: number) => { if (value === selectedMenuItemIndex) { setSelectedMenuItemIndex(-1); } else { diff --git a/packages/core-components/src/layout/Sidebar/SidebarOpenStateContext.test.tsx b/packages/core-components/src/layout/Sidebar/SidebarOpenStateContext.test.tsx index 8cc6f7858c..ae4b6342eb 100644 --- a/packages/core-components/src/layout/Sidebar/SidebarOpenStateContext.test.tsx +++ b/packages/core-components/src/layout/Sidebar/SidebarOpenStateContext.test.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, { ReactNode, useContext } from 'react'; +import { ReactNode, useContext } from 'react'; import { renderWithEffects } from '@backstage/test-utils'; import { waitFor } from '@testing-library/react'; import { renderHook, act } from '@testing-library/react'; diff --git a/packages/core-components/src/layout/Sidebar/SidebarOpenStateContext.tsx b/packages/core-components/src/layout/Sidebar/SidebarOpenStateContext.tsx index 36e87b07a2..66bd275d8c 100644 --- a/packages/core-components/src/layout/Sidebar/SidebarOpenStateContext.tsx +++ b/packages/core-components/src/layout/Sidebar/SidebarOpenStateContext.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { createContext, ReactNode, useContext } from 'react'; +import { createContext, ReactNode, useContext } from 'react'; import { createVersionedContext, createVersionedValueMap, diff --git a/packages/core-components/src/layout/Sidebar/SidebarPinStateContext.test.tsx b/packages/core-components/src/layout/Sidebar/SidebarPinStateContext.test.tsx index 8f6660707d..fd3aec0f53 100644 --- a/packages/core-components/src/layout/Sidebar/SidebarPinStateContext.test.tsx +++ b/packages/core-components/src/layout/Sidebar/SidebarPinStateContext.test.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, { ReactNode, useContext } from 'react'; +import { ReactNode, useContext } from 'react'; import { renderWithEffects } from '@backstage/test-utils'; import { waitFor } from '@testing-library/react'; import { renderHook, act } from '@testing-library/react'; diff --git a/packages/core-components/src/layout/Sidebar/SidebarPinStateContext.tsx b/packages/core-components/src/layout/Sidebar/SidebarPinStateContext.tsx index 9c58a32732..709b116794 100644 --- a/packages/core-components/src/layout/Sidebar/SidebarPinStateContext.tsx +++ b/packages/core-components/src/layout/Sidebar/SidebarPinStateContext.tsx @@ -18,7 +18,7 @@ import { createVersionedContext, createVersionedValueMap, } from '@backstage/version-bridge'; -import React, { createContext, ReactNode, useContext } from 'react'; +import { createContext, ReactNode, useContext } from 'react'; /** * Type of `SidebarPinStateContext` diff --git a/packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx b/packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx index 4c8ca2e0bf..3115ad7a1a 100644 --- a/packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx +++ b/packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx @@ -18,7 +18,7 @@ import Box from '@material-ui/core/Box'; import { makeStyles, Theme } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; import classnames from 'classnames'; -import React, { ReactNode, useContext, useEffect, useState } from 'react'; +import { ReactNode, useContext, useEffect, useState } from 'react'; import { SidebarConfigContext, diff --git a/packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx b/packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx index ffc96e390a..99a314eee1 100644 --- a/packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx +++ b/packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useContext, useState } from 'react'; +import { useContext, useState } from 'react'; import { resolvePath, useLocation, useResolvedPath } from 'react-router-dom'; import { makeStyles } from '@material-ui/core/styles'; import Tooltip from '@material-ui/core/Tooltip'; diff --git a/packages/core-components/src/layout/Sidebar/icons/DoubleArrowLeft.tsx b/packages/core-components/src/layout/Sidebar/icons/DoubleArrowLeft.tsx index ba1640a860..593cbd938c 100644 --- a/packages/core-components/src/layout/Sidebar/icons/DoubleArrowLeft.tsx +++ b/packages/core-components/src/layout/Sidebar/icons/DoubleArrowLeft.tsx @@ -16,7 +16,6 @@ import Box from '@material-ui/core/Box'; import { makeStyles } from '@material-ui/core/styles'; import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos'; -import React from 'react'; const useStyles = makeStyles({ iconContainer: { diff --git a/packages/core-components/src/layout/Sidebar/icons/DoubleArrowRight.tsx b/packages/core-components/src/layout/Sidebar/icons/DoubleArrowRight.tsx index 3824ec263d..86cfc57574 100644 --- a/packages/core-components/src/layout/Sidebar/icons/DoubleArrowRight.tsx +++ b/packages/core-components/src/layout/Sidebar/icons/DoubleArrowRight.tsx @@ -16,7 +16,6 @@ import Box from '@material-ui/core/Box'; import { makeStyles } from '@material-ui/core/styles'; import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos'; -import React from 'react'; const useStyles = makeStyles({ iconContainer: { diff --git a/packages/core-components/src/layout/SignInPage/SignInPage.tsx b/packages/core-components/src/layout/SignInPage/SignInPage.tsx index 2057fd27a0..d9617c5c4b 100644 --- a/packages/core-components/src/layout/SignInPage/SignInPage.tsx +++ b/packages/core-components/src/layout/SignInPage/SignInPage.tsx @@ -24,7 +24,7 @@ import { UserIdentity } from './UserIdentity'; import Button from '@material-ui/core/Button'; import Grid from '@material-ui/core/Grid'; import Typography from '@material-ui/core/Typography'; -import React, { ComponentType, ReactNode, useState } from 'react'; +import { ComponentType, ReactNode, useState } from 'react'; import { useMountEffect } from '@react-hookz/web'; import { Progress } from '../../components/Progress'; import { Content } from '../Content/Content'; diff --git a/packages/core-components/src/layout/SignInPage/commonProvider.tsx b/packages/core-components/src/layout/SignInPage/commonProvider.tsx index 07a9d9c98e..99a1b7a1df 100644 --- a/packages/core-components/src/layout/SignInPage/commonProvider.tsx +++ b/packages/core-components/src/layout/SignInPage/commonProvider.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import Typography from '@material-ui/core/Typography'; import Button from '@material-ui/core/Button'; import { InfoCard } from '../InfoCard/InfoCard'; diff --git a/packages/core-components/src/layout/SignInPage/customProvider.tsx b/packages/core-components/src/layout/SignInPage/customProvider.tsx index 7d1de40d7b..74d6d8fca7 100644 --- a/packages/core-components/src/layout/SignInPage/customProvider.tsx +++ b/packages/core-components/src/layout/SignInPage/customProvider.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { useForm, UseFormRegisterReturn } from 'react-hook-form'; import { makeStyles } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; diff --git a/packages/core-components/src/layout/SignInPage/guestProvider.tsx b/packages/core-components/src/layout/SignInPage/guestProvider.tsx index 145b653a82..96fd618ca9 100644 --- a/packages/core-components/src/layout/SignInPage/guestProvider.tsx +++ b/packages/core-components/src/layout/SignInPage/guestProvider.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import Typography from '@material-ui/core/Typography'; import Button from '@material-ui/core/Button'; import { InfoCard } from '../InfoCard/InfoCard'; diff --git a/packages/core-components/src/layout/SignInPage/providers.tsx b/packages/core-components/src/layout/SignInPage/providers.tsx index c1c3b744c1..179c7a4542 100644 --- a/packages/core-components/src/layout/SignInPage/providers.tsx +++ b/packages/core-components/src/layout/SignInPage/providers.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useLayoutEffect, useState, useMemo, useCallback } from 'react'; +import { useLayoutEffect, useState, useMemo, useCallback } from 'react'; import { SignInPageProps, useApi, diff --git a/packages/core-components/src/layout/SignInPage/styles.tsx b/packages/core-components/src/layout/SignInPage/styles.tsx index 6cf5ded226..4dc9219827 100644 --- a/packages/core-components/src/layout/SignInPage/styles.tsx +++ b/packages/core-components/src/layout/SignInPage/styles.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import Grid from '@material-ui/core/Grid'; diff --git a/packages/core-components/src/layout/TabbedCard/TabbedCard.stories.tsx b/packages/core-components/src/layout/TabbedCard/TabbedCard.stories.tsx index f1eace4d06..7c83dad083 100644 --- a/packages/core-components/src/layout/TabbedCard/TabbedCard.stories.tsx +++ b/packages/core-components/src/layout/TabbedCard/TabbedCard.stories.tsx @@ -16,7 +16,7 @@ import Grid from '@material-ui/core/Grid'; import Typography from '@material-ui/core/Typography'; -import React, { PropsWithChildren, useState } from 'react'; +import { PropsWithChildren, useState } from 'react'; import { MemoryRouter } from 'react-router-dom'; import { CardTab, TabbedCard } from './TabbedCard'; diff --git a/packages/core-components/src/layout/TabbedCard/TabbedCard.test.tsx b/packages/core-components/src/layout/TabbedCard/TabbedCard.test.tsx index 329fb62129..f70f71f819 100644 --- a/packages/core-components/src/layout/TabbedCard/TabbedCard.test.tsx +++ b/packages/core-components/src/layout/TabbedCard/TabbedCard.test.tsx @@ -16,7 +16,6 @@ import { renderInTestApp, wrapInTestApp } from '@backstage/test-utils'; import { fireEvent, render, screen } from '@testing-library/react'; -import React from 'react'; import { CardTab, TabbedCard } from './TabbedCard'; import userEvent from '@testing-library/user-event'; diff --git a/packages/core-components/src/layout/TabbedCard/TabbedCard.tsx b/packages/core-components/src/layout/TabbedCard/TabbedCard.tsx index 088e54c1f3..d6386fb0b7 100644 --- a/packages/core-components/src/layout/TabbedCard/TabbedCard.tsx +++ b/packages/core-components/src/layout/TabbedCard/TabbedCard.tsx @@ -21,7 +21,10 @@ import Divider from '@material-ui/core/Divider'; import { makeStyles, withStyles } from '@material-ui/core/styles'; import Tab, { TabProps } from '@material-ui/core/Tab'; import Tabs from '@material-ui/core/Tabs'; -import React, { +import { + ChangeEvent, + Children, + isValidElement, PropsWithChildren, ReactElement, ReactNode, @@ -63,7 +66,7 @@ type Props = { slackChannel?: string; errorBoundaryProps?: ErrorBoundaryProps; children?: ReactElement[]; - onChange?: (event: React.ChangeEvent<{}>, value: number | string) => void; + onChange?: (event: ChangeEvent<{}>, value: number | string) => void; title?: string; value?: number | string; deepLink?: BottomLinkProps; @@ -88,17 +91,15 @@ export function TabbedCard(props: PropsWithChildren) { let selectedTabContent: ReactNode; if (!value) { - React.Children.map(children, (child, index) => { - if (React.isValidElement(child) && index === selectedIndex) { + Children.map(children, (child, index) => { + if (isValidElement(child) && index === selectedIndex) { selectedTabContent = child?.props.children; } }); } else { - React.Children.map(children, child => { + Children.map(children, child => { if ( - React.isValidElement<{ children?: ReactNode; value?: unknown }>( - child, - ) && + isValidElement<{ children?: ReactNode; value?: unknown }>(child) && child?.props.value === value ) { selectedTabContent = child?.props.children; diff --git a/packages/core-plugin-api/src/analytics/AnalyticsContext.test.tsx b/packages/core-plugin-api/src/analytics/AnalyticsContext.test.tsx index c29ec5b3ca..a4596ceddb 100644 --- a/packages/core-plugin-api/src/analytics/AnalyticsContext.test.tsx +++ b/packages/core-plugin-api/src/analytics/AnalyticsContext.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { render } from '@testing-library/react'; import { renderHook } from '@testing-library/react'; import { AnalyticsContext, useAnalyticsContext } from './AnalyticsContext'; diff --git a/packages/core-plugin-api/src/analytics/AnalyticsContext.tsx b/packages/core-plugin-api/src/analytics/AnalyticsContext.tsx index 105be8e2b5..464fd49e31 100644 --- a/packages/core-plugin-api/src/analytics/AnalyticsContext.tsx +++ b/packages/core-plugin-api/src/analytics/AnalyticsContext.tsx @@ -18,7 +18,7 @@ import { createVersionedContext, createVersionedValueMap, } from '@backstage/version-bridge'; -import React, { ReactNode, useContext } from 'react'; +import { ComponentType, ReactNode, useContext } from 'react'; import { AnalyticsContextValue } from './types'; const AnalyticsReactContext = createVersionedContext<{ @@ -92,7 +92,7 @@ export const AnalyticsContext = (options: { * @internal */ export function withAnalyticsContext( - Component: React.ComponentType, + Component: ComponentType, values: AnalyticsContextValue, ) { const ComponentWithAnalyticsContext = (props: TProps) => { diff --git a/packages/core-plugin-api/src/apis/system/useApi.tsx b/packages/core-plugin-api/src/apis/system/useApi.tsx index 2bb1532525..30e39033f7 100644 --- a/packages/core-plugin-api/src/apis/system/useApi.tsx +++ b/packages/core-plugin-api/src/apis/system/useApi.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { PropsWithChildren } from 'react'; +import { ComponentType, PropsWithChildren } from 'react'; import { ApiRef, ApiHolder, TypesToApiRefs } from './types'; import { useVersionedContext } from '@backstage/version-bridge'; import { NotImplementedError } from '@backstage/errors'; @@ -61,7 +61,7 @@ export function useApi(apiRef: ApiRef): T { */ export function withApis(apis: TypesToApiRefs) { return function withApisWrapper( - WrappedComponent: React.ComponentType, + WrappedComponent: ComponentType, ) { const Hoc = (props: PropsWithChildren>) => { const apiHolder = useApiHolder(); diff --git a/packages/core-plugin-api/src/extensions/PluginErrorBoundary.tsx b/packages/core-plugin-api/src/extensions/PluginErrorBoundary.tsx index 51ddecdf71..424e5bc352 100644 --- a/packages/core-plugin-api/src/extensions/PluginErrorBoundary.tsx +++ b/packages/core-plugin-api/src/extensions/PluginErrorBoundary.tsx @@ -14,18 +14,18 @@ * limitations under the License. */ -import React from 'react'; +import { PropsWithChildren, Component } from 'react'; import { AppContext } from '../app/types'; import { BackstagePlugin } from '../plugin'; -type Props = React.PropsWithChildren<{ +type Props = PropsWithChildren<{ app: AppContext; plugin: BackstagePlugin; }>; type State = { error: Error | undefined }; -export class PluginErrorBoundary extends React.Component { +export class PluginErrorBoundary extends Component { static getDerivedStateFromError(error: Error) { return { error }; } diff --git a/packages/core-plugin-api/src/extensions/componentData.test.tsx b/packages/core-plugin-api/src/extensions/componentData.test.tsx index 6f2694a512..48198599c5 100644 --- a/packages/core-plugin-api/src/extensions/componentData.test.tsx +++ b/packages/core-plugin-api/src/extensions/componentData.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { attachComponentData, getComponentData } from './componentData'; describe('componentData', () => { diff --git a/packages/core-plugin-api/src/extensions/extensions.test.tsx b/packages/core-plugin-api/src/extensions/extensions.test.tsx index 25d29fc392..75bb4ae443 100644 --- a/packages/core-plugin-api/src/extensions/extensions.test.tsx +++ b/packages/core-plugin-api/src/extensions/extensions.test.tsx @@ -16,7 +16,6 @@ import { withLogCollector } from '@backstage/test-utils'; import { act, render, screen } from '@testing-library/react'; -import React from 'react'; import { useAnalyticsContext } from '../analytics/AnalyticsContext'; import { useApp, ErrorBoundaryFallbackProps } from '../app'; import { createPlugin } from '../plugin'; diff --git a/packages/core-plugin-api/src/extensions/extensions.tsx b/packages/core-plugin-api/src/extensions/extensions.tsx index 51af857d4b..63491c9395 100644 --- a/packages/core-plugin-api/src/extensions/extensions.tsx +++ b/packages/core-plugin-api/src/extensions/extensions.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { lazy, Suspense, useEffect } from 'react'; +import { lazy, Suspense, useEffect } from 'react'; import { AnalyticsContext, useAnalytics } from '../analytics'; import { useApp } from '../app'; import { RouteRef, useRouteRef } from '../routing'; diff --git a/packages/core-plugin-api/src/extensions/useElementFilter.test.tsx b/packages/core-plugin-api/src/extensions/useElementFilter.test.tsx index 8597274e35..424549358d 100644 --- a/packages/core-plugin-api/src/extensions/useElementFilter.test.tsx +++ b/packages/core-plugin-api/src/extensions/useElementFilter.test.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, { ReactNode } from 'react'; +import { ReactNode } from 'react'; import { useElementFilter } from './useElementFilter'; import { renderHook } from '@testing-library/react'; import { attachComponentData } from './componentData'; @@ -41,12 +41,7 @@ const FeatureFlagComponent = (_props: { }) => null; attachComponentData(FeatureFlagComponent, 'core.featureFlagged', true); const mockFeatureFlagsApi = new LocalStorageFeatureFlags(); -const Wrapper = ({ - children, -}: { - children?: React.ReactNode; - tree?: ReactNode; -}) => ( +const Wrapper = ({ children }: { children?: ReactNode; tree?: ReactNode }) => ( {children} diff --git a/packages/core-plugin-api/src/icons/types.test.ts b/packages/core-plugin-api/src/icons/types.test.ts index fd01e176c9..7b1cbf2178 100644 --- a/packages/core-plugin-api/src/icons/types.test.ts +++ b/packages/core-plugin-api/src/icons/types.test.ts @@ -14,7 +14,7 @@ * limitations under the License. */ -import * as React from 'react'; +import { ElementType, JSX } from 'react'; import { type IconComponent } from './types'; // Emulate the MUI4 icon type @@ -31,7 +31,7 @@ type Mui5Icon = (props: { // Emulate the MUI6 icon type interface OverridableComponent

    { - ( + ( props: { /** * The component used for the root node. @@ -39,8 +39,8 @@ interface OverridableComponent

    { */ component: RootComponent; } & { stuff: number }, - ): React.JSX.Element | null; - (props: P): React.JSX.Element | null; + ): JSX.Element | null; + (props: P): JSX.Element | null; } type Mui6Icon = OverridableComponent<{ fontSize?: 'inherit' | 'large' | 'medium' | 'small'; diff --git a/packages/core-plugin-api/src/routing/useRouteRef.test.tsx b/packages/core-plugin-api/src/routing/useRouteRef.test.tsx index b302fa6441..b96fc5fc23 100644 --- a/packages/core-plugin-api/src/routing/useRouteRef.test.tsx +++ b/packages/core-plugin-api/src/routing/useRouteRef.test.tsx @@ -15,7 +15,7 @@ */ import { renderHook } from '@testing-library/react'; -import React from 'react'; +import { PropsWithChildren } from 'react'; import { MemoryRouter, Router } from 'react-router-dom'; import { createVersionedContextForTesting } from '@backstage/version-bridge'; import { useRouteRef } from './useRouteRef'; @@ -36,7 +36,7 @@ describe('v1 consumer', () => { const routeRef = createRouteRef({ id: 'ref1' }); const renderedHook = renderHook(() => useRouteRef(routeRef), { - wrapper: ({ children }: React.PropsWithChildren<{}>) => ( + wrapper: ({ children }: PropsWithChildren<{}>) => ( ), }); @@ -60,7 +60,7 @@ describe('v1 consumer', () => { history.push('/my-page'); const { rerender } = renderHook(() => useRouteRef(routeRef), { - wrapper: ({ children }: React.PropsWithChildren<{}>) => ( + wrapper: ({ children }: PropsWithChildren<{}>) => ( { history.push('/my-page'); const { rerender } = renderHook(() => useRouteRef(routeRef), { - wrapper: ({ children }: React.PropsWithChildren<{}>) => ( + wrapper: ({ children }: PropsWithChildren<{}>) => ( { history.push('/my-page'); const { rerender } = renderHook(() => useRouteRef(routeRef), { - wrapper: ({ children }: React.PropsWithChildren<{}>) => ( + wrapper: ({ children }: PropsWithChildren<{}>) => ( { history.push('/my-page'); const { rerender } = renderHook(() => useRouteRef(routeRef), { - wrapper: ({ children }: React.PropsWithChildren<{}>) => ( + wrapper: ({ children }: PropsWithChildren<{}>) => ( { - it('should render', async () => { - process.env = { - NODE_ENV: 'test', - APP_CONFIG: [ - { - data: { - app: { title: 'Test' }, - backend: { baseUrl: 'http://localhost:7007' }, - techdocs: { - storageUrl: 'http://localhost:7007/api/techdocs/static/docs', - }, - }, - context: 'test', - }, - ] as any, - }; - - const rendered = render(); - - await waitFor(() => { - expect(rendered.baseElement).toBeInTheDocument(); - }); - }); -}); +import { render, waitFor } from '@testing-library/react'; +import App from './App'; + +describe('App', () => { + it('should render', async () => { + process.env = { + NODE_ENV: 'test', + APP_CONFIG: [ + { + data: { + app: { title: 'Test' }, + backend: { baseUrl: 'http://localhost:7007' }, + techdocs: { + storageUrl: 'http://localhost:7007/api/techdocs/static/docs', + }, + }, + context: 'test', + }, + ] as any, + }; + + const rendered = render(); + + await waitFor(() => { + expect(rendered.baseElement).toBeInTheDocument(); + }); + }); +}); diff --git a/packages/create-app/templates/default-app/packages/app/src/App.tsx b/packages/create-app/templates/default-app/packages/app/src/App.tsx index e24c4689bb..3ff552f95c 100644 --- a/packages/create-app/templates/default-app/packages/app/src/App.tsx +++ b/packages/create-app/templates/default-app/packages/app/src/App.tsx @@ -1,109 +1,108 @@ -import React from 'react'; -import { Navigate, Route } from 'react-router-dom'; -import { apiDocsPlugin, ApiExplorerPage } from '@backstage/plugin-api-docs'; -import { - CatalogEntityPage, - CatalogIndexPage, - catalogPlugin, -} from '@backstage/plugin-catalog'; -import { - CatalogImportPage, - catalogImportPlugin, -} from '@backstage/plugin-catalog-import'; -import { ScaffolderPage, scaffolderPlugin } from '@backstage/plugin-scaffolder'; -import { orgPlugin } from '@backstage/plugin-org'; -import { SearchPage } from '@backstage/plugin-search'; -import { - TechDocsIndexPage, - techdocsPlugin, - TechDocsReaderPage, -} from '@backstage/plugin-techdocs'; -import { TechDocsAddons } from '@backstage/plugin-techdocs-react'; -import { ReportIssue } from '@backstage/plugin-techdocs-module-addons-contrib'; -import { UserSettingsPage } from '@backstage/plugin-user-settings'; -import { apis } from './apis'; -import { entityPage } from './components/catalog/EntityPage'; -import { searchPage } from './components/search/SearchPage'; -import { Root } from './components/Root'; - -import { - AlertDisplay, - OAuthRequestDialog, - SignInPage, -} from '@backstage/core-components'; -import { createApp } from '@backstage/app-defaults'; -import { AppRouter, FlatRoutes } from '@backstage/core-app-api'; -import { CatalogGraphPage } from '@backstage/plugin-catalog-graph'; -import { RequirePermission } from '@backstage/plugin-permission-react'; -import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common/alpha'; - -const app = createApp({ - apis, - bindRoutes({ bind }) { - bind(catalogPlugin.externalRoutes, { - createComponent: scaffolderPlugin.routes.root, - viewTechDoc: techdocsPlugin.routes.docRoot, - createFromTemplate: scaffolderPlugin.routes.selectedTemplate, - }); - bind(apiDocsPlugin.externalRoutes, { - registerApi: catalogImportPlugin.routes.importPage, - }); - bind(scaffolderPlugin.externalRoutes, { - registerComponent: catalogImportPlugin.routes.importPage, - viewTechDoc: techdocsPlugin.routes.docRoot, - }); - bind(orgPlugin.externalRoutes, { - catalogIndex: catalogPlugin.routes.catalogIndex, - }); - }, - components: { - SignInPage: props => , - }, -}); - -const routes = ( - - } /> - } /> - } - > - {entityPage} - - } /> - } - > - - - - - } /> - } /> - - - - } - /> - }> - {searchPage} - - } /> - } /> - -); - -export default app.createRoot( - <> - - - - {routes} - - , -); +import { Navigate, Route } from 'react-router-dom'; +import { apiDocsPlugin, ApiExplorerPage } from '@backstage/plugin-api-docs'; +import { + CatalogEntityPage, + CatalogIndexPage, + catalogPlugin, +} from '@backstage/plugin-catalog'; +import { + CatalogImportPage, + catalogImportPlugin, +} from '@backstage/plugin-catalog-import'; +import { ScaffolderPage, scaffolderPlugin } from '@backstage/plugin-scaffolder'; +import { orgPlugin } from '@backstage/plugin-org'; +import { SearchPage } from '@backstage/plugin-search'; +import { + TechDocsIndexPage, + techdocsPlugin, + TechDocsReaderPage, +} from '@backstage/plugin-techdocs'; +import { TechDocsAddons } from '@backstage/plugin-techdocs-react'; +import { ReportIssue } from '@backstage/plugin-techdocs-module-addons-contrib'; +import { UserSettingsPage } from '@backstage/plugin-user-settings'; +import { apis } from './apis'; +import { entityPage } from './components/catalog/EntityPage'; +import { searchPage } from './components/search/SearchPage'; +import { Root } from './components/Root'; + +import { + AlertDisplay, + OAuthRequestDialog, + SignInPage, +} from '@backstage/core-components'; +import { createApp } from '@backstage/app-defaults'; +import { AppRouter, FlatRoutes } from '@backstage/core-app-api'; +import { CatalogGraphPage } from '@backstage/plugin-catalog-graph'; +import { RequirePermission } from '@backstage/plugin-permission-react'; +import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common/alpha'; + +const app = createApp({ + apis, + bindRoutes({ bind }) { + bind(catalogPlugin.externalRoutes, { + createComponent: scaffolderPlugin.routes.root, + viewTechDoc: techdocsPlugin.routes.docRoot, + createFromTemplate: scaffolderPlugin.routes.selectedTemplate, + }); + bind(apiDocsPlugin.externalRoutes, { + registerApi: catalogImportPlugin.routes.importPage, + }); + bind(scaffolderPlugin.externalRoutes, { + registerComponent: catalogImportPlugin.routes.importPage, + viewTechDoc: techdocsPlugin.routes.docRoot, + }); + bind(orgPlugin.externalRoutes, { + catalogIndex: catalogPlugin.routes.catalogIndex, + }); + }, + components: { + SignInPage: props => , + }, +}); + +const routes = ( + + } /> + } /> + } + > + {entityPage} + + } /> + } + > + + + + + } /> + } /> + + + + } + /> + }> + {searchPage} + + } /> + } /> + +); + +export default app.createRoot( + <> + + + + {routes} + + , +); diff --git a/packages/create-app/templates/default-app/packages/app/src/components/Root/LogoFull.tsx b/packages/create-app/templates/default-app/packages/app/src/components/Root/LogoFull.tsx index 47e3b73155..43a5934400 100644 --- a/packages/create-app/templates/default-app/packages/app/src/components/Root/LogoFull.tsx +++ b/packages/create-app/templates/default-app/packages/app/src/components/Root/LogoFull.tsx @@ -1,30 +1,29 @@ -import React from 'react'; -import { makeStyles } from '@material-ui/core'; - -const useStyles = makeStyles({ - svg: { - width: 'auto', - height: 30, - }, - path: { - fill: '#7df3e1', - }, -}); -const LogoFull = () => { - const classes = useStyles(); - - return ( - - - - ); -}; - -export default LogoFull; +import { makeStyles } from '@material-ui/core'; + +const useStyles = makeStyles({ + svg: { + width: 'auto', + height: 30, + }, + path: { + fill: '#7df3e1', + }, +}); +const LogoFull = () => { + const classes = useStyles(); + + return ( + + + + ); +}; + +export default LogoFull; diff --git a/packages/create-app/templates/default-app/packages/app/src/components/Root/LogoIcon.tsx b/packages/create-app/templates/default-app/packages/app/src/components/Root/LogoIcon.tsx index 7eae8c7a0b..d7615e075f 100644 --- a/packages/create-app/templates/default-app/packages/app/src/components/Root/LogoIcon.tsx +++ b/packages/create-app/templates/default-app/packages/app/src/components/Root/LogoIcon.tsx @@ -1,31 +1,30 @@ -import React from 'react'; -import { makeStyles } from '@material-ui/core'; - -const useStyles = makeStyles({ - svg: { - width: 'auto', - height: 28, - }, - path: { - fill: '#7df3e1', - }, -}); - -const LogoIcon = () => { - const classes = useStyles(); - - return ( - - - - ); -}; - -export default LogoIcon; +import { makeStyles } from '@material-ui/core'; + +const useStyles = makeStyles({ + svg: { + width: 'auto', + height: 28, + }, + path: { + fill: '#7df3e1', + }, +}); + +const LogoIcon = () => { + const classes = useStyles(); + + return ( + + + + ); +}; + +export default LogoIcon; diff --git a/packages/create-app/templates/default-app/packages/app/src/components/Root/Root.tsx b/packages/create-app/templates/default-app/packages/app/src/components/Root/Root.tsx index 853d175bae..861610f4bf 100644 --- a/packages/create-app/templates/default-app/packages/app/src/components/Root/Root.tsx +++ b/packages/create-app/templates/default-app/packages/app/src/components/Root/Root.tsx @@ -1,96 +1,96 @@ -import React, { PropsWithChildren } from 'react'; -import { makeStyles } from '@material-ui/core'; -import HomeIcon from '@material-ui/icons/Home'; -import ExtensionIcon from '@material-ui/icons/Extension'; -import LibraryBooks from '@material-ui/icons/LibraryBooks'; -import CreateComponentIcon from '@material-ui/icons/AddCircleOutline'; -import LogoFull from './LogoFull'; -import LogoIcon from './LogoIcon'; -import { - Settings as SidebarSettings, - UserSettingsSignInAvatar, -} from '@backstage/plugin-user-settings'; -import { SidebarSearchModal } from '@backstage/plugin-search'; -import { - Sidebar, - sidebarConfig, - SidebarDivider, - SidebarGroup, - SidebarItem, - SidebarPage, - SidebarScrollWrapper, - SidebarSpace, - useSidebarOpenState, - Link, -} from '@backstage/core-components'; -import MenuIcon from '@material-ui/icons/Menu'; -import SearchIcon from '@material-ui/icons/Search'; -import { MyGroupsSidebarItem } from '@backstage/plugin-org'; -import GroupIcon from '@material-ui/icons/People'; - -const useSidebarLogoStyles = makeStyles({ - root: { - width: sidebarConfig.drawerWidthClosed, - height: 3 * sidebarConfig.logoHeight, - display: 'flex', - flexFlow: 'row nowrap', - alignItems: 'center', - marginBottom: -14, - }, - link: { - width: sidebarConfig.drawerWidthClosed, - marginLeft: 24, - }, -}); - -const SidebarLogo = () => { - const classes = useSidebarLogoStyles(); - const { isOpen } = useSidebarOpenState(); - - return ( -

    - - {isOpen ? : } - -
    - ); -}; - -export const Root = ({ children }: PropsWithChildren<{}>) => ( - - - - } to="/search"> - - - - }> - {/* Global nav, not org-specific */} - - - - - - {/* End global nav */} - - - {/* Items in this group will be scrollable if they run out of space */} - - - - - } - to="/settings" - > - - - - {children} - -); +import { PropsWithChildren } from 'react'; +import { makeStyles } from '@material-ui/core'; +import HomeIcon from '@material-ui/icons/Home'; +import ExtensionIcon from '@material-ui/icons/Extension'; +import LibraryBooks from '@material-ui/icons/LibraryBooks'; +import CreateComponentIcon from '@material-ui/icons/AddCircleOutline'; +import LogoFull from './LogoFull'; +import LogoIcon from './LogoIcon'; +import { + Settings as SidebarSettings, + UserSettingsSignInAvatar, +} from '@backstage/plugin-user-settings'; +import { SidebarSearchModal } from '@backstage/plugin-search'; +import { + Sidebar, + sidebarConfig, + SidebarDivider, + SidebarGroup, + SidebarItem, + SidebarPage, + SidebarScrollWrapper, + SidebarSpace, + useSidebarOpenState, + Link, +} from '@backstage/core-components'; +import MenuIcon from '@material-ui/icons/Menu'; +import SearchIcon from '@material-ui/icons/Search'; +import { MyGroupsSidebarItem } from '@backstage/plugin-org'; +import GroupIcon from '@material-ui/icons/People'; + +const useSidebarLogoStyles = makeStyles({ + root: { + width: sidebarConfig.drawerWidthClosed, + height: 3 * sidebarConfig.logoHeight, + display: 'flex', + flexFlow: 'row nowrap', + alignItems: 'center', + marginBottom: -14, + }, + link: { + width: sidebarConfig.drawerWidthClosed, + marginLeft: 24, + }, +}); + +const SidebarLogo = () => { + const classes = useSidebarLogoStyles(); + const { isOpen } = useSidebarOpenState(); + + return ( +
    + + {isOpen ? : } + +
    + ); +}; + +export const Root = ({ children }: PropsWithChildren<{}>) => ( + + + + } to="/search"> + + + + }> + {/* Global nav, not org-specific */} + + + + + + {/* End global nav */} + + + {/* Items in this group will be scrollable if they run out of space */} + + + + + } + to="/settings" + > + + + + {children} + +); diff --git a/packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx b/packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx index 6164c76004..c0ce900d75 100644 --- a/packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx +++ b/packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx @@ -1,412 +1,410 @@ -import React from 'react'; -import { Button, Grid } from '@material-ui/core'; -import { - EntityApiDefinitionCard, - EntityConsumedApisCard, - EntityConsumingComponentsCard, - EntityHasApisCard, - EntityProvidedApisCard, - EntityProvidingComponentsCard, -} from '@backstage/plugin-api-docs'; -import { - EntityAboutCard, - EntityDependsOnComponentsCard, - EntityDependsOnResourcesCard, - EntityHasComponentsCard, - EntityHasResourcesCard, - EntityHasSubcomponentsCard, - EntityHasSystemsCard, - EntityLayout, - EntityLinksCard, - EntitySwitch, - EntityOrphanWarning, - EntityProcessingErrorsPanel, - isComponentType, - isKind, - hasCatalogProcessingErrors, - isOrphan, - hasRelationWarnings, - EntityRelationWarning, -} from '@backstage/plugin-catalog'; -import { - EntityUserProfileCard, - EntityGroupProfileCard, - EntityMembersListCard, - EntityOwnershipCard, -} from '@backstage/plugin-org'; -import { EntityTechdocsContent } from '@backstage/plugin-techdocs'; -import { EmptyState } from '@backstage/core-components'; -import { - Direction, - EntityCatalogGraphCard, -} from '@backstage/plugin-catalog-graph'; -import { - RELATION_API_CONSUMED_BY, - RELATION_API_PROVIDED_BY, - RELATION_CONSUMES_API, - RELATION_DEPENDENCY_OF, - RELATION_DEPENDS_ON, - RELATION_HAS_PART, - RELATION_PART_OF, - RELATION_PROVIDES_API, -} from '@backstage/catalog-model'; - -import { TechDocsAddons } from '@backstage/plugin-techdocs-react'; -import { ReportIssue } from '@backstage/plugin-techdocs-module-addons-contrib'; - -import { - EntityKubernetesContent, - isKubernetesAvailable, -} from '@backstage/plugin-kubernetes'; - -const techdocsContent = ( - - - - - -); - -const cicdContent = ( - // This is an example of how you can implement your company's logic in entity page. - // You can for example enforce that all components of type 'service' should use GitHubActions - - {/* - Here you can add support for different CI/CD services, for example - using @backstage-community/plugin-github-actions as follows: - - - - */} - - - - Read more - - } - /> - - -); - -const entityWarningContent = ( - <> - - - - - - - - - - - - - - - - - - - - - - - - -); - -const overviewContent = ( - - {entityWarningContent} - - - - - - - - - - - - - - -); - -const serviceEntityPage = ( - - - {overviewContent} - - - - {cicdContent} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - {techdocsContent} - - -); - -const websiteEntityPage = ( - - - {overviewContent} - - - - {cicdContent} - - - - - - - - - - - - - - - - - - - {techdocsContent} - - -); - -/** - * NOTE: This page is designed to work on small screens such as mobile devices. - * This is based on Material UI Grid. If breakpoints are used, each grid item must set the `xs` prop to a column size or to `true`, - * since this does not default. If no breakpoints are used, the items will equitably share the available space. - * https://material-ui.com/components/grid/#basic-grid. - */ - -const defaultEntityPage = ( - - - {overviewContent} - - - - {techdocsContent} - - -); - -const componentPage = ( - - - {serviceEntityPage} - - - - {websiteEntityPage} - - - {defaultEntityPage} - -); - -const apiPage = ( - - - - {entityWarningContent} - - - - - - - - - - - - - - - - - - - - - - - - - - - - -); - -const userPage = ( - - - - {entityWarningContent} - - - - - - - - - -); - -const groupPage = ( - - - - {entityWarningContent} - - - - - - - - - - - - - - - -); - -const systemPage = ( - - - - {entityWarningContent} - - - - - - - - - - - - - - - - - - - - - - - - -); - -const domainPage = ( - - - - {entityWarningContent} - - - - - - - - - - - - -); - -export const entityPage = ( - - - - - - - - - {defaultEntityPage} - -); +import { Button, Grid } from '@material-ui/core'; +import { + EntityApiDefinitionCard, + EntityConsumedApisCard, + EntityConsumingComponentsCard, + EntityHasApisCard, + EntityProvidedApisCard, + EntityProvidingComponentsCard, +} from '@backstage/plugin-api-docs'; +import { + EntityAboutCard, + EntityDependsOnComponentsCard, + EntityDependsOnResourcesCard, + EntityHasComponentsCard, + EntityHasResourcesCard, + EntityHasSubcomponentsCard, + EntityHasSystemsCard, + EntityLayout, + EntityLinksCard, + EntitySwitch, + EntityOrphanWarning, + EntityProcessingErrorsPanel, + isComponentType, + isKind, + hasCatalogProcessingErrors, + isOrphan, + hasRelationWarnings, + EntityRelationWarning, +} from '@backstage/plugin-catalog'; +import { + EntityUserProfileCard, + EntityGroupProfileCard, + EntityMembersListCard, + EntityOwnershipCard, +} from '@backstage/plugin-org'; +import { EntityTechdocsContent } from '@backstage/plugin-techdocs'; +import { EmptyState } from '@backstage/core-components'; +import { + Direction, + EntityCatalogGraphCard, +} from '@backstage/plugin-catalog-graph'; +import { + RELATION_API_CONSUMED_BY, + RELATION_API_PROVIDED_BY, + RELATION_CONSUMES_API, + RELATION_DEPENDENCY_OF, + RELATION_DEPENDS_ON, + RELATION_HAS_PART, + RELATION_PART_OF, + RELATION_PROVIDES_API, +} from '@backstage/catalog-model'; + +import { TechDocsAddons } from '@backstage/plugin-techdocs-react'; +import { ReportIssue } from '@backstage/plugin-techdocs-module-addons-contrib'; + +import { + EntityKubernetesContent, + isKubernetesAvailable, +} from '@backstage/plugin-kubernetes'; + +const techdocsContent = ( + + + + + +); + +const cicdContent = ( + // This is an example of how you can implement your company's logic in entity page. + // You can for example enforce that all components of type 'service' should use GitHubActions + ( + {/* + Here you can add support for different CI/CD services, for example + using @backstage-community/plugin-github-actions as follows: + + + + */} + + + Read more + + } + /> + + ) +); + +const entityWarningContent = ( + <> + + + + + + + + + + + + + + + + + + + + + + + + +); + +const overviewContent = ( + + {entityWarningContent} + + + + + + + + + + + + + + +); + +const serviceEntityPage = ( + + + {overviewContent} + + + + {cicdContent} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {techdocsContent} + + +); + +const websiteEntityPage = ( + + + {overviewContent} + + + + {cicdContent} + + + + + + + + + + + + + + + + + + + {techdocsContent} + + +); + +/** + * NOTE: This page is designed to work on small screens such as mobile devices. + * This is based on Material UI Grid. If breakpoints are used, each grid item must set the `xs` prop to a column size or to `true`, + * since this does not default. If no breakpoints are used, the items will equitably share the available space. + * https://material-ui.com/components/grid/#basic-grid. + */ + +const defaultEntityPage = ( + + + {overviewContent} + + + + {techdocsContent} + + +); + +const componentPage = ( + + + {serviceEntityPage} + + + + {websiteEntityPage} + + + {defaultEntityPage} + +); + +const apiPage = ( + + + + {entityWarningContent} + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); + +const userPage = ( + + + + {entityWarningContent} + + + + + + + + + +); + +const groupPage = ( + + + + {entityWarningContent} + + + + + + + + + + + + + + + +); + +const systemPage = ( + + + + {entityWarningContent} + + + + + + + + + + + + + + + + + + + + + + + + +); + +const domainPage = ( + + + + {entityWarningContent} + + + + + + + + + + + + +); + +export const entityPage = ( + + + + + + + + + {defaultEntityPage} + +); diff --git a/packages/create-app/templates/default-app/packages/app/src/components/search/SearchPage.tsx b/packages/create-app/templates/default-app/packages/app/src/components/search/SearchPage.tsx index 1788dde1bd..779088ad11 100644 --- a/packages/create-app/templates/default-app/packages/app/src/components/search/SearchPage.tsx +++ b/packages/create-app/templates/default-app/packages/app/src/components/search/SearchPage.tsx @@ -1,124 +1,123 @@ -import React from 'react'; -import { makeStyles, Theme, Grid, Paper } from '@material-ui/core'; - -import { CatalogSearchResultListItem } from '@backstage/plugin-catalog'; -import { - catalogApiRef, - CATALOG_FILTER_EXISTS, -} from '@backstage/plugin-catalog-react'; -import { TechDocsSearchResultListItem } from '@backstage/plugin-techdocs'; - -import { SearchType } from '@backstage/plugin-search'; -import { - SearchBar, - SearchFilter, - SearchResult, - SearchPagination, - useSearch, -} from '@backstage/plugin-search-react'; -import { - CatalogIcon, - Content, - DocsIcon, - Header, - Page, -} from '@backstage/core-components'; -import { useApi } from '@backstage/core-plugin-api'; - -const useStyles = makeStyles((theme: Theme) => ({ - bar: { - padding: theme.spacing(1, 0), - }, - filters: { - padding: theme.spacing(2), - marginTop: theme.spacing(2), - }, - filter: { - '& + &': { - marginTop: theme.spacing(2.5), - }, - }, -})); - -const SearchPage = () => { - const classes = useStyles(); - const { types } = useSearch(); - const catalogApi = useApi(catalogApiRef); - - return ( - -
    - - - - - - - - - , - }, - { - value: 'techdocs', - name: 'Documentation', - icon: , - }, - ]} - /> - - {types.includes('techdocs') && ( - { - // Return a list of entities which are documented. - const { items } = await catalogApi.getEntities({ - fields: ['metadata.name'], - filter: { - 'metadata.annotations.backstage.io/techdocs-ref': - CATALOG_FILTER_EXISTS, - }, - }); - - const names = items.map(entity => entity.metadata.name); - names.sort(); - return names; - }} - /> - )} - - - - - - - - } /> - } /> - - - - - - ); -}; - -export const searchPage = ; +import { makeStyles, Theme, Grid, Paper } from '@material-ui/core'; + +import { CatalogSearchResultListItem } from '@backstage/plugin-catalog'; +import { + catalogApiRef, + CATALOG_FILTER_EXISTS, +} from '@backstage/plugin-catalog-react'; +import { TechDocsSearchResultListItem } from '@backstage/plugin-techdocs'; + +import { SearchType } from '@backstage/plugin-search'; +import { + SearchBar, + SearchFilter, + SearchResult, + SearchPagination, + useSearch, +} from '@backstage/plugin-search-react'; +import { + CatalogIcon, + Content, + DocsIcon, + Header, + Page, +} from '@backstage/core-components'; +import { useApi } from '@backstage/core-plugin-api'; + +const useStyles = makeStyles((theme: Theme) => ({ + bar: { + padding: theme.spacing(1, 0), + }, + filters: { + padding: theme.spacing(2), + marginTop: theme.spacing(2), + }, + filter: { + '& + &': { + marginTop: theme.spacing(2.5), + }, + }, +})); + +const SearchPage = () => { + const classes = useStyles(); + const { types } = useSearch(); + const catalogApi = useApi(catalogApiRef); + + return ( + +
    + + + + + + + + + , + }, + { + value: 'techdocs', + name: 'Documentation', + icon: , + }, + ]} + /> + + {types.includes('techdocs') && ( + { + // Return a list of entities which are documented. + const { items } = await catalogApi.getEntities({ + fields: ['metadata.name'], + filter: { + 'metadata.annotations.backstage.io/techdocs-ref': + CATALOG_FILTER_EXISTS, + }, + }); + + const names = items.map(entity => entity.metadata.name); + names.sort(); + return names; + }} + /> + )} + + + + + + + + } /> + } /> + + + + + + ); +}; + +export const searchPage = ; diff --git a/packages/create-app/templates/default-app/packages/app/src/index.tsx b/packages/create-app/templates/default-app/packages/app/src/index.tsx index 604afbe3c4..69d6401c05 100644 --- a/packages/create-app/templates/default-app/packages/app/src/index.tsx +++ b/packages/create-app/templates/default-app/packages/app/src/index.tsx @@ -1,5 +1,4 @@ import '@backstage/cli/asset-types'; -import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import '@backstage/canon/css/styles.css'; diff --git a/packages/dev-utils/src/components/EntityGridItem/EntityGridItem.tsx b/packages/dev-utils/src/components/EntityGridItem/EntityGridItem.tsx index 41ddc2d695..6877e717ed 100644 --- a/packages/dev-utils/src/components/EntityGridItem/EntityGridItem.tsx +++ b/packages/dev-utils/src/components/EntityGridItem/EntityGridItem.tsx @@ -18,7 +18,6 @@ import { Entity } from '@backstage/catalog-model'; import { EntityProvider } from '@backstage/plugin-catalog-react'; import Grid, { GridProps } from '@material-ui/core/Grid'; import { Theme, makeStyles } from '@material-ui/core/styles'; -import React from 'react'; const useStyles = makeStyles(theme => ({ root: ({ entity }) => ({ diff --git a/packages/dev-utils/src/components/SidebarLanguageSwitcher/SidebarLanguageSwitcher.test.tsx b/packages/dev-utils/src/components/SidebarLanguageSwitcher/SidebarLanguageSwitcher.test.tsx index fc620b846b..f9f8456067 100644 --- a/packages/dev-utils/src/components/SidebarLanguageSwitcher/SidebarLanguageSwitcher.test.tsx +++ b/packages/dev-utils/src/components/SidebarLanguageSwitcher/SidebarLanguageSwitcher.test.tsx @@ -16,7 +16,6 @@ import { renderInTestApp, TestApiProvider } from '@backstage/test-utils'; import userEvent from '@testing-library/user-event'; -import React from 'react'; import ObservableImpl from 'zen-observable'; import { AppLanguageApi, diff --git a/packages/dev-utils/src/components/SidebarLanguageSwitcher/SidebarLanguageSwitcher.tsx b/packages/dev-utils/src/components/SidebarLanguageSwitcher/SidebarLanguageSwitcher.tsx index 71fd9a6c94..8f9c1f0aff 100644 --- a/packages/dev-utils/src/components/SidebarLanguageSwitcher/SidebarLanguageSwitcher.tsx +++ b/packages/dev-utils/src/components/SidebarLanguageSwitcher/SidebarLanguageSwitcher.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useState } from 'react'; +import { MouseEvent, useState } from 'react'; import { appLanguageApiRef } from '@backstage/core-plugin-api/alpha'; import TranslateIcon from '@material-ui/icons/Translate'; import ListItemText from '@material-ui/core/ListItemText'; @@ -47,7 +47,7 @@ export const SidebarLanguageSwitcher = () => { setAnchorEl(undefined); }; - const handleOpen = (event: React.MouseEvent) => { + const handleOpen = (event: MouseEvent) => { setAnchorEl(event.currentTarget); }; diff --git a/packages/dev-utils/src/components/SidebarSignOutButton/SidebarSignOutButton.tsx b/packages/dev-utils/src/components/SidebarSignOutButton/SidebarSignOutButton.tsx index 9cfe888d4d..6b50a68407 100644 --- a/packages/dev-utils/src/components/SidebarSignOutButton/SidebarSignOutButton.tsx +++ b/packages/dev-utils/src/components/SidebarSignOutButton/SidebarSignOutButton.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { SidebarItem } from '@backstage/core-components'; import LockIcon from '@material-ui/icons/Lock'; import { diff --git a/packages/dev-utils/src/devApp/SidebarThemeSwitcher.test.tsx b/packages/dev-utils/src/devApp/SidebarThemeSwitcher.test.tsx index e71bc4e25d..e89f995177 100644 --- a/packages/dev-utils/src/devApp/SidebarThemeSwitcher.test.tsx +++ b/packages/dev-utils/src/devApp/SidebarThemeSwitcher.test.tsx @@ -17,7 +17,6 @@ import { AppThemeApi, appThemeApiRef } from '@backstage/core-plugin-api'; import { renderInTestApp, TestApiProvider } from '@backstage/test-utils'; import userEvent from '@testing-library/user-event'; -import React from 'react'; import ObservableImpl from 'zen-observable'; import { SidebarThemeSwitcher } from './SidebarThemeSwitcher'; diff --git a/packages/dev-utils/src/devApp/SidebarThemeSwitcher.tsx b/packages/dev-utils/src/devApp/SidebarThemeSwitcher.tsx index 5b4e2dc4d4..d7b03c4360 100644 --- a/packages/dev-utils/src/devApp/SidebarThemeSwitcher.tsx +++ b/packages/dev-utils/src/devApp/SidebarThemeSwitcher.tsx @@ -20,7 +20,7 @@ import ListItemText from '@material-ui/core/ListItemText'; import Menu from '@material-ui/core/Menu'; import MenuItem from '@material-ui/core/MenuItem'; import AutoIcon from '@material-ui/icons/BrightnessAuto'; -import React, { cloneElement, useCallback, useState } from 'react'; +import { MouseEvent, cloneElement, useCallback, useState } from 'react'; import useObservable from 'react-use/esm/useObservable'; type ThemeIconProps = { @@ -49,7 +49,7 @@ export const SidebarThemeSwitcher = () => { const [anchorEl, setAnchorEl] = useState(); const open = Boolean(anchorEl); - const handleOpen = (event: React.MouseEvent) => { + const handleOpen = (event: MouseEvent) => { setAnchorEl(event.currentTarget); }; diff --git a/packages/dev-utils/src/devApp/render.test.tsx b/packages/dev-utils/src/devApp/render.test.tsx index 7fc0024cc3..9c9f7cf12c 100644 --- a/packages/dev-utils/src/devApp/render.test.tsx +++ b/packages/dev-utils/src/devApp/render.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { render } from '@testing-library/react'; import { createDevApp } from './render'; import { configApiRef, useApi } from '@backstage/core-plugin-api'; diff --git a/packages/dev-utils/src/devApp/render.tsx b/packages/dev-utils/src/devApp/render.tsx index a22c4ffb71..b3f8388009 100644 --- a/packages/dev-utils/src/devApp/render.tsx +++ b/packages/dev-utils/src/devApp/render.tsx @@ -47,7 +47,7 @@ import { } from '@backstage/integration-react'; import Box from '@material-ui/core/Box'; import BookmarkIcon from '@material-ui/icons/Bookmark'; -import React, { ComponentType, PropsWithChildren, ReactNode } from 'react'; +import { ComponentType, PropsWithChildren, ReactNode } from 'react'; import { createRoutesFromChildren, Route } from 'react-router-dom'; import { SidebarThemeSwitcher } from './SidebarThemeSwitcher'; import 'react-dom'; diff --git a/packages/e2e-test/src/commands/run.ts b/packages/e2e-test/src/commands/run.ts index 50ce3c6781..c95b8294c7 100644 --- a/packages/e2e-test/src/commands/run.ts +++ b/packages/e2e-test/src/commands/run.ts @@ -434,7 +434,6 @@ async function switchToReact17(appDir: string) { await fs.writeFile( resolvePath(appDir, 'packages/app/src/index.tsx'), `import '@backstage/cli/asset-types'; -import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; diff --git a/packages/frontend-app-api/src/apis/implementations/ComponentsApi/DefaultComponentsApi.test.tsx b/packages/frontend-app-api/src/apis/implementations/ComponentsApi/DefaultComponentsApi.test.tsx index 3d19fc413f..7d06d55a92 100644 --- a/packages/frontend-app-api/src/apis/implementations/ComponentsApi/DefaultComponentsApi.test.tsx +++ b/packages/frontend-app-api/src/apis/implementations/ComponentsApi/DefaultComponentsApi.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { createComponentRef } from '@backstage/frontend-plugin-api'; import { DefaultComponentsApi } from './DefaultComponentsApi'; import { render, screen } from '@testing-library/react'; diff --git a/packages/frontend-app-api/src/routing/RouteTracker.test.tsx b/packages/frontend-app-api/src/routing/RouteTracker.test.tsx index 372afea4c3..08a9673afc 100644 --- a/packages/frontend-app-api/src/routing/RouteTracker.test.tsx +++ b/packages/frontend-app-api/src/routing/RouteTracker.test.tsx @@ -15,7 +15,7 @@ */ import { TestApiProvider } from '@backstage/test-utils'; -import React, { useEffect } from 'react'; +import { useEffect } from 'react'; import { BackstageRouteObject } from './types'; import { fireEvent, render } from '@testing-library/react'; import { RouteTracker } from './RouteTracker'; diff --git a/packages/frontend-app-api/src/routing/RouteTracker.tsx b/packages/frontend-app-api/src/routing/RouteTracker.tsx index 8cddca5c68..4a218a0900 100644 --- a/packages/frontend-app-api/src/routing/RouteTracker.tsx +++ b/packages/frontend-app-api/src/routing/RouteTracker.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useEffect } from 'react'; +import { useEffect } from 'react'; import { matchRoutes, useLocation } from 'react-router-dom'; import { useAnalytics, diff --git a/packages/frontend-app-api/src/routing/extractRouteInfoFromAppNode.test.ts b/packages/frontend-app-api/src/routing/extractRouteInfoFromAppNode.test.ts index eac6e9d2aa..3f4f84c1ce 100644 --- a/packages/frontend-app-api/src/routing/extractRouteInfoFromAppNode.test.ts +++ b/packages/frontend-app-api/src/routing/extractRouteInfoFromAppNode.test.ts @@ -14,7 +14,7 @@ * limitations under the License. */ -import React from 'react'; +import { createElement } from 'react'; import { BackstagePlugin } from '@backstage/core-plugin-api'; import { extractRouteInfoFromAppNode } from './extractRouteInfoFromAppNode'; import { @@ -74,7 +74,7 @@ function createTestExtension(options: { yield coreExtensionData.routeRef(options.routeRef); } - yield coreExtensionData.reactElement(React.createElement('div')); + yield coreExtensionData.reactElement(createElement('div')); }, }); } diff --git a/packages/frontend-app-api/src/wiring/createSpecializedApp.test.tsx b/packages/frontend-app-api/src/wiring/createSpecializedApp.test.tsx index 3b1f6eb25c..96450f06fb 100644 --- a/packages/frontend-app-api/src/wiring/createSpecializedApp.test.tsx +++ b/packages/frontend-app-api/src/wiring/createSpecializedApp.test.tsx @@ -31,7 +31,6 @@ import { import { screen, render } from '@testing-library/react'; import { createSpecializedApp } from './createSpecializedApp'; import { mockApis, TestApiRegistry } from '@backstage/test-utils'; -import React from 'react'; import { configApiRef, createApiFactory, @@ -39,6 +38,7 @@ import { } from '@backstage/core-plugin-api'; import { MemoryRouter } from 'react-router-dom'; import { ApiProvider, ConfigReader } from '@backstage/core-app-api'; +import { Fragment } from 'react'; describe('createSpecializedApp', () => { it('should render the root app', () => { @@ -464,9 +464,9 @@ describe('createSpecializedApp', () => { {inputs.children.map(i => ( - + {i.get(coreExtensionData.reactElement)} - + ))} , diff --git a/packages/frontend-defaults/src/createApp.test.tsx b/packages/frontend-defaults/src/createApp.test.tsx index e635f1a03e..569416fca7 100644 --- a/packages/frontend-defaults/src/createApp.test.tsx +++ b/packages/frontend-defaults/src/createApp.test.tsx @@ -27,7 +27,6 @@ import { import { screen, waitFor } from '@testing-library/react'; import { CreateAppFeatureLoader, createApp } from './createApp'; import { mockApis, renderWithEffects } from '@backstage/test-utils'; -import React from 'react'; import { featureFlagsApiRef, useApi } from '@backstage/core-plugin-api'; import { default as appPluginOriginal } from '@backstage/plugin-app'; diff --git a/packages/frontend-defaults/src/createApp.tsx b/packages/frontend-defaults/src/createApp.tsx index c6ed4759fa..f25b71ce18 100644 --- a/packages/frontend-defaults/src/createApp.tsx +++ b/packages/frontend-defaults/src/createApp.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { JSX, ReactNode } from 'react'; +import { JSX, lazy, ReactNode, Suspense } from 'react'; import { ConfigApi, coreExtensionData, @@ -123,11 +123,11 @@ export function createApp(options?: CreateAppOptions): { return { createRoot() { - const LazyApp = React.lazy(appLoader); + const LazyApp = lazy(appLoader); return ( - + - + ); }, }; diff --git a/packages/frontend-defaults/src/createPublicSignInApp.test.tsx b/packages/frontend-defaults/src/createPublicSignInApp.test.tsx index 560abc602f..903e8929e0 100644 --- a/packages/frontend-defaults/src/createPublicSignInApp.test.tsx +++ b/packages/frontend-defaults/src/createPublicSignInApp.test.tsx @@ -19,7 +19,7 @@ import { createFrontendModule, } from '@backstage/frontend-plugin-api'; import { render, screen, waitFor } from '@testing-library/react'; -import React, { useEffect } from 'react'; +import { useEffect } from 'react'; import { createPublicSignInApp } from './createPublicSignInApp'; import { mockApis } from '@backstage/test-utils'; diff --git a/packages/frontend-defaults/src/createPublicSignInApp.tsx b/packages/frontend-defaults/src/createPublicSignInApp.tsx index a8fd456c73..af7107681b 100644 --- a/packages/frontend-defaults/src/createPublicSignInApp.tsx +++ b/packages/frontend-defaults/src/createPublicSignInApp.tsx @@ -20,7 +20,6 @@ import { identityApiRef, useApi, } from '@backstage/frontend-plugin-api'; -import React from 'react'; import { useAsync, useMountEffect } from '@react-hookz/web'; import { CreateAppOptions, createApp } from './createApp'; import appPlugin from '@backstage/plugin-app'; diff --git a/packages/frontend-plugin-api/src/analytics/AnalyticsContext.test.tsx b/packages/frontend-plugin-api/src/analytics/AnalyticsContext.test.tsx index bdfdef3005..089d57210d 100644 --- a/packages/frontend-plugin-api/src/analytics/AnalyticsContext.test.tsx +++ b/packages/frontend-plugin-api/src/analytics/AnalyticsContext.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { render } from '@testing-library/react'; import { renderHook } from '@testing-library/react'; import { AnalyticsContext, useAnalyticsContext } from './AnalyticsContext'; diff --git a/packages/frontend-plugin-api/src/analytics/AnalyticsContext.tsx b/packages/frontend-plugin-api/src/analytics/AnalyticsContext.tsx index 13047b41d7..5be2fcc83b 100644 --- a/packages/frontend-plugin-api/src/analytics/AnalyticsContext.tsx +++ b/packages/frontend-plugin-api/src/analytics/AnalyticsContext.tsx @@ -18,7 +18,7 @@ import { createVersionedContext, createVersionedValueMap, } from '@backstage/version-bridge'; -import React, { ReactNode, useContext } from 'react'; +import { ComponentType, ReactNode, useContext } from 'react'; import { AnalyticsContextValue } from './types'; const AnalyticsReactContext = createVersionedContext<{ @@ -91,7 +91,7 @@ export const AnalyticsContext = (options: { * @internal */ export function withAnalyticsContext( - Component: React.ComponentType, + Component: ComponentType, values: AnalyticsContextValue, ) { const ComponentWithAnalyticsContext = (props: TProps) => { diff --git a/packages/frontend-plugin-api/src/analytics/useAnalytics.test.tsx b/packages/frontend-plugin-api/src/analytics/useAnalytics.test.tsx index 6dbcc81f11..547c78a7fc 100644 --- a/packages/frontend-plugin-api/src/analytics/useAnalytics.test.tsx +++ b/packages/frontend-plugin-api/src/analytics/useAnalytics.test.tsx @@ -18,7 +18,6 @@ import { renderHook } from '@testing-library/react'; import { useAnalytics } from './useAnalytics'; import { analyticsApiRef } from '@backstage/core-plugin-api'; import { TestApiProvider } from '@backstage/test-utils'; -import React from 'react'; describe('useAnalytics', () => { it('returns tracker with no implementation defined', () => { diff --git a/packages/frontend-plugin-api/src/blueprints/AppRootElementBlueprint.test.tsx b/packages/frontend-plugin-api/src/blueprints/AppRootElementBlueprint.test.tsx index 3d88ad3f47..39f03cfad4 100644 --- a/packages/frontend-plugin-api/src/blueprints/AppRootElementBlueprint.test.tsx +++ b/packages/frontend-plugin-api/src/blueprints/AppRootElementBlueprint.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { AppRootElementBlueprint } from './AppRootElementBlueprint'; describe('AppRootElementBlueprint', () => { diff --git a/packages/frontend-plugin-api/src/blueprints/AppRootWrapperBlueprint.test.tsx b/packages/frontend-plugin-api/src/blueprints/AppRootWrapperBlueprint.test.tsx index 20291f5e5a..d46975abd9 100644 --- a/packages/frontend-plugin-api/src/blueprints/AppRootWrapperBlueprint.test.tsx +++ b/packages/frontend-plugin-api/src/blueprints/AppRootWrapperBlueprint.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { AppRootWrapperBlueprint } from './AppRootWrapperBlueprint'; import { screen, waitFor } from '@testing-library/react'; import { diff --git a/packages/frontend-plugin-api/src/blueprints/AppRootWrapperBlueprint.tsx b/packages/frontend-plugin-api/src/blueprints/AppRootWrapperBlueprint.tsx index da11bd8cb0..481be1bc0b 100644 --- a/packages/frontend-plugin-api/src/blueprints/AppRootWrapperBlueprint.tsx +++ b/packages/frontend-plugin-api/src/blueprints/AppRootWrapperBlueprint.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { ComponentType, PropsWithChildren } from 'react'; import { createExtensionBlueprint, createExtensionDataRef } from '../wiring'; diff --git a/packages/frontend-plugin-api/src/blueprints/NavLogoBlueprint.test.tsx b/packages/frontend-plugin-api/src/blueprints/NavLogoBlueprint.test.tsx index 5cf3155229..bbd96ea53b 100644 --- a/packages/frontend-plugin-api/src/blueprints/NavLogoBlueprint.test.tsx +++ b/packages/frontend-plugin-api/src/blueprints/NavLogoBlueprint.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { NavLogoBlueprint } from './NavLogoBlueprint'; import { createExtensionTester } from '@backstage/frontend-test-utils'; diff --git a/packages/frontend-plugin-api/src/blueprints/PageBlueprint.test.tsx b/packages/frontend-plugin-api/src/blueprints/PageBlueprint.test.tsx index 4d0b4f37a7..d3e1a6c954 100644 --- a/packages/frontend-plugin-api/src/blueprints/PageBlueprint.test.tsx +++ b/packages/frontend-plugin-api/src/blueprints/PageBlueprint.test.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import { createRouteRef } from '../routing'; import { PageBlueprint } from './PageBlueprint'; import { diff --git a/packages/frontend-plugin-api/src/blueprints/RouterBlueprint.test.tsx b/packages/frontend-plugin-api/src/blueprints/RouterBlueprint.test.tsx index cad6be5b8a..00015d0c3d 100644 --- a/packages/frontend-plugin-api/src/blueprints/RouterBlueprint.test.tsx +++ b/packages/frontend-plugin-api/src/blueprints/RouterBlueprint.test.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import { RouterBlueprint } from './RouterBlueprint'; import { MemoryRouter } from 'react-router-dom'; import { render, waitFor } from '@testing-library/react'; diff --git a/packages/frontend-plugin-api/src/blueprints/SignInPageBlueprint.test.tsx b/packages/frontend-plugin-api/src/blueprints/SignInPageBlueprint.test.tsx index ffa1d7a225..aa1f49c075 100644 --- a/packages/frontend-plugin-api/src/blueprints/SignInPageBlueprint.test.tsx +++ b/packages/frontend-plugin-api/src/blueprints/SignInPageBlueprint.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { SignInPageBlueprint } from './SignInPageBlueprint'; import { createExtensionTester, diff --git a/packages/frontend-plugin-api/src/blueprints/SignInPageBlueprint.tsx b/packages/frontend-plugin-api/src/blueprints/SignInPageBlueprint.tsx index 561781c49f..0ca9bf4e92 100644 --- a/packages/frontend-plugin-api/src/blueprints/SignInPageBlueprint.tsx +++ b/packages/frontend-plugin-api/src/blueprints/SignInPageBlueprint.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { ComponentType, lazy } from 'react'; +import { ComponentType, lazy } from 'react'; import { createExtensionBlueprint, createExtensionDataRef } from '../wiring'; import { SignInPageProps } from '@backstage/core-plugin-api'; import { ExtensionBoundary } from '../components'; diff --git a/packages/frontend-plugin-api/src/components/ErrorBoundary.tsx b/packages/frontend-plugin-api/src/components/ErrorBoundary.tsx index db352044de..8842ff55cc 100644 --- a/packages/frontend-plugin-api/src/components/ErrorBoundary.tsx +++ b/packages/frontend-plugin-api/src/components/ErrorBoundary.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { Component, ComponentType, PropsWithChildren } from 'react'; +import { Component, ComponentType, PropsWithChildren } from 'react'; import { FrontendPlugin } from '../wiring'; import { CoreErrorBoundaryFallbackProps } from '../types'; diff --git a/packages/frontend-plugin-api/src/components/ExtensionBoundary.test.tsx b/packages/frontend-plugin-api/src/components/ExtensionBoundary.test.tsx index 14aaebb778..6cce114d4d 100644 --- a/packages/frontend-plugin-api/src/components/ExtensionBoundary.test.tsx +++ b/packages/frontend-plugin-api/src/components/ExtensionBoundary.test.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useEffect } from 'react'; +import { useEffect } from 'react'; import { act, screen, waitFor } from '@testing-library/react'; import { mockApis, diff --git a/packages/frontend-plugin-api/src/components/ExtensionBoundary.tsx b/packages/frontend-plugin-api/src/components/ExtensionBoundary.tsx index 1737e0b40b..46b3956e0e 100644 --- a/packages/frontend-plugin-api/src/components/ExtensionBoundary.tsx +++ b/packages/frontend-plugin-api/src/components/ExtensionBoundary.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { +import { PropsWithChildren, ReactNode, Suspense, diff --git a/packages/frontend-plugin-api/src/components/ExtensionSuspense.test.tsx b/packages/frontend-plugin-api/src/components/ExtensionSuspense.test.tsx index 166c57b83b..91aaeb2a25 100644 --- a/packages/frontend-plugin-api/src/components/ExtensionSuspense.test.tsx +++ b/packages/frontend-plugin-api/src/components/ExtensionSuspense.test.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { lazy } from 'react'; +import { lazy } from 'react'; import { screen, waitFor } from '@testing-library/react'; import { renderWithEffects, wrapInTestApp } from '@backstage/test-utils'; import { ExtensionSuspense } from './ExtensionSuspense'; diff --git a/packages/frontend-plugin-api/src/components/ExtensionSuspense.tsx b/packages/frontend-plugin-api/src/components/ExtensionSuspense.tsx index e80f59f09c..0ae8b413e4 100644 --- a/packages/frontend-plugin-api/src/components/ExtensionSuspense.tsx +++ b/packages/frontend-plugin-api/src/components/ExtensionSuspense.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { ReactNode, Suspense } from 'react'; +import { ReactNode, Suspense } from 'react'; import { useApp } from '@backstage/core-plugin-api'; /** @public */ diff --git a/packages/frontend-plugin-api/src/icons/types.test.ts b/packages/frontend-plugin-api/src/icons/types.test.ts index fd01e176c9..7b1cbf2178 100644 --- a/packages/frontend-plugin-api/src/icons/types.test.ts +++ b/packages/frontend-plugin-api/src/icons/types.test.ts @@ -14,7 +14,7 @@ * limitations under the License. */ -import * as React from 'react'; +import { ElementType, JSX } from 'react'; import { type IconComponent } from './types'; // Emulate the MUI4 icon type @@ -31,7 +31,7 @@ type Mui5Icon = (props: { // Emulate the MUI6 icon type interface OverridableComponent

    { - ( + ( props: { /** * The component used for the root node. @@ -39,8 +39,8 @@ interface OverridableComponent

    { */ component: RootComponent; } & { stuff: number }, - ): React.JSX.Element | null; - (props: P): React.JSX.Element | null; + ): JSX.Element | null; + (props: P): JSX.Element | null; } type Mui6Icon = OverridableComponent<{ fontSize?: 'inherit' | 'large' | 'medium' | 'small'; diff --git a/packages/frontend-plugin-api/src/routing/useRouteRef.test.tsx b/packages/frontend-plugin-api/src/routing/useRouteRef.test.tsx index bdac95a5a0..bbbb58a8dc 100644 --- a/packages/frontend-plugin-api/src/routing/useRouteRef.test.tsx +++ b/packages/frontend-plugin-api/src/routing/useRouteRef.test.tsx @@ -15,7 +15,7 @@ */ import { renderHook } from '@testing-library/react'; -import React from 'react'; +import { PropsWithChildren } from 'react'; import { MemoryRouter, Router } from 'react-router-dom'; import { createVersionedContextForTesting } from '@backstage/version-bridge'; import { useRouteRef } from './useRouteRef'; @@ -37,7 +37,7 @@ describe('v1 consumer', () => { const routeRef = createRouteRef(); const renderedHook = renderHook(() => useRouteRef(routeRef), { - wrapper: ({ children }: React.PropsWithChildren<{}>) => ( + wrapper: ({ children }: PropsWithChildren<{}>) => ( @@ -58,7 +58,7 @@ describe('v1 consumer', () => { const routeRef = createRouteRef(); const renderedHook = renderHook(() => useRouteRef(routeRef), { - wrapper: ({ children }: React.PropsWithChildren<{}>) => ( + wrapper: ({ children }: PropsWithChildren<{}>) => ( undefined }]]} > @@ -79,7 +79,7 @@ describe('v1 consumer', () => { history.push('/my-page'); const { rerender } = renderHook(() => useRouteRef(routeRef), { - wrapper: ({ children }: React.PropsWithChildren<{}>) => ( + wrapper: ({ children }: PropsWithChildren<{}>) => ( { history.push('/my-page'); const { rerender } = renderHook(() => useRouteRef(routeRef), { - wrapper: ({ children }: React.PropsWithChildren<{}>) => ( + wrapper: ({ children }: PropsWithChildren<{}>) => ( { history.push('/my-page'); const { rerender } = renderHook(() => useRouteRef(routeRef), { - wrapper: ({ children }: React.PropsWithChildren<{}>) => ( + wrapper: ({ children }: PropsWithChildren<{}>) => ( { history.push('/my-page'); const { rerender } = renderHook(() => useRouteRef(routeRef), { - wrapper: ({ children }: React.PropsWithChildren<{}>) => ( + wrapper: ({ children }: PropsWithChildren<{}>) => ( { factory({ inputs }) { return [ coreExtensionData.reactElement( - React.createElement('span', {}, [ + createElement('span', {}, [ `Names: ${inputs.names .map(n => n.get(nameExtensionDataRef)) .join(', ')}`, @@ -234,7 +234,7 @@ describe('createFrontendFeatureLoader', () => { factory({ inputs }) { return [ coreExtensionData.reactElement( - React.createElement('span', {}, [ + createElement('span', {}, [ `Names: ${inputs.names .map(n => n.get(nameExtensionDataRef)) .join(', ')}`, @@ -288,7 +288,7 @@ describe('createFrontendFeatureLoader', () => { factory() { return [ coreExtensionData.reactElement( - React.createElement('span', {}, [`My Content`]), + createElement('span', {}, [`My Content`]), ), ]; }, @@ -421,7 +421,7 @@ describe('createFrontendFeatureLoader', () => { factory() { return [ coreExtensionData.reactElement( - React.createElement('span', {}, [`My Content`]), + createElement('span', {}, [`My Content`]), ), ]; }, diff --git a/packages/frontend-plugin-api/src/wiring/createFrontendPlugin.test.ts b/packages/frontend-plugin-api/src/wiring/createFrontendPlugin.test.ts index 678eff0b4c..6553157885 100644 --- a/packages/frontend-plugin-api/src/wiring/createFrontendPlugin.test.ts +++ b/packages/frontend-plugin-api/src/wiring/createFrontendPlugin.test.ts @@ -14,7 +14,7 @@ * limitations under the License. */ -import React from 'react'; +import { createElement } from 'react'; // eslint-disable-next-line @backstage/no-relative-monorepo-imports import { createApp } from '../../../frontend-defaults/src/createApp'; import { screen } from '@testing-library/react'; @@ -109,7 +109,7 @@ const outputExtension = createExtension({ factory({ inputs }) { return [ coreExtensionData.reactElement( - React.createElement('span', {}, [ + createElement('span', {}, [ `Names: ${inputs.names .map(n => n.get(nameExtensionDataRef)) .join(', ')}`, diff --git a/packages/frontend-test-utils/src/app/createExtensionTester.test.tsx b/packages/frontend-test-utils/src/app/createExtensionTester.test.tsx index a6265ae3ac..f412f29b65 100644 --- a/packages/frontend-test-utils/src/app/createExtensionTester.test.tsx +++ b/packages/frontend-test-utils/src/app/createExtensionTester.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { coreExtensionData, createExtension, diff --git a/packages/frontend-test-utils/src/app/renderInTestApp.test.tsx b/packages/frontend-test-utils/src/app/renderInTestApp.test.tsx index a56ae2f140..cee6273cb1 100644 --- a/packages/frontend-test-utils/src/app/renderInTestApp.test.tsx +++ b/packages/frontend-test-utils/src/app/renderInTestApp.test.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useCallback } from 'react'; +import { useCallback } from 'react'; import { screen, fireEvent } from '@testing-library/react'; import { MockAnalyticsApi, diff --git a/packages/frontend-test-utils/src/app/renderInTestApp.tsx b/packages/frontend-test-utils/src/app/renderInTestApp.tsx index 1643b06fac..84171646df 100644 --- a/packages/frontend-test-utils/src/app/renderInTestApp.tsx +++ b/packages/frontend-test-utils/src/app/renderInTestApp.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React from 'react'; +import { Fragment } from 'react'; import { Link, MemoryRouter } from 'react-router-dom'; import { createSpecializedApp, @@ -183,7 +183,7 @@ export function renderInTestApp( coreExtensionData.routeRef, ], factory: () => [ - coreExtensionData.reactElement(), + coreExtensionData.reactElement(), coreExtensionData.routePath(path), coreExtensionData.routeRef(routeRef), ], diff --git a/packages/integration-react/dev/DevPage.tsx b/packages/integration-react/dev/DevPage.tsx index a7d722d32d..d03baca1d7 100644 --- a/packages/integration-react/dev/DevPage.tsx +++ b/packages/integration-react/dev/DevPage.tsx @@ -16,7 +16,6 @@ import { ScmIntegration, ScmIntegrationsGroup } from '@backstage/integration'; import Typography from '@material-ui/core/Typography'; -import React from 'react'; import { scmIntegrationsApiRef } from '../src/ScmIntegrationsApi'; import { Content } from '@backstage/core-components'; diff --git a/packages/integration-react/dev/index.tsx b/packages/integration-react/dev/index.tsx index 5ce9ebecda..65486d1f06 100644 --- a/packages/integration-react/dev/index.tsx +++ b/packages/integration-react/dev/index.tsx @@ -15,7 +15,6 @@ */ import { createDevApp } from '@backstage/dev-utils'; import { ScmIntegrations } from '@backstage/integration'; -import React from 'react'; import { scmIntegrationsApiRef } from '../src/ScmIntegrationsApi'; import { DevPage } from './DevPage'; import { configApiRef, createApiFactory } from '@backstage/core-plugin-api'; diff --git a/packages/integration-react/src/components/ScmIntegrationIcon/ScmIntegrationIcon.test.tsx b/packages/integration-react/src/components/ScmIntegrationIcon/ScmIntegrationIcon.test.tsx index 02eb30e72c..4935211da2 100644 --- a/packages/integration-react/src/components/ScmIntegrationIcon/ScmIntegrationIcon.test.tsx +++ b/packages/integration-react/src/components/ScmIntegrationIcon/ScmIntegrationIcon.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ import { renderInTestApp } from '@backstage/test-utils'; -import React from 'react'; import { ScmIntegrationIcon } from './ScmIntegrationIcon'; describe('', () => { diff --git a/packages/integration-react/src/components/ScmIntegrationIcon/ScmIntegrationIcon.tsx b/packages/integration-react/src/components/ScmIntegrationIcon/ScmIntegrationIcon.tsx index dd6ba18690..7cd4a16c93 100644 --- a/packages/integration-react/src/components/ScmIntegrationIcon/ScmIntegrationIcon.tsx +++ b/packages/integration-react/src/components/ScmIntegrationIcon/ScmIntegrationIcon.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ import CodeIcon from '@material-ui/icons/Code'; -import React from 'react'; import { useApp } from '@backstage/core-plugin-api'; /** diff --git a/packages/techdocs-cli-embedded-app/src/App.test.tsx b/packages/techdocs-cli-embedded-app/src/App.test.tsx index 75658d271e..ed479e7e75 100644 --- a/packages/techdocs-cli-embedded-app/src/App.test.tsx +++ b/packages/techdocs-cli-embedded-app/src/App.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { renderWithEffects } from '@backstage/test-utils'; import App from './App'; diff --git a/packages/techdocs-cli-embedded-app/src/App.tsx b/packages/techdocs-cli-embedded-app/src/App.tsx index 95675954e1..273a828b4a 100644 --- a/packages/techdocs-cli-embedded-app/src/App.tsx +++ b/packages/techdocs-cli-embedded-app/src/App.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { Navigate, Route } from 'react-router-dom'; import { diff --git a/packages/techdocs-cli-embedded-app/src/components/Root/LogoFull.tsx b/packages/techdocs-cli-embedded-app/src/components/Root/LogoFull.tsx index da6911bb17..e25416f5dc 100644 --- a/packages/techdocs-cli-embedded-app/src/components/Root/LogoFull.tsx +++ b/packages/techdocs-cli-embedded-app/src/components/Root/LogoFull.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; const useStyles = makeStyles({ diff --git a/packages/techdocs-cli-embedded-app/src/components/Root/LogoIcon.tsx b/packages/techdocs-cli-embedded-app/src/components/Root/LogoIcon.tsx index ff4b5132b0..518edb40fe 100644 --- a/packages/techdocs-cli-embedded-app/src/components/Root/LogoIcon.tsx +++ b/packages/techdocs-cli-embedded-app/src/components/Root/LogoIcon.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; const useStyles = makeStyles({ diff --git a/packages/techdocs-cli-embedded-app/src/components/Root/Root.tsx b/packages/techdocs-cli-embedded-app/src/components/Root/Root.tsx index b2fac4081f..6a00fc78cf 100644 --- a/packages/techdocs-cli-embedded-app/src/components/Root/Root.tsx +++ b/packages/techdocs-cli-embedded-app/src/components/Root/Root.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { PropsWithChildren } from 'react'; +import { PropsWithChildren } from 'react'; import { makeStyles } from '@material-ui/core/styles'; import LibraryBooks from '@material-ui/icons/LibraryBooks'; diff --git a/packages/techdocs-cli-embedded-app/src/components/TechDocsPage/TechDocsPage.tsx b/packages/techdocs-cli-embedded-app/src/components/TechDocsPage/TechDocsPage.tsx index 5dc635e023..479ad3161d 100644 --- a/packages/techdocs-cli-embedded-app/src/components/TechDocsPage/TechDocsPage.tsx +++ b/packages/techdocs-cli-embedded-app/src/components/TechDocsPage/TechDocsPage.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useState } from 'react'; +import { useState } from 'react'; import { makeStyles } from '@material-ui/core/styles'; import { Theme } from '@material-ui/core/styles/createTheme'; diff --git a/packages/techdocs-cli-embedded-app/src/index.tsx b/packages/techdocs-cli-embedded-app/src/index.tsx index e5ca03fe64..81b80e9bcc 100644 --- a/packages/techdocs-cli-embedded-app/src/index.tsx +++ b/packages/techdocs-cli-embedded-app/src/index.tsx @@ -15,7 +15,6 @@ */ import '@backstage/cli/asset-types'; -import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; diff --git a/packages/test-utils/src/testUtils/TestApiProvider.test.tsx b/packages/test-utils/src/testUtils/TestApiProvider.test.tsx index 085cf22e12..81322bdb07 100644 --- a/packages/test-utils/src/testUtils/TestApiProvider.test.tsx +++ b/packages/test-utils/src/testUtils/TestApiProvider.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { createApiRef, useApiHolder } from '@backstage/core-plugin-api'; import { TestApiProvider, TestApiRegistry } from './TestApiProvider'; import { render, screen } from '@testing-library/react'; diff --git a/packages/test-utils/src/testUtils/TestApiProvider.tsx b/packages/test-utils/src/testUtils/TestApiProvider.tsx index 59fafbeadb..18a7174201 100644 --- a/packages/test-utils/src/testUtils/TestApiProvider.tsx +++ b/packages/test-utils/src/testUtils/TestApiProvider.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { ReactNode } from 'react'; +import { ReactNode } from 'react'; import { ApiProvider } from '@backstage/core-app-api'; import { ApiRef, ApiHolder } from '@backstage/core-plugin-api'; diff --git a/packages/test-utils/src/testUtils/appWrappers.test.tsx b/packages/test-utils/src/testUtils/appWrappers.test.tsx index 79327afc0b..42a3f8e092 100644 --- a/packages/test-utils/src/testUtils/appWrappers.test.tsx +++ b/packages/test-utils/src/testUtils/appWrappers.test.tsx @@ -25,7 +25,7 @@ import { } from '@backstage/core-plugin-api'; import { withLogCollector } from './logCollector'; import { render } from '@testing-library/react'; -import React, { useEffect } from 'react'; +import { useEffect } from 'react'; import { Route, Routes } from 'react-router-dom'; import { MockErrorApi } from './apis'; import { renderInTestApp, wrapInTestApp } from './appWrappers'; diff --git a/packages/test-utils/src/testUtils/appWrappers.tsx b/packages/test-utils/src/testUtils/appWrappers.tsx index 6f9361f39b..e50e87e67f 100644 --- a/packages/test-utils/src/testUtils/appWrappers.tsx +++ b/packages/test-utils/src/testUtils/appWrappers.tsx @@ -14,11 +14,12 @@ * limitations under the License. */ -import React, { +import { ComponentType, PropsWithChildren, ReactElement, ReactNode, + createElement, } from 'react'; import { MemoryRouter, Route } from 'react-router-dom'; import { themes, UnifiedThemeProvider } from '@backstage/theme'; @@ -230,11 +231,11 @@ export function wrapInTestApp( ): ReactElement { const TestAppWrapper = createTestAppWrapper(options); - let wrappedElement: React.ReactElement; + let wrappedElement: ReactElement; if (Component instanceof Function) { - wrappedElement = React.createElement(Component as ComponentType); + wrappedElement = createElement(Component as ComponentType); } else { - wrappedElement = Component as React.ReactElement; + wrappedElement = Component as ReactElement; } return {wrappedElement}; @@ -255,11 +256,11 @@ export async function renderInTestApp( Component: ComponentType> | ReactNode, options: TestAppOptions & LegacyRootOption = {}, ): Promise { - let wrappedElement: React.ReactElement; + let wrappedElement: ReactElement; if (Component instanceof Function) { - wrappedElement = React.createElement(Component as ComponentType); + wrappedElement = createElement(Component as ComponentType); } else { - wrappedElement = Component as React.ReactElement; + wrappedElement = Component as ReactElement; } const { legacyRoot } = options; diff --git a/packages/theme/src/unified/UnifiedThemeProvider.test.tsx b/packages/theme/src/unified/UnifiedThemeProvider.test.tsx index 98fc73505d..85a47dbb1e 100644 --- a/packages/theme/src/unified/UnifiedThemeProvider.test.tsx +++ b/packages/theme/src/unified/UnifiedThemeProvider.test.tsx @@ -21,7 +21,6 @@ import { import { useTheme as useV5Theme } from '@mui/material/styles'; import { makeStyles as makeV5Styles } from '@mui/styles'; import { render, screen } from '@testing-library/react'; -import React from 'react'; import { UnifiedThemeProvider } from './UnifiedThemeProvider'; import { themes } from './themes'; diff --git a/packages/theme/src/unified/UnifiedThemeProvider.tsx b/packages/theme/src/unified/UnifiedThemeProvider.tsx index e44e5502f3..32b0fd2708 100644 --- a/packages/theme/src/unified/UnifiedThemeProvider.tsx +++ b/packages/theme/src/unified/UnifiedThemeProvider.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { ReactNode } from 'react'; +import { ReactNode } from 'react'; import CssBaseline from '@material-ui/core/CssBaseline'; import { ThemeProvider, diff --git a/packages/version-bridge/src/lib/VersionedContext.test.tsx b/packages/version-bridge/src/lib/VersionedContext.test.tsx index 4ffe3f45ca..2e109a0165 100644 --- a/packages/version-bridge/src/lib/VersionedContext.test.tsx +++ b/packages/version-bridge/src/lib/VersionedContext.test.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useContext } from 'react'; +import { PropsWithChildren, useContext } from 'react'; import { renderHook } from '@testing-library/react'; import { createVersionedContext, @@ -30,7 +30,7 @@ describe('VersionedContext', () => { const Context = createVersionedContext('test-context-1'); const rendered = renderHook(() => useContext(Context), { - wrapper: ({ children }: React.PropsWithChildren<{}>) => ( + wrapper: ({ children }: PropsWithChildren<{}>) => ( @@ -47,7 +47,7 @@ describe('VersionedContext', () => { const Context = createVersionedContext('test-context-2'); const rendered = renderHook(() => useVersionedContext('test-context-2'), { - wrapper: ({ children }: React.PropsWithChildren<{}>) => ( + wrapper: ({ children }: PropsWithChildren<{}>) => ( diff --git a/plugins/api-docs-module-protoc-gen-doc/src/widgets.tsx b/plugins/api-docs-module-protoc-gen-doc/src/widgets.tsx index 5f35c8d9b3..be8c1072f5 100644 --- a/plugins/api-docs-module-protoc-gen-doc/src/widgets.tsx +++ b/plugins/api-docs-module-protoc-gen-doc/src/widgets.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { GRPCSelfGeneratedAPIReference } from 'grpc-docs'; /** diff --git a/plugins/api-docs/dev/index.tsx b/plugins/api-docs/dev/index.tsx index 995aa9c2fb..f0b4c10d20 100644 --- a/plugins/api-docs/dev/index.tsx +++ b/plugins/api-docs/dev/index.tsx @@ -19,7 +19,6 @@ import { Content, Header, Page } from '@backstage/core-components'; import { createDevApp } from '@backstage/dev-utils'; import { CatalogEntityPage } from '@backstage/plugin-catalog'; import { catalogApiRef, EntityProvider } from '@backstage/plugin-catalog-react'; -import React from 'react'; import { apiDocsConfigRef, apiDocsPlugin, diff --git a/plugins/api-docs/src/alpha.tsx b/plugins/api-docs/src/alpha.tsx index c6757e180e..c67054788f 100644 --- a/plugins/api-docs/src/alpha.tsx +++ b/plugins/api-docs/src/alpha.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import Grid from '@material-ui/core/Grid'; import { diff --git a/plugins/api-docs/src/components/ApiDefinitionCard/ApiDefinitionCard.test.tsx b/plugins/api-docs/src/components/ApiDefinitionCard/ApiDefinitionCard.test.tsx index eda3597225..ce06f5ca31 100644 --- a/plugins/api-docs/src/components/ApiDefinitionCard/ApiDefinitionCard.test.tsx +++ b/plugins/api-docs/src/components/ApiDefinitionCard/ApiDefinitionCard.test.tsx @@ -18,7 +18,7 @@ import { ApiEntity } from '@backstage/catalog-model'; import { EntityProvider } from '@backstage/plugin-catalog-react'; import { renderInTestApp, TestApiProvider } from '@backstage/test-utils'; import { waitFor } from '@testing-library/react'; -import React from 'react'; +import { PropsWithChildren, ComponentType, ReactNode } from 'react'; import { ApiDocsConfig, apiDocsConfigRef } from '../../config'; import { OpenApiDefinitionWidget } from '../OpenApiDefinitionWidget'; import { ApiDefinitionCard } from './ApiDefinitionCard'; @@ -30,10 +30,10 @@ describe('', () => { const apiDocsConfig: jest.Mocked = { getApiDefinitionWidget: jest.fn(), } as any; - let Wrapper: React.ComponentType>; + let Wrapper: ComponentType>; beforeEach(() => { - Wrapper = ({ children }: { children?: React.ReactNode }) => ( + Wrapper = ({ children }: { children?: ReactNode }) => ( {children} diff --git a/plugins/api-docs/src/components/ApiDefinitionCard/ApiDefinitionCard.tsx b/plugins/api-docs/src/components/ApiDefinitionCard/ApiDefinitionCard.tsx index 30bd7623fe..e033f93b3c 100644 --- a/plugins/api-docs/src/components/ApiDefinitionCard/ApiDefinitionCard.tsx +++ b/plugins/api-docs/src/components/ApiDefinitionCard/ApiDefinitionCard.tsx @@ -17,7 +17,6 @@ import { ApiEntity } from '@backstage/catalog-model'; import { useEntity } from '@backstage/plugin-catalog-react'; import Alert from '@material-ui/lab/Alert'; -import React from 'react'; import { apiDocsConfigRef } from '../../config'; import { PlainApiDefinitionWidget } from '../PlainApiDefinitionWidget'; diff --git a/plugins/api-docs/src/components/ApiDefinitionCard/ApiDefinitionWidget.tsx b/plugins/api-docs/src/components/ApiDefinitionCard/ApiDefinitionWidget.tsx index 8d7d7a7729..da1ff8ee71 100644 --- a/plugins/api-docs/src/components/ApiDefinitionCard/ApiDefinitionWidget.tsx +++ b/plugins/api-docs/src/components/ApiDefinitionCard/ApiDefinitionWidget.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; +import { ReactElement } from 'react'; import { AsyncApiDefinitionWidget } from '../AsyncApiDefinitionWidget'; import { GraphQlDefinitionWidget } from '../GraphQlDefinitionWidget'; import { OpenApiDefinitionWidget } from '../OpenApiDefinitionWidget'; @@ -24,7 +24,7 @@ import { TrpcApiDefinitionWidget } from '../TrpcDefinitionWidget'; export type ApiDefinitionWidget = { type: string; title: string; - component: (definition: string) => React.ReactElement; + component: (definition: string) => ReactElement; rawLanguage?: string; }; diff --git a/plugins/api-docs/src/components/ApiDefinitionCard/ApiTypeTitle.test.tsx b/plugins/api-docs/src/components/ApiDefinitionCard/ApiTypeTitle.test.tsx index d249e59aeb..21726b65d4 100644 --- a/plugins/api-docs/src/components/ApiDefinitionCard/ApiTypeTitle.test.tsx +++ b/plugins/api-docs/src/components/ApiDefinitionCard/ApiTypeTitle.test.tsx @@ -16,7 +16,7 @@ import { ApiEntity } from '@backstage/catalog-model'; import { renderInTestApp, TestApiProvider } from '@backstage/test-utils'; -import React from 'react'; +import { PropsWithChildren, ComponentType, ReactNode } from 'react'; import { ApiDocsConfig, apiDocsConfigRef } from '../../config'; import { ApiTypeTitle } from './ApiTypeTitle'; @@ -24,10 +24,10 @@ describe('', () => { const apiDocsConfig: jest.Mocked = { getApiDefinitionWidget: jest.fn(), } as any; - let Wrapper: React.ComponentType>; + let Wrapper: ComponentType>; beforeEach(() => { - Wrapper = ({ children }: { children?: React.ReactNode }) => ( + Wrapper = ({ children }: { children?: ReactNode }) => ( {children} diff --git a/plugins/api-docs/src/components/ApiDefinitionCard/ApiTypeTitle.tsx b/plugins/api-docs/src/components/ApiDefinitionCard/ApiTypeTitle.tsx index 8880cb9b7d..50d8c6f147 100644 --- a/plugins/api-docs/src/components/ApiDefinitionCard/ApiTypeTitle.tsx +++ b/plugins/api-docs/src/components/ApiDefinitionCard/ApiTypeTitle.tsx @@ -16,7 +16,6 @@ import { ApiEntity } from '@backstage/catalog-model'; import Typography from '@material-ui/core/Typography'; -import React from 'react'; import { apiDocsConfigRef } from '../../config'; import { useApi } from '@backstage/core-plugin-api'; diff --git a/plugins/api-docs/src/components/ApiDefinitionDialog/ApiDefinitionDialog.tsx b/plugins/api-docs/src/components/ApiDefinitionDialog/ApiDefinitionDialog.tsx index 7e532e0049..1e5f63e943 100644 --- a/plugins/api-docs/src/components/ApiDefinitionDialog/ApiDefinitionDialog.tsx +++ b/plugins/api-docs/src/components/ApiDefinitionDialog/ApiDefinitionDialog.tsx @@ -26,7 +26,7 @@ import Tab from '@material-ui/core/Tab'; import Tabs from '@material-ui/core/Tabs'; import Typography from '@material-ui/core/Typography'; import { makeStyles } from '@material-ui/core/styles'; -import React, { useEffect } from 'react'; +import { ReactNode, useState, useEffect } from 'react'; import { apiDocsConfigRef } from '../../config'; import { PlainApiDefinitionWidget } from '../PlainApiDefinitionWidget'; @@ -64,7 +64,7 @@ const useStyles = makeStyles(theme => ({ })); function TabPanel(props: { - children?: React.ReactNode; + children?: ReactNode; index: number; value: number; }) { @@ -106,7 +106,7 @@ export function ApiDefinitionDialog(props: { onClose: () => void; }) { const { open, entity, onClose } = props; - const [activeTab, setActiveTab] = React.useState(0); + const [activeTab, setActiveTab] = useState(0); const classes = useStyles(); useEffect(() => { diff --git a/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.test.tsx b/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.test.tsx index ea091f75f0..f6f7523adf 100644 --- a/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.test.tsx +++ b/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { renderInTestApp } from '@backstage/test-utils'; import { useOutlet } from 'react-router-dom'; import { ApiExplorerPage } from './ApiExplorerPage'; diff --git a/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.tsx b/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.tsx index 1d5d3b359e..41b4ae3a29 100644 --- a/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.tsx +++ b/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { useOutlet } from 'react-router-dom'; import { DefaultApiExplorerPage, diff --git a/plugins/api-docs/src/components/ApiExplorerPage/DefaultApiExplorerPage.test.tsx b/plugins/api-docs/src/components/ApiExplorerPage/DefaultApiExplorerPage.test.tsx index 34706e8136..2825c29528 100644 --- a/plugins/api-docs/src/components/ApiExplorerPage/DefaultApiExplorerPage.test.tsx +++ b/plugins/api-docs/src/components/ApiExplorerPage/DefaultApiExplorerPage.test.tsx @@ -33,7 +33,7 @@ import { } from '@backstage/test-utils'; import DashboardIcon from '@material-ui/icons/Dashboard'; import { screen, waitFor } from '@testing-library/react'; -import React from 'react'; +import { ReactNode } from 'react'; import { apiDocsConfigRef } from '../../config'; import { DefaultApiExplorerPage } from './DefaultApiExplorerPage'; import { permissionApiRef } from '@backstage/plugin-permission-react'; @@ -80,7 +80,7 @@ describe('DefaultApiExplorerPage', () => { const storageApi = mockApis.storage(); - const renderWrapped = (children: React.ReactNode) => + const renderWrapped = (children: ReactNode) => renderInTestApp( ', () => { getApiDefinitionWidget: jest.fn(), } as any; const catalogApi = catalogApiMock.mock(); - let Wrapper: React.ComponentType>; + let Wrapper: ComponentType>; beforeEach(() => { - Wrapper = ({ children }: { children?: React.ReactNode }) => ( + Wrapper = ({ children }: { children?: ReactNode }) => ( ', () => { getApiDefinitionWidget: jest.fn(), } as any; const catalogApi = catalogApiMock.mock(); - let Wrapper: React.ComponentType>; + let Wrapper: ComponentType>; beforeEach(() => { - Wrapper = ({ children }: { children?: React.ReactNode }) => ( + Wrapper = ({ children }: { children?: ReactNode }) => ( ', () => { getApiDefinitionWidget: jest.fn(), } as any; const catalogApi = catalogApiMock.mock(); - let Wrapper: React.ComponentType>; + let Wrapper: ComponentType>; beforeEach(() => { - Wrapper = ({ children }: { children?: React.ReactNode }) => ( + Wrapper = ({ children }: { children?: ReactNode }) => ( ({ diff --git a/plugins/api-docs/src/components/AsyncApiDefinitionWidget/AsyncApiDefinition.tsx b/plugins/api-docs/src/components/AsyncApiDefinitionWidget/AsyncApiDefinition.tsx index 4817774182..da9ef198a0 100644 --- a/plugins/api-docs/src/components/AsyncApiDefinitionWidget/AsyncApiDefinition.tsx +++ b/plugins/api-docs/src/components/AsyncApiDefinitionWidget/AsyncApiDefinition.tsx @@ -17,7 +17,6 @@ import AsyncApi from '@asyncapi/react-component'; import '@asyncapi/react-component/styles/default.css'; import { makeStyles, alpha, darken } from '@material-ui/core/styles'; -import React from 'react'; import { useTheme } from '@material-ui/core/styles'; /** @public */ diff --git a/plugins/api-docs/src/components/AsyncApiDefinitionWidget/AsyncApiDefinitionWidget.tsx b/plugins/api-docs/src/components/AsyncApiDefinitionWidget/AsyncApiDefinitionWidget.tsx index 104a55e576..66e2c8d856 100644 --- a/plugins/api-docs/src/components/AsyncApiDefinitionWidget/AsyncApiDefinitionWidget.tsx +++ b/plugins/api-docs/src/components/AsyncApiDefinitionWidget/AsyncApiDefinitionWidget.tsx @@ -15,12 +15,12 @@ */ import { Progress } from '@backstage/core-components'; -import React, { Suspense } from 'react'; +import { lazy, Suspense } from 'react'; import { AsyncApiResolver } from './AsyncApiDefinition'; // The asyncapi component and related CSS has a significant size, only load it // if the element is actually used. -const LazyAsyncApiDefinition = React.lazy(() => +const LazyAsyncApiDefinition = lazy(() => import('./AsyncApiDefinition').then(m => ({ default: m.AsyncApiDefinition, })), diff --git a/plugins/api-docs/src/components/ComponentsCards/ConsumingComponentsCard.test.tsx b/plugins/api-docs/src/components/ComponentsCards/ConsumingComponentsCard.test.tsx index fe29c94793..cd2e66a9ce 100644 --- a/plugins/api-docs/src/components/ComponentsCards/ConsumingComponentsCard.test.tsx +++ b/plugins/api-docs/src/components/ComponentsCards/ConsumingComponentsCard.test.tsx @@ -23,15 +23,15 @@ import { import { catalogApiMock } from '@backstage/plugin-catalog-react/testUtils'; import { renderInTestApp, TestApiProvider } from '@backstage/test-utils'; import { waitFor } from '@testing-library/react'; -import React from 'react'; +import { PropsWithChildren, ComponentType, ReactNode } from 'react'; import { ConsumingComponentsCard } from './ConsumingComponentsCard'; describe('', () => { const catalogApi = catalogApiMock.mock(); - let Wrapper: React.ComponentType>; + let Wrapper: ComponentType>; beforeEach(() => { - Wrapper = ({ children }: { children?: React.ReactNode }) => ( + Wrapper = ({ children }: { children?: ReactNode }) => ( {children} diff --git a/plugins/api-docs/src/components/ComponentsCards/ConsumingComponentsCard.tsx b/plugins/api-docs/src/components/ComponentsCards/ConsumingComponentsCard.tsx index 8e461bb08a..876898ebb2 100644 --- a/plugins/api-docs/src/components/ComponentsCards/ConsumingComponentsCard.tsx +++ b/plugins/api-docs/src/components/ComponentsCards/ConsumingComponentsCard.tsx @@ -24,7 +24,6 @@ import { useEntity, useRelatedEntities, } from '@backstage/plugin-catalog-react'; -import React from 'react'; import { CodeSnippet, InfoCard, diff --git a/plugins/api-docs/src/components/ComponentsCards/ProvidingComponentsCard.test.tsx b/plugins/api-docs/src/components/ComponentsCards/ProvidingComponentsCard.test.tsx index 5ec7d623d4..dbf130e3d6 100644 --- a/plugins/api-docs/src/components/ComponentsCards/ProvidingComponentsCard.test.tsx +++ b/plugins/api-docs/src/components/ComponentsCards/ProvidingComponentsCard.test.tsx @@ -22,16 +22,16 @@ import { } from '@backstage/plugin-catalog-react'; import { renderInTestApp, TestApiProvider } from '@backstage/test-utils'; import { waitFor } from '@testing-library/react'; -import React from 'react'; +import { PropsWithChildren, ComponentType, ReactNode } from 'react'; import { ProvidingComponentsCard } from './ProvidingComponentsCard'; import { catalogApiMock } from '@backstage/plugin-catalog-react/testUtils'; describe('', () => { const catalogApi = catalogApiMock.mock(); - let Wrapper: React.ComponentType>; + let Wrapper: ComponentType>; beforeEach(() => { - Wrapper = ({ children }: { children?: React.ReactNode }) => ( + Wrapper = ({ children }: { children?: ReactNode }) => ( {children} diff --git a/plugins/api-docs/src/components/ComponentsCards/ProvidingComponentsCard.tsx b/plugins/api-docs/src/components/ComponentsCards/ProvidingComponentsCard.tsx index 33dc7217d4..e207b1c882 100644 --- a/plugins/api-docs/src/components/ComponentsCards/ProvidingComponentsCard.tsx +++ b/plugins/api-docs/src/components/ComponentsCards/ProvidingComponentsCard.tsx @@ -24,7 +24,6 @@ import { useEntity, useRelatedEntities, } from '@backstage/plugin-catalog-react'; -import React from 'react'; import { CodeSnippet, InfoCard, diff --git a/plugins/api-docs/src/components/GraphQlDefinitionWidget/GraphQlDefinition.test.tsx b/plugins/api-docs/src/components/GraphQlDefinitionWidget/GraphQlDefinition.test.tsx index fd78fa9204..a21e18552f 100644 --- a/plugins/api-docs/src/components/GraphQlDefinitionWidget/GraphQlDefinition.test.tsx +++ b/plugins/api-docs/src/components/GraphQlDefinitionWidget/GraphQlDefinition.test.tsx @@ -15,7 +15,6 @@ */ import { renderInTestApp } from '@backstage/test-utils'; -import React from 'react'; import { GraphQlDefinition } from './GraphQlDefinition'; describe('', () => { diff --git a/plugins/api-docs/src/components/GraphQlDefinitionWidget/GraphQlDefinition.tsx b/plugins/api-docs/src/components/GraphQlDefinitionWidget/GraphQlDefinition.tsx index bf45a0e637..505bda8acc 100644 --- a/plugins/api-docs/src/components/GraphQlDefinitionWidget/GraphQlDefinition.tsx +++ b/plugins/api-docs/src/components/GraphQlDefinitionWidget/GraphQlDefinition.tsx @@ -23,7 +23,6 @@ import { } from '@graphiql/react'; import 'graphiql/graphiql.css'; import { buildSchema } from 'graphql'; -import React from 'react'; const useStyles = makeStyles({ root: { diff --git a/plugins/api-docs/src/components/GraphQlDefinitionWidget/GraphQlDefinitionWidget.tsx b/plugins/api-docs/src/components/GraphQlDefinitionWidget/GraphQlDefinitionWidget.tsx index b5cf06e828..604cc56006 100644 --- a/plugins/api-docs/src/components/GraphQlDefinitionWidget/GraphQlDefinitionWidget.tsx +++ b/plugins/api-docs/src/components/GraphQlDefinitionWidget/GraphQlDefinitionWidget.tsx @@ -15,11 +15,11 @@ */ import { Progress } from '@backstage/core-components'; -import React, { Suspense } from 'react'; +import { lazy, Suspense } from 'react'; // The graphql component, graphql and related CSS has a significant size, only // load it if the element is actually used. -const LazyGraphQlDefinition = React.lazy(() => +const LazyGraphQlDefinition = lazy(() => import('./GraphQlDefinition').then(m => ({ default: m.GraphQlDefinition, })), diff --git a/plugins/api-docs/src/components/GrpcApiDefinitionWidget/GrpcApiDefinitionWidget.test.tsx b/plugins/api-docs/src/components/GrpcApiDefinitionWidget/GrpcApiDefinitionWidget.test.tsx index 046614fc91..9b4170bedb 100644 --- a/plugins/api-docs/src/components/GrpcApiDefinitionWidget/GrpcApiDefinitionWidget.test.tsx +++ b/plugins/api-docs/src/components/GrpcApiDefinitionWidget/GrpcApiDefinitionWidget.test.tsx @@ -15,7 +15,6 @@ */ import { renderInTestApp } from '@backstage/test-utils'; -import React from 'react'; import { GrpcApiDefinitionWidget } from './GrpcApiDefinitionWidget'; describe('', () => { diff --git a/plugins/api-docs/src/components/GrpcApiDefinitionWidget/GrpcApiDefinitionWidget.tsx b/plugins/api-docs/src/components/GrpcApiDefinitionWidget/GrpcApiDefinitionWidget.tsx index 8363ebaedc..6bbb2b1edf 100644 --- a/plugins/api-docs/src/components/GrpcApiDefinitionWidget/GrpcApiDefinitionWidget.tsx +++ b/plugins/api-docs/src/components/GrpcApiDefinitionWidget/GrpcApiDefinitionWidget.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { CodeSnippet } from '@backstage/core-components'; import { useTheme } from '@material-ui/core/styles'; diff --git a/plugins/api-docs/src/components/OpenApiDefinitionWidget/OpenApiDefinition.test.tsx b/plugins/api-docs/src/components/OpenApiDefinitionWidget/OpenApiDefinition.test.tsx index 524c416d2d..78aae18b19 100644 --- a/plugins/api-docs/src/components/OpenApiDefinitionWidget/OpenApiDefinition.test.tsx +++ b/plugins/api-docs/src/components/OpenApiDefinitionWidget/OpenApiDefinition.test.tsx @@ -17,7 +17,6 @@ import { renderInTestApp } from '@backstage/test-utils'; import { waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import React from 'react'; import { OpenApiDefinition } from './OpenApiDefinition'; describe('', () => { diff --git a/plugins/api-docs/src/components/OpenApiDefinitionWidget/OpenApiDefinition.tsx b/plugins/api-docs/src/components/OpenApiDefinitionWidget/OpenApiDefinition.tsx index ea1df525b7..8fcc29b829 100644 --- a/plugins/api-docs/src/components/OpenApiDefinitionWidget/OpenApiDefinition.tsx +++ b/plugins/api-docs/src/components/OpenApiDefinitionWidget/OpenApiDefinition.tsx @@ -15,7 +15,7 @@ */ import { makeStyles } from '@material-ui/core/styles'; -import React, { useEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; import SwaggerUI, { SwaggerUIProps } from 'swagger-ui-react'; import 'swagger-ui-react/swagger-ui.css'; diff --git a/plugins/api-docs/src/components/OpenApiDefinitionWidget/OpenApiDefinitionWidget.tsx b/plugins/api-docs/src/components/OpenApiDefinitionWidget/OpenApiDefinitionWidget.tsx index 64ff324941..290c8808fd 100644 --- a/plugins/api-docs/src/components/OpenApiDefinitionWidget/OpenApiDefinitionWidget.tsx +++ b/plugins/api-docs/src/components/OpenApiDefinitionWidget/OpenApiDefinitionWidget.tsx @@ -15,11 +15,11 @@ */ import { Progress } from '@backstage/core-components'; -import React, { Suspense } from 'react'; +import { lazy, Suspense } from 'react'; // The swagger-ui component and related CSS has a significant size, only load it // if the element is actually used. -const LazyOpenApiDefinition = React.lazy(() => +const LazyOpenApiDefinition = lazy(() => import('./OpenApiDefinition').then(m => ({ default: m.OpenApiDefinition, })), diff --git a/plugins/api-docs/src/components/PlainApiDefinitionWidget/PlainApiDefinitionWidget.test.tsx b/plugins/api-docs/src/components/PlainApiDefinitionWidget/PlainApiDefinitionWidget.test.tsx index 1600d608fb..a91e26d701 100644 --- a/plugins/api-docs/src/components/PlainApiDefinitionWidget/PlainApiDefinitionWidget.test.tsx +++ b/plugins/api-docs/src/components/PlainApiDefinitionWidget/PlainApiDefinitionWidget.test.tsx @@ -15,7 +15,6 @@ */ import { renderInTestApp } from '@backstage/test-utils'; -import React from 'react'; import { PlainApiDefinitionWidget } from './PlainApiDefinitionWidget'; describe('', () => { diff --git a/plugins/api-docs/src/components/PlainApiDefinitionWidget/PlainApiDefinitionWidget.tsx b/plugins/api-docs/src/components/PlainApiDefinitionWidget/PlainApiDefinitionWidget.tsx index c7d7d83c8d..382b742e9c 100644 --- a/plugins/api-docs/src/components/PlainApiDefinitionWidget/PlainApiDefinitionWidget.tsx +++ b/plugins/api-docs/src/components/PlainApiDefinitionWidget/PlainApiDefinitionWidget.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { CodeSnippet } from '@backstage/core-components'; /** @public */ diff --git a/plugins/api-docs/src/components/TrpcDefinitionWidget/TrpcApiDefinitionWidget.test.tsx b/plugins/api-docs/src/components/TrpcDefinitionWidget/TrpcApiDefinitionWidget.test.tsx index d7e6951e2e..e555794d87 100644 --- a/plugins/api-docs/src/components/TrpcDefinitionWidget/TrpcApiDefinitionWidget.test.tsx +++ b/plugins/api-docs/src/components/TrpcDefinitionWidget/TrpcApiDefinitionWidget.test.tsx @@ -15,7 +15,6 @@ */ import { renderInTestApp } from '@backstage/test-utils'; -import React from 'react'; import { TrpcApiDefinitionWidget } from './TrpcApiDefinitionWidget'; describe('', () => { diff --git a/plugins/api-docs/src/components/TrpcDefinitionWidget/TrpcApiDefinitionWidget.tsx b/plugins/api-docs/src/components/TrpcDefinitionWidget/TrpcApiDefinitionWidget.tsx index d49f0fa321..8d8565bec3 100644 --- a/plugins/api-docs/src/components/TrpcDefinitionWidget/TrpcApiDefinitionWidget.tsx +++ b/plugins/api-docs/src/components/TrpcDefinitionWidget/TrpcApiDefinitionWidget.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import { CodeSnippet } from '@backstage/core-components'; import { useTheme } from '@material-ui/core/styles'; diff --git a/plugins/app-visualizer/src/components/AppVisualizerPage/AppVisualizerPage.tsx b/plugins/app-visualizer/src/components/AppVisualizerPage/AppVisualizerPage.tsx index b984f8ac59..6410e20965 100644 --- a/plugins/app-visualizer/src/components/AppVisualizerPage/AppVisualizerPage.tsx +++ b/plugins/app-visualizer/src/components/AppVisualizerPage/AppVisualizerPage.tsx @@ -18,7 +18,7 @@ import { Content, Header, HeaderTabs, Page } from '@backstage/core-components'; import { useApi } from '@backstage/core-plugin-api'; import { appTreeApiRef } from '@backstage/frontend-plugin-api'; import Box from '@material-ui/core/Box'; -import React, { useCallback, useEffect, useMemo } from 'react'; +import { useCallback, useEffect, useMemo } from 'react'; import { DetailedVisualizer } from './DetailedVisualizer'; import { TextVisualizer } from './TextVisualizer'; import { TreeVisualizer } from './TreeVisualizer'; diff --git a/plugins/app-visualizer/src/components/AppVisualizerPage/DetailedVisualizer.tsx b/plugins/app-visualizer/src/components/AppVisualizerPage/DetailedVisualizer.tsx index fe255b2ab1..ba93507ae2 100644 --- a/plugins/app-visualizer/src/components/AppVisualizerPage/DetailedVisualizer.tsx +++ b/plugins/app-visualizer/src/components/AppVisualizerPage/DetailedVisualizer.tsx @@ -33,7 +33,6 @@ import * as colors from '@material-ui/core/colors'; import { makeStyles } from '@material-ui/core/styles'; import InputIcon from '@material-ui/icons/InputSharp'; import DisabledIcon from '@material-ui/icons/NotInterestedSharp'; -import React from 'react'; import { Link } from 'react-router-dom'; function createOutputColorGenerator( diff --git a/plugins/app-visualizer/src/components/AppVisualizerPage/TextVisualizer.tsx b/plugins/app-visualizer/src/components/AppVisualizerPage/TextVisualizer.tsx index 50b1f61484..b388da80b4 100644 --- a/plugins/app-visualizer/src/components/AppVisualizerPage/TextVisualizer.tsx +++ b/plugins/app-visualizer/src/components/AppVisualizerPage/TextVisualizer.tsx @@ -19,7 +19,7 @@ import Box from '@material-ui/core/Box'; import Checkbox from '@material-ui/core/Checkbox'; import FormControlLabel from '@material-ui/core/FormControlLabel'; import Paper from '@material-ui/core/Paper'; -import React, { ReactNode, useState } from 'react'; +import { ReactNode, useState } from 'react'; function mkDiv( children: ReactNode, diff --git a/plugins/app-visualizer/src/components/AppVisualizerPage/TreeVisualizer.tsx b/plugins/app-visualizer/src/components/AppVisualizerPage/TreeVisualizer.tsx index eac7c4e203..8532168bc0 100644 --- a/plugins/app-visualizer/src/components/AppVisualizerPage/TreeVisualizer.tsx +++ b/plugins/app-visualizer/src/components/AppVisualizerPage/TreeVisualizer.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { DependencyGraph, DependencyGraphTypes, diff --git a/plugins/app-visualizer/src/plugin.tsx b/plugins/app-visualizer/src/plugin.tsx index 0e18b692e8..465f5100ce 100644 --- a/plugins/app-visualizer/src/plugin.tsx +++ b/plugins/app-visualizer/src/plugin.tsx @@ -21,7 +21,6 @@ import { PageBlueprint, } from '@backstage/frontend-plugin-api'; import VisualizerIcon from '@material-ui/icons/Visibility'; -import React from 'react'; const rootRouteRef = createRouteRef(); diff --git a/plugins/app/src/extensions/App.tsx b/plugins/app/src/extensions/App.tsx index 7f4b3d5ee1..18f1d93650 100644 --- a/plugins/app/src/extensions/App.tsx +++ b/plugins/app/src/extensions/App.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { ExtensionBoundary, coreExtensionData, diff --git a/plugins/app/src/extensions/AppLayout.tsx b/plugins/app/src/extensions/AppLayout.tsx index 3a0560a807..a333641ed6 100644 --- a/plugins/app/src/extensions/AppLayout.tsx +++ b/plugins/app/src/extensions/AppLayout.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { createExtension, coreExtensionData, diff --git a/plugins/app/src/extensions/AppNav.tsx b/plugins/app/src/extensions/AppNav.tsx index 3e4fcebf8c..eaec264dca 100644 --- a/plugins/app/src/extensions/AppNav.tsx +++ b/plugins/app/src/extensions/AppNav.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { createExtension, coreExtensionData, diff --git a/plugins/app/src/extensions/AppRoot.tsx b/plugins/app/src/extensions/AppRoot.tsx index 1aeb7b9537..17e8aa3b1f 100644 --- a/plugins/app/src/extensions/AppRoot.tsx +++ b/plugins/app/src/extensions/AppRoot.tsx @@ -14,11 +14,12 @@ * limitations under the License. */ -import React, { +import { ComponentType, PropsWithChildren, ReactNode, useState, + JSX, } from 'react'; import { AppRootWrapperBlueprint, @@ -94,7 +95,7 @@ export const AppRoot = createExtension({ }); } - let content: React.ReactNode = inputs.children.get( + let content: ReactNode = inputs.children.get( coreExtensionData.reactElement, ); @@ -182,7 +183,7 @@ export interface AppRouterProps { children?: ReactNode; SignInPageComponent?: ComponentType; RouterComponent?: ComponentType>; - extraElements?: Array; + extraElements?: Array; } function DefaultRouter(props: PropsWithChildren<{}>) { diff --git a/plugins/app/src/extensions/AppRoutes.tsx b/plugins/app/src/extensions/AppRoutes.tsx index 5880d6182e..304b0b0289 100644 --- a/plugins/app/src/extensions/AppRoutes.tsx +++ b/plugins/app/src/extensions/AppRoutes.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { createExtension, coreExtensionData, diff --git a/plugins/app/src/extensions/AppThemeApi.tsx b/plugins/app/src/extensions/AppThemeApi.tsx index a31e29e58b..2d35a50cd5 100644 --- a/plugins/app/src/extensions/AppThemeApi.tsx +++ b/plugins/app/src/extensions/AppThemeApi.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { UnifiedThemeProvider, themes as builtinThemes, diff --git a/plugins/app/src/extensions/DefaultSignInPage.tsx b/plugins/app/src/extensions/DefaultSignInPage.tsx index 29b384c7a2..10ad638b00 100644 --- a/plugins/app/src/extensions/DefaultSignInPage.tsx +++ b/plugins/app/src/extensions/DefaultSignInPage.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import { SignInPageBlueprint } from '@backstage/frontend-plugin-api'; import { SignInPage } from '@backstage/core-components'; diff --git a/plugins/app/src/extensions/DialogDisplay.test.tsx b/plugins/app/src/extensions/DialogDisplay.test.tsx index 8bcf86817c..8f7eb4e857 100644 --- a/plugins/app/src/extensions/DialogDisplay.test.tsx +++ b/plugins/app/src/extensions/DialogDisplay.test.tsx @@ -15,7 +15,7 @@ */ import { renderInTestApp } from '@backstage/frontend-test-utils'; -import React, { act, useEffect } from 'react'; +import { act, useEffect } from 'react'; import { AppRootElementBlueprint, DialogApi, diff --git a/plugins/app/src/extensions/DialogDisplay.tsx b/plugins/app/src/extensions/DialogDisplay.tsx index d7efee56a7..ba74aa7172 100644 --- a/plugins/app/src/extensions/DialogDisplay.tsx +++ b/plugins/app/src/extensions/DialogDisplay.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useEffect, useState } from 'react'; +import { Fragment, useEffect, useState } from 'react'; import { AppRootElementBlueprint, DialogApi, @@ -110,7 +110,7 @@ export const dialogDisplayAppRootElement = const dialogApi = apis.get(dialogApiRef); if (!isInternalDialogApi(dialogApi)) { return originalFactory({ - element: , + element: , }); } return originalFactory({ diff --git a/plugins/app/src/extensions/components.tsx b/plugins/app/src/extensions/components.tsx index 829cb99ea2..c5fa8411c7 100644 --- a/plugins/app/src/extensions/components.tsx +++ b/plugins/app/src/extensions/components.tsx @@ -14,8 +14,6 @@ * limitations under the License. */ -import React from 'react'; -// TODO: Dependency on MUI should be removed from core packages import Button from '@material-ui/core/Button'; import { diff --git a/plugins/app/src/extensions/elements.tsx b/plugins/app/src/extensions/elements.tsx index bbb6374ebe..5a9644e4ef 100644 --- a/plugins/app/src/extensions/elements.tsx +++ b/plugins/app/src/extensions/elements.tsx @@ -16,7 +16,6 @@ import { AlertDisplay, OAuthRequestDialog } from '@backstage/core-components'; import { AppRootElementBlueprint } from '@backstage/frontend-plugin-api'; -import React from 'react'; export const oauthRequestDialogAppRootElement = AppRootElementBlueprint.make({ name: 'oauth-request-dialog', diff --git a/plugins/auth-react/src/components/CookieAuthRedirect/CookieAuthRedirect.test.tsx b/plugins/auth-react/src/components/CookieAuthRedirect/CookieAuthRedirect.test.tsx index 18c6408407..353af36644 100644 --- a/plugins/auth-react/src/components/CookieAuthRedirect/CookieAuthRedirect.test.tsx +++ b/plugins/auth-react/src/components/CookieAuthRedirect/CookieAuthRedirect.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { screen, waitFor } from '@testing-library/react'; import { TestApiProvider, diff --git a/plugins/auth-react/src/components/CookieAuthRedirect/CookieAuthRedirect.tsx b/plugins/auth-react/src/components/CookieAuthRedirect/CookieAuthRedirect.tsx index c89aa6a54d..eb0bac779a 100644 --- a/plugins/auth-react/src/components/CookieAuthRedirect/CookieAuthRedirect.tsx +++ b/plugins/auth-react/src/components/CookieAuthRedirect/CookieAuthRedirect.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { identityApiRef, useApi } from '@backstage/core-plugin-api'; import { useAsync, useMountEffect } from '@react-hookz/web'; diff --git a/plugins/auth-react/src/components/CookieAuthRefreshProvider/CookieAuthRefreshProvider.test.tsx b/plugins/auth-react/src/components/CookieAuthRefreshProvider/CookieAuthRefreshProvider.test.tsx index 8b07abb163..6804dbbd12 100644 --- a/plugins/auth-react/src/components/CookieAuthRefreshProvider/CookieAuthRefreshProvider.test.tsx +++ b/plugins/auth-react/src/components/CookieAuthRefreshProvider/CookieAuthRefreshProvider.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { CookieAuthRefreshProvider } from './CookieAuthRefreshProvider'; diff --git a/plugins/auth-react/src/components/CookieAuthRefreshProvider/CookieAuthRefreshProvider.tsx b/plugins/auth-react/src/components/CookieAuthRefreshProvider/CookieAuthRefreshProvider.tsx index 307898dbea..f227a701f5 100644 --- a/plugins/auth-react/src/components/CookieAuthRefreshProvider/CookieAuthRefreshProvider.tsx +++ b/plugins/auth-react/src/components/CookieAuthRefreshProvider/CookieAuthRefreshProvider.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { ReactNode } from 'react'; +import { ReactNode } from 'react'; import { ErrorPanel } from '@backstage/core-components'; import { useApp } from '@backstage/core-plugin-api'; import Button from '@material-ui/core/Button'; diff --git a/plugins/auth-react/src/hooks/useCookieAuthRefresh/useCookieAuthRefresh.test.tsx b/plugins/auth-react/src/hooks/useCookieAuthRefresh/useCookieAuthRefresh.test.tsx index 6b59dbcb9e..7b86d8dc83 100644 --- a/plugins/auth-react/src/hooks/useCookieAuthRefresh/useCookieAuthRefresh.test.tsx +++ b/plugins/auth-react/src/hooks/useCookieAuthRefresh/useCookieAuthRefresh.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { renderHook, waitFor } from '@testing-library/react'; import { fetchApiRef, discoveryApiRef } from '@backstage/core-plugin-api'; import { TestApiProvider, mockApis } from '@backstage/test-utils'; diff --git a/plugins/catalog-graph/dev/index.tsx b/plugins/catalog-graph/dev/index.tsx index 8d9766e894..0d44d67781 100644 --- a/plugins/catalog-graph/dev/index.tsx +++ b/plugins/catalog-graph/dev/index.tsx @@ -45,7 +45,6 @@ import { import { JsonObject } from '@backstage/types'; import Grid from '@material-ui/core/Grid'; import _ from 'lodash'; -import React from 'react'; import { CatalogGraphPage, catalogGraphPlugin, diff --git a/plugins/catalog-graph/src/alpha.tsx b/plugins/catalog-graph/src/alpha.tsx index 8186fd3b96..096dcca2b8 100644 --- a/plugins/catalog-graph/src/alpha.tsx +++ b/plugins/catalog-graph/src/alpha.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { createFrontendPlugin, PageBlueprint, diff --git a/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.test.tsx b/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.test.tsx index 22eff03843..e09d57bd31 100644 --- a/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.test.tsx +++ b/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.test.tsx @@ -31,7 +31,6 @@ import { } from '@backstage/test-utils'; import { screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import React from 'react'; import { catalogGraphRouteRef } from '../../routes'; import { CatalogGraphCard } from './CatalogGraphCard'; import Button from '@material-ui/core/Button'; diff --git a/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx b/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx index 73b4f2f2ee..a75993a1bc 100644 --- a/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx +++ b/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx @@ -28,7 +28,7 @@ import { } from '@backstage/plugin-catalog-react'; import { makeStyles, Theme } from '@material-ui/core/styles'; import qs from 'qs'; -import React, { MouseEvent, ReactNode, useCallback, useMemo } from 'react'; +import { MouseEvent, ReactNode, useCallback, useMemo } from 'react'; import { useNavigate } from 'react-router-dom'; import { catalogGraphRouteRef } from '../../routes'; import { @@ -36,8 +36,8 @@ import { Direction, EntityNode, EntityRelationsGraph, + EntityRelationsGraphProps, } from '../EntityRelationsGraph'; -import { EntityRelationsGraphProps } from '../EntityRelationsGraph'; /** @public */ export type CatalogGraphCardClassKey = 'card' | 'graph'; diff --git a/plugins/catalog-graph/src/components/CatalogGraphPage/CatalogGraphPage.test.tsx b/plugins/catalog-graph/src/components/CatalogGraphPage/CatalogGraphPage.test.tsx index 054986e595..dabb29a21d 100644 --- a/plugins/catalog-graph/src/components/CatalogGraphPage/CatalogGraphPage.test.tsx +++ b/plugins/catalog-graph/src/components/CatalogGraphPage/CatalogGraphPage.test.tsx @@ -29,7 +29,6 @@ import { } from '@backstage/test-utils'; import { screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import React from 'react'; import { CatalogGraphPage } from './CatalogGraphPage'; import { GetEntitiesByRefsRequest } from '@backstage/catalog-client'; diff --git a/plugins/catalog-graph/src/components/CatalogGraphPage/CatalogGraphPage.tsx b/plugins/catalog-graph/src/components/CatalogGraphPage/CatalogGraphPage.tsx index 23363668a6..cf3e628a98 100644 --- a/plugins/catalog-graph/src/components/CatalogGraphPage/CatalogGraphPage.tsx +++ b/plugins/catalog-graph/src/components/CatalogGraphPage/CatalogGraphPage.tsx @@ -34,7 +34,7 @@ import { makeStyles } from '@material-ui/core/styles'; import FilterListIcon from '@material-ui/icons/FilterList'; import ZoomOutMap from '@material-ui/icons/ZoomOutMap'; import ToggleButton from '@material-ui/lab/ToggleButton'; -import React, { MouseEvent, useCallback } from 'react'; +import { MouseEvent, useCallback } from 'react'; import { useNavigate } from 'react-router-dom'; import { ALL_RELATION_PAIRS, diff --git a/plugins/catalog-graph/src/components/CatalogGraphPage/CurveFilter.test.tsx b/plugins/catalog-graph/src/components/CatalogGraphPage/CurveFilter.test.tsx index 242bed6311..a6c0d2a2f0 100644 --- a/plugins/catalog-graph/src/components/CatalogGraphPage/CurveFilter.test.tsx +++ b/plugins/catalog-graph/src/components/CatalogGraphPage/CurveFilter.test.tsx @@ -16,7 +16,6 @@ import { render, waitFor, screen, within } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import React from 'react'; import { CurveFilter } from './CurveFilter'; describe('', () => { diff --git a/plugins/catalog-graph/src/components/CatalogGraphPage/CurveFilter.tsx b/plugins/catalog-graph/src/components/CatalogGraphPage/CurveFilter.tsx index f4e52bf23f..411c144b05 100644 --- a/plugins/catalog-graph/src/components/CatalogGraphPage/CurveFilter.tsx +++ b/plugins/catalog-graph/src/components/CatalogGraphPage/CurveFilter.tsx @@ -15,7 +15,7 @@ */ import { Select, SelectedItems } from '@backstage/core-components'; import Box from '@material-ui/core/Box'; -import React, { useCallback } from 'react'; +import { useCallback } from 'react'; type Curve = 'curveStepBefore' | 'curveMonotoneX'; const CURVE_DISPLAY_NAMES: Record = { diff --git a/plugins/catalog-graph/src/components/CatalogGraphPage/DirectionFilter.test.tsx b/plugins/catalog-graph/src/components/CatalogGraphPage/DirectionFilter.test.tsx index dc74218316..d497e24162 100644 --- a/plugins/catalog-graph/src/components/CatalogGraphPage/DirectionFilter.test.tsx +++ b/plugins/catalog-graph/src/components/CatalogGraphPage/DirectionFilter.test.tsx @@ -16,7 +16,6 @@ import { render, waitFor, screen, within } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import React from 'react'; import { Direction } from '../EntityRelationsGraph'; import { DirectionFilter } from './DirectionFilter'; diff --git a/plugins/catalog-graph/src/components/CatalogGraphPage/DirectionFilter.tsx b/plugins/catalog-graph/src/components/CatalogGraphPage/DirectionFilter.tsx index 5fe308a90b..2af65adbc2 100644 --- a/plugins/catalog-graph/src/components/CatalogGraphPage/DirectionFilter.tsx +++ b/plugins/catalog-graph/src/components/CatalogGraphPage/DirectionFilter.tsx @@ -15,7 +15,7 @@ */ import { Select, SelectedItems } from '@backstage/core-components'; import Box from '@material-ui/core/Box'; -import React, { useCallback } from 'react'; +import { useCallback } from 'react'; import { Direction } from '../EntityRelationsGraph'; const DIRECTION_DISPLAY_NAMES = { diff --git a/plugins/catalog-graph/src/components/CatalogGraphPage/MaxDepthFilter.test.tsx b/plugins/catalog-graph/src/components/CatalogGraphPage/MaxDepthFilter.test.tsx index 89f3169981..ef3df7eb53 100644 --- a/plugins/catalog-graph/src/components/CatalogGraphPage/MaxDepthFilter.test.tsx +++ b/plugins/catalog-graph/src/components/CatalogGraphPage/MaxDepthFilter.test.tsx @@ -16,7 +16,6 @@ import { render, screen } from '@testing-library/react'; import user from '@testing-library/user-event'; -import React from 'react'; import { MaxDepthFilter } from './MaxDepthFilter'; describe('', () => { diff --git a/plugins/catalog-graph/src/components/CatalogGraphPage/MaxDepthFilter.tsx b/plugins/catalog-graph/src/components/CatalogGraphPage/MaxDepthFilter.tsx index 5f7b891d72..33742ad72e 100644 --- a/plugins/catalog-graph/src/components/CatalogGraphPage/MaxDepthFilter.tsx +++ b/plugins/catalog-graph/src/components/CatalogGraphPage/MaxDepthFilter.tsx @@ -21,7 +21,7 @@ import OutlinedInput from '@material-ui/core/OutlinedInput'; import Typography from '@material-ui/core/Typography'; import { makeStyles } from '@material-ui/core/styles'; import ClearIcon from '@material-ui/icons/Clear'; -import React, { useCallback, useEffect, useRef, useState } from 'react'; +import { ChangeEvent, useCallback, useEffect, useRef, useState } from 'react'; export type Props = { value: number; @@ -57,18 +57,15 @@ export const MaxDepthFilter = ({ value, onChange }: Props) => { }, [value]); // When the entered text changes, update ourselves and communicate externally - const handleChange = useCallback( - (event: React.ChangeEvent) => { - const newValueNumeric = Number(event.target.value); - const newValue = - Number.isFinite(newValueNumeric) && newValueNumeric > 0 - ? newValueNumeric - : Number.POSITIVE_INFINITY; - setCurrentValue(newValue); - onChangeRef.current(newValue); - }, - [], - ); + const handleChange = useCallback((event: ChangeEvent) => { + const newValueNumeric = Number(event.target.value); + const newValue = + Number.isFinite(newValueNumeric) && newValueNumeric > 0 + ? newValueNumeric + : Number.POSITIVE_INFINITY; + setCurrentValue(newValue); + onChangeRef.current(newValue); + }, []); const reset = useCallback(() => { setCurrentValue(Number.POSITIVE_INFINITY); diff --git a/plugins/catalog-graph/src/components/CatalogGraphPage/SelectedKindsFilter.test.tsx b/plugins/catalog-graph/src/components/CatalogGraphPage/SelectedKindsFilter.test.tsx index 33b6dfdb13..929b22755d 100644 --- a/plugins/catalog-graph/src/components/CatalogGraphPage/SelectedKindsFilter.test.tsx +++ b/plugins/catalog-graph/src/components/CatalogGraphPage/SelectedKindsFilter.test.tsx @@ -20,7 +20,6 @@ import { catalogApiRef } from '@backstage/plugin-catalog-react'; import { renderWithEffects, TestApiRegistry } from '@backstage/test-utils'; import { waitFor, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import React from 'react'; import { SelectedKindsFilter } from './SelectedKindsFilter'; import { catalogApiMock } from '@backstage/plugin-catalog-react/testUtils'; diff --git a/plugins/catalog-graph/src/components/CatalogGraphPage/SelectedKindsFilter.tsx b/plugins/catalog-graph/src/components/CatalogGraphPage/SelectedKindsFilter.tsx index e0b7f7fa55..4970c4527a 100644 --- a/plugins/catalog-graph/src/components/CatalogGraphPage/SelectedKindsFilter.tsx +++ b/plugins/catalog-graph/src/components/CatalogGraphPage/SelectedKindsFilter.tsx @@ -25,7 +25,7 @@ import CheckBoxIcon from '@material-ui/icons/CheckBox'; import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; import Autocomplete from '@material-ui/lab/Autocomplete'; -import React, { useCallback, useEffect, useMemo } from 'react'; +import { useCallback, useEffect, useMemo } from 'react'; import useAsync from 'react-use/esm/useAsync'; /** @public */ diff --git a/plugins/catalog-graph/src/components/CatalogGraphPage/SelectedRelationsFilter.test.tsx b/plugins/catalog-graph/src/components/CatalogGraphPage/SelectedRelationsFilter.test.tsx index 8baa7865b9..41df29d072 100644 --- a/plugins/catalog-graph/src/components/CatalogGraphPage/SelectedRelationsFilter.test.tsx +++ b/plugins/catalog-graph/src/components/CatalogGraphPage/SelectedRelationsFilter.test.tsx @@ -21,7 +21,6 @@ import { } from '@backstage/catalog-model'; import { render, waitFor, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import React from 'react'; import { ALL_RELATION_PAIRS } from '../EntityRelationsGraph'; import { SelectedRelationsFilter } from './SelectedRelationsFilter'; diff --git a/plugins/catalog-graph/src/components/CatalogGraphPage/SelectedRelationsFilter.tsx b/plugins/catalog-graph/src/components/CatalogGraphPage/SelectedRelationsFilter.tsx index af67c0ef8b..f06c41e4a7 100644 --- a/plugins/catalog-graph/src/components/CatalogGraphPage/SelectedRelationsFilter.tsx +++ b/plugins/catalog-graph/src/components/CatalogGraphPage/SelectedRelationsFilter.tsx @@ -23,7 +23,7 @@ import CheckBoxIcon from '@material-ui/icons/CheckBox'; import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; import Autocomplete from '@material-ui/lab/Autocomplete'; -import React, { useCallback, useMemo } from 'react'; +import { useCallback, useMemo } from 'react'; import { RelationPairs } from '../EntityRelationsGraph'; /** @public */ diff --git a/plugins/catalog-graph/src/components/CatalogGraphPage/SwitchFilter.test.tsx b/plugins/catalog-graph/src/components/CatalogGraphPage/SwitchFilter.test.tsx index 322232d774..14be6bb800 100644 --- a/plugins/catalog-graph/src/components/CatalogGraphPage/SwitchFilter.test.tsx +++ b/plugins/catalog-graph/src/components/CatalogGraphPage/SwitchFilter.test.tsx @@ -16,7 +16,6 @@ import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import React from 'react'; import { SwitchFilter } from './SwitchFilter'; describe('', () => { diff --git a/plugins/catalog-graph/src/components/CatalogGraphPage/SwitchFilter.tsx b/plugins/catalog-graph/src/components/CatalogGraphPage/SwitchFilter.tsx index b2878f1934..ec0c18e8fb 100644 --- a/plugins/catalog-graph/src/components/CatalogGraphPage/SwitchFilter.tsx +++ b/plugins/catalog-graph/src/components/CatalogGraphPage/SwitchFilter.tsx @@ -17,7 +17,7 @@ import Box from '@material-ui/core/Box'; import FormControlLabel from '@material-ui/core/FormControlLabel'; import Switch from '@material-ui/core/Switch'; import { makeStyles } from '@material-ui/core/styles'; -import React, { useCallback } from 'react'; +import { ChangeEvent, useCallback } from 'react'; export type Props = { label: string; @@ -42,7 +42,7 @@ export const SwitchFilter = ({ label, value, onChange }: Props) => { const classes = useStyles(); const handleChange = useCallback( - (event: React.ChangeEvent) => { + (event: ChangeEvent) => { onChange(event.target.checked); }, [onChange], diff --git a/plugins/catalog-graph/src/components/CatalogGraphPage/useCatalogGraphPage.test.tsx b/plugins/catalog-graph/src/components/CatalogGraphPage/useCatalogGraphPage.test.tsx index 85cb606482..c255281ff0 100644 --- a/plugins/catalog-graph/src/components/CatalogGraphPage/useCatalogGraphPage.test.tsx +++ b/plugins/catalog-graph/src/components/CatalogGraphPage/useCatalogGraphPage.test.tsx @@ -15,13 +15,13 @@ */ import { RELATION_MEMBER_OF } from '@backstage/catalog-model'; import { renderHook, waitFor } from '@testing-library/react'; -import React from 'react'; +import { ReactNode } from 'react'; import { act } from 'react-dom/test-utils'; import { BrowserRouter } from 'react-router-dom'; import { Direction } from '../EntityRelationsGraph'; import { useCatalogGraphPage } from './useCatalogGraphPage'; -const wrapper = ({ children }: { children?: React.ReactNode }) => { +const wrapper = ({ children }: { children?: ReactNode }) => { return {children}; }; diff --git a/plugins/catalog-graph/src/components/EntityRelationsGraph/DefaultRenderLabel.test.tsx b/plugins/catalog-graph/src/components/EntityRelationsGraph/DefaultRenderLabel.test.tsx index 14692f1a7b..f400469a66 100644 --- a/plugins/catalog-graph/src/components/EntityRelationsGraph/DefaultRenderLabel.test.tsx +++ b/plugins/catalog-graph/src/components/EntityRelationsGraph/DefaultRenderLabel.test.tsx @@ -19,7 +19,6 @@ import { RELATION_PARENT_OF, } from '@backstage/catalog-model'; import { render, screen } from '@testing-library/react'; -import React from 'react'; import { DefaultRenderLabel } from './DefaultRenderLabel'; describe('', () => { diff --git a/plugins/catalog-graph/src/components/EntityRelationsGraph/DefaultRenderLabel.tsx b/plugins/catalog-graph/src/components/EntityRelationsGraph/DefaultRenderLabel.tsx index 14b88e59b3..a38f11fca3 100644 --- a/plugins/catalog-graph/src/components/EntityRelationsGraph/DefaultRenderLabel.tsx +++ b/plugins/catalog-graph/src/components/EntityRelationsGraph/DefaultRenderLabel.tsx @@ -15,7 +15,6 @@ */ import { DependencyGraphTypes } from '@backstage/core-components'; import makeStyles from '@material-ui/core/styles/makeStyles'; -import React from 'react'; import { EntityEdgeData } from './types'; import classNames from 'classnames'; diff --git a/plugins/catalog-graph/src/components/EntityRelationsGraph/DefaultRenderNode.test.tsx b/plugins/catalog-graph/src/components/EntityRelationsGraph/DefaultRenderNode.test.tsx index 10aa62f946..d68b70b2a4 100644 --- a/plugins/catalog-graph/src/components/EntityRelationsGraph/DefaultRenderNode.test.tsx +++ b/plugins/catalog-graph/src/components/EntityRelationsGraph/DefaultRenderNode.test.tsx @@ -16,7 +16,6 @@ import { renderInTestApp } from '@backstage/test-utils'; import { screen } from '@testing-library/react'; -import React from 'react'; import { DefaultRenderNode } from './DefaultRenderNode'; import userEvent from '@testing-library/user-event'; diff --git a/plugins/catalog-graph/src/components/EntityRelationsGraph/DefaultRenderNode.tsx b/plugins/catalog-graph/src/components/EntityRelationsGraph/DefaultRenderNode.tsx index dcdba40f9a..3541e4511e 100644 --- a/plugins/catalog-graph/src/components/EntityRelationsGraph/DefaultRenderNode.tsx +++ b/plugins/catalog-graph/src/components/EntityRelationsGraph/DefaultRenderNode.tsx @@ -18,7 +18,7 @@ import { IconComponent } from '@backstage/core-plugin-api'; import { useEntityPresentation } from '@backstage/plugin-catalog-react'; import { makeStyles } from '@material-ui/core/styles'; import classNames from 'classnames'; -import React, { useLayoutEffect, useRef, useState } from 'react'; +import { useLayoutEffect, useRef, useState } from 'react'; import { EntityIcon } from './EntityIcon'; import { EntityNodeData } from './types'; import { DEFAULT_NAMESPACE } from '@backstage/catalog-model'; diff --git a/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityIcon.test.tsx b/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityIcon.test.tsx index 8683af9c1e..a6309ba1ca 100644 --- a/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityIcon.test.tsx +++ b/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityIcon.test.tsx @@ -15,7 +15,6 @@ */ import { renderInTestApp } from '@backstage/test-utils'; -import React from 'react'; import { EntityIcon } from './EntityIcon'; import MuiMemoryIcon from '@material-ui/icons/Memory'; import { IconComponent } from '@backstage/core-plugin-api'; diff --git a/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityIcon.tsx b/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityIcon.tsx index a46a8bcc9d..47505afb93 100644 --- a/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityIcon.tsx +++ b/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityIcon.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import SvgIcon from '@material-ui/core/SvgIcon'; import { OverridableComponent } from '@material-ui/core/OverridableComponent'; import { SvgIconTypeMap } from '@material-ui/core/SvgIcon/SvgIcon'; diff --git a/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.test.tsx b/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.test.tsx index 48c7f28336..069deff3c4 100644 --- a/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.test.tsx +++ b/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.test.tsx @@ -26,7 +26,7 @@ import { catalogApiRef } from '@backstage/plugin-catalog-react'; import { renderInTestApp, TestApiProvider } from '@backstage/test-utils'; import { screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import React, { FunctionComponent } from 'react'; +import { PropsWithChildren, FunctionComponent } from 'react'; import { EntityRelationsGraph } from './EntityRelationsGraph'; import { catalogApiMock } from '@backstage/plugin-catalog-react/testUtils'; @@ -68,7 +68,7 @@ import { catalogApiMock } from '@backstage/plugin-catalog-react/testUtils'; // eslint-disable-next-line jest/no-disabled-tests describe.skip('', () => { - let Wrapper: FunctionComponent>; + let Wrapper: FunctionComponent>; const entities: { [ref: string]: Entity } = { 'b:d/c': { apiVersion: 'a', diff --git a/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.tsx b/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.tsx index 699c4d9b30..933aa230be 100644 --- a/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.tsx +++ b/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.tsx @@ -27,7 +27,7 @@ import { errorApiRef, useApi } from '@backstage/core-plugin-api'; import CircularProgress from '@material-ui/core/CircularProgress'; import { makeStyles, useTheme } from '@material-ui/core/styles'; import classNames from 'classnames'; -import React, { MouseEvent, useEffect, useMemo } from 'react'; +import { MouseEvent, useEffect, useMemo } from 'react'; import { DefaultRenderLabel } from './DefaultRenderLabel'; import { DefaultRenderNode } from './DefaultRenderNode'; import { ALL_RELATION_PAIRS, RelationPairs } from './relations'; diff --git a/plugins/catalog-import/dev/index.tsx b/plugins/catalog-import/dev/index.tsx index b35dc2a298..3031b67d30 100644 --- a/plugins/catalog-import/dev/index.tsx +++ b/plugins/catalog-import/dev/index.tsx @@ -24,7 +24,6 @@ import ListItemIcon from '@material-ui/core/ListItemIcon'; import ListItemText from '@material-ui/core/ListItemText'; import AlarmIcon from '@material-ui/icons/Alarm'; import LocationOnIcon from '@material-ui/icons/LocationOn'; -import React from 'react'; import { AnalyzeResult, CatalogImportApi, diff --git a/plugins/catalog-import/src/alpha.tsx b/plugins/catalog-import/src/alpha.tsx index ab6e3f2a68..e70d964ce2 100644 --- a/plugins/catalog-import/src/alpha.tsx +++ b/plugins/catalog-import/src/alpha.tsx @@ -33,7 +33,6 @@ import { scmAuthApiRef, scmIntegrationsApiRef, } from '@backstage/integration-react'; -import React from 'react'; import { CatalogImportClient, catalogImportApiRef } from './api'; import { rootRouteRef } from './plugin'; import { catalogApiRef } from '@backstage/plugin-catalog-react'; diff --git a/plugins/catalog-import/src/components/Buttons/index.tsx b/plugins/catalog-import/src/components/Buttons/index.tsx index cdcb2169a6..6ba5a83fb5 100644 --- a/plugins/catalog-import/src/components/Buttons/index.tsx +++ b/plugins/catalog-import/src/components/Buttons/index.tsx @@ -18,7 +18,7 @@ import { LinkButton } from '@backstage/core-components'; import Button from '@material-ui/core/Button'; import CircularProgress from '@material-ui/core/CircularProgress'; import { makeStyles } from '@material-ui/core/styles'; -import React, { ComponentProps } from 'react'; +import { ComponentProps } from 'react'; const useStyles = makeStyles(theme => ({ wrapper: { diff --git a/plugins/catalog-import/src/components/DefaultImportPage/DefaultImportPage.test.tsx b/plugins/catalog-import/src/components/DefaultImportPage/DefaultImportPage.test.tsx index 0e9378543e..336d1b9d36 100644 --- a/plugins/catalog-import/src/components/DefaultImportPage/DefaultImportPage.test.tsx +++ b/plugins/catalog-import/src/components/DefaultImportPage/DefaultImportPage.test.tsx @@ -20,7 +20,6 @@ import { catalogApiRef } from '@backstage/plugin-catalog-react'; import { catalogApiMock } from '@backstage/plugin-catalog-react/testUtils'; import { renderInTestApp, TestApiRegistry } from '@backstage/test-utils'; import { screen } from '@testing-library/react'; -import React from 'react'; import { catalogImportApiRef, CatalogImportClient } from '../../api'; import { DefaultImportPage } from './DefaultImportPage'; diff --git a/plugins/catalog-import/src/components/DefaultImportPage/DefaultImportPage.tsx b/plugins/catalog-import/src/components/DefaultImportPage/DefaultImportPage.tsx index cdff61fe73..18ffe2bd8d 100644 --- a/plugins/catalog-import/src/components/DefaultImportPage/DefaultImportPage.tsx +++ b/plugins/catalog-import/src/components/DefaultImportPage/DefaultImportPage.tsx @@ -25,7 +25,6 @@ import { configApiRef, useApi } from '@backstage/core-plugin-api'; import Grid from '@material-ui/core/Grid'; import useMediaQuery from '@material-ui/core/useMediaQuery'; import { useTheme } from '@material-ui/core/styles'; -import React from 'react'; import { ImportInfoCard } from '../ImportInfoCard'; import { ImportStepper } from '../ImportStepper'; import { useTranslationRef } from '@backstage/core-plugin-api/alpha'; diff --git a/plugins/catalog-import/src/components/EntityListComponent/EntityListComponent.tsx b/plugins/catalog-import/src/components/EntityListComponent/EntityListComponent.tsx index 80a2d90fcc..6d21409e9f 100644 --- a/plugins/catalog-import/src/components/EntityListComponent/EntityListComponent.tsx +++ b/plugins/catalog-import/src/components/EntityListComponent/EntityListComponent.tsx @@ -35,7 +35,7 @@ import ListItemText from '@material-ui/core/ListItemText'; import { makeStyles } from '@material-ui/core/styles'; import ExpandLessIcon from '@material-ui/icons/ExpandLess'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; -import React, { useState } from 'react'; +import { ReactElement, Fragment, useState } from 'react'; const useStyles = makeStyles(theme => ({ nested: { @@ -53,9 +53,9 @@ export interface EntityListComponentProps { target: string; entities: (Entity | CompoundEntityRef)[]; }>; - locationListItemIcon: (target: string) => React.ReactElement; + locationListItemIcon: (target: string) => ReactElement; collapsed?: boolean; - firstListItem?: React.ReactElement; + firstListItem?: ReactElement; onItemClick?: (target: string) => void; withLinks?: boolean; } @@ -100,7 +100,7 @@ export const EntityListComponent = (props: EntityListComponentProps) => { {firstListItem} {locations.map(r => ( - + { })} - + ))} ); diff --git a/plugins/catalog-import/src/components/ImportInfoCard/ImportInfoCard.test.tsx b/plugins/catalog-import/src/components/ImportInfoCard/ImportInfoCard.test.tsx index caa6be223d..0cea0e6051 100644 --- a/plugins/catalog-import/src/components/ImportInfoCard/ImportInfoCard.test.tsx +++ b/plugins/catalog-import/src/components/ImportInfoCard/ImportInfoCard.test.tsx @@ -22,7 +22,6 @@ import { TestApiRegistry, } from '@backstage/test-utils'; import { screen } from '@testing-library/react'; -import React from 'react'; import { CatalogImportApi, catalogImportApiRef } from '../../api'; import { ImportInfoCard } from './ImportInfoCard'; import { useTranslationRef } from '@backstage/core-plugin-api/alpha'; diff --git a/plugins/catalog-import/src/components/ImportInfoCard/ImportInfoCard.tsx b/plugins/catalog-import/src/components/ImportInfoCard/ImportInfoCard.tsx index c0790006e5..fc15d01538 100644 --- a/plugins/catalog-import/src/components/ImportInfoCard/ImportInfoCard.tsx +++ b/plugins/catalog-import/src/components/ImportInfoCard/ImportInfoCard.tsx @@ -18,7 +18,6 @@ import { InfoCard } from '@backstage/core-components'; import { configApiRef, useApi } from '@backstage/core-plugin-api'; import Chip from '@material-ui/core/Chip'; import Typography from '@material-ui/core/Typography'; -import React from 'react'; import { catalogImportApiRef } from '../../api'; import { useCatalogFilename } from '../../hooks'; import { useTranslationRef } from '@backstage/core-plugin-api/alpha'; diff --git a/plugins/catalog-import/src/components/ImportPage/ImportPage.test.tsx b/plugins/catalog-import/src/components/ImportPage/ImportPage.test.tsx index 3f6efeb685..c62006f5e3 100644 --- a/plugins/catalog-import/src/components/ImportPage/ImportPage.test.tsx +++ b/plugins/catalog-import/src/components/ImportPage/ImportPage.test.tsx @@ -20,7 +20,6 @@ import { catalogApiRef } from '@backstage/plugin-catalog-react'; import { catalogApiMock } from '@backstage/plugin-catalog-react/testUtils'; import { renderInTestApp, TestApiRegistry } from '@backstage/test-utils'; import { screen } from '@testing-library/react'; -import React from 'react'; import { useOutlet } from 'react-router-dom'; import { catalogImportApiRef, CatalogImportClient } from '../../api'; import { ImportPage } from './ImportPage'; diff --git a/plugins/catalog-import/src/components/ImportPage/ImportPage.tsx b/plugins/catalog-import/src/components/ImportPage/ImportPage.tsx index 0fc3b70b6c..4a8c16e4c7 100644 --- a/plugins/catalog-import/src/components/ImportPage/ImportPage.tsx +++ b/plugins/catalog-import/src/components/ImportPage/ImportPage.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { useOutlet } from 'react-router-dom'; import { DefaultImportPage } from '../DefaultImportPage'; diff --git a/plugins/catalog-import/src/components/ImportStepper/ImportStepper.tsx b/plugins/catalog-import/src/components/ImportStepper/ImportStepper.tsx index 38c33a02e4..30d02032b6 100644 --- a/plugins/catalog-import/src/components/ImportStepper/ImportStepper.tsx +++ b/plugins/catalog-import/src/components/ImportStepper/ImportStepper.tsx @@ -20,7 +20,7 @@ import Step from '@material-ui/core/Step'; import StepContent from '@material-ui/core/StepContent'; import Stepper from '@material-ui/core/Stepper'; import { makeStyles } from '@material-ui/core/styles'; -import React, { useMemo } from 'react'; +import { useMemo } from 'react'; import { catalogImportApiRef } from '../../api'; import { ImportFlows, ImportState, useImportState } from '../useImportState'; import { diff --git a/plugins/catalog-import/src/components/ImportStepper/defaults.tsx b/plugins/catalog-import/src/components/ImportStepper/defaults.tsx index 0acde07a39..d23ffb4db9 100644 --- a/plugins/catalog-import/src/components/ImportStepper/defaults.tsx +++ b/plugins/catalog-import/src/components/ImportStepper/defaults.tsx @@ -21,7 +21,7 @@ import FormHelperText from '@material-ui/core/FormHelperText'; import StepLabel from '@material-ui/core/StepLabel'; import TextField from '@material-ui/core/TextField'; import Typography from '@material-ui/core/Typography'; -import React from 'react'; +import { ReactElement } from 'react'; import { BackButton } from '../Buttons'; import { asInputRef } from '../helpers'; import { StepFinishImportLocation } from '../StepFinishImportLocation'; @@ -36,8 +36,8 @@ import { StepperApis } from '../types'; import { ImportFlows, ImportState } from '../useImportState'; export type StepConfiguration = { - stepLabel: React.ReactElement; - content: React.ReactElement; + stepLabel: ReactElement; + content: ReactElement; }; /** diff --git a/plugins/catalog-import/src/components/StepFinishImportLocation/StepFinishImportLocation.tsx b/plugins/catalog-import/src/components/StepFinishImportLocation/StepFinishImportLocation.tsx index 47cee21045..3c103a03f8 100644 --- a/plugins/catalog-import/src/components/StepFinishImportLocation/StepFinishImportLocation.tsx +++ b/plugins/catalog-import/src/components/StepFinishImportLocation/StepFinishImportLocation.tsx @@ -17,7 +17,6 @@ import Grid from '@material-ui/core/Grid'; import Typography from '@material-ui/core/Typography'; import LocationOnIcon from '@material-ui/icons/LocationOn'; -import React from 'react'; import { BackButton, ViewComponentButton } from '../Buttons'; import { EntityListComponent } from '../EntityListComponent'; import { PrepareResult } from '../useImportState'; diff --git a/plugins/catalog-import/src/components/StepInitAnalyzeUrl/StepInitAnalyzeUrl.test.tsx b/plugins/catalog-import/src/components/StepInitAnalyzeUrl/StepInitAnalyzeUrl.test.tsx index d8a12d0e5c..b1d5de7527 100644 --- a/plugins/catalog-import/src/components/StepInitAnalyzeUrl/StepInitAnalyzeUrl.test.tsx +++ b/plugins/catalog-import/src/components/StepInitAnalyzeUrl/StepInitAnalyzeUrl.test.tsx @@ -18,7 +18,7 @@ import { errorApiRef } from '@backstage/core-plugin-api'; import { TestApiProvider } from '@backstage/test-utils'; import { act, render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import React from 'react'; +import { ReactNode } from 'react'; import { AnalyzeResult, catalogImportApiRef } from '../../api/'; import { StepInitAnalyzeUrl } from './StepInitAnalyzeUrl'; @@ -33,7 +33,7 @@ describe('', () => { error$: jest.fn(), }; - const Wrapper = ({ children }: { children?: React.ReactNode }) => ( + const Wrapper = ({ children }: { children?: ReactNode }) => ( { error={Boolean(errors.url)} required /> - {errors.url && ( {errors.url.message} )} - {error && {error}} - { required?: boolean; errors?: FieldErrors; - rules?: React.ComponentProps['rules']; + rules?: ComponentProps['rules']; loading?: boolean; loadingText?: string; - helperText?: React.ReactNode; + helperText?: ReactNode; errorHelperText?: string; textFieldProps?: Omit; @@ -75,7 +75,7 @@ export const AutocompleteTextField = ( options={options || []} autoSelect freeSolo - onChange={(_event: React.ChangeEvent<{}>, value: string | null) => + onChange={(_event: ChangeEvent<{}>, value: string | null) => onChange(value) } renderInput={params => ( @@ -89,12 +89,12 @@ export const AutocompleteTextField = ( InputProps={{ ...params.InputProps, endAdornment: ( - + {loading ? ( ) : null} {params.InputProps.endAdornment} - + ), }} {...textFieldProps} diff --git a/plugins/catalog-import/src/components/StepPrepareCreatePullRequest/PreparePullRequestForm.test.tsx b/plugins/catalog-import/src/components/StepPrepareCreatePullRequest/PreparePullRequestForm.test.tsx index bee641ca68..c1103a75eb 100644 --- a/plugins/catalog-import/src/components/StepPrepareCreatePullRequest/PreparePullRequestForm.test.tsx +++ b/plugins/catalog-import/src/components/StepPrepareCreatePullRequest/PreparePullRequestForm.test.tsx @@ -19,7 +19,6 @@ import TextField from '@material-ui/core/TextField'; import Button from '@material-ui/core/Button'; import { act, render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import React from 'react'; import { asInputRef } from '../helpers'; import { PreparePullRequestForm } from './PreparePullRequestForm'; diff --git a/plugins/catalog-import/src/components/StepPrepareCreatePullRequest/PreparePullRequestForm.tsx b/plugins/catalog-import/src/components/StepPrepareCreatePullRequest/PreparePullRequestForm.tsx index f0d84f13a4..e4309195b5 100644 --- a/plugins/catalog-import/src/components/StepPrepareCreatePullRequest/PreparePullRequestForm.tsx +++ b/plugins/catalog-import/src/components/StepPrepareCreatePullRequest/PreparePullRequestForm.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React from 'react'; +import { ReactNode } from 'react'; import { FormProvider, SubmitHandler, @@ -40,7 +40,7 @@ export type PreparePullRequestFormProps< > & { values: TFieldValues; }, - ) => React.ReactNode; + ) => ReactNode; }; /** diff --git a/plugins/catalog-import/src/components/StepPrepareCreatePullRequest/PreviewCatalogInfoComponent.test.tsx b/plugins/catalog-import/src/components/StepPrepareCreatePullRequest/PreviewCatalogInfoComponent.test.tsx index f832c842a5..60e9e8e707 100644 --- a/plugins/catalog-import/src/components/StepPrepareCreatePullRequest/PreviewCatalogInfoComponent.test.tsx +++ b/plugins/catalog-import/src/components/StepPrepareCreatePullRequest/PreviewCatalogInfoComponent.test.tsx @@ -20,7 +20,6 @@ import { mockApis, TestApiProvider } from '@backstage/test-utils'; import { makeStyles } from '@material-ui/core/styles'; import { render, screen } from '@testing-library/react'; import { renderHook } from '@testing-library/react'; -import React from 'react'; import { PreviewCatalogInfoComponent } from './PreviewCatalogInfoComponent'; const useStyles = makeStyles({ diff --git a/plugins/catalog-import/src/components/StepPrepareCreatePullRequest/PreviewCatalogInfoComponent.tsx b/plugins/catalog-import/src/components/StepPrepareCreatePullRequest/PreviewCatalogInfoComponent.tsx index a5e3c58448..0dfb127be0 100644 --- a/plugins/catalog-import/src/components/StepPrepareCreatePullRequest/PreviewCatalogInfoComponent.tsx +++ b/plugins/catalog-import/src/components/StepPrepareCreatePullRequest/PreviewCatalogInfoComponent.tsx @@ -18,7 +18,6 @@ import { Entity } from '@backstage/catalog-model'; import Card from '@material-ui/core/Card'; import CardContent from '@material-ui/core/CardContent'; import CardHeader from '@material-ui/core/CardHeader'; -import React from 'react'; import YAML from 'yaml'; import { CodeSnippet } from '@backstage/core-components'; import { trimEnd } from 'lodash'; diff --git a/plugins/catalog-import/src/components/StepPrepareCreatePullRequest/PreviewPullRequestComponent.test.tsx b/plugins/catalog-import/src/components/StepPrepareCreatePullRequest/PreviewPullRequestComponent.test.tsx index 0d0660a543..45b244d582 100644 --- a/plugins/catalog-import/src/components/StepPrepareCreatePullRequest/PreviewPullRequestComponent.test.tsx +++ b/plugins/catalog-import/src/components/StepPrepareCreatePullRequest/PreviewPullRequestComponent.test.tsx @@ -17,7 +17,6 @@ import { makeStyles } from '@material-ui/core/styles'; import { render, screen } from '@testing-library/react'; import { renderHook } from '@testing-library/react'; -import React from 'react'; import { PreviewPullRequestComponent } from './PreviewPullRequestComponent'; const useStyles = makeStyles({ diff --git a/plugins/catalog-import/src/components/StepPrepareCreatePullRequest/PreviewPullRequestComponent.tsx b/plugins/catalog-import/src/components/StepPrepareCreatePullRequest/PreviewPullRequestComponent.tsx index dea1243202..28176b5096 100644 --- a/plugins/catalog-import/src/components/StepPrepareCreatePullRequest/PreviewPullRequestComponent.tsx +++ b/plugins/catalog-import/src/components/StepPrepareCreatePullRequest/PreviewPullRequestComponent.tsx @@ -17,7 +17,6 @@ import Card from '@material-ui/core/Card'; import CardContent from '@material-ui/core/CardContent'; import CardHeader from '@material-ui/core/CardHeader'; -import React from 'react'; import { MarkdownContent } from '@backstage/core-components'; /** diff --git a/plugins/catalog-import/src/components/StepPrepareCreatePullRequest/StepPrepareCreatePullRequest.test.tsx b/plugins/catalog-import/src/components/StepPrepareCreatePullRequest/StepPrepareCreatePullRequest.test.tsx index acc2715fec..edb2e391db 100644 --- a/plugins/catalog-import/src/components/StepPrepareCreatePullRequest/StepPrepareCreatePullRequest.test.tsx +++ b/plugins/catalog-import/src/components/StepPrepareCreatePullRequest/StepPrepareCreatePullRequest.test.tsx @@ -20,7 +20,7 @@ import { TestApiProvider, mockApis } from '@backstage/test-utils'; import TextField from '@material-ui/core/TextField'; import { render, screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import React from 'react'; +import { ReactNode } from 'react'; import { AnalyzeResult, catalogImportApiRef } from '../../api'; import { asInputRef } from '../helpers'; import { @@ -45,7 +45,7 @@ describe('', () => { const configApi = mockApis.config(); - const Wrapper = ({ children }: { children?: React.ReactNode }) => ( + const Wrapper = ({ children }: { children?: ReactNode }) => ( React.ReactNode; + ) => ReactNode; } export function generateEntities( diff --git a/plugins/catalog-import/src/components/StepPrepareSelectLocations/StepPrepareSelectLocations.test.tsx b/plugins/catalog-import/src/components/StepPrepareSelectLocations/StepPrepareSelectLocations.test.tsx index 88b26b737a..4ef79c451e 100644 --- a/plugins/catalog-import/src/components/StepPrepareSelectLocations/StepPrepareSelectLocations.test.tsx +++ b/plugins/catalog-import/src/components/StepPrepareSelectLocations/StepPrepareSelectLocations.test.tsx @@ -17,7 +17,7 @@ import { TestApiProvider, renderInTestApp } from '@backstage/test-utils'; import { act, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import React from 'react'; +import { PropsWithChildren, ComponentType, ReactNode } from 'react'; import { AnalyzeResult } from '../../api'; import { StepPrepareSelectLocations } from './StepPrepareSelectLocations'; import { @@ -60,11 +60,11 @@ describe('', () => { } as Extract; const catalogApi = catalogApiMock(); - let Wrapper: React.ComponentType>; + let Wrapper: ComponentType>; beforeEach(() => { jest.resetAllMocks(); - Wrapper = ({ children }: { children?: React.ReactNode }) => ( + Wrapper = ({ children }: { children?: ReactNode }) => ( ; } @@ -71,9 +71,7 @@ export const EntityContentLayoutBlueprint = createExtensionBlueprint({ filter, }: { filter?: string | EntityPredicate | ((entity: Entity) => boolean); - loader: () => Promise< - (props: EntityContentLayoutProps) => React.JSX.Element - >; + loader: () => Promise<(props: EntityContentLayoutProps) => JSX.Element>; }, { node, config }, ) { diff --git a/plugins/catalog-react/src/alpha/converters/convertLegacyEntityCardExtension.test.tsx b/plugins/catalog-react/src/alpha/converters/convertLegacyEntityCardExtension.test.tsx index dd13318333..9e97412f92 100644 --- a/plugins/catalog-react/src/alpha/converters/convertLegacyEntityCardExtension.test.tsx +++ b/plugins/catalog-react/src/alpha/converters/convertLegacyEntityCardExtension.test.tsx @@ -24,7 +24,6 @@ import { renderInTestApp, } from '@backstage/frontend-test-utils'; import { screen } from '@testing-library/react'; -import React from 'react'; import { convertLegacyEntityCardExtension } from './convertLegacyEntityCardExtension'; import { convertLegacyRouteRef } from '@backstage/core-compat-api'; import { EntityContentBlueprint } from '../blueprints'; diff --git a/plugins/catalog-react/src/alpha/converters/convertLegacyEntityCardExtension.tsx b/plugins/catalog-react/src/alpha/converters/convertLegacyEntityCardExtension.tsx index 3c76e6b8d6..2a5dc115d4 100644 --- a/plugins/catalog-react/src/alpha/converters/convertLegacyEntityCardExtension.tsx +++ b/plugins/catalog-react/src/alpha/converters/convertLegacyEntityCardExtension.tsx @@ -17,7 +17,7 @@ import { compatWrapper } from '@backstage/core-compat-api'; import { BackstagePlugin, getComponentData } from '@backstage/core-plugin-api'; import { ExtensionDefinition } from '@backstage/frontend-plugin-api'; -import React, { ComponentType } from 'react'; +import { ComponentType } from 'react'; import { EntityCardBlueprint } from '../blueprints'; import kebabCase from 'lodash/kebabCase'; import { EntityPredicate } from '../predicates'; diff --git a/plugins/catalog-react/src/alpha/converters/convertLegacyEntityContentExtension.test.tsx b/plugins/catalog-react/src/alpha/converters/convertLegacyEntityContentExtension.test.tsx index d8ca126aa2..971e8a5eca 100644 --- a/plugins/catalog-react/src/alpha/converters/convertLegacyEntityContentExtension.test.tsx +++ b/plugins/catalog-react/src/alpha/converters/convertLegacyEntityContentExtension.test.tsx @@ -25,7 +25,6 @@ import { renderInTestApp, } from '@backstage/frontend-test-utils'; import { screen } from '@testing-library/react'; -import React from 'react'; import { convertLegacyEntityContentExtension } from './convertLegacyEntityContentExtension'; import { convertLegacyRouteRef } from '@backstage/core-compat-api'; import { EntityContentBlueprint } from '../blueprints'; diff --git a/plugins/catalog-react/src/alpha/converters/convertLegacyEntityContentExtension.tsx b/plugins/catalog-react/src/alpha/converters/convertLegacyEntityContentExtension.tsx index 2f106a20e1..740427e9b5 100644 --- a/plugins/catalog-react/src/alpha/converters/convertLegacyEntityContentExtension.tsx +++ b/plugins/catalog-react/src/alpha/converters/convertLegacyEntityContentExtension.tsx @@ -26,7 +26,7 @@ import { import { ExtensionDefinition } from '@backstage/frontend-plugin-api'; import kebabCase from 'lodash/kebabCase'; import startCase from 'lodash/startCase'; -import React, { ComponentType } from 'react'; +import { ComponentType } from 'react'; import { EntityContentBlueprint } from '../blueprints'; import { EntityPredicate } from '../predicates'; import { Entity } from '@backstage/catalog-model'; diff --git a/plugins/catalog-react/src/components/CatalogAutocomplete/CatalogAutocomplete.stories.tsx b/plugins/catalog-react/src/components/CatalogAutocomplete/CatalogAutocomplete.stories.tsx index 3dee44d27a..d4328b3bae 100644 --- a/plugins/catalog-react/src/components/CatalogAutocomplete/CatalogAutocomplete.stories.tsx +++ b/plugins/catalog-react/src/components/CatalogAutocomplete/CatalogAutocomplete.stories.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, { ComponentType } from 'react'; +import { ComponentType } from 'react'; import { wrapInTestApp } from '@backstage/test-utils'; import { CatalogAutocomplete } from './CatalogAutocomplete'; diff --git a/plugins/catalog-react/src/components/CatalogAutocomplete/CatalogAutocomplete.test.tsx b/plugins/catalog-react/src/components/CatalogAutocomplete/CatalogAutocomplete.test.tsx index e574919611..acdbd2cea2 100644 --- a/plugins/catalog-react/src/components/CatalogAutocomplete/CatalogAutocomplete.test.tsx +++ b/plugins/catalog-react/src/components/CatalogAutocomplete/CatalogAutocomplete.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { CatalogAutocomplete } from './CatalogAutocomplete'; diff --git a/plugins/catalog-react/src/components/CatalogAutocomplete/CatalogAutocomplete.tsx b/plugins/catalog-react/src/components/CatalogAutocomplete/CatalogAutocomplete.tsx index b120ad5b4c..44e17577c1 100644 --- a/plugins/catalog-react/src/components/CatalogAutocomplete/CatalogAutocomplete.tsx +++ b/plugins/catalog-react/src/components/CatalogAutocomplete/CatalogAutocomplete.tsx @@ -31,7 +31,7 @@ import Autocomplete, { AutocompleteProps, AutocompleteRenderInputParams, } from '@material-ui/lab/Autocomplete'; -import React, { ReactNode, useCallback } from 'react'; +import { ReactNode, useCallback } from 'react'; import { merge } from 'lodash'; import classNames from 'classnames'; diff --git a/plugins/catalog-react/src/components/CatalogFilterLayout/CatalogFilterLayout.tsx b/plugins/catalog-react/src/components/CatalogFilterLayout/CatalogFilterLayout.tsx index 793d4741ad..9ddc167ee0 100644 --- a/plugins/catalog-react/src/components/CatalogFilterLayout/CatalogFilterLayout.tsx +++ b/plugins/catalog-react/src/components/CatalogFilterLayout/CatalogFilterLayout.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useState } from 'react'; +import { ReactNode, useState } from 'react'; import Box from '@material-ui/core/Box'; import Button from '@material-ui/core/Button'; import Drawer from '@material-ui/core/Drawer'; @@ -28,7 +28,7 @@ import { useTranslationRef } from '@backstage/core-plugin-api/alpha'; /** @public */ export const Filters = (props: { - children: React.ReactNode; + children: ReactNode; options?: { drawerBreakpoint?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number; drawerAnchor?: 'left' | 'right' | 'top' | 'bottom'; @@ -80,7 +80,7 @@ export const Filters = (props: { }; /** @public */ -export const Content = (props: { children: React.ReactNode }) => { +export const Content = (props: { children: ReactNode }) => { return ( {props.children} @@ -89,7 +89,7 @@ export const Content = (props: { children: React.ReactNode }) => { }; /** @public */ -export const CatalogFilterLayout = (props: { children: React.ReactNode }) => { +export const CatalogFilterLayout = (props: { children: ReactNode }) => { return ( {props.children} diff --git a/plugins/catalog-react/src/components/DefaultFilters/DefaultFilters.tsx b/plugins/catalog-react/src/components/DefaultFilters/DefaultFilters.tsx index 9992c8d1d2..3915bf0d80 100644 --- a/plugins/catalog-react/src/components/DefaultFilters/DefaultFilters.tsx +++ b/plugins/catalog-react/src/components/DefaultFilters/DefaultFilters.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { UserListFilterKind } from '../../types'; import { EntityKindPicker } from '../EntityKindPicker'; import { EntityLifecyclePicker } from '../EntityLifecyclePicker'; diff --git a/plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePicker.test.tsx b/plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePicker.test.tsx index b68b247bdf..37954cb276 100644 --- a/plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePicker.test.tsx +++ b/plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePicker.test.tsx @@ -15,7 +15,6 @@ */ import { fireEvent, render, screen, waitFor } from '@testing-library/react'; -import React from 'react'; import { catalogApiMock, MockEntityListContextProvider, diff --git a/plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePicker.tsx b/plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePicker.tsx index d3b0b02e73..f8368601e7 100644 --- a/plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePicker.tsx +++ b/plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePicker.tsx @@ -17,7 +17,7 @@ import Box from '@material-ui/core/Box'; import { TextFieldProps } from '@material-ui/core/TextField'; import { makeStyles } from '@material-ui/core/styles'; -import React, { useEffect, useMemo, useState } from 'react'; +import { useEffect, useMemo, useState } from 'react'; import { useApi } from '@backstage/core-plugin-api'; import useAsync from 'react-use/esm/useAsync'; import { catalogApiRef } from '../../api'; diff --git a/plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePickerOption.tsx b/plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePickerOption.tsx index cffd0e678b..6dec5dbaaf 100644 --- a/plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePickerOption.tsx +++ b/plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePickerOption.tsx @@ -17,7 +17,7 @@ import Checkbox from '@material-ui/core/Checkbox'; import FormControlLabel from '@material-ui/core/FormControlLabel'; import CheckBoxIcon from '@material-ui/icons/CheckBox'; import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank'; -import React, { memo } from 'react'; +import { memo } from 'react'; interface Props { selected: boolean; diff --git a/plugins/catalog-react/src/components/EntityDisplayName/EntityDisplayName.stories.tsx b/plugins/catalog-react/src/components/EntityDisplayName/EntityDisplayName.stories.tsx index d68618b07c..8ae4e8fd50 100644 --- a/plugins/catalog-react/src/components/EntityDisplayName/EntityDisplayName.stories.tsx +++ b/plugins/catalog-react/src/components/EntityDisplayName/EntityDisplayName.stories.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { ComponentType } from 'react'; +import { ComponentType } from 'react'; import { EntityDisplayName, EntityDisplayNameProps } from './EntityDisplayName'; import { wrapInTestApp } from '@backstage/test-utils'; diff --git a/plugins/catalog-react/src/components/EntityDisplayName/EntityDisplayName.test.tsx b/plugins/catalog-react/src/components/EntityDisplayName/EntityDisplayName.test.tsx index 33991ff758..6eea5ee36a 100644 --- a/plugins/catalog-react/src/components/EntityDisplayName/EntityDisplayName.test.tsx +++ b/plugins/catalog-react/src/components/EntityDisplayName/EntityDisplayName.test.tsx @@ -17,7 +17,6 @@ import { TestApiProvider, renderInTestApp } from '@backstage/test-utils'; import { createDeferred } from '@backstage/types'; import { screen } from '@testing-library/react'; -import React from 'react'; import ObservableImpl from 'zen-observable'; import { EntityRefPresentation, diff --git a/plugins/catalog-react/src/components/EntityDisplayName/EntityDisplayName.tsx b/plugins/catalog-react/src/components/EntityDisplayName/EntityDisplayName.tsx index 2b9f3307ef..a4134df465 100644 --- a/plugins/catalog-react/src/components/EntityDisplayName/EntityDisplayName.tsx +++ b/plugins/catalog-react/src/components/EntityDisplayName/EntityDisplayName.tsx @@ -18,7 +18,6 @@ import { CompoundEntityRef, Entity } from '@backstage/catalog-model'; import Box from '@material-ui/core/Box'; import Tooltip from '@material-ui/core/Tooltip'; import { Theme, makeStyles } from '@material-ui/core/styles'; -import React from 'react'; import { useEntityPresentation } from '../../apis'; /** diff --git a/plugins/catalog-react/src/components/EntityKindPicker/EntityKindPicker.test.tsx b/plugins/catalog-react/src/components/EntityKindPicker/EntityKindPicker.test.tsx index 6df4f3fe61..b2de7522b6 100644 --- a/plugins/catalog-react/src/components/EntityKindPicker/EntityKindPicker.test.tsx +++ b/plugins/catalog-react/src/components/EntityKindPicker/EntityKindPicker.test.tsx @@ -21,7 +21,6 @@ import { alertApiRef } from '@backstage/core-plugin-api'; import { renderInTestApp, TestApiRegistry } from '@backstage/test-utils'; import { fireEvent, waitFor, screen, within } from '@testing-library/react'; import { capitalize } from 'lodash'; -import { default as React } from 'react'; import { catalogApiRef } from '../../api'; import { EntityKindFilter } from '../../filters'; import { MockEntityListContextProvider } from '@backstage/plugin-catalog-react/testUtils'; diff --git a/plugins/catalog-react/src/components/EntityKindPicker/EntityKindPicker.tsx b/plugins/catalog-react/src/components/EntityKindPicker/EntityKindPicker.tsx index bdfd3276ef..534b8d03b3 100644 --- a/plugins/catalog-react/src/components/EntityKindPicker/EntityKindPicker.tsx +++ b/plugins/catalog-react/src/components/EntityKindPicker/EntityKindPicker.tsx @@ -17,7 +17,7 @@ import { Select } from '@backstage/core-components'; import { alertApiRef, useApi } from '@backstage/core-plugin-api'; import Box from '@material-ui/core/Box'; -import React, { useEffect, useMemo, useState } from 'react'; +import { useEffect, useMemo, useState } from 'react'; import { EntityKindFilter } from '../../filters'; import { useEntityList } from '../../hooks'; import { filterKinds, useAllKinds } from './kindFilterUtils'; diff --git a/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.test.tsx b/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.test.tsx index 77a47185bb..75e9aa9d4e 100644 --- a/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.test.tsx +++ b/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.test.tsx @@ -15,7 +15,6 @@ */ import { fireEvent, screen, waitFor } from '@testing-library/react'; -import React from 'react'; import { MockEntityListContextProvider, catalogApiMock, diff --git a/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx b/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx index 6af5bc2b08..33c49fd6a1 100644 --- a/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx +++ b/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx @@ -15,7 +15,6 @@ */ import { makeStyles } from '@material-ui/core/styles'; -import React from 'react'; import { EntityLifecycleFilter } from '../../filters'; import { EntityAutocompletePicker } from '../EntityAutocompletePicker'; import { catalogReactTranslationRef } from '../../translation'; diff --git a/plugins/catalog-react/src/components/EntityNamespacePicker/EntityNamespacePicker.test.tsx b/plugins/catalog-react/src/components/EntityNamespacePicker/EntityNamespacePicker.test.tsx index dfd1636939..ad6d558f7d 100644 --- a/plugins/catalog-react/src/components/EntityNamespacePicker/EntityNamespacePicker.test.tsx +++ b/plugins/catalog-react/src/components/EntityNamespacePicker/EntityNamespacePicker.test.tsx @@ -15,7 +15,6 @@ */ import { fireEvent, screen, waitFor } from '@testing-library/react'; -import React from 'react'; import { MockEntityListContextProvider, catalogApiMock, diff --git a/plugins/catalog-react/src/components/EntityNamespacePicker/EntityNamespacePicker.tsx b/plugins/catalog-react/src/components/EntityNamespacePicker/EntityNamespacePicker.tsx index 412a11e02b..394433f654 100644 --- a/plugins/catalog-react/src/components/EntityNamespacePicker/EntityNamespacePicker.tsx +++ b/plugins/catalog-react/src/components/EntityNamespacePicker/EntityNamespacePicker.tsx @@ -16,7 +16,6 @@ import { makeStyles } from '@material-ui/core/styles'; -import React from 'react'; import { EntityNamespaceFilter } from '../../filters'; import { EntityAutocompletePicker } from '../EntityAutocompletePicker'; import { catalogReactTranslationRef } from '../../translation'; diff --git a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.test.tsx b/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.test.tsx index 7591d4c3ae..b8c8e58d32 100644 --- a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.test.tsx +++ b/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.test.tsx @@ -16,7 +16,6 @@ import { Entity, stringifyEntityRef } from '@backstage/catalog-model'; import { fireEvent, screen, waitFor } from '@testing-library/react'; -import React from 'react'; import { MockEntityListContextProvider, catalogApiMock, diff --git a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx b/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx index b70ec0bcb5..247a3784f4 100644 --- a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx +++ b/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx @@ -27,7 +27,7 @@ import Tooltip from '@material-ui/core/Tooltip'; import { makeStyles } from '@material-ui/core/styles'; import CheckBoxIcon from '@material-ui/icons/CheckBox'; import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank'; -import React, { useEffect, useMemo, useState } from 'react'; +import { MouseEvent, useEffect, useMemo, useState } from 'react'; import { useEntityList } from '../../hooks/useEntityListProvider'; import { EntityOwnerFilter } from '../../filters'; import { useDebouncedEffect } from '@react-hookz/web'; @@ -224,7 +224,7 @@ export const EntityOwnerPicker = (props?: EntityOwnerPickerProps) => { setText(inputValue); }} ListboxProps={{ - onScroll: (e: React.MouseEvent) => { + onScroll: (e: MouseEvent) => { const element = e.currentTarget; const hasReachedEnd = Math.abs( diff --git a/plugins/catalog-react/src/components/EntityPeekAheadPopover/CardActionComponents/EmailCardAction.tsx b/plugins/catalog-react/src/components/EntityPeekAheadPopover/CardActionComponents/EmailCardAction.tsx index 979a9402b9..8c9c0cf2bf 100644 --- a/plugins/catalog-react/src/components/EntityPeekAheadPopover/CardActionComponents/EmailCardAction.tsx +++ b/plugins/catalog-react/src/components/EntityPeekAheadPopover/CardActionComponents/EmailCardAction.tsx @@ -16,7 +16,6 @@ import IconButton from '@material-ui/core/IconButton'; import EmailIcon from '@material-ui/icons/Email'; -import React from 'react'; import { Link } from '@backstage/core-components'; import { catalogReactTranslationRef } from '../../../translation'; import { useTranslationRef } from '@backstage/core-plugin-api/alpha'; diff --git a/plugins/catalog-react/src/components/EntityPeekAheadPopover/CardActionComponents/EntityCardActions.tsx b/plugins/catalog-react/src/components/EntityPeekAheadPopover/CardActionComponents/EntityCardActions.tsx index ce3f26234a..63cb160f0b 100644 --- a/plugins/catalog-react/src/components/EntityPeekAheadPopover/CardActionComponents/EntityCardActions.tsx +++ b/plugins/catalog-react/src/components/EntityPeekAheadPopover/CardActionComponents/EntityCardActions.tsx @@ -17,7 +17,6 @@ import { entityRouteRef } from '../../../routes'; import IconButton from '@material-ui/core/IconButton'; import InfoIcon from '@material-ui/icons/Info'; -import React from 'react'; import { useRouteRef } from '@backstage/core-plugin-api'; import { Entity, getCompoundEntityRef } from '@backstage/catalog-model'; import { Link } from '@backstage/core-components'; diff --git a/plugins/catalog-react/src/components/EntityPeekAheadPopover/CardActionComponents/GroupCardActions.tsx b/plugins/catalog-react/src/components/EntityPeekAheadPopover/CardActionComponents/GroupCardActions.tsx index 9bc840c112..de08132df0 100644 --- a/plugins/catalog-react/src/components/EntityPeekAheadPopover/CardActionComponents/GroupCardActions.tsx +++ b/plugins/catalog-react/src/components/EntityPeekAheadPopover/CardActionComponents/GroupCardActions.tsx @@ -15,7 +15,6 @@ */ import { EmailCardAction } from './EmailCardAction'; -import React from 'react'; import { GroupEntity } from '@backstage/catalog-model'; /** diff --git a/plugins/catalog-react/src/components/EntityPeekAheadPopover/CardActionComponents/UserCardActions.tsx b/plugins/catalog-react/src/components/EntityPeekAheadPopover/CardActionComponents/UserCardActions.tsx index cdf0eea385..977e627131 100644 --- a/plugins/catalog-react/src/components/EntityPeekAheadPopover/CardActionComponents/UserCardActions.tsx +++ b/plugins/catalog-react/src/components/EntityPeekAheadPopover/CardActionComponents/UserCardActions.tsx @@ -15,7 +15,6 @@ */ import { EmailCardAction } from './EmailCardAction'; -import React from 'react'; import { UserEntity } from '@backstage/catalog-model'; /** diff --git a/plugins/catalog-react/src/components/EntityPeekAheadPopover/EntityPeekAheadPopover.stories.tsx b/plugins/catalog-react/src/components/EntityPeekAheadPopover/EntityPeekAheadPopover.stories.tsx index 51fcfee6c4..7c663de0d6 100644 --- a/plugins/catalog-react/src/components/EntityPeekAheadPopover/EntityPeekAheadPopover.stories.tsx +++ b/plugins/catalog-react/src/components/EntityPeekAheadPopover/EntityPeekAheadPopover.stories.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { ComponentType, PropsWithChildren } from 'react'; +import { ComponentType, PropsWithChildren } from 'react'; import { EntityPeekAheadPopover, EntityPeekAheadPopoverProps, diff --git a/plugins/catalog-react/src/components/EntityPeekAheadPopover/EntityPeekAheadPopover.test.tsx b/plugins/catalog-react/src/components/EntityPeekAheadPopover/EntityPeekAheadPopover.test.tsx index b129d42402..a2c826de36 100644 --- a/plugins/catalog-react/src/components/EntityPeekAheadPopover/EntityPeekAheadPopover.test.tsx +++ b/plugins/catalog-react/src/components/EntityPeekAheadPopover/EntityPeekAheadPopover.test.tsx @@ -16,7 +16,6 @@ import { screen } from '@testing-library/react'; import user from '@testing-library/user-event'; -import React from 'react'; import { EntityPeekAheadPopover } from './EntityPeekAheadPopover'; import { ApiProvider } from '@backstage/core-app-api'; import { TestApiRegistry, renderInTestApp } from '@backstage/test-utils'; diff --git a/plugins/catalog-react/src/components/EntityPeekAheadPopover/EntityPeekAheadPopover.tsx b/plugins/catalog-react/src/components/EntityPeekAheadPopover/EntityPeekAheadPopover.tsx index 21dd59195d..cc39a3543d 100644 --- a/plugins/catalog-react/src/components/EntityPeekAheadPopover/EntityPeekAheadPopover.tsx +++ b/plugins/catalog-react/src/components/EntityPeekAheadPopover/EntityPeekAheadPopover.tsx @@ -16,7 +16,7 @@ import useAsyncFn from 'react-use/esm/useAsyncFn'; import { catalogApiRef } from '../../api'; -import React, { PropsWithChildren, useEffect, useMemo, useState } from 'react'; +import { PropsWithChildren, useEffect, useMemo, useState } from 'react'; import HoverPopover from 'material-ui-popup-state/HoverPopover'; import { bindHover, diff --git a/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.test.tsx b/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.test.tsx index 16fb3130f3..1ae2aa93e1 100644 --- a/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.test.tsx +++ b/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.test.tsx @@ -15,7 +15,6 @@ */ import { fireEvent, screen } from '@testing-library/react'; -import React from 'react'; import { EntityErrorFilter, EntityOrphanFilter } from '../../filters'; import { MockEntityListContextProvider } from '@backstage/plugin-catalog-react/testUtils'; import { EntityProcessingStatusPicker } from './EntityProcessingStatusPicker'; diff --git a/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.tsx b/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.tsx index a1b6e5b562..bce7ea97e3 100644 --- a/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.tsx +++ b/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.tsx @@ -21,7 +21,7 @@ import FormControlLabel from '@material-ui/core/FormControlLabel'; import { makeStyles } from '@material-ui/core/styles'; import CheckBoxIcon from '@material-ui/icons/CheckBox'; import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank'; -import React, { useState } from 'react'; +import { useState } from 'react'; import { useEntityList } from '../../hooks'; import { catalogReactTranslationRef } from '../../translation'; import { useTranslationRef } from '@backstage/core-plugin-api/alpha'; diff --git a/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.stories.tsx b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.stories.tsx index 84fdf1148c..f75c3e743b 100644 --- a/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.stories.tsx +++ b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.stories.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { ComponentType, PropsWithChildren } from 'react'; +import { ComponentType, PropsWithChildren } from 'react'; import { EntityRefLink, EntityRefLinkProps } from './EntityRefLink'; import { wrapInTestApp } from '@backstage/test-utils'; import { entityRouteRef } from '../../routes'; diff --git a/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.test.tsx b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.test.tsx index c1a37b9682..2cbf7c0c91 100644 --- a/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.test.tsx +++ b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.test.tsx @@ -16,7 +16,6 @@ import { renderInTestApp } from '@backstage/test-utils'; import { screen } from '@testing-library/react'; -import React from 'react'; import { entityRouteRef } from '../../routes'; import { EntityRefLink } from './EntityRefLink'; diff --git a/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.tsx b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.tsx index 10aa1976f5..8952e17f5a 100644 --- a/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.tsx +++ b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.tsx @@ -22,7 +22,7 @@ import { } from '@backstage/catalog-model'; import { Link, LinkProps } from '@backstage/core-components'; import { useRouteRef } from '@backstage/core-plugin-api'; -import React, { forwardRef } from 'react'; +import { ReactNode, forwardRef } from 'react'; import { entityRouteRef } from '../../routes'; import { EntityDisplayName } from '../EntityDisplayName'; @@ -37,7 +37,7 @@ export type EntityRefLinkProps = { defaultNamespace?: string; /** @deprecated This option should no longer be used; presentation is requested through the {@link entityPresentationApiRef} instead */ title?: string; - children?: React.ReactNode; + children?: ReactNode; hideIcon?: boolean; disableTooltip?: boolean; } & Omit; diff --git a/plugins/catalog-react/src/components/EntityRefLink/EntityRefLinks.stories.tsx b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLinks.stories.tsx index 7b94bd14df..b34b5db8d7 100644 --- a/plugins/catalog-react/src/components/EntityRefLink/EntityRefLinks.stories.tsx +++ b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLinks.stories.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { ComponentType, PropsWithChildren } from 'react'; +import { ComponentType, PropsWithChildren } from 'react'; import { EntityRefLinks, EntityRefLinksProps } from './EntityRefLinks'; import { wrapInTestApp } from '@backstage/test-utils'; import { CompoundEntityRef } from '@backstage/catalog-model'; diff --git a/plugins/catalog-react/src/components/EntityRefLink/EntityRefLinks.test.tsx b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLinks.test.tsx index 31a5be33d0..8f7e5cc43c 100644 --- a/plugins/catalog-react/src/components/EntityRefLink/EntityRefLinks.test.tsx +++ b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLinks.test.tsx @@ -16,7 +16,6 @@ import { renderInTestApp } from '@backstage/test-utils'; import { screen } from '@testing-library/react'; -import React from 'react'; import { entityRouteRef } from '../../routes'; import { EntityRefLinks } from './EntityRefLinks'; diff --git a/plugins/catalog-react/src/components/EntityRefLink/EntityRefLinks.tsx b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLinks.tsx index a9370af471..99afe7f535 100644 --- a/plugins/catalog-react/src/components/EntityRefLink/EntityRefLinks.tsx +++ b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLinks.tsx @@ -18,7 +18,7 @@ import { CompoundEntityRef, stringifyEntityRef, } from '@backstage/catalog-model'; -import React from 'react'; +import { Fragment } from 'react'; import { EntityRefLink } from './EntityRefLink'; import { LinkProps } from '@backstage/core-components'; @@ -55,10 +55,10 @@ export function EntityRefLinks< const entityRefString = typeof r === 'string' ? r : stringifyEntityRef(r); return ( - + {i > 0 && ', '} - + ); })} diff --git a/plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.test.tsx b/plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.test.tsx index 63047c163b..87cdbbda37 100644 --- a/plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.test.tsx +++ b/plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { fireEvent, waitFor, screen } from '@testing-library/react'; import { EntitySearchBar } from './EntitySearchBar'; import { EntityTextFilter } from '../../filters'; diff --git a/plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.tsx b/plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.tsx index 5239387d2b..8e6ffc53e3 100644 --- a/plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.tsx +++ b/plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.tsx @@ -22,7 +22,7 @@ import Toolbar from '@material-ui/core/Toolbar'; import { makeStyles } from '@material-ui/core/styles'; import Clear from '@material-ui/icons/Clear'; import Search from '@material-ui/icons/Search'; -import React, { useEffect, useMemo, useState } from 'react'; +import { useEffect, useMemo, useState } from 'react'; import useDebounce from 'react-use/lib/useDebounce'; import { useEntityList } from '../../hooks/useEntityListProvider'; import { EntityTextFilter } from '../../filters'; diff --git a/plugins/catalog-react/src/components/EntityTable/EntityTable.test.tsx b/plugins/catalog-react/src/components/EntityTable/EntityTable.test.tsx index d5f1dc20d3..b78cfb7a9b 100644 --- a/plugins/catalog-react/src/components/EntityTable/EntityTable.test.tsx +++ b/plugins/catalog-react/src/components/EntityTable/EntityTable.test.tsx @@ -17,7 +17,6 @@ import { Entity } from '@backstage/catalog-model'; import { renderInTestApp } from '@backstage/test-utils'; import { waitFor, screen } from '@testing-library/react'; -import React from 'react'; import { EntityTable } from './EntityTable'; describe('', () => { diff --git a/plugins/catalog-react/src/components/EntityTable/EntityTable.tsx b/plugins/catalog-react/src/components/EntityTable/EntityTable.tsx index d60a48c8db..e06effa774 100644 --- a/plugins/catalog-react/src/components/EntityTable/EntityTable.tsx +++ b/plugins/catalog-react/src/components/EntityTable/EntityTable.tsx @@ -16,7 +16,7 @@ import { Entity } from '@backstage/catalog-model'; import { makeStyles } from '@material-ui/core/styles'; -import React, { ReactNode } from 'react'; +import { CSSProperties, ReactNode } from 'react'; import { columnFactories } from './columns'; import { componentEntityColumns, systemEntityColumns } from './presets'; import { @@ -65,7 +65,7 @@ export const EntityTable = (props: EntityTableProps) => { } = props; const classes = useStyles(); - const tableStyle: React.CSSProperties = { + const tableStyle: CSSProperties = { minWidth: '0', width: '100%', }; diff --git a/plugins/catalog-react/src/components/EntityTable/columns.tsx b/plugins/catalog-react/src/components/EntityTable/columns.tsx index 91ff9e9788..00e1e5ad43 100644 --- a/plugins/catalog-react/src/components/EntityTable/columns.tsx +++ b/plugins/catalog-react/src/components/EntityTable/columns.tsx @@ -21,7 +21,6 @@ import { RELATION_PART_OF, } from '@backstage/catalog-model'; import { OverflowTooltip, TableColumn } from '@backstage/core-components'; -import React from 'react'; import { getEntityRelations } from '../../utils'; import { EntityRefLink, diff --git a/plugins/catalog-react/src/components/EntityTable/presets.test.tsx b/plugins/catalog-react/src/components/EntityTable/presets.test.tsx index afe4336300..875d3d3652 100644 --- a/plugins/catalog-react/src/components/EntityTable/presets.test.tsx +++ b/plugins/catalog-react/src/components/EntityTable/presets.test.tsx @@ -22,7 +22,6 @@ import { } from '@backstage/catalog-model'; import { renderInTestApp } from '@backstage/test-utils'; import { waitFor, screen } from '@testing-library/react'; -import React from 'react'; import { entityRouteRef } from '../../routes'; import { EntityTable } from './EntityTable'; import { componentEntityColumns, systemEntityColumns } from './presets'; diff --git a/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.test.tsx b/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.test.tsx index 81000d4fcf..ebcc3803c1 100644 --- a/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.test.tsx +++ b/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.test.tsx @@ -15,7 +15,6 @@ */ import { fireEvent, waitFor, screen, act } from '@testing-library/react'; -import React from 'react'; import { MockEntityListContextProvider, catalogApiMock, diff --git a/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.tsx b/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.tsx index 06b8b06e6f..58eb7c7f2e 100644 --- a/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.tsx +++ b/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.tsx @@ -15,7 +15,6 @@ */ import { makeStyles } from '@material-ui/core/styles'; -import React from 'react'; import { EntityTagFilter } from '../../filters'; import { EntityAutocompletePicker } from '../EntityAutocompletePicker/EntityAutocompletePicker'; import { catalogReactTranslationRef } from '../../translation'; diff --git a/plugins/catalog-react/src/components/EntityTypePicker/EntityTypePicker.test.tsx b/plugins/catalog-react/src/components/EntityTypePicker/EntityTypePicker.test.tsx index 75c83e4b86..281b94251e 100644 --- a/plugins/catalog-react/src/components/EntityTypePicker/EntityTypePicker.test.tsx +++ b/plugins/catalog-react/src/components/EntityTypePicker/EntityTypePicker.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { fireEvent, waitFor, screen, within } from '@testing-library/react'; import { Entity } from '@backstage/catalog-model'; import { EntityTypePicker } from './EntityTypePicker'; diff --git a/plugins/catalog-react/src/components/EntityTypePicker/EntityTypePicker.tsx b/plugins/catalog-react/src/components/EntityTypePicker/EntityTypePicker.tsx index ba39536d1e..29f4780e7f 100644 --- a/plugins/catalog-react/src/components/EntityTypePicker/EntityTypePicker.tsx +++ b/plugins/catalog-react/src/components/EntityTypePicker/EntityTypePicker.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useEffect } from 'react'; +import { useEffect } from 'react'; import Box from '@material-ui/core/Box'; import { useEntityTypeFilter } from '../../hooks/useEntityTypeFilter'; diff --git a/plugins/catalog-react/src/components/FavoriteEntity/FavoriteEntity.test.tsx b/plugins/catalog-react/src/components/FavoriteEntity/FavoriteEntity.test.tsx index ac06b3a34d..4415ba9a2c 100644 --- a/plugins/catalog-react/src/components/FavoriteEntity/FavoriteEntity.test.tsx +++ b/plugins/catalog-react/src/components/FavoriteEntity/FavoriteEntity.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { storageApiRef } from '@backstage/core-plugin-api'; import { MockStarredEntitiesApi, starredEntitiesApiRef } from '../../apis'; diff --git a/plugins/catalog-react/src/components/FavoriteEntity/FavoriteEntity.tsx b/plugins/catalog-react/src/components/FavoriteEntity/FavoriteEntity.tsx index f0d59247ad..3ae3cc7c54 100644 --- a/plugins/catalog-react/src/components/FavoriteEntity/FavoriteEntity.tsx +++ b/plugins/catalog-react/src/components/FavoriteEntity/FavoriteEntity.tsx @@ -16,7 +16,7 @@ import { Entity, stringifyEntityRef } from '@backstage/catalog-model'; import IconButton from '@material-ui/core/IconButton'; -import React, { ComponentProps } from 'react'; +import { ComponentProps } from 'react'; import { useStarredEntity } from '../../hooks/useStarredEntity'; import { catalogReactTranslationRef } from '../../translation'; import { useTranslationRef } from '@backstage/core-plugin-api/alpha'; diff --git a/plugins/catalog-react/src/components/InspectEntityDialog/InspectEntityDialog.tsx b/plugins/catalog-react/src/components/InspectEntityDialog/InspectEntityDialog.tsx index bcd84003ba..1d8a351701 100644 --- a/plugins/catalog-react/src/components/InspectEntityDialog/InspectEntityDialog.tsx +++ b/plugins/catalog-react/src/components/InspectEntityDialog/InspectEntityDialog.tsx @@ -24,7 +24,7 @@ import DialogTitle from '@material-ui/core/DialogTitle'; import Tab from '@material-ui/core/Tab'; import Tabs from '@material-ui/core/Tabs'; import { makeStyles } from '@material-ui/core/styles'; -import React, { ComponentProps, useEffect } from 'react'; +import { ComponentProps, useEffect, useState, ReactNode } from 'react'; import { AncestryPage } from './components/AncestryPage'; import { ColocatedPage } from './components/ColocatedPage'; import { JsonPage } from './components/JsonPage'; @@ -54,7 +54,7 @@ const useStyles = makeStyles(theme => ({ })); function TabPanel(props: { - children?: React.ReactNode; + children?: ReactNode; index: number; value: number; }) { @@ -112,7 +112,7 @@ export function InspectEntityDialog(props: { }) { const classes = useStyles(); - const [activeTab, setActiveTab] = React.useState( + const [activeTab, setActiveTab] = useState( getTabIndex(tabs, props.initialTab), ); const { t } = useTranslationRef(catalogReactTranslationRef); diff --git a/plugins/catalog-react/src/components/InspectEntityDialog/components/AncestryPage.tsx b/plugins/catalog-react/src/components/InspectEntityDialog/components/AncestryPage.tsx index 98bd27bd77..c81009e3f5 100644 --- a/plugins/catalog-react/src/components/InspectEntityDialog/components/AncestryPage.tsx +++ b/plugins/catalog-react/src/components/InspectEntityDialog/components/AncestryPage.tsx @@ -31,7 +31,7 @@ import Box from '@material-ui/core/Box'; import DialogContentText from '@material-ui/core/DialogContentText'; import { makeStyles } from '@material-ui/core/styles'; import classNames from 'classnames'; -import React, { useLayoutEffect, useRef, useState } from 'react'; +import { useLayoutEffect, useRef, useState } from 'react'; import { useNavigate } from 'react-router-dom'; import useAsync from 'react-use/esm/useAsync'; import { catalogApiRef } from '../../../api'; diff --git a/plugins/catalog-react/src/components/InspectEntityDialog/components/ColocatedPage.tsx b/plugins/catalog-react/src/components/InspectEntityDialog/components/ColocatedPage.tsx index 6f89ff2c9f..e694eb71b3 100644 --- a/plugins/catalog-react/src/components/InspectEntityDialog/components/ColocatedPage.tsx +++ b/plugins/catalog-react/src/components/InspectEntityDialog/components/ColocatedPage.tsx @@ -27,7 +27,6 @@ import List from '@material-ui/core/List'; import ListItem from '@material-ui/core/ListItem'; import { makeStyles } from '@material-ui/core/styles'; import Alert from '@material-ui/lab/Alert'; -import React from 'react'; import useAsync from 'react-use/esm/useAsync'; import { catalogApiRef } from '../../../api'; import { EntityRefLink } from '../../EntityRefLink'; diff --git a/plugins/catalog-react/src/components/InspectEntityDialog/components/EntityKindIcon.tsx b/plugins/catalog-react/src/components/InspectEntityDialog/components/EntityKindIcon.tsx index 7fc95613e9..18801d8871 100644 --- a/plugins/catalog-react/src/components/InspectEntityDialog/components/EntityKindIcon.tsx +++ b/plugins/catalog-react/src/components/InspectEntityDialog/components/EntityKindIcon.tsx @@ -16,7 +16,6 @@ import { parseEntityRef } from '@backstage/catalog-model'; import { useApp } from '@backstage/core-plugin-api'; -import React from 'react'; import SvgIcon from '@material-ui/core/SvgIcon'; const DEFAULT_ICON = SvgIcon; diff --git a/plugins/catalog-react/src/components/InspectEntityDialog/components/JsonPage.test.tsx b/plugins/catalog-react/src/components/InspectEntityDialog/components/JsonPage.test.tsx index 83888a867f..22b8736d9e 100644 --- a/plugins/catalog-react/src/components/InspectEntityDialog/components/JsonPage.test.tsx +++ b/plugins/catalog-react/src/components/InspectEntityDialog/components/JsonPage.test.tsx @@ -17,7 +17,6 @@ import { ComponentEntity } from '@backstage/catalog-model'; import { renderInTestApp } from '@backstage/test-utils'; import { screen } from '@testing-library/react'; -import React from 'react'; import { JsonPage } from './JsonPage'; describe('JsonPage', () => { diff --git a/plugins/catalog-react/src/components/InspectEntityDialog/components/JsonPage.tsx b/plugins/catalog-react/src/components/InspectEntityDialog/components/JsonPage.tsx index af8a724729..b5cfdfa219 100644 --- a/plugins/catalog-react/src/components/InspectEntityDialog/components/JsonPage.tsx +++ b/plugins/catalog-react/src/components/InspectEntityDialog/components/JsonPage.tsx @@ -17,7 +17,6 @@ import { Entity } from '@backstage/catalog-model'; import { CodeSnippet } from '@backstage/core-components'; import DialogContentText from '@material-ui/core/DialogContentText'; -import React from 'react'; import { sortKeys } from './util'; import { catalogReactTranslationRef } from '../../../translation'; import { useTranslationRef } from '@backstage/core-plugin-api/alpha'; diff --git a/plugins/catalog-react/src/components/InspectEntityDialog/components/OverviewPage.tsx b/plugins/catalog-react/src/components/InspectEntityDialog/components/OverviewPage.tsx index 361910b2cd..b9085ecb60 100644 --- a/plugins/catalog-react/src/components/InspectEntityDialog/components/OverviewPage.tsx +++ b/plugins/catalog-react/src/components/InspectEntityDialog/components/OverviewPage.tsx @@ -25,7 +25,6 @@ import Typography from '@material-ui/core/Typography'; import { makeStyles } from '@material-ui/core/styles'; import groupBy from 'lodash/groupBy'; import sortBy from 'lodash/sortBy'; -import React from 'react'; import { EntityRefLink } from '../../EntityRefLink'; import { Container, diff --git a/plugins/catalog-react/src/components/InspectEntityDialog/components/YamlPage.test.tsx b/plugins/catalog-react/src/components/InspectEntityDialog/components/YamlPage.test.tsx index 8106197301..84b7f8db43 100644 --- a/plugins/catalog-react/src/components/InspectEntityDialog/components/YamlPage.test.tsx +++ b/plugins/catalog-react/src/components/InspectEntityDialog/components/YamlPage.test.tsx @@ -17,7 +17,6 @@ import { ComponentEntity } from '@backstage/catalog-model'; import { renderInTestApp } from '@backstage/test-utils'; import { screen } from '@testing-library/react'; -import React from 'react'; import { YamlPage } from './YamlPage'; describe('YamlPage', () => { diff --git a/plugins/catalog-react/src/components/InspectEntityDialog/components/YamlPage.tsx b/plugins/catalog-react/src/components/InspectEntityDialog/components/YamlPage.tsx index 4e56b9b42a..6763707810 100644 --- a/plugins/catalog-react/src/components/InspectEntityDialog/components/YamlPage.tsx +++ b/plugins/catalog-react/src/components/InspectEntityDialog/components/YamlPage.tsx @@ -17,7 +17,6 @@ import { Entity } from '@backstage/catalog-model'; import { CodeSnippet } from '@backstage/core-components'; import DialogContentText from '@material-ui/core/DialogContentText'; -import React from 'react'; import YAML from 'yaml'; import { sortKeys } from './util'; import { catalogReactTranslationRef } from '../../../translation'; diff --git a/plugins/catalog-react/src/components/InspectEntityDialog/components/common.tsx b/plugins/catalog-react/src/components/InspectEntityDialog/components/common.tsx index fa50c7585e..ff8a66e10d 100644 --- a/plugins/catalog-react/src/components/InspectEntityDialog/components/common.tsx +++ b/plugins/catalog-react/src/components/InspectEntityDialog/components/common.tsx @@ -25,7 +25,7 @@ import MuiListSubheader from '@material-ui/core/ListSubheader'; import Typography from '@material-ui/core/Typography'; import { makeStyles } from '@material-ui/core/styles'; import HelpOutlineIcon from '@material-ui/icons/HelpOutline'; -import React from 'react'; +import { ReactNode } from 'react'; const useStyles = makeStyles(theme => ({ root: { @@ -45,8 +45,8 @@ const useStyles = makeStyles(theme => ({ })); export function ListItemText(props: { - primary: React.ReactNode; - secondary?: React.ReactNode; + primary: ReactNode; + secondary?: ReactNode; }) { const classes = useStyles(); return ( @@ -58,7 +58,7 @@ export function ListItemText(props: { ); } -export function ListSubheader(props: { children?: React.ReactNode }) { +export function ListSubheader(props: { children?: ReactNode }) { const classes = useStyles(); return ( @@ -68,9 +68,9 @@ export function ListSubheader(props: { children?: React.ReactNode }) { } export function Container(props: { - title: React.ReactNode; + title: ReactNode; helpLink?: string; - children: React.ReactNode; + children: ReactNode; }) { return ( diff --git a/plugins/catalog-react/src/components/MissingAnnotationEmptyState/MissingAnnotationEmptyState.tsx b/plugins/catalog-react/src/components/MissingAnnotationEmptyState/MissingAnnotationEmptyState.tsx index 4d9329e664..4472ecc8a2 100644 --- a/plugins/catalog-react/src/components/MissingAnnotationEmptyState/MissingAnnotationEmptyState.tsx +++ b/plugins/catalog-react/src/components/MissingAnnotationEmptyState/MissingAnnotationEmptyState.tsx @@ -18,7 +18,6 @@ import Box from '@material-ui/core/Box'; import Button from '@material-ui/core/Button'; import { makeStyles } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; -import React from 'react'; import { CodeSnippet, Link, EmptyState } from '@backstage/core-components'; import { Entity } from '@backstage/catalog-model'; import { useEntity } from '../../hooks'; diff --git a/plugins/catalog-react/src/components/UnregisterEntityDialog/UnregisterEntityDialog.test.tsx b/plugins/catalog-react/src/components/UnregisterEntityDialog/UnregisterEntityDialog.test.tsx index 1a5553fbb5..595cd70fc4 100644 --- a/plugins/catalog-react/src/components/UnregisterEntityDialog/UnregisterEntityDialog.test.tsx +++ b/plugins/catalog-react/src/components/UnregisterEntityDialog/UnregisterEntityDialog.test.tsx @@ -17,7 +17,7 @@ jest.mock('./useUnregisterEntityDialogState'); import userEvent from '@testing-library/user-event'; -import React from 'react'; +import { ReactNode } from 'react'; import { UnregisterEntityDialog } from './UnregisterEntityDialog'; import { ANNOTATION_ORIGIN_LOCATION } from '@backstage/catalog-model'; import { catalogApiMock } from '@backstage/plugin-catalog-react/testUtils'; @@ -55,7 +55,7 @@ describe('UnregisterEntityDialog', () => { spec: {}, }; - const Wrapper = (props: { children?: React.ReactNode }) => ( + const Wrapper = (props: { children?: ReactNode }) => ( { const catalogApi = catalogApiMock.mock(); - const Wrapper = (props: { children?: React.ReactNode }) => ( + const Wrapper = (props: { children?: ReactNode }) => ( {props.children} diff --git a/plugins/catalog-react/src/components/UserListPicker/UserListPicker.test.tsx b/plugins/catalog-react/src/components/UserListPicker/UserListPicker.test.tsx index 2471ce5277..2e3ddff882 100644 --- a/plugins/catalog-react/src/components/UserListPicker/UserListPicker.test.tsx +++ b/plugins/catalog-react/src/components/UserListPicker/UserListPicker.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { fireEvent, waitFor, screen } from '@testing-library/react'; import { UserEntity } from '@backstage/catalog-model'; import { UserListPicker, UserListPickerProps } from './UserListPicker'; diff --git a/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx b/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx index c97756dc1d..dc4173fd5f 100644 --- a/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx +++ b/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx @@ -29,7 +29,7 @@ import Typography from '@material-ui/core/Typography'; import { makeStyles } from '@material-ui/core/styles'; import SettingsIcon from '@material-ui/icons/Settings'; import { StarIcon } from '@backstage/core-components'; -import React, { Fragment, useEffect, useMemo, useState } from 'react'; +import { Fragment, useEffect, useMemo, useState } from 'react'; import { EntityUserFilter } from '../../filters'; import { useEntityList } from '../../hooks'; import { UserListFilterKind } from '../../types'; diff --git a/plugins/catalog-react/src/components/UserListPicker/useAllEntitiesCount.test.tsx b/plugins/catalog-react/src/components/UserListPicker/useAllEntitiesCount.test.tsx index 2449d47a1c..0ba231b72a 100644 --- a/plugins/catalog-react/src/components/UserListPicker/useAllEntitiesCount.test.tsx +++ b/plugins/catalog-react/src/components/UserListPicker/useAllEntitiesCount.test.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, { PropsWithChildren } from 'react'; +import { PropsWithChildren } from 'react'; import { catalogApiMock } from '@backstage/plugin-catalog-react/testUtils'; import { useAllEntitiesCount } from './useAllEntitiesCount'; import { renderHook, waitFor } from '@testing-library/react'; diff --git a/plugins/catalog-react/src/components/UserListPicker/useOwnedEntitiesCount.test.tsx b/plugins/catalog-react/src/components/UserListPicker/useOwnedEntitiesCount.test.tsx index 8ea9f63472..4f0181f562 100644 --- a/plugins/catalog-react/src/components/UserListPicker/useOwnedEntitiesCount.test.tsx +++ b/plugins/catalog-react/src/components/UserListPicker/useOwnedEntitiesCount.test.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { PropsWithChildren } from 'react'; +import { PropsWithChildren } from 'react'; import { catalogApiMock } from '@backstage/plugin-catalog-react/testUtils'; import { renderHook, waitFor } from '@testing-library/react'; import { diff --git a/plugins/catalog-react/src/components/UserListPicker/useStarredEntitiesCount.test.tsx b/plugins/catalog-react/src/components/UserListPicker/useStarredEntitiesCount.test.tsx index 096ad01ddd..a980460590 100644 --- a/plugins/catalog-react/src/components/UserListPicker/useStarredEntitiesCount.test.tsx +++ b/plugins/catalog-react/src/components/UserListPicker/useStarredEntitiesCount.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { catalogApiMock } from '@backstage/plugin-catalog-react/testUtils'; import { EntityListProvider, useStarredEntities } from '../../hooks'; import { catalogApiRef } from '../../api'; diff --git a/plugins/catalog-react/src/deprecated.tsx b/plugins/catalog-react/src/deprecated.tsx index 8e088502e8..74186d9c29 100644 --- a/plugins/catalog-react/src/deprecated.tsx +++ b/plugins/catalog-react/src/deprecated.tsx @@ -14,12 +14,7 @@ * limitations under the License. */ -import React, { - PropsWithChildren, - useCallback, - useMemo, - useState, -} from 'react'; +import { PropsWithChildren, useCallback, useMemo, useState } from 'react'; import { DefaultEntityFilters, EntityListContext, diff --git a/plugins/catalog-react/src/hooks/useEntity.test.tsx b/plugins/catalog-react/src/hooks/useEntity.test.tsx index 022584bd4c..2a868e990a 100644 --- a/plugins/catalog-react/src/hooks/useEntity.test.tsx +++ b/plugins/catalog-react/src/hooks/useEntity.test.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { PropsWithChildren } from 'react'; +import { PropsWithChildren } from 'react'; import { renderHook } from '@testing-library/react'; import { useEntity, @@ -38,7 +38,7 @@ describe('useEntity', () => { withLogCollector(() => { expect(() => renderHook(() => useEntity(), { - wrapper: ({ children }: React.PropsWithChildren<{}>) => ( + wrapper: ({ children }: PropsWithChildren<{}>) => ( ), }), @@ -48,7 +48,7 @@ describe('useEntity', () => { it('should provide an entity', async () => { const { result } = renderHook(() => useEntity(), { - wrapper: ({ children }: React.PropsWithChildren<{}>) => ( + wrapper: ({ children }: PropsWithChildren<{}>) => ( ), }); @@ -60,7 +60,7 @@ describe('useEntity', () => { const analyticsSpy = mockApis.analytics(); const apis = TestApiRegistry.from([analyticsApiRef, analyticsSpy]); const { result } = renderHook(() => useAnalytics(), { - wrapper: ({ children }: React.PropsWithChildren<{}>) => ( + wrapper: ({ children }: PropsWithChildren<{}>) => ( @@ -82,7 +82,7 @@ describe('useEntity', () => { describe('useAsyncEntity', () => { it('should provide no entity', async () => { const { result } = renderHook(() => useAsyncEntity(), { - wrapper: ({ children }: React.PropsWithChildren<{}>) => ( + wrapper: ({ children }: PropsWithChildren<{}>) => ( ), }); @@ -96,7 +96,7 @@ describe('useAsyncEntity', () => { it('should provide an entity', async () => { const refresh = () => {}; const { result } = renderHook(() => useAsyncEntity(), { - wrapper: ({ children }: React.PropsWithChildren<{}>) => ( + wrapper: ({ children }: PropsWithChildren<{}>) => ( { const analyticsSpy = mockApis.analytics.mock(); const apis = TestApiRegistry.from([analyticsApiRef, analyticsSpy]); const { result } = renderHook(() => useAnalytics(), { - wrapper: ({ children }: React.PropsWithChildren<{}>) => ( + wrapper: ({ children }: PropsWithChildren<{}>) => ( = { diff --git a/plugins/catalog-react/src/hooks/useEntityListProvider.test.tsx b/plugins/catalog-react/src/hooks/useEntityListProvider.test.tsx index 35e34b4063..45ed6079cc 100644 --- a/plugins/catalog-react/src/hooks/useEntityListProvider.test.tsx +++ b/plugins/catalog-react/src/hooks/useEntityListProvider.test.tsx @@ -26,7 +26,7 @@ import { import { mockApis, TestApiProvider } from '@backstage/test-utils'; import { act, renderHook, waitFor } from '@testing-library/react'; import qs from 'qs'; -import React, { PropsWithChildren } from 'react'; +import { PropsWithChildren } from 'react'; import { MemoryRouter } from 'react-router-dom'; import { catalogApiRef } from '../api'; import { MockStarredEntitiesApi, starredEntitiesApiRef } from '../apis'; diff --git a/plugins/catalog-react/src/hooks/useEntityListProvider.tsx b/plugins/catalog-react/src/hooks/useEntityListProvider.tsx index e3ca95cebb..4f4194da48 100644 --- a/plugins/catalog-react/src/hooks/useEntityListProvider.tsx +++ b/plugins/catalog-react/src/hooks/useEntityListProvider.tsx @@ -17,7 +17,7 @@ import { Entity } from '@backstage/catalog-model'; import { compact, isEqual } from 'lodash'; import qs from 'qs'; -import React, { +import { createContext, PropsWithChildren, useCallback, diff --git a/plugins/catalog-react/src/hooks/useEntityOwnership.test.tsx b/plugins/catalog-react/src/hooks/useEntityOwnership.test.tsx index 684580792d..90d0cdeb97 100644 --- a/plugins/catalog-react/src/hooks/useEntityOwnership.test.tsx +++ b/plugins/catalog-react/src/hooks/useEntityOwnership.test.tsx @@ -18,7 +18,7 @@ import { ComponentEntity, RELATION_OWNED_BY } from '@backstage/catalog-model'; import { identityApiRef } from '@backstage/core-plugin-api'; import { TestApiProvider, mockApis } from '@backstage/test-utils'; import { renderHook, waitFor } from '@testing-library/react'; -import React from 'react'; +import { ReactNode } from 'react'; import { useEntityOwnership } from './useEntityOwnership'; describe('useEntityOwnership', () => { @@ -27,7 +27,7 @@ describe('useEntityOwnership', () => { ownershipEntityRefs: ['user:default/user1', 'group:default/group1'], }); - const Wrapper = (props: { children?: React.ReactNode }) => ( + const Wrapper = (props: { children?: ReactNode }) => ( {props.children} diff --git a/plugins/catalog-react/src/hooks/useRelatedEntities.test.tsx b/plugins/catalog-react/src/hooks/useRelatedEntities.test.tsx index 6dbbac44f5..c7e098abf3 100644 --- a/plugins/catalog-react/src/hooks/useRelatedEntities.test.tsx +++ b/plugins/catalog-react/src/hooks/useRelatedEntities.test.tsx @@ -17,7 +17,7 @@ import { Entity } from '@backstage/catalog-model'; import { TestApiProvider } from '@backstage/test-utils'; import { renderHook, waitFor } from '@testing-library/react'; -import React, { ComponentType, PropsWithChildren } from 'react'; +import { ComponentType, PropsWithChildren } from 'react'; import { catalogApiRef } from '../api'; import { useRelatedEntities } from './useRelatedEntities'; import { catalogApiMock } from '../testUtils'; diff --git a/plugins/catalog-react/src/hooks/useStarredEntities.test.tsx b/plugins/catalog-react/src/hooks/useStarredEntities.test.tsx index 07738fd3d9..11780e4dd6 100644 --- a/plugins/catalog-react/src/hooks/useStarredEntities.test.tsx +++ b/plugins/catalog-react/src/hooks/useStarredEntities.test.tsx @@ -16,9 +16,8 @@ import { Entity } from '@backstage/catalog-model'; import { TestApiProvider } from '@backstage/test-utils'; -import { act, renderHook } from '@testing-library/react'; -import { waitFor } from '@testing-library/react'; -import React, { PropsWithChildren } from 'react'; +import { act, renderHook, waitFor } from '@testing-library/react'; +import { PropsWithChildren, ComponentType } from 'react'; import { starredEntitiesApiRef, StarredEntitiesApi, @@ -28,7 +27,7 @@ import { useStarredEntities } from './useStarredEntities'; describe('useStarredEntities', () => { let mockApi: StarredEntitiesApi; - let wrapper: React.ComponentType>; + let wrapper: ComponentType>; const mockEntity: Entity = { apiVersion: '1', diff --git a/plugins/catalog-react/src/hooks/useStarredEntity.test.tsx b/plugins/catalog-react/src/hooks/useStarredEntity.test.tsx index 44a4c7aaa3..08bf4ad8db 100644 --- a/plugins/catalog-react/src/hooks/useStarredEntity.test.tsx +++ b/plugins/catalog-react/src/hooks/useStarredEntity.test.tsx @@ -16,9 +16,8 @@ import { Entity, CompoundEntityRef } from '@backstage/catalog-model'; import { TestApiProvider } from '@backstage/test-utils'; -import { waitFor } from '@testing-library/react'; -import { renderHook } from '@testing-library/react'; -import React, { PropsWithChildren } from 'react'; +import { waitFor, renderHook } from '@testing-library/react'; +import { PropsWithChildren, ComponentType } from 'react'; import Observable from 'zen-observable'; import { StarredEntitiesApi, starredEntitiesApiRef } from '../apis'; import { useStarredEntity } from './useStarredEntity'; @@ -28,7 +27,7 @@ describe('useStarredEntity', () => { toggleStarred: jest.fn(), starredEntitie$: jest.fn(), }; - let wrapper: React.ComponentType>; + let wrapper: ComponentType>; beforeEach(() => { wrapper = (props: PropsWithChildren<{}>) => ( diff --git a/plugins/catalog-react/src/testUtils/MockEntityListContextProvider.tsx b/plugins/catalog-react/src/testUtils/MockEntityListContextProvider.tsx index fc01b5847b..0dcbbed8e8 100644 --- a/plugins/catalog-react/src/testUtils/MockEntityListContextProvider.tsx +++ b/plugins/catalog-react/src/testUtils/MockEntityListContextProvider.tsx @@ -14,12 +14,7 @@ * limitations under the License. */ -import React, { - PropsWithChildren, - useCallback, - useMemo, - useState, -} from 'react'; +import { PropsWithChildren, useCallback, useMemo, useState } from 'react'; import { DefaultEntityFilters, EntityListContext, diff --git a/plugins/catalog-unprocessed-entities/dev/index.tsx b/plugins/catalog-unprocessed-entities/dev/index.tsx index ab11cb554d..a2ac4c624f 100644 --- a/plugins/catalog-unprocessed-entities/dev/index.tsx +++ b/plugins/catalog-unprocessed-entities/dev/index.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import { createDevApp } from '@backstage/dev-utils'; import { catalogUnprocessedEntitiesPlugin, diff --git a/plugins/catalog-unprocessed-entities/src/alpha/plugin.tsx b/plugins/catalog-unprocessed-entities/src/alpha/plugin.tsx index 85c021510c..df1935f89a 100644 --- a/plugins/catalog-unprocessed-entities/src/alpha/plugin.tsx +++ b/plugins/catalog-unprocessed-entities/src/alpha/plugin.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { createApiFactory, createFrontendPlugin, diff --git a/plugins/catalog-unprocessed-entities/src/components/DeleteEntityConfirmationDialog.tsx b/plugins/catalog-unprocessed-entities/src/components/DeleteEntityConfirmationDialog.tsx index be93817d69..91a67551c9 100644 --- a/plugins/catalog-unprocessed-entities/src/components/DeleteEntityConfirmationDialog.tsx +++ b/plugins/catalog-unprocessed-entities/src/components/DeleteEntityConfirmationDialog.tsx @@ -18,7 +18,7 @@ import Button from '@material-ui/core/Button'; import Dialog from '@material-ui/core/Dialog'; import DialogActions from '@material-ui/core/DialogActions'; import DialogTitle from '@material-ui/core/DialogTitle'; -import React, { useState } from 'react'; +import { useState } from 'react'; import { assertError } from '@backstage/errors'; interface DeleteEntityConfirmationProps { diff --git a/plugins/catalog-unprocessed-entities/src/components/EntityDialog.tsx b/plugins/catalog-unprocessed-entities/src/components/EntityDialog.tsx index a02d8419d4..f92d044b32 100644 --- a/plugins/catalog-unprocessed-entities/src/components/EntityDialog.tsx +++ b/plugins/catalog-unprocessed-entities/src/components/EntityDialog.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, { useState } from 'react'; +import { useState } from 'react'; import Dialog from '@material-ui/core/Dialog'; import DialogContent from '@material-ui/core/DialogContent'; diff --git a/plugins/catalog-unprocessed-entities/src/components/FailedEntities.tsx b/plugins/catalog-unprocessed-entities/src/components/FailedEntities.tsx index 32a7b42eb4..05f9640881 100644 --- a/plugins/catalog-unprocessed-entities/src/components/FailedEntities.tsx +++ b/plugins/catalog-unprocessed-entities/src/components/FailedEntities.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, { useState } from 'react'; +import { useState } from 'react'; import { DateTime } from 'luxon'; import { ErrorPanel, diff --git a/plugins/catalog-unprocessed-entities/src/components/PendingEntities.tsx b/plugins/catalog-unprocessed-entities/src/components/PendingEntities.tsx index 36d7281c8d..54a2584dcc 100644 --- a/plugins/catalog-unprocessed-entities/src/components/PendingEntities.tsx +++ b/plugins/catalog-unprocessed-entities/src/components/PendingEntities.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, { useState } from 'react'; +import { useState } from 'react'; import { ErrorPanel, diff --git a/plugins/catalog-unprocessed-entities/src/components/UnprocessedEntities.tsx b/plugins/catalog-unprocessed-entities/src/components/UnprocessedEntities.tsx index 92f5760c2e..425683be25 100644 --- a/plugins/catalog-unprocessed-entities/src/components/UnprocessedEntities.tsx +++ b/plugins/catalog-unprocessed-entities/src/components/UnprocessedEntities.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, { useState } from 'react'; +import { ChangeEvent, useState } from 'react'; import { Page, Header, Content } from '@backstage/core-components'; import Tab from '@material-ui/core/Tab'; @@ -36,7 +36,7 @@ const useStyles = makeStyles(() => ({ export const UnprocessedEntitiesContent = () => { const classes = useStyles(); const [tab, setTab] = useState('failed'); - const handleChange = (_event: React.ChangeEvent<{}>, tabValue: string) => { + const handleChange = (_event: ChangeEvent<{}>, tabValue: string) => { setTab(tabValue); }; diff --git a/plugins/catalog/dev/index.tsx b/plugins/catalog/dev/index.tsx index bf98d7417d..931c3cfe25 100644 --- a/plugins/catalog/dev/index.tsx +++ b/plugins/catalog/dev/index.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { createDevApp } from '@backstage/dev-utils'; import { catalogPlugin, diff --git a/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx b/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx index c5cbe452f2..badfaf6d72 100644 --- a/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx +++ b/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import Grid from '@material-ui/core/Grid'; import { makeStyles, Theme } from '@material-ui/core/styles'; import { EntityContentLayoutProps } from '@backstage/plugin-catalog-react/alpha'; diff --git a/plugins/catalog/src/alpha/components/EntityHeader/EntityHeader.tsx b/plugins/catalog/src/alpha/components/EntityHeader/EntityHeader.tsx index a8d9773e28..ca81ffe7cc 100644 --- a/plugins/catalog/src/alpha/components/EntityHeader/EntityHeader.tsx +++ b/plugins/catalog/src/alpha/components/EntityHeader/EntityHeader.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { +import { useState, useCallback, useEffect, diff --git a/plugins/catalog/src/alpha/components/EntityLabels/EntityLabels.tsx b/plugins/catalog/src/alpha/components/EntityLabels/EntityLabels.tsx index 235bed210b..1e81baed2c 100644 --- a/plugins/catalog/src/alpha/components/EntityLabels/EntityLabels.tsx +++ b/plugins/catalog/src/alpha/components/EntityLabels/EntityLabels.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { HeaderLabel } from '@backstage/core-components'; import { Entity, RELATION_OWNED_BY } from '@backstage/catalog-model'; import { diff --git a/plugins/catalog/src/alpha/components/EntityLayout/EntityLayout.tsx b/plugins/catalog/src/alpha/components/EntityLayout/EntityLayout.tsx index 80ff688715..abf1e69bfb 100644 --- a/plugins/catalog/src/alpha/components/EntityLayout/EntityLayout.tsx +++ b/plugins/catalog/src/alpha/components/EntityLayout/EntityLayout.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { ComponentProps, ReactNode } from 'react'; +import { ComponentProps, ReactNode } from 'react'; import Alert from '@material-ui/lab/Alert'; diff --git a/plugins/catalog/src/alpha/components/EntityTabs/EntityTabs.tsx b/plugins/catalog/src/alpha/components/EntityTabs/EntityTabs.tsx index 5d37707ecf..e7e417eace 100644 --- a/plugins/catalog/src/alpha/components/EntityTabs/EntityTabs.tsx +++ b/plugins/catalog/src/alpha/components/EntityTabs/EntityTabs.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, { useMemo } from 'react'; +import { useMemo } from 'react'; import { Helmet } from 'react-helmet'; import { matchRoutes, useParams, useRoutes } from 'react-router-dom'; import { EntityTabsPanel } from './EntityTabsPanel'; diff --git a/plugins/catalog/src/alpha/components/EntityTabs/EntityTabsGroup.tsx b/plugins/catalog/src/alpha/components/EntityTabs/EntityTabsGroup.tsx index 9cd7c4ab23..564b83bd25 100644 --- a/plugins/catalog/src/alpha/components/EntityTabs/EntityTabsGroup.tsx +++ b/plugins/catalog/src/alpha/components/EntityTabs/EntityTabsGroup.tsx @@ -13,7 +13,13 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, { useState, MouseEvent, MouseEventHandler } from 'react'; +import { + ReactNode, + forwardRef, + useState, + MouseEvent, + MouseEventHandler, +} from 'react'; import { Link } from 'react-router-dom'; import classnames from 'classnames'; @@ -140,16 +146,13 @@ type EntityTabsGroupItem = { type EntityTabsGroupProps = TabProps & { classes?: Partial>; - indicator?: React.ReactNode; + indicator?: ReactNode; highlightedButton?: number; items: EntityTabsGroupItem[]; onSelectTab: MouseEventHandler; }; -const Tab = React.forwardRef(function Tab( - props: EntityTabsGroupProps, - ref: any, -) { +const Tab = forwardRef(function Tab(props: EntityTabsGroupProps, ref: any) { const [anchorEl, setAnchorEl] = useState(null); const open = Boolean(anchorEl); diff --git a/plugins/catalog/src/alpha/components/EntityTabs/EntityTabsList.tsx b/plugins/catalog/src/alpha/components/EntityTabs/EntityTabsList.tsx index 7df4bcef0a..c5475ed710 100644 --- a/plugins/catalog/src/alpha/components/EntityTabs/EntityTabsList.tsx +++ b/plugins/catalog/src/alpha/components/EntityTabs/EntityTabsList.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useCallback, useEffect, useMemo, useState } from 'react'; +import { useCallback, useEffect, useMemo, useState } from 'react'; import Box from '@material-ui/core/Box'; import Tabs from '@material-ui/core/Tabs'; import { makeStyles } from '@material-ui/core/styles'; diff --git a/plugins/catalog/src/alpha/components/EntityTabs/EntityTabsPanel.tsx b/plugins/catalog/src/alpha/components/EntityTabs/EntityTabsPanel.tsx index e8548c842f..850e3c09c9 100644 --- a/plugins/catalog/src/alpha/components/EntityTabs/EntityTabsPanel.tsx +++ b/plugins/catalog/src/alpha/components/EntityTabs/EntityTabsPanel.tsx @@ -15,7 +15,7 @@ */ import classNames from 'classnames'; -import React, { PropsWithChildren } from 'react'; +import { PropsWithChildren } from 'react'; import { makeStyles, Theme } from '@material-ui/core/styles'; /** @public */ diff --git a/plugins/catalog/src/alpha/entityCards.tsx b/plugins/catalog/src/alpha/entityCards.tsx index 5f8ee16f87..98921958ad 100644 --- a/plugins/catalog/src/alpha/entityCards.tsx +++ b/plugins/catalog/src/alpha/entityCards.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { EntityCardBlueprint } from '@backstage/plugin-catalog-react/alpha'; import { compatWrapper } from '@backstage/core-compat-api'; diff --git a/plugins/catalog/src/alpha/entityContents.test.tsx b/plugins/catalog/src/alpha/entityContents.test.tsx index 2ea61c1c54..4756320165 100644 --- a/plugins/catalog/src/alpha/entityContents.test.tsx +++ b/plugins/catalog/src/alpha/entityContents.test.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { Fragment } from 'react'; +import { Fragment } from 'react'; import { screen, waitFor } from '@testing-library/react'; // import userEvent from '@testing-library/user-event'; import { diff --git a/plugins/catalog/src/alpha/entityContents.tsx b/plugins/catalog/src/alpha/entityContents.tsx index 1de5436efe..8be3608b82 100644 --- a/plugins/catalog/src/alpha/entityContents.tsx +++ b/plugins/catalog/src/alpha/entityContents.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { lazy as reactLazy } from 'react'; +import { lazy as reactLazy } from 'react'; import { coreExtensionData, createExtensionInput, diff --git a/plugins/catalog/src/alpha/filter/FilterWrapper.tsx b/plugins/catalog/src/alpha/filter/FilterWrapper.tsx index e0e74fe481..33af9c2c3f 100644 --- a/plugins/catalog/src/alpha/filter/FilterWrapper.tsx +++ b/plugins/catalog/src/alpha/filter/FilterWrapper.tsx @@ -16,7 +16,7 @@ import { Entity } from '@backstage/catalog-model'; import Grid from '@material-ui/core/Grid'; -import React, { useMemo } from 'react'; +import { JSX, useMemo } from 'react'; import { parseFilterExpression } from './parseFilterExpression'; // Keeps track of what filter expression strings that we've seen duplicates of @@ -69,7 +69,7 @@ export function buildFilterFn( // Handles the memoized parsing of filter expressions export function FilterWrapper(props: { entity: Entity; - element: React.JSX.Element; + element: JSX.Element; filterFunction?: (entity: Entity) => boolean; filterExpression?: string; }) { diff --git a/plugins/catalog/src/alpha/filters.tsx b/plugins/catalog/src/alpha/filters.tsx index 1ff2981864..fcfbc394f2 100644 --- a/plugins/catalog/src/alpha/filters.tsx +++ b/plugins/catalog/src/alpha/filters.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { CatalogFilterBlueprint } from '@backstage/plugin-catalog-react/alpha'; const catalogTagCatalogFilter = CatalogFilterBlueprint.make({ diff --git a/plugins/catalog/src/alpha/pages.test.tsx b/plugins/catalog/src/alpha/pages.test.tsx index 7c548dc1f8..ab81d93342 100644 --- a/plugins/catalog/src/alpha/pages.test.tsx +++ b/plugins/catalog/src/alpha/pages.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { diff --git a/plugins/catalog/src/alpha/pages.tsx b/plugins/catalog/src/alpha/pages.tsx index 977ca41118..be2fb341c3 100644 --- a/plugins/catalog/src/alpha/pages.tsx +++ b/plugins/catalog/src/alpha/pages.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { compatWrapper, convertLegacyRouteRef, diff --git a/plugins/catalog/src/components/AboutCard/AboutCard.test.tsx b/plugins/catalog/src/components/AboutCard/AboutCard.test.tsx index 87f35bbc3e..0255339238 100644 --- a/plugins/catalog/src/components/AboutCard/AboutCard.test.tsx +++ b/plugins/catalog/src/components/AboutCard/AboutCard.test.tsx @@ -34,7 +34,6 @@ import { createFromTemplateRouteRef, viewTechDocRouteRef } from '../../routes'; import { AboutCard } from './AboutCard'; import { ConfigReader } from '@backstage/core-app-api'; import { RELATION_OWNED_BY } from '@backstage/catalog-model'; -import React from 'react'; import { screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { permissionApiRef } from '@backstage/plugin-permission-react'; diff --git a/plugins/catalog/src/components/AboutCard/AboutCard.tsx b/plugins/catalog/src/components/AboutCard/AboutCard.tsx index 4039c88b38..bf5be95a08 100644 --- a/plugins/catalog/src/components/AboutCard/AboutCard.tsx +++ b/plugins/catalog/src/components/AboutCard/AboutCard.tsx @@ -34,7 +34,7 @@ import { InfoCardVariants, Link, } from '@backstage/core-components'; -import React, { useCallback } from 'react'; +import { useCallback } from 'react'; import { ScmIntegrationIcon, scmIntegrationsApiRef, diff --git a/plugins/catalog/src/components/AboutCard/AboutContent.test.tsx b/plugins/catalog/src/components/AboutCard/AboutContent.test.tsx index 2a89f2fd92..d91d5e96d9 100644 --- a/plugins/catalog/src/components/AboutCard/AboutContent.test.tsx +++ b/plugins/catalog/src/components/AboutCard/AboutContent.test.tsx @@ -22,7 +22,6 @@ import { import { entityRouteRef } from '@backstage/plugin-catalog-react'; import { renderInTestApp } from '@backstage/test-utils'; import { screen } from '@testing-library/react'; -import React from 'react'; import { AboutContent } from './AboutContent'; describe('', () => { diff --git a/plugins/catalog/src/components/AboutCard/AboutContent.tsx b/plugins/catalog/src/components/AboutCard/AboutContent.tsx index 07547c8949..96f4fd8790 100644 --- a/plugins/catalog/src/components/AboutCard/AboutContent.tsx +++ b/plugins/catalog/src/components/AboutCard/AboutContent.tsx @@ -29,7 +29,6 @@ import Chip from '@material-ui/core/Chip'; import Grid from '@material-ui/core/Grid'; import { makeStyles } from '@material-ui/core/styles'; import { MarkdownContent } from '@backstage/core-components'; -import React from 'react'; import { AboutField } from './AboutField'; import { LinksGridList } from '../EntityLinksCard/LinksGridList'; import { useTranslationRef } from '@backstage/core-plugin-api/alpha'; diff --git a/plugins/catalog/src/components/AboutCard/AboutField.tsx b/plugins/catalog/src/components/AboutCard/AboutField.tsx index 15e02307f0..db3255997b 100644 --- a/plugins/catalog/src/components/AboutCard/AboutField.tsx +++ b/plugins/catalog/src/components/AboutCard/AboutField.tsx @@ -18,7 +18,7 @@ import { useElementFilter } from '@backstage/core-plugin-api'; import Grid from '@material-ui/core/Grid'; import Typography from '@material-ui/core/Typography'; import { makeStyles } from '@material-ui/core/styles'; -import React from 'react'; +import { ReactNode } from 'react'; const useStyles = makeStyles(theme => ({ value: { @@ -47,7 +47,7 @@ export interface AboutFieldProps { label: string; value?: string; gridSizes?: Record; - children?: React.ReactNode; + children?: ReactNode; className?: string; } diff --git a/plugins/catalog/src/components/CatalogEntityPage/CatalogEntityPage.tsx b/plugins/catalog/src/components/CatalogEntityPage/CatalogEntityPage.tsx index 57e407e185..add7f26848 100644 --- a/plugins/catalog/src/components/CatalogEntityPage/CatalogEntityPage.tsx +++ b/plugins/catalog/src/components/CatalogEntityPage/CatalogEntityPage.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { Outlet } from 'react-router-dom'; import { AsyncEntityProvider } from '@backstage/plugin-catalog-react'; import { useEntityFromUrl } from './useEntityFromUrl'; diff --git a/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.test.tsx b/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.test.tsx index d0e3fa9ace..7f52a638a3 100644 --- a/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.test.tsx +++ b/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { fireEvent, screen, waitFor } from '@testing-library/react'; import { GetEntityFacetsResponse } from '@backstage/catalog-client'; import { Entity } from '@backstage/catalog-model'; diff --git a/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx b/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx index db4767a82a..df535974f2 100644 --- a/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx +++ b/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useEffect, useState, useMemo } from 'react'; +import { useEffect, useState, useMemo } from 'react'; import InputBase from '@material-ui/core/InputBase'; import MenuItem from '@material-ui/core/MenuItem'; import Select from '@material-ui/core/Select'; diff --git a/plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx b/plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx index 0efdd37a34..5196587840 100644 --- a/plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx +++ b/plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { renderInTestApp } from '@backstage/test-utils'; import { screen } from '@testing-library/react'; import { useOutlet } from 'react-router-dom'; diff --git a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx index c9caf009b2..142c74774d 100644 --- a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx +++ b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { useOutlet } from 'react-router-dom'; import { DefaultCatalogPage, diff --git a/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.test.tsx b/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.test.tsx index 07cf98359e..4c2cc3332e 100644 --- a/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.test.tsx +++ b/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.test.tsx @@ -32,7 +32,7 @@ import { } from '@backstage/test-utils'; import DashboardIcon from '@material-ui/icons/Dashboard'; import { fireEvent, screen, waitFor } from '@testing-library/react'; -import React from 'react'; +import { ReactNode } from 'react'; import { createComponentRouteRef } from '../../routes'; import { CatalogTableRow } from '../CatalogTable'; import { DefaultCatalogPage } from './DefaultCatalogPage'; @@ -165,7 +165,7 @@ describe('DefaultCatalogPage', () => { displayName: 'Display Name', }); - const renderWrapped = (children: React.ReactNode) => + const renderWrapped = (children: ReactNode) => renderInTestApp( ; + title?: string | ReactElement; }) { const styles = useToolbarStyles(); return ( diff --git a/plugins/catalog/src/components/CatalogTable/CursorPaginatedCatalogTable.test.tsx b/plugins/catalog/src/components/CatalogTable/CursorPaginatedCatalogTable.test.tsx index 169c1277b9..493a5b90f7 100644 --- a/plugins/catalog/src/components/CatalogTable/CursorPaginatedCatalogTable.test.tsx +++ b/plugins/catalog/src/components/CatalogTable/CursorPaginatedCatalogTable.test.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { ReactNode } from 'react'; +import { ReactNode } from 'react'; import { fireEvent, screen, waitFor } from '@testing-library/react'; import { CursorPaginatedCatalogTable } from './CursorPaginatedCatalogTable'; import { CatalogTableRow } from './types'; diff --git a/plugins/catalog/src/components/CatalogTable/CursorPaginatedCatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CursorPaginatedCatalogTable.tsx index 843d5be2c8..e49ecf3cd9 100644 --- a/plugins/catalog/src/components/CatalogTable/CursorPaginatedCatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/CursorPaginatedCatalogTable.tsx @@ -14,8 +14,6 @@ * limitations under the License. */ -import React from 'react'; - import { Table, TableProps } from '@backstage/core-components'; import { CatalogTableRow } from './types'; import { CatalogTableToolbar } from './CatalogTableToolbar'; diff --git a/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.test.tsx b/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.test.tsx index e2e73c5af8..54c2550451 100644 --- a/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.test.tsx +++ b/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.test.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { ReactNode } from 'react'; +import { ReactNode } from 'react'; import { fireEvent, screen } from '@testing-library/react'; import { CatalogTableRow } from './types'; import { renderInTestApp } from '@backstage/test-utils'; diff --git a/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx index 7ebf791046..96c81088ca 100644 --- a/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useEffect } from 'react'; +import { useState, useEffect } from 'react'; import { Table, TableProps } from '@backstage/core-components'; import { CatalogTableRow } from './types'; @@ -30,7 +30,7 @@ export function OffsetPaginatedCatalogTable( const { columns, data, options, ...restProps } = props; const { setLimit, setOffset, limit, totalItems, offset } = useEntityList(); - const [page, setPage] = React.useState( + const [page, setPage] = useState( offset && limit ? Math.floor(offset / limit) : 0, ); diff --git a/plugins/catalog/src/components/CatalogTable/columns.tsx b/plugins/catalog/src/components/CatalogTable/columns.tsx index 87de8bfc91..05674f3e1b 100644 --- a/plugins/catalog/src/components/CatalogTable/columns.tsx +++ b/plugins/catalog/src/components/CatalogTable/columns.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import { humanizeEntityRef, EntityRefLink, diff --git a/plugins/catalog/src/components/DependencyOfComponentsCard/DependencyOfComponentsCard.test.tsx b/plugins/catalog/src/components/DependencyOfComponentsCard/DependencyOfComponentsCard.test.tsx index 464b97126a..f5bf01a22f 100644 --- a/plugins/catalog/src/components/DependencyOfComponentsCard/DependencyOfComponentsCard.test.tsx +++ b/plugins/catalog/src/components/DependencyOfComponentsCard/DependencyOfComponentsCard.test.tsx @@ -23,15 +23,15 @@ import { import { catalogApiMock } from '@backstage/plugin-catalog-react/testUtils'; import { renderInTestApp, TestApiProvider } from '@backstage/test-utils'; import { screen, waitFor } from '@testing-library/react'; -import React from 'react'; +import { PropsWithChildren, ComponentType, ReactNode } from 'react'; import { DependencyOfComponentsCard } from './DependencyOfComponentsCard'; describe('', () => { const catalogApi = catalogApiMock.mock(); - let Wrapper: React.ComponentType>; + let Wrapper: ComponentType>; beforeEach(() => { - Wrapper = ({ children }: { children?: React.ReactNode }) => ( + Wrapper = ({ children }: { children?: ReactNode }) => ( {children} diff --git a/plugins/catalog/src/components/DependencyOfComponentsCard/DependencyOfComponentsCard.tsx b/plugins/catalog/src/components/DependencyOfComponentsCard/DependencyOfComponentsCard.tsx index 6c6f811cc1..72f6d5b85b 100644 --- a/plugins/catalog/src/components/DependencyOfComponentsCard/DependencyOfComponentsCard.tsx +++ b/plugins/catalog/src/components/DependencyOfComponentsCard/DependencyOfComponentsCard.tsx @@ -23,7 +23,6 @@ import { TableColumn, TableOptions, } from '@backstage/core-components'; -import React from 'react'; import { asComponentEntities, componentEntityColumns, diff --git a/plugins/catalog/src/components/DependsOnComponentsCard/DependsOnComponentsCard.test.tsx b/plugins/catalog/src/components/DependsOnComponentsCard/DependsOnComponentsCard.test.tsx index 9457e329b0..89fc2c141f 100644 --- a/plugins/catalog/src/components/DependsOnComponentsCard/DependsOnComponentsCard.test.tsx +++ b/plugins/catalog/src/components/DependsOnComponentsCard/DependsOnComponentsCard.test.tsx @@ -23,15 +23,15 @@ import { import { catalogApiMock } from '@backstage/plugin-catalog-react/testUtils'; import { renderInTestApp, TestApiProvider } from '@backstage/test-utils'; import { waitFor, screen } from '@testing-library/react'; -import React from 'react'; +import { PropsWithChildren, ComponentType, ReactNode } from 'react'; import { DependsOnComponentsCard } from './DependsOnComponentsCard'; describe('', () => { const catalogApi = catalogApiMock.mock(); - let Wrapper: React.ComponentType>; + let Wrapper: ComponentType>; beforeEach(() => { - Wrapper = ({ children }: { children?: React.ReactNode }) => ( + Wrapper = ({ children }: { children?: ReactNode }) => ( {children} diff --git a/plugins/catalog/src/components/DependsOnComponentsCard/DependsOnComponentsCard.tsx b/plugins/catalog/src/components/DependsOnComponentsCard/DependsOnComponentsCard.tsx index eafa33346d..7276e3bf08 100644 --- a/plugins/catalog/src/components/DependsOnComponentsCard/DependsOnComponentsCard.tsx +++ b/plugins/catalog/src/components/DependsOnComponentsCard/DependsOnComponentsCard.tsx @@ -20,7 +20,6 @@ import { TableColumn, TableOptions, } from '@backstage/core-components'; -import React from 'react'; import { asComponentEntities, componentEntityColumns, diff --git a/plugins/catalog/src/components/DependsOnResourcesCard/DependsOnResourcesCard.test.tsx b/plugins/catalog/src/components/DependsOnResourcesCard/DependsOnResourcesCard.test.tsx index 163a71206c..5cd40e8eb0 100644 --- a/plugins/catalog/src/components/DependsOnResourcesCard/DependsOnResourcesCard.test.tsx +++ b/plugins/catalog/src/components/DependsOnResourcesCard/DependsOnResourcesCard.test.tsx @@ -23,15 +23,15 @@ import { import { catalogApiMock } from '@backstage/plugin-catalog-react/testUtils'; import { renderInTestApp, TestApiProvider } from '@backstage/test-utils'; import { waitFor, screen } from '@testing-library/react'; -import React from 'react'; +import { PropsWithChildren, ComponentType, ReactNode } from 'react'; import { DependsOnResourcesCard } from './DependsOnResourcesCard'; describe('', () => { const catalogApi = catalogApiMock.mock(); - let Wrapper: React.ComponentType>; + let Wrapper: ComponentType>; beforeEach(() => { - Wrapper = ({ children }: { children?: React.ReactNode }) => ( + Wrapper = ({ children }: { children?: ReactNode }) => ( {children} diff --git a/plugins/catalog/src/components/DependsOnResourcesCard/DependsOnResourcesCard.tsx b/plugins/catalog/src/components/DependsOnResourcesCard/DependsOnResourcesCard.tsx index 723b87cc29..64153e98af 100644 --- a/plugins/catalog/src/components/DependsOnResourcesCard/DependsOnResourcesCard.tsx +++ b/plugins/catalog/src/components/DependsOnResourcesCard/DependsOnResourcesCard.tsx @@ -20,7 +20,6 @@ import { TableColumn, TableOptions, } from '@backstage/core-components'; -import React from 'react'; import { asResourceEntities, componentEntityHelpLink, diff --git a/plugins/catalog/src/components/EntityContextMenu/EntityContextMenu.test.tsx b/plugins/catalog/src/components/EntityContextMenu/EntityContextMenu.test.tsx index 4725f35c86..2d873f4e41 100644 --- a/plugins/catalog/src/components/EntityContextMenu/EntityContextMenu.test.tsx +++ b/plugins/catalog/src/components/EntityContextMenu/EntityContextMenu.test.tsx @@ -23,10 +23,10 @@ import { } from '@backstage/test-utils'; import SearchIcon from '@material-ui/icons/Search'; import { fireEvent, screen } from '@testing-library/react'; -import * as React from 'react'; +import { ReactNode } from 'react'; import { EntityContextMenu } from './EntityContextMenu'; -function render(children: React.ReactNode) { +function render(children: ReactNode) { return renderInTestApp( ) => { + const onOpen = (event: SyntheticEvent) => { setAnchorEl(event.currentTarget); }; diff --git a/plugins/catalog/src/components/EntityContextMenu/UnregisterEntity.test.tsx b/plugins/catalog/src/components/EntityContextMenu/UnregisterEntity.test.tsx index 24b574e713..277de47cb9 100644 --- a/plugins/catalog/src/components/EntityContextMenu/UnregisterEntity.test.tsx +++ b/plugins/catalog/src/components/EntityContextMenu/UnregisterEntity.test.tsx @@ -22,10 +22,10 @@ import { TestApiProvider, } from '@backstage/test-utils'; import { fireEvent, screen } from '@testing-library/react'; -import * as React from 'react'; +import { ReactNode } from 'react'; import { UnregisterEntity } from './UnregisterEntity'; -function render(children: React.ReactNode) { +function render(children: ReactNode) { return renderInTestApp( boolean; - tabProps?: TabProps; + tabProps?: TabProps; }; const dataKey = 'plugin.catalog.entityLayoutRoute'; @@ -173,8 +179,8 @@ interface EntityContextMenuOptions { export interface EntityLayoutProps { UNSTABLE_extraContextMenuItems?: ExtraContextMenuItem[]; UNSTABLE_contextMenuOptions?: EntityContextMenuOptions; - children?: React.ReactNode; - NotFoundComponent?: React.ReactNode; + children?: ReactNode; + NotFoundComponent?: ReactNode; /** * An array of relation types used to determine the parent entities in the hierarchy. * These relations are prioritized in the order provided, allowing for flexible diff --git a/plugins/catalog/src/components/EntityLinksCard/EntityLinksCard.test.tsx b/plugins/catalog/src/components/EntityLinksCard/EntityLinksCard.test.tsx index 3731e3c221..92b0ad8696 100644 --- a/plugins/catalog/src/components/EntityLinksCard/EntityLinksCard.test.tsx +++ b/plugins/catalog/src/components/EntityLinksCard/EntityLinksCard.test.tsx @@ -18,7 +18,6 @@ import { Entity, EntityLink } from '@backstage/catalog-model'; import { EntityProvider } from '@backstage/plugin-catalog-react'; import { renderInTestApp } from '@backstage/test-utils'; import { screen } from '@testing-library/react'; -import React from 'react'; import { EntityLinksCard } from './EntityLinksCard'; describe('EntityLinksCard', () => { diff --git a/plugins/catalog/src/components/EntityLinksCard/EntityLinksCard.tsx b/plugins/catalog/src/components/EntityLinksCard/EntityLinksCard.tsx index 59e1f6d252..39088b0a16 100644 --- a/plugins/catalog/src/components/EntityLinksCard/EntityLinksCard.tsx +++ b/plugins/catalog/src/components/EntityLinksCard/EntityLinksCard.tsx @@ -16,7 +16,6 @@ import { useEntity } from '@backstage/plugin-catalog-react'; import LanguageIcon from '@material-ui/icons/Language'; -import React from 'react'; import { EntityLinksEmptyState } from './EntityLinksEmptyState'; import { LinksGridList } from './LinksGridList'; import { ColumnBreakpoints } from './types'; diff --git a/plugins/catalog/src/components/EntityLinksCard/EntityLinksEmptyState.tsx b/plugins/catalog/src/components/EntityLinksCard/EntityLinksEmptyState.tsx index 513183677d..30a515af7f 100644 --- a/plugins/catalog/src/components/EntityLinksCard/EntityLinksEmptyState.tsx +++ b/plugins/catalog/src/components/EntityLinksCard/EntityLinksEmptyState.tsx @@ -17,7 +17,6 @@ import Button from '@material-ui/core/Button'; import Typography from '@material-ui/core/Typography'; import { makeStyles } from '@material-ui/core/styles'; -import React from 'react'; import { CodeSnippet } from '@backstage/core-components'; import { useTranslationRef } from '@backstage/core-plugin-api/alpha'; import { catalogTranslationRef } from '../../alpha/translation'; diff --git a/plugins/catalog/src/components/EntityLinksCard/IconLink.test.tsx b/plugins/catalog/src/components/EntityLinksCard/IconLink.test.tsx index 509a3f3741..209304770d 100644 --- a/plugins/catalog/src/components/EntityLinksCard/IconLink.test.tsx +++ b/plugins/catalog/src/components/EntityLinksCard/IconLink.test.tsx @@ -17,7 +17,6 @@ import { renderInTestApp } from '@backstage/test-utils'; import CloudIcon from '@material-ui/icons/Cloud'; import { screen } from '@testing-library/react'; -import React from 'react'; import { IconLink } from './IconLink'; describe('IconLink', () => { diff --git a/plugins/catalog/src/components/EntityLinksCard/IconLink.tsx b/plugins/catalog/src/components/EntityLinksCard/IconLink.tsx index 77ee12bd36..73ee431c11 100644 --- a/plugins/catalog/src/components/EntityLinksCard/IconLink.tsx +++ b/plugins/catalog/src/components/EntityLinksCard/IconLink.tsx @@ -18,7 +18,6 @@ import Box from '@material-ui/core/Box'; import Typography from '@material-ui/core/Typography'; import { makeStyles } from '@material-ui/core/styles'; import LanguageIcon from '@material-ui/icons/Language'; -import React from 'react'; import { Link } from '@backstage/core-components'; import { IconComponent } from '@backstage/core-plugin-api'; diff --git a/plugins/catalog/src/components/EntityLinksCard/LinksGridList.tsx b/plugins/catalog/src/components/EntityLinksCard/LinksGridList.tsx index 9e046abf76..797428df33 100644 --- a/plugins/catalog/src/components/EntityLinksCard/LinksGridList.tsx +++ b/plugins/catalog/src/components/EntityLinksCard/LinksGridList.tsx @@ -16,7 +16,6 @@ import ImageList from '@material-ui/core/ImageList'; import ImageListItem from '@material-ui/core/ImageListItem'; -import React from 'react'; import { IconLink } from './IconLink'; import { ColumnBreakpoints } from './types'; import { useDynamicColumns } from './useDynamicColumns'; diff --git a/plugins/catalog/src/components/EntityNotFound/EntityNotFound.test.tsx b/plugins/catalog/src/components/EntityNotFound/EntityNotFound.test.tsx index 6f214dc1e0..8a38c48855 100644 --- a/plugins/catalog/src/components/EntityNotFound/EntityNotFound.test.tsx +++ b/plugins/catalog/src/components/EntityNotFound/EntityNotFound.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { renderInTestApp } from '@backstage/test-utils'; import { screen } from '@testing-library/react'; import { EntityNotFound } from './EntityNotFound'; diff --git a/plugins/catalog/src/components/EntityNotFound/EntityNotFound.tsx b/plugins/catalog/src/components/EntityNotFound/EntityNotFound.tsx index a033199ffd..0389ef24fa 100644 --- a/plugins/catalog/src/components/EntityNotFound/EntityNotFound.tsx +++ b/plugins/catalog/src/components/EntityNotFound/EntityNotFound.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import Grid from '@material-ui/core/Grid'; import Button from '@material-ui/core/Button'; import Typography from '@material-ui/core/Typography'; diff --git a/plugins/catalog/src/components/EntityNotFound/Illo/Illo.tsx b/plugins/catalog/src/components/EntityNotFound/Illo/Illo.tsx index 295db57f03..420ef3332c 100644 --- a/plugins/catalog/src/components/EntityNotFound/Illo/Illo.tsx +++ b/plugins/catalog/src/components/EntityNotFound/Illo/Illo.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import IlloSvgUrl from './illo.svg'; diff --git a/plugins/catalog/src/components/EntityOrphanWarning/DeleteEntityDialog.test.tsx b/plugins/catalog/src/components/EntityOrphanWarning/DeleteEntityDialog.test.tsx index 470464c2ce..80d97a2e1e 100644 --- a/plugins/catalog/src/components/EntityOrphanWarning/DeleteEntityDialog.test.tsx +++ b/plugins/catalog/src/components/EntityOrphanWarning/DeleteEntityDialog.test.tsx @@ -15,7 +15,7 @@ */ import userEvent from '@testing-library/user-event'; -import React from 'react'; +import { ReactNode } from 'react'; import { DeleteEntityDialog } from './DeleteEntityDialog'; import { ANNOTATION_ORIGIN_LOCATION } from '@backstage/catalog-model'; import { catalogApiMock } from '@backstage/plugin-catalog-react/testUtils'; @@ -46,7 +46,7 @@ describe('DeleteEntityDialog', () => { spec: {}, }; - const Wrapper = ({ children }: { children?: React.ReactNode }) => ( + const Wrapper = ({ children }: { children?: ReactNode }) => ( ', () => { diff --git a/plugins/catalog/src/components/EntityProcessingErrorsPanel/EntityProcessingErrorsPanel.tsx b/plugins/catalog/src/components/EntityProcessingErrorsPanel/EntityProcessingErrorsPanel.tsx index 3c7c5bb2e3..a98efefffc 100644 --- a/plugins/catalog/src/components/EntityProcessingErrorsPanel/EntityProcessingErrorsPanel.tsx +++ b/plugins/catalog/src/components/EntityProcessingErrorsPanel/EntityProcessingErrorsPanel.tsx @@ -22,7 +22,6 @@ import { useEntity, } from '@backstage/plugin-catalog-react'; import Box from '@material-ui/core/Box'; -import React from 'react'; import { ResponseErrorPanel } from '@backstage/core-components'; import { CatalogApi, diff --git a/plugins/catalog/src/components/EntityRelationWarning/EntityRelationWarning.test.tsx b/plugins/catalog/src/components/EntityRelationWarning/EntityRelationWarning.test.tsx index 2808a8397b..77d8c28ab8 100644 --- a/plugins/catalog/src/components/EntityRelationWarning/EntityRelationWarning.test.tsx +++ b/plugins/catalog/src/components/EntityRelationWarning/EntityRelationWarning.test.tsx @@ -20,7 +20,6 @@ import { catalogApiRef, EntityProvider } from '@backstage/plugin-catalog-react'; import { catalogApiMock } from '@backstage/plugin-catalog-react/testUtils'; import { renderInTestApp, TestApiRegistry } from '@backstage/test-utils'; import { screen } from '@testing-library/react'; -import React from 'react'; import { EntityRelationWarning, hasRelationWarnings, diff --git a/plugins/catalog/src/components/EntityRelationWarning/EntityRelationWarning.tsx b/plugins/catalog/src/components/EntityRelationWarning/EntityRelationWarning.tsx index ed816bfc75..b69993e190 100644 --- a/plugins/catalog/src/components/EntityRelationWarning/EntityRelationWarning.tsx +++ b/plugins/catalog/src/components/EntityRelationWarning/EntityRelationWarning.tsx @@ -21,7 +21,6 @@ import { useEntity, } from '@backstage/plugin-catalog-react'; import Alert from '@material-ui/lab/Alert'; -import React from 'react'; import useAsync from 'react-use/esm/useAsync'; import Box from '@material-ui/core/Box'; import { ResponseErrorPanel } from '@backstage/core-components'; diff --git a/plugins/catalog/src/components/EntitySwitch/EntitySwitch.test.tsx b/plugins/catalog/src/components/EntitySwitch/EntitySwitch.test.tsx index aebdd6b9c2..66affd86f1 100644 --- a/plugins/catalog/src/components/EntitySwitch/EntitySwitch.test.tsx +++ b/plugins/catalog/src/components/EntitySwitch/EntitySwitch.test.tsx @@ -20,7 +20,7 @@ import { EntityProvider, } from '@backstage/plugin-catalog-react'; import { render, screen } from '@testing-library/react'; -import React, { useEffect } from 'react'; +import { ReactNode, useEffect } from 'react'; import { isKind } from './conditions'; import { EntitySwitch } from './EntitySwitch'; import { featureFlagsApiRef } from '@backstage/core-plugin-api'; @@ -28,7 +28,7 @@ import { LocalStorageFeatureFlags } from '@backstage/core-app-api'; import { TestApiProvider } from '@backstage/test-utils'; const mockFeatureFlagsApi = new LocalStorageFeatureFlags(); -const Wrapper = ({ children }: { children?: React.ReactNode }) => ( +const Wrapper = ({ children }: { children?: ReactNode }) => ( {children} diff --git a/plugins/catalog/src/components/EntitySwitch/EntitySwitch.tsx b/plugins/catalog/src/components/EntitySwitch/EntitySwitch.tsx index 6a07bec4da..32f74f45cb 100644 --- a/plugins/catalog/src/components/EntitySwitch/EntitySwitch.tsx +++ b/plugins/catalog/src/components/EntitySwitch/EntitySwitch.tsx @@ -16,7 +16,7 @@ import { Entity } from '@backstage/catalog-model'; import { useAsyncEntity } from '@backstage/plugin-catalog-react'; -import React, { ReactNode, ReactElement } from 'react'; +import { ReactNode, ReactElement } from 'react'; import { attachComponentData, useApiHolder, diff --git a/plugins/catalog/src/components/HasComponentsCard/HasComponentsCard.test.tsx b/plugins/catalog/src/components/HasComponentsCard/HasComponentsCard.test.tsx index bc00c93815..00fceb47c3 100644 --- a/plugins/catalog/src/components/HasComponentsCard/HasComponentsCard.test.tsx +++ b/plugins/catalog/src/components/HasComponentsCard/HasComponentsCard.test.tsx @@ -22,16 +22,16 @@ import { } from '@backstage/plugin-catalog-react'; import { renderInTestApp, TestApiProvider } from '@backstage/test-utils'; import { waitFor, screen } from '@testing-library/react'; -import React from 'react'; +import { PropsWithChildren, ComponentType, ReactNode } from 'react'; import { HasComponentsCard } from './HasComponentsCard'; import { catalogApiMock } from '@backstage/plugin-catalog-react/testUtils'; describe('', () => { const catalogApi = catalogApiMock.mock(); - let Wrapper: React.ComponentType>; + let Wrapper: ComponentType>; beforeEach(() => { - Wrapper = ({ children }: { children?: React.ReactNode }) => ( + Wrapper = ({ children }: { children?: ReactNode }) => ( {children} diff --git a/plugins/catalog/src/components/HasComponentsCard/HasComponentsCard.tsx b/plugins/catalog/src/components/HasComponentsCard/HasComponentsCard.tsx index 2fc6cde81b..2917cdf1e1 100644 --- a/plugins/catalog/src/components/HasComponentsCard/HasComponentsCard.tsx +++ b/plugins/catalog/src/components/HasComponentsCard/HasComponentsCard.tsx @@ -20,7 +20,6 @@ import { TableColumn, TableOptions, } from '@backstage/core-components'; -import React from 'react'; import { asComponentEntities, componentEntityColumns, diff --git a/plugins/catalog/src/components/HasResourcesCard/HasResourcesCard.test.tsx b/plugins/catalog/src/components/HasResourcesCard/HasResourcesCard.test.tsx index 1d524100f2..c79aedcb4a 100644 --- a/plugins/catalog/src/components/HasResourcesCard/HasResourcesCard.test.tsx +++ b/plugins/catalog/src/components/HasResourcesCard/HasResourcesCard.test.tsx @@ -23,15 +23,15 @@ import { import { catalogApiMock } from '@backstage/plugin-catalog-react/testUtils'; import { renderInTestApp, TestApiProvider } from '@backstage/test-utils'; import { waitFor, screen } from '@testing-library/react'; -import React from 'react'; +import { PropsWithChildren, ComponentType, ReactNode } from 'react'; import { HasResourcesCard } from './HasResourcesCard'; describe('', () => { const catalogApi = catalogApiMock.mock(); - let Wrapper: React.ComponentType>; + let Wrapper: ComponentType>; beforeEach(() => { - Wrapper = ({ children }: { children?: React.ReactNode }) => ( + Wrapper = ({ children }: { children?: ReactNode }) => ( {children} diff --git a/plugins/catalog/src/components/HasResourcesCard/HasResourcesCard.tsx b/plugins/catalog/src/components/HasResourcesCard/HasResourcesCard.tsx index 6b90ce0443..81cd432290 100644 --- a/plugins/catalog/src/components/HasResourcesCard/HasResourcesCard.tsx +++ b/plugins/catalog/src/components/HasResourcesCard/HasResourcesCard.tsx @@ -20,7 +20,6 @@ import { TableColumn, TableOptions, } from '@backstage/core-components'; -import React from 'react'; import { asResourceEntities, RelatedEntitiesCard, diff --git a/plugins/catalog/src/components/HasSubcomponentsCard/HasSubcomponentsCard.test.tsx b/plugins/catalog/src/components/HasSubcomponentsCard/HasSubcomponentsCard.test.tsx index 2357a34dcd..88d215bb92 100644 --- a/plugins/catalog/src/components/HasSubcomponentsCard/HasSubcomponentsCard.test.tsx +++ b/plugins/catalog/src/components/HasSubcomponentsCard/HasSubcomponentsCard.test.tsx @@ -23,15 +23,15 @@ import { import { catalogApiMock } from '@backstage/plugin-catalog-react/testUtils'; import { renderInTestApp, TestApiProvider } from '@backstage/test-utils'; import { waitFor, screen } from '@testing-library/react'; -import React from 'react'; +import { PropsWithChildren, ComponentType, ReactNode } from 'react'; import { HasSubcomponentsCard } from './HasSubcomponentsCard'; describe('', () => { const catalogApi = catalogApiMock.mock(); - let Wrapper: React.ComponentType>; + let Wrapper: ComponentType>; beforeEach(() => { - Wrapper = ({ children }: { children?: React.ReactNode }) => ( + Wrapper = ({ children }: { children?: ReactNode }) => ( {children} diff --git a/plugins/catalog/src/components/HasSubcomponentsCard/HasSubcomponentsCard.tsx b/plugins/catalog/src/components/HasSubcomponentsCard/HasSubcomponentsCard.tsx index c678e45c7c..84087ed082 100644 --- a/plugins/catalog/src/components/HasSubcomponentsCard/HasSubcomponentsCard.tsx +++ b/plugins/catalog/src/components/HasSubcomponentsCard/HasSubcomponentsCard.tsx @@ -20,7 +20,6 @@ import { TableColumn, TableOptions, } from '@backstage/core-components'; -import React from 'react'; import { asComponentEntities, componentEntityColumns, diff --git a/plugins/catalog/src/components/HasSubdomainsCard/HasSubdomainsCard.test.tsx b/plugins/catalog/src/components/HasSubdomainsCard/HasSubdomainsCard.test.tsx index 0498cacfe3..0781b9e77d 100644 --- a/plugins/catalog/src/components/HasSubdomainsCard/HasSubdomainsCard.test.tsx +++ b/plugins/catalog/src/components/HasSubdomainsCard/HasSubdomainsCard.test.tsx @@ -23,15 +23,15 @@ import { import { catalogApiMock } from '@backstage/plugin-catalog-react/testUtils'; import { renderInTestApp, TestApiProvider } from '@backstage/test-utils'; import { waitFor, screen } from '@testing-library/react'; -import React from 'react'; +import { PropsWithChildren, ComponentType, ReactNode } from 'react'; import { HasSubdomainsCard } from './HasSubdomainsCard'; describe('', () => { const catalogApi = catalogApiMock.mock(); - let Wrapper: React.ComponentType>; + let Wrapper: ComponentType>; beforeEach(() => { - Wrapper = ({ children }: { children?: React.ReactNode }) => ( + Wrapper = ({ children }: { children?: ReactNode }) => ( {children} diff --git a/plugins/catalog/src/components/HasSubdomainsCard/HasSubdomainsCard.tsx b/plugins/catalog/src/components/HasSubdomainsCard/HasSubdomainsCard.tsx index b52f5eacf7..367dbe6c94 100644 --- a/plugins/catalog/src/components/HasSubdomainsCard/HasSubdomainsCard.tsx +++ b/plugins/catalog/src/components/HasSubdomainsCard/HasSubdomainsCard.tsx @@ -20,7 +20,6 @@ import { TableColumn, TableOptions, } from '@backstage/core-components'; -import React from 'react'; import { asDomainEntities, domainEntityColumns, diff --git a/plugins/catalog/src/components/HasSystemsCard/HasSystemsCard.test.tsx b/plugins/catalog/src/components/HasSystemsCard/HasSystemsCard.test.tsx index 51b2ce87ee..384155ea54 100644 --- a/plugins/catalog/src/components/HasSystemsCard/HasSystemsCard.test.tsx +++ b/plugins/catalog/src/components/HasSystemsCard/HasSystemsCard.test.tsx @@ -23,15 +23,15 @@ import { import { catalogApiMock } from '@backstage/plugin-catalog-react/testUtils'; import { renderInTestApp, TestApiProvider } from '@backstage/test-utils'; import { waitFor, screen } from '@testing-library/react'; -import React from 'react'; +import { PropsWithChildren, ComponentType, ReactNode } from 'react'; import { HasSystemsCard } from './HasSystemsCard'; describe('', () => { const catalogApi = catalogApiMock.mock(); - let Wrapper: React.ComponentType>; + let Wrapper: ComponentType>; beforeEach(() => { - Wrapper = ({ children }: { children?: React.ReactNode }) => ( + Wrapper = ({ children }: { children?: ReactNode }) => ( {children} diff --git a/plugins/catalog/src/components/HasSystemsCard/HasSystemsCard.tsx b/plugins/catalog/src/components/HasSystemsCard/HasSystemsCard.tsx index 48742f9d28..fab9cf4769 100644 --- a/plugins/catalog/src/components/HasSystemsCard/HasSystemsCard.tsx +++ b/plugins/catalog/src/components/HasSystemsCard/HasSystemsCard.tsx @@ -20,7 +20,6 @@ import { TableColumn, TableOptions, } from '@backstage/core-components'; -import React from 'react'; import { asSystemEntities, RelatedEntitiesCard, diff --git a/plugins/catalog/src/components/RelatedEntitiesCard/RelatedEntitiesCard.tsx b/plugins/catalog/src/components/RelatedEntitiesCard/RelatedEntitiesCard.tsx index 40481614e2..1337a6dc12 100644 --- a/plugins/catalog/src/components/RelatedEntitiesCard/RelatedEntitiesCard.tsx +++ b/plugins/catalog/src/components/RelatedEntitiesCard/RelatedEntitiesCard.tsx @@ -21,7 +21,6 @@ import { useEntity, useRelatedEntities, } from '@backstage/plugin-catalog-react'; -import React from 'react'; import { InfoCard, InfoCardVariants, diff --git a/plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.test.tsx b/plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.test.tsx index 58aa892c5f..373eb2fd5f 100644 --- a/plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.test.tsx +++ b/plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.test.tsx @@ -22,7 +22,6 @@ import { import { Entity, RELATION_PART_OF } from '@backstage/catalog-model'; import { renderInTestApp, TestApiProvider } from '@backstage/test-utils'; import { screen } from '@testing-library/react'; -import React from 'react'; import { SystemDiagramCard } from './SystemDiagramCard'; import { catalogApiMock } from '@backstage/plugin-catalog-react/testUtils'; diff --git a/plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.tsx b/plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.tsx index 879a5076b1..40fd89f2e8 100644 --- a/plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.tsx +++ b/plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.tsx @@ -33,7 +33,6 @@ import Box from '@material-ui/core/Box'; import Typography from '@material-ui/core/Typography'; import { makeStyles, useTheme } from '@material-ui/core/styles'; import ZoomOutMap from '@material-ui/icons/ZoomOutMap'; -import React from 'react'; import useAsync from 'react-use/esm/useAsync'; import { diff --git a/plugins/config-schema/dev/index.tsx b/plugins/config-schema/dev/index.tsx index 135449d808..be50ff6fe2 100644 --- a/plugins/config-schema/dev/index.tsx +++ b/plugins/config-schema/dev/index.tsx @@ -16,7 +16,6 @@ import { createDevApp } from '@backstage/dev-utils'; import { Schema } from 'jsonschema'; -import React from 'react'; import Observable from 'zen-observable'; import { configSchemaApiRef } from '../src/api'; import { ConfigSchemaResult } from '../src/api/types'; diff --git a/plugins/config-schema/src/components/ConfigSchemaPage/ConfigSchemaPage.tsx b/plugins/config-schema/src/components/ConfigSchemaPage/ConfigSchemaPage.tsx index d00de0e155..81e5e6012f 100644 --- a/plugins/config-schema/src/components/ConfigSchemaPage/ConfigSchemaPage.tsx +++ b/plugins/config-schema/src/components/ConfigSchemaPage/ConfigSchemaPage.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, { useMemo } from 'react'; +import { useMemo } from 'react'; import useObservable from 'react-use/esm/useObservable'; import { configSchemaApiRef } from '../../api'; import { SchemaViewer } from '../SchemaViewer'; diff --git a/plugins/config-schema/src/components/SchemaBrowser/SchemaBrowser.tsx b/plugins/config-schema/src/components/SchemaBrowser/SchemaBrowser.tsx index bae9aec23a..074b758055 100644 --- a/plugins/config-schema/src/components/SchemaBrowser/SchemaBrowser.tsx +++ b/plugins/config-schema/src/components/SchemaBrowser/SchemaBrowser.tsx @@ -21,7 +21,7 @@ import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; import TreeItem, { TreeItemProps } from '@material-ui/lab/TreeItem'; import TreeView from '@material-ui/lab/TreeView'; import { Schema } from 'jsonschema'; -import React, { ReactNode, useMemo, useRef } from 'react'; +import { ReactNode, useMemo, useRef } from 'react'; import { useScrollTargets } from '../ScrollTargetsContext'; const StyledTreeItem = withStyles(theme => diff --git a/plugins/config-schema/src/components/SchemaView/SchemaView.tsx b/plugins/config-schema/src/components/SchemaView/SchemaView.tsx index d7a8db4f69..f7107ccd14 100644 --- a/plugins/config-schema/src/components/SchemaView/SchemaView.tsx +++ b/plugins/config-schema/src/components/SchemaView/SchemaView.tsx @@ -26,7 +26,7 @@ import TableRow from '@material-ui/core/TableRow'; import Typography from '@material-ui/core/Typography'; import { makeStyles } from '@material-ui/core/styles'; import { Schema } from 'jsonschema'; -import React, { useEffect, useRef } from 'react'; +import { useEffect, useRef } from 'react'; import { useScrollTargets } from '../ScrollTargetsContext/ScrollTargetsContext'; import { SchemaViewProps } from './types'; diff --git a/plugins/config-schema/src/components/SchemaViewer/SchemaViewer.test.tsx b/plugins/config-schema/src/components/SchemaViewer/SchemaViewer.test.tsx index 91a7b19e4a..34df08f16d 100644 --- a/plugins/config-schema/src/components/SchemaViewer/SchemaViewer.test.tsx +++ b/plugins/config-schema/src/components/SchemaViewer/SchemaViewer.test.tsx @@ -16,7 +16,6 @@ import { render, screen } from '@testing-library/react'; import { Schema } from 'jsonschema'; -import React from 'react'; import { SchemaViewer } from './SchemaViewer'; describe('SchemaViewer', () => { diff --git a/plugins/config-schema/src/components/SchemaViewer/SchemaViewer.tsx b/plugins/config-schema/src/components/SchemaViewer/SchemaViewer.tsx index 80912d5428..876de4307c 100644 --- a/plugins/config-schema/src/components/SchemaViewer/SchemaViewer.tsx +++ b/plugins/config-schema/src/components/SchemaViewer/SchemaViewer.tsx @@ -17,7 +17,6 @@ import Box from '@material-ui/core/Box'; import Paper from '@material-ui/core/Paper'; import { Schema } from 'jsonschema'; -import React from 'react'; import { SchemaView } from '../SchemaView'; import { SchemaBrowser } from '../SchemaBrowser'; import { ScrollTargetsProvider } from '../ScrollTargetsContext/ScrollTargetsContext'; diff --git a/plugins/config-schema/src/components/ScrollTargetsContext/ScrollTargetsContext.tsx b/plugins/config-schema/src/components/ScrollTargetsContext/ScrollTargetsContext.tsx index 925d0c82b4..fd67341dc2 100644 --- a/plugins/config-schema/src/components/ScrollTargetsContext/ScrollTargetsContext.tsx +++ b/plugins/config-schema/src/components/ScrollTargetsContext/ScrollTargetsContext.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { createContext, ReactNode, useContext } from 'react'; +import { createContext, ReactNode, useContext } from 'react'; class ScrollTargetsForwarder { private readonly listeners = new Map void>(); diff --git a/plugins/devtools/README.md b/plugins/devtools/README.md index fef51626ad..1032d1614c 100644 --- a/plugins/devtools/README.md +++ b/plugins/devtools/README.md @@ -112,7 +112,6 @@ The DevTools plugin has been designed so that you can customize the tabs to suit InfoContent, } from '@backstage/plugin-devtools'; import { DevToolsLayout } from '@backstage/plugin-devtools'; - import React from 'react'; export const DevToolsPage = () => { return ( @@ -374,7 +373,6 @@ import { devToolsInfoReadPermission, } from '@backstage/plugin-devtools-common'; import { RequirePermission } from '@backstage/plugin-permission-react'; -import React from 'react'; const DevToolsPage = () => { return ( diff --git a/plugins/devtools/dev/index.tsx b/plugins/devtools/dev/index.tsx index 00c966a801..fc88433e24 100644 --- a/plugins/devtools/dev/index.tsx +++ b/plugins/devtools/dev/index.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import { createDevApp } from '@backstage/dev-utils'; import { devToolsPlugin, DevToolsPage } from '../src/plugin'; diff --git a/plugins/devtools/src/alpha/plugin.tsx b/plugins/devtools/src/alpha/plugin.tsx index 4c62dd3155..bb2142ab9b 100644 --- a/plugins/devtools/src/alpha/plugin.tsx +++ b/plugins/devtools/src/alpha/plugin.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { createApiFactory, createFrontendPlugin, diff --git a/plugins/devtools/src/components/Content/ConfigContent/ConfigContent.tsx b/plugins/devtools/src/components/Content/ConfigContent/ConfigContent.tsx index 4bd4bc95c6..0130d9fda2 100644 --- a/plugins/devtools/src/components/Content/ConfigContent/ConfigContent.tsx +++ b/plugins/devtools/src/components/Content/ConfigContent/ConfigContent.tsx @@ -25,7 +25,6 @@ import { useTheme, } from '@material-ui/core/styles'; import Alert from '@material-ui/lab/Alert'; -import React from 'react'; import ReactJson from 'react-json-view'; import { useConfig } from '../../../hooks'; import { ConfigError } from '@backstage/plugin-devtools-common'; diff --git a/plugins/devtools/src/components/Content/ExternalDependenciesContent/ExternalDependenciesContent.tsx b/plugins/devtools/src/components/Content/ExternalDependenciesContent/ExternalDependenciesContent.tsx index c6a46ea8fb..46dc38b3e5 100644 --- a/plugins/devtools/src/components/Content/ExternalDependenciesContent/ExternalDependenciesContent.tsx +++ b/plugins/devtools/src/components/Content/ExternalDependenciesContent/ExternalDependenciesContent.tsx @@ -29,7 +29,6 @@ import Paper from '@material-ui/core/Paper'; import Typography from '@material-ui/core/Typography'; import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; import Alert from '@material-ui/lab/Alert'; -import React from 'react'; import { useExternalDependencies } from '../../../hooks'; const useStyles = makeStyles((theme: Theme) => diff --git a/plugins/devtools/src/components/Content/InfoContent/BackstageLogoIcon.tsx b/plugins/devtools/src/components/Content/InfoContent/BackstageLogoIcon.tsx index 8a9df77546..bac889ad8f 100644 --- a/plugins/devtools/src/components/Content/InfoContent/BackstageLogoIcon.tsx +++ b/plugins/devtools/src/components/Content/InfoContent/BackstageLogoIcon.tsx @@ -16,8 +16,6 @@ import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon'; -import React from 'react'; - export const BackstageLogoIcon = (props: SvgIconProps) => ( diff --git a/plugins/devtools/src/components/Content/InfoContent/InfoContent.tsx b/plugins/devtools/src/components/Content/InfoContent/InfoContent.tsx index d32f8619ba..ca61e7b4e1 100644 --- a/plugins/devtools/src/components/Content/InfoContent/InfoContent.tsx +++ b/plugins/devtools/src/components/Content/InfoContent/InfoContent.tsx @@ -26,7 +26,6 @@ import Paper from '@material-ui/core/Paper'; import Button from '@material-ui/core/Button'; import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; import Alert from '@material-ui/lab/Alert'; -import React from 'react'; import { useInfo } from '../../../hooks'; import { InfoDependenciesTable } from './InfoDependenciesTable'; import DescriptionIcon from '@material-ui/icons/Description'; diff --git a/plugins/devtools/src/components/Content/InfoContent/InfoDependenciesTable.tsx b/plugins/devtools/src/components/Content/InfoContent/InfoDependenciesTable.tsx index e1ab59f279..df6cb6144a 100644 --- a/plugins/devtools/src/components/Content/InfoContent/InfoDependenciesTable.tsx +++ b/plugins/devtools/src/components/Content/InfoContent/InfoDependenciesTable.tsx @@ -17,8 +17,6 @@ import { Table, TableColumn } from '@backstage/core-components'; import { PackageDependency } from '@backstage/plugin-devtools-common'; -import React from 'react'; - const columns: TableColumn[] = [ { title: 'Name', diff --git a/plugins/devtools/src/components/DefaultDevToolsPage/DefaultDevToolsPage.tsx b/plugins/devtools/src/components/DefaultDevToolsPage/DefaultDevToolsPage.tsx index a5e4f2439b..b4e5d3db5b 100644 --- a/plugins/devtools/src/components/DefaultDevToolsPage/DefaultDevToolsPage.tsx +++ b/plugins/devtools/src/components/DefaultDevToolsPage/DefaultDevToolsPage.tsx @@ -22,7 +22,6 @@ import { import { ConfigContent } from '../Content/ConfigContent'; import { DevToolsLayout } from '../DevToolsLayout'; import { InfoContent } from '../Content/InfoContent'; -import React from 'react'; import { RequirePermission } from '@backstage/plugin-permission-react'; /** @public */ diff --git a/plugins/devtools/src/components/DevToolsLayout/DevToolsLayout.tsx b/plugins/devtools/src/components/DevToolsLayout/DevToolsLayout.tsx index bce0837ef1..7ffb6dfc73 100644 --- a/plugins/devtools/src/components/DevToolsLayout/DevToolsLayout.tsx +++ b/plugins/devtools/src/components/DevToolsLayout/DevToolsLayout.tsx @@ -20,14 +20,14 @@ import { useElementFilter, } from '@backstage/core-plugin-api'; import { TabProps } from '@material-ui/core/Tab'; -import { default as React } from 'react'; +import { ElementType, ReactNode } from 'react'; /** @public */ export type SubRoute = { path: string; title: string; children: JSX.Element; - tabProps?: TabProps; + tabProps?: TabProps; }; const dataKey = 'plugin.devtools.devtoolsLayoutRoute'; @@ -42,7 +42,7 @@ attachComponentData(Route, 'core.gatherMountPoints', true); export type DevToolsLayoutProps = { title?: string; subtitle?: string; - children?: React.ReactNode; + children?: ReactNode; }; /** diff --git a/plugins/devtools/src/components/DevToolsPage/DevToolsPage.tsx b/plugins/devtools/src/components/DevToolsPage/DevToolsPage.tsx index 880efed68c..07a549f8eb 100644 --- a/plugins/devtools/src/components/DevToolsPage/DevToolsPage.tsx +++ b/plugins/devtools/src/components/DevToolsPage/DevToolsPage.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { useOutlet } from 'react-router-dom'; import { DefaultDevToolsPage } from '../DefaultDevToolsPage'; diff --git a/plugins/example-todo-list/src/components/TodoList/TodoList.tsx b/plugins/example-todo-list/src/components/TodoList/TodoList.tsx index 887dd68a84..31a801aa2e 100644 --- a/plugins/example-todo-list/src/components/TodoList/TodoList.tsx +++ b/plugins/example-todo-list/src/components/TodoList/TodoList.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import { Table, TableColumn, Progress } from '@backstage/core-components'; import Alert from '@material-ui/lab/Alert'; import useAsync from 'react-use/esm/useAsync'; diff --git a/plugins/example-todo-list/src/components/TodoListPage/TodoListPage.tsx b/plugins/example-todo-list/src/components/TodoListPage/TodoListPage.tsx index 418ec61201..d669fc7b79 100644 --- a/plugins/example-todo-list/src/components/TodoListPage/TodoListPage.tsx +++ b/plugins/example-todo-list/src/components/TodoListPage/TodoListPage.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, { useReducer, useRef, useState } from 'react'; +import { useReducer, useRef, useState } from 'react'; import Typography from '@material-ui/core/Typography'; import Grid from '@material-ui/core/Grid'; import TextField from '@material-ui/core/TextField'; diff --git a/plugins/home-react/src/components/SettingsModal.tsx b/plugins/home-react/src/components/SettingsModal.tsx index b119e6d646..4a6aa46198 100644 --- a/plugins/home-react/src/components/SettingsModal.tsx +++ b/plugins/home-react/src/components/SettingsModal.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import Button from '@material-ui/core/Button'; import Dialog from '@material-ui/core/Dialog'; import DialogActions from '@material-ui/core/DialogActions'; diff --git a/plugins/home-react/src/extensions.tsx b/plugins/home-react/src/extensions.tsx index dd4b1e9df7..610c76bb0e 100644 --- a/plugins/home-react/src/extensions.tsx +++ b/plugins/home-react/src/extensions.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { Suspense } from 'react'; +import { useState, Suspense } from 'react'; import IconButton from '@material-ui/core/IconButton'; import SettingsIcon from '@material-ui/icons/Settings'; import { InfoCard } from '@backstage/core-components'; @@ -132,7 +132,7 @@ function CardExtension(props: CardExtensionComponentProps) { } = props; const app = useApp(); const { Progress } = app.getComponents(); - const [settingsOpen, setSettingsOpen] = React.useState(false); + const [settingsOpen, setSettingsOpen] = useState(false); if (Renderer) { return ( diff --git a/plugins/home/README.md b/plugins/home/README.md index 35f9cb0738..1e5fd6b2d2 100644 --- a/plugins/home/README.md +++ b/plugins/home/README.md @@ -20,8 +20,6 @@ yarn --cwd packages/app add @backstage/plugin-home `packages/app/src/components/home/HomePage.tsx` ```tsx -import React from 'react'; - export const homePage = ( /* TODO: Compose a Home Page here */ ); @@ -66,7 +64,6 @@ In summary: it is not necessary to use the `createCardExtension` extension creat Composing a Home Page is no different from creating a regular React Component, i.e. the App Integrator is free to include whatever content they like. However, there are components developed with the Home Page in mind, as described in the previous section. If created by the `createCardExtension` extension creator, they are rendered like so ```tsx -import React from 'react'; import Grid from '@material-ui/core/Grid'; import { RandomJokeHomePageComponent } from '@backstage/plugin-home'; @@ -249,7 +246,6 @@ Being provided by the `` and `` c ```tsx // packages/app/src/components/home/HomePage.tsx -import React from 'react'; import Grid from '@material-ui/core/Grid'; import { HomePageTopVisited, diff --git a/plugins/home/dev/index.tsx b/plugins/home/dev/index.tsx index 802203e9f4..341253a49e 100644 --- a/plugins/home/dev/index.tsx +++ b/plugins/home/dev/index.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import { createDevApp } from '@backstage/dev-utils'; import { homePlugin, HomepageCompositionRoot } from '../src/plugin'; diff --git a/plugins/home/src/alpha.tsx b/plugins/home/src/alpha.tsx index ce96b18943..755cf55212 100644 --- a/plugins/home/src/alpha.tsx +++ b/plugins/home/src/alpha.tsx @@ -14,8 +14,6 @@ * limitations under the License. */ -import React from 'react'; - import { coreExtensionData, createExtensionDataRef, diff --git a/plugins/home/src/assets/TemplateBackstageLogo.tsx b/plugins/home/src/assets/TemplateBackstageLogo.tsx index 231e65e0c6..0da79c0564 100644 --- a/plugins/home/src/assets/TemplateBackstageLogo.tsx +++ b/plugins/home/src/assets/TemplateBackstageLogo.tsx @@ -14,9 +14,6 @@ * limitations under the License. */ -import React from 'react'; - -/** @public */ export const TemplateBackstageLogo = (props: { classes: { svg: string; diff --git a/plugins/home/src/assets/TemplateBackstageLogoIcon.tsx b/plugins/home/src/assets/TemplateBackstageLogoIcon.tsx index a8e3c311db..e9ce97417f 100644 --- a/plugins/home/src/assets/TemplateBackstageLogoIcon.tsx +++ b/plugins/home/src/assets/TemplateBackstageLogoIcon.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; const useStyles = makeStyles({ diff --git a/plugins/home/src/componentRenderers/ComponentAccordion.tsx b/plugins/home/src/componentRenderers/ComponentAccordion.tsx index 6b3242518d..f9a4e97554 100644 --- a/plugins/home/src/componentRenderers/ComponentAccordion.tsx +++ b/plugins/home/src/componentRenderers/ComponentAccordion.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React from 'react'; +import { useState } from 'react'; import { SettingsModal } from '@backstage/plugin-home-react'; import Accordion from '@material-ui/core/Accordion'; import AccordionDetails from '@material-ui/core/AccordionDetails'; @@ -54,8 +54,8 @@ export const ComponentAccordion = (props: { } = props; const classes = useStyles(); - const [settingsIsExpanded, setSettingsIsExpanded] = React.useState(false); - const [isExpanded, setIsExpanded] = React.useState(expanded); + const [settingsIsExpanded, setSettingsIsExpanded] = useState(false); + const [isExpanded, setIsExpanded] = useState(expanded); const handleOpenSettings = (e: any) => { e.stopPropagation(); diff --git a/plugins/home/src/componentRenderers/ComponentTabs/ComponentTab.tsx b/plugins/home/src/componentRenderers/ComponentTabs/ComponentTab.tsx index b195076297..ea7cdafcea 100644 --- a/plugins/home/src/componentRenderers/ComponentTabs/ComponentTab.tsx +++ b/plugins/home/src/componentRenderers/ComponentTabs/ComponentTab.tsx @@ -14,8 +14,6 @@ * limitations under the License. */ -import React from 'react'; - export const ComponentTab = (props: { title: string; Content: () => JSX.Element; diff --git a/plugins/home/src/componentRenderers/ComponentTabs/ComponentTabs.test.tsx b/plugins/home/src/componentRenderers/ComponentTabs/ComponentTabs.test.tsx index c646e840a8..0372a2b932 100644 --- a/plugins/home/src/componentRenderers/ComponentTabs/ComponentTabs.test.tsx +++ b/plugins/home/src/componentRenderers/ComponentTabs/ComponentTabs.test.tsx @@ -16,7 +16,6 @@ import { render } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import React from 'react'; import { ComponentTabs } from './ComponentTabs'; describe('', () => { diff --git a/plugins/home/src/componentRenderers/ComponentTabs/ComponentTabs.tsx b/plugins/home/src/componentRenderers/ComponentTabs/ComponentTabs.tsx index 4e7053bfcb..015db43446 100644 --- a/plugins/home/src/componentRenderers/ComponentTabs/ComponentTabs.tsx +++ b/plugins/home/src/componentRenderers/ComponentTabs/ComponentTabs.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React from 'react'; +import { useState } from 'react'; import Tabs from '@material-ui/core/Tabs'; import Tab from '@material-ui/core/Tab'; import { InfoCard } from '@backstage/core-components'; @@ -27,7 +27,7 @@ type TabType = { export const ComponentTabs = (props: { title: string; tabs: TabType[] }) => { const { title, tabs } = props; - const [value, setValue] = React.useState(0); + const [value, setValue] = useState(0); const handleChange = (_event: any, newValue: number) => { setValue(newValue); diff --git a/plugins/home/src/components/CustomHomepage/AddWidgetDialog.tsx b/plugins/home/src/components/CustomHomepage/AddWidgetDialog.tsx index b983983224..6519bfe901 100644 --- a/plugins/home/src/components/CustomHomepage/AddWidgetDialog.tsx +++ b/plugins/home/src/components/CustomHomepage/AddWidgetDialog.tsx @@ -22,7 +22,6 @@ import DialogTitle from '@material-ui/core/DialogTitle'; import ListItemAvatar from '@material-ui/core/ListItemAvatar'; import AddIcon from '@material-ui/icons/Add'; import ListItemText from '@material-ui/core/ListItemText'; -import React from 'react'; import Typography from '@material-ui/core/Typography'; interface AddWidgetDialogProps { diff --git a/plugins/home/src/components/CustomHomepage/CustomHomepageButtons.tsx b/plugins/home/src/components/CustomHomepage/CustomHomepageButtons.tsx index 5236eef811..d586f94d20 100644 --- a/plugins/home/src/components/CustomHomepage/CustomHomepageButtons.tsx +++ b/plugins/home/src/components/CustomHomepage/CustomHomepageButtons.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ import Button from '@material-ui/core/Button'; -import React from 'react'; import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; import SaveIcon from '@material-ui/icons/Save'; import DeleteIcon from '@material-ui/icons/Delete'; diff --git a/plugins/home/src/components/CustomHomepage/CustomHomepageGrid.tsx b/plugins/home/src/components/CustomHomepage/CustomHomepageGrid.tsx index b5e502ad33..da55ccc5f4 100644 --- a/plugins/home/src/components/CustomHomepage/CustomHomepageGrid.tsx +++ b/plugins/home/src/components/CustomHomepage/CustomHomepageGrid.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useCallback, useMemo } from 'react'; +import { isValidElement, useState, useCallback, useMemo } from 'react'; import { Layout, Layouts, Responsive, WidthProvider } from 'react-grid-layout'; import { ElementCollection, @@ -129,7 +129,7 @@ const convertConfigToDefaultWidgets = ( ): GridWidget[] => { const ret = config.map((conf, i) => { const c = LayoutConfigurationSchema.parse(conf); - const name = React.isValidElement(c.component) + const name = isValidElement(c.component) ? getComponentData(c.component, 'core.extensionName') : (c.component as unknown as string); if (!name) { @@ -212,9 +212,9 @@ export const CustomHomepageGrid = (props: CustomHomepageGridProps) => { : []; }, [props.config, availableWidgets]); const [widgets, setWidgets] = useHomeStorage(defaultLayout); - const [addWidgetDialogOpen, setAddWidgetDialogOpen] = React.useState(false); + const [addWidgetDialogOpen, setAddWidgetDialogOpen] = useState(false); const editModeOn = widgets.find(w => w.layout.isResizable) !== undefined; - const [editMode, setEditMode] = React.useState(editModeOn); + const [editMode, setEditMode] = useState(editModeOn); const getWidgetByName = (name: string) => { return availableWidgets.find(widget => widget.name === name); }; diff --git a/plugins/home/src/components/CustomHomepage/WidgetSettingsOverlay.tsx b/plugins/home/src/components/CustomHomepage/WidgetSettingsOverlay.tsx index cfcd47b8f3..016a4d56c1 100644 --- a/plugins/home/src/components/CustomHomepage/WidgetSettingsOverlay.tsx +++ b/plugins/home/src/components/CustomHomepage/WidgetSettingsOverlay.tsx @@ -24,12 +24,11 @@ import Tooltip from '@material-ui/core/Tooltip'; import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; import DeleteIcon from '@material-ui/icons/Delete'; import SettingsIcon from '@material-ui/icons/Settings'; +import { useState } from 'react'; +import { Widget } from './types'; import { withTheme } from '@rjsf/core'; import { Theme as MuiTheme } from '@rjsf/material-ui'; import validator from '@rjsf/validator-ajv8'; -import React from 'react'; - -import { Widget } from './types'; const Form = withTheme(MuiTheme); @@ -65,7 +64,7 @@ interface WidgetSettingsOverlayProps { export const WidgetSettingsOverlay = (props: WidgetSettingsOverlayProps) => { const { id, widget, settings, handleRemove, handleSettingsSave, deletable } = props; - const [settingsDialogOpen, setSettingsDialogOpen] = React.useState(false); + const [settingsDialogOpen, setSettingsDialogOpen] = useState(false); const styles = useStyles(); const onClose = () => setSettingsDialogOpen(false); diff --git a/plugins/home/src/components/CustomHomepage/types.ts b/plugins/home/src/components/CustomHomepage/types.ts index 79e94c5f03..6bbcb759d3 100644 --- a/plugins/home/src/components/CustomHomepage/types.ts +++ b/plugins/home/src/components/CustomHomepage/types.ts @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { ReactElement, ReactNode } from 'react'; +import { CSSProperties, ReactElement, ReactNode } from 'react'; import { Layout } from 'react-grid-layout'; import { z } from 'zod'; import { RJSFSchema, UiSchema } from '@rjsf/utils'; @@ -82,7 +82,7 @@ export type CustomHomepageGridProps = { /** * Custom style for grid. */ - style?: React.CSSProperties; + style?: CSSProperties; /** * Compaction type of widgets in the grid. This controls where widgets are moved in case * they are overlapping in the grid. diff --git a/plugins/home/src/components/HomepageCompositionRoot.tsx b/plugins/home/src/components/HomepageCompositionRoot.tsx index 4d7678b8e5..d05a6c5e60 100644 --- a/plugins/home/src/components/HomepageCompositionRoot.tsx +++ b/plugins/home/src/components/HomepageCompositionRoot.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { ReactNode } from 'react'; +import { ReactNode } from 'react'; import { useOutlet } from 'react-router-dom'; export const HomepageCompositionRoot = (props: { diff --git a/plugins/home/src/components/StarredEntityListItem/StarredEntityListItem.tsx b/plugins/home/src/components/StarredEntityListItem/StarredEntityListItem.tsx index 524a7d7d53..28f199978d 100644 --- a/plugins/home/src/components/StarredEntityListItem/StarredEntityListItem.tsx +++ b/plugins/home/src/components/StarredEntityListItem/StarredEntityListItem.tsx @@ -21,7 +21,6 @@ import { import ListItem from '@material-ui/core/ListItem'; import ListItemIcon from '@material-ui/core/ListItemIcon'; import ListItemText from '@material-ui/core/ListItemText'; -import React from 'react'; import { Link } from 'react-router-dom'; import { entityRouteRef } from '@backstage/plugin-catalog-react'; import { useRouteRef } from '@backstage/core-plugin-api'; diff --git a/plugins/home/src/components/VisitList/ItemCategory.tsx b/plugins/home/src/components/VisitList/ItemCategory.tsx index 953bc12fc7..7eaf54183d 100644 --- a/plugins/home/src/components/VisitList/ItemCategory.tsx +++ b/plugins/home/src/components/VisitList/ItemCategory.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import Chip from '@material-ui/core/Chip'; import { makeStyles } from '@material-ui/core/styles'; import { colorVariants } from '@backstage/theme'; diff --git a/plugins/home/src/components/VisitList/ItemDetail.tsx b/plugins/home/src/components/VisitList/ItemDetail.tsx index 832803800c..93194639cc 100644 --- a/plugins/home/src/components/VisitList/ItemDetail.tsx +++ b/plugins/home/src/components/VisitList/ItemDetail.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import Typography from '@material-ui/core/Typography'; import { Visit } from '../../api/VisitsApi'; import { DateTime } from 'luxon'; diff --git a/plugins/home/src/components/VisitList/ItemName.tsx b/plugins/home/src/components/VisitList/ItemName.tsx index 00c2273993..bf02b1ba07 100644 --- a/plugins/home/src/components/VisitList/ItemName.tsx +++ b/plugins/home/src/components/VisitList/ItemName.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import Typography from '@material-ui/core/Typography'; import { makeStyles } from '@material-ui/core/styles'; import { Visit } from '../../api/VisitsApi'; diff --git a/plugins/home/src/components/VisitList/VisitList.test.tsx b/plugins/home/src/components/VisitList/VisitList.test.tsx index c82088c7b7..1e463be2cc 100644 --- a/plugins/home/src/components/VisitList/VisitList.test.tsx +++ b/plugins/home/src/components/VisitList/VisitList.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { VisitList } from './VisitList'; import { renderInTestApp } from '@backstage/test-utils'; diff --git a/plugins/home/src/components/VisitList/VisitList.tsx b/plugins/home/src/components/VisitList/VisitList.tsx index 225547d5a4..19d5a6fb88 100644 --- a/plugins/home/src/components/VisitList/VisitList.tsx +++ b/plugins/home/src/components/VisitList/VisitList.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React from 'react'; +import { ReactElement } from 'react'; import Collapse from '@material-ui/core/Collapse'; import List from '@material-ui/core/List'; import { Visit } from '../../api/VisitsApi'; @@ -41,7 +41,7 @@ export const VisitList = ({ loading?: boolean; title?: string; }) => { - let listBody: React.ReactElement = <>; + let listBody: ReactElement = <>; if (loading) { listBody = ( ( diff --git a/plugins/home/src/components/VisitList/VisitListFew.tsx b/plugins/home/src/components/VisitList/VisitListFew.tsx index acee23af4f..26fdb92293 100644 --- a/plugins/home/src/components/VisitList/VisitListFew.tsx +++ b/plugins/home/src/components/VisitList/VisitListFew.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import Typography from '@material-ui/core/Typography'; export const VisitListFew = () => ( diff --git a/plugins/home/src/components/VisitList/VisitListItem.tsx b/plugins/home/src/components/VisitList/VisitListItem.tsx index f9ef3ecf35..0d8e21a1fc 100644 --- a/plugins/home/src/components/VisitList/VisitListItem.tsx +++ b/plugins/home/src/components/VisitList/VisitListItem.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import ListItem from '@material-ui/core/ListItem'; import ListItemAvatar from '@material-ui/core/ListItemAvatar'; import ListItemText from '@material-ui/core/ListItemText'; diff --git a/plugins/home/src/components/VisitList/VisitListSkeleton.tsx b/plugins/home/src/components/VisitList/VisitListSkeleton.tsx index c597798e63..c4ec583d11 100644 --- a/plugins/home/src/components/VisitList/VisitListSkeleton.tsx +++ b/plugins/home/src/components/VisitList/VisitListSkeleton.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import Collapse from '@material-ui/core/Collapse'; import ListItem from '@material-ui/core/ListItem'; import ListItemAvatar from '@material-ui/core/ListItemAvatar'; diff --git a/plugins/home/src/components/VisitListener.test.tsx b/plugins/home/src/components/VisitListener.test.tsx index 72c530071a..7f7db95a9e 100644 --- a/plugins/home/src/components/VisitListener.test.tsx +++ b/plugins/home/src/components/VisitListener.test.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import { TestApiProvider, renderInTestApp } from '@backstage/test-utils'; import { Visit, visitsApiRef } from '../api'; import { VisitListener } from './VisitListener'; diff --git a/plugins/home/src/components/VisitListener.tsx b/plugins/home/src/components/VisitListener.tsx index 866fd69885..ee4f4558c1 100644 --- a/plugins/home/src/components/VisitListener.tsx +++ b/plugins/home/src/components/VisitListener.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, { useEffect } from 'react'; +import { ReactNode, useEffect } from 'react'; import { useLocation } from 'react-router-dom'; @@ -84,7 +84,7 @@ export const VisitListener = ({ toEntityRef, visitName, }: { - children?: React.ReactNode; + children?: ReactNode; toEntityRef?: ({ pathname }: { pathname: string }) => string | undefined; visitName?: ({ pathname }: { pathname: string }) => string; }): JSX.Element => { diff --git a/plugins/home/src/homePageComponents/CompanyLogo/CompanyLogo.stories.tsx b/plugins/home/src/homePageComponents/CompanyLogo/CompanyLogo.stories.tsx index 9ce1ab9e6b..6c97dfe558 100644 --- a/plugins/home/src/homePageComponents/CompanyLogo/CompanyLogo.stories.tsx +++ b/plugins/home/src/homePageComponents/CompanyLogo/CompanyLogo.stories.tsx @@ -22,7 +22,7 @@ import { configApiRef } from '@backstage/core-plugin-api'; import { ConfigReader } from '@backstage/core-app-api'; import Grid from '@material-ui/core/Grid'; import { makeStyles } from '@material-ui/core/styles'; -import React, { ComponentType, PropsWithChildren } from 'react'; +import { ComponentType, PropsWithChildren } from 'react'; export default { title: 'Plugins/Home/Components/CompanyLogo', diff --git a/plugins/home/src/homePageComponents/CompanyLogo/CompanyLogo.test.tsx b/plugins/home/src/homePageComponents/CompanyLogo/CompanyLogo.test.tsx index 8664e10c42..522f31ba1c 100644 --- a/plugins/home/src/homePageComponents/CompanyLogo/CompanyLogo.test.tsx +++ b/plugins/home/src/homePageComponents/CompanyLogo/CompanyLogo.test.tsx @@ -18,7 +18,6 @@ import { renderInTestApp, TestApiProvider } from '@backstage/test-utils'; import { configApiRef } from '@backstage/core-plugin-api'; import { ConfigReader } from '@backstage/core-app-api'; import Typography from '@material-ui/core/Typography'; -import React from 'react'; describe('', () => { it('should have a fall back if logo is not provided', async () => { diff --git a/plugins/home/src/homePageComponents/CompanyLogo/CompanyLogo.tsx b/plugins/home/src/homePageComponents/CompanyLogo/CompanyLogo.tsx index 93c3d46f92..cfe1506a85 100644 --- a/plugins/home/src/homePageComponents/CompanyLogo/CompanyLogo.tsx +++ b/plugins/home/src/homePageComponents/CompanyLogo/CompanyLogo.tsx @@ -15,10 +15,10 @@ */ import Typography from '@material-ui/core/Typography'; import { configApiRef, useApi } from '@backstage/core-plugin-api'; -import React from 'react'; +import { ReactNode } from 'react'; type CompanyLogoProps = { - logo?: React.ReactNode; + logo?: ReactNode; className?: string; }; diff --git a/plugins/home/src/homePageComponents/FeaturedDocsCard/Content.test.tsx b/plugins/home/src/homePageComponents/FeaturedDocsCard/Content.test.tsx index 9a923f2481..e562d8f3a1 100644 --- a/plugins/home/src/homePageComponents/FeaturedDocsCard/Content.test.tsx +++ b/plugins/home/src/homePageComponents/FeaturedDocsCard/Content.test.tsx @@ -15,7 +15,7 @@ */ import { Content } from './Content'; -import React from 'react'; +import { ReactNode } from 'react'; import { catalogApiRef, entityRouteRef } from '@backstage/plugin-catalog-react'; import { renderInTestApp, TestApiProvider } from '@backstage/test-utils'; import { catalogApiMock } from '@backstage/plugin-catalog-react/testUtils'; @@ -35,7 +35,7 @@ const docsEntities = [ ]; describe('', () => { - const Wrapper = ({ children }: { children?: React.ReactNode }) => ( + const Wrapper = ({ children }: { children?: ReactNode }) => ( diff --git a/plugins/home/src/homePageComponents/FeaturedDocsCard/Content.tsx b/plugins/home/src/homePageComponents/FeaturedDocsCard/Content.tsx index dfd6c1b8e7..692bb3272e 100644 --- a/plugins/home/src/homePageComponents/FeaturedDocsCard/Content.tsx +++ b/plugins/home/src/homePageComponents/FeaturedDocsCard/Content.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React from 'react'; +import { JSX } from 'react'; import useAsync from 'react-use/esm/useAsync'; import { LinkButton, @@ -44,7 +44,7 @@ export type FeaturedDocsCardProps = { /** The entity filter used to display only the intended item/s */ filter: EntityFilterQuery; /** An optional ReactNode for empty states */ - emptyState?: React.JSX.Element; + emptyState?: JSX.Element; /** An optional linkDestination to set for the Featured Doc */ linkDestination?: string; /** An optional limit to set for link destination */ diff --git a/plugins/home/src/homePageComponents/FeaturedDocsCard/FeaturedDocsCard.stories.tsx b/plugins/home/src/homePageComponents/FeaturedDocsCard/FeaturedDocsCard.stories.tsx index c9830f1294..25f02e5f4e 100644 --- a/plugins/home/src/homePageComponents/FeaturedDocsCard/FeaturedDocsCard.stories.tsx +++ b/plugins/home/src/homePageComponents/FeaturedDocsCard/FeaturedDocsCard.stories.tsx @@ -15,7 +15,7 @@ */ import { FeaturedDocsCard } from '../../plugin'; -import React, { ComponentType, PropsWithChildren } from 'react'; +import { ComponentType, PropsWithChildren } from 'react'; import { wrapInTestApp, TestApiProvider } from '@backstage/test-utils'; import { catalogApiRef, entityRouteRef } from '@backstage/plugin-catalog-react'; import { catalogApiMock } from '@backstage/plugin-catalog-react/testUtils'; diff --git a/plugins/home/src/homePageComponents/HeaderWorldClock/HeaderWorldClock.stories.tsx b/plugins/home/src/homePageComponents/HeaderWorldClock/HeaderWorldClock.stories.tsx index e8286449c8..fbc5a96c57 100644 --- a/plugins/home/src/homePageComponents/HeaderWorldClock/HeaderWorldClock.stories.tsx +++ b/plugins/home/src/homePageComponents/HeaderWorldClock/HeaderWorldClock.stories.tsx @@ -16,7 +16,7 @@ import { Header } from '@backstage/core-components'; import { wrapInTestApp } from '@backstage/test-utils'; -import React, { ComponentType, PropsWithChildren } from 'react'; +import { ComponentType, PropsWithChildren } from 'react'; import { ClockConfig, HeaderWorldClock } from './HeaderWorldClock'; export default { diff --git a/plugins/home/src/homePageComponents/HeaderWorldClock/HeaderWorldClock.test.tsx b/plugins/home/src/homePageComponents/HeaderWorldClock/HeaderWorldClock.test.tsx index 6cb4de5a98..23e6f67b54 100644 --- a/plugins/home/src/homePageComponents/HeaderWorldClock/HeaderWorldClock.test.tsx +++ b/plugins/home/src/homePageComponents/HeaderWorldClock/HeaderWorldClock.test.tsx @@ -16,7 +16,6 @@ import { renderInTestApp } from '@backstage/test-utils'; import { HeaderWorldClock, ClockConfig } from './HeaderWorldClock'; -import React from 'react'; describe('HeaderWorldClock with valid Time Zones', () => { it('displays Time Zones as expected', async () => { diff --git a/plugins/home/src/homePageComponents/HeaderWorldClock/HeaderWorldClock.tsx b/plugins/home/src/homePageComponents/HeaderWorldClock/HeaderWorldClock.tsx index 394af1a27b..a275c0e00b 100644 --- a/plugins/home/src/homePageComponents/HeaderWorldClock/HeaderWorldClock.tsx +++ b/plugins/home/src/homePageComponents/HeaderWorldClock/HeaderWorldClock.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React from 'react'; +import { useState, useEffect } from 'react'; import { HeaderLabel } from '@backstage/core-components'; const timeFormat: Intl.DateTimeFormatOptions = { @@ -117,9 +117,9 @@ export const HeaderWorldClock = (props: { const { clockConfigs, customTimeFormat } = props; const defaultTimes: TimeObj[] = []; - const [clocks, setTimes] = React.useState(defaultTimes); + const [clocks, setTimes] = useState(defaultTimes); - React.useEffect(() => { + useEffect(() => { setTimes(getTimes(clockConfigs, customTimeFormat)); const intervalId = setInterval(() => { diff --git a/plugins/home/src/homePageComponents/QuickStart/Content.test.tsx b/plugins/home/src/homePageComponents/QuickStart/Content.test.tsx index 0acd44768f..818d85d260 100644 --- a/plugins/home/src/homePageComponents/QuickStart/Content.test.tsx +++ b/plugins/home/src/homePageComponents/QuickStart/Content.test.tsx @@ -15,7 +15,6 @@ */ import { Content } from './Content'; -import React from 'react'; import userEvent from '@testing-library/user-event'; import { renderInTestApp } from '@backstage/test-utils'; import ContentImage from './static/backstageSystemModel.png'; diff --git a/plugins/home/src/homePageComponents/QuickStart/Content.tsx b/plugins/home/src/homePageComponents/QuickStart/Content.tsx index 998b1a1798..829b9ed191 100644 --- a/plugins/home/src/homePageComponents/QuickStart/Content.tsx +++ b/plugins/home/src/homePageComponents/QuickStart/Content.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React from 'react'; +import { JSX } from 'react'; import { Link } from '@backstage/core-components'; import Typography from '@material-ui/core/Typography'; import Grid from '@material-ui/core/Grid'; @@ -28,19 +28,19 @@ import { useStyles } from './styles'; */ export type QuickStartCardProps = { /** The modal link title */ - modalTitle?: string | React.JSX.Element; + modalTitle?: string | JSX.Element; /** The link to docs title */ docsLinkTitle?: string; /** The link to docs */ docsLink?: string; /** The video to play on the card */ - video?: React.JSX.Element; + video?: JSX.Element; /** A quickstart image to display on the card */ - image: React.JSX.Element; + image: JSX.Element; /** The card description*/ cardDescription?: string; /** A component used to download a quickStart image*/ - downloadImage?: React.JSX.Element; + downloadImage?: JSX.Element; }; /** diff --git a/plugins/home/src/homePageComponents/QuickStart/ContentModal.tsx b/plugins/home/src/homePageComponents/QuickStart/ContentModal.tsx index a6e000dc42..ff917f367c 100644 --- a/plugins/home/src/homePageComponents/QuickStart/ContentModal.tsx +++ b/plugins/home/src/homePageComponents/QuickStart/ContentModal.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useState } from 'react'; +import { JSX, useState } from 'react'; import { Link } from '@backstage/core-components'; import Modal from '@material-ui/core/Modal'; import Box from '@material-ui/core/Box'; @@ -22,8 +22,8 @@ import Box from '@material-ui/core/Box'; import { useStyles } from './styles'; export type ContentModalProps = { - modalContent: React.JSX.Element; - linkContent: string | React.JSX.Element; + modalContent: JSX.Element; + linkContent: string | JSX.Element; }; export const ContentModal = (props: ContentModalProps) => { diff --git a/plugins/home/src/homePageComponents/QuickStart/QuickStart.stories.tsx b/plugins/home/src/homePageComponents/QuickStart/QuickStart.stories.tsx index 8d6e6d117e..18375c9c27 100644 --- a/plugins/home/src/homePageComponents/QuickStart/QuickStart.stories.tsx +++ b/plugins/home/src/homePageComponents/QuickStart/QuickStart.stories.tsx @@ -15,7 +15,7 @@ */ import { QuickStartCard } from '../../plugin'; -import React, { ComponentType, PropsWithChildren } from 'react'; +import { ComponentType, PropsWithChildren } from 'react'; import { wrapInTestApp } from '@backstage/test-utils'; import Grid from '@material-ui/core/Grid'; import ContentImage from './static/backstageSystemModel.png'; diff --git a/plugins/home/src/homePageComponents/RandomJoke/Actions.tsx b/plugins/home/src/homePageComponents/RandomJoke/Actions.tsx index 8cbed8dace..3a8b0dccc2 100644 --- a/plugins/home/src/homePageComponents/RandomJoke/Actions.tsx +++ b/plugins/home/src/homePageComponents/RandomJoke/Actions.tsx @@ -14,8 +14,6 @@ * limitations under the License. */ -import React from 'react'; - import Button from '@material-ui/core/Button'; import { useRandomJoke } from './Context'; diff --git a/plugins/home/src/homePageComponents/RandomJoke/Content.tsx b/plugins/home/src/homePageComponents/RandomJoke/Content.tsx index 80467c46fa..d588a0ecf4 100644 --- a/plugins/home/src/homePageComponents/RandomJoke/Content.tsx +++ b/plugins/home/src/homePageComponents/RandomJoke/Content.tsx @@ -15,7 +15,6 @@ */ import Typography from '@material-ui/core/Typography'; -import React from 'react'; import { useRandomJoke } from './Context'; export const Content = () => { diff --git a/plugins/home/src/homePageComponents/RandomJoke/Context.tsx b/plugins/home/src/homePageComponents/RandomJoke/Context.tsx index f1f061d4a7..4477958780 100644 --- a/plugins/home/src/homePageComponents/RandomJoke/Context.tsx +++ b/plugins/home/src/homePageComponents/RandomJoke/Context.tsx @@ -14,7 +14,13 @@ * limitations under the License. */ -import React, { createContext } from 'react'; +import { + useState, + useCallback, + useEffect, + useContext, + createContext, +} from 'react'; export type JokeType = 'any' | 'programming'; @@ -48,16 +54,16 @@ export const ContextProvider = (props: { }) => { const { children, defaultCategory } = props; - const [loading, setLoading] = React.useState(true); - const [joke, setJoke] = React.useState({ + const [loading, setLoading] = useState(true); + const [joke, setJoke] = useState({ setup: '', punchline: '', }); - const [type, setType] = React.useState( + const [type, setType] = useState( defaultCategory || ('programming' as JokeType), ); - const rerollJoke = React.useCallback(() => { + const rerollJoke = useCallback(() => { setLoading(true); getNewJoke(type).then(newJoke => setJoke(newJoke)); }, [type]); @@ -66,11 +72,11 @@ export const ContextProvider = (props: { setType(newType); }; - React.useEffect(() => { + useEffect(() => { setLoading(false); }, [joke]); - React.useEffect(() => { + useEffect(() => { rerollJoke(); }, [rerollJoke]); @@ -86,7 +92,7 @@ export const ContextProvider = (props: { }; export const useRandomJoke = () => { - const value = React.useContext(Context); + const value = useContext(Context); if (value === undefined) { throw new Error('useRandomJoke must be used within a RandomJokeProvider'); diff --git a/plugins/home/src/homePageComponents/RandomJoke/Settings.tsx b/plugins/home/src/homePageComponents/RandomJoke/Settings.tsx index 7cbf231ac4..dcf7343471 100644 --- a/plugins/home/src/homePageComponents/RandomJoke/Settings.tsx +++ b/plugins/home/src/homePageComponents/RandomJoke/Settings.tsx @@ -18,7 +18,6 @@ import FormLabel from '@material-ui/core/FormLabel'; import RadioGroup from '@material-ui/core/RadioGroup'; import FormControlLabel from '@material-ui/core/FormControlLabel'; import Radio from '@material-ui/core/Radio'; -import React from 'react'; import { useRandomJoke, JokeType } from './Context'; import upperFirst from 'lodash/upperFirst'; diff --git a/plugins/home/src/homePageComponents/StarredEntities/Content.test.tsx b/plugins/home/src/homePageComponents/StarredEntities/Content.test.tsx index b2522cda96..a4a6fc2555 100644 --- a/plugins/home/src/homePageComponents/StarredEntities/Content.test.tsx +++ b/plugins/home/src/homePageComponents/StarredEntities/Content.test.tsx @@ -22,7 +22,6 @@ import { entityRouteRef, } from '@backstage/plugin-catalog-react'; import { catalogApiMock } from '@backstage/plugin-catalog-react/testUtils'; -import React from 'react'; import { Content } from './Content'; const entities = [ diff --git a/plugins/home/src/homePageComponents/StarredEntities/Content.tsx b/plugins/home/src/homePageComponents/StarredEntities/Content.tsx index ce1810a9d0..80f5ee74b5 100644 --- a/plugins/home/src/homePageComponents/StarredEntities/Content.tsx +++ b/plugins/home/src/homePageComponents/StarredEntities/Content.tsx @@ -25,7 +25,7 @@ import List from '@material-ui/core/List'; import Typography from '@material-ui/core/Typography'; import Tabs from '@material-ui/core/Tabs'; import Tab from '@material-ui/core/Tab'; -import React from 'react'; +import { ReactNode, useState } from 'react'; import useAsync from 'react-use/esm/useAsync'; import { StarredEntityListItem } from '../../components/StarredEntityListItem/StarredEntityListItem'; import { makeStyles } from '@material-ui/core/styles'; @@ -46,7 +46,7 @@ const useStyles = makeStyles(theme => ({ * @public */ export type StarredEntitiesProps = { - noStarredEntitiesMessage?: React.ReactNode | undefined; + noStarredEntitiesMessage?: ReactNode | undefined; groupByKind?: boolean; }; @@ -62,7 +62,7 @@ export const Content = ({ const classes = useStyles(); const catalogApi = useApi(catalogApiRef); const { starredEntities, toggleStarredEntity } = useStarredEntities(); - const [activeTab, setActiveTab] = React.useState(0); + const [activeTab, setActiveTab] = useState(0); // Grab starred entities from catalog to ensure they still exist and also retrieve display titles const entities = useAsync(async () => { diff --git a/plugins/home/src/homePageComponents/StarredEntities/StarredEntities.stories.tsx b/plugins/home/src/homePageComponents/StarredEntities/StarredEntities.stories.tsx index 76982d8832..f2c294caf7 100644 --- a/plugins/home/src/homePageComponents/StarredEntities/StarredEntities.stories.tsx +++ b/plugins/home/src/homePageComponents/StarredEntities/StarredEntities.stories.tsx @@ -24,7 +24,7 @@ import { } from '@backstage/plugin-catalog-react'; import { catalogApiMock } from '@backstage/plugin-catalog-react/testUtils'; import Grid from '@material-ui/core/Grid'; -import React, { ComponentType, PropsWithChildren } from 'react'; +import { ComponentType, PropsWithChildren } from 'react'; const starredEntitiesApi = new MockStarredEntitiesApi(); starredEntitiesApi.toggleStarred('component:default/example-starred-entity'); diff --git a/plugins/home/src/homePageComponents/Toolkit/Content.test.tsx b/plugins/home/src/homePageComponents/Toolkit/Content.test.tsx index 1955019a4a..cef53f03d0 100644 --- a/plugins/home/src/homePageComponents/Toolkit/Content.test.tsx +++ b/plugins/home/src/homePageComponents/Toolkit/Content.test.tsx @@ -15,7 +15,6 @@ */ import { renderInTestApp } from '@backstage/test-utils'; -import React from 'react'; import { Content } from './Content'; import { ContextProvider } from './Context'; diff --git a/plugins/home/src/homePageComponents/Toolkit/Content.tsx b/plugins/home/src/homePageComponents/Toolkit/Content.tsx index 2547184c44..570d7e6eb3 100644 --- a/plugins/home/src/homePageComponents/Toolkit/Content.tsx +++ b/plugins/home/src/homePageComponents/Toolkit/Content.tsx @@ -19,7 +19,6 @@ import List from '@material-ui/core/List'; import ListItemIcon from '@material-ui/core/ListItemIcon'; import ListItemText from '@material-ui/core/ListItemText'; import { makeStyles } from '@material-ui/core/styles'; -import React from 'react'; import { useToolkit, Tool } from './Context'; const useStyles = makeStyles(theme => ({ diff --git a/plugins/home/src/homePageComponents/Toolkit/Context.tsx b/plugins/home/src/homePageComponents/Toolkit/Context.tsx index 20f8b16b6d..388458e8b6 100644 --- a/plugins/home/src/homePageComponents/Toolkit/Context.tsx +++ b/plugins/home/src/homePageComponents/Toolkit/Context.tsx @@ -14,13 +14,13 @@ * limitations under the License. */ -import React, { createContext } from 'react'; +import { ReactNode, useState, useContext, createContext } from 'react'; /** @public */ export type Tool = { label: string; url: string; - icon: React.ReactNode; + icon: ReactNode; }; type ToolkitContextValue = { @@ -35,7 +35,7 @@ export const ContextProvider = (props: { }) => { const { children, tools } = props; - const [toolsValue, _setTools] = React.useState(tools); + const [toolsValue, _setTools] = useState(tools); const value: ToolkitContextValue = { tools: toolsValue, @@ -45,7 +45,7 @@ export const ContextProvider = (props: { }; export const useToolkit = () => { - const value = React.useContext(Context); + const value = useContext(Context); return value; }; diff --git a/plugins/home/src/homePageComponents/Toolkit/Toolkit.stories.tsx b/plugins/home/src/homePageComponents/Toolkit/Toolkit.stories.tsx index 8ab0b2a8bd..07c5c35758 100644 --- a/plugins/home/src/homePageComponents/Toolkit/Toolkit.stories.tsx +++ b/plugins/home/src/homePageComponents/Toolkit/Toolkit.stories.tsx @@ -17,7 +17,7 @@ import { InfoCard } from '@backstage/core-components'; import { wrapInTestApp } from '@backstage/test-utils'; import Grid from '@material-ui/core/Grid'; -import React, { ComponentType, PropsWithChildren } from 'react'; +import { ComponentType, PropsWithChildren } from 'react'; import { ComponentAccordion } from '../../componentRenderers'; import { HomePageToolkit } from '../../plugin'; import { TemplateBackstageLogoIcon } from '../../assets'; diff --git a/plugins/home/src/homePageComponents/VisitedByType/Actions.tsx b/plugins/home/src/homePageComponents/VisitedByType/Actions.tsx index cad204d0e3..a8e8bf7722 100644 --- a/plugins/home/src/homePageComponents/VisitedByType/Actions.tsx +++ b/plugins/home/src/homePageComponents/VisitedByType/Actions.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useCallback } from 'react'; +import { useCallback } from 'react'; import Button from '@material-ui/core/Button'; import { useContext } from './Context'; diff --git a/plugins/home/src/homePageComponents/VisitedByType/Content.test.tsx b/plugins/home/src/homePageComponents/VisitedByType/Content.test.tsx index ec2d9eb068..16dd4a9160 100644 --- a/plugins/home/src/homePageComponents/VisitedByType/Content.test.tsx +++ b/plugins/home/src/homePageComponents/VisitedByType/Content.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { Content } from './Content'; import { TestApiProvider, diff --git a/plugins/home/src/homePageComponents/VisitedByType/Content.tsx b/plugins/home/src/homePageComponents/VisitedByType/Content.tsx index 1d157511c9..44cce1b5f7 100644 --- a/plugins/home/src/homePageComponents/VisitedByType/Content.tsx +++ b/plugins/home/src/homePageComponents/VisitedByType/Content.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useEffect } from 'react'; +import { useEffect } from 'react'; import { createFilterByQueryParamFromConfig } from '../../api/config'; import { VisitedByType } from './VisitedByType'; import { Visit, visitsApiRef } from '../../api'; diff --git a/plugins/home/src/homePageComponents/VisitedByType/Context.tsx b/plugins/home/src/homePageComponents/VisitedByType/Context.tsx index cd316d8b75..572f897aee 100644 --- a/plugins/home/src/homePageComponents/VisitedByType/Context.tsx +++ b/plugins/home/src/homePageComponents/VisitedByType/Context.tsx @@ -14,7 +14,14 @@ * limitations under the License. */ -import React, { Dispatch, SetStateAction, createContext, useMemo } from 'react'; +import { + Dispatch, + SetStateAction, + createContext, + useMemo, + useState, + useContext as useReactContext, +} from 'react'; import { Visit } from '../../api/VisitsApi'; import { VisitedByTypeKind } from './Content'; @@ -72,7 +79,7 @@ const getFilteredSet = })); export const ContextProvider = ({ children }: { children: JSX.Element }) => { - const [context, setContext] = React.useState( + const [context, setContext] = useState( defaultContextValueOnly, ); const { @@ -109,7 +116,7 @@ export const ContextProvider = ({ children }: { children: JSX.Element }) => { }; export const useContext = () => { - const value = React.useContext(Context); + const value = useReactContext(Context); if (value === undefined) throw new Error( diff --git a/plugins/home/src/homePageComponents/VisitedByType/HomePageVisitedByType.stories.tsx b/plugins/home/src/homePageComponents/VisitedByType/HomePageVisitedByType.stories.tsx index baf2a092d9..85d7dbf9cc 100644 --- a/plugins/home/src/homePageComponents/VisitedByType/HomePageVisitedByType.stories.tsx +++ b/plugins/home/src/homePageComponents/VisitedByType/HomePageVisitedByType.stories.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { TestApiProvider, wrapInTestApp } from '@backstage/test-utils'; import { ComponentType, PropsWithChildren } from 'react'; import Grid from '@material-ui/core/Grid'; diff --git a/plugins/home/src/homePageComponents/VisitedByType/RecentlyVisited.tsx b/plugins/home/src/homePageComponents/VisitedByType/RecentlyVisited.tsx index a6896f4e91..9f608de79e 100644 --- a/plugins/home/src/homePageComponents/VisitedByType/RecentlyVisited.tsx +++ b/plugins/home/src/homePageComponents/VisitedByType/RecentlyVisited.tsx @@ -17,7 +17,6 @@ export { Actions } from './Actions'; export { ContextProvider } from './Context'; export type { VisitedByTypeProps, VisitedByTypeKind } from './Content'; -import React from 'react'; import { Content, VisitedByTypeProps } from './Content'; const RecentlyVisitedContent = (props: Partial) => ( diff --git a/plugins/home/src/homePageComponents/VisitedByType/TopVisited.tsx b/plugins/home/src/homePageComponents/VisitedByType/TopVisited.tsx index 5a326abf51..822bb71833 100644 --- a/plugins/home/src/homePageComponents/VisitedByType/TopVisited.tsx +++ b/plugins/home/src/homePageComponents/VisitedByType/TopVisited.tsx @@ -17,7 +17,6 @@ export { Actions } from './Actions'; export { ContextProvider } from './Context'; export type { VisitedByTypeProps, VisitedByTypeKind } from './Content'; -import React from 'react'; import { Content, VisitedByTypeProps } from './Content'; const TopVisitedContent = (props: Partial) => ( diff --git a/plugins/home/src/homePageComponents/VisitedByType/VisitedByType.test.tsx b/plugins/home/src/homePageComponents/VisitedByType/VisitedByType.test.tsx index 4e3cf1e058..c402a2c002 100644 --- a/plugins/home/src/homePageComponents/VisitedByType/VisitedByType.test.tsx +++ b/plugins/home/src/homePageComponents/VisitedByType/VisitedByType.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { VisitedByType } from './VisitedByType'; import { Context, defaultContextValue } from './Context'; import { renderInTestApp } from '@backstage/test-utils'; diff --git a/plugins/home/src/homePageComponents/VisitedByType/VisitedByType.tsx b/plugins/home/src/homePageComponents/VisitedByType/VisitedByType.tsx index 1b75895a88..5c76af57d3 100644 --- a/plugins/home/src/homePageComponents/VisitedByType/VisitedByType.tsx +++ b/plugins/home/src/homePageComponents/VisitedByType/VisitedByType.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { VisitList } from '../../components/VisitList'; import { useContext } from './Context'; diff --git a/plugins/home/src/homePageComponents/WelcomeTitle/WelcomeTitle.stories.tsx b/plugins/home/src/homePageComponents/WelcomeTitle/WelcomeTitle.stories.tsx index 6d14aa7a95..b1eb689d1d 100644 --- a/plugins/home/src/homePageComponents/WelcomeTitle/WelcomeTitle.stories.tsx +++ b/plugins/home/src/homePageComponents/WelcomeTitle/WelcomeTitle.stories.tsx @@ -16,7 +16,7 @@ import { Header } from '@backstage/core-components'; import { wrapInTestApp } from '@backstage/test-utils'; -import React, { ComponentType, PropsWithChildren } from 'react'; +import { ComponentType, PropsWithChildren } from 'react'; import { WelcomeTitle } from './WelcomeTitle'; export default { diff --git a/plugins/home/src/homePageComponents/WelcomeTitle/WelcomeTitle.test.tsx b/plugins/home/src/homePageComponents/WelcomeTitle/WelcomeTitle.test.tsx index dfeac300c4..2db63c8c3c 100644 --- a/plugins/home/src/homePageComponents/WelcomeTitle/WelcomeTitle.test.tsx +++ b/plugins/home/src/homePageComponents/WelcomeTitle/WelcomeTitle.test.tsx @@ -15,7 +15,6 @@ */ import { renderInTestApp } from '@backstage/test-utils'; -import React from 'react'; import { WelcomeTitle } from './WelcomeTitle'; describe('', () => { diff --git a/plugins/home/src/homePageComponents/WelcomeTitle/WelcomeTitle.tsx b/plugins/home/src/homePageComponents/WelcomeTitle/WelcomeTitle.tsx index 7ae5813a34..686d13a748 100644 --- a/plugins/home/src/homePageComponents/WelcomeTitle/WelcomeTitle.tsx +++ b/plugins/home/src/homePageComponents/WelcomeTitle/WelcomeTitle.tsx @@ -20,7 +20,7 @@ import { } from '@backstage/core-plugin-api'; import Tooltip from '@material-ui/core/Tooltip'; import Typography from '@material-ui/core/Typography'; -import React, { useEffect, useMemo } from 'react'; +import { useEffect, useMemo } from 'react'; import useAsync from 'react-use/esm/useAsync'; import { getTimeBasedGreeting } from './timeUtil'; diff --git a/plugins/kubernetes-cluster/src/Router.tsx b/plugins/kubernetes-cluster/src/Router.tsx index 7ae1711f94..e59e5827f1 100644 --- a/plugins/kubernetes-cluster/src/Router.tsx +++ b/plugins/kubernetes-cluster/src/Router.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { Entity } from '@backstage/catalog-model'; import { useEntity, diff --git a/plugins/kubernetes-cluster/src/components/ApiResources/ApiResources.test.tsx b/plugins/kubernetes-cluster/src/components/ApiResources/ApiResources.test.tsx index 601ba54a6d..b1bb132654 100644 --- a/plugins/kubernetes-cluster/src/components/ApiResources/ApiResources.test.tsx +++ b/plugins/kubernetes-cluster/src/components/ApiResources/ApiResources.test.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import { renderInTestApp } from '@backstage/test-utils'; import { ApiResources } from './ApiResources'; import '@testing-library/jest-dom'; diff --git a/plugins/kubernetes-cluster/src/components/ApiResources/ApiResources.tsx b/plugins/kubernetes-cluster/src/components/ApiResources/ApiResources.tsx index c122214a31..bc4cb7b795 100644 --- a/plugins/kubernetes-cluster/src/components/ApiResources/ApiResources.tsx +++ b/plugins/kubernetes-cluster/src/components/ApiResources/ApiResources.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ import { useApiResources } from './useApiResources'; -import React, { useCallback, useEffect } from 'react'; +import { useCallback, useEffect } from 'react'; import { useEntity } from '@backstage/plugin-catalog-react'; import { Table, TableColumn } from '@backstage/core-components'; import { IAPIGroup } from '@kubernetes-models/apimachinery/apis/meta/v1'; diff --git a/plugins/kubernetes-cluster/src/components/ClusterOverview/ClusterOverview.test.tsx b/plugins/kubernetes-cluster/src/components/ClusterOverview/ClusterOverview.test.tsx index 6398093a74..17b4d96b50 100644 --- a/plugins/kubernetes-cluster/src/components/ClusterOverview/ClusterOverview.test.tsx +++ b/plugins/kubernetes-cluster/src/components/ClusterOverview/ClusterOverview.test.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import { renderInTestApp } from '@backstage/test-utils'; import { ClusterOverview } from './ClusterOverview'; import '@testing-library/jest-dom'; diff --git a/plugins/kubernetes-cluster/src/components/ClusterOverview/ClusterOverview.tsx b/plugins/kubernetes-cluster/src/components/ClusterOverview/ClusterOverview.tsx index af741239e5..32788083ba 100644 --- a/plugins/kubernetes-cluster/src/components/ClusterOverview/ClusterOverview.tsx +++ b/plugins/kubernetes-cluster/src/components/ClusterOverview/ClusterOverview.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, { useCallback, useEffect } from 'react'; +import { useCallback, useEffect } from 'react'; import { InfoCard, StructuredMetadataTable } from '@backstage/core-components'; import { useEntity } from '@backstage/plugin-catalog-react'; import { useCluster } from './useCluster'; diff --git a/plugins/kubernetes-cluster/src/components/KubernetesClusterContent/KubernetesClusterContent.tsx b/plugins/kubernetes-cluster/src/components/KubernetesClusterContent/KubernetesClusterContent.tsx index 2a824d329a..6dbd939f46 100644 --- a/plugins/kubernetes-cluster/src/components/KubernetesClusterContent/KubernetesClusterContent.tsx +++ b/plugins/kubernetes-cluster/src/components/KubernetesClusterContent/KubernetesClusterContent.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import { ApiResources } from '../ApiResources/ApiResources'; import Grid from '@material-ui/core/Grid'; import Typography from '@material-ui/core/Typography'; diff --git a/plugins/kubernetes-cluster/src/components/KubernetesClusterErrorContext/KubernetesClusterErrorContext.tsx b/plugins/kubernetes-cluster/src/components/KubernetesClusterErrorContext/KubernetesClusterErrorContext.tsx index 049a7b541d..3e64465092 100644 --- a/plugins/kubernetes-cluster/src/components/KubernetesClusterErrorContext/KubernetesClusterErrorContext.tsx +++ b/plugins/kubernetes-cluster/src/components/KubernetesClusterErrorContext/KubernetesClusterErrorContext.tsx @@ -13,19 +13,25 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, { useCallback, useContext, useState } from 'react'; +import { + ReactNode, + createContext, + useCallback, + useContext, + useState, +} from 'react'; export interface ErrorContext { error?: string; setError: (message: string) => void; } -export const KubernetesClusterErrorContext = React.createContext({ +export const KubernetesClusterErrorContext = createContext({ setError: (_: string) => {}, }); export interface KubernetesClusterErrorProviderProps { - children: React.ReactNode; + children: ReactNode; } export const KubernetesClusterErrorProvider = ({ diff --git a/plugins/kubernetes-cluster/src/components/Nodes/Nodes.test.tsx b/plugins/kubernetes-cluster/src/components/Nodes/Nodes.test.tsx index f48fdfbcef..edfef1a268 100644 --- a/plugins/kubernetes-cluster/src/components/Nodes/Nodes.test.tsx +++ b/plugins/kubernetes-cluster/src/components/Nodes/Nodes.test.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import { renderInTestApp } from '@backstage/test-utils'; import { Nodes } from './Nodes'; import '@testing-library/jest-dom'; diff --git a/plugins/kubernetes-cluster/src/components/Nodes/Nodes.tsx b/plugins/kubernetes-cluster/src/components/Nodes/Nodes.tsx index 9307b11a6e..b7e366c59c 100644 --- a/plugins/kubernetes-cluster/src/components/Nodes/Nodes.tsx +++ b/plugins/kubernetes-cluster/src/components/Nodes/Nodes.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ import { useNodes } from './useNodes'; -import React, { useCallback, useEffect } from 'react'; +import { useCallback, useEffect } from 'react'; import { useEntity } from '@backstage/plugin-catalog-react'; import { StructuredMetadataTable, diff --git a/plugins/kubernetes-react/src/components/Cluster/Cluster.test.tsx b/plugins/kubernetes-react/src/components/Cluster/Cluster.test.tsx index 2814606dd6..7b3ea6f267 100644 --- a/plugins/kubernetes-react/src/components/Cluster/Cluster.test.tsx +++ b/plugins/kubernetes-react/src/components/Cluster/Cluster.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { screen } from '@testing-library/react'; import { renderInTestApp } from '@backstage/test-utils'; import { Cluster } from './Cluster'; diff --git a/plugins/kubernetes-react/src/components/Cluster/Cluster.tsx b/plugins/kubernetes-react/src/components/Cluster/Cluster.tsx index 76661d5a47..642ed642a4 100644 --- a/plugins/kubernetes-react/src/components/Cluster/Cluster.tsx +++ b/plugins/kubernetes-react/src/components/Cluster/Cluster.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React from 'react'; +import { ReactNode } from 'react'; import Accordion from '@material-ui/core/Accordion'; import AccordionDetails from '@material-ui/core/AccordionDetails'; import AccordionSummary from '@material-ui/core/AccordionSummary'; @@ -46,7 +46,7 @@ type ClusterSummaryProps = { clusterName: string; totalNumberOfPods: number; numberOfPodsWithErrors: number; - children?: React.ReactNode; + children?: ReactNode; }; const ClusterSummary = ({ @@ -110,7 +110,7 @@ const ClusterSummary = ({ export type ClusterProps = { clusterObjects: ClusterObjects; podsWithErrors: Set; - children?: React.ReactNode; + children?: ReactNode; }; /** diff --git a/plugins/kubernetes-react/src/components/CronJobsAccordions/CronJobsAccordions.test.tsx b/plugins/kubernetes-react/src/components/CronJobsAccordions/CronJobsAccordions.test.tsx index 6b8912df82..a7d955b4b1 100644 --- a/plugins/kubernetes-react/src/components/CronJobsAccordions/CronJobsAccordions.test.tsx +++ b/plugins/kubernetes-react/src/components/CronJobsAccordions/CronJobsAccordions.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { screen } from '@testing-library/react'; import { CronJobsAccordions } from './CronJobsAccordions'; import * as oneCronJobsFixture from '../../__fixtures__/1-cronjobs.json'; diff --git a/plugins/kubernetes-react/src/components/CronJobsAccordions/CronJobsAccordions.tsx b/plugins/kubernetes-react/src/components/CronJobsAccordions/CronJobsAccordions.tsx index 7f718ea466..eba4b5ba5b 100644 --- a/plugins/kubernetes-react/src/components/CronJobsAccordions/CronJobsAccordions.tsx +++ b/plugins/kubernetes-react/src/components/CronJobsAccordions/CronJobsAccordions.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, { useContext } from 'react'; +import { ReactNode, useContext } from 'react'; import Accordion from '@material-ui/core/Accordion'; import AccordionDetails from '@material-ui/core/AccordionDetails'; import AccordionSummary from '@material-ui/core/AccordionSummary'; @@ -34,18 +34,18 @@ import { humanizeCron } from '../../utils/crons'; * @public */ export type CronJobsAccordionsProps = { - children?: React.ReactNode; + children?: ReactNode; }; type CronJobAccordionProps = { cronJob: V1CronJob; ownedJobs: V1Job[]; - children?: React.ReactNode; + children?: ReactNode; }; type CronJobSummaryProps = { cronJob: V1CronJob; - children?: React.ReactNode; + children?: ReactNode; }; const CronJobSummary = ({ cronJob }: CronJobSummaryProps) => { diff --git a/plugins/kubernetes-react/src/components/CronJobsAccordions/CronJobsDrawer.test.tsx b/plugins/kubernetes-react/src/components/CronJobsAccordions/CronJobsDrawer.test.tsx index 75506476ea..361c1cdc49 100644 --- a/plugins/kubernetes-react/src/components/CronJobsAccordions/CronJobsDrawer.test.tsx +++ b/plugins/kubernetes-react/src/components/CronJobsAccordions/CronJobsDrawer.test.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import * as oneCronJobsFixture from '../../__fixtures__/1-cronjobs.json'; import { renderInTestApp, TestApiProvider } from '@backstage/test-utils'; import { CronJobDrawer } from './CronJobsDrawer'; diff --git a/plugins/kubernetes-react/src/components/CronJobsAccordions/CronJobsDrawer.tsx b/plugins/kubernetes-react/src/components/CronJobsAccordions/CronJobsDrawer.tsx index 818108fc42..110cfe4509 100644 --- a/plugins/kubernetes-react/src/components/CronJobsAccordions/CronJobsDrawer.tsx +++ b/plugins/kubernetes-react/src/components/CronJobsAccordions/CronJobsDrawer.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import { V1CronJob } from '@kubernetes/client-node'; import { KubernetesStructuredMetadataTableDrawer } from '../KubernetesDrawer'; import Typography from '@material-ui/core/Typography'; diff --git a/plugins/kubernetes-react/src/components/CustomResources/ArgoRollouts/Rollout.test.tsx b/plugins/kubernetes-react/src/components/CustomResources/ArgoRollouts/Rollout.test.tsx index a4748cdae7..3a04665ca7 100644 --- a/plugins/kubernetes-react/src/components/CustomResources/ArgoRollouts/Rollout.test.tsx +++ b/plugins/kubernetes-react/src/components/CustomResources/ArgoRollouts/Rollout.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { screen } from '@testing-library/react'; import { renderInTestApp } from '@backstage/test-utils'; import { kubernetesProviders } from '../../../hooks/test-utils'; diff --git a/plugins/kubernetes-react/src/components/CustomResources/ArgoRollouts/Rollout.tsx b/plugins/kubernetes-react/src/components/CustomResources/ArgoRollouts/Rollout.tsx index 8e62b2606f..e268f3a6e4 100644 --- a/plugins/kubernetes-react/src/components/CustomResources/ArgoRollouts/Rollout.tsx +++ b/plugins/kubernetes-react/src/components/CustomResources/ArgoRollouts/Rollout.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useContext } from 'react'; +import { ReactNode, useContext } from 'react'; import Accordion from '@material-ui/core/Accordion'; import AccordionDetails from '@material-ui/core/AccordionDetails'; import AccordionSummary from '@material-ui/core/AccordionSummary'; @@ -43,7 +43,7 @@ import { READY_COLUMNS, RESOURCE_COLUMNS } from '../../Pods/PodsTable'; type RolloutAccordionsProps = { rollouts: any[]; defaultExpanded?: boolean; - children?: React.ReactNode; + children?: ReactNode; }; type RolloutAccordionProps = { @@ -51,7 +51,7 @@ type RolloutAccordionProps = { ownedPods: V1Pod[]; defaultExpanded?: boolean; matchingHpa?: V2HorizontalPodAutoscaler; - children?: React.ReactNode; + children?: ReactNode; }; type RolloutSummaryProps = { @@ -59,7 +59,7 @@ type RolloutSummaryProps = { numberOfCurrentPods: number; numberOfPodsWithErrors: number; hpa?: V2HorizontalPodAutoscaler; - children?: React.ReactNode; + children?: ReactNode; }; const AbortedTitle = ( diff --git a/plugins/kubernetes-react/src/components/CustomResources/ArgoRollouts/RolloutDrawer.tsx b/plugins/kubernetes-react/src/components/CustomResources/ArgoRollouts/RolloutDrawer.tsx index 65d4840bf0..5a42e0971c 100644 --- a/plugins/kubernetes-react/src/components/CustomResources/ArgoRollouts/RolloutDrawer.tsx +++ b/plugins/kubernetes-react/src/components/CustomResources/ArgoRollouts/RolloutDrawer.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { KubernetesStructuredMetadataTableDrawer } from '../../KubernetesDrawer'; import Typography from '@material-ui/core/Typography'; import Grid from '@material-ui/core/Grid'; diff --git a/plugins/kubernetes-react/src/components/CustomResources/ArgoRollouts/StepsProgress.test.tsx b/plugins/kubernetes-react/src/components/CustomResources/ArgoRollouts/StepsProgress.test.tsx index 23be984f03..d8f0abf3b8 100644 --- a/plugins/kubernetes-react/src/components/CustomResources/ArgoRollouts/StepsProgress.test.tsx +++ b/plugins/kubernetes-react/src/components/CustomResources/ArgoRollouts/StepsProgress.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { screen } from '@testing-library/react'; import pauseSteps from './__fixtures__/pause-steps'; import setWeightSteps from './__fixtures__/setweight-steps'; diff --git a/plugins/kubernetes-react/src/components/CustomResources/ArgoRollouts/StepsProgress.tsx b/plugins/kubernetes-react/src/components/CustomResources/ArgoRollouts/StepsProgress.tsx index 8885877e09..af40adfef0 100644 --- a/plugins/kubernetes-react/src/components/CustomResources/ArgoRollouts/StepsProgress.tsx +++ b/plugins/kubernetes-react/src/components/CustomResources/ArgoRollouts/StepsProgress.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React from 'react'; +import { ReactNode } from 'react'; import Step from '@material-ui/core/Step'; import StepLabel from '@material-ui/core/StepLabel'; import Stepper from '@material-ui/core/Stepper'; @@ -30,7 +30,7 @@ interface StepsProgressProps { currentStepIndex: number; aborted: boolean; steps: ArgoRolloutCanaryStep[]; - children?: React.ReactNode; + children?: ReactNode; } const isSetWeightStep = (step: ArgoRolloutCanaryStep): step is SetWeightStep => @@ -42,7 +42,7 @@ const isPauseStep = (step: ArgoRolloutCanaryStep): step is PauseStep => const isAnalysisStep = (step: ArgoRolloutCanaryStep): step is AnalysisStep => step.hasOwnProperty('analysis'); -const createLabelForStep = (step: ArgoRolloutCanaryStep): React.ReactNode => { +const createLabelForStep = (step: ArgoRolloutCanaryStep): ReactNode => { if (isSetWeightStep(step)) { return `setWeight ${step.setWeight}%`; } else if (isPauseStep(step)) { diff --git a/plugins/kubernetes-react/src/components/CustomResources/CustomResources.tsx b/plugins/kubernetes-react/src/components/CustomResources/CustomResources.tsx index f204f5fdd1..6332383b5d 100644 --- a/plugins/kubernetes-react/src/components/CustomResources/CustomResources.tsx +++ b/plugins/kubernetes-react/src/components/CustomResources/CustomResources.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useContext } from 'react'; +import { ReactNode, useContext } from 'react'; import lodash, { Dictionary } from 'lodash'; import { RolloutAccordions } from './ArgoRollouts'; import { DefaultCustomResourceAccordions } from './DefaultCustomResource'; @@ -26,7 +26,7 @@ import { GroupedResponsesContext } from '../../hooks'; * @public */ export interface CustomResourcesProps { - children?: React.ReactNode; + children?: ReactNode; } const kindToResource = (customResources: any[]): Dictionary => { diff --git a/plugins/kubernetes-react/src/components/CustomResources/DefaultCustomResource.test.tsx b/plugins/kubernetes-react/src/components/CustomResources/DefaultCustomResource.test.tsx index a23502a3ad..a6fccd6e9c 100644 --- a/plugins/kubernetes-react/src/components/CustomResources/DefaultCustomResource.test.tsx +++ b/plugins/kubernetes-react/src/components/CustomResources/DefaultCustomResource.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { screen } from '@testing-library/react'; import { renderInTestApp } from '@backstage/test-utils'; import { kubernetesProviders } from '../../hooks/test-utils'; diff --git a/plugins/kubernetes-react/src/components/CustomResources/DefaultCustomResource.tsx b/plugins/kubernetes-react/src/components/CustomResources/DefaultCustomResource.tsx index d34ba23f7b..2306b25352 100644 --- a/plugins/kubernetes-react/src/components/CustomResources/DefaultCustomResource.tsx +++ b/plugins/kubernetes-react/src/components/CustomResources/DefaultCustomResource.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React from 'react'; +import { ReactNode } from 'react'; import Accordion from '@material-ui/core/Accordion'; import AccordionDetails from '@material-ui/core/AccordionDetails'; import AccordionSummary from '@material-ui/core/AccordionSummary'; @@ -27,20 +27,20 @@ type DefaultCustomResourceAccordionsProps = { customResources: any[]; customResourceName: string; defaultExpanded?: boolean; - children?: React.ReactNode; + children?: ReactNode; }; type DefaultCustomResourceAccordionProps = { customResource: any; customResourceName: string; defaultExpanded?: boolean; - children?: React.ReactNode; + children?: ReactNode; }; type DefaultCustomResourceSummaryProps = { customResource: any; customResourceName: string; - children?: React.ReactNode; + children?: ReactNode; }; const DefaultCustomResourceSummary = ({ diff --git a/plugins/kubernetes-react/src/components/CustomResources/DefaultCustomResourceDrawer.tsx b/plugins/kubernetes-react/src/components/CustomResources/DefaultCustomResourceDrawer.tsx index ccbc4b41ca..a2ea2db34b 100644 --- a/plugins/kubernetes-react/src/components/CustomResources/DefaultCustomResourceDrawer.tsx +++ b/plugins/kubernetes-react/src/components/CustomResources/DefaultCustomResourceDrawer.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { KubernetesStructuredMetadataTableDrawer } from '../KubernetesDrawer'; import Typography from '@material-ui/core/Typography'; import Grid from '@material-ui/core/Grid'; diff --git a/plugins/kubernetes-react/src/components/DaemonSetsAccordions/DaemonSetsAccordions.test.tsx b/plugins/kubernetes-react/src/components/DaemonSetsAccordions/DaemonSetsAccordions.test.tsx index 9f38abf897..6815eb922a 100644 --- a/plugins/kubernetes-react/src/components/DaemonSetsAccordions/DaemonSetsAccordions.test.tsx +++ b/plugins/kubernetes-react/src/components/DaemonSetsAccordions/DaemonSetsAccordions.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { screen } from '@testing-library/react'; import { DaemonSetsAccordions } from './DaemonSetsAccordions'; import * as oneDaemonsFixture from '../../__fixtures__/2-daemonsets.json'; diff --git a/plugins/kubernetes-react/src/components/DaemonSetsAccordions/DaemonSetsAccordions.tsx b/plugins/kubernetes-react/src/components/DaemonSetsAccordions/DaemonSetsAccordions.tsx index cd9c0b8702..ab2adca5da 100644 --- a/plugins/kubernetes-react/src/components/DaemonSetsAccordions/DaemonSetsAccordions.tsx +++ b/plugins/kubernetes-react/src/components/DaemonSetsAccordions/DaemonSetsAccordions.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useContext } from 'react'; +import { ReactNode, useContext } from 'react'; import Accordion from '@material-ui/core/Accordion'; import AccordionDetails from '@material-ui/core/AccordionDetails'; import AccordionSummary from '@material-ui/core/AccordionSummary'; @@ -32,20 +32,20 @@ import { StatusError, StatusOK } from '@backstage/core-components'; import { READY_COLUMNS, RESOURCE_COLUMNS } from '../Pods/PodsTable'; type DaemonSetsAccordionsProps = { - children?: React.ReactNode; + children?: ReactNode; }; type DaemonSetAccordionProps = { daemonset: V1DaemonSet; ownedPods: V1Pod[]; - children?: React.ReactNode; + children?: ReactNode; }; type DaemonSetSummaryProps = { daemonset: V1DaemonSet; numberOfCurrentPods: number; numberOfPodsWithErrors: number; - children?: React.ReactNode; + children?: ReactNode; }; const DaemonSetSummary = ({ diff --git a/plugins/kubernetes-react/src/components/DaemonSetsAccordions/DaemonSetsDrawer.test.tsx b/plugins/kubernetes-react/src/components/DaemonSetsAccordions/DaemonSetsDrawer.test.tsx index 51e70a3b9b..a5d254f616 100644 --- a/plugins/kubernetes-react/src/components/DaemonSetsAccordions/DaemonSetsDrawer.test.tsx +++ b/plugins/kubernetes-react/src/components/DaemonSetsAccordions/DaemonSetsDrawer.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import * as daemonsets from '../../__fixtures__/2-daemonsets.json'; import { renderInTestApp, TestApiProvider } from '@backstage/test-utils'; import { DaemonSetDrawer } from './DaemonSetsDrawer'; diff --git a/plugins/kubernetes-react/src/components/DaemonSetsAccordions/DaemonSetsDrawer.tsx b/plugins/kubernetes-react/src/components/DaemonSetsAccordions/DaemonSetsDrawer.tsx index c03fb5bace..7e8f295408 100644 --- a/plugins/kubernetes-react/src/components/DaemonSetsAccordions/DaemonSetsDrawer.tsx +++ b/plugins/kubernetes-react/src/components/DaemonSetsAccordions/DaemonSetsDrawer.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { V1DaemonSet } from '@kubernetes/client-node'; import { KubernetesStructuredMetadataTableDrawer } from '../KubernetesDrawer'; import Typography from '@material-ui/core/Typography'; diff --git a/plugins/kubernetes-react/src/components/DeploymentsAccordions/DeploymentDrawer.test.tsx b/plugins/kubernetes-react/src/components/DeploymentsAccordions/DeploymentDrawer.test.tsx index 002c4c8ff4..c95870d92e 100644 --- a/plugins/kubernetes-react/src/components/DeploymentsAccordions/DeploymentDrawer.test.tsx +++ b/plugins/kubernetes-react/src/components/DeploymentsAccordions/DeploymentDrawer.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import * as deployments from '../../__fixtures__/2-deployments.json'; import { renderInTestApp, diff --git a/plugins/kubernetes-react/src/components/DeploymentsAccordions/DeploymentDrawer.tsx b/plugins/kubernetes-react/src/components/DeploymentsAccordions/DeploymentDrawer.tsx index aff771a349..be9d5e4f1c 100644 --- a/plugins/kubernetes-react/src/components/DeploymentsAccordions/DeploymentDrawer.tsx +++ b/plugins/kubernetes-react/src/components/DeploymentsAccordions/DeploymentDrawer.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React from 'react'; +import { ReactNode } from 'react'; import { V1Deployment } from '@kubernetes/client-node'; import { KubernetesStructuredMetadataTableDrawer } from '../KubernetesDrawer'; import { renderCondition } from '../../utils/pod'; @@ -41,7 +41,7 @@ export const DeploymentDrawer = ({ .reduce((accum, next) => { accum[next[0]] = next[1]; return accum; - }, {} as { [key: string]: React.ReactNode }); + }, {} as { [key: string]: ReactNode }); return { strategy: deploymentObj.spec?.strategy ?? '???', diff --git a/plugins/kubernetes-react/src/components/DeploymentsAccordions/DeploymentsAccordions.test.tsx b/plugins/kubernetes-react/src/components/DeploymentsAccordions/DeploymentsAccordions.test.tsx index f11826e77f..2b1da05c73 100644 --- a/plugins/kubernetes-react/src/components/DeploymentsAccordions/DeploymentsAccordions.test.tsx +++ b/plugins/kubernetes-react/src/components/DeploymentsAccordions/DeploymentsAccordions.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { screen } from '@testing-library/react'; import { DeploymentsAccordions } from './DeploymentsAccordions'; import * as twoDeployFixture from '../../__fixtures__/2-deployments.json'; diff --git a/plugins/kubernetes-react/src/components/DeploymentsAccordions/DeploymentsAccordions.tsx b/plugins/kubernetes-react/src/components/DeploymentsAccordions/DeploymentsAccordions.tsx index 8cfc79a8ae..10d4be9352 100644 --- a/plugins/kubernetes-react/src/components/DeploymentsAccordions/DeploymentsAccordions.tsx +++ b/plugins/kubernetes-react/src/components/DeploymentsAccordions/DeploymentsAccordions.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useContext } from 'react'; +import { ReactNode, useContext } from 'react'; import Accordion from '@material-ui/core/Accordion'; import AccordionDetails from '@material-ui/core/AccordionDetails'; import AccordionSummary from '@material-ui/core/AccordionSummary'; @@ -41,14 +41,14 @@ import { StatusError, StatusOK } from '@backstage/core-components'; import { READY_COLUMNS, RESOURCE_COLUMNS } from '../Pods/PodsTable'; type DeploymentsAccordionsProps = { - children?: React.ReactNode; + children?: ReactNode; }; type DeploymentAccordionProps = { deployment: V1Deployment; ownedPods: V1Pod[]; matchingHpa?: V2HorizontalPodAutoscaler; - children?: React.ReactNode; + children?: ReactNode; }; type DeploymentSummaryProps = { @@ -56,7 +56,7 @@ type DeploymentSummaryProps = { numberOfCurrentPods: number; numberOfPodsWithErrors: number; hpa?: V2HorizontalPodAutoscaler; - children?: React.ReactNode; + children?: ReactNode; }; const DeploymentSummary = ({ diff --git a/plugins/kubernetes-react/src/components/ErrorPanel/ErrorPanel.test.tsx b/plugins/kubernetes-react/src/components/ErrorPanel/ErrorPanel.test.tsx index 3917cf4513..988db67c06 100644 --- a/plugins/kubernetes-react/src/components/ErrorPanel/ErrorPanel.test.tsx +++ b/plugins/kubernetes-react/src/components/ErrorPanel/ErrorPanel.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { screen } from '@testing-library/react'; import { renderInTestApp } from '@backstage/test-utils'; import { ErrorPanel } from './ErrorPanel'; diff --git a/plugins/kubernetes-react/src/components/ErrorPanel/ErrorPanel.tsx b/plugins/kubernetes-react/src/components/ErrorPanel/ErrorPanel.tsx index 58832b553c..5238a76e70 100644 --- a/plugins/kubernetes-react/src/components/ErrorPanel/ErrorPanel.tsx +++ b/plugins/kubernetes-react/src/components/ErrorPanel/ErrorPanel.tsx @@ -14,14 +14,14 @@ * limitations under the License. */ -import React from 'react'; +import { ReactNode } from 'react'; import Typography from '@material-ui/core/Typography'; import { ClusterObjects } from '@backstage/plugin-kubernetes-common'; import { WarningPanel } from '@backstage/core-components'; const clustersWithErrorsToErrorMessage = ( clustersWithErrors: ClusterObjects[], -): React.ReactNode => { +): ReactNode => { return clustersWithErrors.map((c, i) => { return (

    @@ -52,7 +52,7 @@ export type ErrorPanelProps = { entityName: string; errorMessage?: string; clustersWithErrors?: ClusterObjects[]; - children?: React.ReactNode; + children?: ReactNode; }; /** diff --git a/plugins/kubernetes-react/src/components/ErrorReporting/ErrorReporting.test.tsx b/plugins/kubernetes-react/src/components/ErrorReporting/ErrorReporting.test.tsx index 6da259d7fa..599b068751 100644 --- a/plugins/kubernetes-react/src/components/ErrorReporting/ErrorReporting.test.tsx +++ b/plugins/kubernetes-react/src/components/ErrorReporting/ErrorReporting.test.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import { DetectedError } from '@backstage/plugin-kubernetes-common'; import { renderInTestApp } from '@backstage/test-utils'; import { MatcherFunction, screen } from '@testing-library/react'; diff --git a/plugins/kubernetes-react/src/components/ErrorReporting/ErrorReporting.tsx b/plugins/kubernetes-react/src/components/ErrorReporting/ErrorReporting.tsx index 5bf6cff50e..f9e86110c2 100644 --- a/plugins/kubernetes-react/src/components/ErrorReporting/ErrorReporting.tsx +++ b/plugins/kubernetes-react/src/components/ErrorReporting/ErrorReporting.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import * as React from 'react'; import { ClusterAttributes, DetectedError, diff --git a/plugins/kubernetes-react/src/components/HorizontalPodAutoscalers/HorizontalPodAutoscalerDrawer.test.tsx b/plugins/kubernetes-react/src/components/HorizontalPodAutoscalers/HorizontalPodAutoscalerDrawer.test.tsx index 6599a2041f..59f7ebce72 100644 --- a/plugins/kubernetes-react/src/components/HorizontalPodAutoscalers/HorizontalPodAutoscalerDrawer.test.tsx +++ b/plugins/kubernetes-react/src/components/HorizontalPodAutoscalers/HorizontalPodAutoscalerDrawer.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { screen } from '@testing-library/react'; import * as hpas from './__fixtures__/horizontalpodautoscalers.json'; import { renderInTestApp, TestApiProvider } from '@backstage/test-utils'; diff --git a/plugins/kubernetes-react/src/components/HorizontalPodAutoscalers/HorizontalPodAutoscalerDrawer.tsx b/plugins/kubernetes-react/src/components/HorizontalPodAutoscalers/HorizontalPodAutoscalerDrawer.tsx index 0194bfca2a..8ccc3c3c79 100644 --- a/plugins/kubernetes-react/src/components/HorizontalPodAutoscalers/HorizontalPodAutoscalerDrawer.tsx +++ b/plugins/kubernetes-react/src/components/HorizontalPodAutoscalers/HorizontalPodAutoscalerDrawer.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React from 'react'; +import { ReactNode } from 'react'; import { V2HorizontalPodAutoscaler } from '@kubernetes/client-node'; import { KubernetesStructuredMetadataTableDrawer } from '../KubernetesDrawer'; @@ -22,7 +22,7 @@ import { KubernetesStructuredMetadataTableDrawer } from '../KubernetesDrawer'; export const HorizontalPodAutoscalerDrawer = (props: { hpa: V2HorizontalPodAutoscaler; expanded?: boolean; - children?: React.ReactNode; + children?: ReactNode; }) => { const { hpa, expanded, children } = props; diff --git a/plugins/kubernetes-react/src/components/IngressesAccordions/IngressDrawer.test.tsx b/plugins/kubernetes-react/src/components/IngressesAccordions/IngressDrawer.test.tsx index e504aefbb9..bf29412e77 100644 --- a/plugins/kubernetes-react/src/components/IngressesAccordions/IngressDrawer.test.tsx +++ b/plugins/kubernetes-react/src/components/IngressesAccordions/IngressDrawer.test.tsx @@ -20,7 +20,6 @@ import { textContentMatcher, } from '@backstage/test-utils'; import { screen } from '@testing-library/react'; -import React from 'react'; import { IngressDrawer } from './IngressDrawer'; import * as ingresses from './__fixtures__/2-ingresses.json'; import { kubernetesClusterLinkFormatterApiRef } from '../../api'; diff --git a/plugins/kubernetes-react/src/components/IngressesAccordions/IngressDrawer.tsx b/plugins/kubernetes-react/src/components/IngressesAccordions/IngressDrawer.tsx index feb85c6d3d..737f1d1a5d 100644 --- a/plugins/kubernetes-react/src/components/IngressesAccordions/IngressDrawer.tsx +++ b/plugins/kubernetes-react/src/components/IngressesAccordions/IngressDrawer.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { V1Ingress } from '@kubernetes/client-node'; import { KubernetesStructuredMetadataTableDrawer } from '../KubernetesDrawer'; import Typography from '@material-ui/core/Typography'; diff --git a/plugins/kubernetes-react/src/components/IngressesAccordions/IngressesAccordions.test.tsx b/plugins/kubernetes-react/src/components/IngressesAccordions/IngressesAccordions.test.tsx index 9ed13c1703..8494645478 100644 --- a/plugins/kubernetes-react/src/components/IngressesAccordions/IngressesAccordions.test.tsx +++ b/plugins/kubernetes-react/src/components/IngressesAccordions/IngressesAccordions.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { screen } from '@testing-library/react'; import * as oneIngressFixture from './__fixtures__/2-ingresses.json'; import { renderInTestApp } from '@backstage/test-utils'; diff --git a/plugins/kubernetes-react/src/components/IngressesAccordions/IngressesAccordions.tsx b/plugins/kubernetes-react/src/components/IngressesAccordions/IngressesAccordions.tsx index d2d674042b..c01f765f35 100644 --- a/plugins/kubernetes-react/src/components/IngressesAccordions/IngressesAccordions.tsx +++ b/plugins/kubernetes-react/src/components/IngressesAccordions/IngressesAccordions.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useContext } from 'react'; +import { useContext } from 'react'; import Accordion from '@material-ui/core/Accordion'; import AccordionDetails from '@material-ui/core/AccordionDetails'; import AccordionSummary from '@material-ui/core/AccordionSummary'; diff --git a/plugins/kubernetes-react/src/components/JobsAccordions/JobsAccordions.test.tsx b/plugins/kubernetes-react/src/components/JobsAccordions/JobsAccordions.test.tsx index 3ec29ca422..2399673820 100644 --- a/plugins/kubernetes-react/src/components/JobsAccordions/JobsAccordions.test.tsx +++ b/plugins/kubernetes-react/src/components/JobsAccordions/JobsAccordions.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { screen } from '@testing-library/react'; import { JobsAccordions } from './JobsAccordions'; import * as oneCronJobsFixture from '../../__fixtures__/1-cronjobs.json'; diff --git a/plugins/kubernetes-react/src/components/JobsAccordions/JobsAccordions.tsx b/plugins/kubernetes-react/src/components/JobsAccordions/JobsAccordions.tsx index 894c273528..6398812d72 100644 --- a/plugins/kubernetes-react/src/components/JobsAccordions/JobsAccordions.tsx +++ b/plugins/kubernetes-react/src/components/JobsAccordions/JobsAccordions.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, { useContext } from 'react'; +import { ReactNode, useContext } from 'react'; import Accordion from '@material-ui/core/Accordion'; import AccordionDetails from '@material-ui/core/AccordionDetails'; import AccordionSummary from '@material-ui/core/AccordionSummary'; @@ -37,18 +37,18 @@ import { */ export type JobsAccordionsProps = { jobs: V1Job[]; - children?: React.ReactNode; + children?: ReactNode; }; type JobAccordionProps = { job: V1Job; ownedPods: V1Pod[]; - children?: React.ReactNode; + children?: ReactNode; }; type JobSummaryProps = { job: V1Job; - children?: React.ReactNode; + children?: ReactNode; }; const JobSummary = ({ job }: JobSummaryProps) => { diff --git a/plugins/kubernetes-react/src/components/JobsAccordions/JobsDrawer.test.tsx b/plugins/kubernetes-react/src/components/JobsAccordions/JobsDrawer.test.tsx index 23f49a2118..c5c431adc4 100644 --- a/plugins/kubernetes-react/src/components/JobsAccordions/JobsDrawer.test.tsx +++ b/plugins/kubernetes-react/src/components/JobsAccordions/JobsDrawer.test.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import * as oneCronJobsFixture from '../../__fixtures__/1-cronjobs.json'; import { renderInTestApp, TestApiProvider } from '@backstage/test-utils'; import { JobDrawer } from './JobsDrawer'; diff --git a/plugins/kubernetes-react/src/components/JobsAccordions/JobsDrawer.tsx b/plugins/kubernetes-react/src/components/JobsAccordions/JobsDrawer.tsx index c001a0fd73..82078fd9dc 100644 --- a/plugins/kubernetes-react/src/components/JobsAccordions/JobsDrawer.tsx +++ b/plugins/kubernetes-react/src/components/JobsAccordions/JobsDrawer.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import { V1Job } from '@kubernetes/client-node'; import { KubernetesStructuredMetadataTableDrawer } from '../KubernetesDrawer'; import Typography from '@material-ui/core/Typography'; diff --git a/plugins/kubernetes-react/src/components/KubernetesDialog/KubernetesDialog.tsx b/plugins/kubernetes-react/src/components/KubernetesDialog/KubernetesDialog.tsx index fa5c1906b7..d1a2a8a825 100644 --- a/plugins/kubernetes-react/src/components/KubernetesDialog/KubernetesDialog.tsx +++ b/plugins/kubernetes-react/src/components/KubernetesDialog/KubernetesDialog.tsx @@ -21,7 +21,7 @@ import DialogTitle from '@material-ui/core/DialogTitle'; import IconButton from '@material-ui/core/IconButton'; import { Theme, createStyles, makeStyles } from '@material-ui/core/styles'; import CloseIcon from '@material-ui/icons/Close'; -import React, { useState } from 'react'; +import { ReactNode, useState } from 'react'; const useStyles = makeStyles((theme: Theme) => createStyles({ @@ -38,9 +38,9 @@ const useStyles = makeStyles((theme: Theme) => export interface KubernetesDialogProps { buttonAriaLabel: string; - buttonIcon: React.ReactNode; + buttonIcon: ReactNode; buttonText: string; - children?: React.ReactNode; + children?: ReactNode; disabled?: boolean; title: string; } diff --git a/plugins/kubernetes-react/src/components/KubernetesDrawer/KubernetesDrawer.tsx b/plugins/kubernetes-react/src/components/KubernetesDrawer/KubernetesDrawer.tsx index b27e628508..0a30d449d0 100644 --- a/plugins/kubernetes-react/src/components/KubernetesDrawer/KubernetesDrawer.tsx +++ b/plugins/kubernetes-react/src/components/KubernetesDrawer/KubernetesDrawer.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, { ChangeEvent, useState } from 'react'; +import { ReactNode, ChangeEvent, useState } from 'react'; import { IObjectMeta } from '@kubernetes-models/apimachinery/apis/meta/v1/ObjectMeta'; import Drawer from '@material-ui/core/Drawer'; @@ -61,8 +61,8 @@ export interface KubernetesObject { interface KubernetesDrawerContentProps { close: () => void; kubernetesObject: KubernetesObject; - header?: React.ReactNode; - children?: React.ReactNode; + header?: ReactNode; + children?: ReactNode; } const KubernetesDrawerContent = ({ @@ -128,9 +128,9 @@ const KubernetesDrawerContent = ({ export interface KubernetesDrawerProps { open?: boolean; kubernetesObject: KubernetesObject; - label: React.ReactNode; - drawerContentsHeader?: React.ReactNode; - children?: React.ReactNode; + label: ReactNode; + drawerContentsHeader?: ReactNode; + children?: ReactNode; } const useDrawerStyles = makeStyles((theme: Theme) => diff --git a/plugins/kubernetes-react/src/components/KubernetesDrawer/KubernetesStructuredMetadataTableDrawer.tsx b/plugins/kubernetes-react/src/components/KubernetesDrawer/KubernetesStructuredMetadataTableDrawer.tsx index 0a5802ddc8..d393e4b073 100644 --- a/plugins/kubernetes-react/src/components/KubernetesDrawer/KubernetesStructuredMetadataTableDrawer.tsx +++ b/plugins/kubernetes-react/src/components/KubernetesDrawer/KubernetesStructuredMetadataTableDrawer.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { ChangeEvent, useContext, useState } from 'react'; +import { ReactNode, ChangeEvent, useContext, useState } from 'react'; import Button from '@material-ui/core/Button'; import Typography from '@material-ui/core/Typography'; import IconButton from '@material-ui/core/IconButton'; @@ -91,7 +91,7 @@ const PodDrawerButton = withStyles({ export type LinkErrorPanelProps = { cluster: ClusterAttributes; errorMessage?: string; - children?: React.ReactNode; + children?: ReactNode; }; /** @@ -257,7 +257,7 @@ export interface KubernetesStructuredMetadataTableDrawerProps< buttonVariant?: 'h5' | 'subtitle2'; kind: string; expanded?: boolean; - children?: React.ReactNode; + children?: ReactNode; } /** diff --git a/plugins/kubernetes-react/src/components/KubernetesDrawer/ManifestYaml.tsx b/plugins/kubernetes-react/src/components/KubernetesDrawer/ManifestYaml.tsx index 5090badfcd..3ccd32fcfb 100644 --- a/plugins/kubernetes-react/src/components/KubernetesDrawer/ManifestYaml.tsx +++ b/plugins/kubernetes-react/src/components/KubernetesDrawer/ManifestYaml.tsx @@ -17,7 +17,7 @@ import { CodeSnippet } from '@backstage/core-components'; import FormControlLabel from '@material-ui/core/FormControlLabel'; import Switch from '@material-ui/core/Switch'; import jsyaml from 'js-yaml'; -import React, { useState } from 'react'; +import { useState } from 'react'; /** * Props of ManifestYaml diff --git a/plugins/kubernetes-react/src/components/PodExecTerminal/PodExecTerminal.test.tsx b/plugins/kubernetes-react/src/components/PodExecTerminal/PodExecTerminal.test.tsx index 0e56c9599a..5830043042 100644 --- a/plugins/kubernetes-react/src/components/PodExecTerminal/PodExecTerminal.test.tsx +++ b/plugins/kubernetes-react/src/components/PodExecTerminal/PodExecTerminal.test.tsx @@ -24,7 +24,6 @@ import { import '@testing-library/jest-dom'; import { screen } from '@testing-library/react'; import WS from 'jest-websocket-mock'; -import React from 'react'; import './matchMedia.mock'; import { PodExecTerminal } from './PodExecTerminal'; diff --git a/plugins/kubernetes-react/src/components/PodExecTerminal/PodExecTerminal.tsx b/plugins/kubernetes-react/src/components/PodExecTerminal/PodExecTerminal.tsx index 3510670a05..eeaf535a05 100644 --- a/plugins/kubernetes-react/src/components/PodExecTerminal/PodExecTerminal.tsx +++ b/plugins/kubernetes-react/src/components/PodExecTerminal/PodExecTerminal.tsx @@ -18,7 +18,7 @@ import 'xterm/css/xterm.css'; import { discoveryApiRef, useApi } from '@backstage/core-plugin-api'; import { ClusterAttributes } from '@backstage/plugin-kubernetes-common'; import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; -import React, { useEffect, useMemo, useState } from 'react'; +import { useRef, useEffect, useMemo, useState } from 'react'; import { Terminal } from 'xterm'; import { FitAddon } from 'xterm-addon-fit'; @@ -60,7 +60,7 @@ export const PodExecTerminal = (props: PodExecTerminalProps) => { const [baseUrl, setBaseUrl] = useState(window.location.host); - const terminalRef = React.useRef(null); + const terminalRef = useRef(null); const discoveryApi = useApi(discoveryApiRef); const namespace = podNamespace ?? 'default'; diff --git a/plugins/kubernetes-react/src/components/PodExecTerminal/PodExecTerminalDialog.tsx b/plugins/kubernetes-react/src/components/PodExecTerminal/PodExecTerminalDialog.tsx index e67c2c8bb4..3570e6c3e0 100644 --- a/plugins/kubernetes-react/src/components/PodExecTerminal/PodExecTerminalDialog.tsx +++ b/plugins/kubernetes-react/src/components/PodExecTerminal/PodExecTerminalDialog.tsx @@ -15,7 +15,6 @@ */ import OpenInBrowserIcon from '@material-ui/icons/OpenInBrowser'; -import React from 'react'; import { KubernetesDialog } from '../KubernetesDialog'; import { useIsPodExecTerminalSupported } from '../../hooks'; diff --git a/plugins/kubernetes-react/src/components/Pods/ErrorList/ErrorList.test.tsx b/plugins/kubernetes-react/src/components/Pods/ErrorList/ErrorList.test.tsx index 998ef4b4d0..e460abea8b 100644 --- a/plugins/kubernetes-react/src/components/Pods/ErrorList/ErrorList.test.tsx +++ b/plugins/kubernetes-react/src/components/Pods/ErrorList/ErrorList.test.tsx @@ -13,8 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; - import { render } from '@testing-library/react'; import { ErrorList } from './ErrorList'; diff --git a/plugins/kubernetes-react/src/components/Pods/ErrorList/ErrorList.tsx b/plugins/kubernetes-react/src/components/Pods/ErrorList/ErrorList.tsx index 6131c7aa16..7d65f59d3d 100644 --- a/plugins/kubernetes-react/src/components/Pods/ErrorList/ErrorList.tsx +++ b/plugins/kubernetes-react/src/components/Pods/ErrorList/ErrorList.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; +import { Fragment } from 'react'; import List from '@material-ui/core/List'; import ListItem from '@material-ui/core/ListItem'; @@ -60,7 +60,7 @@ export const ErrorList = ({ podAndErrors }: ErrorListProps) => { .flatMap(onlyPodWithErrors => { return onlyPodWithErrors.errors.map((error, i) => { return ( - { - + ); }); })} diff --git a/plugins/kubernetes-react/src/components/Pods/Events/Events.test.tsx b/plugins/kubernetes-react/src/components/Pods/Events/Events.test.tsx index 8323666e66..3f70bb700a 100644 --- a/plugins/kubernetes-react/src/components/Pods/Events/Events.test.tsx +++ b/plugins/kubernetes-react/src/components/Pods/Events/Events.test.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import { EventsContent } from './Events'; import { render } from '@testing-library/react'; import { Event } from 'kubernetes-models/v1'; diff --git a/plugins/kubernetes-react/src/components/Pods/Events/Events.tsx b/plugins/kubernetes-react/src/components/Pods/Events/Events.tsx index bc5d797394..94fc768e61 100644 --- a/plugins/kubernetes-react/src/components/Pods/Events/Events.tsx +++ b/plugins/kubernetes-react/src/components/Pods/Events/Events.tsx @@ -13,8 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; - import Avatar from '@material-ui/core/Avatar'; import Container from '@material-ui/core/Container'; import Grid from '@material-ui/core/Grid'; diff --git a/plugins/kubernetes-react/src/components/Pods/FixDialog/FixDialog.test.tsx b/plugins/kubernetes-react/src/components/Pods/FixDialog/FixDialog.test.tsx index 25cccbb9c6..bf853fc07f 100644 --- a/plugins/kubernetes-react/src/components/Pods/FixDialog/FixDialog.test.tsx +++ b/plugins/kubernetes-react/src/components/Pods/FixDialog/FixDialog.test.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; +import { Fragment } from 'react'; import { FixDialog } from './FixDialog'; import { Pod } from 'kubernetes-models/v1/Pod'; @@ -21,13 +21,13 @@ import { renderInTestApp } from '@backstage/test-utils'; jest.mock('../Events', () => ({ Events: () => { - return ; + return ; }, })); jest.mock('../PodLogs', () => ({ PodLogs: () => { - return ; + return ; }, })); diff --git a/plugins/kubernetes-react/src/components/Pods/FixDialog/FixDialog.tsx b/plugins/kubernetes-react/src/components/Pods/FixDialog/FixDialog.tsx index 99386b3d40..644c17606b 100644 --- a/plugins/kubernetes-react/src/components/Pods/FixDialog/FixDialog.tsx +++ b/plugins/kubernetes-react/src/components/Pods/FixDialog/FixDialog.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, { useState } from 'react'; +import { FC, useState } from 'react'; import Button from '@material-ui/core/Button'; import Grid from '@material-ui/core/Grid'; @@ -64,7 +64,7 @@ export interface FixDialogProps { * * @public */ -export const FixDialog: React.FC = ({ +export const FixDialog: FC = ({ open, pod, error, diff --git a/plugins/kubernetes-react/src/components/Pods/PodDelete/PodDeleteButton.tsx b/plugins/kubernetes-react/src/components/Pods/PodDelete/PodDeleteButton.tsx index 622a7cba63..91d1015247 100644 --- a/plugins/kubernetes-react/src/components/Pods/PodDelete/PodDeleteButton.tsx +++ b/plugins/kubernetes-react/src/components/Pods/PodDelete/PodDeleteButton.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, { useState } from 'react'; +import { useState } from 'react'; import Grid from '@material-ui/core/Grid'; import Typography from '@material-ui/core/Typography'; diff --git a/plugins/kubernetes-react/src/components/Pods/PodDrawer/ContainerCard.test.tsx b/plugins/kubernetes-react/src/components/Pods/PodDrawer/ContainerCard.test.tsx index 3b131a617c..f96adadc75 100644 --- a/plugins/kubernetes-react/src/components/Pods/PodDrawer/ContainerCard.test.tsx +++ b/plugins/kubernetes-react/src/components/Pods/PodDrawer/ContainerCard.test.tsx @@ -13,8 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; - import { screen } from '@testing-library/react'; import '@testing-library/jest-dom'; diff --git a/plugins/kubernetes-react/src/components/Pods/PodDrawer/ContainerCard.tsx b/plugins/kubernetes-react/src/components/Pods/PodDrawer/ContainerCard.tsx index 6aed2c75d7..74ef538bf1 100644 --- a/plugins/kubernetes-react/src/components/Pods/PodDrawer/ContainerCard.tsx +++ b/plugins/kubernetes-react/src/components/Pods/PodDrawer/ContainerCard.tsx @@ -23,7 +23,7 @@ import Grid from '@material-ui/core/Grid'; import Typography from '@material-ui/core/Typography'; import { IContainer, IContainerStatus } from 'kubernetes-models/v1'; import { DateTime } from 'luxon'; -import React from 'react'; +import { FC } from 'react'; import { useIsPodExecTerminalEnabled } from '../../../hooks'; import { bytesToMiB, formatMillicores } from '../../../utils/resources'; @@ -106,7 +106,7 @@ export interface ContainerCardProps { * * @public */ -export const ContainerCard: React.FC = ({ +export const ContainerCard: FC = ({ podScope, containerSpec, containerStatus, diff --git a/plugins/kubernetes-react/src/components/Pods/PodDrawer/PendingPodContent.test.tsx b/plugins/kubernetes-react/src/components/Pods/PodDrawer/PendingPodContent.test.tsx index 8d562d4270..872ef18ea6 100644 --- a/plugins/kubernetes-react/src/components/Pods/PodDrawer/PendingPodContent.test.tsx +++ b/plugins/kubernetes-react/src/components/Pods/PodDrawer/PendingPodContent.test.tsx @@ -14,8 +14,6 @@ * limitations under the License. */ -import React from 'react'; - import { screen } from '@testing-library/react'; import '@testing-library/jest-dom'; diff --git a/plugins/kubernetes-react/src/components/Pods/PodDrawer/PendingPodContent.tsx b/plugins/kubernetes-react/src/components/Pods/PodDrawer/PendingPodContent.tsx index 703930498a..15123635e9 100644 --- a/plugins/kubernetes-react/src/components/Pods/PodDrawer/PendingPodContent.tsx +++ b/plugins/kubernetes-react/src/components/Pods/PodDrawer/PendingPodContent.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import Grid from '@material-ui/core/Grid'; import List from '@material-ui/core/List'; import ListItem from '@material-ui/core/ListItem'; diff --git a/plugins/kubernetes-react/src/components/Pods/PodDrawer/PodDrawer.test.tsx b/plugins/kubernetes-react/src/components/Pods/PodDrawer/PodDrawer.test.tsx index 4718f8f29f..ee53731f1f 100644 --- a/plugins/kubernetes-react/src/components/Pods/PodDrawer/PodDrawer.test.tsx +++ b/plugins/kubernetes-react/src/components/Pods/PodDrawer/PodDrawer.test.tsx @@ -14,8 +14,6 @@ * limitations under the License. */ -import React from 'react'; - import { screen } from '@testing-library/react'; import { TestApiProvider, diff --git a/plugins/kubernetes-react/src/components/Pods/PodDrawer/PodDrawer.tsx b/plugins/kubernetes-react/src/components/Pods/PodDrawer/PodDrawer.tsx index 3709b1186e..196e6cc884 100644 --- a/plugins/kubernetes-react/src/components/Pods/PodDrawer/PodDrawer.tsx +++ b/plugins/kubernetes-react/src/components/Pods/PodDrawer/PodDrawer.tsx @@ -14,8 +14,6 @@ * limitations under the License. */ -import React from 'react'; - import { ItemCardGrid } from '@backstage/core-components'; import Grid from '@material-ui/core/Grid'; import Typography from '@material-ui/core/Typography'; diff --git a/plugins/kubernetes-react/src/components/Pods/PodLogs/PodLogs.tsx b/plugins/kubernetes-react/src/components/Pods/PodLogs/PodLogs.tsx index a66d5ec47e..7457942aa1 100644 --- a/plugins/kubernetes-react/src/components/Pods/PodLogs/PodLogs.tsx +++ b/plugins/kubernetes-react/src/components/Pods/PodLogs/PodLogs.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; +import { FC } from 'react'; import { DismissableBanner, @@ -41,7 +41,7 @@ export interface PodLogsProps { * * @public */ -export const PodLogs: React.FC = ({ +export const PodLogs: FC = ({ containerScope, previous, }: PodLogsProps) => { diff --git a/plugins/kubernetes-react/src/components/Pods/PodLogs/PodLogsDialog.tsx b/plugins/kubernetes-react/src/components/Pods/PodLogs/PodLogsDialog.tsx index b8b2cbdf42..cb4ccfdf5d 100644 --- a/plugins/kubernetes-react/src/components/Pods/PodLogs/PodLogsDialog.tsx +++ b/plugins/kubernetes-react/src/components/Pods/PodLogs/PodLogsDialog.tsx @@ -13,8 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; - import SubjectIcon from '@material-ui/icons/Subject'; import { KubernetesDialog } from '../../KubernetesDialog'; diff --git a/plugins/kubernetes-react/src/components/Pods/PodsTable.test.tsx b/plugins/kubernetes-react/src/components/Pods/PodsTable.test.tsx index fe67de7049..fb90d17e2b 100644 --- a/plugins/kubernetes-react/src/components/Pods/PodsTable.test.tsx +++ b/plugins/kubernetes-react/src/components/Pods/PodsTable.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { screen } from '@testing-library/react'; import * as pod from './__fixtures__/pod.json'; import * as crashingPod from './__fixtures__/crashing-pod.json'; diff --git a/plugins/kubernetes-react/src/components/Pods/PodsTable.tsx b/plugins/kubernetes-react/src/components/Pods/PodsTable.tsx index 51acef848d..b6cfd36d83 100644 --- a/plugins/kubernetes-react/src/components/Pods/PodsTable.tsx +++ b/plugins/kubernetes-react/src/components/Pods/PodsTable.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useContext } from 'react'; +import { ReactNode, useContext } from 'react'; import { PodDrawer } from './PodDrawer'; import { containersReady, @@ -60,7 +60,7 @@ export type PodColumns = 'READY' | 'RESOURCE'; export type PodsTablesProps = { pods: Pod | V1Pod[]; extraColumns?: PodColumns[]; - children?: React.ReactNode; + children?: ReactNode; }; const READY: TableColumn[] = [ diff --git a/plugins/kubernetes-react/src/components/ResourceUtilization/ResourceUtilization.test.tsx b/plugins/kubernetes-react/src/components/ResourceUtilization/ResourceUtilization.test.tsx index 6357e98aff..161568e746 100644 --- a/plugins/kubernetes-react/src/components/ResourceUtilization/ResourceUtilization.test.tsx +++ b/plugins/kubernetes-react/src/components/ResourceUtilization/ResourceUtilization.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { screen } from '@testing-library/react'; import { ResourceUtilization } from './ResourceUtilization'; import { renderInTestApp } from '@backstage/test-utils'; diff --git a/plugins/kubernetes-react/src/components/ResourceUtilization/ResourceUtilization.tsx b/plugins/kubernetes-react/src/components/ResourceUtilization/ResourceUtilization.tsx index c794ae3381..f85a0ae176 100644 --- a/plugins/kubernetes-react/src/components/ResourceUtilization/ResourceUtilization.tsx +++ b/plugins/kubernetes-react/src/components/ResourceUtilization/ResourceUtilization.tsx @@ -16,7 +16,6 @@ import Grid from '@material-ui/core/Grid'; import Typography from '@material-ui/core/Typography'; -import React from 'react'; import { GaugePropsGetColor, LinearGauge } from '@backstage/core-components'; import { currentToDeclaredResourceToPerc } from '../../utils/resources'; diff --git a/plugins/kubernetes-react/src/components/ServicesAccordions/ServiceDrawer.test.tsx b/plugins/kubernetes-react/src/components/ServicesAccordions/ServiceDrawer.test.tsx index 692c0a7c8c..293b104b63 100644 --- a/plugins/kubernetes-react/src/components/ServicesAccordions/ServiceDrawer.test.tsx +++ b/plugins/kubernetes-react/src/components/ServicesAccordions/ServiceDrawer.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { screen } from '@testing-library/react'; import * as services from './__fixtures__/2-services.json'; import { diff --git a/plugins/kubernetes-react/src/components/ServicesAccordions/ServiceDrawer.tsx b/plugins/kubernetes-react/src/components/ServicesAccordions/ServiceDrawer.tsx index 08678e45bd..accbeb565e 100644 --- a/plugins/kubernetes-react/src/components/ServicesAccordions/ServiceDrawer.tsx +++ b/plugins/kubernetes-react/src/components/ServicesAccordions/ServiceDrawer.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { V1Service } from '@kubernetes/client-node'; import { KubernetesStructuredMetadataTableDrawer } from '../KubernetesDrawer'; import Typography from '@material-ui/core/Typography'; diff --git a/plugins/kubernetes-react/src/components/ServicesAccordions/ServicesAccordions.test.tsx b/plugins/kubernetes-react/src/components/ServicesAccordions/ServicesAccordions.test.tsx index a86a3d6fda..60c8edb0f6 100644 --- a/plugins/kubernetes-react/src/components/ServicesAccordions/ServicesAccordions.test.tsx +++ b/plugins/kubernetes-react/src/components/ServicesAccordions/ServicesAccordions.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { screen } from '@testing-library/react'; import * as twoDeployFixture from './__fixtures__/2-services.json'; import { renderInTestApp } from '@backstage/test-utils'; diff --git a/plugins/kubernetes-react/src/components/ServicesAccordions/ServicesAccordions.tsx b/plugins/kubernetes-react/src/components/ServicesAccordions/ServicesAccordions.tsx index c44a1d158c..9ad344ab08 100644 --- a/plugins/kubernetes-react/src/components/ServicesAccordions/ServicesAccordions.tsx +++ b/plugins/kubernetes-react/src/components/ServicesAccordions/ServicesAccordions.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useContext } from 'react'; +import { useContext } from 'react'; import Accordion from '@material-ui/core/Accordion'; import AccordionDetails from '@material-ui/core/AccordionDetails'; import AccordionSummary from '@material-ui/core/AccordionSummary'; diff --git a/plugins/kubernetes-react/src/components/StatefulSetsAccordions/StatefulSetDrawer.test.tsx b/plugins/kubernetes-react/src/components/StatefulSetsAccordions/StatefulSetDrawer.test.tsx index 3e4ff56a35..fc8d9aaa29 100644 --- a/plugins/kubernetes-react/src/components/StatefulSetsAccordions/StatefulSetDrawer.test.tsx +++ b/plugins/kubernetes-react/src/components/StatefulSetsAccordions/StatefulSetDrawer.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import * as statefulsets from '../../__fixtures__/2-statefulsets.json'; import { renderInTestApp, diff --git a/plugins/kubernetes-react/src/components/StatefulSetsAccordions/StatefulSetDrawer.tsx b/plugins/kubernetes-react/src/components/StatefulSetsAccordions/StatefulSetDrawer.tsx index 6f776bc1d6..902d537c6c 100644 --- a/plugins/kubernetes-react/src/components/StatefulSetsAccordions/StatefulSetDrawer.tsx +++ b/plugins/kubernetes-react/src/components/StatefulSetsAccordions/StatefulSetDrawer.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React from 'react'; +import { ReactNode } from 'react'; import { V1StatefulSet } from '@kubernetes/client-node'; import { KubernetesStructuredMetadataTableDrawer } from '../KubernetesDrawer'; import { renderCondition } from '../../utils/pod'; @@ -41,7 +41,7 @@ export const StatefulSetDrawer = ({ .reduce((accum, next) => { accum[next[0]] = next[1]; return accum; - }, {} as { [key: string]: React.ReactNode }); + }, {} as { [key: string]: ReactNode }); return { updateStrategy: statefulset.spec?.updateStrategy ?? '???', diff --git a/plugins/kubernetes-react/src/components/StatefulSetsAccordions/StatefulSetsAccordions.test.tsx b/plugins/kubernetes-react/src/components/StatefulSetsAccordions/StatefulSetsAccordions.test.tsx index f16335321f..8ecbaeca29 100644 --- a/plugins/kubernetes-react/src/components/StatefulSetsAccordions/StatefulSetsAccordions.test.tsx +++ b/plugins/kubernetes-react/src/components/StatefulSetsAccordions/StatefulSetsAccordions.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { screen } from '@testing-library/react'; import { StatefulSetsAccordions } from './StatefulSetsAccordions'; import * as twoStatefulSetsFixture from '../../__fixtures__/2-statefulsets.json'; diff --git a/plugins/kubernetes-react/src/components/StatefulSetsAccordions/StatefulSetsAccordions.tsx b/plugins/kubernetes-react/src/components/StatefulSetsAccordions/StatefulSetsAccordions.tsx index 80fff510e7..982f1c290b 100644 --- a/plugins/kubernetes-react/src/components/StatefulSetsAccordions/StatefulSetsAccordions.tsx +++ b/plugins/kubernetes-react/src/components/StatefulSetsAccordions/StatefulSetsAccordions.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useContext } from 'react'; +import { ReactNode, useContext } from 'react'; import Accordion from '@material-ui/core/Accordion'; import AccordionDetails from '@material-ui/core/AccordionDetails'; import AccordionSummary from '@material-ui/core/AccordionSummary'; @@ -38,14 +38,14 @@ import { StatusError, StatusOK } from '@backstage/core-components'; import { READY_COLUMNS, RESOURCE_COLUMNS } from '../Pods/PodsTable'; type StatefulSetsAccordionsProps = { - children?: React.ReactNode; + children?: ReactNode; }; type StatefulSetAccordionProps = { statefulset: V1StatefulSet; ownedPods: V1Pod[]; matchingHpa?: V2HorizontalPodAutoscaler; - children?: React.ReactNode; + children?: ReactNode; }; type StatefulSetSummaryProps = { @@ -53,7 +53,7 @@ type StatefulSetSummaryProps = { numberOfCurrentPods: number; numberOfPodsWithErrors: number; hpa?: V2HorizontalPodAutoscaler; - children?: React.ReactNode; + children?: ReactNode; }; const StatefulSetSummary = ({ diff --git a/plugins/kubernetes-react/src/hooks/Cluster.ts b/plugins/kubernetes-react/src/hooks/Cluster.ts index ee950b7f4d..b517075db8 100644 --- a/plugins/kubernetes-react/src/hooks/Cluster.ts +++ b/plugins/kubernetes-react/src/hooks/Cluster.ts @@ -13,12 +13,12 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; +import { createContext } from 'react'; import { ClusterAttributes } from '@backstage/plugin-kubernetes-common'; /** * @public */ -export const ClusterContext = React.createContext({ +export const ClusterContext = createContext({ name: '', }); diff --git a/plugins/kubernetes-react/src/hooks/GroupedResponses.ts b/plugins/kubernetes-react/src/hooks/GroupedResponses.ts index 10cd3a8abe..1dbf16c57e 100644 --- a/plugins/kubernetes-react/src/hooks/GroupedResponses.ts +++ b/plugins/kubernetes-react/src/hooks/GroupedResponses.ts @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; +import { createContext } from 'react'; import { GroupedResponses } from '@backstage/plugin-kubernetes-common'; /** @@ -21,7 +21,7 @@ import { GroupedResponses } from '@backstage/plugin-kubernetes-common'; * * @public */ -export const GroupedResponsesContext = React.createContext({ +export const GroupedResponsesContext = createContext({ pods: [], replicaSets: [], deployments: [], diff --git a/plugins/kubernetes-react/src/hooks/PodNamesWithErrors.ts b/plugins/kubernetes-react/src/hooks/PodNamesWithErrors.ts index 001a40805f..d27de8e66e 100644 --- a/plugins/kubernetes-react/src/hooks/PodNamesWithErrors.ts +++ b/plugins/kubernetes-react/src/hooks/PodNamesWithErrors.ts @@ -13,11 +13,11 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; +import { createContext } from 'react'; /** * @public */ -export const PodNamesWithErrorsContext = React.createContext>( +export const PodNamesWithErrorsContext = createContext>( new Set(), ); diff --git a/plugins/kubernetes-react/src/hooks/PodNamesWithMetrics.ts b/plugins/kubernetes-react/src/hooks/PodNamesWithMetrics.ts index 12da138cfb..1220017675 100644 --- a/plugins/kubernetes-react/src/hooks/PodNamesWithMetrics.ts +++ b/plugins/kubernetes-react/src/hooks/PodNamesWithMetrics.ts @@ -13,12 +13,12 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; +import { createContext } from 'react'; import { ClientPodStatus } from '@backstage/plugin-kubernetes-common'; /** * @public */ -export const PodNamesWithMetricsContext = React.createContext< +export const PodNamesWithMetricsContext = createContext< Map >(new Map()); diff --git a/plugins/kubernetes-react/src/hooks/test-utils.tsx b/plugins/kubernetes-react/src/hooks/test-utils.tsx index a98f3e4162..6921f37f02 100644 --- a/plugins/kubernetes-react/src/hooks/test-utils.tsx +++ b/plugins/kubernetes-react/src/hooks/test-utils.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React from 'react'; +import { ReactNode } from 'react'; import { GroupedResponsesContext } from './GroupedResponses'; import { PodNamesWithErrorsContext } from './PodNamesWithErrors'; import { @@ -33,7 +33,7 @@ export const kubernetesProviders = ( >(), cluster: ClusterAttributes = { name: 'some-cluster' }, ) => { - return (node: React.ReactNode) => ( + return (node: ReactNode) => ( diff --git a/plugins/kubernetes-react/src/hooks/useIsPodDeleteEnabled.test.tsx b/plugins/kubernetes-react/src/hooks/useIsPodDeleteEnabled.test.tsx index 92aa601d8d..7e8b197a15 100644 --- a/plugins/kubernetes-react/src/hooks/useIsPodDeleteEnabled.test.tsx +++ b/plugins/kubernetes-react/src/hooks/useIsPodDeleteEnabled.test.tsx @@ -18,7 +18,6 @@ import { configApiRef } from '@backstage/core-plugin-api'; import { TestApiProvider } from '@backstage/test-utils'; import { renderHook } from '@testing-library/react'; import { PropsWithChildren } from 'react'; -import React from 'react'; import { useIsPodDeleteEnabled } from './useIsPodDeleteEnabled'; diff --git a/plugins/kubernetes-react/src/hooks/useIsPodExecTerminalEnabled.test.tsx b/plugins/kubernetes-react/src/hooks/useIsPodExecTerminalEnabled.test.tsx index 84e75ce529..90ec8f4d62 100644 --- a/plugins/kubernetes-react/src/hooks/useIsPodExecTerminalEnabled.test.tsx +++ b/plugins/kubernetes-react/src/hooks/useIsPodExecTerminalEnabled.test.tsx @@ -18,7 +18,6 @@ import { configApiRef } from '@backstage/core-plugin-api'; import { TestApiProvider } from '@backstage/test-utils'; import { renderHook } from '@testing-library/react'; import { PropsWithChildren } from 'react'; -import React from 'react'; import { useIsPodExecTerminalEnabled } from './useIsPodExecTerminalEnabled'; diff --git a/plugins/kubernetes-react/src/hooks/useMatchingErrors.test.tsx b/plugins/kubernetes-react/src/hooks/useMatchingErrors.test.tsx index f8312eac4e..6c62ab020c 100644 --- a/plugins/kubernetes-react/src/hooks/useMatchingErrors.test.tsx +++ b/plugins/kubernetes-react/src/hooks/useMatchingErrors.test.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; +import { ReactNode } from 'react'; import { renderHook } from '@testing-library/react'; import { DetectedErrorsContext, useMatchingErrors } from './useMatchingErrors'; import { @@ -40,7 +40,7 @@ const genericErrorWithRef = (resourceRef: ResourceRef): DetectedError => { describe('useMatchingErrors', () => { it('should filter non-matching resources', () => { - const wrapper = ({ children }: { children: React.ReactNode }) => ( + const wrapper = ({ children }: { children: ReactNode }) => ( ([]); +export const DetectedErrorsContext = createContext([]); /** * diff --git a/plugins/kubernetes-react/src/hooks/usePodMetrics.test.tsx b/plugins/kubernetes-react/src/hooks/usePodMetrics.test.tsx index 45c53e822d..46df224138 100644 --- a/plugins/kubernetes-react/src/hooks/usePodMetrics.test.tsx +++ b/plugins/kubernetes-react/src/hooks/usePodMetrics.test.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; +import { ReactNode } from 'react'; import { renderHook } from '@testing-library/react'; import { PodMetricsContext, usePodMetrics } from './usePodMetrics'; import { ClientPodStatus } from '@backstage/plugin-kubernetes-common'; @@ -45,7 +45,7 @@ describe('usePodMetrics', () => { const metrics = new Map(); metrics.set('cluster', [clientPodStatus]); metrics.set('other-cluster', [otherClientPodStatus]); - const wrapper = ({ children }: { children: React.ReactNode }) => ( + const wrapper = ({ children }: { children: ReactNode }) => ( {children} diff --git a/plugins/kubernetes-react/src/hooks/usePodMetrics.ts b/plugins/kubernetes-react/src/hooks/usePodMetrics.ts index 6d3c52690f..863fc27c3a 100644 --- a/plugins/kubernetes-react/src/hooks/usePodMetrics.ts +++ b/plugins/kubernetes-react/src/hooks/usePodMetrics.ts @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, { useContext } from 'react'; +import { createContext, useContext } from 'react'; import { IObjectMeta } from '@kubernetes-models/apimachinery/apis/meta/v1/ObjectMeta'; import { ClientPodStatus } from '@backstage/plugin-kubernetes-common'; @@ -22,9 +22,9 @@ import { ClientPodStatus } from '@backstage/plugin-kubernetes-common'; * * @public */ -export const PodMetricsContext = React.createContext< - Map ->(new Map()); +export const PodMetricsContext = createContext>( + new Map(), +); /** * @public diff --git a/plugins/kubernetes-react/src/utils/pod.test.tsx b/plugins/kubernetes-react/src/utils/pod.test.tsx index b27df01519..3f82c14f86 100644 --- a/plugins/kubernetes-react/src/utils/pod.test.tsx +++ b/plugins/kubernetes-react/src/utils/pod.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { currentToDeclaredResourceToPerc, podStatusToCpuUtil, diff --git a/plugins/kubernetes-react/src/utils/pod.tsx b/plugins/kubernetes-react/src/utils/pod.tsx index bd7d8342fd..e0b1875b43 100644 --- a/plugins/kubernetes-react/src/utils/pod.tsx +++ b/plugins/kubernetes-react/src/utils/pod.tsx @@ -19,7 +19,7 @@ import { V1PodCondition, V1DeploymentCondition, } from '@kubernetes/client-node'; -import React, { Fragment, ReactNode } from 'react'; +import { Fragment, ReactNode } from 'react'; import Chip from '@material-ui/core/Chip'; import { StatusAborted, @@ -87,7 +87,7 @@ export const containerStatuses = (pod: Pod): ReactNode => { } return accum; - }, [] as React.ReactNode[]); + }, [] as ReactNode[]); if (errors.length === 0) { return OK; diff --git a/plugins/kubernetes/dev/index.tsx b/plugins/kubernetes/dev/index.tsx index e5581ac2ef..f0f36249e2 100644 --- a/plugins/kubernetes/dev/index.tsx +++ b/plugins/kubernetes/dev/index.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import { Entity } from '@backstage/catalog-model'; import { createDevApp } from '@backstage/dev-utils'; import { EntityProvider } from '@backstage/plugin-catalog-react'; diff --git a/plugins/kubernetes/src/KubernetesContent.test.tsx b/plugins/kubernetes/src/KubernetesContent.test.tsx index daeb184275..9ba5c60d2a 100644 --- a/plugins/kubernetes/src/KubernetesContent.test.tsx +++ b/plugins/kubernetes/src/KubernetesContent.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { screen } from '@testing-library/react'; import { mockApis, diff --git a/plugins/kubernetes/src/KubernetesContent.tsx b/plugins/kubernetes/src/KubernetesContent.tsx index f980e87f0b..5a9df819c8 100644 --- a/plugins/kubernetes/src/KubernetesContent.tsx +++ b/plugins/kubernetes/src/KubernetesContent.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React from 'react'; +import { ReactNode } from 'react'; import Grid from '@material-ui/core/Grid'; import Typography from '@material-ui/core/Typography'; import { Entity } from '@backstage/catalog-model'; @@ -40,7 +40,7 @@ import { RequireKubernetesPermissions } from './RequireKubernetesPermissions'; type KubernetesContentProps = { entity: Entity; refreshIntervalMs?: number; - children?: React.ReactNode; + children?: ReactNode; }; export const KubernetesContent = ({ diff --git a/plugins/kubernetes/src/RequireKubernetesPermissions.tsx b/plugins/kubernetes/src/RequireKubernetesPermissions.tsx index efc83e8ef8..e633d1c2c4 100644 --- a/plugins/kubernetes/src/RequireKubernetesPermissions.tsx +++ b/plugins/kubernetes/src/RequireKubernetesPermissions.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, { ReactNode } from 'react'; +import { ReactNode } from 'react'; import { kubernetesClustersReadPermission, kubernetesResourcesReadPermission, diff --git a/plugins/kubernetes/src/Router.tsx b/plugins/kubernetes/src/Router.tsx index c613de92c3..cf5b27fbf5 100644 --- a/plugins/kubernetes/src/Router.tsx +++ b/plugins/kubernetes/src/Router.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { Entity } from '@backstage/catalog-model'; import { useEntity, diff --git a/plugins/kubernetes/src/alpha/KubernetesContentPage.tsx b/plugins/kubernetes/src/alpha/KubernetesContentPage.tsx index 948a492e63..cd73fb537f 100644 --- a/plugins/kubernetes/src/alpha/KubernetesContentPage.tsx +++ b/plugins/kubernetes/src/alpha/KubernetesContentPage.tsx @@ -16,7 +16,6 @@ import { useEntity } from '@backstage/plugin-catalog-react'; import { KubernetesContent } from '../KubernetesContent'; -import React from 'react'; export function KubernetesContentPage() { const { entity } = useEntity(); diff --git a/plugins/kubernetes/src/alpha/entityContents.tsx b/plugins/kubernetes/src/alpha/entityContents.tsx index 2d27cd66b2..ad35b401be 100644 --- a/plugins/kubernetes/src/alpha/entityContents.tsx +++ b/plugins/kubernetes/src/alpha/entityContents.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { compatWrapper } from '@backstage/core-compat-api'; import { EntityContentBlueprint } from '@backstage/plugin-catalog-react/alpha'; import { isKubernetesAvailable } from '../Router'; diff --git a/plugins/kubernetes/src/alpha/pages.tsx b/plugins/kubernetes/src/alpha/pages.tsx index a58ffec94f..83a2e1aa94 100644 --- a/plugins/kubernetes/src/alpha/pages.tsx +++ b/plugins/kubernetes/src/alpha/pages.tsx @@ -14,9 +14,7 @@ * limitations under the License. */ -import React from 'react'; // Add this line to import React - -import { PageBlueprint } from '@backstage/frontend-plugin-api'; +import { PageBlueprint } from '@backstage/frontend-plugin-api'; // Add this line to import React import { compatWrapper, convertLegacyRouteRef, diff --git a/plugins/notifications/dev/index.tsx b/plugins/notifications/dev/index.tsx index 794812ef8f..81354e2a73 100644 --- a/plugins/notifications/dev/index.tsx +++ b/plugins/notifications/dev/index.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import { createDevApp } from '@backstage/dev-utils'; import { NotificationsPage, diff --git a/plugins/notifications/src/alpha.tsx b/plugins/notifications/src/alpha.tsx index 60f2136533..d61ecf16f2 100644 --- a/plugins/notifications/src/alpha.tsx +++ b/plugins/notifications/src/alpha.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { ApiBlueprint, PageBlueprint, diff --git a/plugins/notifications/src/components/NotificationsFilters/NotificationsFilters.tsx b/plugins/notifications/src/components/NotificationsFilters/NotificationsFilters.tsx index 300c56bdee..7e3f519b0c 100644 --- a/plugins/notifications/src/components/NotificationsFilters/NotificationsFilters.tsx +++ b/plugins/notifications/src/components/NotificationsFilters/NotificationsFilters.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; +import { ChangeEvent } from 'react'; import Divider from '@material-ui/core/Divider'; import FormControl from '@material-ui/core/FormControl'; @@ -139,13 +139,13 @@ export const NotificationsFilters = ({ const sortByText = getSortByText(sorting); const handleOnCreatedAfterChanged = ( - event: React.ChangeEvent<{ name?: string; value: unknown }>, + event: ChangeEvent<{ name?: string; value: unknown }>, ) => { onCreatedAfterChanged(event.target.value as string); }; const handleOnViewChanged = ( - event: React.ChangeEvent<{ name?: string; value: unknown }>, + event: ChangeEvent<{ name?: string; value: unknown }>, ) => { if (event.target.value === 'unread') { onUnreadOnlyChanged(true); @@ -164,7 +164,7 @@ export const NotificationsFilters = ({ }; const handleOnSortByChanged = ( - event: React.ChangeEvent<{ name?: string; value: unknown }>, + event: ChangeEvent<{ name?: string; value: unknown }>, ) => { const idx = (event.target.value as string) || 'newest'; const option = SortByOptions[idx]; @@ -181,7 +181,7 @@ export const NotificationsFilters = ({ } const handleOnSeverityChanged = ( - event: React.ChangeEvent<{ name?: string; value: unknown }>, + event: ChangeEvent<{ name?: string; value: unknown }>, ) => { const value: NotificationSeverity = (event.target.value as NotificationSeverity) || 'normal'; @@ -189,7 +189,7 @@ export const NotificationsFilters = ({ }; const handleOnTopicChanged = ( - event: React.ChangeEvent<{ name?: string; value: unknown }>, + event: ChangeEvent<{ name?: string; value: unknown }>, ) => { const value = event.target.value as string; onTopicChanged(value === ALL ? undefined : value); diff --git a/plugins/notifications/src/components/NotificationsPage/NotificationsPage.tsx b/plugins/notifications/src/components/NotificationsPage/NotificationsPage.tsx index 194033a697..739e9a1535 100644 --- a/plugins/notifications/src/components/NotificationsPage/NotificationsPage.tsx +++ b/plugins/notifications/src/components/NotificationsPage/NotificationsPage.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useEffect } from 'react'; +import { useState, useMemo, useEffect } from 'react'; import throttle from 'lodash/throttle'; import { Content, @@ -68,19 +68,17 @@ export const NotificationsPage = (props?: NotificationsPageProps) => { markAsReadOnLinkOpen, } = props ?? {}; - const [refresh, setRefresh] = React.useState(false); + const [refresh, setRefresh] = useState(false); const { lastSignal } = useSignal('notifications'); - const [unreadOnly, setUnreadOnly] = React.useState(true); - const [saved, setSaved] = React.useState(undefined); - const [pageNumber, setPageNumber] = React.useState(0); - const [pageSize, setPageSize] = React.useState(5); - const [containsText, setContainsText] = React.useState(); - const [createdAfter, setCreatedAfter] = React.useState('all'); - const [sorting, setSorting] = React.useState( - SortByOptions.newest.sortBy, - ); - const [severity, setSeverity] = React.useState('low'); - const [topic, setTopic] = React.useState(); + const [unreadOnly, setUnreadOnly] = useState(true); + const [saved, setSaved] = useState(undefined); + const [pageNumber, setPageNumber] = useState(0); + const [pageSize, setPageSize] = useState(5); + const [containsText, setContainsText] = useState(); + const [createdAfter, setCreatedAfter] = useState('all'); + const [sorting, setSorting] = useState(SortByOptions.newest.sortBy); + const [severity, setSeverity] = useState('low'); + const [topic, setTopic] = useState(); const { error, value, retry, loading } = useNotificationsApi< [GetNotificationsResponse, NotificationStatus, GetTopicsResponse] @@ -127,7 +125,7 @@ export const NotificationsPage = (props?: NotificationsPageProps) => { ], ); - const throttledSetRefresh = React.useMemo( + const throttledSetRefresh = useMemo( () => throttle(setRefresh, ThrottleDelayMs), [setRefresh], ); diff --git a/plugins/notifications/src/components/NotificationsSideBarItem/NotificationsSideBarItem.tsx b/plugins/notifications/src/components/NotificationsSideBarItem/NotificationsSideBarItem.tsx index 105318564e..2a2f56da6a 100644 --- a/plugins/notifications/src/components/NotificationsSideBarItem/NotificationsSideBarItem.tsx +++ b/plugins/notifications/src/components/NotificationsSideBarItem/NotificationsSideBarItem.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, { useCallback, useEffect } from 'react'; +import { useState, useCallback, useEffect } from 'react'; import { useNotificationsApi } from '../../hooks'; import { Link, SidebarItem } from '@backstage/core-components'; import NotificationsIcon from '@material-ui/icons/Notifications'; @@ -111,14 +111,14 @@ export const NotificationsSidebarItem = (props?: { ); const notificationsApi = useApi(notificationsApiRef); const alertApi = useApi(alertApiRef); - const [unreadCount, setUnreadCount] = React.useState(0); + const [unreadCount, setUnreadCount] = useState(0); const notificationsRoute = useRouteRef(rootRouteRef)(); // TODO: Do we want to add long polling in case signals are not available const { lastSignal } = useSignal('notifications'); const { sendWebNotification, requestUserPermission } = useWebNotifications( webNotificationsEnabled, ); - const [refresh, setRefresh] = React.useState(false); + const [refresh, setRefresh] = useState(false); const { setNotificationCount } = useTitleCounter(); const getSnackbarProperties = useCallback( diff --git a/plugins/notifications/src/components/NotificationsTable/BulkActions.tsx b/plugins/notifications/src/components/NotificationsTable/BulkActions.tsx index 40e2f5c8bb..a8b91bd841 100644 --- a/plugins/notifications/src/components/NotificationsTable/BulkActions.tsx +++ b/plugins/notifications/src/components/NotificationsTable/BulkActions.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import { Notification } from '@backstage/plugin-notifications-common'; import Grid from '@material-ui/core/Grid'; import IconButton from '@material-ui/core/IconButton'; diff --git a/plugins/notifications/src/components/NotificationsTable/NotificationIcon.tsx b/plugins/notifications/src/components/NotificationsTable/NotificationIcon.tsx index c89f920249..4698bb355e 100644 --- a/plugins/notifications/src/components/NotificationsTable/NotificationIcon.tsx +++ b/plugins/notifications/src/components/NotificationsTable/NotificationIcon.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import { Notification } from '@backstage/plugin-notifications-common'; import SvgIcon from '@material-ui/core/SvgIcon'; import { useApp } from '@backstage/core-plugin-api'; diff --git a/plugins/notifications/src/components/NotificationsTable/NotificationsTable.tsx b/plugins/notifications/src/components/NotificationsTable/NotificationsTable.tsx index 71a490b27c..8ec237e62f 100644 --- a/plugins/notifications/src/components/NotificationsTable/NotificationsTable.tsx +++ b/plugins/notifications/src/components/NotificationsTable/NotificationsTable.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; +import { useState, useCallback, useMemo, useEffect } from 'react'; import throttle from 'lodash/throttle'; // @ts-ignore import RelativeTime from 'react-relative-time'; @@ -92,11 +92,11 @@ export const NotificationsTable = ({ const alertApi = useApi(alertApiRef); const confirm = useConfirm(); - const [selectedNotifications, setSelectedNotifications] = React.useState( + const [selectedNotifications, setSelectedNotifications] = useState( new Set(), ); - const onNotificationsSelectChange = React.useCallback( + const onNotificationsSelectChange = useCallback( (ids: Notification['id'][], checked: boolean) => { let newSelect: Set; if (checked) { @@ -110,7 +110,7 @@ export const NotificationsTable = ({ [selectedNotifications, setSelectedNotifications], ); - const onSwitchReadStatus = React.useCallback( + const onSwitchReadStatus = useCallback( (ids: Notification['id'][], newStatus: boolean) => { notificationsApi .updateNotifications({ @@ -122,7 +122,7 @@ export const NotificationsTable = ({ [notificationsApi, onUpdate], ); - const onSwitchSavedStatus = React.useCallback( + const onSwitchSavedStatus = useCallback( (ids: Notification['id'][], newStatus: boolean) => { notificationsApi .updateNotifications({ @@ -134,7 +134,7 @@ export const NotificationsTable = ({ [notificationsApi, onUpdate], ); - const onMarkAllRead = React.useCallback(() => { + const onMarkAllRead = useCallback(() => { confirm({ title: 'Are you sure?', description: ( @@ -167,12 +167,12 @@ export const NotificationsTable = ({ }); }, [alertApi, confirm, notificationsApi, onUpdate]); - const throttledContainsTextHandler = React.useMemo( + const throttledContainsTextHandler = useMemo( () => throttle(setContainsText, ThrottleDelayMs), [setContainsText], ); - React.useEffect(() => { + useEffect(() => { const allShownIds = new Set(notifications.map(n => n.id)); const intersect = [...selectedNotifications].filter(id => allShownIds.has(id), @@ -182,7 +182,7 @@ export const NotificationsTable = ({ } }, [notifications, selectedNotifications]); - const compactColumns = React.useMemo((): TableColumn[] => { + const compactColumns = useMemo((): TableColumn[] => { const showToolbar = notifications.length > 0; return [ { diff --git a/plugins/notifications/src/components/NotificationsTable/SelectAll.tsx b/plugins/notifications/src/components/NotificationsTable/SelectAll.tsx index 8f604779b7..9bcc497132 100644 --- a/plugins/notifications/src/components/NotificationsTable/SelectAll.tsx +++ b/plugins/notifications/src/components/NotificationsTable/SelectAll.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import Checkbox from '@material-ui/core/Checkbox'; import FormControlLabel from '@material-ui/core/FormControlLabel'; import { makeStyles } from '@material-ui/core/styles'; diff --git a/plugins/notifications/src/components/NotificationsTable/SeverityIcon.tsx b/plugins/notifications/src/components/NotificationsTable/SeverityIcon.tsx index 062c2ae5b7..a54101626d 100644 --- a/plugins/notifications/src/components/NotificationsTable/SeverityIcon.tsx +++ b/plugins/notifications/src/components/NotificationsTable/SeverityIcon.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import { NotificationSeverity } from '@backstage/plugin-notifications-common'; import NormalIcon from '@material-ui/icons/CheckOutlined'; import CriticalIcon from '@material-ui/icons/ErrorOutline'; diff --git a/plugins/notifications/src/components/UserNotificationSettingsCard/UserNotificationSettingsCard.tsx b/plugins/notifications/src/components/UserNotificationSettingsCard/UserNotificationSettingsCard.tsx index 81d109e5cc..1d4308bb7e 100644 --- a/plugins/notifications/src/components/UserNotificationSettingsCard/UserNotificationSettingsCard.tsx +++ b/plugins/notifications/src/components/UserNotificationSettingsCard/UserNotificationSettingsCard.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useEffect } from 'react'; +import { useState, useEffect } from 'react'; import { ErrorPanel, InfoCard, Progress } from '@backstage/core-components'; import { useNotificationsApi } from '../../hooks'; import { NotificationSettings } from '@backstage/plugin-notifications-common'; @@ -26,7 +26,7 @@ import { UserNotificationSettingsPanel } from './UserNotificationSettingsPanel'; export const UserNotificationSettingsCard = (props: { originNames?: Record; }) => { - const [settings, setNotificationSettings] = React.useState< + const [settings, setNotificationSettings] = useState< NotificationSettings | undefined >(undefined); diff --git a/plugins/notifications/src/components/UserNotificationSettingsCard/UserNotificationSettingsPanel.tsx b/plugins/notifications/src/components/UserNotificationSettingsCard/UserNotificationSettingsPanel.tsx index dc9f2a223f..8841b2829a 100644 --- a/plugins/notifications/src/components/UserNotificationSettingsCard/UserNotificationSettingsPanel.tsx +++ b/plugins/notifications/src/components/UserNotificationSettingsCard/UserNotificationSettingsPanel.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React from 'react'; +import { ChangeEvent } from 'react'; import { isNotificationsEnabledFor, NotificationSettings, @@ -125,7 +125,7 @@ export const UserNotificationSettingsPanel = (props: { channel.id, origin, )} - onChange={(event: React.ChangeEvent) => { + onChange={(event: ChangeEvent) => { handleChange(channel.id, origin, event.target.checked); }} /> diff --git a/plugins/org-react/README.md b/plugins/org-react/README.md index 1f87a5e7e6..d1be48be6d 100644 --- a/plugins/org-react/README.md +++ b/plugins/org-react/README.md @@ -12,7 +12,7 @@ To use the `GroupListPicker` component you'll need to import it and add it to yo ```diff + import { GroupListPicker } from '@backstage/plugin-org-react'; -+ import React, { useState } from 'react'; ++ import { useState } from 'react'; + const [group, setGroup] = useState(); diff --git a/plugins/org-react/src/components/GroupListPicker/GroupListPicker.test.tsx b/plugins/org-react/src/components/GroupListPicker/GroupListPicker.test.tsx index 056a91826b..eac96a5d14 100644 --- a/plugins/org-react/src/components/GroupListPicker/GroupListPicker.test.tsx +++ b/plugins/org-react/src/components/GroupListPicker/GroupListPicker.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { render, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { ApiProvider } from '@backstage/core-app-api'; diff --git a/plugins/org-react/src/components/GroupListPicker/GroupListPicker.tsx b/plugins/org-react/src/components/GroupListPicker/GroupListPicker.tsx index 4f28faa1eb..12dc69073b 100644 --- a/plugins/org-react/src/components/GroupListPicker/GroupListPicker.tsx +++ b/plugins/org-react/src/components/GroupListPicker/GroupListPicker.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useCallback } from 'react'; +import { MouseEvent, useState, useCallback } from 'react'; import { catalogApiRef, humanizeEntityRef, @@ -45,10 +45,10 @@ export const GroupListPicker = (props: GroupListPickerProps) => { const catalogApi = useApi(catalogApiRef); const { onChange, groupTypes, placeholder = '', defaultValue = '' } = props; - const [anchorEl, setAnchorEl] = React.useState(null); - const [inputValue, setInputValue] = React.useState(defaultValue); + const [anchorEl, setAnchorEl] = useState(null); + const [inputValue, setInputValue] = useState(defaultValue); - const handleClick = (event: React.MouseEvent) => { + const handleClick = (event: MouseEvent) => { setAnchorEl(event.currentTarget); }; diff --git a/plugins/org-react/src/components/GroupListPicker/GroupListPickerButton.tsx b/plugins/org-react/src/components/GroupListPicker/GroupListPickerButton.tsx index b7a31f89f2..12754bd955 100644 --- a/plugins/org-react/src/components/GroupListPicker/GroupListPickerButton.tsx +++ b/plugins/org-react/src/components/GroupListPicker/GroupListPickerButton.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React from 'react'; +import { MouseEvent } from 'react'; import Typography from '@material-ui/core/Typography'; import Button from '@material-ui/core/Button'; import { makeStyles } from '@material-ui/core/styles'; @@ -46,7 +46,7 @@ const useStyles = makeStyles(theme => ({ })); type GroupListPickerButtonProps = { - handleClick: (event: React.MouseEvent) => void; + handleClick: (event: MouseEvent) => void; group: string | undefined; }; diff --git a/plugins/org/src/alpha.tsx b/plugins/org/src/alpha.tsx index 61054a2d8a..30cfe4f271 100644 --- a/plugins/org/src/alpha.tsx +++ b/plugins/org/src/alpha.tsx @@ -19,7 +19,6 @@ import { convertLegacyRouteRefs, } from '@backstage/core-compat-api'; import { createFrontendPlugin } from '@backstage/frontend-plugin-api'; -import React from 'react'; import { catalogIndexRouteRef } from './routes'; import { EntityCardBlueprint } from '@backstage/plugin-catalog-react/alpha'; diff --git a/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.stories.tsx__ b/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.stories.tsx__ index af2c1b4714..e2c33984ac 100644 --- a/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.stories.tsx__ +++ b/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.stories.tsx__ @@ -32,7 +32,7 @@ import { permissionApiRef } from '@backstage/plugin-permission-react'; import { AuthorizeResult } from '@backstage/plugin-permission-common'; import { TestApiProvider, wrapInTestApp } from '@backstage/test-utils'; import Grid from '@material-ui/core/Grid'; -import React, { ComponentType, PropsWithChildren } from 'react'; +import { ComponentType, PropsWithChildren } from 'react'; import { GroupProfileCard } from './GroupProfileCard'; const dummyDepartment = { diff --git a/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx b/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx index b863bef482..5c4eb077b8 100644 --- a/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx +++ b/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx @@ -42,7 +42,7 @@ import { getEntityRelations, useEntity, } from '@backstage/plugin-catalog-react'; -import React, { useCallback } from 'react'; +import { useCallback } from 'react'; import { alertApiRef, useApi } from '@backstage/core-plugin-api'; import AccountTreeIcon from '@material-ui/icons/AccountTree'; diff --git a/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.stories.tsx__ b/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.stories.tsx__ index e5bfa053c0..45d88e83f3 100644 --- a/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.stories.tsx__ +++ b/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.stories.tsx__ @@ -22,7 +22,7 @@ import { } from '@backstage/plugin-catalog-react'; import { TestApiProvider, wrapInTestApp } from '@backstage/test-utils'; import Grid from '@material-ui/core/Grid'; -import React, { ComponentType, PropsWithChildren } from 'react'; +import { ComponentType, PropsWithChildren } from 'react'; import { groupA, mockedCatalogApiSupportingGroups, diff --git a/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.test.tsx b/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.test.tsx index 04de321c50..bdc9456fc1 100644 --- a/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.test.tsx +++ b/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.test.tsx @@ -27,7 +27,6 @@ import { renderInTestApp, TestApiProvider, } from '@backstage/test-utils'; -import React from 'react'; import { MembersListCard } from './MembersListCard'; import { groupA, diff --git a/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx b/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx index eff8a44015..c051de5ddb 100644 --- a/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx +++ b/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx @@ -20,14 +20,18 @@ import { UserEntity, stringifyEntityRef, } from '@backstage/catalog-model'; -import { catalogApiRef, useEntity } from '@backstage/plugin-catalog-react'; +import { + catalogApiRef, + useEntity, + EntityRefLink, +} from '@backstage/plugin-catalog-react'; import Box from '@material-ui/core/Box'; import Grid from '@material-ui/core/Grid'; import Switch from '@material-ui/core/Switch'; import Typography from '@material-ui/core/Typography'; import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; import Pagination from '@material-ui/lab/Pagination'; -import React, { useState } from 'react'; +import { useState, ChangeEvent } from 'react'; import useAsync from 'react-use/esm/useAsync'; import { @@ -43,7 +47,6 @@ import { getAllDesendantMembersForGroupEntity, removeDuplicateEntitiesFrom, } from '../../../../helpers/helpers'; -import { EntityRefLink } from '@backstage/plugin-catalog-react'; import { EntityRelationAggregation } from '../../types'; /** @public */ @@ -175,8 +178,8 @@ export const MembersListCard = (props: { const groupNamespace = grpNamespace || DEFAULT_NAMESPACE; - const [page, setPage] = React.useState(1); - const pageChange = (_: React.ChangeEvent, pageIndex: number) => { + const [page, setPage] = useState(1); + const pageChange = (_: ChangeEvent, pageIndex: number) => { setPage(pageIndex); }; @@ -245,7 +248,7 @@ export const MembersListCard = (props: { /> ); - let memberList: React.JSX.Element; + let memberList: JSX.Element; if (members && members.length > 0) { memberList = ( diff --git a/plugins/org/src/components/Cards/Meta/LinksGroup.tsx b/plugins/org/src/components/Cards/Meta/LinksGroup.tsx index 895bf33205..48cf48f27b 100644 --- a/plugins/org/src/components/Cards/Meta/LinksGroup.tsx +++ b/plugins/org/src/components/Cards/Meta/LinksGroup.tsx @@ -20,7 +20,6 @@ import ListItem from '@material-ui/core/ListItem'; import ListItemIcon from '@material-ui/core/ListItemIcon'; import ListItemText from '@material-ui/core/ListItemText'; import Divider from '@material-ui/core/Divider'; -import React from 'react'; import { Link } from '@backstage/core-components'; const WebLink = ({ diff --git a/plugins/org/src/components/Cards/OwnershipCard/ComponentsGrid.tsx b/plugins/org/src/components/Cards/OwnershipCard/ComponentsGrid.tsx index a7decfb592..d6f2c2c360 100644 --- a/plugins/org/src/components/Cards/OwnershipCard/ComponentsGrid.tsx +++ b/plugins/org/src/components/Cards/OwnershipCard/ComponentsGrid.tsx @@ -26,7 +26,6 @@ import Box from '@material-ui/core/Box'; import Grid from '@material-ui/core/Grid'; import Typography from '@material-ui/core/Typography'; import { createStyles, makeStyles } from '@material-ui/core/styles'; -import React from 'react'; import pluralize from 'pluralize'; import { catalogIndexRouteRef } from '../../../routes'; import { useGetEntities } from './useGetEntities'; diff --git a/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.stories.tsx b/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.stories.tsx index 493b2e3215..67d1073dab 100644 --- a/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.stories.tsx +++ b/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.stories.tsx @@ -23,7 +23,6 @@ import { } from '@backstage/plugin-catalog-react'; import { TestApiRegistry, wrapInTestApp } from '@backstage/test-utils'; import Grid from '@material-ui/core/Grid'; -import React from 'react'; import { catalogIndexRouteRef } from '../../../routes'; import { OwnershipCard } from './OwnershipCard'; diff --git a/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.test.tsx b/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.test.tsx index 084a14a825..f5b01e918a 100644 --- a/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.test.tsx +++ b/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.test.tsx @@ -22,7 +22,6 @@ import { Entity, GroupEntity, UserEntity } from '@backstage/catalog-model'; import { catalogApiRef, EntityProvider } from '@backstage/plugin-catalog-react'; import { renderInTestApp, TestApiProvider } from '@backstage/test-utils'; import { queryByText } from '@testing-library/react'; -import React from 'react'; import { catalogIndexRouteRef } from '../../../routes'; import { OwnershipCard } from './OwnershipCard'; import { catalogApiMock } from '@backstage/plugin-catalog-react/testUtils'; diff --git a/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.tsx b/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.tsx index fce47845bc..d179573b09 100644 --- a/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.tsx +++ b/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.tsx @@ -23,7 +23,7 @@ import ListItemText from '@material-ui/core/ListItemText'; import Switch from '@material-ui/core/Switch'; import Tooltip from '@material-ui/core/Tooltip'; import { makeStyles } from '@material-ui/core/styles'; -import React, { useEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; import { ComponentsGrid } from './ComponentsGrid'; import { EntityRelationAggregation } from '../types'; diff --git a/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.stories.tsx b/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.stories.tsx index e5d6ab4d19..f485a4e92d 100644 --- a/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.stories.tsx +++ b/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.stories.tsx @@ -21,7 +21,7 @@ import { } from '@backstage/plugin-catalog-react'; import { wrapInTestApp } from '@backstage/test-utils'; import Grid from '@material-ui/core/Grid'; -import React, { ComponentType, PropsWithChildren } from 'react'; +import { ComponentType, PropsWithChildren } from 'react'; import { UserProfileCard } from './UserProfileCard'; const dummyGroup = { diff --git a/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.test.tsx b/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.test.tsx index a18e9980e9..d8537e217e 100644 --- a/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.test.tsx +++ b/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.test.tsx @@ -20,7 +20,6 @@ import { entityRouteRef, } from '@backstage/plugin-catalog-react'; import { renderInTestApp } from '@backstage/test-utils'; -import React from 'react'; import { UserProfileCard } from './UserProfileCard'; import { screen } from '@testing-library/react'; diff --git a/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx b/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx index 3c60599a39..77188c6fb4 100644 --- a/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx +++ b/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx @@ -45,7 +45,6 @@ import EmailIcon from '@material-ui/icons/Email'; import GroupIcon from '@material-ui/icons/Group'; import { LinksGroup } from '../../Meta'; import PersonIcon from '@material-ui/icons/Person'; -import React from 'react'; const CardTitle = (props: { title?: string }) => props.title ? ( diff --git a/plugins/org/src/components/MyGroupsSidebarItem/MyGroupsSidebarItem.test.tsx b/plugins/org/src/components/MyGroupsSidebarItem/MyGroupsSidebarItem.test.tsx index c870d58cc1..88b8d675fa 100644 --- a/plugins/org/src/components/MyGroupsSidebarItem/MyGroupsSidebarItem.test.tsx +++ b/plugins/org/src/components/MyGroupsSidebarItem/MyGroupsSidebarItem.test.tsx @@ -19,7 +19,6 @@ import { TestApiProvider, mockApis, } from '@backstage/test-utils'; -import React from 'react'; import { MyGroupsSidebarItem } from './MyGroupsSidebarItem'; import GroupIcon from '@material-ui/icons/People'; import { identityApiRef } from '@backstage/core-plugin-api'; diff --git a/plugins/org/src/components/MyGroupsSidebarItem/MyGroupsSidebarItem.tsx b/plugins/org/src/components/MyGroupsSidebarItem/MyGroupsSidebarItem.tsx index 8292455115..bd770fcbf1 100644 --- a/plugins/org/src/components/MyGroupsSidebarItem/MyGroupsSidebarItem.tsx +++ b/plugins/org/src/components/MyGroupsSidebarItem/MyGroupsSidebarItem.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { DEFAULT_NAMESPACE, stringifyEntityRef, diff --git a/plugins/permission-react/src/components/PermissionedRoute.tsx b/plugins/permission-react/src/components/PermissionedRoute.tsx index 793c25ecc0..efc1d4867c 100644 --- a/plugins/permission-react/src/components/PermissionedRoute.tsx +++ b/plugins/permission-react/src/components/PermissionedRoute.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { ReactElement, ReactNode } from 'react'; +import { ReactElement, ReactNode } from 'react'; import { Route } from 'react-router-dom'; import { useApp } from '@backstage/core-plugin-api'; import { usePermission } from '../hooks'; diff --git a/plugins/permission-react/src/components/RequirePermission.test.tsx b/plugins/permission-react/src/components/RequirePermission.test.tsx index 0749d9b2b3..8586cf926f 100644 --- a/plugins/permission-react/src/components/RequirePermission.test.tsx +++ b/plugins/permission-react/src/components/RequirePermission.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { RequirePermission } from './RequirePermission'; import { usePermission } from '../hooks'; import { renderInTestApp } from '@backstage/test-utils'; diff --git a/plugins/permission-react/src/components/RequirePermission.tsx b/plugins/permission-react/src/components/RequirePermission.tsx index 801eb0fe24..dc4f9061af 100644 --- a/plugins/permission-react/src/components/RequirePermission.tsx +++ b/plugins/permission-react/src/components/RequirePermission.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { ReactNode } from 'react'; +import { ReactNode } from 'react'; import { useApp } from '@backstage/core-plugin-api'; import { usePermission } from '../hooks'; import { diff --git a/plugins/permission-react/src/hooks/usePermission.test.tsx b/plugins/permission-react/src/hooks/usePermission.test.tsx index 4be9af3b32..4167cab2b1 100644 --- a/plugins/permission-react/src/hooks/usePermission.test.tsx +++ b/plugins/permission-react/src/hooks/usePermission.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { render } from '@testing-library/react'; import { usePermission } from './usePermission'; import { diff --git a/plugins/scaffolder-react/src/hooks/useCustomFieldExtensions.test.tsx b/plugins/scaffolder-react/src/hooks/useCustomFieldExtensions.test.tsx index c21d43d6ff..3be482d684 100644 --- a/plugins/scaffolder-react/src/hooks/useCustomFieldExtensions.test.tsx +++ b/plugins/scaffolder-react/src/hooks/useCustomFieldExtensions.test.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { PropsWithChildren } from 'react'; +import { PropsWithChildren } from 'react'; import { createPlugin } from '@backstage/core-plugin-api'; import { TestApiProvider, wrapInTestApp } from '@backstage/test-utils'; import { renderHook, waitFor } from '@testing-library/react'; diff --git a/plugins/scaffolder-react/src/layouts/createScaffolderLayout.ts b/plugins/scaffolder-react/src/layouts/createScaffolderLayout.ts index d950285a7d..d89528962d 100644 --- a/plugins/scaffolder-react/src/layouts/createScaffolderLayout.ts +++ b/plugins/scaffolder-react/src/layouts/createScaffolderLayout.ts @@ -17,7 +17,7 @@ import { LAYOUTS_KEY, LAYOUTS_WRAPPER_KEY } from './keys'; import { attachComponentData, Extension } from '@backstage/core-plugin-api'; import type { FormProps as SchemaFormProps } from '@rjsf/core'; -import React from 'react'; +import { PropsWithChildren, ComponentType } from 'react'; /** * The field template from `@rjsf/core` which is a react component that gets passed `@rjsf/core` field related props. @@ -68,8 +68,8 @@ export function createScaffolderLayout( * * @public */ -export const ScaffolderLayouts: React.ComponentType< - React.PropsWithChildren<{}> +export const ScaffolderLayouts: ComponentType< + PropsWithChildren<{}> > = (): JSX.Element | null => null; attachComponentData(ScaffolderLayouts, LAYOUTS_WRAPPER_KEY, true); diff --git a/plugins/scaffolder-react/src/next/components/Form/DescriptionFieldTemplate.tsx b/plugins/scaffolder-react/src/next/components/Form/DescriptionFieldTemplate.tsx index 5f12e0f1a3..2debb44f68 100644 --- a/plugins/scaffolder-react/src/next/components/Form/DescriptionFieldTemplate.tsx +++ b/plugins/scaffolder-react/src/next/components/Form/DescriptionFieldTemplate.tsx @@ -13,8 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; - import { MarkdownContent } from '@backstage/core-components'; import Typography from '@material-ui/core/Typography'; import { makeStyles } from '@material-ui/core/styles'; diff --git a/plugins/scaffolder-react/src/next/components/Form/FieldTemplate.tsx b/plugins/scaffolder-react/src/next/components/Form/FieldTemplate.tsx index 79cac33054..ed9c6c8755 100644 --- a/plugins/scaffolder-react/src/next/components/Form/FieldTemplate.tsx +++ b/plugins/scaffolder-react/src/next/components/Form/FieldTemplate.tsx @@ -13,8 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; - import { FieldTemplateProps, FormContextType, diff --git a/plugins/scaffolder-react/src/next/components/Form/Form.tsx b/plugins/scaffolder-react/src/next/components/Form/Form.tsx index 05c8a4934f..6a6b94129a 100644 --- a/plugins/scaffolder-react/src/next/components/Form/Form.tsx +++ b/plugins/scaffolder-react/src/next/components/Form/Form.tsx @@ -15,8 +15,7 @@ */ import { withTheme } from '@rjsf/core'; -import React from 'react'; -import { PropsWithChildren } from 'react'; +import { useMemo, PropsWithChildren } from 'react'; import { FieldTemplate } from './FieldTemplate'; import { DescriptionFieldTemplate } from './DescriptionFieldTemplate'; import { FieldProps } from '@rjsf/utils'; @@ -32,7 +31,7 @@ const WrappedForm = withTheme(MuiTheme); export const Form = (props: PropsWithChildren) => { // This is where we unbreak the changes from RJSF, and make it work with our custom fields so we don't pass on this // breaking change to our users. We will look more into a better API for this in scaffolderv2. - const wrappedFields = React.useMemo( + const wrappedFields = useMemo( () => Object.fromEntries( Object.entries(props.fields ?? {}).map(([key, Component]) => [ @@ -54,7 +53,7 @@ export const Form = (props: PropsWithChildren) => { [props.fields], ); - const templates = React.useMemo( + const templates = useMemo( () => ({ FieldTemplate, DescriptionFieldTemplate, diff --git a/plugins/scaffolder-react/src/next/components/PasswordWidget/PasswordWidget.tsx b/plugins/scaffolder-react/src/next/components/PasswordWidget/PasswordWidget.tsx index 6ccd353e9e..b1dae96561 100644 --- a/plugins/scaffolder-react/src/next/components/PasswordWidget/PasswordWidget.tsx +++ b/plugins/scaffolder-react/src/next/components/PasswordWidget/PasswordWidget.tsx @@ -19,7 +19,6 @@ import { useTranslationRef } from '@backstage/core-plugin-api/alpha'; import FormHelperText from '@material-ui/core/FormHelperText'; import TextField from '@material-ui/core/TextField'; import { WidgetProps } from '@rjsf/utils'; -import React from 'react'; import { scaffolderReactTranslationRef } from '../../../translation'; diff --git a/plugins/scaffolder-react/src/next/components/ReviewState/ReviewState.test.tsx b/plugins/scaffolder-react/src/next/components/ReviewState/ReviewState.test.tsx index 7fb8ca2e3e..b5f2afc74d 100644 --- a/plugins/scaffolder-react/src/next/components/ReviewState/ReviewState.test.tsx +++ b/plugins/scaffolder-react/src/next/components/ReviewState/ReviewState.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { ReviewState } from './ReviewState'; import { render } from '@testing-library/react'; import { ParsedTemplateSchema } from '../../hooks/useTemplateSchema'; diff --git a/plugins/scaffolder-react/src/next/components/ReviewState/ReviewState.tsx b/plugins/scaffolder-react/src/next/components/ReviewState/ReviewState.tsx index 1568461fb0..b5b72dcc98 100644 --- a/plugins/scaffolder-react/src/next/components/ReviewState/ReviewState.tsx +++ b/plugins/scaffolder-react/src/next/components/ReviewState/ReviewState.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import { StructuredMetadataTable } from '@backstage/core-components'; import { JsonObject, JsonValue } from '@backstage/types'; import { Draft07 as JSONSchema } from 'json-schema-library'; diff --git a/plugins/scaffolder-react/src/next/components/ScaffolderField/ScaffolderField.tsx b/plugins/scaffolder-react/src/next/components/ScaffolderField/ScaffolderField.tsx index 60c3907ddb..9fba1d3492 100644 --- a/plugins/scaffolder-react/src/next/components/ScaffolderField/ScaffolderField.tsx +++ b/plugins/scaffolder-react/src/next/components/ScaffolderField/ScaffolderField.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, { PropsWithChildren, ReactElement } from 'react'; +import { PropsWithChildren, ReactElement } from 'react'; import { MarkdownContent } from '@backstage/core-components'; import FormControl from '@material-ui/core/FormControl'; diff --git a/plugins/scaffolder-react/src/next/components/ScaffolderPageContextMenu/ScaffolderPageContextMenu.tsx b/plugins/scaffolder-react/src/next/components/ScaffolderPageContextMenu/ScaffolderPageContextMenu.tsx index 7cc56c2d5f..8dc6f1d8ef 100644 --- a/plugins/scaffolder-react/src/next/components/ScaffolderPageContextMenu/ScaffolderPageContextMenu.tsx +++ b/plugins/scaffolder-react/src/next/components/ScaffolderPageContextMenu/ScaffolderPageContextMenu.tsx @@ -27,7 +27,7 @@ import Description from '@material-ui/icons/Description'; import Edit from '@material-ui/icons/Edit'; import List from '@material-ui/icons/List'; import MoreVert from '@material-ui/icons/MoreVert'; -import React, { useState } from 'react'; +import { SyntheticEvent, useState } from 'react'; import { usePermission } from '@backstage/plugin-permission-react'; import { taskReadPermission } from '@backstage/plugin-scaffolder-common/alpha'; import { templateManagementPermission } from '@backstage/plugin-scaffolder-common/alpha'; @@ -79,7 +79,7 @@ export function ScaffolderPageContextMenu( return null; } - const onOpen = (event: React.SyntheticEvent) => { + const onOpen = (event: SyntheticEvent) => { setAnchorEl(event.currentTarget); }; diff --git a/plugins/scaffolder-react/src/next/components/SecretWidget/SecretWidget.tsx b/plugins/scaffolder-react/src/next/components/SecretWidget/SecretWidget.tsx index 25aec236fb..f0459c190a 100644 --- a/plugins/scaffolder-react/src/next/components/SecretWidget/SecretWidget.tsx +++ b/plugins/scaffolder-react/src/next/components/SecretWidget/SecretWidget.tsx @@ -17,7 +17,7 @@ import { WidgetProps } from '@rjsf/utils'; import { useTemplateSecrets } from '@backstage/plugin-scaffolder-react'; import TextField from '@material-ui/core/TextField'; -import React, { useMemo, useState } from 'react'; +import { ChangeEvent, useMemo, useState } from 'react'; import debounce from 'lodash/debounce'; /** @@ -50,7 +50,7 @@ export const SecretWidget = ( [setSecrets, name], ); - const handleChange = (e: React.ChangeEvent) => { + const handleChange = (e: ChangeEvent) => { const newValue = e.target.value; setLocalValue(newValue); onChange(Array(newValue.length).fill('*').join('')); diff --git a/plugins/scaffolder-react/src/next/components/Stepper/ErrorListTemplate/errorListTemplate.test.tsx b/plugins/scaffolder-react/src/next/components/Stepper/ErrorListTemplate/errorListTemplate.test.tsx index d632340031..8c0b3e4019 100644 --- a/plugins/scaffolder-react/src/next/components/Stepper/ErrorListTemplate/errorListTemplate.test.tsx +++ b/plugins/scaffolder-react/src/next/components/Stepper/ErrorListTemplate/errorListTemplate.test.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import { ErrorListTemplate } from './errorListTemplate'; import { renderInTestApp } from '@backstage/test-utils'; import { ErrorListProps } from '@rjsf/utils'; diff --git a/plugins/scaffolder-react/src/next/components/Stepper/ErrorListTemplate/errorListTemplate.tsx b/plugins/scaffolder-react/src/next/components/Stepper/ErrorListTemplate/errorListTemplate.tsx index 6b664fc235..327d63b886 100644 --- a/plugins/scaffolder-react/src/next/components/Stepper/ErrorListTemplate/errorListTemplate.tsx +++ b/plugins/scaffolder-react/src/next/components/Stepper/ErrorListTemplate/errorListTemplate.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import { ErrorListProps, RJSFValidationError } from '@rjsf/utils'; import List from '@material-ui/core/List'; import ListItem from '@material-ui/core/ListItem'; diff --git a/plugins/scaffolder-react/src/next/components/Stepper/FieldOverrides/DescriptionField.tsx b/plugins/scaffolder-react/src/next/components/Stepper/FieldOverrides/DescriptionField.tsx index eded38beee..fdece69fe1 100644 --- a/plugins/scaffolder-react/src/next/components/Stepper/FieldOverrides/DescriptionField.tsx +++ b/plugins/scaffolder-react/src/next/components/Stepper/FieldOverrides/DescriptionField.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { MarkdownContent } from '@backstage/core-components'; import { FieldProps } from '@rjsf/utils'; diff --git a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.test.tsx b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.test.tsx index c1d24ac6c6..af9117ccf5 100644 --- a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.test.tsx +++ b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.test.tsx @@ -17,7 +17,7 @@ import { renderInTestApp } from '@backstage/test-utils'; import { JsonValue } from '@backstage/types'; import type { RJSFValidationError } from '@rjsf/utils'; import { act, fireEvent, waitFor } from '@testing-library/react'; -import React, { useEffect } from 'react'; +import { useEffect } from 'react'; import { FieldExtensionComponentProps } from '../../../extensions'; import { LayoutTemplate } from '../../../layouts'; diff --git a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx index 7508985a5c..6715eb0e1e 100644 --- a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx +++ b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx @@ -34,7 +34,7 @@ import { ErrorSchema } from '@rjsf/utils'; import { customizeValidator } from '@rjsf/validator-ajv8'; import ajvErrors from 'ajv-errors'; import { merge } from 'lodash'; -import React, { +import { ComponentType, useCallback, useMemo, diff --git a/plugins/scaffolder-react/src/next/components/TaskLogStream/TaskLogStream.test.tsx b/plugins/scaffolder-react/src/next/components/TaskLogStream/TaskLogStream.test.tsx index e8f9e67e96..4466abdbd9 100644 --- a/plugins/scaffolder-react/src/next/components/TaskLogStream/TaskLogStream.test.tsx +++ b/plugins/scaffolder-react/src/next/components/TaskLogStream/TaskLogStream.test.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ import { renderInTestApp } from '@backstage/test-utils'; -import React, { ReactNode } from 'react'; +import { ReactNode } from 'react'; import { TaskLogStream } from './TaskLogStream'; // The inside needs mocking to render in jsdom diff --git a/plugins/scaffolder-react/src/next/components/TaskLogStream/TaskLogStream.tsx b/plugins/scaffolder-react/src/next/components/TaskLogStream/TaskLogStream.tsx index 4ce1df7a29..a0c4ce94cd 100644 --- a/plugins/scaffolder-react/src/next/components/TaskLogStream/TaskLogStream.tsx +++ b/plugins/scaffolder-react/src/next/components/TaskLogStream/TaskLogStream.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import { LogViewer } from '@backstage/core-components'; import { makeStyles } from '@material-ui/core/styles'; diff --git a/plugins/scaffolder-react/src/next/components/TaskSteps/StepIcon.tsx b/plugins/scaffolder-react/src/next/components/TaskSteps/StepIcon.tsx index c397b09a52..a472235863 100644 --- a/plugins/scaffolder-react/src/next/components/TaskSteps/StepIcon.tsx +++ b/plugins/scaffolder-react/src/next/components/TaskSteps/StepIcon.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import CircularProgress from '@material-ui/core/CircularProgress'; import { StepIconProps } from '@material-ui/core/StepIcon'; import { makeStyles } from '@material-ui/core/styles'; diff --git a/plugins/scaffolder-react/src/next/components/TaskSteps/StepTime.test.tsx b/plugins/scaffolder-react/src/next/components/TaskSteps/StepTime.test.tsx index 185d2fa7fb..d1d1fe1069 100644 --- a/plugins/scaffolder-react/src/next/components/TaskSteps/StepTime.test.tsx +++ b/plugins/scaffolder-react/src/next/components/TaskSteps/StepTime.test.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import { StepTime } from './StepTime'; import { render, act } from '@testing-library/react'; diff --git a/plugins/scaffolder-react/src/next/components/TaskSteps/StepTime.tsx b/plugins/scaffolder-react/src/next/components/TaskSteps/StepTime.tsx index ab236965c2..3a350094ed 100644 --- a/plugins/scaffolder-react/src/next/components/TaskSteps/StepTime.tsx +++ b/plugins/scaffolder-react/src/next/components/TaskSteps/StepTime.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, { useCallback, useState } from 'react'; +import { useCallback, useState } from 'react'; import useInterval from 'react-use/esm/useInterval'; import { DateTime, Interval } from 'luxon'; import humanizeDuration from 'humanize-duration'; diff --git a/plugins/scaffolder-react/src/next/components/TaskSteps/TaskBorder.test.tsx b/plugins/scaffolder-react/src/next/components/TaskSteps/TaskBorder.test.tsx index f3a59ad344..d9030bd05b 100644 --- a/plugins/scaffolder-react/src/next/components/TaskSteps/TaskBorder.test.tsx +++ b/plugins/scaffolder-react/src/next/components/TaskSteps/TaskBorder.test.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import { TaskBorder } from './TaskBorder'; import { render } from '@testing-library/react'; diff --git a/plugins/scaffolder-react/src/next/components/TaskSteps/TaskBorder.tsx b/plugins/scaffolder-react/src/next/components/TaskSteps/TaskBorder.tsx index a33cdad49e..468d975933 100644 --- a/plugins/scaffolder-react/src/next/components/TaskSteps/TaskBorder.tsx +++ b/plugins/scaffolder-react/src/next/components/TaskSteps/TaskBorder.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import LinearProgress from '@material-ui/core/LinearProgress'; import { makeStyles } from '@material-ui/core/styles'; diff --git a/plugins/scaffolder-react/src/next/components/TaskSteps/TaskSteps.test.tsx b/plugins/scaffolder-react/src/next/components/TaskSteps/TaskSteps.test.tsx index cbc87c2d53..a6935c0d9c 100644 --- a/plugins/scaffolder-react/src/next/components/TaskSteps/TaskSteps.test.tsx +++ b/plugins/scaffolder-react/src/next/components/TaskSteps/TaskSteps.test.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import { TaskSteps } from './TaskSteps'; import { renderInTestApp } from '@backstage/test-utils'; import { ScaffolderTaskStatus } from '../../../api'; diff --git a/plugins/scaffolder-react/src/next/components/TaskSteps/TaskSteps.tsx b/plugins/scaffolder-react/src/next/components/TaskSteps/TaskSteps.tsx index b391e6fce8..33a6da19bb 100644 --- a/plugins/scaffolder-react/src/next/components/TaskSteps/TaskSteps.tsx +++ b/plugins/scaffolder-react/src/next/components/TaskSteps/TaskSteps.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import MuiStepper from '@material-ui/core/Stepper'; import MuiStep from '@material-ui/core/Step'; import MuiStepButton from '@material-ui/core/StepButton'; diff --git a/plugins/scaffolder-react/src/next/components/TemplateCard/CardHeader.test.tsx b/plugins/scaffolder-react/src/next/components/TemplateCard/CardHeader.test.tsx index 3c7eef5f8d..4836f6f18c 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateCard/CardHeader.test.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateCard/CardHeader.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { fireEvent } from '@testing-library/react'; import { CardHeader } from './CardHeader'; import { ThemeProvider } from '@material-ui/core/styles'; diff --git a/plugins/scaffolder-react/src/next/components/TemplateCard/CardHeader.tsx b/plugins/scaffolder-react/src/next/components/TemplateCard/CardHeader.tsx index 5e5c6fe8bf..72ec34c661 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateCard/CardHeader.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateCard/CardHeader.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { makeStyles, Theme, useTheme } from '@material-ui/core/styles'; import { ItemCardHeader } from '@backstage/core-components'; import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common'; diff --git a/plugins/scaffolder-react/src/next/components/TemplateCard/CardLink.tsx b/plugins/scaffolder-react/src/next/components/TemplateCard/CardLink.tsx index 4aa63e4555..7d0f93150e 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateCard/CardLink.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateCard/CardLink.tsx @@ -17,7 +17,6 @@ import { IconComponent } from '@backstage/core-plugin-api'; import { Link } from '@backstage/core-components'; import { makeStyles } from '@material-ui/core/styles'; -import React from 'react'; export interface CardLinkProps { icon: IconComponent; diff --git a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCard.test.tsx b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCard.test.tsx index e25952131b..af513ac52a 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCard.test.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCard.test.tsx @@ -25,7 +25,6 @@ import { TestApiProvider, } from '@backstage/test-utils'; import { TemplateCard } from './TemplateCard'; -import React from 'react'; import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common'; import { RELATION_OWNED_BY } from '@backstage/catalog-model'; import { fireEvent } from '@testing-library/react'; diff --git a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCard.tsx b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCard.tsx index d8057b9867..377ee0fa50 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCard.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCard.tsx @@ -24,7 +24,7 @@ import CardContent from '@material-ui/core/CardContent'; import Divider from '@material-ui/core/Divider'; import Grid from '@material-ui/core/Grid'; import { makeStyles, Theme } from '@material-ui/core/styles'; -import React, { useCallback } from 'react'; +import { useCallback } from 'react'; import { CardHeader } from './CardHeader'; import { usePermission } from '@backstage/plugin-permission-react'; import { taskCreatePermission } from '@backstage/plugin-scaffolder-common/alpha'; diff --git a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardActions.tsx b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardActions.tsx index 69534acd4d..a9aca828eb 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardActions.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardActions.tsx @@ -19,7 +19,6 @@ import { useTranslationRef } from '@backstage/frontend-plugin-api'; import { EntityRefLinks } from '@backstage/plugin-catalog-react'; import Button from '@material-ui/core/Button'; import { makeStyles, Theme } from '@material-ui/core/styles'; -import React from 'react'; import { scaffolderReactTranslationRef } from '../../../translation'; diff --git a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardContent.tsx b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardContent.tsx index d46b5e032e..74b54658bc 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardContent.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardContent.tsx @@ -20,7 +20,6 @@ import type { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common' import Box from '@material-ui/core/Box'; import Grid from '@material-ui/core/Grid'; import { makeStyles } from '@material-ui/core/styles'; -import React from 'react'; import { scaffolderReactTranslationRef } from '../../../translation'; diff --git a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardLinks.tsx b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardLinks.tsx index f626875818..f78d0f3af8 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardLinks.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardLinks.tsx @@ -20,7 +20,6 @@ import Divider from '@material-ui/core/Divider'; import Grid from '@material-ui/core/Grid'; import { makeStyles, Theme } from '@material-ui/core/styles'; import LanguageIcon from '@material-ui/icons/Language'; -import React from 'react'; import { CardLink } from './CardLink'; const useStyles = makeStyles({}); diff --git a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardTags.tsx b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardTags.tsx index 88550e2104..9a0bfc4e9b 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardTags.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCardTags.tsx @@ -18,7 +18,6 @@ import type { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common' import Chip from '@material-ui/core/Chip'; import Divider from '@material-ui/core/Divider'; import Grid from '@material-ui/core/Grid'; -import React from 'react'; /** * The Props for the {@link TemplateCardTags} component diff --git a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateDetailButton.tsx b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateDetailButton.tsx index 6ecfc2a1e9..f79f21dfc8 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateDetailButton.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateDetailButton.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import Tooltip from '@material-ui/core/Tooltip'; import IconButton from '@material-ui/core/IconButton'; import Typography from '@material-ui/core/Typography'; diff --git a/plugins/scaffolder-react/src/next/components/TemplateCategoryPicker/TemplateCategoryPicker.test.tsx b/plugins/scaffolder-react/src/next/components/TemplateCategoryPicker/TemplateCategoryPicker.test.tsx index f3a6a99c42..cfbe8a40b4 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateCategoryPicker/TemplateCategoryPicker.test.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateCategoryPicker/TemplateCategoryPicker.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { useEntityTypeFilter } from '@backstage/plugin-catalog-react'; import { TemplateCategoryPicker } from './TemplateCategoryPicker'; import { renderInTestApp, TestApiProvider } from '@backstage/test-utils'; diff --git a/plugins/scaffolder-react/src/next/components/TemplateCategoryPicker/TemplateCategoryPicker.tsx b/plugins/scaffolder-react/src/next/components/TemplateCategoryPicker/TemplateCategoryPicker.tsx index 9bfe3722e6..762eec3058 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateCategoryPicker/TemplateCategoryPicker.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateCategoryPicker/TemplateCategoryPicker.tsx @@ -29,7 +29,7 @@ import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; import Autocomplete from '@material-ui/lab/Autocomplete'; import capitalize from 'lodash/capitalize'; -import React, { ReactNode } from 'react'; +import { ReactNode } from 'react'; import { scaffolderReactTranslationRef } from '../../../translation'; diff --git a/plugins/scaffolder-react/src/next/components/TemplateGroup/TemplateGroup.test.tsx b/plugins/scaffolder-react/src/next/components/TemplateGroup/TemplateGroup.test.tsx index 8d8ae718dc..0d1f2df18d 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateGroup/TemplateGroup.test.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateGroup/TemplateGroup.test.tsx @@ -15,7 +15,6 @@ */ jest.mock('../TemplateCard', () => ({ TemplateCard: jest.fn(() => null) })); -import React from 'react'; import { TemplateGroup } from './TemplateGroup'; import { render } from '@testing-library/react'; import { TemplateCard } from '../TemplateCard'; diff --git a/plugins/scaffolder-react/src/next/components/TemplateGroup/TemplateGroup.tsx b/plugins/scaffolder-react/src/next/components/TemplateGroup/TemplateGroup.tsx index 215ec2827e..a70b822d13 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateGroup/TemplateGroup.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateGroup/TemplateGroup.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common'; -import React from 'react'; +import { ReactNode, ComponentType } from 'react'; import { Content, ContentHeader, @@ -38,9 +38,9 @@ export interface TemplateGroupProps { }[]; }[]; onSelected: (template: TemplateEntityV1beta3) => void; - title: React.ReactNode; + title: ReactNode; components?: { - CardComponent?: React.ComponentType; + CardComponent?: ComponentType; }; } diff --git a/plugins/scaffolder-react/src/next/components/TemplateGroups/TemplateGroups.test.tsx b/plugins/scaffolder-react/src/next/components/TemplateGroups/TemplateGroups.test.tsx index 66c9d01ffd..feab3e30de 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateGroups/TemplateGroups.test.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateGroups/TemplateGroups.test.tsx @@ -22,7 +22,6 @@ jest.mock('../TemplateGroup/TemplateGroup', () => ({ TemplateGroup: jest.fn(() => null), })); -import React from 'react'; import { useEntityList } from '@backstage/plugin-catalog-react'; import { TemplateGroups } from './TemplateGroups'; import { renderInTestApp, TestApiProvider } from '@backstage/test-utils'; diff --git a/plugins/scaffolder-react/src/next/components/TemplateGroups/TemplateGroups.tsx b/plugins/scaffolder-react/src/next/components/TemplateGroups/TemplateGroups.tsx index aeeb268d53..a0070765fe 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateGroups/TemplateGroups.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateGroups/TemplateGroups.tsx @@ -22,7 +22,7 @@ import { } from '@backstage/plugin-scaffolder-common'; import { TemplateGroupFilter } from '@backstage/plugin-scaffolder-react'; import Typography from '@material-ui/core/Typography'; -import React, { useCallback } from 'react'; +import { ComponentType, useCallback } from 'react'; import { TemplateGroup } from '../TemplateGroup/TemplateGroup'; @@ -32,7 +32,7 @@ import { TemplateGroup } from '../TemplateGroup/TemplateGroup'; export interface TemplateGroupsProps { groups: TemplateGroupFilter[]; templateFilter?: (entity: TemplateEntityV1beta3) => boolean; - TemplateCardComponent?: React.ComponentType<{ + TemplateCardComponent?: ComponentType<{ template: TemplateEntityV1beta3; }>; onTemplateSelected?: (template: TemplateEntityV1beta3) => void; diff --git a/plugins/scaffolder-react/src/next/components/TemplateOutputs/DefaultTemplateOutputs.test.tsx b/plugins/scaffolder-react/src/next/components/TemplateOutputs/DefaultTemplateOutputs.test.tsx index cea00b15b2..cdffb90074 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateOutputs/DefaultTemplateOutputs.test.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateOutputs/DefaultTemplateOutputs.test.tsx @@ -17,7 +17,6 @@ import { entityRouteRef } from '@backstage/plugin-catalog-react'; import { renderInTestApp } from '@backstage/test-utils'; import { fireEvent } from '@testing-library/react'; -import React from 'react'; import { act } from 'react-dom/test-utils'; import { DefaultTemplateOutputs } from '.'; diff --git a/plugins/scaffolder-react/src/next/components/TemplateOutputs/DefaultTemplateOutputs.tsx b/plugins/scaffolder-react/src/next/components/TemplateOutputs/DefaultTemplateOutputs.tsx index 0ba2906054..cfe3d57e74 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateOutputs/DefaultTemplateOutputs.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateOutputs/DefaultTemplateOutputs.tsx @@ -21,7 +21,7 @@ import { } from '@backstage/plugin-scaffolder-react'; import Box from '@material-ui/core/Box'; import Paper from '@material-ui/core/Paper'; -import React, { useEffect, useMemo, useState } from 'react'; +import { useEffect, useMemo, useState } from 'react'; import { scaffolderReactTranslationRef } from '../../../translation'; import { LinkOutputs } from './LinkOutputs'; diff --git a/plugins/scaffolder-react/src/next/components/TemplateOutputs/LinkOutputs.tsx b/plugins/scaffolder-react/src/next/components/TemplateOutputs/LinkOutputs.tsx index 59c6c6a49a..ed6cd5c6b7 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateOutputs/LinkOutputs.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateOutputs/LinkOutputs.tsx @@ -17,7 +17,6 @@ import { IconComponent, useApp, useRouteRef } from '@backstage/core-plugin-api'; import { entityRouteRef } from '@backstage/plugin-catalog-react'; import Button from '@material-ui/core/Button'; import { makeStyles } from '@material-ui/core/styles'; -import React from 'react'; import LinkIcon from '@material-ui/icons/Link'; import { parseEntityRef } from '@backstage/catalog-model'; import { Link } from '@backstage/core-components'; diff --git a/plugins/scaffolder-react/src/next/components/TemplateOutputs/TextOutputs.tsx b/plugins/scaffolder-react/src/next/components/TemplateOutputs/TextOutputs.tsx index 5da1dab476..fc0d31d90f 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateOutputs/TextOutputs.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateOutputs/TextOutputs.tsx @@ -16,7 +16,6 @@ import { IconComponent, useApp } from '@backstage/core-plugin-api'; import Button from '@material-ui/core/Button'; import DescriptionIcon from '@material-ui/icons/Description'; -import React from 'react'; import { ScaffolderTaskOutput } from '../../../api'; export const TextOutputs = (props: { diff --git a/plugins/scaffolder-react/src/next/components/Workflow/Workflow.test.tsx b/plugins/scaffolder-react/src/next/components/Workflow/Workflow.test.tsx index 243b9b7e79..7e0a201e99 100644 --- a/plugins/scaffolder-react/src/next/components/Workflow/Workflow.test.tsx +++ b/plugins/scaffolder-react/src/next/components/Workflow/Workflow.test.tsx @@ -21,7 +21,6 @@ import { TestApiRegistry, } from '@backstage/test-utils'; import { act, fireEvent } from '@testing-library/react'; -import React from 'react'; import { Workflow } from './Workflow'; import { analyticsApiRef } from '@backstage/core-plugin-api'; import { ScaffolderApi, scaffolderApiRef } from '../../../api'; diff --git a/plugins/scaffolder-react/src/next/components/Workflow/Workflow.tsx b/plugins/scaffolder-react/src/next/components/Workflow/Workflow.tsx index 73e48cd14d..2aa4ee9b2d 100644 --- a/plugins/scaffolder-react/src/next/components/Workflow/Workflow.tsx +++ b/plugins/scaffolder-react/src/next/components/Workflow/Workflow.tsx @@ -26,7 +26,7 @@ import { useTranslationRef } from '@backstage/frontend-plugin-api'; import { ReviewStepProps } from '@backstage/plugin-scaffolder-react'; import { JsonValue } from '@backstage/types'; import { makeStyles } from '@material-ui/core/styles'; -import React, { useCallback, useEffect } from 'react'; +import { ComponentType, useCallback, useEffect } from 'react'; import { SecretsContextProvider } from '../../../secrets/SecretsContext'; import { scaffolderReactTranslationRef } from '../../../translation'; @@ -56,7 +56,7 @@ export type WorkflowProps = { namespace: string; templateName: string; components?: { - ReviewStepComponent?: React.ComponentType; + ReviewStepComponent?: ComponentType; }; onError(error: Error | undefined): JSX.Element | null; } & Pick< diff --git a/plugins/scaffolder-react/src/next/hooks/useFilteredSchemaProperties.test.tsx b/plugins/scaffolder-react/src/next/hooks/useFilteredSchemaProperties.test.tsx index 3e568fa7bd..78c2064c4b 100644 --- a/plugins/scaffolder-react/src/next/hooks/useFilteredSchemaProperties.test.tsx +++ b/plugins/scaffolder-react/src/next/hooks/useFilteredSchemaProperties.test.tsx @@ -18,7 +18,6 @@ import { renderHook } from '@testing-library/react'; import { useFilteredSchemaProperties } from './useFilteredSchemaProperties'; import { TemplateParameterSchema } from '../../types'; import { TestApiProvider } from '@backstage/test-utils'; -import React from 'react'; import { featureFlagsApiRef } from '@backstage/core-plugin-api'; const mockFeatureFlagApi = { diff --git a/plugins/scaffolder-react/src/next/hooks/useTemplateSchema.test.tsx b/plugins/scaffolder-react/src/next/hooks/useTemplateSchema.test.tsx index d1d86ab977..704a7d2243 100644 --- a/plugins/scaffolder-react/src/next/hooks/useTemplateSchema.test.tsx +++ b/plugins/scaffolder-react/src/next/hooks/useTemplateSchema.test.tsx @@ -16,7 +16,7 @@ import { useTemplateSchema } from './useTemplateSchema'; import { renderHook } from '@testing-library/react'; import { TestApiProvider } from '@backstage/test-utils'; -import React from 'react'; +import { PropsWithChildren } from 'react'; import { featureFlagsApiRef } from '@backstage/core-plugin-api'; import { TemplateParameterSchema } from '../../types'; @@ -50,7 +50,7 @@ describe('useTemplateSchema', () => { }; const { result } = renderHook(() => useTemplateSchema(manifest), { - wrapper: ({ children }: React.PropsWithChildren<{}>) => ( + wrapper: ({ children }: PropsWithChildren<{}>) => ( false }]]} > @@ -117,7 +117,7 @@ describe('useTemplateSchema', () => { }; const { result } = renderHook(() => useTemplateSchema(manifest), { - wrapper: ({ children }: React.PropsWithChildren<{}>) => ( + wrapper: ({ children }: PropsWithChildren<{}>) => ( false }]]} > @@ -161,7 +161,7 @@ describe('useTemplateSchema', () => { }; const { result } = renderHook(() => useTemplateSchema(manifest), { - wrapper: ({ children }: React.PropsWithChildren<{}>) => ( + wrapper: ({ children }: PropsWithChildren<{}>) => ( true }]]} > @@ -212,7 +212,7 @@ describe('useTemplateSchema', () => { }; const { result } = renderHook(() => useTemplateSchema(manifest), { - wrapper: ({ children }: React.PropsWithChildren<{}>) => ( + wrapper: ({ children }: PropsWithChildren<{}>) => ( false }]]} > @@ -250,7 +250,7 @@ describe('useTemplateSchema', () => { }; const { result } = renderHook(() => useTemplateSchema(manifest), { - wrapper: ({ children }: React.PropsWithChildren<{}>) => ( + wrapper: ({ children }: PropsWithChildren<{}>) => ( false }]]} > @@ -354,7 +354,7 @@ describe('useTemplateSchema', () => { }; const { result } = renderHook(() => useTemplateSchema(manifest), { - wrapper: ({ children }: React.PropsWithChildren<{}>) => ( + wrapper: ({ children }: PropsWithChildren<{}>) => ( false }]]} > diff --git a/plugins/scaffolder-react/src/next/hooks/useTemplateTimeSaved.test.tsx b/plugins/scaffolder-react/src/next/hooks/useTemplateTimeSaved.test.tsx index ed54335c7e..1dac7bdf81 100644 --- a/plugins/scaffolder-react/src/next/hooks/useTemplateTimeSaved.test.tsx +++ b/plugins/scaffolder-react/src/next/hooks/useTemplateTimeSaved.test.tsx @@ -16,7 +16,7 @@ import { useTemplateTimeSavedMinutes } from './useTemplateTimeSaved'; import { renderHook, waitFor } from '@testing-library/react'; import { TestApiProvider } from '@backstage/test-utils'; -import React from 'react'; +import { PropsWithChildren } from 'react'; import { catalogApiRef } from '@backstage/plugin-catalog-react'; import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common'; @@ -56,7 +56,7 @@ describe('useTemplateTimeSavedMinutes', () => { const { result } = renderHook( () => useTemplateTimeSavedMinutes(templateRef), { - wrapper: ({ children }: React.PropsWithChildren<{}>) => ( + wrapper: ({ children }: PropsWithChildren<{}>) => ( template }]]} > diff --git a/plugins/scaffolder-react/src/next/hooks/useTransformSchemaToProps.test.tsx b/plugins/scaffolder-react/src/next/hooks/useTransformSchemaToProps.test.tsx index 4138c8cde0..2df893b74f 100644 --- a/plugins/scaffolder-react/src/next/hooks/useTransformSchemaToProps.test.tsx +++ b/plugins/scaffolder-react/src/next/hooks/useTransformSchemaToProps.test.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, { PropsWithChildren } from 'react'; +import { PropsWithChildren } from 'react'; import { renderHook } from '@testing-library/react'; import { TestApiProvider } from '@backstage/test-utils'; import { type ParsedTemplateSchema } from './useTemplateSchema'; diff --git a/plugins/scaffolder-react/src/secrets/SecretsContext.test.tsx b/plugins/scaffolder-react/src/secrets/SecretsContext.test.tsx index 5252cf77bd..fb080a4cf0 100644 --- a/plugins/scaffolder-react/src/secrets/SecretsContext.test.tsx +++ b/plugins/scaffolder-react/src/secrets/SecretsContext.test.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; +import { PropsWithChildren } from 'react'; import { useTemplateSecrets, SecretsContextProvider } from './SecretsContext'; import { renderHook, act } from '@testing-library/react'; @@ -24,7 +24,7 @@ describe('SecretsContext', () => { hook: useTemplateSecrets(), }), { - wrapper: ({ children }: React.PropsWithChildren<{}>) => ( + wrapper: ({ children }: PropsWithChildren<{}>) => ( {children} ), }, @@ -42,7 +42,7 @@ describe('SecretsContext', () => { hook: useTemplateSecrets(), }), { - wrapper: ({ children }: React.PropsWithChildren<{}>) => ( + wrapper: ({ children }: PropsWithChildren<{}>) => ( {children} diff --git a/plugins/scaffolder-react/src/secrets/SecretsContext.tsx b/plugins/scaffolder-react/src/secrets/SecretsContext.tsx index 64b25d0e8f..127f86201f 100644 --- a/plugins/scaffolder-react/src/secrets/SecretsContext.tsx +++ b/plugins/scaffolder-react/src/secrets/SecretsContext.tsx @@ -17,7 +17,9 @@ import { createVersionedContext, createVersionedValueMap, } from '@backstage/version-bridge'; -import React, { +import { + SetStateAction, + Dispatch, useState, useCallback, useContext, @@ -29,7 +31,7 @@ import React, { */ type SecretsContextContents = { secrets: Record; - setSecrets: React.Dispatch>>; + setSecrets: Dispatch>>; }; /** diff --git a/plugins/scaffolder/dev/index.tsx b/plugins/scaffolder/dev/index.tsx index 625e29629c..3708685720 100644 --- a/plugins/scaffolder/dev/index.tsx +++ b/plugins/scaffolder/dev/index.tsx @@ -20,7 +20,6 @@ import { starredEntitiesApiRef, MockStarredEntitiesApi, } from '@backstage/plugin-catalog-react'; -import React from 'react'; import { ScaffolderClient } from '../src'; import { scaffolderApiRef } from '@backstage/plugin-scaffolder-react'; import { ScaffolderPage } from '../src/plugin'; diff --git a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/CustomFieldExplorer.tsx b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/CustomFieldExplorer.tsx index 5ae44ba868..ebb6a383d6 100644 --- a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/CustomFieldExplorer.tsx +++ b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/CustomFieldExplorer.tsx @@ -21,7 +21,7 @@ import CardContent from '@material-ui/core/CardContent'; import CardHeader from '@material-ui/core/CardHeader'; import { makeStyles } from '@material-ui/core/styles'; import CodeMirror from '@uiw/react-codemirror'; -import React, { useCallback, useMemo, useState } from 'react'; +import { useCallback, useMemo, useState } from 'react'; import yaml from 'yaml'; import { Form } from '@backstage/plugin-scaffolder-react/alpha'; import { TemplateEditorForm } from './TemplateEditorForm'; diff --git a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/CustomFieldPlaygroud.tsx b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/CustomFieldPlaygroud.tsx index 24e39ee8fa..0a5ffda3d4 100644 --- a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/CustomFieldPlaygroud.tsx +++ b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/CustomFieldPlaygroud.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useCallback, useMemo, useState } from 'react'; +import { useCallback, useMemo, useState } from 'react'; import yaml from 'yaml'; import validator from '@rjsf/validator-ajv8'; import CodeMirror from '@uiw/react-codemirror'; diff --git a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/CustomFieldsPage.test.tsx b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/CustomFieldsPage.test.tsx index a6c5ff89d3..cbbd60048d 100644 --- a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/CustomFieldsPage.test.tsx +++ b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/CustomFieldsPage.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { screen } from '@testing-library/react'; import { renderInTestApp, TestApiProvider } from '@backstage/test-utils'; import { catalogApiRef } from '@backstage/plugin-catalog-react'; diff --git a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/CustomFieldsPage.tsx b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/CustomFieldsPage.tsx index f49b2ddf05..d7f6525f47 100644 --- a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/CustomFieldsPage.tsx +++ b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/CustomFieldsPage.tsx @@ -14,8 +14,6 @@ * limitations under the License. */ -import React from 'react'; - import { Page, Header, Content } from '@backstage/core-components'; import { useRouteRef } from '@backstage/core-plugin-api'; import { useTranslationRef } from '@backstage/core-plugin-api/alpha'; diff --git a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/DirectoryEditorContext.tsx b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/DirectoryEditorContext.tsx index bca2e04fde..ded188ed30 100644 --- a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/DirectoryEditorContext.tsx +++ b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/DirectoryEditorContext.tsx @@ -16,7 +16,7 @@ import { ErrorPanel } from '@backstage/core-components'; import { useAsync, useRerender } from '@react-hookz/web'; -import React, { createContext, ReactNode, useContext, useEffect } from 'react'; +import { createContext, ReactNode, useContext, useEffect } from 'react'; import { TemplateDirectoryAccess, TemplateFileAccess, diff --git a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/DryRunContext.test.tsx b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/DryRunContext.test.tsx index e0eae0a0c8..5f2187f083 100644 --- a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/DryRunContext.test.tsx +++ b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/DryRunContext.test.tsx @@ -29,7 +29,7 @@ import { SecretsContextProvider, } from '@backstage/plugin-scaffolder-react'; import { renderHook } from '@testing-library/react'; -import React from 'react'; +import { PropsWithChildren } from 'react'; import { formDecoratorsApiRef } from '../../api'; window.TextEncoder = TextEncoder; @@ -71,7 +71,7 @@ describe('DryRunProvider', () => { hook: useDryRun(), }), { - wrapper: ({ children }: React.PropsWithChildren<{}>) => ( + wrapper: ({ children }: PropsWithChildren<{}>) => ( ({ diff --git a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/DryRunResults/DryRunResultsView.test.tsx b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/DryRunResults/DryRunResultsView.test.tsx index 4b74f99622..e8f11ccfe2 100644 --- a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/DryRunResults/DryRunResultsView.test.tsx +++ b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/DryRunResults/DryRunResultsView.test.tsx @@ -18,7 +18,7 @@ import { entityRouteRef } from '@backstage/plugin-catalog-react'; import { renderInTestApp, TestApiProvider } from '@backstage/test-utils'; import { screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import React, { ReactNode, useEffect } from 'react'; +import { ReactNode, useEffect } from 'react'; import { scaffolderApiRef, SecretsContextProvider, diff --git a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/DryRunResults/DryRunResultsView.tsx b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/DryRunResults/DryRunResultsView.tsx index 422cd6faa9..d8a76e2553 100644 --- a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/DryRunResults/DryRunResultsView.tsx +++ b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/DryRunResults/DryRunResultsView.tsx @@ -23,7 +23,7 @@ import { makeStyles } from '@material-ui/core/styles'; import Tab from '@material-ui/core/Tab'; import Tabs from '@material-ui/core/Tabs'; import CodeMirror from '@uiw/react-codemirror'; -import React, { useEffect, useMemo, useState } from 'react'; +import { useEffect, useMemo, useState } from 'react'; import { useDryRun } from '../DryRunContext'; import { DryRunResultsSplitView } from './DryRunResultsSplitView'; import { FileBrowser } from '../../../../components/FileBrowser'; diff --git a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/DryRunResults/IconLink.tsx b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/DryRunResults/IconLink.tsx index 079294cc50..d1bafca924 100644 --- a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/DryRunResults/IconLink.tsx +++ b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/DryRunResults/IconLink.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; import Grid from '@material-ui/core/Grid'; diff --git a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/DryRunResults/TaskPageLinks.tsx b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/DryRunResults/TaskPageLinks.tsx index 5f62509551..d043ff988f 100644 --- a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/DryRunResults/TaskPageLinks.tsx +++ b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/DryRunResults/TaskPageLinks.tsx @@ -18,7 +18,6 @@ import { parseEntityRef } from '@backstage/catalog-model'; import { entityRouteRef } from '@backstage/plugin-catalog-react'; import Box from '@material-ui/core/Box'; import LanguageIcon from '@material-ui/icons/Language'; -import React from 'react'; import { ScaffolderTaskOutput } from '@backstage/plugin-scaffolder-react'; import { IconLink } from './IconLink'; import { IconComponent, useApp, useRouteRef } from '@backstage/core-plugin-api'; diff --git a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/DryRunResults/TaskStatusStepper.tsx b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/DryRunResults/TaskStatusStepper.tsx index ec7d734ca4..8c56c19ea1 100644 --- a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/DryRunResults/TaskStatusStepper.tsx +++ b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/DryRunResults/TaskStatusStepper.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, { useState } from 'react'; +import { useState } from 'react'; import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'; import { memo } from 'react'; import Step from '@material-ui/core/Step'; diff --git a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditor.tsx b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditor.tsx index df941c5931..b339be18e3 100644 --- a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditor.tsx +++ b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditor.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, { useCallback, useState } from 'react'; +import { useCallback, useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { useRouteRef } from '@backstage/core-plugin-api'; diff --git a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorBrowser.test.tsx b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorBrowser.test.tsx index 958548a131..427f679188 100644 --- a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorBrowser.test.tsx +++ b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorBrowser.test.tsx @@ -16,7 +16,6 @@ import { renderInTestApp } from '@backstage/test-utils'; import { screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import React from 'react'; import { MockFileSystemAccess } from '../../../lib/filesystem/MockFileSystemAccess'; import { DirectoryEditorProvider } from './DirectoryEditorContext'; import { TemplateEditorBrowser } from './TemplateEditorBrowser'; diff --git a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorBrowser.tsx b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorBrowser.tsx index 8be58e45df..8e01dd5793 100644 --- a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorBrowser.tsx +++ b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorBrowser.tsx @@ -21,7 +21,6 @@ import { makeStyles } from '@material-ui/core/styles'; import CloseIcon from '@material-ui/icons/Close'; import RefreshIcon from '@material-ui/icons/Refresh'; import SaveIcon from '@material-ui/icons/Save'; -import React from 'react'; import { useDirectoryEditor } from './DirectoryEditorContext'; import { FileBrowser } from '../../../components/FileBrowser'; import { useTranslationRef } from '@backstage/core-plugin-api/alpha'; diff --git a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorForm.tsx b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorForm.tsx index 4ae87a77e9..36a528597e 100644 --- a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorForm.tsx +++ b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorForm.tsx @@ -18,7 +18,7 @@ import { JsonObject, JsonValue } from '@backstage/types'; import { makeStyles } from '@material-ui/core/styles'; import Paper from '@material-ui/core/Paper'; import Typography from '@material-ui/core/Typography'; -import React, { Component, ReactNode, useMemo, useState } from 'react'; +import { Component, ReactNode, useMemo, useState } from 'react'; import useDebounce from 'react-use/esm/useDebounce'; import yaml from 'yaml'; import { useTranslationRef } from '@backstage/frontend-plugin-api'; diff --git a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorIntro.tsx b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorIntro.tsx index f0406a58fa..486a738773 100644 --- a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorIntro.tsx +++ b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorIntro.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React from 'react'; +import { MouseEventHandler } from 'react'; import Card from '@material-ui/core/Card'; import CardActionArea from '@material-ui/core/CardActionArea'; import CardContent from '@material-ui/core/CardContent'; @@ -88,7 +88,7 @@ function ActionCard(props: { title: string; description: string; Icon: typeof SvgIcon; - action?: React.MouseEventHandler; + action?: MouseEventHandler; requireLoad?: boolean; }) { const supportsLoad = props.requireLoad diff --git a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorLayout.tsx b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorLayout.tsx index f77881e79a..242befe2b4 100644 --- a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorLayout.tsx +++ b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorLayout.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { PropsWithChildren } from 'react'; +import { PropsWithChildren } from 'react'; import { WithStyles, withStyles } from '@material-ui/core/styles'; export const TemplateEditorLayout = withStyles( diff --git a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorPage.test.tsx b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorPage.test.tsx index d23f8fe5ed..122e12ac82 100644 --- a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorPage.test.tsx +++ b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorPage.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { screen } from '@testing-library/react'; import { renderInTestApp, TestApiProvider } from '@backstage/test-utils'; import { catalogApiRef } from '@backstage/plugin-catalog-react'; diff --git a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorPage.tsx b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorPage.tsx index b17cc403f1..13439c666f 100644 --- a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorPage.tsx +++ b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorPage.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import { Content, Header, Page } from '@backstage/core-components'; import { useRouteRef } from '@backstage/core-plugin-api'; diff --git a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorTextArea.tsx b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorTextArea.tsx index 1cca87ca4b..663b522d1d 100644 --- a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorTextArea.tsx +++ b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorTextArea.tsx @@ -26,7 +26,7 @@ import RefreshIcon from '@material-ui/icons/Refresh'; import SaveIcon from '@material-ui/icons/Save'; import { useKeyboardEvent } from '@react-hookz/web'; import CodeMirror from '@uiw/react-codemirror'; -import React, { useMemo } from 'react'; +import { useMemo } from 'react'; import { useDirectoryEditor } from './DirectoryEditorContext'; import { useTranslationRef } from '@backstage/core-plugin-api/alpha'; import { scaffolderTranslationRef } from '../../../translation'; diff --git a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorToolbar.test.tsx b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorToolbar.test.tsx index d1445d8698..016d775c43 100644 --- a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorToolbar.test.tsx +++ b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorToolbar.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { renderInTestApp, TestApiRegistry } from '@backstage/test-utils'; diff --git a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorToolbar.tsx b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorToolbar.tsx index b09b4d861c..06593a1c6f 100644 --- a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorToolbar.tsx +++ b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorToolbar.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { ReactNode, useState } from 'react'; +import { ReactNode, useState } from 'react'; import { makeStyles } from '@material-ui/core/styles'; import AppBar from '@material-ui/core/AppBar'; diff --git a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorToolbarFileMenu.test.tsx b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorToolbarFileMenu.test.tsx index 6483b9acff..8292141ee5 100644 --- a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorToolbarFileMenu.test.tsx +++ b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorToolbarFileMenu.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { renderInTestApp } from '@backstage/test-utils'; diff --git a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorToolbarFileMenu.tsx b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorToolbarFileMenu.tsx index f2bdfca6a2..289920dee8 100644 --- a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorToolbarFileMenu.tsx +++ b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorToolbarFileMenu.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { MouseEvent, useCallback, useState } from 'react'; +import { MouseEvent, useCallback, useState } from 'react'; import Button from '@material-ui/core/Button'; import Menu from '@material-ui/core/Menu'; diff --git a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorToolbarTemplatesMenu.test.tsx b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorToolbarTemplatesMenu.test.tsx index 5e6acc1712..879f225b4e 100644 --- a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorToolbarTemplatesMenu.test.tsx +++ b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorToolbarTemplatesMenu.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { renderInTestApp } from '@backstage/test-utils'; diff --git a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorToolbarTemplatesMenu.tsx b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorToolbarTemplatesMenu.tsx index 4a71aba5e5..e6b95ff86d 100644 --- a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorToolbarTemplatesMenu.tsx +++ b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorToolbarTemplatesMenu.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { MouseEvent, useCallback, useState } from 'react'; +import { MouseEvent, useCallback, useState } from 'react'; import { makeStyles } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; diff --git a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateFormPage.test.tsx b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateFormPage.test.tsx index 35e2772873..1174d84b11 100644 --- a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateFormPage.test.tsx +++ b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateFormPage.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { screen } from '@testing-library/react'; import { renderInTestApp, TestApiProvider } from '@backstage/test-utils'; import { TemplateFormPage } from './TemplateFormPage'; diff --git a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateFormPage.tsx b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateFormPage.tsx index 7558276721..4e726fec96 100644 --- a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateFormPage.tsx +++ b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateFormPage.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useCallback } from 'react'; +import { useCallback } from 'react'; import { useNavigate } from 'react-router-dom'; import { makeStyles } from '@material-ui/core/styles'; diff --git a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateFormPreviewer.tsx b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateFormPreviewer.tsx index b759dbc906..a477dee76d 100644 --- a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateFormPreviewer.tsx +++ b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateFormPreviewer.tsx @@ -15,7 +15,7 @@ */ import yaml from 'yaml'; -import React, { useCallback, useState } from 'react'; +import { useCallback, useState } from 'react'; import { useNavigate } from 'react-router-dom'; import useAsync from 'react-use/esm/useAsync'; diff --git a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateIntroPage.test.tsx b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateIntroPage.test.tsx index f85c37233e..932d746514 100644 --- a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateIntroPage.test.tsx +++ b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateIntroPage.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { screen } from '@testing-library/react'; import { renderInTestApp } from '@backstage/test-utils'; import { TemplateIntroPage } from './TemplateIntroPage'; diff --git a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateIntroPage.tsx b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateIntroPage.tsx index 28e4969718..04dcf9e481 100644 --- a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateIntroPage.tsx +++ b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateIntroPage.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, { useCallback } from 'react'; +import { useCallback } from 'react'; import { Content, Header, Page } from '@backstage/core-components'; import { TemplateEditorIntro } from './TemplateEditorIntro'; diff --git a/plugins/scaffolder/src/alpha/components/TemplateListPage/RegisterExistingButton.test.tsx b/plugins/scaffolder/src/alpha/components/TemplateListPage/RegisterExistingButton.test.tsx index 3c2807c4c8..3e34531464 100644 --- a/plugins/scaffolder/src/alpha/components/TemplateListPage/RegisterExistingButton.test.tsx +++ b/plugins/scaffolder/src/alpha/components/TemplateListPage/RegisterExistingButton.test.tsx @@ -16,7 +16,6 @@ import { screen } from '@testing-library/react'; import { renderInTestApp } from '@backstage/test-utils'; -import React from 'react'; import { RegisterExistingButton } from './RegisterExistingButton'; import { usePermission } from '@backstage/plugin-permission-react'; diff --git a/plugins/scaffolder/src/alpha/components/TemplateListPage/RegisterExistingButton.tsx b/plugins/scaffolder/src/alpha/components/TemplateListPage/RegisterExistingButton.tsx index 126f00dde5..ba30204167 100644 --- a/plugins/scaffolder/src/alpha/components/TemplateListPage/RegisterExistingButton.tsx +++ b/plugins/scaffolder/src/alpha/components/TemplateListPage/RegisterExistingButton.tsx @@ -17,7 +17,6 @@ import Button from '@material-ui/core/Button'; import IconButton from '@material-ui/core/IconButton'; import useMediaQuery from '@material-ui/core/useMediaQuery'; -import React from 'react'; import { Link as RouterLink, LinkProps } from 'react-router-dom'; import AddCircleOutline from '@material-ui/icons/AddCircleOutline'; import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common/alpha'; diff --git a/plugins/scaffolder/src/alpha/components/TemplateListPage/TemplateListPage.test.tsx b/plugins/scaffolder/src/alpha/components/TemplateListPage/TemplateListPage.test.tsx index 03175786b1..e2be650851 100644 --- a/plugins/scaffolder/src/alpha/components/TemplateListPage/TemplateListPage.test.tsx +++ b/plugins/scaffolder/src/alpha/components/TemplateListPage/TemplateListPage.test.tsx @@ -27,7 +27,6 @@ import { TestApiProvider, mockApis, } from '@backstage/test-utils'; -import React from 'react'; import { rootRouteRef } from '../../../routes'; import { TemplateListPage } from './TemplateListPage'; diff --git a/plugins/scaffolder/src/alpha/components/TemplateListPage/TemplateListPage.tsx b/plugins/scaffolder/src/alpha/components/TemplateListPage/TemplateListPage.tsx index 8d0c73f0a7..072bc81d06 100644 --- a/plugins/scaffolder/src/alpha/components/TemplateListPage/TemplateListPage.tsx +++ b/plugins/scaffolder/src/alpha/components/TemplateListPage/TemplateListPage.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useCallback } from 'react'; +import { ComponentType, useCallback } from 'react'; import { useNavigate } from 'react-router-dom'; import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common'; import { useApp, useRouteRef } from '@backstage/core-plugin-api'; @@ -63,7 +63,7 @@ import { scaffolderTranslationRef } from '../../../translation'; * @alpha */ export type TemplateListPageProps = { - TemplateCardComponent?: React.ComponentType<{ + TemplateCardComponent?: ComponentType<{ template: TemplateEntityV1beta3; }>; groups?: TemplateGroupFilter[]; diff --git a/plugins/scaffolder/src/alpha/components/TemplateWizardPage/TemplateWizardPage.test.tsx b/plugins/scaffolder/src/alpha/components/TemplateWizardPage/TemplateWizardPage.test.tsx index 7d978e5c38..d3a02931de 100644 --- a/plugins/scaffolder/src/alpha/components/TemplateWizardPage/TemplateWizardPage.test.tsx +++ b/plugins/scaffolder/src/alpha/components/TemplateWizardPage/TemplateWizardPage.test.tsx @@ -22,7 +22,6 @@ import { TestApiRegistry, } from '@backstage/test-utils'; import { act, fireEvent } from '@testing-library/react'; -import React from 'react'; import { ScaffolderApi, scaffolderApiRef, diff --git a/plugins/scaffolder/src/alpha/components/TemplateWizardPage/TemplateWizardPage.tsx b/plugins/scaffolder/src/alpha/components/TemplateWizardPage/TemplateWizardPage.tsx index 99c2b4b1c5..c86f793c5b 100644 --- a/plugins/scaffolder/src/alpha/components/TemplateWizardPage/TemplateWizardPage.tsx +++ b/plugins/scaffolder/src/alpha/components/TemplateWizardPage/TemplateWizardPage.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, { useCallback, useState } from 'react'; +import { ComponentType, useCallback, useState } from 'react'; import { Navigate, useNavigate } from 'react-router-dom'; import useAsync from 'react-use/esm/useAsync'; import { @@ -60,7 +60,7 @@ import { useFormDecorators } from '../../hooks'; export type TemplateWizardPageProps = { customFieldExtensions: FieldExtensionOptions[]; components?: { - ReviewStepComponent?: React.ComponentType; + ReviewStepComponent?: ComponentType; }; layouts?: LayoutOptions[]; formProps?: FormProps; diff --git a/plugins/scaffolder/src/alpha/components/TemplateWizardPage/TemplateWizardPageContextMenu.tsx b/plugins/scaffolder/src/alpha/components/TemplateWizardPage/TemplateWizardPageContextMenu.tsx index 80274cef55..9a912f265f 100644 --- a/plugins/scaffolder/src/alpha/components/TemplateWizardPage/TemplateWizardPageContextMenu.tsx +++ b/plugins/scaffolder/src/alpha/components/TemplateWizardPage/TemplateWizardPageContextMenu.tsx @@ -23,7 +23,7 @@ import Popover from '@material-ui/core/Popover'; import { makeStyles } from '@material-ui/core/styles'; import Edit from '@material-ui/icons/Edit'; import MoreVert from '@material-ui/icons/MoreVert'; -import React, { useState } from 'react'; +import { SyntheticEvent, useState } from 'react'; import { useTranslationRef } from '@backstage/core-plugin-api/alpha'; import { scaffolderTranslationRef } from '../../../translation'; @@ -49,7 +49,7 @@ export function TemplateWizardPageContextMenu( return null; } - const onOpen = (event: React.SyntheticEvent) => { + const onOpen = (event: SyntheticEvent) => { setAnchorEl(event.currentTarget); }; diff --git a/plugins/scaffolder/src/alpha/extensions.tsx b/plugins/scaffolder/src/alpha/extensions.tsx index db1a12e464..7c82edc97f 100644 --- a/plugins/scaffolder/src/alpha/extensions.tsx +++ b/plugins/scaffolder/src/alpha/extensions.tsx @@ -28,7 +28,6 @@ import { identityApiRef, createExtensionInput, } from '@backstage/frontend-plugin-api'; -import React from 'react'; import { rootRouteRef } from '../routes'; import CreateComponentIcon from '@material-ui/icons/AddCircleOutline'; import { FormFieldBlueprint } from '@backstage/plugin-scaffolder-react/alpha'; diff --git a/plugins/scaffolder/src/alpha/hooks/useFormDecorators.test.tsx b/plugins/scaffolder/src/alpha/hooks/useFormDecorators.test.tsx index 4da8b5e424..444f53985a 100644 --- a/plugins/scaffolder/src/alpha/hooks/useFormDecorators.test.tsx +++ b/plugins/scaffolder/src/alpha/hooks/useFormDecorators.test.tsx @@ -20,7 +20,6 @@ import { createApiRef, errorApiRef } from '@backstage/core-plugin-api'; import { TestApiProvider } from '@backstage/test-utils'; import { renderHook, waitFor } from '@testing-library/react'; import { useFormDecorators } from './useFormDecorators'; -import React from 'react'; import { formDecoratorsApiRef } from '../api/ref'; import { TemplateParameterSchema } from '@backstage/plugin-scaffolder-react'; diff --git a/plugins/scaffolder/src/components/ActionsPage/ActionsPage.test.tsx b/plugins/scaffolder/src/components/ActionsPage/ActionsPage.test.tsx index a3b3049beb..a86b44e724 100644 --- a/plugins/scaffolder/src/components/ActionsPage/ActionsPage.test.tsx +++ b/plugins/scaffolder/src/components/ActionsPage/ActionsPage.test.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import { ActionsPage } from './ActionsPage'; import { ScaffolderApi, diff --git a/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx b/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx index 92d6d2ea01..8329d236c9 100644 --- a/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx +++ b/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, { useEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; import useAsync from 'react-use/esm/useAsync'; import { Action, scaffolderApiRef } from '@backstage/plugin-scaffolder-react'; import Accordion from '@material-ui/core/Accordion'; diff --git a/plugins/scaffolder/src/components/FileBrowser/FileBrowser.tsx b/plugins/scaffolder/src/components/FileBrowser/FileBrowser.tsx index 9c5dc84249..a93d57f7b3 100644 --- a/plugins/scaffolder/src/components/FileBrowser/FileBrowser.tsx +++ b/plugins/scaffolder/src/components/FileBrowser/FileBrowser.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useMemo } from 'react'; +import { useMemo } from 'react'; import { makeStyles } from '@material-ui/core/styles'; import TreeView from '@material-ui/lab/TreeView'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; diff --git a/plugins/scaffolder/src/components/ListTasksPage/ListTaskPage.test.tsx b/plugins/scaffolder/src/components/ListTasksPage/ListTaskPage.test.tsx index 64712bf812..9843ebb5ee 100644 --- a/plugins/scaffolder/src/components/ListTasksPage/ListTaskPage.test.tsx +++ b/plugins/scaffolder/src/components/ListTasksPage/ListTaskPage.test.tsx @@ -22,7 +22,6 @@ import { } from '@backstage/test-utils'; import { catalogApiRef, entityRouteRef } from '@backstage/plugin-catalog-react'; import { catalogApiMock } from '@backstage/plugin-catalog-react/testUtils'; -import React from 'react'; import { identityApiRef } from '@backstage/core-plugin-api'; import { ListTasksPage } from './ListTasksPage'; import { diff --git a/plugins/scaffolder/src/components/ListTasksPage/ListTasksPage.tsx b/plugins/scaffolder/src/components/ListTasksPage/ListTasksPage.tsx index 26c8d8c36f..03afa7cb10 100644 --- a/plugins/scaffolder/src/components/ListTasksPage/ListTasksPage.tsx +++ b/plugins/scaffolder/src/components/ListTasksPage/ListTasksPage.tsx @@ -26,7 +26,7 @@ import { import { useApi, useRouteRef } from '@backstage/core-plugin-api'; import { CatalogFilterLayout } from '@backstage/plugin-catalog-react'; import useAsync from 'react-use/esm/useAsync'; -import React, { useState } from 'react'; +import { useState } from 'react'; import { scaffolderApiRef, ScaffolderTask, diff --git a/plugins/scaffolder/src/components/ListTasksPage/OwnerListPicker.test.tsx b/plugins/scaffolder/src/components/ListTasksPage/OwnerListPicker.test.tsx index 7c335a0ef7..0cc84f0614 100644 --- a/plugins/scaffolder/src/components/ListTasksPage/OwnerListPicker.test.tsx +++ b/plugins/scaffolder/src/components/ListTasksPage/OwnerListPicker.test.tsx @@ -15,7 +15,6 @@ */ import { renderInTestApp } from '@backstage/test-utils'; -import React from 'react'; import { OwnerListPicker } from './OwnerListPicker'; import { fireEvent } from '@testing-library/react'; diff --git a/plugins/scaffolder/src/components/ListTasksPage/OwnerListPicker.tsx b/plugins/scaffolder/src/components/ListTasksPage/OwnerListPicker.tsx index 44f3d46974..4639f6ed98 100644 --- a/plugins/scaffolder/src/components/ListTasksPage/OwnerListPicker.tsx +++ b/plugins/scaffolder/src/components/ListTasksPage/OwnerListPicker.tsx @@ -22,7 +22,7 @@ import MenuItem from '@material-ui/core/MenuItem'; import Typography from '@material-ui/core/Typography'; import { makeStyles } from '@material-ui/core/styles'; import SettingsIcon from '@material-ui/icons/Settings'; -import React, { Fragment } from 'react'; +import { Fragment } from 'react'; import { TranslationFunction, useTranslationRef, diff --git a/plugins/scaffolder/src/components/ListTasksPage/columns/CreatedAtColumn.test.tsx b/plugins/scaffolder/src/components/ListTasksPage/columns/CreatedAtColumn.test.tsx index c172c2122f..15321bcb95 100644 --- a/plugins/scaffolder/src/components/ListTasksPage/columns/CreatedAtColumn.test.tsx +++ b/plugins/scaffolder/src/components/ListTasksPage/columns/CreatedAtColumn.test.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import { CreatedAtColumn } from './CreatedAtColumn'; import { renderInTestApp } from '@backstage/test-utils'; diff --git a/plugins/scaffolder/src/components/ListTasksPage/columns/CreatedAtColumn.tsx b/plugins/scaffolder/src/components/ListTasksPage/columns/CreatedAtColumn.tsx index 525e4cea04..562093de98 100644 --- a/plugins/scaffolder/src/components/ListTasksPage/columns/CreatedAtColumn.tsx +++ b/plugins/scaffolder/src/components/ListTasksPage/columns/CreatedAtColumn.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ import { DateTime } from 'luxon'; -import React from 'react'; +import { FC } from 'react'; import Typography from '@material-ui/core/Typography'; interface CreatedAtColumnProps { @@ -22,7 +22,7 @@ interface CreatedAtColumnProps { locale?: string; } -export const CreatedAtColumn: React.FC = ({ +export const CreatedAtColumn: FC = ({ createdAt, locale, }) => { diff --git a/plugins/scaffolder/src/components/ListTasksPage/columns/OwnerEntityColumn.test.tsx b/plugins/scaffolder/src/components/ListTasksPage/columns/OwnerEntityColumn.test.tsx index bd5676ba31..2cc069af5d 100644 --- a/plugins/scaffolder/src/components/ListTasksPage/columns/OwnerEntityColumn.test.tsx +++ b/plugins/scaffolder/src/components/ListTasksPage/columns/OwnerEntityColumn.test.tsx @@ -22,7 +22,6 @@ import { } from '@backstage/test-utils'; import { catalogApiRef, entityRouteRef } from '@backstage/plugin-catalog-react'; import { catalogApiMock } from '@backstage/plugin-catalog-react/testUtils'; -import React from 'react'; import { OwnerEntityColumn } from './OwnerEntityColumn'; import { identityApiRef } from '@backstage/core-plugin-api'; diff --git a/plugins/scaffolder/src/components/ListTasksPage/columns/OwnerEntityColumn.tsx b/plugins/scaffolder/src/components/ListTasksPage/columns/OwnerEntityColumn.tsx index 8147b205e2..a6d53d2ea1 100644 --- a/plugins/scaffolder/src/components/ListTasksPage/columns/OwnerEntityColumn.tsx +++ b/plugins/scaffolder/src/components/ListTasksPage/columns/OwnerEntityColumn.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ import { useApi } from '@backstage/core-plugin-api'; -import React from 'react'; import useAsync from 'react-use/esm/useAsync'; diff --git a/plugins/scaffolder/src/components/ListTasksPage/columns/TaskStatusColumn.test.tsx b/plugins/scaffolder/src/components/ListTasksPage/columns/TaskStatusColumn.test.tsx index 5eabcf72ff..880355c659 100644 --- a/plugins/scaffolder/src/components/ListTasksPage/columns/TaskStatusColumn.test.tsx +++ b/plugins/scaffolder/src/components/ListTasksPage/columns/TaskStatusColumn.test.tsx @@ -16,7 +16,6 @@ import { renderInTestApp } from '@backstage/test-utils'; -import React from 'react'; import { TaskStatusColumn } from './TaskStatusColumn'; describe('', () => { diff --git a/plugins/scaffolder/src/components/ListTasksPage/columns/TaskStatusColumn.tsx b/plugins/scaffolder/src/components/ListTasksPage/columns/TaskStatusColumn.tsx index 995e505c36..3d682e4f5b 100644 --- a/plugins/scaffolder/src/components/ListTasksPage/columns/TaskStatusColumn.tsx +++ b/plugins/scaffolder/src/components/ListTasksPage/columns/TaskStatusColumn.tsx @@ -18,7 +18,6 @@ import { StatusOK, StatusPending, } from '@backstage/core-components'; -import React from 'react'; export const TaskStatusColumn = ({ status }: { status: string }) => { switch (status) { diff --git a/plugins/scaffolder/src/components/ListTasksPage/columns/TemplateTitleColumn.test.tsx b/plugins/scaffolder/src/components/ListTasksPage/columns/TemplateTitleColumn.test.tsx index bf06c09436..4b05948318 100644 --- a/plugins/scaffolder/src/components/ListTasksPage/columns/TemplateTitleColumn.test.tsx +++ b/plugins/scaffolder/src/components/ListTasksPage/columns/TemplateTitleColumn.test.tsx @@ -16,7 +16,6 @@ import { renderInTestApp, TestApiProvider } from '@backstage/test-utils'; -import React from 'react'; import { TemplateTitleColumn } from './TemplateTitleColumn'; import { entityRouteRef } from '@backstage/plugin-catalog-react'; import { diff --git a/plugins/scaffolder/src/components/ListTasksPage/columns/TemplateTitleColumn.tsx b/plugins/scaffolder/src/components/ListTasksPage/columns/TemplateTitleColumn.tsx index 929e34b591..0391e7c18e 100644 --- a/plugins/scaffolder/src/components/ListTasksPage/columns/TemplateTitleColumn.tsx +++ b/plugins/scaffolder/src/components/ListTasksPage/columns/TemplateTitleColumn.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ import { useApi } from '@backstage/core-plugin-api'; -import React from 'react'; import { scaffolderApiRef } from '@backstage/plugin-scaffolder-react'; import useAsync from 'react-use/esm/useAsync'; import { parseEntityRef } from '@backstage/catalog-model'; diff --git a/plugins/scaffolder/src/components/OngoingTask/ContextMenu.tsx b/plugins/scaffolder/src/components/OngoingTask/ContextMenu.tsx index f189a6a03c..704d39a8fd 100644 --- a/plugins/scaffolder/src/components/OngoingTask/ContextMenu.tsx +++ b/plugins/scaffolder/src/components/OngoingTask/ContextMenu.tsx @@ -28,7 +28,7 @@ import Replay from '@material-ui/icons/Replay'; import Toc from '@material-ui/icons/Toc'; import ControlPointIcon from '@material-ui/icons/ControlPoint'; import MoreVert from '@material-ui/icons/MoreVert'; -import React, { useState } from 'react'; +import { SyntheticEvent, useState } from 'react'; import { useAnalytics, useApi } from '@backstage/core-plugin-api'; import { scaffolderApiRef } from '@backstage/plugin-scaffolder-react'; import { usePermission } from '@backstage/plugin-permission-react'; @@ -108,7 +108,7 @@ export const ContextMenu = (props: ContextMenuProps) => { aria-label="more" aria-controls="long-menu" aria-haspopup="true" - onClick={(event: React.SyntheticEvent) => { + onClick={(event: SyntheticEvent) => { setAnchorEl(event.currentTarget); }} data-testid="menu-button" diff --git a/plugins/scaffolder/src/components/OngoingTask/OngoingTask.test.tsx b/plugins/scaffolder/src/components/OngoingTask/OngoingTask.test.tsx index 7a04854c6f..a576b1a9bc 100644 --- a/plugins/scaffolder/src/components/OngoingTask/OngoingTask.test.tsx +++ b/plugins/scaffolder/src/components/OngoingTask/OngoingTask.test.tsx @@ -15,7 +15,6 @@ */ import { OngoingTask } from './OngoingTask'; -import React from 'react'; import { mockApis, renderInTestApp, diff --git a/plugins/scaffolder/src/components/OngoingTask/OngoingTask.tsx b/plugins/scaffolder/src/components/OngoingTask/OngoingTask.tsx index 06620e7280..b718a257b6 100644 --- a/plugins/scaffolder/src/components/OngoingTask/OngoingTask.tsx +++ b/plugins/scaffolder/src/components/OngoingTask/OngoingTask.tsx @@ -13,7 +13,13 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, { useCallback, useEffect, useMemo, useState } from 'react'; +import { + ComponentType, + useCallback, + useEffect, + useMemo, + useState, +} from 'react'; import { Content, ErrorPanel, Header, Page } from '@backstage/core-components'; import { useNavigate, useParams } from 'react-router-dom'; import Box from '@material-ui/core/Box'; @@ -71,7 +77,7 @@ const useStyles = makeStyles(theme => ({ * @public */ export const OngoingTask = (props: { - TemplateOutputsComponent?: React.ComponentType<{ + TemplateOutputsComponent?: ComponentType<{ output?: ScaffolderTaskOutput; }>; }) => { diff --git a/plugins/scaffolder/src/components/RenderSchema/RenderSchema.test.tsx b/plugins/scaffolder/src/components/RenderSchema/RenderSchema.test.tsx index 32d1e2e142..0f1150591d 100644 --- a/plugins/scaffolder/src/components/RenderSchema/RenderSchema.test.tsx +++ b/plugins/scaffolder/src/components/RenderSchema/RenderSchema.test.tsx @@ -29,7 +29,7 @@ import { JSONSchema7Type, } from 'json-schema'; import { capitalize } from 'lodash'; -import React, { useState } from 'react'; +import { useState } from 'react'; import { Expanded, SchemaRenderStrategy } from '.'; import { RenderEnum, RenderSchema } from './RenderSchema'; diff --git a/plugins/scaffolder/src/components/RenderSchema/RenderSchema.tsx b/plugins/scaffolder/src/components/RenderSchema/RenderSchema.tsx index 011d9e3559..21debf4915 100644 --- a/plugins/scaffolder/src/components/RenderSchema/RenderSchema.tsx +++ b/plugins/scaffolder/src/components/RenderSchema/RenderSchema.tsx @@ -45,7 +45,7 @@ import { JSONSchema7Definition, JSONSchema7Type, } from 'json-schema'; -import React from 'react'; +import { FC, JSX, cloneElement, Fragment } from 'react'; import { scaffolderTranslationRef } from '../../translation'; import { SchemaRenderContext, SchemaRenderStrategy } from './types'; @@ -275,7 +275,7 @@ const typeColumn = { }, } as Column; -export const RenderEnum: React.FC<{ +export const RenderEnum: FC<{ e: JSONSchema7Type[]; classes: ClassNameMap; [key: string]: any; @@ -290,7 +290,7 @@ export const RenderEnum: React.FC<{ return ( {e.map((v, i) => { - let inner: React.JSX.Element = ( + let inner: JSX.Element = ( + {columns!.map(col => ( - {React.cloneElement( + {cloneElement( context.headings[0], {}, 'Valid values:', @@ -466,7 +466,7 @@ export const RenderSchema = ({ )} - + ); })} @@ -474,8 +474,8 @@ export const RenderSchema = ({ )} {Object.keys(subschemas).map(sk => ( - - {React.cloneElement(context.headings[0], {}, sk)} + + {cloneElement(context.headings[0], {}, sk)} {subschemas[sk].map((sub, index) => ( ))} - + ))} ); diff --git a/plugins/scaffolder/src/components/Router/Router.test.tsx b/plugins/scaffolder/src/components/Router/Router.test.tsx index 871e9f7632..20b21fabc7 100644 --- a/plugins/scaffolder/src/components/Router/Router.test.tsx +++ b/plugins/scaffolder/src/components/Router/Router.test.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; +import { ReactElement } from 'react'; import { Router } from './Router'; import { renderInTestApp, @@ -37,10 +37,7 @@ jest.mock('../../alpha/components', () => ({ TemplateListPage: jest.fn(() => null), })); -const wrapInApisAndRender = ( - element: React.ReactElement, - opts?: TestAppOptions, -) => +const wrapInApisAndRender = (element: ReactElement, opts?: TestAppOptions) => renderInTestApp( [] }]]} diff --git a/plugins/scaffolder/src/components/Router/Router.tsx b/plugins/scaffolder/src/components/Router/Router.tsx index 2e081d835a..429ba7b1a6 100644 --- a/plugins/scaffolder/src/components/Router/Router.tsx +++ b/plugins/scaffolder/src/components/Router/Router.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, { PropsWithChildren } from 'react'; +import { ComponentType, PropsWithChildren } from 'react'; import { Routes, Route, useOutlet } from 'react-router-dom'; import { @@ -74,16 +74,16 @@ import { useAsync, useMountEffect } from '@react-hookz/web'; */ export type RouterProps = { components?: { - ReviewStepComponent?: React.ComponentType; - TemplateCardComponent?: React.ComponentType<{ + ReviewStepComponent?: ComponentType; + TemplateCardComponent?: ComponentType<{ template: TemplateEntityV1beta3; }>; - TaskPageComponent?: React.ComponentType>; - EXPERIMENTAL_TemplateOutputsComponent?: React.ComponentType<{ + TaskPageComponent?: ComponentType>; + EXPERIMENTAL_TemplateOutputsComponent?: ComponentType<{ output?: ScaffolderTaskOutput; }>; - EXPERIMENTAL_TemplateListPageComponent?: React.ComponentType; - EXPERIMENTAL_TemplateWizardPageComponent?: React.ComponentType; + EXPERIMENTAL_TemplateListPageComponent?: ComponentType; + EXPERIMENTAL_TemplateWizardPageComponent?: ComponentType; }; groups?: TemplateGroupFilter[]; templateFilter?: (entity: TemplateEntityV1beta3) => boolean; diff --git a/plugins/scaffolder/src/components/ScaffolderUsageExamplesTable/ScaffolderUsageExamplesTable.test.tsx b/plugins/scaffolder/src/components/ScaffolderUsageExamplesTable/ScaffolderUsageExamplesTable.test.tsx index 3d96b7107b..9a3113124d 100644 --- a/plugins/scaffolder/src/components/ScaffolderUsageExamplesTable/ScaffolderUsageExamplesTable.test.tsx +++ b/plugins/scaffolder/src/components/ScaffolderUsageExamplesTable/ScaffolderUsageExamplesTable.test.tsx @@ -16,7 +16,6 @@ import { ScaffolderUsageExample } from '@backstage/plugin-scaffolder-react'; import { renderInTestApp } from '@backstage/test-utils'; import { within } from '@testing-library/react'; -import React from 'react'; import { ScaffolderUsageExamplesTable } from './ScaffolderUsageExamplesTable'; describe('examples', () => { diff --git a/plugins/scaffolder/src/components/ScaffolderUsageExamplesTable/ScaffolderUsageExamplesTable.tsx b/plugins/scaffolder/src/components/ScaffolderUsageExamplesTable/ScaffolderUsageExamplesTable.tsx index 758fa90ec4..92c17dfc21 100644 --- a/plugins/scaffolder/src/components/ScaffolderUsageExamplesTable/ScaffolderUsageExamplesTable.tsx +++ b/plugins/scaffolder/src/components/ScaffolderUsageExamplesTable/ScaffolderUsageExamplesTable.tsx @@ -17,7 +17,7 @@ import { CodeSnippet, MarkdownContent } from '@backstage/core-components'; import { ScaffolderUsageExample } from '@backstage/plugin-scaffolder-react'; import Box from '@material-ui/core/Box'; import Grid from '@material-ui/core/Grid'; -import React, { Fragment } from 'react'; +import { Fragment } from 'react'; export const ScaffolderUsageExamplesTable = (props: { examples: ScaffolderUsageExample[]; diff --git a/plugins/scaffolder/src/components/TemplateTypePicker/TemplateTypePicker.test.tsx b/plugins/scaffolder/src/components/TemplateTypePicker/TemplateTypePicker.test.tsx index 1fe7ffb17e..5968f1da4f 100644 --- a/plugins/scaffolder/src/components/TemplateTypePicker/TemplateTypePicker.test.tsx +++ b/plugins/scaffolder/src/components/TemplateTypePicker/TemplateTypePicker.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { fireEvent } from '@testing-library/react'; import { capitalize } from 'lodash'; import { Entity } from '@backstage/catalog-model'; diff --git a/plugins/scaffolder/src/components/TemplateTypePicker/TemplateTypePicker.tsx b/plugins/scaffolder/src/components/TemplateTypePicker/TemplateTypePicker.tsx index a21a6c15ab..d8ad7ac25e 100644 --- a/plugins/scaffolder/src/components/TemplateTypePicker/TemplateTypePicker.tsx +++ b/plugins/scaffolder/src/components/TemplateTypePicker/TemplateTypePicker.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import capitalize from 'lodash/capitalize'; import { Progress } from '@backstage/core-components'; import Box from '@material-ui/core/Box'; diff --git a/plugins/scaffolder/src/components/fields/EntityNamePicker/EntityNamePicker.tsx b/plugins/scaffolder/src/components/fields/EntityNamePicker/EntityNamePicker.tsx index c219ae0d63..d4cac91c38 100644 --- a/plugins/scaffolder/src/components/fields/EntityNamePicker/EntityNamePicker.tsx +++ b/plugins/scaffolder/src/components/fields/EntityNamePicker/EntityNamePicker.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import { EntityNamePickerProps } from './schema'; import TextField from '@material-ui/core/TextField'; import { useTranslationRef } from '@backstage/core-plugin-api/alpha'; diff --git a/plugins/scaffolder/src/components/fields/EntityPicker/EntityPicker.test.tsx b/plugins/scaffolder/src/components/fields/EntityPicker/EntityPicker.test.tsx index 612c5b7600..ab3092e3ed 100644 --- a/plugins/scaffolder/src/components/fields/EntityPicker/EntityPicker.test.tsx +++ b/plugins/scaffolder/src/components/fields/EntityPicker/EntityPicker.test.tsx @@ -22,7 +22,7 @@ import { } from '@backstage/plugin-catalog-react'; import { renderInTestApp, TestApiProvider } from '@backstage/test-utils'; import { fireEvent, screen } from '@testing-library/react'; -import React from 'react'; +import { PropsWithChildren, ComponentType, ReactNode } from 'react'; import { EntityPicker } from './EntityPicker'; import { EntityPickerProps } from './schema'; import { ScaffolderRJSFFieldProps as FieldProps } from '@backstage/plugin-scaffolder-react'; @@ -53,10 +53,10 @@ describe('', () => { getEntities: jest.fn(async () => ({ items: entities })), }); - let Wrapper: React.ComponentType>; + let Wrapper: ComponentType>; beforeEach(() => { - Wrapper = ({ children }: { children?: React.ReactNode }) => ( + Wrapper = ({ children }: { children?: ReactNode }) => ( { return tagFacets; }); - const setTags = (_: React.ChangeEvent<{}>, values: string[] | null) => { + const setTags = (_: ChangeEvent<{}>, values: string[] | null) => { // Reset error state in case all tags were removed let hasError = false; let addDuplicate = false; diff --git a/plugins/scaffolder/src/components/fields/MultiEntityPicker/MultiEntityPicker.test.tsx b/plugins/scaffolder/src/components/fields/MultiEntityPicker/MultiEntityPicker.test.tsx index 2839ce1731..d5f9e6af0c 100644 --- a/plugins/scaffolder/src/components/fields/MultiEntityPicker/MultiEntityPicker.test.tsx +++ b/plugins/scaffolder/src/components/fields/MultiEntityPicker/MultiEntityPicker.test.tsx @@ -24,7 +24,7 @@ import { renderInTestApp, TestApiProvider } from '@backstage/test-utils'; import { fireEvent, screen } from '@testing-library/react'; import { userEvent } from '@testing-library/user-event'; -import React from 'react'; +import { PropsWithChildren, ComponentType, ReactNode } from 'react'; import { MultiEntityPicker } from './MultiEntityPicker'; import { MultiEntityPickerProps } from './schema'; import { ScaffolderRJSFFieldProps as FieldProps } from '@backstage/plugin-scaffolder-react'; @@ -54,10 +54,10 @@ describe('', () => { const catalogApi = catalogApiMock.mock({ getEntities: jest.fn(async () => ({ items: entities })), }); - let Wrapper: React.ComponentType>; + let Wrapper: ComponentType>; beforeEach(() => { - Wrapper = ({ children }: { children?: React.ReactNode }) => ( + Wrapper = ({ children }: { children?: ReactNode }) => ( { return { catalogEntities: items, entityRefToPresentation }; }); - const updateChange = (_: React.ChangeEvent<{}>, value: Entity | null) => { + const updateChange = (_: ChangeEvent<{}>, value: Entity | null) => { onChange(value ? stringifyEntityRef(value) : ''); }; diff --git a/plugins/scaffolder/src/components/fields/OwnedEntityPicker/OwnedEntityPicker.tsx b/plugins/scaffolder/src/components/fields/OwnedEntityPicker/OwnedEntityPicker.tsx index 63e21f5dc6..a7c29c081e 100644 --- a/plugins/scaffolder/src/components/fields/OwnedEntityPicker/OwnedEntityPicker.tsx +++ b/plugins/scaffolder/src/components/fields/OwnedEntityPicker/OwnedEntityPicker.tsx @@ -17,7 +17,6 @@ import { RELATION_OWNED_BY } from '@backstage/catalog-model'; import { identityApiRef, useApi } from '@backstage/core-plugin-api'; import TextField from '@material-ui/core/TextField'; import Autocomplete from '@material-ui/lab/Autocomplete'; -import React from 'react'; import useAsync from 'react-use/esm/useAsync'; import { EntityPicker } from '../EntityPicker/EntityPicker'; diff --git a/plugins/scaffolder/src/components/fields/OwnerPicker/OwnerPicker.test.tsx b/plugins/scaffolder/src/components/fields/OwnerPicker/OwnerPicker.test.tsx index 5485a76cef..af75408754 100644 --- a/plugins/scaffolder/src/components/fields/OwnerPicker/OwnerPicker.test.tsx +++ b/plugins/scaffolder/src/components/fields/OwnerPicker/OwnerPicker.test.tsx @@ -23,7 +23,7 @@ import { import { catalogApiMock } from '@backstage/plugin-catalog-react/testUtils'; import { renderInTestApp, TestApiProvider } from '@backstage/test-utils'; import { ScaffolderRJSFFieldProps as FieldProps } from '@backstage/plugin-scaffolder-react'; -import React from 'react'; +import { PropsWithChildren, ComponentType, ReactNode } from 'react'; import { OwnerPicker } from './OwnerPicker'; import { DefaultEntityPresentationApi } from '@backstage/plugin-catalog'; import { fireEvent, screen } from '@testing-library/react'; @@ -59,10 +59,10 @@ describe('', () => { const catalogApi = catalogApiMock.mock({ getEntities: jest.fn(async () => ({ items: entities })), }); - let Wrapper: React.ComponentType>; + let Wrapper: ComponentType>; beforeEach(() => { - Wrapper = ({ children }: { children?: React.ReactNode }) => ( + Wrapper = ({ children }: { children?: ReactNode }) => ( { diff --git a/plugins/scaffolder/src/components/fields/RepoUrlPicker/GitlabRepoPicker.tsx b/plugins/scaffolder/src/components/fields/RepoUrlPicker/GitlabRepoPicker.tsx index 0d7c8b365a..0e869b44bf 100644 --- a/plugins/scaffolder/src/components/fields/RepoUrlPicker/GitlabRepoPicker.tsx +++ b/plugins/scaffolder/src/components/fields/RepoUrlPicker/GitlabRepoPicker.tsx @@ -21,7 +21,7 @@ import FormControl from '@material-ui/core/FormControl'; import FormHelperText from '@material-ui/core/FormHelperText'; import TextField from '@material-ui/core/TextField'; import Autocomplete from '@material-ui/lab/Autocomplete'; -import React, { useCallback, useState } from 'react'; +import { useCallback, useState } from 'react'; import useDebounce from 'react-use/esm/useDebounce'; import { scaffolderTranslationRef } from '../../../translation'; import { BaseRepoUrlPickerProps } from './types'; diff --git a/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.test.tsx b/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.test.tsx index 2d612f317d..c5d88275f6 100644 --- a/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.test.tsx +++ b/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.test.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import { RepoUrlPicker } from './RepoUrlPicker'; import { Form } from '@backstage/plugin-scaffolder-react/alpha'; import validator from '@rjsf/validator-ajv8'; diff --git a/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.tsx b/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.tsx index 87941cd006..953b607b07 100644 --- a/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.tsx +++ b/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.tsx @@ -22,7 +22,7 @@ import { useTemplateSecrets } from '@backstage/plugin-scaffolder-react'; import Box from '@material-ui/core/Box'; import Divider from '@material-ui/core/Divider'; import Typography from '@material-ui/core/Typography'; -import React, { useCallback, useEffect, useMemo, useState } from 'react'; +import { useCallback, useEffect, useMemo, useState } from 'react'; import useDebounce from 'react-use/esm/useDebounce'; import { AzureRepoPicker } from './AzureRepoPicker'; import { BitbucketRepoPicker } from './BitbucketRepoPicker'; diff --git a/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPickerHost.test.tsx b/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPickerHost.test.tsx index 0f85b6d037..cbafb368a0 100644 --- a/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPickerHost.test.tsx +++ b/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPickerHost.test.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import { RepoUrlPickerHost } from './RepoUrlPickerHost'; import { renderInTestApp, TestApiProvider } from '@backstage/test-utils'; import { scaffolderApiRef } from '@backstage/plugin-scaffolder-react'; diff --git a/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPickerHost.tsx b/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPickerHost.tsx index 787aa68987..535317cdfa 100644 --- a/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPickerHost.tsx +++ b/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPickerHost.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, { useEffect } from 'react'; +import { useEffect } from 'react'; import { Progress, Select, SelectItem } from '@backstage/core-components'; import FormControl from '@material-ui/core/FormControl'; import FormHelperText from '@material-ui/core/FormHelperText'; diff --git a/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPickerRepoName.test.tsx b/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPickerRepoName.test.tsx index d18f784bd0..f983e1b554 100644 --- a/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPickerRepoName.test.tsx +++ b/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPickerRepoName.test.tsx @@ -16,7 +16,6 @@ import { renderInTestApp } from '@backstage/test-utils'; import { fireEvent } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import React from 'react'; import { act } from 'react-dom/test-utils'; import { RepoUrlPickerRepoName } from './RepoUrlPickerRepoName'; diff --git a/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPickerRepoName.tsx b/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPickerRepoName.tsx index bfa9b677bb..0427f44241 100644 --- a/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPickerRepoName.tsx +++ b/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPickerRepoName.tsx @@ -19,7 +19,7 @@ import FormControl from '@material-ui/core/FormControl'; import FormHelperText from '@material-ui/core/FormHelperText'; import TextField from '@material-ui/core/TextField'; import Autocomplete from '@material-ui/lab/Autocomplete'; -import React, { useEffect } from 'react'; +import { useEffect } from 'react'; import { scaffolderTranslationRef } from '../../../translation'; import { AvailableRepositories } from './types'; diff --git a/plugins/scaffolder/src/components/fields/SecretInput/SecretInput.test.tsx b/plugins/scaffolder/src/components/fields/SecretInput/SecretInput.test.tsx index dd88b9986c..f1619aacba 100644 --- a/plugins/scaffolder/src/components/fields/SecretInput/SecretInput.test.tsx +++ b/plugins/scaffolder/src/components/fields/SecretInput/SecretInput.test.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import { SecretsContextProvider, useTemplateSecrets, diff --git a/plugins/scaffolder/src/components/fields/SecretInput/SecretInput.tsx b/plugins/scaffolder/src/components/fields/SecretInput/SecretInput.tsx index a588286d97..d3bfd09502 100644 --- a/plugins/scaffolder/src/components/fields/SecretInput/SecretInput.tsx +++ b/plugins/scaffolder/src/components/fields/SecretInput/SecretInput.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import { ScaffolderRJSFFieldProps } from '@backstage/plugin-scaffolder-react'; import { ScaffolderField, diff --git a/plugins/scaffolder/src/components/fields/VirtualizedListbox.test.tsx b/plugins/scaffolder/src/components/fields/VirtualizedListbox.test.tsx index 7e77826e32..59f311fe88 100644 --- a/plugins/scaffolder/src/components/fields/VirtualizedListbox.test.tsx +++ b/plugins/scaffolder/src/components/fields/VirtualizedListbox.test.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import { VirtualizedListbox } from './VirtualizedListbox'; import { renderInTestApp } from '@backstage/test-utils'; diff --git a/plugins/scaffolder/src/components/fields/VirtualizedListbox.tsx b/plugins/scaffolder/src/components/fields/VirtualizedListbox.tsx index 6ac6568c2f..74d9281507 100644 --- a/plugins/scaffolder/src/components/fields/VirtualizedListbox.tsx +++ b/plugins/scaffolder/src/components/fields/VirtualizedListbox.tsx @@ -14,53 +14,59 @@ * limitations under the License. */ -import React from 'react'; +import { + HTMLAttributes, + cloneElement, + createContext, + forwardRef, + useContext, + Children, +} from 'react'; import { FixedSizeList, ListChildComponentProps } from 'react-window'; -type HTMLDivProps = React.HTMLAttributes; +type HTMLDivProps = HTMLAttributes; const renderRow = (props: ListChildComponentProps) => { const { data, index, style } = props; - return React.cloneElement(data[index], { style }); + return cloneElement(data[index], { style }); }; // Context needed to keep Autocomplete working correctly : https://v4.mui.com/components/autocomplete/#Virtualize.tsx -const OuterElementContext = React.createContext({}); +const OuterElementContext = createContext({}); -const OuterElementType = React.forwardRef( +const OuterElementType = forwardRef( (props, ref) => { - const outerProps = React.useContext(OuterElementContext); + const outerProps = useContext(OuterElementContext); return
    ; }, ); -export const VirtualizedListbox = React.forwardRef< - HTMLDivElement, - HTMLDivProps ->((props, ref) => { - const { children, ...other } = props; - const itemData = React.Children.toArray(children); - const itemCount = itemData.length; +export const VirtualizedListbox = forwardRef( + (props, ref) => { + const { children, ...other } = props; + const itemData = Children.toArray(children); + const itemCount = itemData.length; - const itemSize = 36; + const itemSize = 36; - const itemsToShow = Math.min(10, itemCount) + 0.5; - const height = itemsToShow * itemSize; + const itemsToShow = Math.min(10, itemCount) + 0.5; + const height = itemsToShow * itemSize; - return ( -
    - - - {renderRow} - - -
    - ); -}); + return ( +
    + + + {renderRow} + + +
    + ); + }, +); diff --git a/plugins/search-react/src/alpha/blueprints/SearchFilterBlueprint.test.tsx b/plugins/search-react/src/alpha/blueprints/SearchFilterBlueprint.test.tsx index 6bae597dbb..e8ca2d5888 100644 --- a/plugins/search-react/src/alpha/blueprints/SearchFilterBlueprint.test.tsx +++ b/plugins/search-react/src/alpha/blueprints/SearchFilterBlueprint.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { PageBlueprint, createExtensionInput, diff --git a/plugins/search-react/src/alpha/blueprints/SearchFilterResultTypeBlueprint.test.tsx b/plugins/search-react/src/alpha/blueprints/SearchFilterResultTypeBlueprint.test.tsx index b2de0319c6..3ebc4c5a24 100644 --- a/plugins/search-react/src/alpha/blueprints/SearchFilterResultTypeBlueprint.test.tsx +++ b/plugins/search-react/src/alpha/blueprints/SearchFilterResultTypeBlueprint.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { PageBlueprint, createExtensionInput, diff --git a/plugins/search-react/src/alpha/blueprints/SearchResultListItemBlueprint.test.tsx b/plugins/search-react/src/alpha/blueprints/SearchResultListItemBlueprint.test.tsx index 56a0b8ea7b..1accf8f3d4 100644 --- a/plugins/search-react/src/alpha/blueprints/SearchResultListItemBlueprint.test.tsx +++ b/plugins/search-react/src/alpha/blueprints/SearchResultListItemBlueprint.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { SearchResultListItemBlueprint } from './SearchResultListItemBlueprint'; import { createExtensionTester, diff --git a/plugins/search-react/src/alpha/blueprints/SearchResultListItemBlueprint.tsx b/plugins/search-react/src/alpha/blueprints/SearchResultListItemBlueprint.tsx index b9a7b71719..f551b3d60c 100644 --- a/plugins/search-react/src/alpha/blueprints/SearchResultListItemBlueprint.tsx +++ b/plugins/search-react/src/alpha/blueprints/SearchResultListItemBlueprint.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { lazy } from 'react'; +import { lazy } from 'react'; import { createExtensionBlueprint, ExtensionBoundary, diff --git a/plugins/search-react/src/components/DefaultResultListItem/DefaultResultListItem.stories.tsx b/plugins/search-react/src/components/DefaultResultListItem/DefaultResultListItem.stories.tsx index 89c98f6e72..9ea575139d 100644 --- a/plugins/search-react/src/components/DefaultResultListItem/DefaultResultListItem.stories.tsx +++ b/plugins/search-react/src/components/DefaultResultListItem/DefaultResultListItem.stories.tsx @@ -21,7 +21,6 @@ import CssBaseline from '@material-ui/core/CssBaseline'; import { ThemeProvider } from '@material-ui/core/styles'; import FindInPageIcon from '@material-ui/icons/FindInPage'; import GroupIcon from '@material-ui/icons/Group'; -import React from 'react'; import { MemoryRouter } from 'react-router-dom'; import { DefaultResultListItem } from './DefaultResultListItem'; diff --git a/plugins/search-react/src/components/DefaultResultListItem/DefaultResultListItem.test.tsx b/plugins/search-react/src/components/DefaultResultListItem/DefaultResultListItem.test.tsx index aab105df48..eca99a41a1 100644 --- a/plugins/search-react/src/components/DefaultResultListItem/DefaultResultListItem.test.tsx +++ b/plugins/search-react/src/components/DefaultResultListItem/DefaultResultListItem.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { screen } from '@testing-library/react'; import { renderInTestApp } from '@backstage/test-utils'; import FindInPageIcon from '@material-ui/icons/FindInPage'; diff --git a/plugins/search-react/src/components/DefaultResultListItem/DefaultResultListItem.tsx b/plugins/search-react/src/components/DefaultResultListItem/DefaultResultListItem.tsx index 812e951439..b3923c3868 100644 --- a/plugins/search-react/src/components/DefaultResultListItem/DefaultResultListItem.tsx +++ b/plugins/search-react/src/components/DefaultResultListItem/DefaultResultListItem.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { ReactNode } from 'react'; +import { ReactNode } from 'react'; import { AnalyticsContext } from '@backstage/core-plugin-api'; import { ResultHighlight, diff --git a/plugins/search-react/src/components/HighlightedSearchResultText/HighlightedSearchResultText.test.tsx b/plugins/search-react/src/components/HighlightedSearchResultText/HighlightedSearchResultText.test.tsx index 3a78a66541..852e47b6cd 100644 --- a/plugins/search-react/src/components/HighlightedSearchResultText/HighlightedSearchResultText.test.tsx +++ b/plugins/search-react/src/components/HighlightedSearchResultText/HighlightedSearchResultText.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { screen } from '@testing-library/react'; import { renderInTestApp } from '@backstage/test-utils'; import { HighlightedSearchResultText } from './HighlightedSearchResultText'; diff --git a/plugins/search-react/src/components/HighlightedSearchResultText/HighlightedSearchResultText.tsx b/plugins/search-react/src/components/HighlightedSearchResultText/HighlightedSearchResultText.tsx index 804fac2d4f..35cc2dd328 100644 --- a/plugins/search-react/src/components/HighlightedSearchResultText/HighlightedSearchResultText.tsx +++ b/plugins/search-react/src/components/HighlightedSearchResultText/HighlightedSearchResultText.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useMemo } from 'react'; +import { useMemo } from 'react'; import { makeStyles } from '@material-ui/core/styles'; /** @public */ diff --git a/plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.stories.tsx b/plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.stories.tsx index 57f0c01f39..da504497e0 100644 --- a/plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.stories.tsx +++ b/plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.stories.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { ComponentType, PropsWithChildren } from 'react'; +import { ComponentType, PropsWithChildren } from 'react'; import Grid from '@material-ui/core/Grid'; import LabelIcon from '@material-ui/icons/Label'; diff --git a/plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.test.tsx b/plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.test.tsx index cc1e6c486c..173d6c3450 100644 --- a/plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.test.tsx +++ b/plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; diff --git a/plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.tsx b/plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.tsx index bc9e3bff13..f3d90d0a63 100644 --- a/plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.tsx +++ b/plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { ChangeEvent, useCallback, useMemo } from 'react'; +import { ChangeEvent, useCallback, useMemo } from 'react'; import CircularProgress from '@material-ui/core/CircularProgress'; import { makeStyles } from '@material-ui/core/styles'; diff --git a/plugins/search-react/src/components/SearchAutocomplete/SearchAutocompleteDefaultOption.stories.tsx b/plugins/search-react/src/components/SearchAutocomplete/SearchAutocompleteDefaultOption.stories.tsx index 3c4cfd8809..ca22974cc7 100644 --- a/plugins/search-react/src/components/SearchAutocomplete/SearchAutocompleteDefaultOption.stories.tsx +++ b/plugins/search-react/src/components/SearchAutocomplete/SearchAutocompleteDefaultOption.stories.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { ComponentType, PropsWithChildren } from 'react'; +import { ComponentType, PropsWithChildren } from 'react'; import Grid from '@material-ui/core/Grid'; import ListItem from '@material-ui/core/ListItem'; diff --git a/plugins/search-react/src/components/SearchAutocomplete/SearchAutocompleteDefaultOption.tsx b/plugins/search-react/src/components/SearchAutocomplete/SearchAutocompleteDefaultOption.tsx index d2227ef0d3..114b462784 100644 --- a/plugins/search-react/src/components/SearchAutocomplete/SearchAutocompleteDefaultOption.tsx +++ b/plugins/search-react/src/components/SearchAutocomplete/SearchAutocompleteDefaultOption.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { ReactNode } from 'react'; +import { ReactNode } from 'react'; import ListItemIcon from '@material-ui/core/ListItemIcon'; import ListItemText, { ListItemTextProps, diff --git a/plugins/search-react/src/components/SearchBar/SearchBar.stories.tsx b/plugins/search-react/src/components/SearchBar/SearchBar.stories.tsx index 7bbd75d3f3..e2cbfc6bc8 100644 --- a/plugins/search-react/src/components/SearchBar/SearchBar.stories.tsx +++ b/plugins/search-react/src/components/SearchBar/SearchBar.stories.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { ComponentType, PropsWithChildren } from 'react'; +import { ComponentType, PropsWithChildren } from 'react'; import Grid from '@material-ui/core/Grid'; import { makeStyles } from '@material-ui/core/styles'; diff --git a/plugins/search-react/src/components/SearchBar/SearchBar.test.tsx b/plugins/search-react/src/components/SearchBar/SearchBar.test.tsx index 0e4df4fb34..54889792db 100644 --- a/plugins/search-react/src/components/SearchBar/SearchBar.test.tsx +++ b/plugins/search-react/src/components/SearchBar/SearchBar.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { screen, waitFor, act } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { configApiRef } from '@backstage/core-plugin-api'; diff --git a/plugins/search-react/src/components/SearchBar/SearchBar.tsx b/plugins/search-react/src/components/SearchBar/SearchBar.tsx index 081187edb2..98bfe81b32 100644 --- a/plugins/search-react/src/components/SearchBar/SearchBar.tsx +++ b/plugins/search-react/src/components/SearchBar/SearchBar.tsx @@ -26,7 +26,8 @@ import TextField from '@material-ui/core/TextField'; import Button from '@material-ui/core/Button'; import { TextFieldProps } from '@material-ui/core/TextField'; import DefaultSearchIcon from '@material-ui/icons/Search'; -import React, { +import { + ReactNode, ChangeEvent, forwardRef, KeyboardEvent, @@ -49,7 +50,7 @@ export type SearchBarBaseProps = Omit & { onClear?: () => void; onSubmit?: () => void; onChange: (value: string) => void; - endAdornment?: React.ReactNode; + endAdornment?: ReactNode; }; /** diff --git a/plugins/search-react/src/components/SearchFilter/SearchFilter.Autocomplete.test.tsx b/plugins/search-react/src/components/SearchFilter/SearchFilter.Autocomplete.test.tsx index bbc6454613..5bbb8eb27f 100644 --- a/plugins/search-react/src/components/SearchFilter/SearchFilter.Autocomplete.test.tsx +++ b/plugins/search-react/src/components/SearchFilter/SearchFilter.Autocomplete.test.tsx @@ -17,7 +17,6 @@ import { mockApis, TestApiProvider } from '@backstage/test-utils'; import { screen, render, waitFor, within } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import React from 'react'; import { searchApiRef } from '../../api'; import { SearchContextProvider, useSearch } from '../../context'; diff --git a/plugins/search-react/src/components/SearchFilter/SearchFilter.Autocomplete.tsx b/plugins/search-react/src/components/SearchFilter/SearchFilter.Autocomplete.tsx index 09f571a4c9..fbdfbb1e4c 100644 --- a/plugins/search-react/src/components/SearchFilter/SearchFilter.Autocomplete.tsx +++ b/plugins/search-react/src/components/SearchFilter/SearchFilter.Autocomplete.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { ChangeEvent, useState } from 'react'; +import { ChangeEvent, useState } from 'react'; import Chip from '@material-ui/core/Chip'; import TextField from '@material-ui/core/TextField'; import Autocomplete, { diff --git a/plugins/search-react/src/components/SearchFilter/SearchFilter.stories.tsx b/plugins/search-react/src/components/SearchFilter/SearchFilter.stories.tsx index 028fadc276..4d66bd073f 100644 --- a/plugins/search-react/src/components/SearchFilter/SearchFilter.stories.tsx +++ b/plugins/search-react/src/components/SearchFilter/SearchFilter.stories.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { ComponentType, PropsWithChildren } from 'react'; +import { ComponentType, PropsWithChildren } from 'react'; import Grid from '@material-ui/core/Grid'; import Paper from '@material-ui/core/Paper'; diff --git a/plugins/search-react/src/components/SearchFilter/SearchFilter.test.tsx b/plugins/search-react/src/components/SearchFilter/SearchFilter.test.tsx index e28558b73a..736e3f3f93 100644 --- a/plugins/search-react/src/components/SearchFilter/SearchFilter.test.tsx +++ b/plugins/search-react/src/components/SearchFilter/SearchFilter.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { screen, render, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; diff --git a/plugins/search-react/src/components/SearchFilter/SearchFilter.tsx b/plugins/search-react/src/components/SearchFilter/SearchFilter.tsx index f5f85f3f56..e21c8a8697 100644 --- a/plugins/search-react/src/components/SearchFilter/SearchFilter.tsx +++ b/plugins/search-react/src/components/SearchFilter/SearchFilter.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { ReactElement, ChangeEvent, useRef } from 'react'; +import { ReactElement, ChangeEvent, useRef } from 'react'; import { capitalize } from 'lodash'; import { v4 as uuid } from 'uuid'; import FormControl from '@material-ui/core/FormControl'; diff --git a/plugins/search-react/src/components/SearchFilter/hooks.test.tsx b/plugins/search-react/src/components/SearchFilter/hooks.test.tsx index 28a6fbfd60..4cd5cdb74a 100644 --- a/plugins/search-react/src/components/SearchFilter/hooks.test.tsx +++ b/plugins/search-react/src/components/SearchFilter/hooks.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { ApiProvider } from '@backstage/core-app-api'; import { mockApis, TestApiRegistry } from '@backstage/test-utils'; import { act, renderHook, waitFor } from '@testing-library/react'; diff --git a/plugins/search-react/src/components/SearchPagination/SearchPagination.stories.tsx b/plugins/search-react/src/components/SearchPagination/SearchPagination.stories.tsx index 84d47b94cd..a8318f8789 100644 --- a/plugins/search-react/src/components/SearchPagination/SearchPagination.stories.tsx +++ b/plugins/search-react/src/components/SearchPagination/SearchPagination.stories.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { ComponentType, PropsWithChildren } from 'react'; +import { ComponentType, PropsWithChildren } from 'react'; import Grid from '@material-ui/core/Grid'; import { TestApiProvider } from '@backstage/test-utils'; diff --git a/plugins/search-react/src/components/SearchPagination/SearchPagination.test.tsx b/plugins/search-react/src/components/SearchPagination/SearchPagination.test.tsx index b0a64f0061..94d90cff59 100644 --- a/plugins/search-react/src/components/SearchPagination/SearchPagination.test.tsx +++ b/plugins/search-react/src/components/SearchPagination/SearchPagination.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; diff --git a/plugins/search-react/src/components/SearchPagination/SearchPagination.tsx b/plugins/search-react/src/components/SearchPagination/SearchPagination.tsx index 18b4c5f525..8906b82e79 100644 --- a/plugins/search-react/src/components/SearchPagination/SearchPagination.tsx +++ b/plugins/search-react/src/components/SearchPagination/SearchPagination.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { +import { ReactNode, ChangeEvent, MouseEvent, diff --git a/plugins/search-react/src/components/SearchResult/SearchResult.stories.tsx b/plugins/search-react/src/components/SearchResult/SearchResult.stories.tsx index bc08270c28..9bf39a5069 100644 --- a/plugins/search-react/src/components/SearchResult/SearchResult.stories.tsx +++ b/plugins/search-react/src/components/SearchResult/SearchResult.stories.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { ComponentType, PropsWithChildren } from 'react'; +import { ComponentType, PropsWithChildren } from 'react'; import List from '@material-ui/core/List'; import ListItem from '@material-ui/core/ListItem'; diff --git a/plugins/search-react/src/components/SearchResult/SearchResult.test.tsx b/plugins/search-react/src/components/SearchResult/SearchResult.test.tsx index fc772dd154..27c6fd8607 100644 --- a/plugins/search-react/src/components/SearchResult/SearchResult.test.tsx +++ b/plugins/search-react/src/components/SearchResult/SearchResult.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { waitFor } from '@testing-library/react'; import { renderInTestApp, TestApiProvider } from '@backstage/test-utils'; import { createPlugin } from '@backstage/core-plugin-api'; diff --git a/plugins/search-react/src/components/SearchResult/SearchResult.tsx b/plugins/search-react/src/components/SearchResult/SearchResult.tsx index 5a733ad8bf..b0f4570885 100644 --- a/plugins/search-react/src/components/SearchResult/SearchResult.tsx +++ b/plugins/search-react/src/components/SearchResult/SearchResult.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { ReactNode } from 'react'; +import { ReactNode } from 'react'; import useAsync, { AsyncState } from 'react-use/esm/useAsync'; import { isFunction } from 'lodash'; diff --git a/plugins/search-react/src/components/SearchResultGroup/SearchResultGroup.stories.tsx b/plugins/search-react/src/components/SearchResultGroup/SearchResultGroup.stories.tsx index a016a7c5ed..37c6a4b8fb 100644 --- a/plugins/search-react/src/components/SearchResultGroup/SearchResultGroup.stories.tsx +++ b/plugins/search-react/src/components/SearchResultGroup/SearchResultGroup.stories.tsx @@ -14,12 +14,7 @@ * limitations under the License. */ -import React, { - ComponentType, - useCallback, - useState, - PropsWithChildren, -} from 'react'; +import { ComponentType, useCallback, useState, PropsWithChildren } from 'react'; import Grid from '@material-ui/core/Grid'; import ListItem from '@material-ui/core/ListItem'; diff --git a/plugins/search-react/src/components/SearchResultGroup/SearchResultGroup.test.tsx b/plugins/search-react/src/components/SearchResultGroup/SearchResultGroup.test.tsx index fe1e279dd3..cb274be0a0 100644 --- a/plugins/search-react/src/components/SearchResultGroup/SearchResultGroup.test.tsx +++ b/plugins/search-react/src/components/SearchResultGroup/SearchResultGroup.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; diff --git a/plugins/search-react/src/components/SearchResultGroup/SearchResultGroup.tsx b/plugins/search-react/src/components/SearchResultGroup/SearchResultGroup.tsx index 428e34981b..4c2d300314 100644 --- a/plugins/search-react/src/components/SearchResultGroup/SearchResultGroup.tsx +++ b/plugins/search-react/src/components/SearchResultGroup/SearchResultGroup.tsx @@ -14,7 +14,8 @@ * limitations under the License. */ -import React, { +import { + MouseEvent, ChangeEvent, PropsWithChildren, ReactNode, @@ -391,7 +392,7 @@ export function SearchResultGroupLayout( ...rest } = props; - const handleClick = useCallback((e: React.MouseEvent) => { + const handleClick = useCallback((e: MouseEvent) => { setAnchorEl(e.currentTarget); }, []); diff --git a/plugins/search-react/src/components/SearchResultList/SearchResultList.stories.tsx b/plugins/search-react/src/components/SearchResultList/SearchResultList.stories.tsx index 5b3bd48d41..a006dc89d6 100644 --- a/plugins/search-react/src/components/SearchResultList/SearchResultList.stories.tsx +++ b/plugins/search-react/src/components/SearchResultList/SearchResultList.stories.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { ComponentType, useState, PropsWithChildren } from 'react'; +import { ComponentType, useState, PropsWithChildren } from 'react'; import Grid from '@material-ui/core/Grid'; import ListItem from '@material-ui/core/ListItem'; diff --git a/plugins/search-react/src/components/SearchResultList/SearchResultList.test.tsx b/plugins/search-react/src/components/SearchResultList/SearchResultList.test.tsx index 86ce237135..9b69ef6523 100644 --- a/plugins/search-react/src/components/SearchResultList/SearchResultList.test.tsx +++ b/plugins/search-react/src/components/SearchResultList/SearchResultList.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { screen, waitFor } from '@testing-library/react'; import { diff --git a/plugins/search-react/src/components/SearchResultList/SearchResultList.tsx b/plugins/search-react/src/components/SearchResultList/SearchResultList.tsx index 5abea8d961..48ed8ac92f 100644 --- a/plugins/search-react/src/components/SearchResultList/SearchResultList.tsx +++ b/plugins/search-react/src/components/SearchResultList/SearchResultList.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { ReactNode } from 'react'; +import { ReactNode } from 'react'; import List, { ListProps } from '@material-ui/core/List'; diff --git a/plugins/search-react/src/components/SearchResultPager/SearchResultPager.test.tsx b/plugins/search-react/src/components/SearchResultPager/SearchResultPager.test.tsx index 2a22689285..44851eb703 100644 --- a/plugins/search-react/src/components/SearchResultPager/SearchResultPager.test.tsx +++ b/plugins/search-react/src/components/SearchResultPager/SearchResultPager.test.tsx @@ -14,8 +14,6 @@ * limitations under the License. */ -import React from 'react'; - import { renderInTestApp } from '@backstage/test-utils'; import { waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; diff --git a/plugins/search-react/src/components/SearchResultPager/SearchResultPager.tsx b/plugins/search-react/src/components/SearchResultPager/SearchResultPager.tsx index 14a0dcf395..764bb28129 100644 --- a/plugins/search-react/src/components/SearchResultPager/SearchResultPager.tsx +++ b/plugins/search-react/src/components/SearchResultPager/SearchResultPager.tsx @@ -14,8 +14,6 @@ * limitations under the License. */ -import React from 'react'; - import Button from '@material-ui/core/Button'; import { makeStyles } from '@material-ui/core/styles'; import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos'; diff --git a/plugins/search-react/src/context/SearchContext.test.tsx b/plugins/search-react/src/context/SearchContext.test.tsx index 586c67a830..f604183c7f 100644 --- a/plugins/search-react/src/context/SearchContext.test.tsx +++ b/plugins/search-react/src/context/SearchContext.test.tsx @@ -23,7 +23,6 @@ import { renderHook, } from '@testing-library/react'; import { mockApis, TestApiProvider } from '@backstage/test-utils'; -import React from 'react'; import { SearchContextProvider, useSearch, diff --git a/plugins/search-react/src/context/SearchContext.tsx b/plugins/search-react/src/context/SearchContext.tsx index ef9063ba30..3bd29c881a 100644 --- a/plugins/search-react/src/context/SearchContext.tsx +++ b/plugins/search-react/src/context/SearchContext.tsx @@ -15,7 +15,10 @@ */ import { isEqual } from 'lodash'; -import React, { +import { + SetStateAction, + Dispatch, + DispatchWithoutAction, PropsWithChildren, useCallback, useContext, @@ -46,13 +49,13 @@ import { searchApiRef } from '../api'; */ export type SearchContextValue = { result: AsyncState; - setTerm: React.Dispatch>; - setTypes: React.Dispatch>; - setFilters: React.Dispatch>; - setPageLimit: React.Dispatch>; - setPageCursor: React.Dispatch>; - fetchNextPage?: React.DispatchWithoutAction; - fetchPreviousPage?: React.DispatchWithoutAction; + setTerm: Dispatch>; + setTypes: Dispatch>; + setFilters: Dispatch>; + setPageLimit: Dispatch>; + setPageCursor: Dispatch>; + fetchNextPage?: DispatchWithoutAction; + fetchPreviousPage?: DispatchWithoutAction; } & SearchContextState; /** diff --git a/plugins/search-react/src/extensions.test.tsx b/plugins/search-react/src/extensions.test.tsx index 8305f951ef..bbd1d17838 100644 --- a/plugins/search-react/src/extensions.test.tsx +++ b/plugins/search-react/src/extensions.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; diff --git a/plugins/search-react/src/extensions.tsx b/plugins/search-react/src/extensions.tsx index 75b6eaaa1f..f2760216cd 100644 --- a/plugins/search-react/src/extensions.tsx +++ b/plugins/search-react/src/extensions.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { +import { Fragment, ReactNode, PropsWithChildren, diff --git a/plugins/search/src/alpha.tsx b/plugins/search/src/alpha.tsx index 8c238bab87..651057e9a4 100644 --- a/plugins/search/src/alpha.tsx +++ b/plugins/search/src/alpha.tsx @@ -14,8 +14,6 @@ * limitations under the License. */ -import React from 'react'; - import Grid from '@material-ui/core/Grid'; import Paper from '@material-ui/core/Paper'; import { makeStyles, Theme } from '@material-ui/core/styles'; diff --git a/plugins/search/src/components/HomePageComponent/HomePageSearchBar.stories.tsx b/plugins/search/src/components/HomePageComponent/HomePageSearchBar.stories.tsx index c3a54f442b..a8331396a0 100644 --- a/plugins/search/src/components/HomePageComponent/HomePageSearchBar.stories.tsx +++ b/plugins/search/src/components/HomePageComponent/HomePageSearchBar.stories.tsx @@ -19,7 +19,7 @@ import { searchApiRef } from '@backstage/plugin-search-react'; import { wrapInTestApp, TestApiProvider } from '@backstage/test-utils'; import Grid from '@material-ui/core/Grid'; import { makeStyles } from '@material-ui/core/styles'; -import React, { ComponentType, PropsWithChildren } from 'react'; +import { ComponentType, PropsWithChildren } from 'react'; export default { title: 'Plugins/Home/Components/SearchBar', diff --git a/plugins/search/src/components/HomePageComponent/HomePageSearchBar.test.tsx b/plugins/search/src/components/HomePageComponent/HomePageSearchBar.test.tsx index 069f1bda07..37b7c13665 100644 --- a/plugins/search/src/components/HomePageComponent/HomePageSearchBar.test.tsx +++ b/plugins/search/src/components/HomePageComponent/HomePageSearchBar.test.tsx @@ -14,8 +14,6 @@ * limitations under the License. */ -import React from 'react'; - import { screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; diff --git a/plugins/search/src/components/HomePageComponent/HomePageSearchBar.tsx b/plugins/search/src/components/HomePageComponent/HomePageSearchBar.tsx index 19dfd8190d..fed4afeab1 100644 --- a/plugins/search/src/components/HomePageComponent/HomePageSearchBar.tsx +++ b/plugins/search/src/components/HomePageComponent/HomePageSearchBar.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useCallback, useRef, useState } from 'react'; +import { useCallback, useRef, useState } from 'react'; import { makeStyles } from '@material-ui/core/styles'; import { SearchBarBase, diff --git a/plugins/search/src/components/SearchModal/SearchModal.stories.tsx b/plugins/search/src/components/SearchModal/SearchModal.stories.tsx index 7f789d2e53..266fadeb87 100644 --- a/plugins/search/src/components/SearchModal/SearchModal.stories.tsx +++ b/plugins/search/src/components/SearchModal/SearchModal.stories.tsx @@ -33,7 +33,7 @@ import IconButton from '@material-ui/core/IconButton'; import List from '@material-ui/core/List'; import { makeStyles } from '@material-ui/core/styles'; import CloseIcon from '@material-ui/icons/Close'; -import React, { ComponentType, PropsWithChildren } from 'react'; +import { ComponentType, PropsWithChildren } from 'react'; import { rootRouteRef } from '../../plugin'; import { SearchType } from '../SearchType'; import { SearchModal } from './SearchModal'; diff --git a/plugins/search/src/components/SearchModal/SearchModal.test.tsx b/plugins/search/src/components/SearchModal/SearchModal.test.tsx index 0d0bfdef5c..c404f54e06 100644 --- a/plugins/search/src/components/SearchModal/SearchModal.test.tsx +++ b/plugins/search/src/components/SearchModal/SearchModal.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { screen } from '@testing-library/react'; import { renderInTestApp, TestApiRegistry } from '@backstage/test-utils'; import userEvent from '@testing-library/user-event'; diff --git a/plugins/search/src/components/SearchModal/SearchModal.tsx b/plugins/search/src/components/SearchModal/SearchModal.tsx index b5d932ffdb..454d2eae96 100644 --- a/plugins/search/src/components/SearchModal/SearchModal.tsx +++ b/plugins/search/src/components/SearchModal/SearchModal.tsx @@ -34,7 +34,7 @@ import IconButton from '@material-ui/core/IconButton'; import { makeStyles } from '@material-ui/core/styles'; import ArrowForwardIcon from '@material-ui/icons/ArrowForward'; import CloseIcon from '@material-ui/icons/Close'; -import React, { ReactNode, useCallback, useEffect, useRef } from 'react'; +import { ReactNode, useCallback, useEffect, useRef } from 'react'; import { useNavigate } from 'react-router-dom'; import { rootRouteRef } from '../../plugin'; diff --git a/plugins/search/src/components/SearchModal/useSearchModal.test.tsx b/plugins/search/src/components/SearchModal/useSearchModal.test.tsx index a78f9b92af..3ed8694599 100644 --- a/plugins/search/src/components/SearchModal/useSearchModal.test.tsx +++ b/plugins/search/src/components/SearchModal/useSearchModal.test.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; +import { PropsWithChildren } from 'react'; import { act, renderHook } from '@testing-library/react'; import { useSearchModal } from './useSearchModal'; import { BrowserRouter, Router } from 'react-router-dom'; @@ -85,7 +85,7 @@ describe('useSearchModal', () => { const history = createMemoryHistory({ initialEntries: ['/'] }); const rendered = renderHook(() => useSearchModal(true), { - wrapper: ({ children }: React.PropsWithChildren<{}>) => ( + wrapper: ({ children }: PropsWithChildren<{}>) => ( {children} diff --git a/plugins/search/src/components/SearchModal/useSearchModal.tsx b/plugins/search/src/components/SearchModal/useSearchModal.tsx index b8c59e780a..362a042307 100644 --- a/plugins/search/src/components/SearchModal/useSearchModal.tsx +++ b/plugins/search/src/components/SearchModal/useSearchModal.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { ReactNode, useCallback, useContext, useState } from 'react'; +import { ReactNode, useCallback, useContext, useState } from 'react'; import { useLocation } from 'react-router-dom'; import { createVersionedContext, diff --git a/plugins/search/src/components/SearchPage/SearchPage.test.tsx b/plugins/search/src/components/SearchPage/SearchPage.test.tsx index be9e7f7b10..130b9f04e6 100644 --- a/plugins/search/src/components/SearchPage/SearchPage.test.tsx +++ b/plugins/search/src/components/SearchPage/SearchPage.test.tsx @@ -15,7 +15,6 @@ */ import { renderInTestApp } from '@backstage/test-utils'; -import React from 'react'; import { useLocation } from 'react-router-dom'; import { useSearch } from '@backstage/plugin-search-react'; import { SearchPage } from './SearchPage'; diff --git a/plugins/search/src/components/SearchPage/SearchPage.tsx b/plugins/search/src/components/SearchPage/SearchPage.tsx index 7ea4160216..9baee0d8f9 100644 --- a/plugins/search/src/components/SearchPage/SearchPage.tsx +++ b/plugins/search/src/components/SearchPage/SearchPage.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useEffect } from 'react'; +import { useEffect } from 'react'; import usePrevious from 'react-use/esm/usePrevious'; import qs from 'qs'; import { useLocation, useOutlet } from 'react-router-dom'; diff --git a/plugins/search/src/components/SearchType/SearchType.Accordion.test.tsx b/plugins/search/src/components/SearchType/SearchType.Accordion.test.tsx index d184daa429..6a124884c0 100644 --- a/plugins/search/src/components/SearchType/SearchType.Accordion.test.tsx +++ b/plugins/search/src/components/SearchType/SearchType.Accordion.test.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React from 'react'; +import { ReactNode } from 'react'; import { mockApis, TestApiProvider } from '@backstage/test-utils'; import { act, render, waitFor } from '@testing-library/react'; import user from '@testing-library/user-event'; @@ -67,7 +67,7 @@ describe('SearchType.Accordion', () => { }); }); - const Wrapper = ({ children }: { children: React.ReactNode }) => { + const Wrapper = ({ children }: { children: ReactNode }) => { return ( { name: 'Expected Type', }; - const Wrapper = ({ children }: { children: React.ReactNode }) => { + const Wrapper = ({ children }: { children: ReactNode }) => { return ( { const { setPageCursor, setTypes, types } = useSearch(); const { defaultValue, types: givenTypes } = props; - const changeTab = (_: React.ChangeEvent<{}>, newType: string) => { + const changeTab = (_: ChangeEvent<{}>, newType: string) => { setTypes(newType !== '' ? [newType] : []); setPageCursor(undefined); }; diff --git a/plugins/search/src/components/SearchType/SearchType.stories.tsx b/plugins/search/src/components/SearchType/SearchType.stories.tsx index 8cce7eb5e3..7ace231b40 100644 --- a/plugins/search/src/components/SearchType/SearchType.stories.tsx +++ b/plugins/search/src/components/SearchType/SearchType.stories.tsx @@ -19,7 +19,7 @@ import Paper from '@material-ui/core/Paper'; import CatalogIcon from '@material-ui/icons/MenuBook'; import DocsIcon from '@material-ui/icons/Description'; import UsersGroupsIcon from '@material-ui/icons/Person'; -import React, { ComponentType, PropsWithChildren } from 'react'; +import { ComponentType, PropsWithChildren } from 'react'; import { SearchType } from './SearchType'; import { TestApiProvider } from '@backstage/test-utils'; import { diff --git a/plugins/search/src/components/SearchType/SearchType.test.tsx b/plugins/search/src/components/SearchType/SearchType.test.tsx index 6a393798de..fd014369f7 100644 --- a/plugins/search/src/components/SearchType/SearchType.test.tsx +++ b/plugins/search/src/components/SearchType/SearchType.test.tsx @@ -17,7 +17,6 @@ import { configApiRef } from '@backstage/core-plugin-api'; import { render, screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import React from 'react'; import { SearchContextProvider, searchApiRef, diff --git a/plugins/search/src/components/SearchType/SearchType.tsx b/plugins/search/src/components/SearchType/SearchType.tsx index 6e470ea7a8..48b78f00d3 100644 --- a/plugins/search/src/components/SearchType/SearchType.tsx +++ b/plugins/search/src/components/SearchType/SearchType.tsx @@ -21,7 +21,7 @@ import ListItemText from '@material-ui/core/ListItemText'; import MenuItem from '@material-ui/core/MenuItem'; import Select from '@material-ui/core/Select'; import { makeStyles } from '@material-ui/core/styles'; -import React, { ChangeEvent } from 'react'; +import { ChangeEvent } from 'react'; import useEffectOnce from 'react-use/esm/useEffectOnce'; import { SearchTypeAccordion, diff --git a/plugins/search/src/components/SidebarSearch/SidebarSearch.tsx b/plugins/search/src/components/SidebarSearch/SidebarSearch.tsx index 36ead2ab15..71a90b31e3 100644 --- a/plugins/search/src/components/SidebarSearch/SidebarSearch.tsx +++ b/plugins/search/src/components/SidebarSearch/SidebarSearch.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ import qs from 'qs'; -import React, { useCallback } from 'react'; +import { useCallback } from 'react'; import { useNavigate } from 'react-router-dom'; import { rootRouteRef } from '../../plugin'; diff --git a/plugins/search/src/components/SidebarSearchModal/SidebarSearchModal.tsx b/plugins/search/src/components/SidebarSearchModal/SidebarSearchModal.tsx index e385a4f1fd..ad687a35db 100644 --- a/plugins/search/src/components/SidebarSearchModal/SidebarSearchModal.tsx +++ b/plugins/search/src/components/SidebarSearchModal/SidebarSearchModal.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import SearchIcon from '@material-ui/icons/Search'; import { SidebarItem } from '@backstage/core-components'; import { IconComponent } from '@backstage/core-plugin-api'; diff --git a/plugins/search/src/components/util.test.tsx b/plugins/search/src/components/util.test.tsx index ce1ef351f6..60bab1880f 100644 --- a/plugins/search/src/components/util.test.tsx +++ b/plugins/search/src/components/util.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { renderInTestApp } from '@backstage/test-utils'; import { useNavigateToQuery } from './util'; import { rootRouteRef } from '../plugin'; diff --git a/plugins/signals/dev/index.tsx b/plugins/signals/dev/index.tsx index 629c820a8e..a4505e0804 100644 --- a/plugins/signals/dev/index.tsx +++ b/plugins/signals/dev/index.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; import { createDevApp } from '@backstage/dev-utils'; import { signalsPlugin } from '../src/plugin'; import { CodeSnippet, Content, Header, Page } from '@backstage/core-components'; diff --git a/plugins/techdocs-addons-test-utils/src/test-utils.tsx b/plugins/techdocs-addons-test-utils/src/test-utils.tsx index 1f6337fc23..91b85e7885 100644 --- a/plugins/techdocs-addons-test-utils/src/test-utils.tsx +++ b/plugins/techdocs-addons-test-utils/src/test-utils.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { ReactElement } from 'react'; +import { cloneElement, ReactElement } from 'react'; // Shadow DOM support for the simple and complete DOM testing utilities // https://github.com/testing-library/dom-testing-library/issues/742#issuecomment-674987855 @@ -282,7 +282,7 @@ export class TechDocsAddonTester { > {this.addons.map((addon, index) => - React.cloneElement(addon, { key: index }), + cloneElement(addon, { key: index }), )} diff --git a/plugins/techdocs-module-addons-contrib/src/ExpandableNavigation/ExpandableNavigation.test.tsx b/plugins/techdocs-module-addons-contrib/src/ExpandableNavigation/ExpandableNavigation.test.tsx index a38ea600bc..90a3fa7378 100644 --- a/plugins/techdocs-module-addons-contrib/src/ExpandableNavigation/ExpandableNavigation.test.tsx +++ b/plugins/techdocs-module-addons-contrib/src/ExpandableNavigation/ExpandableNavigation.test.tsx @@ -16,7 +16,6 @@ import { TechDocsAddonTester } from '@backstage/plugin-techdocs-addons-test-utils'; -import React from 'react'; import { fireEvent, waitFor } from '@testing-library/react'; import { ExpandableNavigation } from '../plugin'; diff --git a/plugins/techdocs-module-addons-contrib/src/ExpandableNavigation/ExpandableNavigation.tsx b/plugins/techdocs-module-addons-contrib/src/ExpandableNavigation/ExpandableNavigation.tsx index 6cdf87a49f..5e5bd939fc 100644 --- a/plugins/techdocs-module-addons-contrib/src/ExpandableNavigation/ExpandableNavigation.tsx +++ b/plugins/techdocs-module-addons-contrib/src/ExpandableNavigation/ExpandableNavigation.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useEffect, useCallback, useState } from 'react'; +import { useEffect, useCallback, useState } from 'react'; import { useLocalStorageValue } from '@react-hookz/web'; import { Button, withStyles } from '@material-ui/core'; import ChevronRightIcon from '@material-ui/icons/ChevronRight'; diff --git a/plugins/techdocs-module-addons-contrib/src/LightBox/LightBox.test.tsx b/plugins/techdocs-module-addons-contrib/src/LightBox/LightBox.test.tsx index 2d8cb9592d..7171629d89 100644 --- a/plugins/techdocs-module-addons-contrib/src/LightBox/LightBox.test.tsx +++ b/plugins/techdocs-module-addons-contrib/src/LightBox/LightBox.test.tsx @@ -16,8 +16,6 @@ import { TechDocsAddonTester } from '@backstage/plugin-techdocs-addons-test-utils'; -import React from 'react'; - import { LightBox } from '../plugin'; import { entityPresentationApiRef } from '@backstage/plugin-catalog-react'; diff --git a/plugins/techdocs-module-addons-contrib/src/ReportIssue/IssueLink.test.tsx b/plugins/techdocs-module-addons-contrib/src/ReportIssue/IssueLink.test.tsx index 2bc770cc31..2bc0455194 100644 --- a/plugins/techdocs-module-addons-contrib/src/ReportIssue/IssueLink.test.tsx +++ b/plugins/techdocs-module-addons-contrib/src/ReportIssue/IssueLink.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { screen, fireEvent, waitFor } from '@testing-library/react'; import { analyticsApiRef } from '@backstage/core-plugin-api'; diff --git a/plugins/techdocs-module-addons-contrib/src/ReportIssue/IssueLink.tsx b/plugins/techdocs-module-addons-contrib/src/ReportIssue/IssueLink.tsx index f0d9b194ce..25125ee634 100644 --- a/plugins/techdocs-module-addons-contrib/src/ReportIssue/IssueLink.tsx +++ b/plugins/techdocs-module-addons-contrib/src/ReportIssue/IssueLink.tsx @@ -14,8 +14,6 @@ * limitations under the License. */ -import React from 'react'; - import { makeStyles } from '@material-ui/core'; import BugReportIcon from '@material-ui/icons/BugReport'; diff --git a/plugins/techdocs-module-addons-contrib/src/ReportIssue/ReportIssue.test.tsx b/plugins/techdocs-module-addons-contrib/src/ReportIssue/ReportIssue.test.tsx index 4fba60ea26..1ee9e87e05 100644 --- a/plugins/techdocs-module-addons-contrib/src/ReportIssue/ReportIssue.test.tsx +++ b/plugins/techdocs-module-addons-contrib/src/ReportIssue/ReportIssue.test.tsx @@ -16,7 +16,6 @@ import { TechDocsAddonTester } from '@backstage/plugin-techdocs-addons-test-utils'; -import React from 'react'; import { fireEvent, waitFor } from '@testing-library/react'; import { scmIntegrationsApiRef } from '@backstage/integration-react'; diff --git a/plugins/techdocs-module-addons-contrib/src/ReportIssue/ReportIssue.tsx b/plugins/techdocs-module-addons-contrib/src/ReportIssue/ReportIssue.tsx index 3a5511376c..a018a28131 100644 --- a/plugins/techdocs-module-addons-contrib/src/ReportIssue/ReportIssue.tsx +++ b/plugins/techdocs-module-addons-contrib/src/ReportIssue/ReportIssue.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { useGitRepository } from './hooks'; import { ReportIssueTemplateBuilder } from './types'; import { ADDON_ISSUE_REPO_TYPES_SUPPORTED } from './constants'; diff --git a/plugins/techdocs-module-addons-contrib/src/ReportIssue/ReportIssueContent.tsx b/plugins/techdocs-module-addons-contrib/src/ReportIssue/ReportIssueContent.tsx index c9110cb26d..d8c0298b5e 100644 --- a/plugins/techdocs-module-addons-contrib/src/ReportIssue/ReportIssueContent.tsx +++ b/plugins/techdocs-module-addons-contrib/src/ReportIssue/ReportIssueContent.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useState, useEffect } from 'react'; +import { useState, useEffect } from 'react'; import { makeStyles, Portal, Paper } from '@material-ui/core'; import { useGitTemplate } from './hooks'; import { diff --git a/plugins/techdocs-module-addons-contrib/src/TextSize/TextSize.test.tsx b/plugins/techdocs-module-addons-contrib/src/TextSize/TextSize.test.tsx index 9a02fb12cf..92cab255a7 100644 --- a/plugins/techdocs-module-addons-contrib/src/TextSize/TextSize.test.tsx +++ b/plugins/techdocs-module-addons-contrib/src/TextSize/TextSize.test.tsx @@ -15,7 +15,6 @@ */ import { TechDocsAddonTester } from '@backstage/plugin-techdocs-addons-test-utils'; -import React from 'react'; import { act, fireEvent, waitFor } from '@testing-library/react'; import { TextSize } from '../plugin'; import { useShadowRootElements } from '@backstage/plugin-techdocs-react'; diff --git a/plugins/techdocs-module-addons-contrib/src/TextSize/TextSize.tsx b/plugins/techdocs-module-addons-contrib/src/TextSize/TextSize.tsx index 167f9c7c7c..2029f16b44 100644 --- a/plugins/techdocs-module-addons-contrib/src/TextSize/TextSize.tsx +++ b/plugins/techdocs-module-addons-contrib/src/TextSize/TextSize.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { +import { ChangeEvent, MouseEvent, useMemo, diff --git a/plugins/techdocs-react/src/addons.tsx b/plugins/techdocs-react/src/addons.tsx index a012ce9d36..145fd063c6 100644 --- a/plugins/techdocs-react/src/addons.tsx +++ b/plugins/techdocs-react/src/addons.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useCallback } from 'react'; +import { PropsWithChildren, ComponentType, useCallback } from 'react'; import { useOutlet } from 'react-router-dom'; import { @@ -43,9 +43,7 @@ export const TECHDOCS_ADDONS_WRAPPER_KEY = 'techdocs.addons.wrapper.v1'; * TechDocs Addon registry. * @public */ -export const TechDocsAddons: React.ComponentType< - React.PropsWithChildren<{}> -> = () => null; +export const TechDocsAddons: ComponentType> = () => null; attachComponentData(TechDocsAddons, TECHDOCS_ADDONS_WRAPPER_KEY, true); @@ -74,7 +72,7 @@ export function createTechDocsAddonExtension( * @public */ export function createTechDocsAddonExtension< - TComponentProps extends React.PropsWithChildren<{}>, + TComponentProps extends PropsWithChildren<{}>, >( options: TechDocsAddonOptions, ): Extension<(props: TComponentProps) => JSX.Element | null> { diff --git a/plugins/techdocs-react/src/alpha.ts b/plugins/techdocs-react/src/alpha.ts index 130479561a..83c0444753 100644 --- a/plugins/techdocs-react/src/alpha.ts +++ b/plugins/techdocs-react/src/alpha.ts @@ -13,13 +13,13 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; +import { createElement, ComponentType } from 'react'; + import { TechDocsAddonOptions } from './types'; import { attachComponentData, getComponentData, } from '@backstage/core-plugin-api'; -import { ComponentType } from 'react'; import { getDataKeyByName, TECHDOCS_ADDONS_KEY } from './addons'; import { createExtensionBlueprint, @@ -57,7 +57,7 @@ export const attachTechDocsAddonComponentData =

    ( techDocsAddon: ComponentType

    , data: TechDocsAddonOptions, ) => { - const element = React.createElement(techDocsAddon as ComponentType); + const element = createElement(techDocsAddon as ComponentType); const isDataAttached = getComponentData( element, diff --git a/plugins/techdocs-react/src/component.test.tsx b/plugins/techdocs-react/src/component.test.tsx index 4463932f05..d49a9222bf 100644 --- a/plugins/techdocs-react/src/component.test.tsx +++ b/plugins/techdocs-react/src/component.test.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useState, useEffect } from 'react'; +import { useState, useEffect } from 'react'; import { render, waitFor, screen } from '@testing-library/react'; import { SHADOW_DOM_STYLE_LOAD_EVENT, diff --git a/plugins/techdocs-react/src/component.tsx b/plugins/techdocs-react/src/component.tsx index 7d20565d60..1283ae788e 100644 --- a/plugins/techdocs-react/src/component.tsx +++ b/plugins/techdocs-react/src/component.tsx @@ -14,12 +14,7 @@ * limitations under the License. */ -import React, { - PropsWithChildren, - useState, - useEffect, - useCallback, -} from 'react'; +import { PropsWithChildren, useState, useEffect, useCallback } from 'react'; import { create } from 'jss'; import StylesProvider from '@material-ui/styles/StylesProvider'; diff --git a/plugins/techdocs-react/src/context.test.tsx b/plugins/techdocs-react/src/context.test.tsx index 6605d9ceaf..719a067953 100644 --- a/plugins/techdocs-react/src/context.test.tsx +++ b/plugins/techdocs-react/src/context.test.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React from 'react'; +import { ReactNode } from 'react'; import { renderHook, act, waitFor } from '@testing-library/react'; import { ThemeProvider } from '@material-ui/core/styles'; @@ -75,7 +75,7 @@ const wrapper = ({ }: { entityRef?: CompoundEntityRef; config?: JsonObject; - children: React.ReactNode; + children: ReactNode; }) => ( { export const EmbeddedDocsRouter = ( props: PropsWithChildren<{ - emptyState?: React.ReactElement; + emptyState?: ReactElement; withSearch?: boolean; }>, ) => { diff --git a/plugins/techdocs/src/alpha.tsx b/plugins/techdocs/src/alpha.tsx index 9ec6b733c5..98021304c6 100644 --- a/plugins/techdocs/src/alpha.tsx +++ b/plugins/techdocs/src/alpha.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import LibraryBooks from '@material-ui/icons/LibraryBooks'; import { createFrontendPlugin, diff --git a/plugins/techdocs/src/home/components/DefaultTechDocsHome.test.tsx b/plugins/techdocs/src/home/components/DefaultTechDocsHome.test.tsx index 4c3be25325..9934c7d53e 100644 --- a/plugins/techdocs/src/home/components/DefaultTechDocsHome.test.tsx +++ b/plugins/techdocs/src/home/components/DefaultTechDocsHome.test.tsx @@ -28,7 +28,6 @@ import { renderInTestApp, } from '@backstage/test-utils'; import { screen } from '@testing-library/react'; -import React from 'react'; import { rootDocsRouteRef } from '../../routes'; import { DefaultTechDocsHome } from './DefaultTechDocsHome'; diff --git a/plugins/techdocs/src/home/components/DefaultTechDocsHome.tsx b/plugins/techdocs/src/home/components/DefaultTechDocsHome.tsx index 9b6ee490a4..03c9aae057 100644 --- a/plugins/techdocs/src/home/components/DefaultTechDocsHome.tsx +++ b/plugins/techdocs/src/home/components/DefaultTechDocsHome.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React from 'react'; +import { ReactNode, FC } from 'react'; import { Content, ContentHeader, @@ -56,10 +56,10 @@ export const DefaultTechDocsHome = (props: TechDocsIndexPageProps) => { PageWrapper, CustomHeader, } = props; - const Wrapper: React.FC<{ - children: React.ReactNode; + const Wrapper: FC<{ + children: ReactNode; }> = PageWrapper ? PageWrapper : TechDocsPageWrapper; - const Header: React.FC = + const Header: FC = CustomHeader || (() => ( diff --git a/plugins/techdocs/src/home/components/Grids/DocsCardGrid.test.tsx b/plugins/techdocs/src/home/components/Grids/DocsCardGrid.test.tsx index 852c638ffd..68dd7ef950 100644 --- a/plugins/techdocs/src/home/components/Grids/DocsCardGrid.test.tsx +++ b/plugins/techdocs/src/home/components/Grids/DocsCardGrid.test.tsx @@ -17,7 +17,6 @@ import { configApiRef } from '@backstage/core-plugin-api'; import { renderInTestApp } from '@backstage/test-utils'; import { screen } from '@testing-library/react'; -import React from 'react'; import { rootDocsRouteRef } from '../../../routes'; import { DocsCardGrid } from './DocsCardGrid'; diff --git a/plugins/techdocs/src/home/components/Grids/DocsCardGrid.tsx b/plugins/techdocs/src/home/components/Grids/DocsCardGrid.tsx index d2947b5f64..8dfbbfef7c 100644 --- a/plugins/techdocs/src/home/components/Grids/DocsCardGrid.tsx +++ b/plugins/techdocs/src/home/components/Grids/DocsCardGrid.tsx @@ -27,7 +27,6 @@ import Card from '@material-ui/core/Card'; import CardActions from '@material-ui/core/CardActions'; import CardContent from '@material-ui/core/CardContent'; import CardMedia from '@material-ui/core/CardMedia'; -import React from 'react'; /** * Props for {@link DocsCardGrid} diff --git a/plugins/techdocs/src/home/components/Grids/EntityListDocsGrid.test.tsx b/plugins/techdocs/src/home/components/Grids/EntityListDocsGrid.test.tsx index 25471d0769..8d87125c13 100644 --- a/plugins/techdocs/src/home/components/Grids/EntityListDocsGrid.test.tsx +++ b/plugins/techdocs/src/home/components/Grids/EntityListDocsGrid.test.tsx @@ -31,7 +31,6 @@ import { mockApis, } from '@backstage/test-utils'; import { screen } from '@testing-library/react'; -import React from 'react'; import { rootDocsRouteRef } from '../../../routes'; import { EntityListDocsGrid } from './EntityListDocsGrid'; diff --git a/plugins/techdocs/src/home/components/Grids/EntityListDocsGrid.tsx b/plugins/techdocs/src/home/components/Grids/EntityListDocsGrid.tsx index 2f62c24646..a419598066 100644 --- a/plugins/techdocs/src/home/components/Grids/EntityListDocsGrid.tsx +++ b/plugins/techdocs/src/home/components/Grids/EntityListDocsGrid.tsx @@ -29,7 +29,7 @@ import { useEntityOwnership, } from '@backstage/plugin-catalog-react'; import Typography from '@material-ui/core/Typography'; -import React from 'react'; +import { ReactNode } from 'react'; /** * Props for {@link EntityListDocsGrid} @@ -37,7 +37,7 @@ import React from 'react'; * @public */ export type DocsGroupConfig = { - title: React.ReactNode; + title: ReactNode; filterPredicate: ((entity: Entity) => boolean) | string; }; @@ -76,7 +76,7 @@ const EntityListDocsGridGroup = (props: { ); }); - const titleComponent: React.ReactNode = (() => { + const titleComponent: ReactNode = (() => { return typeof group.title === 'string' ? ( ) : ( diff --git a/plugins/techdocs/src/home/components/Grids/InfoCardGrid.test.tsx b/plugins/techdocs/src/home/components/Grids/InfoCardGrid.test.tsx index e1e3ce1511..ef7188a840 100644 --- a/plugins/techdocs/src/home/components/Grids/InfoCardGrid.test.tsx +++ b/plugins/techdocs/src/home/components/Grids/InfoCardGrid.test.tsx @@ -20,17 +20,17 @@ import { entityPresentationApiRef } from '@backstage/plugin-catalog-react'; import { DefaultEntityPresentationApi } from '@backstage/plugin-catalog'; import { catalogApiMock } from '@backstage/plugin-catalog-react/testUtils'; -import React from 'react'; +import { PropsWithChildren, ComponentType, ReactNode } from 'react'; import { rootDocsRouteRef } from '../../../routes'; import { InfoCardGrid } from './InfoCardGrid'; describe('Entity Info Card Grid', () => { const catalogApi = catalogApiMock(); - let Wrapper: React.ComponentType>; + let Wrapper: ComponentType>; beforeEach(() => { jest.resetAllMocks(); - Wrapper = ({ children }: { children?: React.ReactNode }) => ( + Wrapper = ({ children }: { children?: ReactNode }) => ( ) { const { actions, columns, data, isLoading, options } = props; const { updateFilters, setLimit, setOffset, limit, totalItems, offset } = useEntityList(); - const [page, setPage] = React.useState( + const [page, setPage] = useState( offset && limit ? Math.floor(offset / limit) : 0, ); diff --git a/plugins/techdocs/src/home/components/Tables/actions.tsx b/plugins/techdocs/src/home/components/Tables/actions.tsx index bc89d76560..76cc5ceb0b 100644 --- a/plugins/techdocs/src/home/components/Tables/actions.tsx +++ b/plugins/techdocs/src/home/components/Tables/actions.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import ShareIcon from '@material-ui/icons/Share'; import { DocsTableRow } from './types'; import { FavoriteToggleIcon } from '@backstage/core-components'; diff --git a/plugins/techdocs/src/home/components/Tables/columns.tsx b/plugins/techdocs/src/home/components/Tables/columns.tsx index 9947e1de9e..9e86f216e9 100644 --- a/plugins/techdocs/src/home/components/Tables/columns.tsx +++ b/plugins/techdocs/src/home/components/Tables/columns.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { Link, SubvalueCell, TableColumn } from '@backstage/core-components'; import { EntityRefLinks } from '@backstage/plugin-catalog-react'; import { Entity } from '@backstage/catalog-model'; diff --git a/plugins/techdocs/src/home/components/TechDocsCustomHome.test.tsx b/plugins/techdocs/src/home/components/TechDocsCustomHome.test.tsx index 9295d933a7..53c023cae4 100644 --- a/plugins/techdocs/src/home/components/TechDocsCustomHome.test.tsx +++ b/plugins/techdocs/src/home/components/TechDocsCustomHome.test.tsx @@ -23,7 +23,7 @@ import { ContentHeader, PageWithHeader } from '@backstage/core-components'; import { catalogApiMock } from '@backstage/plugin-catalog-react/testUtils'; import { renderInTestApp, TestApiRegistry } from '@backstage/test-utils'; import { screen } from '@testing-library/react'; -import React from 'react'; +import { PropsWithChildren } from 'react'; import { TechDocsCustomHome, PanelType } from './TechDocsCustomHome'; import { ApiProvider } from '@backstage/core-app-api'; import { rootDocsRouteRef } from '../../routes'; @@ -159,7 +159,7 @@ describe('TechDocsCustomHome', () => { ) => ( + CustomPageWrapper={({ children }: PropsWithChildren<{}>) => ( ; linkContent?: string | JSX.Element; linkDestination?: (entity: Entity) => string | undefined; - PageWrapper?: React.FC; - CustomHeader?: React.FC; + PageWrapper?: FC; + CustomHeader?: FC; } /** @@ -146,7 +146,7 @@ export const CustomDocsPanel = ({ ); }); - const Header: React.FC = + const Header: FC = config.panelProps?.CustomHeader || (() => ( @@ -182,7 +182,7 @@ export const CustomDocsPanel = ({ export type TechDocsCustomHomeProps = { tabsConfig: TabsConfig; filter?: EntityFilterQuery; - CustomPageWrapper?: React.FC; + CustomPageWrapper?: FC; }; export const TechDocsCustomHome = (props: TechDocsCustomHomeProps) => { diff --git a/plugins/techdocs/src/home/components/TechDocsIndexPage.test.tsx b/plugins/techdocs/src/home/components/TechDocsIndexPage.test.tsx index 8173cf1f94..be20198625 100644 --- a/plugins/techdocs/src/home/components/TechDocsIndexPage.test.tsx +++ b/plugins/techdocs/src/home/components/TechDocsIndexPage.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { renderInTestApp } from '@backstage/test-utils'; import { useOutlet } from 'react-router-dom'; import { TechDocsIndexPage } from './TechDocsIndexPage'; diff --git a/plugins/techdocs/src/home/components/TechDocsIndexPage.tsx b/plugins/techdocs/src/home/components/TechDocsIndexPage.tsx index 221839c492..499b878ced 100644 --- a/plugins/techdocs/src/home/components/TechDocsIndexPage.tsx +++ b/plugins/techdocs/src/home/components/TechDocsIndexPage.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React from 'react'; +import { FC } from 'react'; import { useOutlet } from 'react-router-dom'; import { TableColumn, @@ -41,8 +41,8 @@ export type TechDocsIndexPageProps = { ownerPickerMode?: EntityOwnerPickerProps['mode']; pagination?: EntityListPagination; options?: TableOptions; - PageWrapper?: React.FC; - CustomHeader?: React.FC; + PageWrapper?: FC; + CustomHeader?: FC; }; export const TechDocsIndexPage = (props: TechDocsIndexPageProps) => { diff --git a/plugins/techdocs/src/home/components/TechDocsPageWrapper.tsx b/plugins/techdocs/src/home/components/TechDocsPageWrapper.tsx index c07876f7f9..af0d58ce6b 100644 --- a/plugins/techdocs/src/home/components/TechDocsPageWrapper.tsx +++ b/plugins/techdocs/src/home/components/TechDocsPageWrapper.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React from 'react'; +import { ReactNode, FC } from 'react'; import { PageWithHeader } from '@backstage/core-components'; import { useApi, configApiRef } from '@backstage/core-plugin-api'; @@ -25,8 +25,8 @@ import { useApi, configApiRef } from '@backstage/core-plugin-api'; * @public */ export type TechDocsPageWrapperProps = { - children?: React.ReactNode; - CustomPageWrapper?: React.FC<{ children?: React.ReactNode }>; + children?: ReactNode; + CustomPageWrapper?: FC<{ children?: ReactNode }>; }; /** diff --git a/plugins/techdocs/src/reader/components/TechDocsBuildLogs.test.tsx b/plugins/techdocs/src/reader/components/TechDocsBuildLogs.test.tsx index 34aaf76394..c43bd44055 100644 --- a/plugins/techdocs/src/reader/components/TechDocsBuildLogs.test.tsx +++ b/plugins/techdocs/src/reader/components/TechDocsBuildLogs.test.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { ReactNode } from 'react'; +import { ReactNode } from 'react'; import { renderInTestApp } from '@backstage/test-utils'; import { TechDocsBuildLogs, diff --git a/plugins/techdocs/src/reader/components/TechDocsBuildLogs.tsx b/plugins/techdocs/src/reader/components/TechDocsBuildLogs.tsx index 483c60d607..cde1ea9835 100644 --- a/plugins/techdocs/src/reader/components/TechDocsBuildLogs.tsx +++ b/plugins/techdocs/src/reader/components/TechDocsBuildLogs.tsx @@ -22,7 +22,7 @@ import IconButton from '@material-ui/core/IconButton'; import Typography from '@material-ui/core/Typography'; import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; import Close from '@material-ui/icons/Close'; -import React, { useState } from 'react'; +import { useState } from 'react'; const useDrawerStyles = makeStyles((theme: Theme) => createStyles({ diff --git a/plugins/techdocs/src/reader/components/TechDocsNotFound.test.tsx b/plugins/techdocs/src/reader/components/TechDocsNotFound.test.tsx index 84c7275228..0e8eb228ae 100644 --- a/plugins/techdocs/src/reader/components/TechDocsNotFound.test.tsx +++ b/plugins/techdocs/src/reader/components/TechDocsNotFound.test.tsx @@ -15,7 +15,6 @@ */ import { TechDocsNotFound } from './TechDocsNotFound'; -import React from 'react'; import { screen, waitFor } from '@testing-library/react'; import { mockApis, diff --git a/plugins/techdocs/src/reader/components/TechDocsNotFound.tsx b/plugins/techdocs/src/reader/components/TechDocsNotFound.tsx index 858f9c5afc..e1657c5fc2 100644 --- a/plugins/techdocs/src/reader/components/TechDocsNotFound.tsx +++ b/plugins/techdocs/src/reader/components/TechDocsNotFound.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useEffect } from 'react'; +import { useEffect } from 'react'; import { useApi, configApiRef, useAnalytics } from '@backstage/core-plugin-api'; import { ErrorPage } from '@backstage/core-components'; import { useTechDocsReaderPage } from '@backstage/plugin-techdocs-react'; diff --git a/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.test.tsx b/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.test.tsx index 93b5fdc880..2af4915ef5 100644 --- a/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.test.tsx +++ b/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.test.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React from 'react'; +import { ReactNode } from 'react'; import { scmIntegrationsApiRef } from '@backstage/integration-react'; import { @@ -118,7 +118,7 @@ const configApi = mockApis.config({ data: { app: { baseUrl: 'http://localhost:3000' } }, }); -const Wrapper = ({ children }: { children: React.ReactNode }) => { +const Wrapper = ({ children }: { children: ReactNode }) => { return ( { child => (child as ReactElement)?.props?.children ?? [], ); - const page: React.ReactNode = grandChildren.find( + const page: ReactNode = grandChildren.find( grandChild => !getComponentData(grandChild, TECHDOCS_ADDONS_WRAPPER_KEY) && !getComponentData(grandChild, TECHDOCS_ADDONS_KEY), diff --git a/plugins/techdocs/src/reader/components/TechDocsReaderPage/context.test.tsx b/plugins/techdocs/src/reader/components/TechDocsReaderPage/context.test.tsx index d8e87c3686..e98b328cc9 100644 --- a/plugins/techdocs/src/reader/components/TechDocsReaderPage/context.test.tsx +++ b/plugins/techdocs/src/reader/components/TechDocsReaderPage/context.test.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React from 'react'; +import { ReactNode } from 'react'; import { renderHook, waitFor } from '@testing-library/react'; import { ThemeProvider } from '@material-ui/core/styles'; @@ -66,7 +66,7 @@ const wrapper = ({ children, }: { entityRef?: CompoundEntityRef; - children: React.ReactNode; + children: ReactNode; }) => ( ( diff --git a/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/TechDocsReaderPageContent.tsx b/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/TechDocsReaderPageContent.tsx index 9f8a991ba9..1db97a82b8 100644 --- a/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/TechDocsReaderPageContent.tsx +++ b/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/TechDocsReaderPageContent.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useCallback, useEffect } from 'react'; +import { useCallback, useEffect } from 'react'; import Grid from '@material-ui/core/Grid'; import { makeStyles } from '@material-ui/core/styles'; diff --git a/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/TechDocsReaderPageContentAddons.tsx b/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/TechDocsReaderPageContentAddons.tsx index edcc90359d..7809abfbe6 100644 --- a/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/TechDocsReaderPageContentAddons.tsx +++ b/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/TechDocsReaderPageContentAddons.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import Portal from '@material-ui/core/Portal'; import { useTechDocsAddons, diff --git a/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/useNavigateUrl.test.tsx b/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/useNavigateUrl.test.tsx index f2894e4d21..efde157b82 100644 --- a/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/useNavigateUrl.test.tsx +++ b/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/useNavigateUrl.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { mockApis, renderInTestApp, diff --git a/plugins/techdocs/src/reader/components/TechDocsReaderPageHeader/TechDocsReaderPageHeader.test.tsx b/plugins/techdocs/src/reader/components/TechDocsReaderPageHeader/TechDocsReaderPageHeader.test.tsx index f6b93f46e0..6f6ee81c8b 100644 --- a/plugins/techdocs/src/reader/components/TechDocsReaderPageHeader/TechDocsReaderPageHeader.test.tsx +++ b/plugins/techdocs/src/reader/components/TechDocsReaderPageHeader/TechDocsReaderPageHeader.test.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; +import { ReactNode } from 'react'; import { CompoundEntityRef } from '@backstage/catalog-model'; import { @@ -91,7 +91,7 @@ const Wrapper = ({ children, }: { entityRef?: CompoundEntityRef; - children: React.ReactNode; + children: ReactNode; }) => ( { - let Wrapper: React.ComponentType>; + let Wrapper: ComponentType>; const techdocsStorageApi: jest.Mocked = { getApiOrigin: jest.fn(), @@ -38,7 +38,7 @@ describe('useReaderState', () => { }; beforeEach(() => { - Wrapper = ({ children }: { children?: React.ReactNode }) => ( + Wrapper = ({ children }: { children?: ReactNode }) => ( {children} diff --git a/plugins/techdocs/src/reader/transformers/addGitFeedbackLink.ts b/plugins/techdocs/src/reader/transformers/addGitFeedbackLink.ts index 58876cd806..de52512831 100644 --- a/plugins/techdocs/src/reader/transformers/addGitFeedbackLink.ts +++ b/plugins/techdocs/src/reader/transformers/addGitFeedbackLink.ts @@ -20,7 +20,7 @@ import { ScmIntegrationRegistry, } from '@backstage/integration'; import FeedbackOutlinedIcon from '@material-ui/icons/FeedbackOutlined'; -import React from 'react'; +import { createElement } from 'react'; import parseGitUrl from 'git-url-parse'; import { renderReactElement } from './renderReactElement'; @@ -75,7 +75,7 @@ export const addGitFeedbackLink = ( default: return dom; } - renderReactElement(React.createElement(FeedbackOutlinedIcon), feedbackLink); + renderReactElement(createElement(FeedbackOutlinedIcon), feedbackLink); feedbackLink.style.paddingLeft = '5px'; feedbackLink.title = 'Leave feedback for this page'; feedbackLink.id = 'git-feedback-link'; diff --git a/plugins/techdocs/src/reader/transformers/addSidebarToggle.ts b/plugins/techdocs/src/reader/transformers/addSidebarToggle.ts index 352e396abf..61af6313ae 100644 --- a/plugins/techdocs/src/reader/transformers/addSidebarToggle.ts +++ b/plugins/techdocs/src/reader/transformers/addSidebarToggle.ts @@ -16,7 +16,7 @@ import type { Transformer } from './transformer'; import MenuIcon from '@material-ui/icons/Menu'; -import React from 'react'; +import { createElement } from 'react'; import { renderReactElement } from './renderReactElement'; export const addSidebarToggle = (): Transformer => { @@ -33,7 +33,7 @@ export const addSidebarToggle = (): Transformer => { } const toggleSidebar = mkdocsToggleSidebar.cloneNode() as HTMLLabelElement; - renderReactElement(React.createElement(MenuIcon), toggleSidebar); + renderReactElement(createElement(MenuIcon), toggleSidebar); toggleSidebar.id = 'toggle-sidebar'; toggleSidebar.title = 'Toggle Sidebar'; toggleSidebar.classList.add('md-content__button'); diff --git a/plugins/techdocs/src/reader/transformers/copyToClipboard.tsx b/plugins/techdocs/src/reader/transformers/copyToClipboard.tsx index 53f407586a..a703868ee0 100644 --- a/plugins/techdocs/src/reader/transformers/copyToClipboard.tsx +++ b/plugins/techdocs/src/reader/transformers/copyToClipboard.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useState, useCallback } from 'react'; +import { useState, useCallback } from 'react'; import { renderReactElement } from './renderReactElement'; import { ThemeProvider } from '@material-ui/core/styles'; import SvgIcon from '@material-ui/core/SvgIcon'; diff --git a/plugins/techdocs/src/reader/transformers/handleMetaRedirects.tsx b/plugins/techdocs/src/reader/transformers/handleMetaRedirects.tsx index 04b7b27ba2..149e56d77f 100644 --- a/plugins/techdocs/src/reader/transformers/handleMetaRedirects.tsx +++ b/plugins/techdocs/src/reader/transformers/handleMetaRedirects.tsx @@ -16,7 +16,6 @@ import { Transformer } from './transformer'; import { normalizeUrl } from './rewriteDocLinks'; -import React from 'react'; import { renderReactElement } from './renderReactElement'; import { TechDocsRedirectNotification } from '../components/TechDocsRedirectNotification'; diff --git a/plugins/techdocs/src/reader/transformers/html/transformer.sanitizer.test.tsx b/plugins/techdocs/src/reader/transformers/html/transformer.sanitizer.test.tsx index ea609e04f8..f79a41a73d 100644 --- a/plugins/techdocs/src/reader/transformers/html/transformer.sanitizer.test.tsx +++ b/plugins/techdocs/src/reader/transformers/html/transformer.sanitizer.test.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { FC, PropsWithChildren } from 'react'; +import { FC, PropsWithChildren } from 'react'; import { renderHook } from '@testing-library/react'; import { ConfigReader } from '@backstage/core-app-api'; diff --git a/plugins/techdocs/src/reader/transformers/html/transformer.test.tsx b/plugins/techdocs/src/reader/transformers/html/transformer.test.tsx index e45d66c676..8f565e3f00 100644 --- a/plugins/techdocs/src/reader/transformers/html/transformer.test.tsx +++ b/plugins/techdocs/src/reader/transformers/html/transformer.test.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { FC, PropsWithChildren } from 'react'; +import { FC, PropsWithChildren } from 'react'; import { renderHook } from '@testing-library/react'; import { ConfigReader } from '@backstage/core-app-api'; diff --git a/plugins/techdocs/src/reader/transformers/styles/transformer.test.tsx b/plugins/techdocs/src/reader/transformers/styles/transformer.test.tsx index 6cfde4f09d..bdedd5694e 100644 --- a/plugins/techdocs/src/reader/transformers/styles/transformer.test.tsx +++ b/plugins/techdocs/src/reader/transformers/styles/transformer.test.tsx @@ -17,7 +17,7 @@ import { renderHook } from '@testing-library/react'; import { useStylesTransformer } from './transformer'; import { createTheme, ThemeProvider } from '@material-ui/core/styles'; -import React from 'react'; +import { ReactNode } from 'react'; describe('Transformers > Styles', () => { it('should return a function that injects all styles into a given dom element', () => { @@ -60,7 +60,7 @@ describe('Transformers > Styles', () => { }, }, }); - const wrapper = ({ children }: { children: React.ReactNode }) => ( + const wrapper = ({ children }: { children: ReactNode }) => ( {children} ); const { result } = renderHook(() => useStylesTransformer(), { wrapper }); @@ -88,7 +88,7 @@ describe('Transformers > Styles', () => { }, }, }); - const wrapper = ({ children }: { children: React.ReactNode }) => ( + const wrapper = ({ children }: { children: ReactNode }) => ( {children} ); const { result } = renderHook(() => useStylesTransformer(), { wrapper }); @@ -116,7 +116,7 @@ describe('Transformers > Styles', () => { }, }, }); - const wrapper = ({ children }: { children: React.ReactNode }) => ( + const wrapper = ({ children }: { children: ReactNode }) => ( {children} ); const { result } = renderHook(() => useStylesTransformer(), { wrapper }); diff --git a/plugins/techdocs/src/search/components/TechDocsSearch.test.tsx b/plugins/techdocs/src/search/components/TechDocsSearch.test.tsx index 35770d43b5..f7e67e12cf 100644 --- a/plugins/techdocs/src/search/components/TechDocsSearch.test.tsx +++ b/plugins/techdocs/src/search/components/TechDocsSearch.test.tsx @@ -25,7 +25,7 @@ import { within, act, } from '@testing-library/react'; -import React, { useState } from 'react'; +import { useState } from 'react'; import { TechDocsSearch } from './TechDocsSearch'; const entityId = { diff --git a/plugins/techdocs/src/search/components/TechDocsSearch.tsx b/plugins/techdocs/src/search/components/TechDocsSearch.tsx index b283581fa2..a9834c8b69 100644 --- a/plugins/techdocs/src/search/components/TechDocsSearch.tsx +++ b/plugins/techdocs/src/search/components/TechDocsSearch.tsx @@ -21,7 +21,7 @@ import { SearchContextProvider, useSearch, } from '@backstage/plugin-search-react'; -import React, { useEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { TechDocsSearchResultListItem } from './TechDocsSearchResultListItem'; diff --git a/plugins/techdocs/src/search/components/TechDocsSearchResultListItem.test.tsx b/plugins/techdocs/src/search/components/TechDocsSearchResultListItem.test.tsx index 9ba88a78ff..c7e6464d6a 100644 --- a/plugins/techdocs/src/search/components/TechDocsSearchResultListItem.test.tsx +++ b/plugins/techdocs/src/search/components/TechDocsSearchResultListItem.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { TechDocsSearchResultListItem } from './TechDocsSearchResultListItem'; import { renderInTestApp } from '@backstage/test-utils'; diff --git a/plugins/techdocs/src/search/components/TechDocsSearchResultListItem.tsx b/plugins/techdocs/src/search/components/TechDocsSearchResultListItem.tsx index 4f7deab47c..9c0fd8b582 100644 --- a/plugins/techdocs/src/search/components/TechDocsSearchResultListItem.tsx +++ b/plugins/techdocs/src/search/components/TechDocsSearchResultListItem.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { PropsWithChildren, ReactNode } from 'react'; +import { PropsWithChildren, ReactNode } from 'react'; import ListItemIcon from '@material-ui/core/ListItemIcon'; import ListItemText from '@material-ui/core/ListItemText'; import { makeStyles } from '@material-ui/core/styles'; diff --git a/plugins/user-settings/README.md b/plugins/user-settings/README.md index ee26a5f332..c0ee15845c 100644 --- a/plugins/user-settings/README.md +++ b/plugins/user-settings/README.md @@ -96,7 +96,6 @@ we have created in Backstage's example app. To change the layout altogether, create a custom page in `packages/app/src/components/user-settings/SettingsPage.tsx`: ```tsx -import React from 'react'; import { SettingsLayout, UserSettingsGeneral, diff --git a/plugins/user-settings/dev/index.tsx b/plugins/user-settings/dev/index.tsx index d7041e96a8..f42ba8a2e8 100644 --- a/plugins/user-settings/dev/index.tsx +++ b/plugins/user-settings/dev/index.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { CatalogEntityPage } from '@backstage/plugin-catalog'; import { createDevApp } from '@backstage/dev-utils'; import { UserSettingsPage, userSettingsPlugin } from '../src'; diff --git a/plugins/user-settings/src/alpha.tsx b/plugins/user-settings/src/alpha.tsx index bdd16acf0f..a6b297d443 100644 --- a/plugins/user-settings/src/alpha.tsx +++ b/plugins/user-settings/src/alpha.tsx @@ -28,8 +28,6 @@ import { import SettingsIcon from '@material-ui/icons/Settings'; import { settingsRouteRef } from './plugin'; -import React from 'react'; - export * from './translation'; const userSettingsPage = PageBlueprint.makeWithOverrides({ diff --git a/plugins/user-settings/src/components/AuthProviders/DefaultProviderSettings.tsx b/plugins/user-settings/src/components/AuthProviders/DefaultProviderSettings.tsx index 772ec80982..71afb789b7 100644 --- a/plugins/user-settings/src/components/AuthProviders/DefaultProviderSettings.tsx +++ b/plugins/user-settings/src/components/AuthProviders/DefaultProviderSettings.tsx @@ -15,7 +15,6 @@ */ import Star from '@material-ui/icons/Star'; -import React from 'react'; import { ProviderSettingsItem } from './ProviderSettingsItem'; import { githubAuthApiRef, diff --git a/plugins/user-settings/src/components/AuthProviders/EmptyProviders.tsx b/plugins/user-settings/src/components/AuthProviders/EmptyProviders.tsx index 952ba3af30..05c4e52735 100644 --- a/plugins/user-settings/src/components/AuthProviders/EmptyProviders.tsx +++ b/plugins/user-settings/src/components/AuthProviders/EmptyProviders.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import Button from '@material-ui/core/Button'; import Typography from '@material-ui/core/Typography'; import { CodeSnippet, EmptyState } from '@backstage/core-components'; diff --git a/plugins/user-settings/src/components/AuthProviders/ProviderSettingsAvatar.tsx b/plugins/user-settings/src/components/AuthProviders/ProviderSettingsAvatar.tsx index c09dac5985..08e50aa816 100644 --- a/plugins/user-settings/src/components/AuthProviders/ProviderSettingsAvatar.tsx +++ b/plugins/user-settings/src/components/AuthProviders/ProviderSettingsAvatar.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import Avatar from '@material-ui/core/Avatar'; import { makeStyles, Theme } from '@material-ui/core/styles'; import { sidebarConfig } from '@backstage/core-components'; diff --git a/plugins/user-settings/src/components/AuthProviders/ProviderSettingsItem.tsx b/plugins/user-settings/src/components/AuthProviders/ProviderSettingsItem.tsx index 07afd8083e..b64264271a 100644 --- a/plugins/user-settings/src/components/AuthProviders/ProviderSettingsItem.tsx +++ b/plugins/user-settings/src/components/AuthProviders/ProviderSettingsItem.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; import Button from '@material-ui/core/Button'; import Grid from '@material-ui/core/Grid'; import ListItem from '@material-ui/core/ListItem'; diff --git a/plugins/user-settings/src/components/AuthProviders/UserSettingsAuthProviders.test.tsx b/plugins/user-settings/src/components/AuthProviders/UserSettingsAuthProviders.test.tsx index 47bc6e575d..53cb9bbbd5 100644 --- a/plugins/user-settings/src/components/AuthProviders/UserSettingsAuthProviders.test.tsx +++ b/plugins/user-settings/src/components/AuthProviders/UserSettingsAuthProviders.test.tsx @@ -16,7 +16,6 @@ import { TestApiRegistry, renderInTestApp } from '@backstage/test-utils'; import { fireEvent, screen } from '@testing-library/react'; -import React from 'react'; import { UserSettingsAuthProviders } from './UserSettingsAuthProviders'; import { ApiProvider, ConfigReader } from '@backstage/core-app-api'; diff --git a/plugins/user-settings/src/components/AuthProviders/UserSettingsAuthProviders.tsx b/plugins/user-settings/src/components/AuthProviders/UserSettingsAuthProviders.tsx index e83440e0c5..f22cd5e2f6 100644 --- a/plugins/user-settings/src/components/AuthProviders/UserSettingsAuthProviders.tsx +++ b/plugins/user-settings/src/components/AuthProviders/UserSettingsAuthProviders.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import List from '@material-ui/core/List'; import { EmptyProviders } from './EmptyProviders'; import { DefaultProviderSettings } from './DefaultProviderSettings'; diff --git a/plugins/user-settings/src/components/DefaultSettingsPage/DefaultSettingsPage.test.tsx b/plugins/user-settings/src/components/DefaultSettingsPage/DefaultSettingsPage.test.tsx index 8a2e882aa8..d5a7d5d512 100644 --- a/plugins/user-settings/src/components/DefaultSettingsPage/DefaultSettingsPage.test.tsx +++ b/plugins/user-settings/src/components/DefaultSettingsPage/DefaultSettingsPage.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { renderInTestApp, TestApiProvider } from '@backstage/test-utils'; import { DefaultSettingsPage } from './DefaultSettingsPage'; import { UserSettingsTab } from '../UserSettingsTab'; diff --git a/plugins/user-settings/src/components/DefaultSettingsPage/DefaultSettingsPage.tsx b/plugins/user-settings/src/components/DefaultSettingsPage/DefaultSettingsPage.tsx index 6b5b63d6bd..49504b67d6 100644 --- a/plugins/user-settings/src/components/DefaultSettingsPage/DefaultSettingsPage.tsx +++ b/plugins/user-settings/src/components/DefaultSettingsPage/DefaultSettingsPage.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React from 'react'; +import { ReactElement } from 'react'; import { UserSettingsAuthProviders } from '../AuthProviders'; import { UserSettingsFeatureFlags } from '../FeatureFlags'; import { UserSettingsGeneral } from '../General'; @@ -24,7 +24,7 @@ import { SettingsLayout, SettingsLayoutRouteProps } from '../SettingsLayout'; * @public */ export const DefaultSettingsPage = (props: { - tabs?: React.ReactElement[]; + tabs?: ReactElement[]; providerSettings?: JSX.Element; }) => { const { providerSettings, tabs } = props; diff --git a/plugins/user-settings/src/components/FeatureFlags/EmptyFlags.tsx b/plugins/user-settings/src/components/FeatureFlags/EmptyFlags.tsx index 55c70ba7a2..8ba1e9192f 100644 --- a/plugins/user-settings/src/components/FeatureFlags/EmptyFlags.tsx +++ b/plugins/user-settings/src/components/FeatureFlags/EmptyFlags.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import Button from '@material-ui/core/Button'; import Typography from '@material-ui/core/Typography'; import { CodeSnippet, EmptyState } from '@backstage/core-components'; diff --git a/plugins/user-settings/src/components/FeatureFlags/FeatureFlagsItem.tsx b/plugins/user-settings/src/components/FeatureFlags/FeatureFlagsItem.tsx index 96f8166c4a..fa31534257 100644 --- a/plugins/user-settings/src/components/FeatureFlags/FeatureFlagsItem.tsx +++ b/plugins/user-settings/src/components/FeatureFlags/FeatureFlagsItem.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import ListItem from '@material-ui/core/ListItem'; import ListItemText from '@material-ui/core/ListItemText'; import ListItemIcon from '@material-ui/core/ListItemIcon'; diff --git a/plugins/user-settings/src/components/FeatureFlags/UserSettingsFeatureFlags.tsx b/plugins/user-settings/src/components/FeatureFlags/UserSettingsFeatureFlags.tsx index 1522001ac5..d498d8ab0a 100644 --- a/plugins/user-settings/src/components/FeatureFlags/UserSettingsFeatureFlags.tsx +++ b/plugins/user-settings/src/components/FeatureFlags/UserSettingsFeatureFlags.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useCallback, useState } from 'react'; +import { useRef, useCallback, useState } from 'react'; import List from '@material-ui/core/List'; import TextField from '@material-ui/core/TextField'; import IconButton from '@material-ui/core/IconButton'; @@ -44,7 +44,7 @@ export const sortFlags = ( /** @public */ export const UserSettingsFeatureFlags = () => { const featureFlagsApi = useApi(featureFlagsApiRef); - const inputRef = React.useRef(); + const inputRef = useRef(); const initialFeatureFlags = featureFlagsApi.getRegisteredFlags(); const initialFeatureFlagsSorted = sortFlags( diff --git a/plugins/user-settings/src/components/General/UserSettingsAppearanceCard.tsx b/plugins/user-settings/src/components/General/UserSettingsAppearanceCard.tsx index b8e3c44672..ca7378235d 100644 --- a/plugins/user-settings/src/components/General/UserSettingsAppearanceCard.tsx +++ b/plugins/user-settings/src/components/General/UserSettingsAppearanceCard.tsx @@ -16,7 +16,6 @@ import { InfoCard, useSidebarPinState } from '@backstage/core-components'; import List from '@material-ui/core/List'; -import React from 'react'; import { UserSettingsPinToggle } from './UserSettingsPinToggle'; import { UserSettingsThemeToggle } from './UserSettingsThemeToggle'; import { UserSettingsLanguageToggle } from './UserSettingsLanguageToggle'; diff --git a/plugins/user-settings/src/components/General/UserSettingsGeneral.tsx b/plugins/user-settings/src/components/General/UserSettingsGeneral.tsx index 6c663ed1bc..537a0d4531 100644 --- a/plugins/user-settings/src/components/General/UserSettingsGeneral.tsx +++ b/plugins/user-settings/src/components/General/UserSettingsGeneral.tsx @@ -15,7 +15,6 @@ */ import Grid from '@material-ui/core/Grid'; -import React from 'react'; import { UserSettingsProfileCard } from './UserSettingsProfileCard'; import { UserSettingsAppearanceCard } from './UserSettingsAppearanceCard'; import { UserSettingsIdentityCard } from './UserSettingsIdentityCard'; diff --git a/plugins/user-settings/src/components/General/UserSettingsIdentityCard.test.tsx b/plugins/user-settings/src/components/General/UserSettingsIdentityCard.test.tsx index 6fe0ee01d7..f0c9d908c3 100644 --- a/plugins/user-settings/src/components/General/UserSettingsIdentityCard.test.tsx +++ b/plugins/user-settings/src/components/General/UserSettingsIdentityCard.test.tsx @@ -20,7 +20,6 @@ import { mockApis, } from '@backstage/test-utils'; import { screen } from '@testing-library/react'; -import React from 'react'; import { UserSettingsIdentityCard } from './UserSettingsIdentityCard'; import { ApiProvider } from '@backstage/core-app-api'; import { identityApiRef } from '@backstage/core-plugin-api'; diff --git a/plugins/user-settings/src/components/General/UserSettingsIdentityCard.tsx b/plugins/user-settings/src/components/General/UserSettingsIdentityCard.tsx index d8d3f677aa..95e2469013 100644 --- a/plugins/user-settings/src/components/General/UserSettingsIdentityCard.tsx +++ b/plugins/user-settings/src/components/General/UserSettingsIdentityCard.tsx @@ -18,7 +18,6 @@ import { InfoCard } from '@backstage/core-components'; import { EntityRefLinks } from '@backstage/plugin-catalog-react'; import Grid from '@material-ui/core/Grid'; import Typography from '@material-ui/core/Typography'; -import React from 'react'; import { useUserProfile } from '../useUserProfileInfo'; const Contents = () => { diff --git a/plugins/user-settings/src/components/General/UserSettingsLanguageToggle.test.tsx b/plugins/user-settings/src/components/General/UserSettingsLanguageToggle.test.tsx index 88b257c833..a66b6fee6f 100644 --- a/plugins/user-settings/src/components/General/UserSettingsLanguageToggle.test.tsx +++ b/plugins/user-settings/src/components/General/UserSettingsLanguageToggle.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { screen, fireEvent } from '@testing-library/react'; import { UserSettingsLanguageToggle } from './UserSettingsLanguageToggle'; import { TestApiProvider, renderInTestApp } from '@backstage/test-utils'; diff --git a/plugins/user-settings/src/components/General/UserSettingsLanguageToggle.tsx b/plugins/user-settings/src/components/General/UserSettingsLanguageToggle.tsx index 1e3ba793f6..9514c50d54 100644 --- a/plugins/user-settings/src/components/General/UserSettingsLanguageToggle.tsx +++ b/plugins/user-settings/src/components/General/UserSettingsLanguageToggle.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useState } from 'react'; +import { useState } from 'react'; import { useTranslationRef, appLanguageApiRef, diff --git a/plugins/user-settings/src/components/General/UserSettingsMenu.test.tsx b/plugins/user-settings/src/components/General/UserSettingsMenu.test.tsx index 0af33fac00..8deb33e9aa 100644 --- a/plugins/user-settings/src/components/General/UserSettingsMenu.test.tsx +++ b/plugins/user-settings/src/components/General/UserSettingsMenu.test.tsx @@ -22,7 +22,6 @@ import { } from '@backstage/test-utils'; import { errorApiRef, identityApiRef } from '@backstage/core-plugin-api'; import { fireEvent, waitFor, screen } from '@testing-library/react'; -import React from 'react'; import { UserSettingsMenu } from './UserSettingsMenu'; describe('', () => { diff --git a/plugins/user-settings/src/components/General/UserSettingsMenu.tsx b/plugins/user-settings/src/components/General/UserSettingsMenu.tsx index 8ef2f380f3..28c0737a86 100644 --- a/plugins/user-settings/src/components/General/UserSettingsMenu.tsx +++ b/plugins/user-settings/src/components/General/UserSettingsMenu.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React from 'react'; +import { MouseEvent, useState } from 'react'; import IconButton from '@material-ui/core/IconButton'; import ListItemIcon from '@material-ui/core/ListItemIcon'; import Menu from '@material-ui/core/Menu'; @@ -31,12 +31,10 @@ import { export const UserSettingsMenu = () => { const errorApi = useApi(errorApiRef); const identityApi = useApi(identityApiRef); - const [open, setOpen] = React.useState(false); - const [anchorEl, setAnchorEl] = React.useState( - undefined, - ); + const [open, setOpen] = useState(false); + const [anchorEl, setAnchorEl] = useState(undefined); - const handleOpen = (event: React.MouseEvent) => { + const handleOpen = (event: MouseEvent) => { setAnchorEl(event.currentTarget); setOpen(true); }; diff --git a/plugins/user-settings/src/components/General/UserSettingsPinToggle.test.tsx b/plugins/user-settings/src/components/General/UserSettingsPinToggle.test.tsx index 01fa5b6aa5..95950c6e3a 100644 --- a/plugins/user-settings/src/components/General/UserSettingsPinToggle.test.tsx +++ b/plugins/user-settings/src/components/General/UserSettingsPinToggle.test.tsx @@ -16,7 +16,6 @@ import { renderInTestApp } from '@backstage/test-utils'; import { fireEvent, screen } from '@testing-library/react'; -import React from 'react'; import { UserSettingsPinToggle } from './UserSettingsPinToggle'; import { SidebarPinStateProvider } from '@backstage/core-components'; diff --git a/plugins/user-settings/src/components/General/UserSettingsPinToggle.tsx b/plugins/user-settings/src/components/General/UserSettingsPinToggle.tsx index 95317147cf..5947c31e9a 100644 --- a/plugins/user-settings/src/components/General/UserSettingsPinToggle.tsx +++ b/plugins/user-settings/src/components/General/UserSettingsPinToggle.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import ListItem from '@material-ui/core/ListItem'; import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; import ListItemText from '@material-ui/core/ListItemText'; diff --git a/plugins/user-settings/src/components/General/UserSettingsProfileCard.test.tsx b/plugins/user-settings/src/components/General/UserSettingsProfileCard.test.tsx index 95c30f561f..4ac66465c1 100644 --- a/plugins/user-settings/src/components/General/UserSettingsProfileCard.test.tsx +++ b/plugins/user-settings/src/components/General/UserSettingsProfileCard.test.tsx @@ -20,7 +20,6 @@ import { mockApis, } from '@backstage/test-utils'; import { screen } from '@testing-library/react'; -import React from 'react'; import { identityApiRef } from '@backstage/core-plugin-api'; import { catalogApiRef, entityRouteRef } from '@backstage/plugin-catalog-react'; import { catalogApiMock } from '@backstage/plugin-catalog-react/testUtils'; diff --git a/plugins/user-settings/src/components/General/UserSettingsProfileCard.tsx b/plugins/user-settings/src/components/General/UserSettingsProfileCard.tsx index c04710650c..aa9301e379 100644 --- a/plugins/user-settings/src/components/General/UserSettingsProfileCard.tsx +++ b/plugins/user-settings/src/components/General/UserSettingsProfileCard.tsx @@ -16,7 +16,6 @@ import Grid from '@material-ui/core/Grid'; import Typography from '@material-ui/core/Typography'; -import React from 'react'; import { UserSettingsSignInAvatar } from './UserSettingsSignInAvatar'; import { UserSettingsMenu } from './UserSettingsMenu'; import { useUserProfile } from '../useUserProfileInfo'; diff --git a/plugins/user-settings/src/components/General/UserSettingsSignInAvatar.tsx b/plugins/user-settings/src/components/General/UserSettingsSignInAvatar.tsx index 80621d1a53..391e2c3373 100644 --- a/plugins/user-settings/src/components/General/UserSettingsSignInAvatar.tsx +++ b/plugins/user-settings/src/components/General/UserSettingsSignInAvatar.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import Avatar from '@material-ui/core/Avatar'; import { makeStyles, Theme } from '@material-ui/core/styles'; import { useUserProfile } from '../useUserProfileInfo'; diff --git a/plugins/user-settings/src/components/General/UserSettingsThemeToggle.test.tsx b/plugins/user-settings/src/components/General/UserSettingsThemeToggle.test.tsx index 0f34134e30..9ea632a5cb 100644 --- a/plugins/user-settings/src/components/General/UserSettingsThemeToggle.test.tsx +++ b/plugins/user-settings/src/components/General/UserSettingsThemeToggle.test.tsx @@ -20,7 +20,6 @@ import { lightTheme } from '@backstage/theme'; import { ThemeProvider } from '@material-ui/core/styles'; import CssBaseline from '@material-ui/core/CssBaseline'; import { fireEvent, screen } from '@testing-library/react'; -import React from 'react'; import { UserSettingsThemeToggle } from './UserSettingsThemeToggle'; import { ApiProvider, AppThemeSelector } from '@backstage/core-app-api'; diff --git a/plugins/user-settings/src/components/General/UserSettingsThemeToggle.tsx b/plugins/user-settings/src/components/General/UserSettingsThemeToggle.tsx index cfa9873531..b7ac5340e4 100644 --- a/plugins/user-settings/src/components/General/UserSettingsThemeToggle.tsx +++ b/plugins/user-settings/src/components/General/UserSettingsThemeToggle.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { cloneElement } from 'react'; +import { MouseEvent, cloneElement } from 'react'; import useObservable from 'react-use/esm/useObservable'; import AutoIcon from '@material-ui/icons/BrightnessAuto'; import ToggleButton from '@material-ui/lab/ToggleButton'; @@ -111,7 +111,7 @@ export const UserSettingsThemeToggle = () => { const { t } = useTranslationRef(userSettingsTranslationRef); const handleSetTheme = ( - _event: React.MouseEvent, + _event: MouseEvent, newThemeId: string | undefined, ) => { if (themeIds.some(it => it.id === newThemeId)) { diff --git a/plugins/user-settings/src/components/Settings.tsx b/plugins/user-settings/src/components/Settings.tsx index 6735b20f87..cba9549089 100644 --- a/plugins/user-settings/src/components/Settings.tsx +++ b/plugins/user-settings/src/components/Settings.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import SettingsIcon from '@material-ui/icons/Settings'; import { settingsRouteRef } from '../plugin'; import { SidebarItem } from '@backstage/core-components'; diff --git a/plugins/user-settings/src/components/SettingsLayout/SettingsLayout.tsx b/plugins/user-settings/src/components/SettingsLayout/SettingsLayout.tsx index c17333571d..9198a2fae4 100644 --- a/plugins/user-settings/src/components/SettingsLayout/SettingsLayout.tsx +++ b/plugins/user-settings/src/components/SettingsLayout/SettingsLayout.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React from 'react'; +import { ElementType, ReactNode } from 'react'; import { TabProps } from '@material-ui/core/Tab'; import { Header, @@ -32,7 +32,7 @@ export type SettingsLayoutRouteProps = { path: string; title: string; children: JSX.Element; - tabProps?: TabProps; + tabProps?: TabProps; }; export const LAYOUT_DATA_KEY = 'plugin.user-settings.settingsLayout'; @@ -48,7 +48,7 @@ attachComponentData(Route, 'core.gatherMountPoints', true); export type SettingsLayoutProps = { title?: string; subtitle?: string; - children?: React.ReactNode; + children?: ReactNode; }; /** diff --git a/plugins/user-settings/src/components/SettingsPage/SettingsPage.test.tsx b/plugins/user-settings/src/components/SettingsPage/SettingsPage.test.tsx index 12431a44a2..012ff14a94 100644 --- a/plugins/user-settings/src/components/SettingsPage/SettingsPage.test.tsx +++ b/plugins/user-settings/src/components/SettingsPage/SettingsPage.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import React from 'react'; import { renderInTestApp, TestApiProvider } from '@backstage/test-utils'; import { SettingsPage } from './SettingsPage'; import { UserSettingsTab } from '../UserSettingsTab'; diff --git a/plugins/user-settings/src/components/SettingsPage/SettingsPage.tsx b/plugins/user-settings/src/components/SettingsPage/SettingsPage.tsx index db21f6068d..b72862e2bc 100644 --- a/plugins/user-settings/src/components/SettingsPage/SettingsPage.tsx +++ b/plugins/user-settings/src/components/SettingsPage/SettingsPage.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ import { useOutlet } from 'react-router-dom'; -import React from 'react'; import { DefaultSettingsPage } from '../DefaultSettingsPage'; import { useElementFilter } from '@backstage/core-plugin-api'; import { diff --git a/plugins/user-settings/src/components/UserSettingsTab/UserSettingsTab.tsx b/plugins/user-settings/src/components/UserSettingsTab/UserSettingsTab.tsx index ebddac00c1..35f09662b9 100644 --- a/plugins/user-settings/src/components/UserSettingsTab/UserSettingsTab.tsx +++ b/plugins/user-settings/src/components/UserSettingsTab/UserSettingsTab.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, { PropsWithChildren } from 'react'; +import { PropsWithChildren } from 'react'; import { attachComponentData } from '@backstage/core-plugin-api'; import { LAYOUT_ROUTE_DATA_KEY, diff --git a/storybook/.storybook/preview.tsx b/storybook/.storybook/preview.tsx index 7a1ccb35d8..18c07a6266 100644 --- a/storybook/.storybook/preview.tsx +++ b/storybook/.storybook/preview.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { TestApiProvider } from '@backstage/test-utils'; import { Content, AlertDisplay } from '@backstage/core-components'; import { lightTheme, darkTheme } from '@backstage/theme';