chore: update react imports

Signed-off-by: Paul Schultz <pschultz@pobox.com>

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';
 
 /**

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,

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 {

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('<ApiDefinitionCard />', () => {
   const apiDocsConfig: jest.Mocked<ApiDocsConfig> = {
     getApiDefinitionWidget: jest.fn(),
   } as any;
-  let Wrapper: React.ComponentType<React.PropsWithChildren<{}>>;
+  let Wrapper: ComponentType<PropsWithChildren<{}>>;
 
   beforeEach(() => {
-    Wrapper = ({ children }: { children?: React.ReactNode }) => (
+    Wrapper = ({ children }: { children?: ReactNode }) => (
       <TestApiProvider apis={[[apiDocsConfigRef, apiDocsConfig]]}>
         {children}
       </TestApiProvider>

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';
 

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;
 };
 

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('<ApiTypeTitle />', () => {
   const apiDocsConfig: jest.Mocked<ApiDocsConfig> = {
     getApiDefinitionWidget: jest.fn(),
   } as any;
-  let Wrapper: React.ComponentType<React.PropsWithChildren<{}>>;
+  let Wrapper: ComponentType<PropsWithChildren<{}>>;
 
   beforeEach(() => {
-    Wrapper = ({ children }: { children?: React.ReactNode }) => (
+    Wrapper = ({ children }: { children?: ReactNode }) => (
       <TestApiProvider apis={[[apiDocsConfigRef, apiDocsConfig]]}>
         {children}
       </TestApiProvider>

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';
 

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(() => {

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';

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,

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(
       <TestApiProvider
         apis={[

plugins/api-docs/src/components/ApiExplorerPage/DefaultApiExplorerPage.tsx

@@ -38,7 +38,6 @@ import {
   CatalogFilterLayout,
   EntityOwnerPickerProps,
 } from '@backstage/plugin-catalog-react';
-import React from 'react';
 import { registerComponentRouteRef } from '../../routes';
 import { usePermission } from '@backstage/plugin-permission-react';
 import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common/alpha';

plugins/api-docs/src/components/ApisCards/ConsumedApisCard.test.tsx

@@ -23,7 +23,7 @@ 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 { ApiDocsConfig, apiDocsConfigRef } from '../../config';
 import { ConsumedApisCard } from './ConsumedApisCard';
 
@@ -32,10 +32,10 @@ describe('<ConsumedApisCard />', () => {
     getApiDefinitionWidget: jest.fn(),
   } as any;
   const catalogApi = catalogApiMock.mock();
-  let Wrapper: React.ComponentType<React.PropsWithChildren<{}>>;
+  let Wrapper: ComponentType<PropsWithChildren<{}>>;
 
   beforeEach(() => {
-    Wrapper = ({ children }: { children?: React.ReactNode }) => (
+    Wrapper = ({ children }: { children?: ReactNode }) => (
       <TestApiProvider
         apis={[
           [catalogApiRef, catalogApi],

plugins/api-docs/src/components/ApisCards/ConsumedApisCard.tsx

@@ -21,7 +21,6 @@ import {
   useEntity,
   useRelatedEntities,
 } from '@backstage/plugin-catalog-react';
-import React from 'react';
 import { apiEntityColumns } from './presets';
 import {
   CodeSnippet,

plugins/api-docs/src/components/ApisCards/HasApisCard.test.tsx

@@ -22,7 +22,7 @@ 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 { ApiDocsConfig, apiDocsConfigRef } from '../../config';
 import { HasApisCard } from './HasApisCard';
 import { catalogApiMock } from '@backstage/plugin-catalog-react/testUtils';
@@ -32,10 +32,10 @@ describe('<HasApisCard />', () => {
     getApiDefinitionWidget: jest.fn(),
   } as any;
   const catalogApi = catalogApiMock.mock();
-  let Wrapper: React.ComponentType<React.PropsWithChildren<{}>>;
+  let Wrapper: ComponentType<PropsWithChildren<{}>>;
 
   beforeEach(() => {
-    Wrapper = ({ children }: { children?: React.ReactNode }) => (
+    Wrapper = ({ children }: { children?: ReactNode }) => (
       <TestApiProvider
         apis={[
           [catalogApiRef, catalogApi],

plugins/api-docs/src/components/ApisCards/HasApisCard.tsx

@@ -21,7 +21,6 @@ import {
   useEntity,
   useRelatedEntities,
 } from '@backstage/plugin-catalog-react';
-import React from 'react';
 import { createSpecApiTypeColumn } from './presets';
 import {
   CodeSnippet,

plugins/api-docs/src/components/ApisCards/ProvidedApisCard.test.tsx

@@ -22,7 +22,7 @@ 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 { ApiDocsConfig, apiDocsConfigRef } from '../../config';
 import { ProvidedApisCard } from './ProvidedApisCard';
 import { catalogApiMock } from '@backstage/plugin-catalog-react/testUtils';
@@ -32,10 +32,10 @@ describe('<ProvidedApisCard />', () => {
     getApiDefinitionWidget: jest.fn(),
   } as any;
   const catalogApi = catalogApiMock.mock();
-  let Wrapper: React.ComponentType<React.PropsWithChildren<{}>>;
+  let Wrapper: ComponentType<PropsWithChildren<{}>>;
 
   beforeEach(() => {
-    Wrapper = ({ children }: { children?: React.ReactNode }) => (
+    Wrapper = ({ children }: { children?: ReactNode }) => (
       <TestApiProvider
         apis={[
           [catalogApiRef, catalogApi],

plugins/api-docs/src/components/ApisCards/ProvidedApisCard.tsx

@@ -21,7 +21,6 @@ import {
   useEntity,
   useRelatedEntities,
 } from '@backstage/plugin-catalog-react';
-import React from 'react';
 import { apiEntityColumns } from './presets';
 import {
   CodeSnippet,

plugins/api-docs/src/components/ApisCards/presets.tsx

@@ -19,7 +19,7 @@ import { TableColumn } from '@backstage/core-components';
 import { EntityTable } from '@backstage/plugin-catalog-react';
 import ExtensionIcon from '@material-ui/icons/Extension';
 import ToggleButton from '@material-ui/lab/ToggleButton';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { ApiTypeTitle } from '../ApiDefinitionCard';
 import { ApiDefinitionDialog } from '../ApiDefinitionDialog';
 

plugins/api-docs/src/components/AsyncApiDefinitionWidget/AsyncApiDefinition.test.tsx

@@ -15,7 +15,6 @@
  */
 
 import { renderInTestApp } from '@backstage/test-utils';
