chore: update react imports

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

plugins/techdocs/src/EntityPageDocs.tsx

@@ -21,7 +21,6 @@ import {
 } from '@backstage/catalog-model';
 import { TECHDOCS_EXTERNAL_ANNOTATION } from '@backstage/plugin-techdocs-common';
 
-import React from 'react';
 import { TechDocsReaderPage } from './plugin';
 import { TechDocsReaderPageContent } from './reader/components/TechDocsReaderPageContent';
 import { TechDocsReaderPageSubheader } from './reader/components/TechDocsReaderPageSubheader';

plugins/techdocs/src/Router.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { PropsWithChildren } from 'react';
+import { ReactElement, PropsWithChildren } from 'react';
 import { Route, Routes, useRoutes } from 'react-router-dom';
 
 import { Entity } from '@backstage/catalog-model';
@@ -78,7 +78,7 @@ export const TechDocsReaderRouter = (props: PropsWithChildren) => {
 
 export const EmbeddedDocsRouter = (
   props: PropsWithChildren<{
-    emptyState?: React.ReactElement;
+    emptyState?: ReactElement;
     withSearch?: boolean;
   }>,
 ) => {

plugins/techdocs/src/alpha.tsx

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

plugins/techdocs/src/home/components/DefaultTechDocsHome.test.tsx

@@ -28,7 +28,6 @@ import {
   renderInTestApp,
 } from '@backstage/test-utils';
 import { screen } from '@testing-library/react';
-import React from 'react';
 import { rootDocsRouteRef } from '../../routes';
 import { DefaultTechDocsHome } from './DefaultTechDocsHome';
 

plugins/techdocs/src/home/components/DefaultTechDocsHome.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import { ReactNode, FC } from 'react';
 import {
   Content,
   ContentHeader,
@@ -56,10 +56,10 @@ export const DefaultTechDocsHome = (props: TechDocsIndexPageProps) => {
     PageWrapper,
     CustomHeader,
   } = props;
-  const Wrapper: React.FC<{
-    children: React.ReactNode;
+  const Wrapper: FC<{
+    children: ReactNode;
   }> = PageWrapper ? PageWrapper : TechDocsPageWrapper;
-  const Header: React.FC =
+  const Header: FC =
     CustomHeader ||
     (() => (
       <ContentHeader title="">

plugins/techdocs/src/home/components/Grids/DocsCardGrid.test.tsx

@@ -17,7 +17,6 @@
 import { configApiRef } from '@backstage/core-plugin-api';
 import { renderInTestApp } from '@backstage/test-utils';
 import { screen } from '@testing-library/react';
-import React from 'react';
 import { rootDocsRouteRef } from '../../../routes';
 import { DocsCardGrid } from './DocsCardGrid';
 

plugins/techdocs/src/home/components/Grids/DocsCardGrid.tsx

@@ -27,7 +27,6 @@ import Card from '@material-ui/core/Card';
 import CardActions from '@material-ui/core/CardActions';
 import CardContent from '@material-ui/core/CardContent';
 import CardMedia from '@material-ui/core/CardMedia';
-import React from 'react';
 
 /**
  * Props for {@link DocsCardGrid}

plugins/techdocs/src/home/components/Grids/EntityListDocsGrid.test.tsx

@@ -31,7 +31,6 @@ import {
   mockApis,
 } from '@backstage/test-utils';
 import { screen } from '@testing-library/react';
-import React from 'react';
 import { rootDocsRouteRef } from '../../../routes';
 import { EntityListDocsGrid } from './EntityListDocsGrid';
 

plugins/techdocs/src/home/components/Grids/EntityListDocsGrid.tsx

@@ -29,7 +29,7 @@ import {
   useEntityOwnership,
 } from '@backstage/plugin-catalog-react';
 import Typography from '@material-ui/core/Typography';
-import React from 'react';
+import { ReactNode } from 'react';
 
 /**
  * Props for {@link EntityListDocsGrid}
@@ -37,7 +37,7 @@ import React from 'react';
  * @public
  */
 export type DocsGroupConfig = {
-  title: React.ReactNode;
+  title: ReactNode;
   filterPredicate: ((entity: Entity) => boolean) | string;
 };
 
@@ -76,7 +76,7 @@ const EntityListDocsGridGroup = (props: {
     );
   });
 
-  const titleComponent: React.ReactNode = (() => {
+  const titleComponent: ReactNode = (() => {
     return typeof group.title === 'string' ? (
       <ContentHeader title={group.title} />
     ) : (

plugins/techdocs/src/home/components/Grids/InfoCardGrid.test.tsx

@@ -20,17 +20,17 @@ import { entityPresentationApiRef } from '@backstage/plugin-catalog-react';
 import { DefaultEntityPresentationApi } from '@backstage/plugin-catalog';
 import { catalogApiMock } from '@backstage/plugin-catalog-react/testUtils';
 
-import React from 'react';
+import { PropsWithChildren, ComponentType, ReactNode } from 'react';
 import { rootDocsRouteRef } from '../../../routes';
 import { InfoCardGrid } from './InfoCardGrid';
 
 describe('Entity Info Card Grid', () => {
   const catalogApi = catalogApiMock();
-  let Wrapper: React.ComponentType<React.PropsWithChildren<{}>>;
+  let Wrapper: ComponentType<PropsWithChildren<{}>>;
 
   beforeEach(() => {
     jest.resetAllMocks();
-    Wrapper = ({ children }: { children?: React.ReactNode }) => (
+    Wrapper = ({ children }: { children?: ReactNode }) => (
       <TestApiProvider
         apis={[
           [

plugins/techdocs/src/home/components/Grids/InfoCardGrid.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import useAsync from 'react-use/esm/useAsync';
 import { Entity, stringifyEntityRef } from '@backstage/catalog-model';
 import { useApi, useRouteRef, configApiRef } from '@backstage/core-plugin-api';

plugins/techdocs/src/home/components/Tables/CursorPaginatedDocsTable.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 { CursorPaginatedDocsTable } from './CursorPaginatedDocsTable';
 import { DocsTableRow } from './types';

plugins/techdocs/src/home/components/Tables/CursorPaginatedDocsTable.tsx

@@ -14,8 +14,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
-
 import { Table, TableProps } from '@backstage/core-components';
 import { DocsTableRow } from './types';
 

plugins/techdocs/src/home/components/Tables/DocsTable.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 { configApiRef } from '@backstage/core-plugin-api';

plugins/techdocs/src/home/components/Tables/DocsTable.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import useCopyToClipboard from 'react-use/esm/useCopyToClipboard';
 
 import { configApiRef, useApi, useRouteRef } from '@backstage/core-plugin-api';

plugins/techdocs/src/home/components/Tables/EntityListDocsTable.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import useCopyToClipboard from 'react-use/esm/useCopyToClipboard';
 import { capitalize } from 'lodash';
 import {

plugins/techdocs/src/home/components/Tables/OffsetPaginatedDocsTable.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 { DocsTableRow } from './types';
 import { renderInTestApp } from '@backstage/test-utils';

plugins/techdocs/src/home/components/Tables/OffsetPaginatedDocsTable.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 { DocsTableRow } from './types';
@@ -30,7 +30,7 @@ export function OffsetPaginatedDocsTable(props: TableProps<DocsTableRow>) {
   const { actions, columns, data, isLoading, options } = props;
   const { updateFilters, setLimit, setOffset, limit, totalItems, offset } =
     useEntityList();
-  const [page, setPage] = React.useState(
+  const [page, setPage] = useState(
     offset && limit ? Math.floor(offset / limit) : 0,
   );
 

plugins/techdocs/src/home/components/Tables/actions.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import ShareIcon from '@material-ui/icons/Share';
 import { DocsTableRow } from './types';
 import { FavoriteToggleIcon } from '@backstage/core-components';

plugins/techdocs/src/home/components/Tables/columns.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import { Link, SubvalueCell, TableColumn } from '@backstage/core-components';
 import { EntityRefLinks } from '@backstage/plugin-catalog-react';
 import { Entity } from '@backstage/catalog-model';

plugins/techdocs/src/home/components/TechDocsCustomHome.test.tsx

@@ -23,7 +23,7 @@ import { ContentHeader, PageWithHeader } from '@backstage/core-components';
 import { catalogApiMock } from '@backstage/plugin-catalog-react/testUtils';
 import { renderInTestApp, TestApiRegistry } from '@backstage/test-utils';
 import { screen } from '@testing-library/react';
-import React from 'react';
+import { PropsWithChildren } from 'react';
 import { TechDocsCustomHome, PanelType } from './TechDocsCustomHome';
 import { ApiProvider } from '@backstage/core-app-api';
 import { rootDocsRouteRef } from '../../routes';
@@ -159,7 +159,7 @@ describe('TechDocsCustomHome', () => {
       <ApiProvider apis={apiRegistry}>
         <TechDocsCustomHome
           tabsConfig={tabsConfig}
-          CustomPageWrapper={({ children }: React.PropsWithChildren<{}>) => (
+          CustomPageWrapper={({ children }: PropsWithChildren<{}>) => (
             <PageWithHeader
               title="Custom Title"
               subtitle="Custom Subtitle"

plugins/techdocs/src/home/components/TechDocsCustomHome.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { useState } from 'react';
+import { FC, useState } from 'react';
 import useAsync from 'react-use/esm/useAsync';
 import { makeStyles } from '@material-ui/core/styles';
 import { CSSProperties } from '@material-ui/styles/withStyles';
@@ -72,8 +72,8 @@ export interface PanelProps {
   options?: TableOptions<DocsTableRow>;
   linkContent?: string | JSX.Element;
   linkDestination?: (entity: Entity) => string | undefined;
-  PageWrapper?: React.FC;
-  CustomHeader?: React.FC;
+  PageWrapper?: FC;
+  CustomHeader?: FC;
 }
 
 /**
@@ -146,7 +146,7 @@ export const CustomDocsPanel = ({
     );
   });
 
-  const Header: React.FC =
+  const Header: FC =
     config.panelProps?.CustomHeader ||
     (() => (
       <ContentHeader title={config.title} description={config.description}>
@@ -182,7 +182,7 @@ export const CustomDocsPanel = ({
 export type TechDocsCustomHomeProps = {
   tabsConfig: TabsConfig;
   filter?: EntityFilterQuery;
-  CustomPageWrapper?: React.FC;
+  CustomPageWrapper?: FC;
 };
 
 export const TechDocsCustomHome = (props: TechDocsCustomHomeProps) => {

plugins/techdocs/src/home/components/TechDocsIndexPage.test.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import { renderInTestApp } from '@backstage/test-utils';
 import { useOutlet } from 'react-router-dom';
 import { TechDocsIndexPage } from './TechDocsIndexPage';

plugins/techdocs/src/home/components/TechDocsIndexPage.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import { FC } from 'react';
 import { useOutlet } from 'react-router-dom';
 import {
   TableColumn,
@@ -41,8 +41,8 @@ export type TechDocsIndexPageProps = {
   ownerPickerMode?: EntityOwnerPickerProps['mode'];
   pagination?: EntityListPagination;
   options?: TableOptions<DocsTableRow>;
-  PageWrapper?: React.FC;
-  CustomHeader?: React.FC;
+  PageWrapper?: FC;
+  CustomHeader?: FC;
 };
 
 export const TechDocsIndexPage = (props: TechDocsIndexPageProps) => {

plugins/techdocs/src/home/components/TechDocsPageWrapper.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import { ReactNode, FC } from 'react';
 
 import { PageWithHeader } from '@backstage/core-components';
 import { useApi, configApiRef } from '@backstage/core-plugin-api';
@@ -25,8 +25,8 @@ import { useApi, configApiRef } from '@backstage/core-plugin-api';
  * @public
  */
 export type TechDocsPageWrapperProps = {
-  children?: React.ReactNode;
-  CustomPageWrapper?: React.FC<{ children?: React.ReactNode }>;
+  children?: ReactNode;
+  CustomPageWrapper?: FC<{ children?: ReactNode }>;
 };
 
 /**

plugins/techdocs/src/reader/components/TechDocsBuildLogs.test.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { renderInTestApp } from '@backstage/test-utils';
 import {
   TechDocsBuildLogs,

plugins/techdocs/src/reader/components/TechDocsBuildLogs.tsx

@@ -22,7 +22,7 @@ import IconButton from '@material-ui/core/IconButton';
 import Typography from '@material-ui/core/Typography';
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 import Close from '@material-ui/icons/Close';
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 const useDrawerStyles = makeStyles((theme: Theme) =>
   createStyles({

plugins/techdocs/src/reader/components/TechDocsNotFound.test.tsx

@@ -15,7 +15,6 @@
  */
 
 import { TechDocsNotFound } from './TechDocsNotFound';
-import React from 'react';
 import { screen, waitFor } from '@testing-library/react';
 import {
   mockApis,

plugins/techdocs/src/reader/components/TechDocsNotFound.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { useApi, configApiRef, useAnalytics } from '@backstage/core-plugin-api';
 import { ErrorPage } from '@backstage/core-components';
 import { useTechDocsReaderPage } from '@backstage/plugin-techdocs-react';

plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.test.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import { ReactNode } from 'react';
 import { scmIntegrationsApiRef } from '@backstage/integration-react';
 
 import {
@@ -118,7 +118,7 @@ const configApi = mockApis.config({
   data: { app: { baseUrl: 'http://localhost:3000' } },
 });
 
-const Wrapper = ({ children }: { children: React.ReactNode }) => {
+const Wrapper = ({ children }: { children: ReactNode }) => {
   return (
     <TestApiProvider
       apis={[

plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { Children, ReactElement, ReactNode } from 'react';
+import { Children, ReactElement, ReactNode } from 'react';
 import { useOutlet } from 'react-router-dom';
 
 import { Page } from '@backstage/core-components';
@@ -193,7 +193,7 @@ export const TechDocsReaderPage = (props: TechDocsReaderPageProps) => {
       child => (child as ReactElement)?.props?.children ?? [],
     );
 
-    const page: React.ReactNode = grandChildren.find(
+    const page: ReactNode = grandChildren.find(
       grandChild =>
         !getComponentData(grandChild, TECHDOCS_ADDONS_WRAPPER_KEY) &&
         !getComponentData(grandChild, TECHDOCS_ADDONS_KEY),

plugins/techdocs/src/reader/components/TechDocsReaderPage/context.test.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import { ReactNode } from 'react';
 import { renderHook, waitFor } from '@testing-library/react';
 
 import { ThemeProvider } from '@material-ui/core/styles';
@@ -66,7 +66,7 @@ const wrapper = ({
   children,
 }: {
   entityRef?: CompoundEntityRef;
-  children: React.ReactNode;
+  children: ReactNode;
 }) => (
   <ThemeProvider theme={lightTheme}>
     <TestApiProvider

plugins/techdocs/src/reader/components/TechDocsReaderPageContent/TechDocsReaderPageContent.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 { waitFor } from '@testing-library/react';
 
 import { CompoundEntityRef } from '@backstage/catalog-model';
@@ -82,7 +82,7 @@ const Wrapper = ({
   children,
 }: {
   entityRef?: CompoundEntityRef;
-  children: React.ReactNode;
+  children: ReactNode;
 }) => (
   <TestApiProvider apis={[[techdocsApiRef, techdocsApiMock]]}>
     <TechDocsReaderPageProvider entityRef={entityRef}>

plugins/techdocs/src/reader/components/TechDocsReaderPageContent/TechDocsReaderPageContent.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { useCallback, useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 
 import Grid from '@material-ui/core/Grid';
 import { makeStyles } from '@material-ui/core/styles';

plugins/techdocs/src/reader/components/TechDocsReaderPageContent/TechDocsReaderPageContentAddons.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import Portal from '@material-ui/core/Portal';
 import {
   useTechDocsAddons,

plugins/techdocs/src/reader/components/TechDocsReaderPageContent/useNavigateUrl.test.tsx

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

plugins/techdocs/src/reader/components/TechDocsReaderPageHeader/TechDocsReaderPageHeader.test.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react';
+import { ReactNode } from 'react';
 
 import { CompoundEntityRef } from '@backstage/catalog-model';
 import {
@@ -91,7 +91,7 @@ const Wrapper = ({
   children,
 }: {
   entityRef?: CompoundEntityRef;
-  children: React.ReactNode;
+  children: ReactNode;
 }) => (
   <TestApiProvider
     apis={[

plugins/techdocs/src/reader/components/TechDocsReaderPageHeader/TechDocsReaderPageHeader.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { PropsWithChildren, useEffect } from 'react';
+import { PropsWithChildren, useEffect } from 'react';
 import Helmet from 'react-helmet';
 
 import Grid from '@material-ui/core/Grid';

plugins/techdocs/src/reader/components/TechDocsReaderPageSubheader/TechDocsReaderPageSubheader.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { MouseEvent, useState, useCallback } from 'react';
+import { MouseEvent, useState, useCallback } from 'react';
 
 import { makeStyles } from '@material-ui/core/styles';
 import IconButton from '@material-ui/core/IconButton';

plugins/techdocs/src/reader/components/TechDocsReaderProvider.tsx

@@ -14,12 +14,7 @@
  * limitations under the License.
  */
 
-import React, {
-  ComponentType,
-  createContext,
-  useContext,
-  ReactNode,
-} from 'react';
+import { ComponentType, createContext, useContext, ReactNode } from 'react';
 import { useParams } from 'react-router-dom';
 import { useTechDocsReaderPage } from '@backstage/plugin-techdocs-react';
 

plugins/techdocs/src/reader/components/TechDocsRedirectNotification/TechDocsRedirectNotification.tsx

@@ -15,7 +15,7 @@
  */
 
 import { makeStyles } from '@material-ui/core/styles';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import Snackbar from '@material-ui/core/Snackbar';
 import Button from '@material-ui/core/Button';
 

plugins/techdocs/src/reader/components/TechDocsStateIndicator.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import Button from '@material-ui/core/Button';
 import { makeStyles } from '@material-ui/core/styles';

plugins/techdocs/src/reader/components/useReaderState.test.tsx

@@ -17,7 +17,7 @@
 import { NotFoundError } from '@backstage/errors';
 import { TestApiProvider } from '@backstage/test-utils';
 import { act, renderHook, waitFor } from '@testing-library/react';
-import React from 'react';
+import { PropsWithChildren, ComponentType, ReactNode } from 'react';
 import { techdocsStorageApiRef } from '../../api';
 import {
   calculateDisplayState,
@@ -26,7 +26,7 @@ import {
 } from './useReaderState';
 
 describe('useReaderState', () => {
-  let Wrapper: React.ComponentType<React.PropsWithChildren<{}>>;
+  let Wrapper: ComponentType<PropsWithChildren<{}>>;
 
   const techdocsStorageApi: jest.Mocked<typeof techdocsStorageApiRef.T> = {
     getApiOrigin: jest.fn(),
@@ -38,7 +38,7 @@ describe('useReaderState', () => {
   };
 
   beforeEach(() => {
-    Wrapper = ({ children }: { children?: React.ReactNode }) => (
+    Wrapper = ({ children }: { children?: ReactNode }) => (
       <TestApiProvider apis={[[techdocsStorageApiRef, techdocsStorageApi]]}>
         {children}
       </TestApiProvider>

plugins/techdocs/src/reader/transformers/addGitFeedbackLink.ts

@@ -20,7 +20,7 @@ import {
   ScmIntegrationRegistry,
 } from '@backstage/integration';
 import FeedbackOutlinedIcon from '@material-ui/icons/FeedbackOutlined';
-import React from 'react';
+import { createElement } from 'react';
 import parseGitUrl from 'git-url-parse';
 import { renderReactElement } from './renderReactElement';
 
@@ -75,7 +75,7 @@ export const addGitFeedbackLink = (
       default:
         return dom;
     }
-    renderReactElement(React.createElement(FeedbackOutlinedIcon), feedbackLink);
+    renderReactElement(createElement(FeedbackOutlinedIcon), feedbackLink);
     feedbackLink.style.paddingLeft = '5px';
     feedbackLink.title = 'Leave feedback for this page';
     feedbackLink.id = 'git-feedback-link';

plugins/techdocs/src/reader/transformers/addSidebarToggle.ts

@@ -16,7 +16,7 @@
 
 import type { Transformer } from './transformer';
 import MenuIcon from '@material-ui/icons/Menu';
-import React from 'react';
+import { createElement } from 'react';
 import { renderReactElement } from './renderReactElement';
 
 export const addSidebarToggle = (): Transformer => {
@@ -33,7 +33,7 @@ export const addSidebarToggle = (): Transformer => {
     }
 
     const toggleSidebar = mkdocsToggleSidebar.cloneNode() as HTMLLabelElement;
-    renderReactElement(React.createElement(MenuIcon), toggleSidebar);
+    renderReactElement(createElement(MenuIcon), toggleSidebar);
     toggleSidebar.id = 'toggle-sidebar';
     toggleSidebar.title = 'Toggle Sidebar';
     toggleSidebar.classList.add('md-content__button');

plugins/techdocs/src/reader/transformers/copyToClipboard.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { useState, useCallback } from 'react';
+import { useState, useCallback } from 'react';
 import { renderReactElement } from './renderReactElement';
 import { ThemeProvider } from '@material-ui/core/styles';
 import SvgIcon from '@material-ui/core/SvgIcon';

plugins/techdocs/src/reader/transformers/handleMetaRedirects.tsx

@@ -16,7 +16,6 @@
 
 import { Transformer } from './transformer';
 import { normalizeUrl } from './rewriteDocLinks';
-import React from 'react';
 import { renderReactElement } from './renderReactElement';
 import { TechDocsRedirectNotification } from '../components/TechDocsRedirectNotification';
 

plugins/techdocs/src/reader/transformers/html/transformer.sanitizer.test.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { FC, PropsWithChildren } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import { renderHook } from '@testing-library/react';
 
 import { ConfigReader } from '@backstage/core-app-api';

plugins/techdocs/src/reader/transformers/html/transformer.test.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { FC, PropsWithChildren } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import { renderHook } from '@testing-library/react';
 
 import { ConfigReader } from '@backstage/core-app-api';

plugins/techdocs/src/reader/transformers/styles/transformer.test.tsx

@@ -17,7 +17,7 @@
 import { renderHook } from '@testing-library/react';
 import { useStylesTransformer } from './transformer';
 import { createTheme, ThemeProvider } from '@material-ui/core/styles';
-import React from 'react';
+import { ReactNode } from 'react';
 
 describe('Transformers > Styles', () => {
   it('should return a function that injects all styles into a given dom element', () => {
@@ -60,7 +60,7 @@ describe('Transformers > Styles', () => {
         },
       },
     });
-    const wrapper = ({ children }: { children: React.ReactNode }) => (
+    const wrapper = ({ children }: { children: ReactNode }) => (
       <ThemeProvider theme={theme}>{children}</ThemeProvider>
     );
     const { result } = renderHook(() => useStylesTransformer(), { wrapper });
@@ -88,7 +88,7 @@ describe('Transformers > Styles', () => {
         },
       },
     });
-    const wrapper = ({ children }: { children: React.ReactNode }) => (
+    const wrapper = ({ children }: { children: ReactNode }) => (
       <ThemeProvider theme={theme}>{children}</ThemeProvider>
     );
     const { result } = renderHook(() => useStylesTransformer(), { wrapper });
@@ -116,7 +116,7 @@ describe('Transformers > Styles', () => {
         },
       },
     });
-    const wrapper = ({ children }: { children: React.ReactNode }) => (
+    const wrapper = ({ children }: { children: ReactNode }) => (
       <ThemeProvider theme={theme}>{children}</ThemeProvider>
     );
     const { result } = renderHook(() => useStylesTransformer(), { wrapper });

plugins/techdocs/src/search/components/TechDocsSearch.test.tsx

@@ -25,7 +25,7 @@ import {
   within,
   act,
 } from '@testing-library/react';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { TechDocsSearch } from './TechDocsSearch';
 
 const entityId = {

plugins/techdocs/src/search/components/TechDocsSearch.tsx

@@ -21,7 +21,7 @@ import {
   SearchContextProvider,
   useSearch,
 } from '@backstage/plugin-search-react';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { TechDocsSearchResultListItem } from './TechDocsSearchResultListItem';
 

plugins/techdocs/src/search/components/TechDocsSearchResultListItem.test.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import { TechDocsSearchResultListItem } from './TechDocsSearchResultListItem';
 import { renderInTestApp } from '@backstage/test-utils';
 

plugins/techdocs/src/search/components/TechDocsSearchResultListItem.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { PropsWithChildren, ReactNode } from 'react';
+import { PropsWithChildren, ReactNode } from 'react';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
 import ListItemText from '@material-ui/core/ListItemText';
 import { makeStyles } from '@material-ui/core/styles';