diff --git a/.changeset/friendly-donuts-pump-cli.md b/.changeset/friendly-donuts-pump-cli.md new file mode 100644 index 0000000000..87ef30ddd0 --- /dev/null +++ b/.changeset/friendly-donuts-pump-cli.md @@ -0,0 +1,7 @@ +--- +'@backstage/cli': minor +--- + +Removes default React imports from template files, aligning with the requirements for the upcoming React 19 migration. Introduces a new ESLint rule to disallow `import React from 'react'` and `import * as React from 'react'`. + + diff --git a/.changeset/friendly-donuts-pump.md b/.changeset/friendly-donuts-pump.md new file mode 100644 index 0000000000..df413cdd3c --- /dev/null +++ b/.changeset/friendly-donuts-pump.md @@ -0,0 +1,51 @@ +--- +'@backstage/plugin-api-docs-module-protoc-gen-doc': patch +'@backstage/plugin-techdocs-module-addons-contrib': patch +'@backstage/plugin-catalog-unprocessed-entities': patch +'@backstage/plugin-techdocs-addons-test-utils': patch +'@backstage/frontend-plugin-api': patch +'@backstage/frontend-test-utils': patch +'@backstage/frontend-defaults': patch +'@backstage/integration-react': patch +'@backstage/plugin-kubernetes-cluster': patch +'@backstage/frontend-app-api': patch +'@backstage/core-compat-api': patch +'@backstage/core-components': patch +'@backstage/core-plugin-api': patch +'@backstage/plugin-kubernetes-react': patch +'@backstage/plugin-permission-react': patch +'@backstage/plugin-scaffolder-react': patch +'@backstage/plugin-app-visualizer': patch +'@backstage/plugin-catalog-import': patch +'@backstage/plugin-techdocs-react': patch +'@backstage/app-defaults': patch +'@backstage/core-app-api': patch +'@backstage/plugin-catalog-graph': patch +'@backstage/plugin-catalog-react': patch +'@backstage/plugin-config-schema': patch +'@backstage/plugin-notifications': patch +'@backstage/plugin-user-settings': patch +'@backstage/plugin-search-react': patch +'@backstage/create-app': patch +'@backstage/test-utils': patch +'@backstage/dev-utils': patch +'@backstage/plugin-auth-react': patch +'@backstage/plugin-home-react': patch +'@backstage/plugin-kubernetes': patch +'@backstage/plugin-scaffolder': patch +'@backstage/plugin-org-react': patch +'@backstage/plugin-api-docs': patch +'@backstage/plugin-devtools': patch +'@backstage/plugin-techdocs': patch +'@backstage/plugin-catalog': patch +'@backstage/canon': patch +'@backstage/theme': patch +'@backstage/plugin-search': patch +'@backstage/plugin-home': patch +'@backstage/plugin-app': patch +'@backstage/plugin-org': patch +--- + +Removes instances of default React imports, a necessary update for the upcoming React 19 migration. + + diff --git a/.eslintrc.js b/.eslintrc.js index eb2a07b3b0..409b820783 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: "React default imports are deprecated. Follow the x migration guide for details.", + selector: + "ImportDeclaration[source.value='react'][specifiers.0.type='ImportDefaultSpecifier']", + }, + { + message: + "React default imports are deprecated. Follow the x migration guide for details. 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/report.api.md b/packages/app-next-example-plugin/report.api.md index 7a680d8917..636d735914 100644 --- a/packages/app-next-example-plugin/report.api.md +++ b/packages/app-next-example-plugin/report.api.md @@ -7,7 +7,8 @@ import { AnyRouteRefParams } from '@backstage/frontend-plugin-api'; import { ConfigurableExtensionDataRef } from '@backstage/frontend-plugin-api'; import { ExtensionDefinition } from '@backstage/frontend-plugin-api'; import { FrontendPlugin } from '@backstage/frontend-plugin-api'; -import { default as React_2 } from 'react'; +import { JSX as JSX_2 } from 'react'; +import { JSX as JSX_3 } from 'react/jsx-runtime'; import { RouteRef } from '@backstage/frontend-plugin-api'; // @public (undocumented) @@ -25,11 +26,7 @@ const examplePlugin: FrontendPlugin< path?: string | undefined; }; output: - | ConfigurableExtensionDataRef< - React_2.JSX.Element, - 'core.reactElement', - {} - > + | ConfigurableExtensionDataRef | ConfigurableExtensionDataRef | ConfigurableExtensionDataRef< RouteRef, @@ -50,7 +47,7 @@ const examplePlugin: FrontendPlugin< export default examplePlugin; // @public (undocumented) -export const ExampleSidebarItem: () => React_2.JSX.Element; +export const ExampleSidebarItem: () => JSX_3.Element; // (No @packageDocumentation comment for this package) ``` 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/main.ts b/packages/canon/.storybook/main.ts index 8bd28db556..e58c0f182f 100644 --- a/packages/canon/.storybook/main.ts +++ b/packages/canon/.storybook/main.ts @@ -5,7 +5,7 @@ import { join, dirname } from 'path'; * This function is used to resolve the absolute path of a package. * It is needed in projects that use Yarn PnP or are set up within a monorepo. */ -function getAbsolutePath(value: string): any { +function getAbsolutePath(value: string): string { return dirname(require.resolve(join(value, 'package.json'))); } const config: StorybookConfig = { @@ -22,9 +22,17 @@ const config: StorybookConfig = { ], framework: { name: getAbsolutePath('@storybook/react-webpack5'), - options: { - plugins: [], - }, + options: {}, }, + // https://storybook.js.org/docs/configure/integration/compilers#the-swc-compiler-doesnt-work-with-react + swc: () => ({ + jsc: { + transform: { + react: { + runtime: 'automatic', + }, + }, + }, + }), }; export default config; 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/report.api.md b/packages/canon/report.api.md index a2b86e57a4..0a16c2abcf 100644 --- a/packages/canon/report.api.md +++ b/packages/canon/report.api.md @@ -7,15 +7,18 @@ import { Breakpoint as Breakpoint_2 } from '@backstage/canon'; import { ChangeEvent } from 'react'; import { Context } from 'react'; import type { CSSProperties } from 'react'; +import { FC } from 'react'; import { FocusEvent as FocusEvent_2 } from 'react'; import { ForwardRefExoticComponent } from 'react'; +import { HTMLAttributes } from 'react'; +import { JSX as JSX_2 } from 'react/jsx-runtime'; import { Menu as Menu_2 } from '@base-ui-components/react/menu'; -import { default as React_2 } from 'react'; -import * as React_3 from 'react'; import { ReactNode } from 'react'; import { RefAttributes } from 'react'; import type { RemixiconComponentType } from '@remixicon/react'; import { ScrollArea as ScrollArea_2 } from '@base-ui-components/react/scroll-area'; +import { TdHTMLAttributes } from 'react'; +import { ThHTMLAttributes } from 'react'; import { Tooltip as Tooltip_2 } from '@base-ui-components/react/tooltip'; import type { useRender } from '@base-ui-components/react/use-render'; @@ -122,8 +125,8 @@ export type Breakpoint = 'initial' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'; export const breakpoints: Breakpoint[]; // @public (undocumented) -export const Button: React_2.ForwardRefExoticComponent< - ButtonProps & React_2.RefAttributes +export const Button: ForwardRefExoticComponent< + ButtonProps & RefAttributes >; // @public (undocumented) @@ -158,8 +161,8 @@ export interface ButtonProps } // @public (undocumented) -export const Checkbox: React_2.ForwardRefExoticComponent< - CheckboxProps & React_2.RefAttributes +export const Checkbox: ForwardRefExoticComponent< + CheckboxProps & RefAttributes >; // @public (undocumented) @@ -328,8 +331,8 @@ export type GetPropDefType = Def extends BooleanPropDef : string : Def extends ReactNodePropDef ? Def extends ResponsivePropDef - ? Responsive - : React_2.ReactNode + ? Responsive + : ReactNode : Def extends EnumOrStringPropDef ? Def extends ResponsivePropDef ? Responsive @@ -507,8 +510,8 @@ export interface GridProps extends SpaceProps { } // @public (undocumented) -export const Heading: React_2.ForwardRefExoticComponent< - HeadingProps & React_2.RefAttributes +export const Heading: ForwardRefExoticComponent< + HeadingProps & RefAttributes >; // @public (undocumented) @@ -563,11 +566,11 @@ export const heightPropDefs: { export type HeightProps = GetPropDefTypes; // @public (undocumented) -export const Icon: (props: IconProps) => React_2.JSX.Element | null; +export const Icon: (props: IconProps) => JSX_2.Element | null; // @public (undocumented) -export const IconButton: React_2.ForwardRefExoticComponent< - IconButtonProps & React_2.RefAttributes +export const IconButton: ForwardRefExoticComponent< + IconButtonProps & RefAttributes >; // @public (undocumented) @@ -677,7 +680,7 @@ export type IconProps = { }; // @public (undocumented) -export const IconProvider: (props: IconProviderProps) => React_2.JSX.Element; +export const IconProvider: (props: IconProviderProps) => JSX_2.Element; // @public (undocumented) export interface IconProviderProps { @@ -700,8 +703,8 @@ export type JustifyContent = | 'between'; // @public (undocumented) -export const Link: React_2.ForwardRefExoticComponent< - Omit & React_2.RefAttributes +export const Link: ForwardRefExoticComponent< + Omit & RefAttributes >; // @public (undocumented) @@ -887,7 +890,7 @@ export type PropDef = RegularPropDef | ResponsivePropDef; // @public (undocumented) export type ReactNodePropDef = { type: 'ReactNode'; - default?: React_2.ReactNode; + default?: ReactNode; required?: boolean; }; @@ -912,39 +915,27 @@ export type ResponsivePropDef = RegularPropDef & { // @public (undocumented) export const ScrollArea: { - Root: React_2.ForwardRefExoticComponent< - Omit< - ScrollArea_2.Root.Props & React_2.RefAttributes, - 'ref' - > & - React_2.RefAttributes + Root: ForwardRefExoticComponent< + Omit, 'ref'> & + RefAttributes >; - Viewport: React_2.ForwardRefExoticComponent< - Omit< - ScrollArea_2.Viewport.Props & React_2.RefAttributes, - 'ref' - > & - React_2.RefAttributes + Viewport: ForwardRefExoticComponent< + Omit, 'ref'> & + RefAttributes >; - Scrollbar: React_2.ForwardRefExoticComponent< - Omit< - ScrollArea_2.Scrollbar.Props & React_2.RefAttributes, - 'ref' - > & - React_2.RefAttributes + Scrollbar: ForwardRefExoticComponent< + Omit, 'ref'> & + RefAttributes >; - Thumb: React_2.ForwardRefExoticComponent< - Omit< - ScrollArea_2.Thumb.Props & React_2.RefAttributes, - 'ref' - > & - React_2.RefAttributes + Thumb: ForwardRefExoticComponent< + Omit, 'ref'> & + RefAttributes >; }; // @public (undocumented) -export const Select: React_2.ForwardRefExoticComponent< - SelectProps & React_2.RefAttributes +export const Select: ForwardRefExoticComponent< + SelectProps & RefAttributes >; // @public (undocumented) @@ -1038,56 +1029,52 @@ export type StylingPropDef = { }; // @public (undocumented) -export const Table: React_3.ForwardRefExoticComponent< - React_3.HTMLAttributes & - React_3.RefAttributes +export const Table: ForwardRefExoticComponent< + HTMLAttributes & RefAttributes >; // @public (undocumented) -export const TableBody: React_3.ForwardRefExoticComponent< - React_3.HTMLAttributes & - React_3.RefAttributes +export const TableBody: ForwardRefExoticComponent< + HTMLAttributes & + RefAttributes >; // @public (undocumented) -export const TableCell: React_3.ForwardRefExoticComponent< - React_3.TdHTMLAttributes & - React_3.RefAttributes +export const TableCell: ForwardRefExoticComponent< + TdHTMLAttributes & RefAttributes >; // @public (undocumented) -export const TableFooter: React_3.ForwardRefExoticComponent< - React_3.HTMLAttributes & - React_3.RefAttributes +export const TableFooter: ForwardRefExoticComponent< + HTMLAttributes & + RefAttributes >; // @public (undocumented) -export const TableHead: React_3.ForwardRefExoticComponent< - React_3.ThHTMLAttributes & - React_3.RefAttributes +export const TableHead: ForwardRefExoticComponent< + ThHTMLAttributes & RefAttributes >; // @public (undocumented) -export const TableHeader: React_3.ForwardRefExoticComponent< - React_3.HTMLAttributes & - React_3.RefAttributes +export const TableHeader: ForwardRefExoticComponent< + HTMLAttributes & + RefAttributes >; // @public (undocumented) -export const TableRow: React_3.ForwardRefExoticComponent< - React_3.HTMLAttributes & - React_3.RefAttributes +export const TableRow: ForwardRefExoticComponent< + HTMLAttributes & RefAttributes >; // @public (undocumented) -const Text_2: React_2.ForwardRefExoticComponent< - TextProps & React_2.RefAttributes +const Text_2: ForwardRefExoticComponent< + TextProps & RefAttributes >; export { Text_2 as Text }; // @public (undocumented) -export const TextField: React_2.ForwardRefExoticComponent< - TextFieldProps & React_2.RefAttributes +export const TextField: ForwardRefExoticComponent< + TextFieldProps & RefAttributes >; // @public (undocumented) @@ -1135,27 +1122,24 @@ export interface TextProps { // @public (undocumented) export const Tooltip: { - Provider: React_2.FC; - Root: React_2.FC; - Trigger: React_2.ForwardRefExoticComponent< - Omit, 'ref'> & - React_2.RefAttributes + Provider: FC; + Root: FC; + Trigger: ForwardRefExoticComponent< + Omit, 'ref'> & + RefAttributes >; Portal: typeof Tooltip_2.Portal; - Positioner: React_2.ForwardRefExoticComponent< - Omit< - Tooltip_2.Positioner.Props & React_2.RefAttributes, - 'ref' - > & - React_2.RefAttributes + Positioner: ForwardRefExoticComponent< + Omit, 'ref'> & + RefAttributes >; - Popup: React_2.ForwardRefExoticComponent< - Omit, 'ref'> & - React_2.RefAttributes + Popup: ForwardRefExoticComponent< + Omit, 'ref'> & + RefAttributes >; - Arrow: React_2.ForwardRefExoticComponent< - Omit, 'ref'> & - React_2.RefAttributes + Arrow: ForwardRefExoticComponent< + Omit, 'ref'> & + RefAttributes >; }; 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/props/prop-def.ts b/packages/canon/src/props/prop-def.ts index eb721aa115..dc6c798d51 100644 --- a/packages/canon/src/props/prop-def.ts +++ b/packages/canon/src/props/prop-def.ts @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import type React from 'react'; +import type { ReactNode } from 'react'; import type { Breakpoint, Responsive } from '../types'; /** @public */ @@ -37,7 +37,7 @@ export type StringPropDef = { /** @public */ export type ReactNodePropDef = { type: 'ReactNode'; - default?: React.ReactNode; + default?: ReactNode; required?: boolean; }; @@ -107,8 +107,8 @@ export type GetPropDefType = Def extends BooleanPropDef : string : Def extends ReactNodePropDef ? Def extends ResponsivePropDef - ? Responsive - : React.ReactNode + ? Responsive + : ReactNode : Def extends EnumOrStringPropDef ? Def extends ResponsivePropDef ? Responsive 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..e51fe88db5 100644 --- a/packages/cli/config/eslint-factory.js +++ b/packages/cli/config/eslint-factory.js @@ -243,8 +243,27 @@ function createConfigForRole(dir, role, extraConfig = {}) { '@mui/*/*/*', ...(extraConfig.restrictedImportPatterns ?? []), ], + rules: { + 'react/react-in-jsx-scope': 'off', + 'no-restricted-syntax': [ + 'warn', + { + message: + 'React default imports are deprecated. Follow the x migration guide for details.', + selector: + "ImportDeclaration[source.value='react'][specifiers.0.type='ImportDefaultSpecifier']", + }, + { + message: + 'React default imports are deprecated. Follow the x migration guide for details. 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/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/report.api.md b/packages/core-app-api/report.api.md index b2a276e6d4..60f8cb8c1c 100644 --- a/packages/core-app-api/report.api.md +++ b/packages/core-app-api/report.api.md @@ -42,6 +42,7 @@ import { googleAuthApiRef } from '@backstage/core-plugin-api'; import { IconComponent } from '@backstage/core-plugin-api'; import { IdentityApi } from '@backstage/core-plugin-api'; import { JsonValue } from '@backstage/types'; +import { JSX as JSX_2 } from 'react/jsx-runtime'; import { microsoftAuthApiRef } from '@backstage/core-plugin-api'; import { OAuthApi } from '@backstage/core-plugin-api'; import { OAuthRequestApi } from '@backstage/core-plugin-api'; @@ -56,7 +57,6 @@ import { ProfileInfo } from '@backstage/core-plugin-api'; import { ProfileInfoApi } from '@backstage/core-plugin-api'; import { PropsWithChildren } from 'react'; import PropTypes from 'prop-types'; -import { default as React_2 } from 'react'; import { ReactNode } from 'react'; import { RouteRef } from '@backstage/core-plugin-api'; import { SessionApi } from '@backstage/core-plugin-api'; @@ -115,7 +115,7 @@ export type ApiFactoryScope = 'default' | 'app' | 'static'; // @public export const ApiProvider: { - (props: PropsWithChildren): React_2.JSX.Element; + (props: PropsWithChildren): JSX_2.Element; propTypes: { apis: PropTypes.Validator< NonNullable< @@ -257,7 +257,7 @@ export type AppRouteBinder = < ) => void; // @public -export function AppRouter(props: AppRouterProps): React_2.JSX.Element; +export function AppRouter(props: AppRouterProps): JSX_2.Element; // @public export interface AppRouterProps { @@ -390,9 +390,7 @@ export type ErrorBoundaryFallbackProps = PropsWithChildren<{ }>; // @public -export const FeatureFlagged: ( - props: FeatureFlaggedProps, -) => React_2.JSX.Element; +export const FeatureFlagged: (props: FeatureFlaggedProps) => JSX_2.Element; // @public export type FeatureFlaggedProps = { 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/report.api.md b/packages/core-compat-api/report.api.md index 125533c6d3..e1fb583f4e 100644 --- a/packages/core-compat-api/report.api.md +++ b/packages/core-compat-api/report.api.md @@ -20,7 +20,8 @@ import { FeatureFlag } from '@backstage/core-plugin-api'; import { FrontendModule } from '@backstage/frontend-plugin-api'; import { FrontendPlugin } from '@backstage/frontend-plugin-api'; import { IconComponent } from '@backstage/core-plugin-api'; -import { default as React_2 } from 'react'; +import { JSX as JSX_2 } from 'react'; +import { JSX as JSX_3 } from 'react/jsx-runtime'; import { ReactNode } from 'react'; import { RouteRef } from '@backstage/core-plugin-api'; import { RouteRef as RouteRef_2 } from '@backstage/frontend-plugin-api'; @@ -28,17 +29,17 @@ import { SubRouteRef } from '@backstage/core-plugin-api'; import { SubRouteRef as SubRouteRef_2 } from '@backstage/frontend-plugin-api'; // @public -export function compatWrapper(element: ReactNode): React_2.JSX.Element; +export function compatWrapper(element: ReactNode): JSX_3.Element; // @public (undocumented) export function convertLegacyApp( - rootElement: React_2.JSX.Element, + rootElement: JSX_2.Element, options?: ConvertLegacyAppOptions, ): (FrontendPlugin | FrontendModule)[]; // @public (undocumented) export interface ConvertLegacyAppOptions { - entityPage?: React_2.JSX.Element; + entityPage?: JSX_2.Element; } // @public (undocumented) 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/report.api.md b/packages/core-components/report.api.md index 2a845d7bfa..6e1057c5a3 100644 --- a/packages/core-components/report.api.md +++ b/packages/core-components/report.api.md @@ -10,10 +10,12 @@ import { BackstageUserIdentity } from '@backstage/core-plugin-api'; import { BottomNavigationActionProps } from '@material-ui/core/BottomNavigationAction'; import { ButtonProps as ButtonProps_2 } from '@material-ui/core/Button'; import { CardHeaderProps } from '@material-ui/core/CardHeader'; +import { ChangeEvent } from 'react'; import { Column } from '@material-table/core'; import { ComponentClass } from 'react'; import { ComponentProps } from 'react'; import { ComponentType } from 'react'; +import { Context } from 'react'; import { default as CSS_2 } from 'csstype'; import { CSSProperties } from 'react'; import { ElementType } from 'react'; @@ -22,12 +24,16 @@ import IconButton from '@material-ui/core/IconButton'; import { IconComponent } from '@backstage/core-plugin-api'; import { Icons } from '@material-table/core'; import { IdentityApi } from '@backstage/core-plugin-api'; +import { JSX as JSX_2 } from 'react/jsx-runtime'; import { LinearProgressProps } from '@material-ui/core/LinearProgress'; import { LinkProps as LinkProps_2 } from '@material-ui/core/Link'; import { LinkProps as LinkProps_3 } from 'react-router-dom'; import { ListItemTextProps } from '@material-ui/core/ListItemText'; import MaterialBreadcrumbs from '@material-ui/core/Breadcrumbs'; import { MaterialTableProps } from '@material-table/core'; +import { MouseEvent as MouseEvent_2 } from 'react'; +import { MouseEventHandler } from 'react'; +import { MutableRefObject } from 'react'; import { NavLinkProps } from 'react-router-dom'; import { Options } from 'react-markdown'; import { Options as Options_2 } from '@material-table/core'; @@ -35,8 +41,6 @@ import { Overrides } from '@material-ui/core/styles/overrides'; import { ProfileInfo } from '@backstage/core-plugin-api'; import { ProfileInfoApi } from '@backstage/core-plugin-api'; import { PropsWithChildren } from 'react'; -import { default as React_2 } from 'react'; -import * as React_3 from 'react'; import { ReactElement } from 'react'; import { ReactNode } from 'react'; import { SessionApi } from '@backstage/core-plugin-api'; @@ -46,15 +50,14 @@ import { SparklinesProps } from 'react-sparklines'; import { StyledComponentProps } from '@material-ui/core/styles/withStyles'; import { StyleRules } from '@material-ui/styles'; import { StyleRules as StyleRules_2 } from '@material-ui/core/styles/withStyles'; +import { SVGProps } from 'react'; import { TabProps } from '@material-ui/core/Tab'; import { Theme } from '@material-ui/core/styles'; import { TooltipProps } from '@material-ui/core/Tooltip'; import { WithStyles } from '@material-ui/core/styles'; // @public -export function AlertDisplay( - props: AlertDisplayProps, -): React_2.JSX.Element | null; +export function AlertDisplay(props: AlertDisplayProps): JSX_2.Element | null; // @public export type AlertDisplayProps = { @@ -66,7 +69,7 @@ export type AlertDisplayProps = { }; // @public -export function AppIcon(props: AppIconProps): React_2.JSX.Element; +export function AppIcon(props: AppIconProps): JSX_2.Element; // @public export type AppIconProps = IconComponentProps & { @@ -87,7 +90,7 @@ export type AutoLogoutProps = { }; // @public -export function Avatar(props: AvatarProps): React_2.JSX.Element; +export function Avatar(props: AvatarProps): JSX_2.Element; // @public (undocumented) export type AvatarClassKey = 'avatar'; @@ -119,7 +122,7 @@ export type BackstageOverrides = Overrides & { export type BoldHeaderClassKey = 'root' | 'title' | 'subheader'; // @public -export function BottomLink(props: BottomLinkProps): React_2.JSX.Element; +export function BottomLink(props: BottomLinkProps): JSX_2.Element; // @public (undocumented) export type BottomLinkClassKey = 'root' | 'boxTitle' | 'arrow'; @@ -128,13 +131,13 @@ export type BottomLinkClassKey = 'root' | 'boxTitle' | 'arrow'; export type BottomLinkProps = { link: string; title: string; - onClick?: (event: React_2.MouseEvent) => void; + onClick?: (event: MouseEvent_2) => void; }; // Warning: (ae-forgotten-export) The symbol "Props_18" needs to be exported by the entry point index.d.ts // // @public -export function Breadcrumbs(props: Props_18): React_2.JSX.Element; +export function Breadcrumbs(props: Props_18): JSX_2.Element; // @public (undocumented) export type BreadcrumbsClickableTextClassKey = 'root'; @@ -146,7 +149,7 @@ export type BreadcrumbsCurrentPageClassKey = 'root'; export type BreadcrumbsStyledBoxClassKey = 'root'; // @public -export function BrokenImageIcon(props: IconComponentProps): React_2.JSX.Element; +export function BrokenImageIcon(props: IconComponentProps): JSX_2.Element; // @public @deprecated (undocumented) export const Button: (props: LinkButtonProps) => JSX.Element; @@ -160,24 +163,22 @@ export type CardActionsTopRightClassKey = 'root'; // Warning: (ae-forgotten-export) The symbol "CardTabProps" needs to be exported by the entry point index.d.ts // // @public -export function CardTab( - props: PropsWithChildren, -): React_2.JSX.Element; +export function CardTab(props: PropsWithChildren): JSX_2.Element; // @public (undocumented) export type CardTabClassKey = 'root' | 'selected'; // @public (undocumented) -export function CatalogIcon(props: IconComponentProps): React_2.JSX.Element; +export function CatalogIcon(props: IconComponentProps): JSX_2.Element; // @public (undocumented) -export function ChatIcon(props: IconComponentProps): React_2.JSX.Element; +export function ChatIcon(props: IconComponentProps): JSX_2.Element; // @public (undocumented) export type ClosedDropdownClassKey = 'icon'; // @public -export function CodeSnippet(props: CodeSnippetProps): React_2.JSX.Element; +export function CodeSnippet(props: CodeSnippetProps): JSX_2.Element; // @public export interface CodeSnippetProps { @@ -192,16 +193,14 @@ export interface CodeSnippetProps { // Warning: (ae-forgotten-export) The symbol "Props_12" needs to be exported by the entry point index.d.ts // // @public -export function Content( - props: PropsWithChildren, -): React_2.JSX.Element; +export function Content(props: PropsWithChildren): JSX_2.Element; // Warning: (ae-forgotten-export) The symbol "ContentHeaderProps" needs to be exported by the entry point index.d.ts // // @public export function ContentHeader( props: PropsWithChildren, -): React_2.JSX.Element; +): JSX_2.Element; // @public (undocumented) export type ContentHeaderClassKey = @@ -212,7 +211,7 @@ export type ContentHeaderClassKey = | 'title'; // @public -export function CopyTextButton(props: CopyTextButtonProps): React_2.JSX.Element; +export function CopyTextButton(props: CopyTextButtonProps): JSX_2.Element; // @public export interface CopyTextButtonProps { @@ -223,9 +222,7 @@ export interface CopyTextButtonProps { } // @public -export function CreateButton( - props: CreateButtonProps, -): React_2.JSX.Element | null; +export function CreateButton(props: CreateButtonProps): JSX_2.Element | null; // @public export type CreateButtonProps = { @@ -236,12 +233,12 @@ export type CreateButtonProps = { export type CustomProviderClassKey = 'form' | 'button'; // @public (undocumented) -export function DashboardIcon(props: IconComponentProps): React_2.JSX.Element; +export function DashboardIcon(props: IconComponentProps): JSX_2.Element; // @public export function DependencyGraph( props: DependencyGraphProps, -): React_2.JSX.Element; +): JSX_2.Element; // @public (undocumented) export type DependencyGraphDefaultLabelClassKey = 'text'; @@ -257,7 +254,7 @@ export type DependencyGraphNodeClassKey = 'node'; // @public export interface DependencyGraphProps - extends React_2.SVGProps { + extends SVGProps { acyclicer?: 'greedy'; align?: DependencyGraphTypes.Alignment; curve?: 'curveStepBefore' | 'curveMonotoneX'; @@ -319,13 +316,13 @@ export namespace DependencyGraphTypes { } export type RenderLabelFunction = ( props: RenderLabelProps, - ) => React_2.ReactNode; + ) => ReactNode; export type RenderLabelProps = { edge: DependencyEdge; }; export type RenderNodeFunction = ( props: RenderNodeProps, - ) => React_2.ReactNode; + ) => ReactNode; export type RenderNodeProps = { node: DependencyNode; }; @@ -334,7 +331,7 @@ export namespace DependencyGraphTypes { // Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts // // @public (undocumented) -export const DismissableBanner: (props: Props) => React_2.JSX.Element; +export const DismissableBanner: (props: Props) => JSX_2.Element; // @public (undocumented) export type DismissableBannerClassKey = @@ -350,15 +347,15 @@ export type DismissableBannerClassKey = export type DismissbleBannerClassKey = DismissableBannerClassKey; // @public (undocumented) -export function DocsIcon(props: IconComponentProps): React_2.JSX.Element; +export function DocsIcon(props: IconComponentProps): JSX_2.Element; // @public (undocumented) -export function EmailIcon(props: IconComponentProps): React_2.JSX.Element; +export function EmailIcon(props: IconComponentProps): JSX_2.Element; // Warning: (ae-forgotten-export) The symbol "Props_2" needs to be exported by the entry point index.d.ts // // @public -export function EmptyState(props: Props_2): React_2.JSX.Element; +export function EmptyState(props: Props_2): JSX_2.Element; // @public (undocumented) export type EmptyStateClassKey = 'root' | 'action' | 'imageContainer'; @@ -372,7 +369,7 @@ export type EmptyStateImageClassKey = 'generalImg'; export const ErrorBoundary: ComponentClass; // @public (undocumented) -export type ErrorBoundaryProps = React_2.PropsWithChildren<{ +export type ErrorBoundaryProps = PropsWithChildren<{ slackChannel?: string | SlackChannel; onError?: (error: Error, errorInfo: string) => null; }>; @@ -380,7 +377,7 @@ export type ErrorBoundaryProps = React_2.PropsWithChildren<{ // Warning: (ae-forgotten-export) The symbol "IErrorPageProps" needs to be exported by the entry point index.d.ts // // @public -export function ErrorPage(props: IErrorPageProps): React_2.JSX.Element; +export function ErrorPage(props: IErrorPageProps): JSX_2.Element; // @public (undocumented) export type ErrorPageClassKey = 'container' | 'title' | 'subtitle'; @@ -388,7 +385,7 @@ export type ErrorPageClassKey = 'container' | 'title' | 'subtitle'; // @public export function ErrorPanel( props: PropsWithChildren, -): React_2.JSX.Element; +): JSX_2.Element; // @public (undocumented) export type ErrorPanelClassKey = 'text' | 'divider'; @@ -409,12 +406,12 @@ export function FavoriteToggle( isFavorite: boolean; onToggle: (value: boolean) => void; }, -): React_2.JSX.Element; +): JSX_2.Element; // @public export function FavoriteToggleIcon(props: { isFavorite: boolean; -}): React_2.JSX.Element; +}): JSX_2.Element; // @public (undocumented) export type FavoriteToggleIconClassKey = 'icon' | 'iconBorder'; @@ -434,18 +431,18 @@ export type FeatureCalloutCircleClassKey = // @public export function FeatureCalloutCircular( props: PropsWithChildren, -): React_2.JSX.Element; +): JSX_2.Element; // @public (undocumented) export type FiltersContainerClassKey = 'root' | 'title'; // @public -export function Gauge(props: GaugeProps): React_2.JSX.Element; +export function Gauge(props: GaugeProps): JSX_2.Element; // Warning: (ae-forgotten-export) The symbol "Props_10" needs to be exported by the entry point index.d.ts // // @public -export function GaugeCard(props: Props_10): React_2.JSX.Element; +export function GaugeCard(props: Props_10): JSX_2.Element; // @public (undocumented) export type GaugeCardClassKey = 'root'; @@ -484,20 +481,18 @@ export type GaugePropsGetColorOptions = { }; // @public (undocumented) -export function GitHubIcon(props: IconComponentProps): React_2.JSX.Element; +export function GitHubIcon(props: IconComponentProps): JSX_2.Element; // @public (undocumented) -export function GroupIcon(props: IconComponentProps): React_2.JSX.Element; +export function GroupIcon(props: IconComponentProps): JSX_2.Element; // Warning: (ae-forgotten-export) The symbol "Props_13" needs to be exported by the entry point index.d.ts // // @public -export function Header(props: PropsWithChildren): React_2.JSX.Element; +export function Header(props: PropsWithChildren): JSX_2.Element; // @public (undocumented) -export function HeaderActionMenu( - props: HeaderActionMenuProps, -): React_2.JSX.Element; +export function HeaderActionMenu(props: HeaderActionMenuProps): JSX_2.Element; // @public (undocumented) export type HeaderActionMenuItem = { @@ -505,7 +500,7 @@ export type HeaderActionMenuItem = { secondaryLabel?: ListItemTextProps['secondary']; icon?: ReactElement; disabled?: boolean; - onClick?: (event: React_2.MouseEvent) => void; + onClick?: (event: MouseEvent_2) => void; }; // @public (undocumented) @@ -528,7 +523,7 @@ export type HeaderClassKey = // Warning: (ae-forgotten-export) The symbol "Props_5" needs to be exported by the entry point index.d.ts // // @public -export function HeaderIconLinkRow(props: Props_5): React_2.JSX.Element; +export function HeaderIconLinkRow(props: Props_5): JSX_2.Element; // @public (undocumented) export type HeaderIconLinkRowClassKey = 'links'; @@ -536,7 +531,7 @@ export type HeaderIconLinkRowClassKey = 'links'; // Warning: (ae-forgotten-export) The symbol "HeaderLabelProps" needs to be exported by the entry point index.d.ts // // @public -export function HeaderLabel(props: HeaderLabelProps): React_2.JSX.Element; +export function HeaderLabel(props: HeaderLabelProps): JSX_2.Element; // @public (undocumented) export type HeaderLabelClassKey = 'root' | 'label' | 'value'; @@ -544,7 +539,7 @@ export type HeaderLabelClassKey = 'root' | 'label' | 'value'; // Warning: (ae-forgotten-export) The symbol "HeaderTabsProps" needs to be exported by the entry point index.d.ts // // @public -export function HeaderTabs(props: HeaderTabsProps): React_2.JSX.Element; +export function HeaderTabs(props: HeaderTabsProps): JSX_2.Element; // @public (undocumented) export type HeaderTabsClassKey = @@ -554,14 +549,14 @@ export type HeaderTabsClassKey = | 'tabRoot'; // @public (undocumented) -export function HelpIcon(props: IconComponentProps): React_2.JSX.Element; +export function HelpIcon(props: IconComponentProps): JSX_2.Element; // Warning: (ae-forgotten-export) The symbol "Props_6" needs to be exported by the entry point index.d.ts // // @public export function HorizontalScrollGrid( props: PropsWithChildren, -): React_2.JSX.Element; +): JSX_2.Element; // @public (undocumented) export type HorizontalScrollGridClassKey = @@ -587,7 +582,7 @@ export function IconLinkVertical({ label, onClick, title, -}: IconLinkVerticalProps): React_2.JSX.Element; +}: IconLinkVerticalProps): JSX_2.Element; // @public (undocumented) export type IconLinkVerticalClassKey = @@ -604,9 +599,9 @@ export type IconLinkVerticalProps = { color?: 'primary' | 'secondary'; disabled?: boolean; href?: string; - icon?: React_2.ReactNode; + icon?: ReactNode; label: string; - onClick?: React_2.MouseEventHandler; + onClick?: MouseEventHandler; title?: string; }; @@ -635,10 +630,10 @@ export type InfoCardVariants = 'flex' | 'fullHeight' | 'gridItem'; // Warning: (ae-missing-release-tag) "ItemCard" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public @deprecated -export function ItemCard(props: ItemCardProps): React_2.JSX.Element; +export function ItemCard(props: ItemCardProps): JSX_2.Element; // @public -export function ItemCardGrid(props: ItemCardGridProps): React_2.JSX.Element; +export function ItemCardGrid(props: ItemCardGridProps): JSX_2.Element; // @public (undocumented) export type ItemCardGridClassKey = 'root'; @@ -647,11 +642,11 @@ export type ItemCardGridClassKey = 'root'; // // @public (undocumented) export type ItemCardGridProps = Partial> & { - children?: React_2.ReactNode; + children?: ReactNode; }; // @public -export function ItemCardHeader(props: ItemCardHeaderProps): React_2.JSX.Element; +export function ItemCardHeader(props: ItemCardHeaderProps): JSX_2.Element; // @public (undocumented) export type ItemCardHeaderClassKey = 'root'; @@ -660,16 +655,16 @@ export type ItemCardHeaderClassKey = 'root'; // // @public (undocumented) export type ItemCardHeaderProps = Partial> & { - title?: React_2.ReactNode; - subtitle?: React_2.ReactNode; - children?: React_2.ReactNode; + title?: ReactNode; + subtitle?: ReactNode; + children?: ReactNode; }; // Warning: (ae-forgotten-export) The symbol "Props_7" needs to be exported by the entry point index.d.ts // Warning: (ae-missing-release-tag) "Lifecycle" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export function Lifecycle(props: Props_7): React_2.JSX.Element; +export function Lifecycle(props: Props_7): JSX_2.Element; // Warning: (ae-missing-release-tag) "LifecycleClassKey" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) // @@ -680,7 +675,7 @@ export type LifecycleClassKey = 'alpha' | 'beta'; // Warning: (ae-missing-release-tag) "LinearGauge" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export function LinearGauge(props: Props_11): React_2.JSX.Element | null; +export function LinearGauge(props: Props_11): JSX_2.Element | null; // Warning: (ae-missing-release-tag) "Link" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) // @@ -714,7 +709,7 @@ export type LinkProps = Omit & export type LoginRequestListItemClassKey = 'root'; // @public -export function LogViewer(props: LogViewerProps): React_2.JSX.Element; +export function LogViewer(props: LogViewerProps): JSX_2.Element; // @public export type LogViewerClassKey = @@ -761,7 +756,7 @@ export interface LogViewerProps { // Warning: (ae-missing-release-tag) "MarkdownContent" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public -export function MarkdownContent(props: Props_8): React_2.JSX.Element; +export function MarkdownContent(props: Props_8): JSX_2.Element; // Warning: (ae-missing-release-tag) "MarkdownContentClassKey" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) // @@ -796,24 +791,20 @@ export type MicDropClassKey = 'micDrop'; // Warning: (ae-forgotten-export) The symbol "Props_3" needs to be exported by the entry point index.d.ts // // @public @deprecated (undocumented) -export function MissingAnnotationEmptyState( - props: Props_3, -): React_2.JSX.Element; +export function MissingAnnotationEmptyState(props: Props_3): JSX_2.Element; // @public -export const MobileSidebar: ( - props: MobileSidebarProps, -) => React_2.JSX.Element | null; +export const MobileSidebar: (props: MobileSidebarProps) => JSX_2.Element | null; // @public export type MobileSidebarProps = { - children?: React_2.ReactNode; + children?: ReactNode; }; // Warning: (ae-missing-release-tag) "OAuthRequestDialog" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export function OAuthRequestDialog(_props: {}): React_2.JSX.Element; +export function OAuthRequestDialog(_props: {}): JSX_2.Element; // Warning: (ae-missing-release-tag) "OAuthRequestDialogClassKey" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) // @@ -833,7 +824,7 @@ export type OpenedDropdownClassKey = 'icon'; // Warning: (ae-missing-release-tag) "OverflowTooltip" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export function OverflowTooltip(props: Props_9): React_2.JSX.Element; +export function OverflowTooltip(props: Props_9): JSX_2.Element; // Warning: (ae-missing-release-tag) "OverflowTooltipClassKey" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) // @@ -844,7 +835,7 @@ export type OverflowTooltipClassKey = 'container'; // Warning: (ae-missing-release-tag) "Page" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export function Page(props: Props_15): React_2.JSX.Element; +export function Page(props: Props_15): JSX_2.Element; // Warning: (ae-missing-release-tag) "PageClassKey" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) // @@ -857,19 +848,19 @@ export type PageClassKey = 'root'; // @public (undocumented) export function PageWithHeader( props: PropsWithChildren, -): React_2.JSX.Element; +): JSX_2.Element; // Warning: (ae-missing-release-tag) "Progress" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) export function Progress( props: PropsWithChildren, -): React_2.JSX.Element; +): JSX_2.Element; // @public export const ProxiedSignInPage: ( props: ProxiedSignInPageProps, -) => React_2.JSX.Element | null; +) => JSX_2.Element | null; // @public export type ProxiedSignInPageProps = SignInPageProps & { @@ -883,7 +874,7 @@ export type ProxiedSignInPageProps = SignInPageProps & { // Warning: (ae-missing-release-tag) "ResponseErrorPanel" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public -export function ResponseErrorPanel(props: ErrorPanelProps): React_2.JSX.Element; +export function ResponseErrorPanel(props: ErrorPanelProps): JSX_2.Element; // Warning: (ae-missing-release-tag) "ResponseErrorPanelClassKey" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) // @@ -893,14 +884,12 @@ export type ResponseErrorPanelClassKey = 'text' | 'divider'; // Warning: (ae-missing-release-tag) "RoutedTabs" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export function RoutedTabs(props: { - routes: SubRoute_2[]; -}): React_2.JSX.Element; +export function RoutedTabs(props: { routes: SubRoute_2[] }): JSX_2.Element; // Warning: (ae-forgotten-export) The symbol "SelectProps" needs to be exported by the entry point index.d.ts // // @public (undocumented) -export function Select(props: SelectProps): React_2.JSX.Element; +export function Select(props: SelectProps): JSX_2.Element; // @public (undocumented) export type SelectClassKey = @@ -924,7 +913,7 @@ export type SelectItem = { }; // @public -export const Sidebar: (props: SidebarProps) => React_2.JSX.Element; +export const Sidebar: (props: SidebarProps) => JSX_2.Element; // Warning: (ae-missing-release-tag) "SIDEBAR_INTRO_LOCAL_STORAGE" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) // @@ -955,7 +944,7 @@ export const sidebarConfig: { }; // @public @deprecated -export const SidebarContext: React_2.Context; +export const SidebarContext: Context; // @public @deprecated export type SidebarContextType = { @@ -976,14 +965,14 @@ export const SidebarDivider: ComponentType< export type SidebarDividerClassKey = 'root'; // @public -export const SidebarExpandButton: () => React_2.JSX.Element | null; +export const SidebarExpandButton: () => JSX_2.Element | null; // @public -export const SidebarGroup: (props: SidebarGroupProps) => React_2.JSX.Element; +export const SidebarGroup: (props: SidebarGroupProps) => JSX_2.Element; // @public export interface SidebarGroupProps extends BottomNavigationActionProps { - children?: React_2.ReactNode; + children?: ReactNode; priority?: number; to?: string; } @@ -1025,7 +1014,7 @@ export type SidebarOpenState = { export function SidebarOpenStateProvider(props: { children: ReactNode; value: SidebarOpenState; -}): React_2.JSX.Element; +}): JSX_2.Element; // @public (undocumented) export type SidebarOptions = { @@ -1036,7 +1025,7 @@ export type SidebarOptions = { // Warning: (ae-missing-release-tag) "SidebarPage" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export function SidebarPage(props: SidebarPageProps): React_2.JSX.Element; +export function SidebarPage(props: SidebarPageProps): JSX_2.Element; // Warning: (ae-missing-release-tag) "SidebarPageClassKey" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) // @@ -1045,7 +1034,7 @@ export type SidebarPageClassKey = 'root'; // @public export type SidebarPageProps = { - children?: React_2.ReactNode; + children?: ReactNode; }; // @public @@ -1056,7 +1045,7 @@ export type SidebarPinState = { }; // @public @deprecated -export const SidebarPinStateContext: React_2.Context; +export const SidebarPinStateContext: Context; // @public @deprecated export type SidebarPinStateContextType = { @@ -1069,7 +1058,7 @@ export type SidebarPinStateContextType = { export function SidebarPinStateProvider(props: { children: ReactNode; value: SidebarPinStateContextType; -}): React_2.JSX.Element; +}): JSX_2.Element; // @public (undocumented) export type SidebarProps = { @@ -1078,7 +1067,7 @@ export type SidebarProps = { sidebarOptions?: SidebarOptions; submenuOptions?: SubmenuOptions; disableExpandOnHover?: boolean; - children?: React_2.ReactNode; + children?: ReactNode; }; // Warning: (ae-missing-release-tag) "SidebarScrollWrapper" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) @@ -1094,7 +1083,7 @@ export const SidebarScrollWrapper: ComponentType< // @public (undocumented) export function SidebarSearchField( props: SidebarSearchFieldProps, -): React_2.JSX.Element; +): JSX_2.Element; // Warning: (ae-missing-release-tag) "SidebarSpace" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) // @@ -1121,9 +1110,7 @@ export const SidebarSpacer: ComponentType< export type SidebarSpacerClassKey = 'root'; // @public -export const SidebarSubmenu: ( - props: SidebarSubmenuProps, -) => React_2.JSX.Element; +export const SidebarSubmenu: (props: SidebarSubmenuProps) => JSX_2.Element; // @public (undocumented) export type SidebarSubmenuClassKey = 'root' | 'drawer' | 'drawerOpen' | 'title'; @@ -1131,7 +1118,7 @@ export type SidebarSubmenuClassKey = 'root' | 'drawer' | 'drawerOpen' | 'title'; // @public export const SidebarSubmenuItem: ( props: SidebarSubmenuItemProps, -) => React_2.JSX.Element; +) => JSX_2.Element; // @public (undocumented) export type SidebarSubmenuItemClassKey = @@ -1172,7 +1159,7 @@ export type SidebarSubmenuProps = { // Warning: (ae-missing-release-tag) "SignInPage" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export function SignInPage(props: Props_16): React_2.JSX.Element; +export function SignInPage(props: Props_16): JSX_2.Element; // Warning: (ae-missing-release-tag) "SignInPageClassKey" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) // @@ -1195,7 +1182,7 @@ export type SignInProviderConfig = { // @public (undocumented) export function SimpleStepper( props: PropsWithChildren, -): React_2.JSX.Element; +): JSX_2.Element; // Warning: (ae-missing-release-tag) "SimpleStepperFooterClassKey" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) // @@ -1208,7 +1195,7 @@ export type SimpleStepperFooterClassKey = 'root'; // @public (undocumented) export function SimpleStepperStep( props: PropsWithChildren, -): React_2.JSX.Element; +): JSX_2.Element; // Warning: (ae-missing-release-tag) "SimpleStepperStepClassKey" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) // @@ -1219,14 +1206,12 @@ export type SimpleStepperStepClassKey = 'end'; export type StackDetailsClassKey = 'title'; // @public (undocumented) -export function StarIcon(props: IconComponentProps): React_2.JSX.Element; +export function StarIcon(props: IconComponentProps): JSX_2.Element; // Warning: (ae-missing-release-tag) "StatusAborted" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export function StatusAborted( - props: PropsWithChildren<{}>, -): React_2.JSX.Element; +export function StatusAborted(props: PropsWithChildren<{}>): JSX_2.Element; // Warning: (ae-missing-release-tag) "StatusClassKey" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) // @@ -1243,38 +1228,32 @@ export type StatusClassKey = // Warning: (ae-missing-release-tag) "StatusError" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export function StatusError(props: PropsWithChildren<{}>): React_2.JSX.Element; +export function StatusError(props: PropsWithChildren<{}>): JSX_2.Element; // Warning: (ae-missing-release-tag) "StatusOK" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export function StatusOK(props: PropsWithChildren<{}>): React_2.JSX.Element; +export function StatusOK(props: PropsWithChildren<{}>): JSX_2.Element; // Warning: (ae-missing-release-tag) "StatusPending" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export function StatusPending( - props: PropsWithChildren<{}>, -): React_2.JSX.Element; +export function StatusPending(props: PropsWithChildren<{}>): JSX_2.Element; // Warning: (ae-missing-release-tag) "StatusRunning" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export function StatusRunning( - props: PropsWithChildren<{}>, -): React_2.JSX.Element; +export function StatusRunning(props: PropsWithChildren<{}>): JSX_2.Element; // Warning: (ae-missing-release-tag) "StatusWarning" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export function StatusWarning( - props: PropsWithChildren<{}>, -): React_2.JSX.Element; +export function StatusWarning(props: PropsWithChildren<{}>): JSX_2.Element; // @public (undocumented) export function StructuredMetadataTable( props: StructuredMetadataTableProps, -): React_2.JSX.Element; +): JSX_2.Element; // Warning: (ae-missing-release-tag) "StructuredMetadataTableListClassKey" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) // @@ -1311,7 +1290,7 @@ export type SubmenuOptions = { // Warning: (ae-missing-release-tag) "SubvalueCell" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export function SubvalueCell(props: SubvalueCellProps): React_2.JSX.Element; +export function SubvalueCell(props: SubvalueCellProps): JSX_2.Element; // Warning: (ae-missing-release-tag) "SubvalueCellClassKey" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) // @@ -1322,9 +1301,7 @@ export type SubvalueCellClassKey = 'value' | 'subvalue'; // Warning: (ae-missing-release-tag) "SupportButton" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export function SupportButton( - props: SupportButtonProps, -): React_2.JSX.Element | null; +export function SupportButton(props: SupportButtonProps): JSX_2.Element | null; // Warning: (ae-missing-release-tag) "SupportButtonClassKey" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) // @@ -1363,9 +1340,9 @@ export type Tab = { id: string; label: string; tabProps?: TabProps< - React_2.ElementType, + ElementType, { - component?: React_2.ElementType; + component?: ElementType; } >; }; @@ -1374,9 +1351,7 @@ export type Tab = { // Warning: (ae-missing-release-tag) "TabbedCard" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export function TabbedCard( - props: PropsWithChildren, -): React_2.JSX.Element; +export function TabbedCard(props: PropsWithChildren): JSX_2.Element; // Warning: (ae-missing-release-tag) "TabbedCardClassKey" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) // @@ -1387,7 +1362,7 @@ export type TabbedCardClassKey = 'root' | 'indicator'; // Warning: (ae-missing-release-tag) "TabbedLayout" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public -export function TabbedLayout(props: PropsWithChildren<{}>): React_2.JSX.Element; +export function TabbedLayout(props: PropsWithChildren<{}>): JSX_2.Element; // @public (undocumented) export namespace TabbedLayout { @@ -1402,7 +1377,7 @@ export namespace TabbedLayout { // @public (undocumented) export function Table( props: TableProps, -): React_2.JSX.Element; +): JSX_2.Element; // @public (undocumented) export namespace Table { @@ -1491,15 +1466,15 @@ export function TrendLine( Pick & { title?: string; }, -): React_2.JSX.Element | null; +): JSX_2.Element | null; // @public (undocumented) -export function UnstarredIcon(props: IconComponentProps): React_2.JSX.Element; +export function UnstarredIcon(props: IconComponentProps): JSX_2.Element; // @public export function useContent(): { focusContent: () => void; - contentRef: React_2.MutableRefObject | undefined; + contentRef: MutableRefObject | undefined; }; // Warning: (ae-forgotten-export) The symbol "SetQueryParams" needs to be exported by the entry point index.d.ts @@ -1512,7 +1487,7 @@ export function useQueryParamState( ): [T | undefined, SetQueryParams]; // @public (undocumented) -export function UserIcon(props: IconComponentProps): React_2.JSX.Element; +export function UserIcon(props: IconComponentProps): JSX_2.Element; // @public export class UserIdentity implements IdentityApi { @@ -1551,13 +1526,13 @@ export const useSidebarPinState: () => SidebarPinState; export function useSupportConfig(): SupportConfig; // @public (undocumented) -export function WarningIcon(props: IconComponentProps): React_2.JSX.Element; +export function WarningIcon(props: IconComponentProps): JSX_2.Element; // Warning: (ae-forgotten-export) The symbol "WarningProps" needs to be exported by the entry point index.d.ts // Warning: (ae-missing-release-tag) "WarningPanel" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public -export function WarningPanel(props: WarningProps): React_2.JSX.Element; +export function WarningPanel(props: WarningProps): JSX_2.Element; // Warning: (ae-missing-release-tag) "WarningPanelClassKey" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) // @@ -1573,7 +1548,7 @@ export type WarningPanelClassKey = // // src/components/DependencyGraph/types.d.ts:22:9 - (ae-unresolved-link) The @link reference could not be resolved: The package "@backstage/core-components" does not have an export "DependencyNode" // src/components/DependencyGraph/types.d.ts:26:9 - (ae-unresolved-link) The @link reference could not be resolved: The package "@backstage/core-components" does not have an export "DependencyNode" -// src/components/TabbedLayout/RoutedTabs.d.ts:9:5 - (ae-forgotten-export) The symbol "SubRoute_2" needs to be exported by the entry point index.d.ts +// src/components/TabbedLayout/RoutedTabs.d.ts:8:5 - (ae-forgotten-export) The symbol "SubRoute_2" needs to be exported by the entry point index.d.ts // src/components/Table/Table.d.ts:20:5 - (ae-forgotten-export) The symbol "SelectedFilters" needs to be exported by the entry point index.d.ts // src/layout/ErrorBoundary/ErrorBoundary.d.ts:8:5 - (ae-forgotten-export) The symbol "SlackChannel" needs to be exported by the entry point index.d.ts ``` 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/report.api.md b/packages/core-plugin-api/report.api.md index 762d07ff36..d29c611abb 100644 --- a/packages/core-plugin-api/report.api.md +++ b/packages/core-plugin-api/report.api.md @@ -9,9 +9,9 @@ import { Config } from '@backstage/config'; import { IconComponent as IconComponent_2 } from '@backstage/core-plugin-api'; import { IdentityApi as IdentityApi_2 } from '@backstage/core-plugin-api'; import { JsonValue } from '@backstage/types'; +import { JSX as JSX_2 } from 'react/jsx-runtime'; import { Observable } from '@backstage/types'; import { PropsWithChildren } from 'react'; -import { default as React_2 } from 'react'; import { ReactElement } from 'react'; import { ReactNode } from 'react'; @@ -43,7 +43,7 @@ export const analyticsApiRef: ApiRef; export const AnalyticsContext: (options: { attributes: Partial; children: ReactNode; -}) => React_2.JSX.Element; +}) => JSX_2.Element; // @public export type AnalyticsContextValue = CommonAnalyticsContext & { @@ -787,9 +787,9 @@ export const vmwareCloudAuthApiRef: ApiRef< export function withApis( apis: TypesToApiRefs, ): ( - WrappedComponent: React_2.ComponentType, + WrappedComponent: ComponentType, ) => { - (props: PropsWithChildren>): React_2.JSX.Element; + (props: PropsWithChildren>): JSX_2.Element; displayName: string; }; ``` 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<{}>) => ( */} - JSX.Element; // @public (undocumented) -export const SidebarLanguageSwitcher: () => React_2.JSX.Element | null; +export const SidebarLanguageSwitcher: () => JSX_2.Element | null; // @public export const SidebarSignOutButton: (props: { icon?: IconComponent; text?: string; -}) => React_2.JSX.Element; +}) => JSX_2.Element; ``` 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/report.api.md b/packages/frontend-defaults/report.api.md index 8bfe2ee017..e9bcd99920 100644 --- a/packages/frontend-defaults/report.api.md +++ b/packages/frontend-defaults/report.api.md @@ -10,7 +10,6 @@ import { ExtensionFactoryMiddleware } from '@backstage/frontend-plugin-api'; import { FrontendFeature } from '@backstage/frontend-plugin-api'; import { FrontendFeatureLoader } from '@backstage/frontend-plugin-api'; import { JSX as JSX_2 } from 'react'; -import { default as React_2 } from 'react'; import { ReactNode } from 'react'; // @public @@ -49,7 +48,7 @@ export interface CreateAppOptions { // @public export function createPublicSignInApp(options?: CreateAppOptions): { - createRoot(): React_2.JSX.Element; + createRoot(): JSX_2; }; // @public (undocumented) 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/report.api.md b/packages/frontend-plugin-api/report.api.md index a8b5937af1..0d29eec03f 100644 --- a/packages/frontend-plugin-api/report.api.md +++ b/packages/frontend-plugin-api/report.api.md @@ -52,7 +52,8 @@ import { IconComponent as IconComponent_2 } from '@backstage/core-plugin-api'; import { IdentityApi } from '@backstage/core-plugin-api'; import { identityApiRef } from '@backstage/core-plugin-api'; import { JsonObject } from '@backstage/types'; -import { JSX as JSX_2 } from 'react'; +import { JSX as JSX_2 } from 'react/jsx-runtime'; +import { JSX as JSX_3 } from 'react'; import { microsoftAuthApiRef } from '@backstage/core-plugin-api'; import { OAuthApi } from '@backstage/core-plugin-api'; import { OAuthRequestApi } from '@backstage/core-plugin-api'; @@ -67,7 +68,6 @@ import { PendingOAuthRequest } from '@backstage/core-plugin-api'; import { ProfileInfo } from '@backstage/core-plugin-api'; import { ProfileInfoApi } from '@backstage/core-plugin-api'; import { PropsWithChildren } from 'react'; -import { default as React_2 } from 'react'; import { ReactNode } from 'react'; import { SessionApi } from '@backstage/core-plugin-api'; import { SessionState } from '@backstage/core-plugin-api'; @@ -107,7 +107,7 @@ export const analyticsApiRef: ApiRef; export const AnalyticsContext: (options: { attributes: Partial; children: ReactNode; -}) => React_2.JSX.Element; +}) => JSX_2.Element; // @public export type AnalyticsContextValue = CommonAnalyticsContext & { @@ -245,7 +245,7 @@ export const AppRootElementBlueprint: ExtensionBlueprint<{ params: { element: JSX.Element | (() => JSX.Element); }; - output: ConfigurableExtensionDataRef; + output: ConfigurableExtensionDataRef; inputs: {}; config: {}; configInput: {}; @@ -260,8 +260,8 @@ export const AppRootWrapperBlueprint: ExtensionBlueprint<{ Component: ComponentType>; }; output: ConfigurableExtensionDataRef< - React_2.ComponentType<{ - children?: React_2.ReactNode | undefined; + ComponentType<{ + children?: ReactNode | undefined; }>, 'app.root.wrapper', {} @@ -271,8 +271,8 @@ export const AppRootWrapperBlueprint: ExtensionBlueprint<{ configInput: {}; dataRefs: { component: ConfigurableExtensionDataRef< - React_2.ComponentType<{ - children?: React_2.ReactNode | undefined; + ComponentType<{ + children?: ReactNode | undefined; }>, 'app.root.wrapper', {} @@ -384,7 +384,7 @@ export type CoreErrorBoundaryFallbackProps = { // @public (undocumented) export const coreExtensionData: { reactElement: ConfigurableExtensionDataRef< - JSX_2.Element, + JSX_3.Element, 'core.reactElement', {} >; @@ -1009,9 +1009,7 @@ export type ExtensionBlueprintParameters = { }; // @public (undocumented) -export function ExtensionBoundary( - props: ExtensionBoundaryProps, -): React_2.JSX.Element; +export function ExtensionBoundary(props: ExtensionBoundaryProps): JSX_2.Element; // @public (undocumented) export namespace ExtensionBoundary { @@ -1462,7 +1460,7 @@ export const PageBlueprint: ExtensionBlueprint<{ routeRef?: RouteRef; }; output: - | ConfigurableExtensionDataRef + | ConfigurableExtensionDataRef | ConfigurableExtensionDataRef | ConfigurableExtensionDataRef< RouteRef, @@ -1678,7 +1676,7 @@ export const SignInPageBlueprint: ExtensionBlueprint<{ loader: () => Promise>; }; output: ConfigurableExtensionDataRef< - React_2.ComponentType, + ComponentType, 'core.sign-in-page.component', {} >; @@ -1687,7 +1685,7 @@ export const SignInPageBlueprint: ExtensionBlueprint<{ configInput: {}; dataRefs: { component: ConfigurableExtensionDataRef< - React_2.ComponentType, + ComponentType, 'core.sign-in-page.component', {} >; 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/report.api.md b/packages/integration-react/report.api.md index 8d02c46010..78da2eb5fa 100644 --- a/packages/integration-react/report.api.md +++ b/packages/integration-react/report.api.md @@ -8,10 +8,10 @@ import { ApiRef } from '@backstage/core-plugin-api'; import { AuthRequestOptions } from '@backstage/core-plugin-api'; import { BackstageIdentityApi } from '@backstage/core-plugin-api'; import { Config } from '@backstage/config'; +import { JSX as JSX_2 } from 'react/jsx-runtime'; import { OAuthApi } from '@backstage/core-plugin-api'; import { OpenIdConnectApi } from '@backstage/core-plugin-api'; import { ProfileInfoApi } from '@backstage/core-plugin-api'; -import { default as React_2 } from 'react'; import { ScmIntegrationRegistry } from '@backstage/integration'; import { SessionApi } from '@backstage/core-plugin-api'; @@ -121,7 +121,7 @@ export interface ScmAuthTokenResponse { // @public export const ScmIntegrationIcon: ( props: ScmIntegrationIconProps, -) => React_2.JSX.Element; +) => JSX_2.Element; // @public export type ScmIntegrationIconProps = { 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/report.api.md b/packages/test-utils/report.api.md index 3fbd2a9c91..b3cf84b5ae 100644 --- a/packages/test-utils/report.api.md +++ b/packages/test-utils/report.api.md @@ -27,11 +27,11 @@ import { IconComponent } from '@backstage/core-plugin-api'; import { IdentityApi } from '@backstage/core-plugin-api'; import { JsonObject } from '@backstage/types'; import { JsonValue } from '@backstage/types'; +import { JSX as JSX_2 } from 'react/jsx-runtime'; import { MatcherFunction } from '@testing-library/react'; import { Observable } from '@backstage/types'; import { PermissionApi } from '@backstage/plugin-permission-react'; import { PropsWithChildren } from 'react'; -import { default as React_2 } from 'react'; import { ReactElement } from 'react'; import { ReactNode } from 'react'; import { RenderOptions } from '@testing-library/react'; @@ -342,7 +342,7 @@ export type SyncLogCollector = () => void; // @public export const TestApiProvider: ( props: TestApiProviderProps, -) => React_2.JSX.Element; +) => JSX_2.Element; // @public export type TestApiProviderProps = { 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/report.api.md b/plugins/api-docs-module-protoc-gen-doc/report.api.md index 836f8313d8..3e0f57d544 100644 --- a/plugins/api-docs-module-protoc-gen-doc/report.api.md +++ b/plugins/api-docs-module-protoc-gen-doc/report.api.md @@ -3,12 +3,12 @@ > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). ```ts -import { default as React_2 } from 'react'; +import { JSX as JSX_2 } from 'react/jsx-runtime'; // @public (undocumented) export const grpcDocsApiWidget: { type: string; title: string; - component: (definition: string) => React_2.JSX.Element; + component: (definition: string) => JSX_2.Element; }; ``` 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/report-alpha.api.md b/plugins/api-docs/report-alpha.api.md index 25fda584e1..2724bc046c 100644 --- a/plugins/api-docs/report-alpha.api.md +++ b/plugins/api-docs/report-alpha.api.md @@ -16,7 +16,7 @@ import { ExtensionInput } from '@backstage/frontend-plugin-api'; import { ExternalRouteRef } from '@backstage/frontend-plugin-api'; import { FrontendPlugin } from '@backstage/frontend-plugin-api'; import { IconComponent } from '@backstage/core-plugin-api'; -import { default as React_2 } from 'react'; +import { JSX as JSX_2 } from 'react'; import { RouteRef } from '@backstage/frontend-plugin-api'; // @public (undocumented) @@ -55,11 +55,7 @@ const _default: FrontendPlugin< type?: 'content' | 'summary' | 'info' | undefined; }; output: - | ConfigurableExtensionDataRef< - React_2.JSX.Element, - 'core.reactElement', - {} - > + | ConfigurableExtensionDataRef | ConfigurableExtensionDataRef< (entity: Entity) => boolean, 'catalog.entity-filter-function', @@ -100,11 +96,7 @@ const _default: FrontendPlugin< type?: 'content' | 'summary' | 'info' | undefined; }; output: - | ConfigurableExtensionDataRef< - React_2.JSX.Element, - 'core.reactElement', - {} - > + | ConfigurableExtensionDataRef | ConfigurableExtensionDataRef< (entity: Entity) => boolean, 'catalog.entity-filter-function', @@ -145,11 +137,7 @@ const _default: FrontendPlugin< type?: 'content' | 'summary' | 'info' | undefined; }; output: - | ConfigurableExtensionDataRef< - React_2.JSX.Element, - 'core.reactElement', - {} - > + | ConfigurableExtensionDataRef | ConfigurableExtensionDataRef< (entity: Entity) => boolean, 'catalog.entity-filter-function', @@ -190,11 +178,7 @@ const _default: FrontendPlugin< type?: 'content' | 'summary' | 'info' | undefined; }; output: - | ConfigurableExtensionDataRef< - React_2.JSX.Element, - 'core.reactElement', - {} - > + | ConfigurableExtensionDataRef | ConfigurableExtensionDataRef< (entity: Entity) => boolean, 'catalog.entity-filter-function', @@ -235,11 +219,7 @@ const _default: FrontendPlugin< type?: 'content' | 'summary' | 'info' | undefined; }; output: - | ConfigurableExtensionDataRef< - React_2.JSX.Element, - 'core.reactElement', - {} - > + | ConfigurableExtensionDataRef | ConfigurableExtensionDataRef< (entity: Entity) => boolean, 'catalog.entity-filter-function', @@ -280,11 +260,7 @@ const _default: FrontendPlugin< type?: 'content' | 'summary' | 'info' | undefined; }; output: - | ConfigurableExtensionDataRef< - React_2.JSX.Element, - 'core.reactElement', - {} - > + | ConfigurableExtensionDataRef | ConfigurableExtensionDataRef< (entity: Entity) => boolean, 'catalog.entity-filter-function', @@ -329,11 +305,7 @@ const _default: FrontendPlugin< group?: string | false | undefined; }; output: - | ConfigurableExtensionDataRef< - React_2.JSX.Element, - 'core.reactElement', - {} - > + | ConfigurableExtensionDataRef | ConfigurableExtensionDataRef | ConfigurableExtensionDataRef< RouteRef, @@ -394,11 +366,7 @@ const _default: FrontendPlugin< group?: string | false | undefined; }; output: - | ConfigurableExtensionDataRef< - React_2.JSX.Element, - 'core.reactElement', - {} - > + | ConfigurableExtensionDataRef | ConfigurableExtensionDataRef | ConfigurableExtensionDataRef< RouteRef, @@ -476,11 +444,7 @@ const _default: FrontendPlugin< path?: string | undefined; }; output: - | ConfigurableExtensionDataRef< - React_2.JSX.Element, - 'core.reactElement', - {} - > + | ConfigurableExtensionDataRef | ConfigurableExtensionDataRef | ConfigurableExtensionDataRef< RouteRef, diff --git a/plugins/api-docs/report.api.md b/plugins/api-docs/report.api.md index 68b5fd0df9..fb37b2b33b 100644 --- a/plugins/api-docs/report.api.md +++ b/plugins/api-docs/report.api.md @@ -12,8 +12,8 @@ import { EntityListPagination } from '@backstage/plugin-catalog-react'; import { EntityOwnerPickerProps } from '@backstage/plugin-catalog-react'; import { ExternalRouteRef } from '@backstage/core-plugin-api'; import { InfoCardVariants } from '@backstage/core-components'; -import { JSX as JSX_2 } from 'react'; -import { default as React_2 } from 'react'; +import { JSX as JSX_2 } from 'react/jsx-runtime'; +import { ReactElement } from 'react'; import { RouteRef } from '@backstage/core-plugin-api'; import { TableColumn } from '@backstage/core-components'; import { TableOptions } from '@backstage/core-components'; @@ -21,20 +21,20 @@ import { TableProps } from '@backstage/core-components'; import { UserListFilterKind } from '@backstage/plugin-catalog-react'; // @public (undocumented) -export const ApiDefinitionCard: () => React_2.JSX.Element; +export const ApiDefinitionCard: () => JSX_2.Element; // @public export function ApiDefinitionDialog(props: { open: boolean; entity: ApiEntity; onClose: () => void; -}): React_2.JSX.Element; +}): JSX_2.Element; // @public (undocumented) export type ApiDefinitionWidget = { type: string; title: string; - component: (definition: string) => React_2.ReactElement; + component: (definition: string) => ReactElement; rawLanguage?: string; }; @@ -64,7 +64,7 @@ export { apiDocsPlugin as plugin }; // @public export const ApiExplorerIndexPage: ( props: DefaultApiExplorerPageProps, -) => React_2.JSX.Element; +) => JSX_2.Element; // @public (undocumented) export const ApiExplorerPage: ( @@ -72,14 +72,12 @@ export const ApiExplorerPage: ( ) => JSX_2.Element; // @public (undocumented) -export const ApiTypeTitle: (props: { - apiEntity: ApiEntity; -}) => React_2.JSX.Element; +export const ApiTypeTitle: (props: { apiEntity: ApiEntity }) => JSX_2.Element; // @public (undocumented) export const AsyncApiDefinitionWidget: ( props: AsyncApiDefinitionWidgetProps, -) => React_2.JSX.Element; +) => JSX_2.Element; // @public (undocumented) export type AsyncApiDefinitionWidgetProps = { @@ -101,18 +99,18 @@ export const ConsumedApisCard: (props: { title?: string; columns?: TableColumn[]; tableOptions?: TableOptions; -}) => React_2.JSX.Element; +}) => JSX_2.Element; // @public (undocumented) export const ConsumingComponentsCard: (props: { variant?: InfoCardVariants; columns?: TableColumn[]; -}) => React_2.JSX.Element; +}) => JSX_2.Element; // @public export const DefaultApiExplorerPage: ( props: DefaultApiExplorerPageProps, -) => React_2.JSX.Element; +) => JSX_2.Element; // @public export type DefaultApiExplorerPageProps = { @@ -168,7 +166,7 @@ export const EntityProvidingComponentsCard: (props: { // @public (undocumented) export const GraphQlDefinitionWidget: ( props: GraphQlDefinitionWidgetProps, -) => React_2.JSX.Element; +) => JSX_2.Element; // @public (undocumented) export type GraphQlDefinitionWidgetProps = { @@ -181,12 +179,12 @@ export const HasApisCard: (props: { title?: string; columns?: TableColumn[]; tableOptions?: TableOptions; -}) => React_2.JSX.Element; +}) => JSX_2.Element; // @public (undocumented) export const OpenApiDefinitionWidget: ( props: OpenApiDefinitionWidgetProps, -) => React_2.JSX.Element; +) => JSX_2.Element; // @public (undocumented) export type OpenApiDefinitionWidgetProps = { @@ -198,7 +196,7 @@ export type OpenApiDefinitionWidgetProps = { // @public (undocumented) export const PlainApiDefinitionWidget: ( props: PlainApiDefinitionWidgetProps, -) => React_2.JSX.Element; +) => JSX_2.Element; // @public (undocumented) export type PlainApiDefinitionWidgetProps = { @@ -212,18 +210,18 @@ export const ProvidedApisCard: (props: { title?: string; columns?: TableColumn[]; tableOptions?: TableOptions; -}) => React_2.JSX.Element; +}) => JSX_2.Element; // @public (undocumented) export const ProvidingComponentsCard: (props: { variant?: InfoCardVariants; columns?: TableColumn[]; -}) => React_2.JSX.Element; +}) => JSX_2.Element; // @public (undocumented) export const TrpcApiDefinitionWidget: ( props: TrpcApiDefinitionWidgetProps, -) => React_2.JSX.Element; +) => JSX_2.Element; // @public (undocumented) export type TrpcApiDefinitionWidgetProps = { 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/report.api.md b/plugins/app-visualizer/report.api.md index 00470e6044..370647afc9 100644 --- a/plugins/app-visualizer/report.api.md +++ b/plugins/app-visualizer/report.api.md @@ -8,7 +8,7 @@ import { ConfigurableExtensionDataRef } from '@backstage/frontend-plugin-api'; import { ExtensionDefinition } from '@backstage/frontend-plugin-api'; import { FrontendPlugin } from '@backstage/frontend-plugin-api'; import { IconComponent } from '@backstage/core-plugin-api'; -import { default as React_2 } from 'react'; +import { JSX as JSX_2 } from 'react'; import { RouteRef } from '@backstage/frontend-plugin-api'; // @public (undocumented) @@ -47,11 +47,7 @@ const visualizerPlugin: FrontendPlugin< path?: string | undefined; }; output: - | ConfigurableExtensionDataRef< - React_2.JSX.Element, - 'core.reactElement', - {} - > + | ConfigurableExtensionDataRef | ConfigurableExtensionDataRef | ConfigurableExtensionDataRef< RouteRef, 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/report.api.md b/plugins/auth-react/report.api.md index d5206261d2..dbbdeb86e3 100644 --- a/plugins/auth-react/report.api.md +++ b/plugins/auth-react/report.api.md @@ -3,11 +3,11 @@ > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). ```ts -import { default as React_2 } from 'react'; +import { JSX as JSX_2 } from 'react/jsx-runtime'; import { ReactNode } from 'react'; // @public -export function CookieAuthRedirect(): React_2.JSX.Element | null; +export function CookieAuthRedirect(): JSX_2.Element | null; // @public export function CookieAuthRefreshProvider( 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/report-alpha.api.md b/plugins/catalog-graph/report-alpha.api.md index 0687efce05..cf5835e35c 100644 --- a/plugins/catalog-graph/report-alpha.api.md +++ b/plugins/catalog-graph/report-alpha.api.md @@ -14,7 +14,7 @@ import { ExtensionDefinition } from '@backstage/frontend-plugin-api'; import { ExtensionInput } from '@backstage/frontend-plugin-api'; import { ExternalRouteRef } from '@backstage/frontend-plugin-api'; import { FrontendPlugin } from '@backstage/frontend-plugin-api'; -import { default as React_2 } from 'react'; +import { JSX as JSX_2 } from 'react'; import { RouteRef } from '@backstage/frontend-plugin-api'; // @public (undocumented) @@ -64,11 +64,7 @@ const _default: FrontendPlugin< type?: 'content' | 'summary' | 'info' | undefined; }; output: - | ConfigurableExtensionDataRef< - React_2.JSX.Element, - 'core.reactElement', - {} - > + | ConfigurableExtensionDataRef | ConfigurableExtensionDataRef< (entity: Entity) => boolean, 'catalog.entity-filter-function', @@ -143,11 +139,7 @@ const _default: FrontendPlugin< path?: string | undefined; }; output: - | ConfigurableExtensionDataRef< - React_2.JSX.Element, - 'core.reactElement', - {} - > + | ConfigurableExtensionDataRef | ConfigurableExtensionDataRef | ConfigurableExtensionDataRef< RouteRef, diff --git a/plugins/catalog-graph/report.api.md b/plugins/catalog-graph/report.api.md index 925b95e6d4..25479bd9b7 100644 --- a/plugins/catalog-graph/report.api.md +++ b/plugins/catalog-graph/report.api.md @@ -10,10 +10,9 @@ import { Entity } from '@backstage/catalog-model'; import { ExternalRouteRef } from '@backstage/core-plugin-api'; import { InfoCardVariants } from '@backstage/core-components'; import { JsonObject } from '@backstage/types'; -import { JSX as JSX_2 } from 'react'; +import { JSX as JSX_2 } from 'react/jsx-runtime'; import { MouseEvent as MouseEvent_2 } from 'react'; import { MouseEventHandler } from 'react'; -import { default as React_2 } from 'react'; import { ReactNode } from 'react'; import { RouteRef } from '@backstage/core-plugin-api'; @@ -109,7 +108,7 @@ export type EntityNodeData = { // @public export const EntityRelationsGraph: ( props: EntityRelationsGraphProps, -) => React_2.JSX.Element; +) => JSX_2.Element; // @public (undocumented) export type EntityRelationsGraphClassKey = 'progress' | 'container' | 'graph'; 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/report-alpha.api.md b/plugins/catalog-import/report-alpha.api.md index 4cbcc8e7c1..24789a42e4 100644 --- a/plugins/catalog-import/report-alpha.api.md +++ b/plugins/catalog-import/report-alpha.api.md @@ -8,7 +8,7 @@ import { AnyRouteRefParams } from '@backstage/frontend-plugin-api'; import { ConfigurableExtensionDataRef } from '@backstage/frontend-plugin-api'; import { ExtensionDefinition } from '@backstage/frontend-plugin-api'; import { FrontendPlugin } from '@backstage/frontend-plugin-api'; -import { default as React_2 } from 'react'; +import { JSX as JSX_2 } from 'react'; import { RouteRef } from '@backstage/frontend-plugin-api'; import { TranslationRef } from '@backstage/core-plugin-api/alpha'; @@ -53,11 +53,7 @@ const _default: FrontendPlugin< path?: string | undefined; }; output: - | ConfigurableExtensionDataRef< - React_2.JSX.Element, - 'core.reactElement', - {} - > + | ConfigurableExtensionDataRef | ConfigurableExtensionDataRef | ConfigurableExtensionDataRef< RouteRef, diff --git a/plugins/catalog-import/report.api.md b/plugins/catalog-import/report.api.md index 66a39e8b90..9bc71a4296 100644 --- a/plugins/catalog-import/report.api.md +++ b/plugins/catalog-import/report.api.md @@ -6,6 +6,7 @@ import { ApiRef } from '@backstage/core-plugin-api'; import { BackstagePlugin } from '@backstage/core-plugin-api'; import { CatalogApi } from '@backstage/catalog-client'; +import { ComponentProps } from 'react'; import { CompoundEntityRef } from '@backstage/catalog-model'; import { ConfigApi } from '@backstage/core-plugin-api'; import { Controller } from 'react-hook-form'; @@ -14,9 +15,10 @@ import { Entity } from '@backstage/catalog-model'; import { FetchApi } from '@backstage/core-plugin-api'; import { FieldErrors } from 'react-hook-form'; import { InfoCardVariants } from '@backstage/core-components'; -import { JSX as JSX_2 } from 'react'; +import { JSX as JSX_2 } from 'react/jsx-runtime'; import { NestedValue } from 'react-hook-form'; -import { default as React_2 } from 'react'; +import { ReactElement } from 'react'; +import { ReactNode } from 'react'; import { RouteRef } from '@backstage/core-plugin-api'; import { ScmAuthApi } from '@backstage/integration-react'; import { ScmIntegrationRegistry } from '@backstage/integration'; @@ -45,7 +47,7 @@ export type AnalyzeResult = // @public export const AutocompleteTextField: ( props: AutocompleteTextFieldProps, -) => React_2.JSX.Element; +) => JSX_2.Element; // @public export interface AutocompleteTextFieldProps { @@ -54,7 +56,7 @@ export interface AutocompleteTextFieldProps { // (undocumented) errors?: FieldErrors; // (undocumented) - helperText?: React_2.ReactNode; + helperText?: ReactNode; // (undocumented) loading?: boolean; // (undocumented) @@ -66,7 +68,7 @@ export interface AutocompleteTextFieldProps { // (undocumented) required?: boolean; // (undocumented) - rules?: React_2.ComponentProps['rules']; + rules?: ComponentProps['rules']; // (undocumented) textFieldProps?: Omit; } @@ -146,21 +148,21 @@ export function defaultGenerateStepper( ): StepperProvider; // @public -export const DefaultImportPage: () => React_2.JSX.Element; +export const DefaultImportPage: () => JSX_2.Element; // @public export const EntityListComponent: ( props: EntityListComponentProps, -) => React_2.JSX.Element; +) => JSX_2.Element; // @public export interface EntityListComponentProps { // (undocumented) collapsed?: boolean; // (undocumented) - firstListItem?: React_2.ReactElement; + firstListItem?: ReactElement; // (undocumented) - locationListItemIcon: (target: string) => React_2.ReactElement; + locationListItemIcon: (target: string) => ReactElement; // (undocumented) locations: Array<{ target: string; @@ -180,9 +182,7 @@ export type ImportFlows = | 'no-location'; // @public -export const ImportInfoCard: ( - props: ImportInfoCardProps, -) => React_2.JSX.Element; +export const ImportInfoCard: (props: ImportInfoCardProps) => JSX_2.Element; // @public export interface ImportInfoCardProps { @@ -205,7 +205,7 @@ export type ImportState = State & { }; // @public -export const ImportStepper: (props: ImportStepperProps) => React_2.JSX.Element; +export const ImportStepper: (props: ImportStepperProps) => JSX_2.Element; // @public export interface ImportStepperProps { @@ -223,7 +223,7 @@ export interface ImportStepperProps { // @public export const PreparePullRequestForm: >( props: PreparePullRequestFormProps, -) => React_2.JSX.Element; +) => JSX_2.Element; // @public export type PreparePullRequestFormProps< @@ -237,7 +237,7 @@ export type PreparePullRequestFormProps< > & { values: TFieldValues; }, - ) => React_2.ReactNode; + ) => ReactNode; }; // @public @@ -266,7 +266,7 @@ export type PrepareResult = // @public export const PreviewCatalogInfoComponent: ( props: PreviewCatalogInfoComponentProps, -) => React_2.JSX.Element; +) => JSX_2.Element; // @public export interface PreviewCatalogInfoComponentProps { @@ -284,7 +284,7 @@ export interface PreviewCatalogInfoComponentProps { // @public export const PreviewPullRequestComponent: ( props: PreviewPullRequestComponentProps, -) => React_2.JSX.Element; +) => JSX_2.Element; // @public export interface PreviewPullRequestComponentProps { @@ -302,7 +302,7 @@ export interface PreviewPullRequestComponentProps { // @public export const StepInitAnalyzeUrl: ( props: StepInitAnalyzeUrlProps, -) => React_2.JSX.Element; +) => JSX_2.Element; // @public export interface StepInitAnalyzeUrlProps { @@ -326,7 +326,7 @@ export interface StepInitAnalyzeUrlProps { // @public export const StepPrepareCreatePullRequest: ( props: StepPrepareCreatePullRequestProps, -) => React_2.JSX.Element; +) => JSX_2.Element; // @public export interface StepPrepareCreatePullRequestProps { @@ -358,7 +358,7 @@ export interface StepPrepareCreatePullRequestProps { groups: string[]; groupsLoading: boolean; }, - ) => React_2.ReactNode; + ) => ReactNode; } // @public @deprecated 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 }) => ( boolean); - loader: () => Promise< - (props: EntityContentLayoutProps) => React_2.JSX.Element - >; + loader: () => Promise<(props: EntityContentLayoutProps) => JSX_2.Element>; }; output: | ConfigurableExtensionDataRef< @@ -287,7 +284,7 @@ export const EntityContentLayoutBlueprint: ExtensionBlueprint<{ } > | ConfigurableExtensionDataRef< - (props: EntityContentLayoutProps) => React_2.JSX.Element, + (props: EntityContentLayoutProps) => React.JSX.Element, 'catalog.entity-content-layout.component', {} >; @@ -312,7 +309,7 @@ export const EntityContentLayoutBlueprint: ExtensionBlueprint<{ {} >; component: ConfigurableExtensionDataRef< - (props: EntityContentLayoutProps) => React_2.JSX.Element, + (props: EntityContentLayoutProps) => React.JSX.Element, 'catalog.entity-content-layout.component', {} >; @@ -324,7 +321,7 @@ export interface EntityContentLayoutProps { // (undocumented) cards: Array<{ type?: EntityCardType; - element: React_2.JSX.Element; + element: JSX_2.Element; }>; } diff --git a/plugins/catalog-react/report-testUtils.api.md b/plugins/catalog-react/report-testUtils.api.md index 331ef45988..a613a388d4 100644 --- a/plugins/catalog-react/report-testUtils.api.md +++ b/plugins/catalog-react/report-testUtils.api.md @@ -9,8 +9,8 @@ import { CatalogApi } from '@backstage/catalog-client'; import { DefaultEntityFilters } from '@backstage/plugin-catalog-react'; import { Entity } from '@backstage/catalog-model'; import { EntityListContextProps } from '@backstage/plugin-catalog-react'; +import { JSX as JSX_2 } from 'react/jsx-runtime'; import { PropsWithChildren } from 'react'; -import { default as React_2 } from 'react'; // @public export function catalogApiMock(options?: { entities?: Entity[] }): CatalogApi; @@ -32,5 +32,5 @@ export function MockEntityListContextProvider< props: PropsWithChildren<{ value?: Partial>; }>, -): React_2.JSX.Element; +): JSX_2.Element; ``` diff --git a/plugins/catalog-react/report.api.md b/plugins/catalog-react/report.api.md index a0e2d22141..1e5735bd86 100644 --- a/plugins/catalog-react/report.api.md +++ b/plugins/catalog-react/report.api.md @@ -10,16 +10,17 @@ import { CatalogApi } from '@backstage/catalog-client'; import { ComponentEntity } from '@backstage/catalog-model'; import { ComponentProps } from 'react'; import { CompoundEntityRef } from '@backstage/catalog-model'; +import { Context } from 'react'; import { Entity } from '@backstage/catalog-model'; import IconButton from '@material-ui/core/IconButton'; import { IconComponent } from '@backstage/core-plugin-api'; import { InfoCardVariants } from '@backstage/core-components'; +import { JSX as JSX_2 } from 'react/jsx-runtime'; import { LinkProps } from '@backstage/core-components'; import { Observable } from '@backstage/types'; import { OutlinedTextFieldProps } from '@material-ui/core/TextField'; import { Overrides } from '@material-ui/core/styles/overrides'; import { PropsWithChildren } from 'react'; -import { default as React_2 } from 'react'; import { ReactNode } from 'react'; import { RouteRef } from '@backstage/core-plugin-api'; import { scmIntegrationsApiRef } from '@backstage/integration-react'; @@ -42,7 +43,7 @@ export type AllowedEntityFilters = { // @public export const AsyncEntityProvider: ( props: AsyncEntityProviderProps, -) => React_2.JSX.Element; +) => JSX_2.Element; // @public export interface AsyncEntityProviderProps { @@ -80,7 +81,7 @@ export function CatalogAutocomplete< FreeSolo extends boolean | undefined = undefined, >( props: CatalogAutocompleteProps, -): React_2.JSX.Element; +): JSX_2.Element; // @public export type CatalogAutocompleteProps< @@ -106,15 +107,15 @@ export type CatalogAutocompleteProps< // @public (undocumented) export const CatalogFilterLayout: { - (props: { children: React_2.ReactNode }): React_2.JSX.Element; + (props: { children: ReactNode }): JSX_2.Element; Filters: (props: { - children: React_2.ReactNode; + children: ReactNode; options?: { drawerBreakpoint?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number; drawerAnchor?: 'left' | 'right' | 'top' | 'bottom'; }; - }) => React_2.JSX.Element; - Content: (props: { children: React_2.ReactNode }) => React_2.JSX.Element; + }) => JSX_2.Element; + Content: (props: { children: ReactNode }) => JSX_2.Element; }; // @public (undocumented) @@ -208,9 +209,7 @@ export function defaultEntityPresentation( ): EntityRefPresentationSnapshot; // @public (undocumented) -export const DefaultFilters: ( - props: DefaultFiltersProps, -) => React_2.JSX.Element; +export const DefaultFilters: (props: DefaultFiltersProps) => JSX_2.Element; // @public export type DefaultFiltersProps = { @@ -224,7 +223,7 @@ export type DefaultFiltersProps = { export function EntityAutocompletePicker< T extends DefaultEntityFilters = DefaultEntityFilters, Name extends AllowedEntityFilters = AllowedEntityFilters, ->(props: EntityAutocompletePickerProps): React_2.JSX.Element | null; +>(props: EntityAutocompletePickerProps): JSX_2.Element | null; // @public (undocumented) export type EntityAutocompletePickerProps< @@ -291,7 +290,7 @@ export class EntityKindFilter implements EntityFilter { // @public (undocumented) export const EntityKindPicker: ( props: EntityKindPickerProps, -) => React_2.JSX.Element | null; +) => JSX_2.Element | null; // @public export interface EntityKindPickerProps { @@ -318,10 +317,10 @@ export class EntityLifecycleFilter implements EntityFilter { // @public (undocumented) export const EntityLifecyclePicker: (props: { initialFilter?: string[]; -}) => React_2.JSX.Element; +}) => JSX_2.Element; // @public -export const EntityListContext: React_2.Context< +export const EntityListContext: Context< EntityListContextProps | undefined >; @@ -368,7 +367,7 @@ export type EntityListPagination = // @public export const EntityListProvider: ( props: EntityListProviderProps, -) => React_2.JSX.Element; +) => JSX_2.Element; // @public (undocumented) export type EntityListProviderProps = PropsWithChildren<{ @@ -399,7 +398,7 @@ export class EntityNamespaceFilter implements EntityFilter { // @public (undocumented) export const EntityNamespacePicker: ( props: EntityNamespacePickerProps, -) => React_2.JSX.Element; +) => JSX_2.Element; // @public export interface EntityNamespacePickerProps { @@ -433,7 +432,7 @@ export class EntityOwnerFilter implements EntityFilter { // @public (undocumented) export const EntityOwnerPicker: ( props?: EntityOwnerPickerProps, -) => React_2.JSX.Element | null; +) => JSX_2.Element | null; // @public (undocumented) export type EntityOwnerPickerProps = { @@ -443,7 +442,7 @@ export type EntityOwnerPickerProps = { // @public export const EntityPeekAheadPopover: ( props: EntityPeekAheadPopoverProps, -) => React_2.JSX.Element; +) => JSX_2.Element; // @public export type EntityPeekAheadPopoverProps = PropsWithChildren<{ @@ -466,12 +465,10 @@ export interface EntityPresentationApi { export const entityPresentationApiRef: ApiRef; // @public (undocumented) -export const EntityProcessingStatusPicker: () => React_2.JSX.Element; +export const EntityProcessingStatusPicker: () => JSX_2.Element; // @public -export const EntityProvider: ( - props: EntityProviderProps, -) => React_2.JSX.Element; +export const EntityProvider: (props: EntityProviderProps) => JSX_2.Element; // @public export interface EntityProviderProps { @@ -490,7 +487,7 @@ export type EntityRefLinkProps = { defaultKind?: string; defaultNamespace?: string; title?: string; - children?: React_2.ReactNode; + children?: ReactNode; hideIcon?: boolean; disableTooltip?: boolean; } & Omit; @@ -498,7 +495,7 @@ export type EntityRefLinkProps = { // @public export function EntityRefLinks< TRef extends string | CompoundEntityRef | Entity, ->(props: EntityRefLinksProps): React_2.JSX.Element; +>(props: EntityRefLinksProps): JSX_2.Element; // @public export type EntityRefLinksProps< @@ -541,7 +538,7 @@ export const entityRouteRef: RouteRef<{ }>; // @public -export const EntitySearchBar: () => React_2.JSX.Element; +export const EntitySearchBar: () => JSX_2.Element; // @public (undocumented) export type EntitySourceLocation = { @@ -551,7 +548,7 @@ export type EntitySourceLocation = { // @public export const EntityTable: { - (props: EntityTableProps): React_2.JSX.Element; + (props: EntityTableProps): JSX_2.Element; columns: Readonly<{ createEntityRefColumn(options: { defaultKind?: string; @@ -605,9 +602,7 @@ export class EntityTagFilter implements EntityFilter { } // @public (undocumented) -export const EntityTagPicker: ( - props: EntityTagPickerProps, -) => React_2.JSX.Element; +export const EntityTagPicker: (props: EntityTagPickerProps) => JSX_2.Element; // @public (undocumented) export type EntityTagPickerProps = { @@ -648,7 +643,7 @@ export class EntityTypeFilter implements EntityFilter { // @public (undocumented) export const EntityTypePicker: ( props: EntityTypePickerProps, -) => React_2.JSX.Element | null; +) => JSX_2.Element | null; // @public export interface EntityTypePickerProps { @@ -679,9 +674,7 @@ export class EntityUserFilter implements EntityFilter { } // @public -export const FavoriteEntity: ( - props: FavoriteEntityProps, -) => React_2.JSX.Element; +export const FavoriteEntity: (props: FavoriteEntityProps) => JSX_2.Element; // @public (undocumented) export type FavoriteEntityProps = ComponentProps & { @@ -722,13 +715,13 @@ export function InspectEntityDialog(props: { initialTab?: 'overview' | 'ancestry' | 'colocated' | 'json' | 'yaml'; onClose: () => void; onSelect?: (tab: string) => void; -}): React_2.JSX.Element | null; +}): JSX_2.Element | null; // @public export function MissingAnnotationEmptyState(props: { annotation: string | string[]; readMoreUrl?: string; -}): React_2.JSX.Element; +}): JSX_2.Element; // @public (undocumented) export type MissingAnnotationEmptyStateClassKey = 'code'; @@ -740,7 +733,7 @@ export function MockEntityListContextProvider< props: PropsWithChildren<{ value?: Partial>; }>, -): React_2.JSX.Element; +): JSX_2.Element; // @public export class MockStarredEntitiesApi implements StarredEntitiesApi { @@ -765,7 +758,7 @@ export const starredEntitiesApiRef: ApiRef; // @public (undocumented) export const UnregisterEntityDialog: ( props: UnregisterEntityDialogProps, -) => React_2.JSX.Element; +) => JSX_2.Element; // @public (undocumented) export type UnregisterEntityDialogProps = { @@ -852,7 +845,7 @@ export type UserListFilterKind = 'owned' | 'starred' | 'all'; // @public (undocumented) export const UserListPicker: ( props: UserListPickerProps, -) => React_2.JSX.Element | null; +) => JSX_2.Element | null; // @public (undocumented) export type UserListPickerProps = { diff --git a/plugins/catalog-react/src/alpha/blueprints/CatalogFilterBlueprint.test.tsx b/plugins/catalog-react/src/alpha/blueprints/CatalogFilterBlueprint.test.tsx index ef7490f030..95a1f4c468 100644 --- a/plugins/catalog-react/src/alpha/blueprints/CatalogFilterBlueprint.test.tsx +++ b/plugins/catalog-react/src/alpha/blueprints/CatalogFilterBlueprint.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 { CatalogFilterBlueprint } from './CatalogFilterBlueprint'; import { coreExtensionData, diff --git a/plugins/catalog-react/src/alpha/blueprints/EntityCardBlueprint.test.tsx b/plugins/catalog-react/src/alpha/blueprints/EntityCardBlueprint.test.tsx index 70c2b9d849..3c9a020c93 100644 --- a/plugins/catalog-react/src/alpha/blueprints/EntityCardBlueprint.test.tsx +++ b/plugins/catalog-react/src/alpha/blueprints/EntityCardBlueprint.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 { EntityCardBlueprint } from './EntityCardBlueprint'; import { coreExtensionData, diff --git a/plugins/catalog-react/src/alpha/blueprints/EntityContentBlueprint.test.tsx b/plugins/catalog-react/src/alpha/blueprints/EntityContentBlueprint.test.tsx index 9c118df26c..4fb21f1744 100644 --- a/plugins/catalog-react/src/alpha/blueprints/EntityContentBlueprint.test.tsx +++ b/plugins/catalog-react/src/alpha/blueprints/EntityContentBlueprint.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 { EntityContentBlueprint } from './EntityContentBlueprint'; import { createExtensionTester, diff --git a/plugins/catalog-react/src/alpha/blueprints/EntityContentLayoutBlueprint.tsx b/plugins/catalog-react/src/alpha/blueprints/EntityContentLayoutBlueprint.tsx index 033b0f2187..e529d60685 100644 --- a/plugins/catalog-react/src/alpha/blueprints/EntityContentLayoutBlueprint.tsx +++ b/plugins/catalog-react/src/alpha/blueprints/EntityContentLayoutBlueprint.tsx @@ -24,7 +24,7 @@ import { entityFilterFunctionDataRef, EntityCardType, } from './extensionData'; -import React from 'react'; +import { JSX } from 'react'; import { EntityPredicate } from '../predicates'; import { resolveEntityFilterData } from './resolveEntityFilterData'; import { createEntityPredicateSchema } from '../predicates/createEntityPredicateSchema'; @@ -34,7 +34,7 @@ import { Entity } from '@backstage/catalog-model'; export interface EntityContentLayoutProps { cards: Array<{ type?: EntityCardType; - element: React.JSX.Element; + element: JSX.Element; }>; } @@ -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/report-alpha.api.md b/plugins/catalog-unprocessed-entities/report-alpha.api.md index b5b9938801..8b53bcb8ae 100644 --- a/plugins/catalog-unprocessed-entities/report-alpha.api.md +++ b/plugins/catalog-unprocessed-entities/report-alpha.api.md @@ -9,7 +9,7 @@ import { ConfigurableExtensionDataRef } from '@backstage/frontend-plugin-api'; import { ExtensionDefinition } from '@backstage/frontend-plugin-api'; import { FrontendPlugin } from '@backstage/frontend-plugin-api'; import { IconComponent } from '@backstage/core-plugin-api'; -import { default as React_2 } from 'react'; +import { JSX as JSX_2 } from 'react'; import { RouteRef } from '@backstage/frontend-plugin-api'; // @alpha (undocumented) @@ -65,11 +65,7 @@ const _default: FrontendPlugin< path?: string | undefined; }; output: - | ConfigurableExtensionDataRef< - React_2.JSX.Element, - 'core.reactElement', - {} - > + | ConfigurableExtensionDataRef | ConfigurableExtensionDataRef | ConfigurableExtensionDataRef< RouteRef, diff --git a/plugins/catalog-unprocessed-entities/report.api.md b/plugins/catalog-unprocessed-entities/report.api.md index 4de30d2cb6..adaf7af643 100644 --- a/plugins/catalog-unprocessed-entities/report.api.md +++ b/plugins/catalog-unprocessed-entities/report.api.md @@ -6,8 +6,7 @@ import { ApiRef } from '@backstage/core-plugin-api'; import { BackstagePlugin } from '@backstage/core-plugin-api'; import { Entity } from '@backstage/catalog-model'; -import { JSX as JSX_2 } from 'react'; -import { default as React_2 } from 'react'; +import { JSX as JSX_2 } from 'react/jsx-runtime'; import { RouteRef } from '@backstage/core-plugin-api'; // @public @@ -37,7 +36,7 @@ export const catalogUnprocessedEntitiesPlugin: BackstagePlugin< >; // @public (undocumented) -export const UnprocessedEntitiesContent: () => React_2.JSX.Element; +export const UnprocessedEntitiesContent: () => JSX_2.Element; // @public export type UnprocessedEntity = { 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/report.api.md b/plugins/catalog/report.api.md index e0e5ff72d6..10e120d208 100644 --- a/plugins/catalog/report.api.md +++ b/plugins/catalog/report.api.md @@ -9,6 +9,7 @@ import { CatalogApi } from '@backstage/plugin-catalog-react'; import { ComponentEntity } from '@backstage/catalog-model'; import { CompoundEntityRef } from '@backstage/catalog-model'; import { DomainEntity } from '@backstage/catalog-model'; +import { ElementType } from 'react'; import { Entity } from '@backstage/catalog-model'; import { EntityListContextProps } from '@backstage/plugin-catalog-react'; import { EntityListPagination } from '@backstage/plugin-catalog-react'; @@ -21,10 +22,9 @@ import { HumanDuration } from '@backstage/types'; import { IconComponent } from '@backstage/core-plugin-api'; import { IndexableDocument } from '@backstage/plugin-search-common'; import { InfoCardVariants } from '@backstage/core-components'; -import { JSX as JSX_2 } from 'react'; +import { JSX as JSX_2 } from 'react/jsx-runtime'; import { Observable } from '@backstage/types'; import { Overrides } from '@material-ui/core/styles/overrides'; -import { default as React_2 } from 'react'; import { ReactNode } from 'react'; import { ResourceEntity } from '@backstage/catalog-model'; import { ResultHighlight } from '@backstage/plugin-search-common'; @@ -47,7 +47,7 @@ export interface AboutCardProps { } // @public (undocumented) -export function AboutContent(props: AboutContentProps): React_2.JSX.Element; +export function AboutContent(props: AboutContentProps): JSX_2.Element; // @public export interface AboutContentProps { @@ -56,12 +56,12 @@ export interface AboutContentProps { } // @public (undocumented) -export function AboutField(props: AboutFieldProps): React_2.JSX.Element; +export function AboutField(props: AboutFieldProps): JSX_2.Element; // @public export interface AboutFieldProps { // (undocumented) - children?: React_2.ReactNode; + children?: ReactNode; // (undocumented) className?: string; // (undocumented) @@ -89,9 +89,7 @@ export const CatalogEntityPage: () => JSX.Element; export const CatalogIndexPage: (props: DefaultCatalogPageProps) => JSX.Element; // @public @deprecated (undocumented) -export function CatalogKindHeader( - props: CatalogKindHeaderProps, -): React_2.JSX.Element; +export function CatalogKindHeader(props: CatalogKindHeaderProps): JSX_2.Element; // @public export interface CatalogKindHeaderProps { @@ -157,7 +155,7 @@ export interface CatalogSearchResultListItemProps { // @public export const CatalogTable: { - (props: CatalogTableProps): React_2.JSX.Element; + (props: CatalogTableProps): JSX_2.Element; columns: Readonly<{ createNameColumn(options?: { defaultKind?: string; @@ -396,16 +394,16 @@ export type EntityLabelsEmptyStateClassKey = 'code'; // @public export const EntityLayout: { - (props: EntityLayoutProps): React_2.JSX.Element; + (props: EntityLayoutProps): JSX_2.Element; Route: (props: EntityLayoutRouteProps) => null; }; // @public (undocumented) export interface EntityLayoutProps { // (undocumented) - children?: React_2.ReactNode; + children?: ReactNode; // (undocumented) - NotFoundComponent?: React_2.ReactNode; + NotFoundComponent?: ReactNode; parentEntityRelations?: string[]; // Warning: (ae-forgotten-export) The symbol "EntityContextMenuOptions" needs to be exported by the entry point index.d.ts // @@ -424,9 +422,9 @@ export type EntityLayoutRouteProps = { children: JSX.Element; if?: (entity: Entity) => boolean; tabProps?: TabProps< - React_2.ElementType, + ElementType, { - component?: React_2.ElementType; + component?: ElementType; } >; }; @@ -447,11 +445,11 @@ export type EntityLinksEmptyStateClassKey = 'code'; // @public @deprecated (undocumented) export const EntityListContainer: (props: { - children: React.ReactNode; + children: ReactNode; }) => JSX_2.Element; // @public -export function EntityOrphanWarning(): React_2.JSX.Element; +export function EntityOrphanWarning(): JSX_2.Element; // @public (undocumented) export interface EntityPredicates { @@ -462,14 +460,14 @@ export interface EntityPredicates { } // @public -export function EntityProcessingErrorsPanel(): React_2.JSX.Element | null; +export function EntityProcessingErrorsPanel(): JSX_2.Element | null; // @public -export function EntityRelationWarning(): React_2.JSX.Element | null; +export function EntityRelationWarning(): JSX_2.Element | null; // @public (undocumented) export const EntitySwitch: { - (props: EntitySwitchProps): React_2.JSX.Element; + (props: EntitySwitchProps): JSX.Element; Case: (_props: EntitySwitchCaseProps) => null; }; @@ -496,7 +494,7 @@ export interface EntitySwitchProps { // @public @deprecated (undocumented) export const FilterContainer: (props: { - children: React.ReactNode; + children: ReactNode; options?: { drawerBreakpoint?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number; drawerAnchor?: 'left' | 'right' | 'top' | 'bottom'; 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/report.api.md b/plugins/config-schema/report.api.md index 1491f3cb89..c78e56aa0e 100644 --- a/plugins/config-schema/report.api.md +++ b/plugins/config-schema/report.api.md @@ -5,7 +5,7 @@ ```ts import { ApiRef } from '@backstage/core-plugin-api'; import { BackstagePlugin } from '@backstage/core-plugin-api'; -import { JSX as JSX_2 } from 'react'; +import { JSX as JSX_2 } from 'react/jsx-runtime'; import { Observable } from '@backstage/types'; import { RouteRef } from '@backstage/core-plugin-api'; import { Schema } from 'jsonschema'; 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 080e8edfc6..3d82190c2f 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/report-alpha.api.md b/plugins/devtools/report-alpha.api.md index 23167bb42c..663c4be34d 100644 --- a/plugins/devtools/report-alpha.api.md +++ b/plugins/devtools/report-alpha.api.md @@ -9,7 +9,7 @@ import { ConfigurableExtensionDataRef } from '@backstage/frontend-plugin-api'; import { ExtensionDefinition } from '@backstage/frontend-plugin-api'; import { FrontendPlugin } from '@backstage/frontend-plugin-api'; import { IconComponent } from '@backstage/core-plugin-api'; -import { default as React_2 } from 'react'; +import { JSX as JSX_2 } from 'react'; import { RouteRef } from '@backstage/frontend-plugin-api'; // @alpha (undocumented) @@ -65,11 +65,7 @@ const _default: FrontendPlugin< path?: string | undefined; }; output: - | ConfigurableExtensionDataRef< - React_2.JSX.Element, - 'core.reactElement', - {} - > + | ConfigurableExtensionDataRef | ConfigurableExtensionDataRef | ConfigurableExtensionDataRef< RouteRef, diff --git a/plugins/devtools/report.api.md b/plugins/devtools/report.api.md index ae81aa123b..e7a42f4377 100644 --- a/plugins/devtools/report.api.md +++ b/plugins/devtools/report.api.md @@ -4,18 +4,18 @@ ```ts import { BackstagePlugin } from '@backstage/core-plugin-api'; -import { default as default_2 } from 'react'; -import { JSX as JSX_2 } from 'react'; -import { default as React_2 } from 'react'; +import { ElementType } from 'react'; +import { JSX as JSX_2 } from 'react/jsx-runtime'; +import { ReactNode } from 'react'; import { RouteRef } from '@backstage/core-plugin-api'; import { TabProps } from '@material-ui/core/Tab'; // @public (undocumented) -export const ConfigContent: () => React_2.JSX.Element; +export const ConfigContent: () => JSX_2.Element; // @public export const DevToolsLayout: { - ({ children, title, subtitle }: DevToolsLayoutProps): default_2.JSX.Element; + ({ children, title, subtitle }: DevToolsLayoutProps): JSX_2.Element; Route: (props: SubRoute) => null; }; @@ -23,7 +23,7 @@ export const DevToolsLayout: { export type DevToolsLayoutProps = { title?: string; subtitle?: string; - children?: default_2.ReactNode; + children?: ReactNode; }; // @public (undocumented) @@ -38,10 +38,10 @@ export const devToolsPlugin: BackstagePlugin< >; // @public (undocumented) -export const ExternalDependenciesContent: () => React_2.JSX.Element; +export const ExternalDependenciesContent: () => JSX_2.Element; // @public (undocumented) -export const InfoContent: () => React_2.JSX.Element; +export const InfoContent: () => JSX_2.Element; // @public (undocumented) export type SubRoute = { @@ -49,9 +49,9 @@ export type SubRoute = { title: string; children: JSX.Element; tabProps?: TabProps< - default_2.ElementType, + ElementType, { - component?: default_2.ElementType; + component?: ElementType; } >; }; 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/report.api.md b/plugins/example-todo-list/report.api.md index 699712c062..89c48cc76a 100644 --- a/plugins/example-todo-list/report.api.md +++ b/plugins/example-todo-list/report.api.md @@ -4,7 +4,7 @@ ```ts import { BackstagePlugin } from '@backstage/core-plugin-api'; -import { JSX as JSX_2 } from 'react'; +import { JSX as JSX_2 } from 'react/jsx-runtime'; import { RouteRef } from '@backstage/core-plugin-api'; // @public 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/report.api.md b/plugins/home-react/report.api.md index 268f598a63..c7e847fb36 100644 --- a/plugins/home-react/report.api.md +++ b/plugins/home-react/report.api.md @@ -4,7 +4,7 @@ ```ts import { Extension } from '@backstage/core-plugin-api'; -import { default as React_2 } from 'react'; +import { JSX as JSX_2 } from 'react/jsx-runtime'; import { RJSFSchema } from '@rjsf/utils'; import { UiSchema } from '@rjsf/utils'; @@ -60,7 +60,7 @@ export function createCardExtension(options: { description?: string; layout?: CardLayout; settings?: CardSettings; -}): Extension<(props: CardExtensionProps) => React_2.JSX.Element>; +}): Extension<(props: CardExtensionProps) => JSX_2.Element>; // @public (undocumented) export type RendererProps = { @@ -73,5 +73,5 @@ export const SettingsModal: (props: { close: Function; componentName?: string; children: JSX.Element; -}) => React_2.JSX.Element; +}) => JSX_2.Element; ``` 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/report-alpha.api.md b/plugins/home/report-alpha.api.md index 7787c96ff0..6033cb47f8 100644 --- a/plugins/home/report-alpha.api.md +++ b/plugins/home/report-alpha.api.md @@ -8,7 +8,7 @@ import { ConfigurableExtensionDataRef } from '@backstage/frontend-plugin-api'; import { ExtensionDefinition } from '@backstage/frontend-plugin-api'; import { ExtensionInput } from '@backstage/frontend-plugin-api'; import { FrontendPlugin } from '@backstage/frontend-plugin-api'; -import { default as React_2 } from 'react'; +import { JSX as JSX_2 } from 'react'; import { RouteRef } from '@backstage/frontend-plugin-api'; // @alpha (undocumented) @@ -24,11 +24,7 @@ const _default: FrontendPlugin< path?: string | undefined; }; output: - | ConfigurableExtensionDataRef< - React_2.JSX.Element, - 'core.reactElement', - {} - > + | ConfigurableExtensionDataRef | ConfigurableExtensionDataRef | ConfigurableExtensionDataRef< RouteRef, @@ -40,7 +36,7 @@ const _default: FrontendPlugin< inputs: { props: ExtensionInput< | ConfigurableExtensionDataRef< - React_2.JSX.Element, + JSX_2.Element, 'core.reactElement', { optional: true; diff --git a/plugins/home/report.api.md b/plugins/home/report.api.md index ef5a0d5a7a..7c7f55fd47 100644 --- a/plugins/home/report.api.md +++ b/plugins/home/report.api.md @@ -12,11 +12,12 @@ import { CardSettings as CardSettings_2 } from '@backstage/plugin-home-react'; import { ComponentParts as ComponentParts_2 } from '@backstage/plugin-home-react'; import { ComponentRenderer as ComponentRenderer_2 } from '@backstage/plugin-home-react'; import { createCardExtension as createCardExtension_2 } from '@backstage/plugin-home-react'; +import { CSSProperties } from 'react'; import { EntityFilterQuery } from '@backstage/catalog-client'; import { ErrorApi } from '@backstage/core-plugin-api'; import { IdentityApi } from '@backstage/core-plugin-api'; -import { JSX as JSX_2 } from 'react'; -import { default as React_2 } from 'react'; +import { JSX as JSX_2 } from 'react/jsx-runtime'; +import { JSX as JSX_3 } from 'react'; import { ReactElement } from 'react'; import { ReactNode } from 'react'; import { RendererProps as RendererProps_2 } from '@backstage/plugin-home-react'; @@ -50,8 +51,7 @@ export const ComponentAccordion: (props: { expanded?: boolean; Content: () => JSX.Element; Actions?: () => JSX.Element; - Settings?: () => JSX./** @public */ - Element; + Settings?: () => JSX.Element; ContextProvider?: (props: any) => JSX.Element; }) => JSX_2.Element; @@ -83,7 +83,7 @@ export const createCardExtension: typeof createCardExtension_2; // @public export const CustomHomepageGrid: ( props: CustomHomepageGridProps, -) => React_2.JSX.Element; +) => JSX_2.Element; // @public export type CustomHomepageGridProps = { @@ -95,7 +95,7 @@ export type CustomHomepageGridProps = { containerPadding?: [number, number] | Record; containerMargin?: [number, number] | Record; maxRows?: number; - style?: React_2.CSSProperties; + style?: CSSProperties; compactType?: 'vertical' | 'horizontal' | null; allowOverlap?: boolean; preventCollision?: boolean; @@ -109,7 +109,7 @@ export const FeaturedDocsCard: ( // @public export type FeaturedDocsCardProps = { filter: EntityFilterQuery; - emptyState?: React_2.JSX.Element; + emptyState?: JSX_3.Element; linkDestination?: string; responseLimit?: number; subLinkText?: string; @@ -123,7 +123,7 @@ export const HeaderWorldClock: (props: { // @public export const HomePageCompanyLogo: (props: { - logo?: React.ReactNode; + logo?: ReactNode; className?: string; }) => JSX_2.Element; @@ -193,13 +193,13 @@ export const QuickStartCard: ( // @public export type QuickStartCardProps = { - modalTitle?: string | React_2.JSX.Element; + modalTitle?: string | JSX_3.Element; docsLinkTitle?: string; docsLink?: string; - video?: React_2.JSX.Element; - image: React_2.JSX.Element; + video?: JSX_3.Element; + image: JSX_3.Element; cardDescription?: string; - downloadImage?: React_2.JSX.Element; + downloadImage?: JSX_3.Element; }; // @public @deprecated (undocumented) @@ -215,7 +215,7 @@ export const SettingsModal: (props: { // @public export type StarredEntitiesProps = { - noStarredEntitiesMessage?: React_2.ReactNode | undefined; + noStarredEntitiesMessage?: ReactNode | undefined; groupByKind?: boolean; }; @@ -225,16 +225,16 @@ export const TemplateBackstageLogo: (props: { svg: string; path: string; }; -}) => React_2.JSX.Element; +}) => JSX_2.Element; // @public (undocumented) -export const TemplateBackstageLogoIcon: () => React_2.JSX.Element; +export const TemplateBackstageLogoIcon: () => JSX_2.Element; // @public (undocumented) export type Tool = { label: string; url: string; - icon: React_2.ReactNode; + icon: ReactNode; }; // @public @@ -270,7 +270,7 @@ export const VisitListener: ({ toEntityRef, visitName, }: { - children?: React_2.ReactNode; + children?: ReactNode; toEntityRef?: ({ pathname }: { pathname: string }) => string | undefined; visitName?: ({ pathname }: { pathname: string }) => string; }) => JSX.Element; 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..2f718bae12 100644 --- a/plugins/home/src/assets/TemplateBackstageLogo.tsx +++ b/plugins/home/src/assets/TemplateBackstageLogo.tsx @@ -14,8 +14,6 @@ * limitations under the License. */ -import React from 'react'; - /** @public */ export const TemplateBackstageLogo = (props: { classes: { 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/report.api.md b/plugins/kubernetes-cluster/report.api.md index 1fd607295a..2c9a4c93ef 100644 --- a/plugins/kubernetes-cluster/report.api.md +++ b/plugins/kubernetes-cluster/report.api.md @@ -4,7 +4,7 @@ ```ts import { Entity } from '@backstage/catalog-model'; -import { default as React_2 } from 'react'; +import { JSX as JSX_2 } from 'react/jsx-runtime'; // @public export const EntityKubernetesClusterContent: ( @@ -18,5 +18,5 @@ export type EntityKubernetesClusterContentProps = {}; export const isKubernetesClusterAvailable: (entity: Entity) => boolean; // @public (undocumented) -export const Router: () => React_2.JSX.Element; +export const Router: () => JSX_2.Element; ``` 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/report.api.md b/plugins/kubernetes-react/report.api.md index 454302f632..3097d6ad22 100644 --- a/plugins/kubernetes-react/report.api.md +++ b/plugins/kubernetes-react/report.api.md @@ -9,6 +9,7 @@ import { ClientContainerStatus } from '@backstage/plugin-kubernetes-common'; import { ClientPodStatus } from '@backstage/plugin-kubernetes-common'; import { ClusterAttributes } from '@backstage/plugin-kubernetes-common'; import { ClusterObjects } from '@backstage/plugin-kubernetes-common'; +import { Context } from 'react'; import { CustomObjectsByEntityRequest } from '@backstage/plugin-kubernetes-common'; import { CustomResourceMatcher } from '@backstage/plugin-kubernetes-common'; import { DetectedError } from '@backstage/plugin-kubernetes-common'; @@ -16,6 +17,7 @@ import { DetectedErrorsByCluster } from '@backstage/plugin-kubernetes-common'; import { DiscoveryApi } from '@backstage/core-plugin-api'; import { Entity } from '@backstage/catalog-model'; import { Event as Event_2 } from 'kubernetes-models/v1'; +import { FC } from 'react'; import { FetchApi } from '@backstage/core-plugin-api'; import { GroupedResponses } from '@backstage/plugin-kubernetes-common'; import { IContainer } from 'kubernetes-models/v1'; @@ -23,6 +25,7 @@ import { IContainerStatus } from 'kubernetes-models/v1'; import { IIoK8sApimachineryPkgApisMetaV1ObjectMeta } from '@kubernetes-models/apimachinery/apis/meta/v1/ObjectMeta'; import { IObjectMeta } from '@kubernetes-models/apimachinery/apis/meta/v1/ObjectMeta'; import { JsonObject } from '@backstage/types'; +import { JSX as JSX_2 } from 'react/jsx-runtime'; import { KubernetesRequestBody } from '@backstage/plugin-kubernetes-common'; import { OAuthApi } from '@backstage/core-plugin-api'; import { ObjectsByEntityResponse } from '@backstage/plugin-kubernetes-common'; @@ -30,8 +33,7 @@ import { OpenIdConnectApi } from '@backstage/core-plugin-api'; import { Pod } from 'kubernetes-models/v1'; import { Pod as Pod_2 } from 'kubernetes-models/v1/Pod'; import { ProfileInfoApi } from '@backstage/core-plugin-api'; -import { default as React_2 } from 'react'; -import * as React_3 from 'react'; +import { ReactNode } from 'react'; import { TypeMeta } from '@kubernetes-models/base'; import { V1Job } from '@kubernetes/client-node'; import { V1ObjectMeta } from '@kubernetes/client-node'; @@ -62,10 +64,10 @@ export class AksKubernetesAuthProvider implements KubernetesAuthProvider { export const Cluster: ({ clusterObjects, podsWithErrors, -}: ClusterProps) => React_2.JSX.Element; +}: ClusterProps) => JSX_2.Element; // @public (undocumented) -export const ClusterContext: React_2.Context; +export const ClusterContext: Context; // @public (undocumented) export interface ClusterLinksFormatter { @@ -89,11 +91,11 @@ export interface ClusterLinksFormatterOptions { export type ClusterProps = { clusterObjects: ClusterObjects; podsWithErrors: Set; - children?: React_2.ReactNode; + children?: ReactNode; }; // @public -export const ContainerCard: React_2.FC; +export const ContainerCard: FC; // @public export interface ContainerCardProps { @@ -114,27 +116,27 @@ export interface ContainerScope extends PodScope { } // @public (undocumented) -export const CronJobsAccordions: ({}: CronJobsAccordionsProps) => React_2.JSX.Element; +export const CronJobsAccordions: ({}: CronJobsAccordionsProps) => JSX_2.Element; // @public (undocumented) export type CronJobsAccordionsProps = { - children?: React_2.ReactNode; + children?: ReactNode; }; // @public (undocumented) -export const CustomResources: ({}: CustomResourcesProps) => React_2.JSX.Element; +export const CustomResources: ({}: CustomResourcesProps) => JSX_2.Element; // @public (undocumented) export interface CustomResourcesProps { // (undocumented) - children?: React_2.ReactNode; + children?: ReactNode; } // @public (undocumented) export const DEFAULT_FORMATTER_NAME = 'standard'; // @public -export const DetectedErrorsContext: React_2.Context; +export const DetectedErrorsContext: Context; // @public (undocumented) export class EksClusterLinksFormatter implements ClusterLinksFormatter { @@ -143,9 +145,7 @@ export class EksClusterLinksFormatter implements ClusterLinksFormatter { } // @public -export const ErrorList: ({ - podAndErrors, -}: ErrorListProps) => React_2.JSX.Element; +export const ErrorList: ({ podAndErrors }: ErrorListProps) => JSX_2.Element; // @public export interface ErrorListProps { @@ -163,21 +163,21 @@ export const ErrorPanel: ({ entityName, errorMessage, clustersWithErrors, -}: ErrorPanelProps) => React_2.JSX.Element; +}: ErrorPanelProps) => JSX_2.Element; // @public (undocumented) export type ErrorPanelProps = { entityName: string; errorMessage?: string; clustersWithErrors?: ClusterObjects[]; - children?: React_2.ReactNode; + children?: ReactNode; }; // @public (undocumented) export const ErrorReporting: ({ detectedErrors, clusters, -}: ErrorReportingProps) => React_3.JSX.Element; +}: ErrorReportingProps) => JSX_2.Element; // @public (undocumented) export type ErrorReportingProps = { @@ -191,13 +191,13 @@ export const Events: ({ namespace, clusterName, warningEventsOnly, -}: EventsProps) => React_2.JSX.Element; +}: EventsProps) => JSX_2.Element; // @public export const EventsContent: ({ events, warningEventsOnly, -}: EventsContentProps) => React_2.JSX.Element; +}: EventsContentProps) => JSX_2.Element; // @public export interface EventsContentProps { @@ -230,7 +230,7 @@ export interface EventsProps { } // @public -export const FixDialog: React_2.FC; +export const FixDialog: FC; // @public export interface FixDialogProps { @@ -281,30 +281,28 @@ export class GoogleKubernetesAuthProvider implements KubernetesAuthProvider { } // @public (undocumented) -export const GroupedResponsesContext: React_2.Context; +export const GroupedResponsesContext: Context; // @public (undocumented) export const HorizontalPodAutoscalerDrawer: (props: { hpa: V2HorizontalPodAutoscaler; expanded?: boolean; - children?: React_2.ReactNode; -}) => React_2.JSX.Element; + children?: ReactNode; +}) => JSX_2.Element; // @public (undocumented) -export const IngressesAccordions: ({}: IngressesAccordionsProps) => React_2.JSX.Element; +export const IngressesAccordions: ({}: IngressesAccordionsProps) => JSX_2.Element; // @public (undocumented) export type IngressesAccordionsProps = {}; // @public (undocumented) -export const JobsAccordions: ({ - jobs, -}: JobsAccordionsProps) => React_2.JSX.Element; +export const JobsAccordions: ({ jobs }: JobsAccordionsProps) => JSX_2.Element; // @public (undocumented) export type JobsAccordionsProps = { jobs: V1Job[]; - children?: React_2.ReactNode; + children?: ReactNode; }; // @public (undocumented) @@ -470,7 +468,7 @@ export const KubernetesDrawer: ({ drawerContentsHeader, kubernetesObject, children, -}: KubernetesDrawerProps) => React_2.JSX.Element; +}: KubernetesDrawerProps) => JSX_2.Element; // @public (undocumented) export interface KubernetesDrawerable { @@ -481,13 +479,13 @@ export interface KubernetesDrawerable { // @public export interface KubernetesDrawerProps { // (undocumented) - children?: React_2.ReactNode; + children?: ReactNode; // (undocumented) - drawerContentsHeader?: React_2.ReactNode; + drawerContentsHeader?: ReactNode; // (undocumented) kubernetesObject: KubernetesObject; // (undocumented) - label: React_2.ReactNode; + label: ReactNode; // (undocumented) open?: boolean; } @@ -594,7 +592,7 @@ export const KubernetesStructuredMetadataTableDrawer: < buttonVariant, expanded, children, -}: KubernetesStructuredMetadataTableDrawerProps) => React_2.JSX.Element; +}: KubernetesStructuredMetadataTableDrawerProps) => JSX_2.Element; // @public (undocumented) export interface KubernetesStructuredMetadataTableDrawerProps< @@ -603,7 +601,7 @@ export interface KubernetesStructuredMetadataTableDrawerProps< // (undocumented) buttonVariant?: 'h5' | 'subtitle2'; // (undocumented) - children?: React_2.ReactNode; + children?: ReactNode; // (undocumented) expanded?: boolean; // (undocumented) @@ -618,19 +616,17 @@ export interface KubernetesStructuredMetadataTableDrawerProps< export const LinkErrorPanel: ({ cluster, errorMessage, -}: LinkErrorPanelProps) => React_2.JSX.Element; +}: LinkErrorPanelProps) => JSX_2.Element; // @public (undocumented) export type LinkErrorPanelProps = { cluster: ClusterAttributes; errorMessage?: string; - children?: React_2.ReactNode; + children?: ReactNode; }; // @public -export const ManifestYaml: ({ - object, -}: ManifestYamlProps) => React_2.JSX.Element; +export const ManifestYaml: ({ object }: ManifestYamlProps) => JSX_2.Element; // @public export interface ManifestYamlProps { @@ -664,7 +660,7 @@ export class OpenshiftClusterLinksFormatter { // @public export const PendingPodContent: ({ pod, -}: PendingPodContentProps) => React_2.JSX.Element; +}: PendingPodContentProps) => JSX_2.Element; // @public export interface PendingPodContentProps { @@ -689,7 +685,7 @@ export type PodColumns = 'READY' | 'RESOURCE'; export const PodDrawer: ({ podAndErrors, open, -}: PodDrawerProps) => React_2.JSX.Element; +}: PodDrawerProps) => JSX_2.Element; // @public export interface PodDrawerProps { @@ -700,14 +696,12 @@ export interface PodDrawerProps { } // @public -export const PodExecTerminal: ( - props: PodExecTerminalProps, -) => React_2.JSX.Element; +export const PodExecTerminal: (props: PodExecTerminalProps) => JSX_2.Element; // @public export const PodExecTerminalDialog: ( props: PodExecTerminalProps, -) => false | React_2.JSX.Element | undefined; +) => false | JSX_2.Element | undefined; // @public export interface PodExecTerminalProps { @@ -722,12 +716,12 @@ export interface PodExecTerminalProps { } // @public -export const PodLogs: React_2.FC; +export const PodLogs: FC; // @public export const PodLogsDialog: ({ containerScope, -}: PodLogsDialogProps) => React_2.JSX.Element; +}: PodLogsDialogProps) => JSX_2.Element; // @public export interface PodLogsDialogProps { @@ -752,7 +746,7 @@ export interface PodLogsProps { } // @public -export const PodMetricsContext: React_2.Context>; +export const PodMetricsContext: Context>; // @public (undocumented) export type PodMetricsMatcher = { @@ -760,12 +754,10 @@ export type PodMetricsMatcher = { }; // @public (undocumented) -export const PodNamesWithErrorsContext: React_2.Context>; +export const PodNamesWithErrorsContext: Context>; // @public (undocumented) -export const PodNamesWithMetricsContext: React_2.Context< - Map ->; +export const PodNamesWithMetricsContext: Context>; // @public export interface PodScope { @@ -781,13 +773,13 @@ export interface PodScope { export const PodsTable: ({ pods, extraColumns, -}: PodsTablesProps) => React_2.JSX.Element; +}: PodsTablesProps) => JSX_2.Element; // @public (undocumented) export type PodsTablesProps = { pods: Pod_2 | V1Pod[]; extraColumns?: PodColumns[]; - children?: React_2.ReactNode; + children?: ReactNode; }; // @public (undocumented) @@ -809,7 +801,7 @@ export const ResourceUtilization: ({ usage, total, totalFormatted, -}: ResourceUtilizationProps) => React_2.JSX.Element; +}: ResourceUtilizationProps) => JSX_2.Element; // @public export interface ResourceUtilizationProps { @@ -838,7 +830,7 @@ export class ServerSideKubernetesAuthProvider } // @public (undocumented) -export const ServicesAccordions: ({}: ServicesAccordionsProps) => React_2.JSX.Element; +export const ServicesAccordions: ({}: ServicesAccordionsProps) => JSX_2.Element; // @public (undocumented) export type ServicesAccordionsProps = {}; 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/report.api.md b/plugins/kubernetes/report.api.md index 5eb1b456a7..b9450e650d 100644 --- a/plugins/kubernetes/report.api.md +++ b/plugins/kubernetes/report.api.md @@ -5,7 +5,7 @@ ```ts import { BackstagePlugin } from '@backstage/core-plugin-api'; import { Entity } from '@backstage/catalog-model'; -import { default as React_2 } from 'react'; +import { JSX as JSX_2 } from 'react/jsx-runtime'; import { RouteRef } from '@backstage/core-plugin-api'; // Warning: (ae-missing-release-tag) "EntityKubernetesContent" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) @@ -40,9 +40,7 @@ export { kubernetesPlugin as plugin }; // Warning: (ae-missing-release-tag) "Router" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export const Router: (props: { - refreshIntervalMs?: number; -}) => React_2.JSX.Element; +export const Router: (props: { refreshIntervalMs?: number }) => JSX_2.Element; export * from '@backstage/plugin-kubernetes-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/report-alpha.api.md b/plugins/notifications/report-alpha.api.md index a14cb89f3f..734dd0a201 100644 --- a/plugins/notifications/report-alpha.api.md +++ b/plugins/notifications/report-alpha.api.md @@ -8,7 +8,7 @@ import { AnyRouteRefParams } from '@backstage/frontend-plugin-api'; import { ConfigurableExtensionDataRef } from '@backstage/frontend-plugin-api'; import { ExtensionDefinition } from '@backstage/frontend-plugin-api'; import { FrontendPlugin } from '@backstage/frontend-plugin-api'; -import { default as React_2 } from 'react'; +import { JSX as JSX_2 } from 'react'; import { RouteRef } from '@backstage/frontend-plugin-api'; // @alpha (undocumented) @@ -43,11 +43,7 @@ const _default: FrontendPlugin< path?: string | undefined; }; output: - | ConfigurableExtensionDataRef< - React_2.JSX.Element, - 'core.reactElement', - {} - > + | ConfigurableExtensionDataRef | ConfigurableExtensionDataRef | ConfigurableExtensionDataRef< RouteRef, diff --git a/plugins/notifications/report.api.md b/plugins/notifications/report.api.md index aacee54329..cdf6d9d319 100644 --- a/plugins/notifications/report.api.md +++ b/plugins/notifications/report.api.md @@ -8,12 +8,11 @@ import { BackstagePlugin } from '@backstage/core-plugin-api'; import { DiscoveryApi } from '@backstage/core-plugin-api'; import { FetchApi } from '@backstage/core-plugin-api'; import { IconComponent } from '@backstage/core-plugin-api'; -import { JSX as JSX_2 } from 'react'; +import { JSX as JSX_2 } from 'react/jsx-runtime'; import { Notification as Notification_2 } from '@backstage/plugin-notifications-common'; import { NotificationSettings } from '@backstage/plugin-notifications-common'; import { NotificationSeverity } from '@backstage/plugin-notifications-common'; import { NotificationStatus } from '@backstage/plugin-notifications-common'; -import { default as React_2 } from 'react'; import { RouteRef } from '@backstage/core-plugin-api'; import { TableProps } from '@backstage/core-components'; @@ -136,7 +135,7 @@ export const NotificationsSidebarItem: (props?: { text?: string; disableHighlight?: boolean; noTrack?: boolean; -}) => React_2.JSX.Element; +}) => JSX_2.Element; // @public (undocumented) export const NotificationsTable: ({ @@ -152,7 +151,7 @@ export const NotificationsTable: ({ page, pageSize, totalCount, -}: NotificationsTableProps) => React_2.JSX.Element; +}: NotificationsTableProps) => JSX_2.Element; // @public (undocumented) export type NotificationsTableProps = Pick< @@ -208,7 +207,7 @@ export function useNotificationsApi( // @public (undocumented) export const UserNotificationSettingsCard: (props: { originNames?: Record; -}) => React_2.JSX.Element; +}) => JSX_2.Element; // (No @packageDocumentation comment for this package) ``` 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/report.api.md b/plugins/org-react/report.api.md index 5cfe5ca90a..c90ef93b13 100644 --- a/plugins/org-react/report.api.md +++ b/plugins/org-react/report.api.md @@ -4,12 +4,10 @@ ```ts import { GroupEntity } from '@backstage/catalog-model'; -import { default as React_2 } from 'react'; +import { JSX as JSX_2 } from 'react/jsx-runtime'; // @public (undocumented) -export const GroupListPicker: ( - props: GroupListPickerProps, -) => React_2.JSX.Element; +export const GroupListPicker: (props: GroupListPickerProps) => JSX_2.Element; // @public export type GroupListPickerProps = { 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/report-alpha.api.md b/plugins/org/report-alpha.api.md index f6a79a968a..e5d574ed5f 100644 --- a/plugins/org/report-alpha.api.md +++ b/plugins/org/report-alpha.api.md @@ -10,7 +10,7 @@ import { EntityPredicate } from '@backstage/plugin-catalog-react/alpha'; import { ExtensionDefinition } from '@backstage/frontend-plugin-api'; import { ExternalRouteRef } from '@backstage/frontend-plugin-api'; import { FrontendPlugin } from '@backstage/frontend-plugin-api'; -import { default as React_2 } from 'react'; +import { JSX as JSX_2 } from 'react'; // @alpha (undocumented) const _default: FrontendPlugin< @@ -31,11 +31,7 @@ const _default: FrontendPlugin< type?: 'content' | 'summary' | 'info' | undefined; }; output: - | ConfigurableExtensionDataRef< - React_2.JSX.Element, - 'core.reactElement', - {} - > + | ConfigurableExtensionDataRef | ConfigurableExtensionDataRef< (entity: Entity) => boolean, 'catalog.entity-filter-function', @@ -76,11 +72,7 @@ const _default: FrontendPlugin< type?: 'content' | 'summary' | 'info' | undefined; }; output: - | ConfigurableExtensionDataRef< - React_2.JSX.Element, - 'core.reactElement', - {} - > + | ConfigurableExtensionDataRef | ConfigurableExtensionDataRef< (entity: Entity) => boolean, 'catalog.entity-filter-function', @@ -121,11 +113,7 @@ const _default: FrontendPlugin< type?: 'content' | 'summary' | 'info' | undefined; }; output: - | ConfigurableExtensionDataRef< - React_2.JSX.Element, - 'core.reactElement', - {} - > + | ConfigurableExtensionDataRef | ConfigurableExtensionDataRef< (entity: Entity) => boolean, 'catalog.entity-filter-function', @@ -166,11 +154,7 @@ const _default: FrontendPlugin< type?: 'content' | 'summary' | 'info' | undefined; }; output: - | ConfigurableExtensionDataRef< - React_2.JSX.Element, - 'core.reactElement', - {} - > + | ConfigurableExtensionDataRef | ConfigurableExtensionDataRef< (entity: Entity) => boolean, 'catalog.entity-filter-function', diff --git a/plugins/org/report.api.md b/plugins/org/report.api.md index bbe4a36b8f..d3e82478f7 100644 --- a/plugins/org/report.api.md +++ b/plugins/org/report.api.md @@ -7,8 +7,7 @@ import { BackstagePlugin } from '@backstage/core-plugin-api'; import { ExternalRouteRef } from '@backstage/core-plugin-api'; import { IconComponent } from '@backstage/core-plugin-api'; import { InfoCardVariants } from '@backstage/core-components'; -import { JSX as JSX_2 } from 'react'; -import { default as React_2 } from 'react'; +import { JSX as JSX_2 } from 'react/jsx-runtime'; // @public (undocumented) export const EntityGroupProfileCard: (props: { @@ -49,7 +48,7 @@ export const EntityUserProfileCard: (props: { export const GroupProfileCard: (props: { variant?: InfoCardVariants; showLinks?: boolean; -}) => React_2.JSX.Element; +}) => JSX_2.Element; // @public (undocumented) export type MemberComponentClassKey = 'card' | 'avatar'; @@ -62,7 +61,7 @@ export const MembersListCard: (props: { relationType?: string; relationsType?: EntityRelationAggregation; relationAggregation?: EntityRelationAggregation; -}) => React_2.JSX.Element; +}) => JSX_2.Element; // @public (undocumented) export type MembersListCardClassKey = 'root' | 'cardContent' | 'memberList'; @@ -73,7 +72,7 @@ export const MyGroupsSidebarItem: (props: { pluralTitle: string; icon: IconComponent; filter?: Record; -}) => React_2.JSX.Element | null; +}) => JSX_2.Element | null; // @public (undocumented) const orgPlugin: BackstagePlugin< @@ -93,11 +92,11 @@ export const OwnershipCard: (props: { relationsType?: EntityRelationAggregation; relationAggregation?: EntityRelationAggregation; entityLimit?: number; -}) => React_2.JSX.Element; +}) => JSX_2.Element; // @public (undocumented) export const UserProfileCard: (props: { variant?: InfoCardVariants; showLinks?: boolean; -}) => React_2.JSX.Element; +}) => JSX_2.Element; ``` 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/report.api.md b/plugins/permission-react/report.api.md index 4c51d16b80..e0c5f4772c 100644 --- a/plugins/permission-react/report.api.md +++ b/plugins/permission-react/report.api.md @@ -11,8 +11,8 @@ import { DiscoveryApi } from '@backstage/core-plugin-api'; import { EvaluatePermissionRequest } from '@backstage/plugin-permission-common'; import { EvaluatePermissionResponse } from '@backstage/plugin-permission-common'; import { IdentityApi } from '@backstage/core-plugin-api'; +import { JSX as JSX_2 } from 'react/jsx-runtime'; import { Permission } from '@backstage/plugin-permission-common'; -import { default as React_2 } from 'react'; import { ReactElement } from 'react'; import { ReactNode } from 'react'; import { ResourcePermission } from '@backstage/plugin-permission-common'; @@ -66,7 +66,7 @@ export const PermissionedRoute: ( resourceRef: string | undefined; } ), -) => React_2.JSX.Element; +) => JSX_2.Element; // @public export function RequirePermission( 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/report-alpha.api.md b/plugins/scaffolder-react/report-alpha.api.md index fbd539f96e..c4f4ecc990 100644 --- a/plugins/scaffolder-react/report-alpha.api.md +++ b/plugins/scaffolder-react/report-alpha.api.md @@ -23,10 +23,10 @@ import { FormProps } from '@backstage/plugin-scaffolder-react'; import { IconComponent } from '@backstage/core-plugin-api'; import { JsonObject } from '@backstage/types'; import { JsonValue } from '@backstage/types'; +import { JSX as JSX_2 } from 'react/jsx-runtime'; import { LayoutOptions } from '@backstage/plugin-scaffolder-react'; import { Overrides } from '@material-ui/core/styles/overrides'; import { PropsWithChildren } from 'react'; -import { default as React_2 } from 'react'; import { ReactElement } from 'react'; import { ReactNode } from 'react'; import { ReviewStepProps } from '@backstage/plugin-scaffolder-react'; @@ -115,10 +115,10 @@ export function createScaffolderFormDecorator< // @alpha export const DefaultTemplateOutputs: (props: { output?: ScaffolderTaskOutput; -}) => React_2.JSX.Element | null; +}) => JSX_2.Element | null; // @alpha (undocumented) -export const EmbeddableWorkflow: (props: WorkflowProps) => React_2.JSX.Element; +export const EmbeddableWorkflow: (props: WorkflowProps) => JSX_2.Element; // @alpha export const extractSchemaFromStep: (inputStep: JsonObject) => { @@ -129,7 +129,7 @@ export const extractSchemaFromStep: (inputStep: JsonObject) => { // @alpha export const Form: ( props: PropsWithChildren, -) => React_2.JSX.Element; +) => JSX_2.Element; // @alpha export const FormDecoratorBlueprint: ExtensionBlueprint<{ @@ -246,7 +246,7 @@ export interface ParsedTemplateSchema { } // @alpha -export const ReviewState: (props: ReviewStateProps) => React_2.JSX.Element; +export const ReviewState: (props: ReviewStateProps) => JSX_2.Element; // @alpha export type ReviewStateProps = { @@ -257,7 +257,7 @@ export type ReviewStateProps = { // @alpha export const ScaffolderField: ( props: PropsWithChildren, -) => React_2.JSX.Element; +) => JSX_2.Element; // @alpha export interface ScaffolderFieldProps { @@ -309,7 +309,7 @@ export interface ScaffolderFormFieldsApi { // @alpha (undocumented) export function ScaffolderPageContextMenu( props: ScaffolderPageContextMenuProps, -): React_2.JSX.Element | null; +): JSX_2.Element | null; // @alpha (undocumented) export type ScaffolderPageContextMenuProps = { @@ -358,10 +358,10 @@ export const SecretWidget: ( WidgetProps, 'name' | 'onChange' | 'schema' | 'required' | 'disabled' >, -) => React_2.JSX.Element; +) => JSX_2.Element; // @alpha -export const Stepper: (stepperProps: StepperProps) => React_2.JSX.Element; +export const Stepper: (stepperProps: StepperProps) => JSX_2.Element; // @alpha export type StepperProps = { @@ -386,10 +386,10 @@ export const TaskLogStream: (props: { logs: { [k: string]: string[]; }; -}) => React_2.JSX.Element; +}) => JSX_2.Element; // @alpha -export const TaskSteps: (props: TaskStepsProps) => React_2.JSX.Element; +export const TaskSteps: (props: TaskStepsProps) => JSX_2.Element; // @alpha export interface TaskStepsProps { @@ -404,7 +404,7 @@ export interface TaskStepsProps { } // @alpha -export const TemplateCard: (props: TemplateCardProps) => React_2.JSX.Element; +export const TemplateCard: (props: TemplateCardProps) => JSX_2.Element; // @alpha export interface TemplateCardProps { @@ -421,18 +421,16 @@ export interface TemplateCardProps { } // @alpha -export const TemplateCategoryPicker: () => React_2.JSX.Element | null; +export const TemplateCategoryPicker: () => JSX_2.Element | null; // @alpha -export const TemplateGroup: ( - props: TemplateGroupProps, -) => React_2.JSX.Element | null; +export const TemplateGroup: (props: TemplateGroupProps) => JSX_2.Element | null; // @alpha export interface TemplateGroupProps { // (undocumented) components?: { - CardComponent?: React_2.ComponentType; + CardComponent?: ComponentType; }; // (undocumented) onSelected: (template: TemplateEntityV1beta3) => void; @@ -446,13 +444,13 @@ export interface TemplateGroupProps { }[]; }[]; // (undocumented) - title: React_2.ReactNode; + title: ReactNode; } // @alpha (undocumented) export const TemplateGroups: ( props: TemplateGroupsProps, -) => React_2.JSX.Element | null; +) => JSX_2.Element | null; // @alpha (undocumented) export interface TemplateGroupsProps { @@ -467,7 +465,7 @@ export interface TemplateGroupsProps { // (undocumented) onTemplateSelected?: (template: TemplateEntityV1beta3) => void; // (undocumented) - TemplateCardComponent?: React_2.ComponentType<{ + TemplateCardComponent?: ComponentType<{ template: TemplateEntityV1beta3; }>; // (undocumented) @@ -507,7 +505,7 @@ export type WorkflowProps = { namespace: string; templateName: string; components?: { - ReviewStepComponent?: React_2.ComponentType; + ReviewStepComponent?: ComponentType; }; onError(error: Error | undefined): JSX.Element | null; } & Pick< diff --git a/plugins/scaffolder-react/report.api.md b/plugins/scaffolder-react/report.api.md index 23a8a5975d..cd8711b18f 100644 --- a/plugins/scaffolder-react/report.api.md +++ b/plugins/scaffolder-react/report.api.md @@ -24,9 +24,9 @@ import { IdSchema } from '@rjsf/utils'; import { JsonObject } from '@backstage/types'; import { JSONSchema7 } from 'json-schema'; import { JsonValue } from '@backstage/types'; +import { JSX as JSX_2 } from 'react/jsx-runtime'; import { Observable } from '@backstage/types'; import { PropsWithChildren } from 'react'; -import { default as React_2 } from 'react'; import { ReactNode } from 'react'; import { Ref } from 'react'; import { Registry } from '@rjsf/utils'; @@ -312,9 +312,7 @@ export interface ScaffolderGetIntegrationsListResponse { } // @public -export const ScaffolderLayouts: React_2.ComponentType< - React_2.PropsWithChildren<{}> ->; +export const ScaffolderLayouts: ComponentType>; // @public (undocumented) export type ScaffolderOutputLink = { @@ -519,7 +517,7 @@ export const SecretsContextProvider: ( props: PropsWithChildren<{ initialSecrets?: Record; }>, -) => React_2.JSX.Element; +) => JSX_2.Element; // @public export type TaskStream = { 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/report-alpha.api.md b/plugins/scaffolder/report-alpha.api.md index 4eb17b411d..bca3c37b25 100644 --- a/plugins/scaffolder/report-alpha.api.md +++ b/plugins/scaffolder/report-alpha.api.md @@ -6,6 +6,7 @@ import { AnyApiFactory } from '@backstage/frontend-plugin-api'; import { AnyRouteRefParams } from '@backstage/frontend-plugin-api'; import { ApiRef } from '@backstage/frontend-plugin-api'; +import { ComponentType } from 'react'; import { ConfigurableExtensionDataRef } from '@backstage/frontend-plugin-api'; import { ExtensionDefinition } from '@backstage/frontend-plugin-api'; import { ExtensionInput } from '@backstage/frontend-plugin-api'; @@ -20,7 +21,6 @@ import { IconComponent } from '@backstage/core-plugin-api'; import { JSX as JSX_2 } from 'react'; import { LayoutOptions } from '@backstage/plugin-scaffolder-react'; import { PathParams } from '@backstage/core-plugin-api'; -import { default as React_2 } from 'react'; import { ReviewStepProps } from '@backstage/plugin-scaffolder-react'; import { RouteRef } from '@backstage/frontend-plugin-api'; import { ScaffolderFormDecorator } from '@backstage/plugin-scaffolder-react/alpha'; @@ -438,7 +438,7 @@ export const scaffolderTranslationRef: TranslationRef< // @alpha (undocumented) export type TemplateListPageProps = { - TemplateCardComponent?: React_2.ComponentType<{ + TemplateCardComponent?: ComponentType<{ template: TemplateEntityV1beta3; }>; groups?: TemplateGroupFilter[]; @@ -459,7 +459,7 @@ export type TemplateListPageProps = { export type TemplateWizardPageProps = { customFieldExtensions: FieldExtensionOptions[]; components?: { - ReviewStepComponent?: React_2.ComponentType; + ReviewStepComponent?: ComponentType; }; layouts?: LayoutOptions[]; formProps?: FormProps_3; diff --git a/plugins/scaffolder/report.api.md b/plugins/scaffolder/report.api.md index 379e6a98b9..a685e8163f 100644 --- a/plugins/scaffolder/report.api.md +++ b/plugins/scaffolder/report.api.md @@ -21,7 +21,7 @@ import { FieldSchema as FieldSchema_2 } from '@backstage/plugin-scaffolder-react import { FieldValidation } from '@rjsf/utils'; import { FormProps } from '@backstage/plugin-scaffolder-react'; import { IdentityApi } from '@backstage/core-plugin-api'; -import { JSX as JSX_2 } from 'react'; +import { JSX as JSX_2 } from 'react/jsx-runtime'; import { LayoutOptions as LayoutOptions_2 } from '@backstage/plugin-scaffolder-react'; import { LayoutTemplate as LayoutTemplate_2 } from '@backstage/plugin-scaffolder-react'; import { ListActionsResponse as ListActionsResponse_2 } from '@backstage/plugin-scaffolder-react'; @@ -30,7 +30,6 @@ import { LogEvent as LogEvent_2 } from '@backstage/plugin-scaffolder-react'; import { Observable } from '@backstage/types'; import { PathParams } from '@backstage/core-plugin-api'; import { PropsWithChildren } from 'react'; -import { default as React_2 } from 'react'; import { ReactNode } from 'react'; import { ReviewStepProps } from '@backstage/plugin-scaffolder-react'; import { RouteRef } from '@backstage/core-plugin-api'; @@ -474,16 +473,16 @@ export const rootRouteRef: RouteRef; // @public export type RouterProps = { components?: { - ReviewStepComponent?: React_2.ComponentType; - TemplateCardComponent?: React_2.ComponentType<{ + ReviewStepComponent?: ComponentType; + TemplateCardComponent?: ComponentType<{ template: TemplateEntityV1beta3; }>; - TaskPageComponent?: React_2.ComponentType>; - EXPERIMENTAL_TemplateOutputsComponent?: React_2.ComponentType<{ + TaskPageComponent?: ComponentType>; + EXPERIMENTAL_TemplateOutputsComponent?: ComponentType<{ output?: ScaffolderTaskOutput_2; }>; - EXPERIMENTAL_TemplateListPageComponent?: React_2.ComponentType; - EXPERIMENTAL_TemplateWizardPageComponent?: React_2.ComponentType; + EXPERIMENTAL_TemplateListPageComponent?: ComponentType; + EXPERIMENTAL_TemplateWizardPageComponent?: ComponentType; }; groups?: TemplateGroupFilter[]; templateFilter?: (entity: TemplateEntityV1beta3) => boolean; @@ -656,10 +655,10 @@ export type ScaffolderUseTemplateSecrets = ScaffolderUseTemplateSecrets_2; // @public (undocumented) export const TaskPage: (props: { - TemplateOutputsComponent?: React_2.ComponentType<{ + TemplateOutputsComponent?: ComponentType<{ output?: ScaffolderTaskOutput_2; }>; -}) => React_2.JSX.Element; +}) => JSX_2.Element; // @public @deprecated export type TaskPageProps = { @@ -670,7 +669,7 @@ export type TaskPageProps = { export type TemplateParameterSchema = TemplateParameterSchema_2; // @public -export const TemplateTypePicker: () => React_2.JSX.Element | null; +export const TemplateTypePicker: () => JSX_2.Element | null; // @public @deprecated (undocumented) export const useTemplateSecrets: () => ScaffolderUseTemplateSecrets_2; 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/report.api.md b/plugins/search-react/report.api.md index ce80b8a363..1e74e16132 100644 --- a/plugins/search-react/report.api.md +++ b/plugins/search-react/report.api.md @@ -6,34 +6,39 @@ import { ApiRef } from '@backstage/core-plugin-api'; import { AsyncState } from 'react-use/esm/useAsync'; import { AutocompleteProps } from '@material-ui/lab/Autocomplete'; +import { Dispatch } from 'react'; +import { DispatchWithoutAction } from 'react'; import { Extension } from '@backstage/core-plugin-api'; +import { ForwardRefExoticComponent } from 'react'; import { JsonObject } from '@backstage/types'; import { JsonValue } from '@backstage/types'; +import { JSX as JSX_2 } from 'react/jsx-runtime'; import { LinkProps } from '@backstage/core-components'; import { ListItemProps } from '@material-ui/core/ListItem'; import { ListItemTextProps } from '@material-ui/core/ListItemText'; import { ListProps } from '@material-ui/core/List'; import { PropsWithChildren } from 'react'; -import { default as React_2 } from 'react'; import { ReactElement } from 'react'; import { ReactNode } from 'react'; +import { RefAttributes } from 'react'; import { ResultHighlight } from '@backstage/plugin-search-common'; import { SearchDocument } from '@backstage/plugin-search-common'; import { SearchQuery } from '@backstage/plugin-search-common'; import { SearchResult as SearchResult_2 } from '@backstage/plugin-search-common'; import { SearchResultSet } from '@backstage/plugin-search-common'; +import { SetStateAction } from 'react'; import { TextFieldProps } from '@material-ui/core/TextField'; import { TypographyProps } from '@material-ui/core/Typography'; // @public (undocumented) export const AutocompleteFilter: ( props: SearchAutocompleteFilterProps, -) => React_2.JSX.Element; +) => JSX_2.Element; // @public (undocumented) export const CheckboxFilter: ( props: SearchFilterComponentProps, -) => React_2.JSX.Element; +) => JSX_2.Element; // @public export const createSearchResultListItemExtension: < @@ -45,7 +50,7 @@ export const createSearchResultListItemExtension: < // @public (undocumented) export const DefaultResultListItem: ( props: DefaultResultListItemProps, -) => React_2.JSX.Element; +) => JSX_2.Element; // @public export type DefaultResultListItemProps = { @@ -61,7 +66,7 @@ export type DefaultResultListItemProps = { // @public (undocumented) export const HighlightedSearchResultText: ( props: HighlightedSearchResultTextProps, -) => React_2.JSX.Element; +) => JSX_2.Element; // @public (undocumented) export type HighlightedSearchResultTextClassKey = 'highlight'; @@ -102,7 +107,7 @@ export type SearchAutocompleteComponent =