-import React from 'react';
 import { AsyncApiDefinition } from './AsyncApiDefinition';
 
 jest.mock('use-resize-observer', () => ({

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 */

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,
   })),

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('<ConsumingComponentsCard />', () => {
   const catalogApi = catalogApiMock.mock();
-  let Wrapper: React.ComponentType<React.PropsWithChildren<{}>>;
+  let Wrapper: ComponentType<PropsWithChildren<{}>>;
 
   beforeEach(() => {
-    Wrapper = ({ children }: { children?: React.ReactNode }) => (
+    Wrapper = ({ children }: { children?: ReactNode }) => (
       <TestApiProvider apis={[[catalogApiRef, catalogApi]]}>
         {children}
       </TestApiProvider>

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,

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('<ProvidingComponentsCard />', () => {
   const catalogApi = catalogApiMock.mock();
-  let Wrapper: React.ComponentType<React.PropsWithChildren<{}>>;
+  let Wrapper: ComponentType<PropsWithChildren<{}>>;
 
   beforeEach(() => {
-    Wrapper = ({ children }: { children?: React.ReactNode }) => (
+    Wrapper = ({ children }: { children?: ReactNode }) => (
       <TestApiProvider apis={[[catalogApiRef, catalogApi]]}>
         {children}
       </TestApiProvider>

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,

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('<GraphQlDefinition />', () => {

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: {

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,
   })),

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('<GrpcApiDefinitionWidget />', () => {

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';
 

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('<OpenApiDefinition />', () => {

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';
 

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,
   })),

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('<PlainApiDefinitionWidget />', () => {

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 */

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('<TrpcApiDefinitionWidget />', () => {

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';
 

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';

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(

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,

plugins/app-visualizer/src/components/AppVisualizerPage/TreeVisualizer.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import {
   DependencyGraph,
   DependencyGraphTypes,

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();
 

plugins/app/src/extensions/App.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import {
   ExtensionBoundary,
   coreExtensionData,

plugins/app/src/extensions/AppLayout.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import {
   createExtension,
   coreExtensionData,

plugins/app/src/extensions/AppNav.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import {
   createExtension,
   coreExtensionData,

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<SignInPageProps>;
   RouterComponent?: ComponentType<PropsWithChildren<{}>>;
-  extraElements?: Array<React.JSX.Element>;
+  extraElements?: Array<JSX.Element>;
 }
 
 function DefaultRouter(props: PropsWithChildren<{}>) {

plugins/app/src/extensions/AppRoutes.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import {
   createExtension,
   coreExtensionData,

plugins/app/src/extensions/AppThemeApi.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import {
   UnifiedThemeProvider,
   themes as builtinThemes,

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';
 

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,

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: <React.Fragment />,
+          element: <Fragment />,
         });
       }
       return originalFactory({

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 {

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',

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,

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';
 

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';

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';

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';

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,

plugins/catalog-graph/src/alpha.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import {
   createFrontendPlugin,
   PageBlueprint,

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';

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';

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';
 

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,

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('<CurveFilter/>', () => {

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<Curve, string> = {

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';
 

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 = {

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('<MaxDepthFilter/>', () => {

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<HTMLInputElement>) => {
-      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<HTMLInputElement>) => {
+    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);

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';
 

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 */

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';
 

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 */

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('<SwitchFilter/>', () => {

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<HTMLInputElement>) => {
+    (event: ChangeEvent<HTMLInputElement>) => {
       onChange(event.target.checked);
     },
     [onChange],

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 <BrowserRouter>{children}</BrowserRouter>;
 };
 

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('<CustomLabel />', () => {

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';
 

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';
 

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';

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';

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';

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('<EntityRelationsGraph/>', () => {
-  let Wrapper: FunctionComponent<React.PropsWithChildren<{}>>;
+  let Wrapper: FunctionComponent<PropsWithChildren<{}>>;
   const entities: { [ref: string]: Entity } = {
     'b:d/c': {
       apiVersion: 'a',

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';

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,

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';

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: {

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';
 

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';

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) => {
     <List>
       {firstListItem}
       {locations.map(r => (
-        <React.Fragment key={r.target}>
+        <Fragment key={r.target}>
           <ListItem
             dense
             button={Boolean(onItemClick) as any}
@@ -153,7 +153,7 @@ export const EntityListComponent = (props: EntityListComponentProps) => {
               })}
             </List>
           </Collapse>
-        </React.Fragment>
+        </Fragment>
       ))}
     </List>
   );

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';

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';

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';

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';
 

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 {

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;
 };
 
 /**

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';