chore: update react imports

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

plugins/home/src/alpha.tsx

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

plugins/home/src/assets/TemplateBackstageLogo.tsx

@@ -14,9 +14,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
-
-/** @public */
 export const TemplateBackstageLogo = (props: {
   classes: {
     svg: string;

plugins/home/src/assets/TemplateBackstageLogoIcon.tsx

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

plugins/home/src/componentRenderers/ComponentAccordion.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import { useState } from 'react';
 import { SettingsModal } from '@backstage/plugin-home-react';
 import Accordion from '@material-ui/core/Accordion';
 import AccordionDetails from '@material-ui/core/AccordionDetails';
@@ -54,8 +54,8 @@ export const ComponentAccordion = (props: {
   } = props;
 
   const classes = useStyles();
-  const [settingsIsExpanded, setSettingsIsExpanded] = React.useState(false);
-  const [isExpanded, setIsExpanded] = React.useState(expanded);
+  const [settingsIsExpanded, setSettingsIsExpanded] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(expanded);
 
   const handleOpenSettings = (e: any) => {
     e.stopPropagation();

plugins/home/src/componentRenderers/ComponentTabs/ComponentTab.tsx

@@ -14,8 +14,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
-
 export const ComponentTab = (props: {
   title: string;
   Content: () => JSX.Element;

plugins/home/src/componentRenderers/ComponentTabs/ComponentTabs.test.tsx

@@ -16,7 +16,6 @@
 
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import React from 'react';
 import { ComponentTabs } from './ComponentTabs';
 
 describe('<ComponentTabs>', () => {

plugins/home/src/componentRenderers/ComponentTabs/ComponentTabs.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import { useState } from 'react';
 import Tabs from '@material-ui/core/Tabs';
 import Tab from '@material-ui/core/Tab';
 import { InfoCard } from '@backstage/core-components';
@@ -27,7 +27,7 @@ type TabType = {
 export const ComponentTabs = (props: { title: string; tabs: TabType[] }) => {
   const { title, tabs } = props;
 
-  const [value, setValue] = React.useState(0);
+  const [value, setValue] = useState(0);
 
   const handleChange = (_event: any, newValue: number) => {
     setValue(newValue);

plugins/home/src/components/CustomHomepage/AddWidgetDialog.tsx

@@ -22,7 +22,6 @@ import DialogTitle from '@material-ui/core/DialogTitle';
 import ListItemAvatar from '@material-ui/core/ListItemAvatar';
 import AddIcon from '@material-ui/icons/Add';
 import ListItemText from '@material-ui/core/ListItemText';
-import React from 'react';
 import Typography from '@material-ui/core/Typography';
 
 interface AddWidgetDialogProps {

plugins/home/src/components/CustomHomepage/CustomHomepageButtons.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 import Button from '@material-ui/core/Button';
-import React from 'react';
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 import SaveIcon from '@material-ui/icons/Save';
 import DeleteIcon from '@material-ui/icons/Delete';

plugins/home/src/components/CustomHomepage/CustomHomepageGrid.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { useCallback, useMemo } from 'react';
+import { isValidElement, useState, useCallback, useMemo } from 'react';
 import { Layout, Layouts, Responsive, WidthProvider } from 'react-grid-layout';
 import {
   ElementCollection,
@@ -129,7 +129,7 @@ const convertConfigToDefaultWidgets = (
 ): GridWidget[] => {
   const ret = config.map((conf, i) => {
     const c = LayoutConfigurationSchema.parse(conf);
-    const name = React.isValidElement(c.component)
+    const name = isValidElement(c.component)
       ? getComponentData(c.component, 'core.extensionName')
       : (c.component as unknown as string);
     if (!name) {
@@ -212,9 +212,9 @@ export const CustomHomepageGrid = (props: CustomHomepageGridProps) => {
       : [];
   }, [props.config, availableWidgets]);
   const [widgets, setWidgets] = useHomeStorage(defaultLayout);
-  const [addWidgetDialogOpen, setAddWidgetDialogOpen] = React.useState(false);
+  const [addWidgetDialogOpen, setAddWidgetDialogOpen] = useState(false);
   const editModeOn = widgets.find(w => w.layout.isResizable) !== undefined;
-  const [editMode, setEditMode] = React.useState(editModeOn);
+  const [editMode, setEditMode] = useState(editModeOn);
   const getWidgetByName = (name: string) => {
     return availableWidgets.find(widget => widget.name === name);
   };

plugins/home/src/components/CustomHomepage/WidgetSettingsOverlay.tsx

@@ -24,12 +24,11 @@ import Tooltip from '@material-ui/core/Tooltip';
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 import DeleteIcon from '@material-ui/icons/Delete';
 import SettingsIcon from '@material-ui/icons/Settings';
+import { useState } from 'react';
+import { Widget } from './types';
 import { withTheme } from '@rjsf/core';
 import { Theme as MuiTheme } from '@rjsf/material-ui';
 import validator from '@rjsf/validator-ajv8';
-import React from 'react';
-
-import { Widget } from './types';
 
 const Form = withTheme(MuiTheme);
 
@@ -65,7 +64,7 @@ interface WidgetSettingsOverlayProps {
 export const WidgetSettingsOverlay = (props: WidgetSettingsOverlayProps) => {
   const { id, widget, settings, handleRemove, handleSettingsSave, deletable } =
     props;
-  const [settingsDialogOpen, setSettingsDialogOpen] = React.useState(false);
+  const [settingsDialogOpen, setSettingsDialogOpen] = useState(false);
   const styles = useStyles();
 
   const onClose = () => setSettingsDialogOpen(false);

plugins/home/src/components/CustomHomepage/types.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { ReactElement, ReactNode } from 'react';
+import { CSSProperties, ReactElement, ReactNode } from 'react';
 import { Layout } from 'react-grid-layout';
 import { z } from 'zod';
 import { RJSFSchema, UiSchema } from '@rjsf/utils';
@@ -82,7 +82,7 @@ export type CustomHomepageGridProps = {
   /**
    * Custom style for grid.
    */
-  style?: React.CSSProperties;
+  style?: CSSProperties;
   /**
    * Compaction type of widgets in the grid. This controls where widgets are moved in case
    * they are overlapping in the grid.

plugins/home/src/components/HomepageCompositionRoot.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { useOutlet } from 'react-router-dom';
 
 export const HomepageCompositionRoot = (props: {

plugins/home/src/components/StarredEntityListItem/StarredEntityListItem.tsx

@@ -21,7 +21,6 @@ import {
 import ListItem from '@material-ui/core/ListItem';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
 import ListItemText from '@material-ui/core/ListItemText';
-import React from 'react';
 import { Link } from 'react-router-dom';
 import { entityRouteRef } from '@backstage/plugin-catalog-react';
 import { useRouteRef } from '@backstage/core-plugin-api';

plugins/home/src/components/VisitList/ItemCategory.tsx

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

plugins/home/src/components/VisitList/ItemDetail.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import Typography from '@material-ui/core/Typography';
 import { Visit } from '../../api/VisitsApi';
 import { DateTime } from 'luxon';

plugins/home/src/components/VisitList/ItemName.tsx

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

plugins/home/src/components/VisitList/VisitList.test.tsx

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

plugins/home/src/components/VisitList/VisitList.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import { ReactElement } from 'react';
 import Collapse from '@material-ui/core/Collapse';
 import List from '@material-ui/core/List';
 import { Visit } from '../../api/VisitsApi';
@@ -41,7 +41,7 @@ export const VisitList = ({
   loading?: boolean;
   title?: string;
 }) => {
-  let listBody: React.ReactElement = <></>;
+  let listBody: ReactElement = <></>;
   if (loading) {
     listBody = (
       <VisitListSkeleton

plugins/home/src/components/VisitList/VisitListEmpty.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import Typography from '@material-ui/core/Typography';
 
 export const VisitListEmpty = () => (

plugins/home/src/components/VisitList/VisitListFew.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import Typography from '@material-ui/core/Typography';
 
 export const VisitListFew = () => (

plugins/home/src/components/VisitList/VisitListItem.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemAvatar from '@material-ui/core/ListItemAvatar';
 import ListItemText from '@material-ui/core/ListItemText';

plugins/home/src/components/VisitList/VisitListSkeleton.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import Collapse from '@material-ui/core/Collapse';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemAvatar from '@material-ui/core/ListItemAvatar';

plugins/home/src/components/VisitListener.test.tsx

@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react';
 import { TestApiProvider, renderInTestApp } from '@backstage/test-utils';
 import { Visit, visitsApiRef } from '../api';
 import { VisitListener } from './VisitListener';

plugins/home/src/components/VisitListener.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, { useEffect } from 'react';
+import { ReactNode, useEffect } from 'react';
 
 import { useLocation } from 'react-router-dom';
 
@@ -84,7 +84,7 @@ export const VisitListener = ({
   toEntityRef,
   visitName,
 }: {
-  children?: React.ReactNode;
+  children?: ReactNode;
   toEntityRef?: ({ pathname }: { pathname: string }) => string | undefined;
   visitName?: ({ pathname }: { pathname: string }) => string;
 }): JSX.Element => {

plugins/home/src/homePageComponents/CompanyLogo/CompanyLogo.stories.tsx

@@ -22,7 +22,7 @@ import { configApiRef } from '@backstage/core-plugin-api';
 import { ConfigReader } from '@backstage/core-app-api';
 import Grid from '@material-ui/core/Grid';
 import { makeStyles } from '@material-ui/core/styles';
-import React, { ComponentType, PropsWithChildren } from 'react';
+import { ComponentType, PropsWithChildren } from 'react';
 
 export default {
   title: 'Plugins/Home/Components/CompanyLogo',

plugins/home/src/homePageComponents/CompanyLogo/CompanyLogo.test.tsx

@@ -18,7 +18,6 @@ import { renderInTestApp, TestApiProvider } from '@backstage/test-utils';
 import { configApiRef } from '@backstage/core-plugin-api';
 import { ConfigReader } from '@backstage/core-app-api';
 import Typography from '@material-ui/core/Typography';
-import React from 'react';
 
 describe('<CompanyLogo>', () => {
   it('should have a fall back if logo is not provided', async () => {

plugins/home/src/homePageComponents/CompanyLogo/CompanyLogo.tsx

@@ -15,10 +15,10 @@
  */
 import Typography from '@material-ui/core/Typography';
 import { configApiRef, useApi } from '@backstage/core-plugin-api';
-import React from 'react';
+import { ReactNode } from 'react';
 
 type CompanyLogoProps = {
-  logo?: React.ReactNode;
+  logo?: ReactNode;
   className?: string;
 };
 

plugins/home/src/homePageComponents/FeaturedDocsCard/Content.test.tsx

@@ -15,7 +15,7 @@
  */
 
 import { Content } from './Content';
-import React from 'react';
+import { ReactNode } from 'react';
 import { catalogApiRef, entityRouteRef } from '@backstage/plugin-catalog-react';
 import { renderInTestApp, TestApiProvider } from '@backstage/test-utils';
 import { catalogApiMock } from '@backstage/plugin-catalog-react/testUtils';
@@ -35,7 +35,7 @@ const docsEntities = [
 ];
 
 describe('<FeaturedDocsCard />', () => {
-  const Wrapper = ({ children }: { children?: React.ReactNode }) => (
+  const Wrapper = ({ children }: { children?: ReactNode }) => (
     <TestApiProvider
       apis={[[catalogApiRef, catalogApiMock({ entities: docsEntities })]]}
     >

plugins/home/src/homePageComponents/FeaturedDocsCard/Content.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import { JSX } from 'react';
 import useAsync from 'react-use/esm/useAsync';
 import {
   LinkButton,
@@ -44,7 +44,7 @@ export type FeaturedDocsCardProps = {
   /** The entity filter used to display only the intended item/s */
   filter: EntityFilterQuery;
   /** An optional ReactNode for empty states */
-  emptyState?: React.JSX.Element;
+  emptyState?: JSX.Element;
   /** An optional linkDestination to set for the Featured Doc  */
   linkDestination?: string;
   /** An optional limit to set for link destination  */

plugins/home/src/homePageComponents/FeaturedDocsCard/FeaturedDocsCard.stories.tsx

@@ -15,7 +15,7 @@
  */
 
 import { FeaturedDocsCard } from '../../plugin';
-import React, { ComponentType, PropsWithChildren } from 'react';
+import { ComponentType, PropsWithChildren } from 'react';
 import { wrapInTestApp, TestApiProvider } from '@backstage/test-utils';
 import { catalogApiRef, entityRouteRef } from '@backstage/plugin-catalog-react';
 import { catalogApiMock } from '@backstage/plugin-catalog-react/testUtils';

plugins/home/src/homePageComponents/HeaderWorldClock/HeaderWorldClock.stories.tsx

@@ -16,7 +16,7 @@
 
 import { Header } from '@backstage/core-components';
 import { wrapInTestApp } from '@backstage/test-utils';
-import React, { ComponentType, PropsWithChildren } from 'react';
+import { ComponentType, PropsWithChildren } from 'react';
 import { ClockConfig, HeaderWorldClock } from './HeaderWorldClock';
 
 export default {

plugins/home/src/homePageComponents/HeaderWorldClock/HeaderWorldClock.test.tsx

@@ -16,7 +16,6 @@
 
 import { renderInTestApp } from '@backstage/test-utils';
 import { HeaderWorldClock, ClockConfig } from './HeaderWorldClock';
-import React from 'react';
 
 describe('HeaderWorldClock with valid Time Zones', () => {
   it('displays Time Zones as expected', async () => {

plugins/home/src/homePageComponents/HeaderWorldClock/HeaderWorldClock.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import { useState, useEffect } from 'react';
 import { HeaderLabel } from '@backstage/core-components';
 
 const timeFormat: Intl.DateTimeFormatOptions = {
@@ -117,9 +117,9 @@ export const HeaderWorldClock = (props: {
   const { clockConfigs, customTimeFormat } = props;
 
   const defaultTimes: TimeObj[] = [];
-  const [clocks, setTimes] = React.useState(defaultTimes);
+  const [clocks, setTimes] = useState(defaultTimes);
 
-  React.useEffect(() => {
+  useEffect(() => {
     setTimes(getTimes(clockConfigs, customTimeFormat));
 
     const intervalId = setInterval(() => {

plugins/home/src/homePageComponents/QuickStart/Content.test.tsx

@@ -15,7 +15,6 @@
  */
 
 import { Content } from './Content';
-import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { renderInTestApp } from '@backstage/test-utils';
 import ContentImage from './static/backstageSystemModel.png';

plugins/home/src/homePageComponents/QuickStart/Content.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import { JSX } from 'react';
 import { Link } from '@backstage/core-components';
 import Typography from '@material-ui/core/Typography';
 import Grid from '@material-ui/core/Grid';
@@ -28,19 +28,19 @@ import { useStyles } from './styles';
  */
 export type QuickStartCardProps = {
   /** The modal link title */
-  modalTitle?: string | React.JSX.Element;
+  modalTitle?: string | JSX.Element;
   /** The link to docs title */
   docsLinkTitle?: string;
   /** The link to docs */
   docsLink?: string;
   /** The video to play on the card */
-  video?: React.JSX.Element;
+  video?: JSX.Element;
   /** A quickstart image to display on the card */
-  image: React.JSX.Element;
+  image: JSX.Element;
   /** The card description*/
   cardDescription?: string;
   /** A component used to download a quickStart image*/
-  downloadImage?: React.JSX.Element;
+  downloadImage?: JSX.Element;
 };
 
 /**

plugins/home/src/homePageComponents/QuickStart/ContentModal.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { useState } from 'react';
+import { JSX, useState } from 'react';
 import { Link } from '@backstage/core-components';
 import Modal from '@material-ui/core/Modal';
 import Box from '@material-ui/core/Box';
@@ -22,8 +22,8 @@ import Box from '@material-ui/core/Box';
 import { useStyles } from './styles';
 
 export type ContentModalProps = {
-  modalContent: React.JSX.Element;
-  linkContent: string | React.JSX.Element;
+  modalContent: JSX.Element;
+  linkContent: string | JSX.Element;
 };
 
 export const ContentModal = (props: ContentModalProps) => {

plugins/home/src/homePageComponents/QuickStart/QuickStart.stories.tsx

@@ -15,7 +15,7 @@
  */
 
 import { QuickStartCard } from '../../plugin';
-import React, { ComponentType, PropsWithChildren } from 'react';
+import { ComponentType, PropsWithChildren } from 'react';
 import { wrapInTestApp } from '@backstage/test-utils';
 import Grid from '@material-ui/core/Grid';
 import ContentImage from './static/backstageSystemModel.png';

plugins/home/src/homePageComponents/RandomJoke/Actions.tsx

@@ -14,8 +14,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
-
 import Button from '@material-ui/core/Button';
 import { useRandomJoke } from './Context';
 

plugins/home/src/homePageComponents/RandomJoke/Content.tsx

@@ -15,7 +15,6 @@
  */
 
 import Typography from '@material-ui/core/Typography';
-import React from 'react';
 import { useRandomJoke } from './Context';
 
 export const Content = () => {

plugins/home/src/homePageComponents/RandomJoke/Context.tsx

@@ -14,7 +14,13 @@
  * limitations under the License.
  */
 
-import React, { createContext } from 'react';
+import {
+  useState,
+  useCallback,
+  useEffect,
+  useContext,
+  createContext,
+} from 'react';
 
 export type JokeType = 'any' | 'programming';
 
@@ -48,16 +54,16 @@ export const ContextProvider = (props: {
 }) => {
   const { children, defaultCategory } = props;
 
-  const [loading, setLoading] = React.useState(true);
-  const [joke, setJoke] = React.useState<Joke>({
+  const [loading, setLoading] = useState(true);
+  const [joke, setJoke] = useState<Joke>({
     setup: '',
     punchline: '',
   });
-  const [type, setType] = React.useState<JokeType>(
+  const [type, setType] = useState<JokeType>(
     defaultCategory || ('programming' as JokeType),
   );
 
-  const rerollJoke = React.useCallback(() => {
+  const rerollJoke = useCallback(() => {
     setLoading(true);
     getNewJoke(type).then(newJoke => setJoke(newJoke));
   }, [type]);
@@ -66,11 +72,11 @@ export const ContextProvider = (props: {
     setType(newType);
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     setLoading(false);
   }, [joke]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     rerollJoke();
   }, [rerollJoke]);
 
@@ -86,7 +92,7 @@ export const ContextProvider = (props: {
 };
 
 export const useRandomJoke = () => {
-  const value = React.useContext(Context);
+  const value = useContext(Context);
 
   if (value === undefined) {
     throw new Error('useRandomJoke must be used within a RandomJokeProvider');

plugins/home/src/homePageComponents/RandomJoke/Settings.tsx

@@ -18,7 +18,6 @@ import FormLabel from '@material-ui/core/FormLabel';
 import RadioGroup from '@material-ui/core/RadioGroup';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import Radio from '@material-ui/core/Radio';
-import React from 'react';
 import { useRandomJoke, JokeType } from './Context';
 import upperFirst from 'lodash/upperFirst';
 

plugins/home/src/homePageComponents/StarredEntities/Content.test.tsx

@@ -22,7 +22,6 @@ import {
   entityRouteRef,
 } from '@backstage/plugin-catalog-react';
 import { catalogApiMock } from '@backstage/plugin-catalog-react/testUtils';
-import React from 'react';
 import { Content } from './Content';
 
 const entities = [

plugins/home/src/homePageComponents/StarredEntities/Content.tsx

@@ -25,7 +25,7 @@ import List from '@material-ui/core/List';
 import Typography from '@material-ui/core/Typography';
 import Tabs from '@material-ui/core/Tabs';
 import Tab from '@material-ui/core/Tab';
-import React from 'react';
+import { ReactNode, useState } from 'react';
 import useAsync from 'react-use/esm/useAsync';
 import { StarredEntityListItem } from '../../components/StarredEntityListItem/StarredEntityListItem';
 import { makeStyles } from '@material-ui/core/styles';
@@ -46,7 +46,7 @@ const useStyles = makeStyles(theme => ({
  * @public
  */
 export type StarredEntitiesProps = {
-  noStarredEntitiesMessage?: React.ReactNode | undefined;
+  noStarredEntitiesMessage?: ReactNode | undefined;
   groupByKind?: boolean;
 };
 
@@ -62,7 +62,7 @@ export const Content = ({
   const classes = useStyles();
   const catalogApi = useApi(catalogApiRef);
   const { starredEntities, toggleStarredEntity } = useStarredEntities();
-  const [activeTab, setActiveTab] = React.useState(0);
+  const [activeTab, setActiveTab] = useState(0);
 
   // Grab starred entities from catalog to ensure they still exist and also retrieve display titles
   const entities = useAsync(async () => {

plugins/home/src/homePageComponents/StarredEntities/StarredEntities.stories.tsx

@@ -24,7 +24,7 @@ import {
 } from '@backstage/plugin-catalog-react';
 import { catalogApiMock } from '@backstage/plugin-catalog-react/testUtils';
 import Grid from '@material-ui/core/Grid';
-import React, { ComponentType, PropsWithChildren } from 'react';
+import { ComponentType, PropsWithChildren } from 'react';
 
 const starredEntitiesApi = new MockStarredEntitiesApi();
 starredEntitiesApi.toggleStarred('component:default/example-starred-entity');

plugins/home/src/homePageComponents/Toolkit/Content.test.tsx

@@ -15,7 +15,6 @@
  */
 
 import { renderInTestApp } from '@backstage/test-utils';
-import React from 'react';
 import { Content } from './Content';
 import { ContextProvider } from './Context';
 

plugins/home/src/homePageComponents/Toolkit/Content.tsx

@@ -19,7 +19,6 @@ import List from '@material-ui/core/List';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
 import ListItemText from '@material-ui/core/ListItemText';
 import { makeStyles } from '@material-ui/core/styles';
-import React from 'react';
 import { useToolkit, Tool } from './Context';
 
 const useStyles = makeStyles(theme => ({

plugins/home/src/homePageComponents/Toolkit/Context.tsx

@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import React, { createContext } from 'react';
+import { ReactNode, useState, useContext, createContext } from 'react';
 
 /** @public */
 export type Tool = {
   label: string;
   url: string;
-  icon: React.ReactNode;
+  icon: ReactNode;
 };
 
 type ToolkitContextValue = {
@@ -35,7 +35,7 @@ export const ContextProvider = (props: {
 }) => {
   const { children, tools } = props;
 
-  const [toolsValue, _setTools] = React.useState(tools);
+  const [toolsValue, _setTools] = useState(tools);
 
   const value: ToolkitContextValue = {
     tools: toolsValue,
@@ -45,7 +45,7 @@ export const ContextProvider = (props: {
 };
 
 export const useToolkit = () => {
-  const value = React.useContext(Context);
+  const value = useContext(Context);
   return value;
 };
 

plugins/home/src/homePageComponents/Toolkit/Toolkit.stories.tsx

@@ -17,7 +17,7 @@
 import { InfoCard } from '@backstage/core-components';
 import { wrapInTestApp } from '@backstage/test-utils';
 import Grid from '@material-ui/core/Grid';
-import React, { ComponentType, PropsWithChildren } from 'react';
+import { ComponentType, PropsWithChildren } from 'react';
 import { ComponentAccordion } from '../../componentRenderers';
 import { HomePageToolkit } from '../../plugin';
 import { TemplateBackstageLogoIcon } from '../../assets';

plugins/home/src/homePageComponents/VisitedByType/Actions.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import Button from '@material-ui/core/Button';
 import { useContext } from './Context';
 

plugins/home/src/homePageComponents/VisitedByType/Content.test.tsx

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

plugins/home/src/homePageComponents/VisitedByType/Content.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { createFilterByQueryParamFromConfig } from '../../api/config';
 import { VisitedByType } from './VisitedByType';
 import { Visit, visitsApiRef } from '../../api';

plugins/home/src/homePageComponents/VisitedByType/Context.tsx

@@ -14,7 +14,14 @@
  * limitations under the License.
  */
 
-import React, { Dispatch, SetStateAction, createContext, useMemo } from 'react';
+import {
+  Dispatch,
+  SetStateAction,
+  createContext,
+  useMemo,
+  useState,
+  useContext as useReactContext,
+} from 'react';
 import { Visit } from '../../api/VisitsApi';
 import { VisitedByTypeKind } from './Content';
 
@@ -72,7 +79,7 @@ const getFilteredSet =
     }));
 
 export const ContextProvider = ({ children }: { children: JSX.Element }) => {
-  const [context, setContext] = React.useState<ContextValueOnly>(
+  const [context, setContext] = useState<ContextValueOnly>(
     defaultContextValueOnly,
   );
   const {
@@ -109,7 +116,7 @@ export const ContextProvider = ({ children }: { children: JSX.Element }) => {
 };
 
 export const useContext = () => {
-  const value = React.useContext(Context);
+  const value = useReactContext(Context);
 
   if (value === undefined)
     throw new Error(

plugins/home/src/homePageComponents/VisitedByType/HomePageVisitedByType.stories.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import { TestApiProvider, wrapInTestApp } from '@backstage/test-utils';
 import { ComponentType, PropsWithChildren } from 'react';
 import Grid from '@material-ui/core/Grid';

plugins/home/src/homePageComponents/VisitedByType/RecentlyVisited.tsx

@@ -17,7 +17,6 @@
 export { Actions } from './Actions';
 export { ContextProvider } from './Context';
 export type { VisitedByTypeProps, VisitedByTypeKind } from './Content';
-import React from 'react';
 import { Content, VisitedByTypeProps } from './Content';
 
 const RecentlyVisitedContent = (props: Partial<VisitedByTypeProps>) => (

plugins/home/src/homePageComponents/VisitedByType/TopVisited.tsx

@@ -17,7 +17,6 @@
 export { Actions } from './Actions';
 export { ContextProvider } from './Context';
 export type { VisitedByTypeProps, VisitedByTypeKind } from './Content';
-import React from 'react';
 import { Content, VisitedByTypeProps } from './Content';
 
 const TopVisitedContent = (props: Partial<VisitedByTypeProps>) => (

plugins/home/src/homePageComponents/VisitedByType/VisitedByType.test.tsx

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

plugins/home/src/homePageComponents/VisitedByType/VisitedByType.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import { VisitList } from '../../components/VisitList';
 import { useContext } from './Context';
 

plugins/home/src/homePageComponents/WelcomeTitle/WelcomeTitle.stories.tsx

@@ -16,7 +16,7 @@
 
 import { Header } from '@backstage/core-components';
 import { wrapInTestApp } from '@backstage/test-utils';
-import React, { ComponentType, PropsWithChildren } from 'react';
+import { ComponentType, PropsWithChildren } from 'react';
 import { WelcomeTitle } from './WelcomeTitle';
 
 export default {

plugins/home/src/homePageComponents/WelcomeTitle/WelcomeTitle.test.tsx

@@ -15,7 +15,6 @@
  */
 
 import { renderInTestApp } from '@backstage/test-utils';
-import React from 'react';
 import { WelcomeTitle } from './WelcomeTitle';
 
 describe('<WelcomeTitle>', () => {

plugins/home/src/homePageComponents/WelcomeTitle/WelcomeTitle.tsx

@@ -20,7 +20,7 @@ import {
 } from '@backstage/core-plugin-api';
 import Tooltip from '@material-ui/core/Tooltip';
 import Typography from '@material-ui/core/Typography';
-import React, { useEffect, useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import useAsync from 'react-use/esm/useAsync';
 import { getTimeBasedGreeting } from './timeUtil';