chore: update react imports

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

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