Use esm exports from react-use library

Signed-off-by: Tomasz Szuba <tszuba@box.com>
2024-03-15 10:23:57 +01:00
parent 7825762f90
commit e8f026a300
268 changed files with 379 additions and 293 deletions
@@ -0,0 +1,85 @@
+---
+'@backstage/plugin-catalog-unprocessed-entities': patch
+'@backstage/plugin-git-release-manager': patch
+'@backstage/plugin-github-deployments': patch
+'@backstage/plugin-kubernetes-cluster': patch
+'@backstage/plugin-microsoft-calendar': patch
+'@backstage/plugin-newrelic-dashboard': patch
+'@backstage/plugin-entity-validation': patch
+'@internal/plugin-todo-list': patch
+'@backstage/core-components': patch
+'@backstage/plugin-kubernetes-react': patch
+'@backstage/plugin-scaffolder-react': patch
+'@backstage/plugin-cicd-statistics': patch
+'@backstage/plugin-entity-feedback': patch
+'@backstage/plugin-gitops-profiles': patch
+'@backstage/plugin-graphql-voyager': patch
+'@backstage/plugin-apache-airflow': patch
+'@backstage/plugin-catalog-import': patch
+'@backstage/plugin-github-actions': patch
+'@backstage/plugin-octopus-deploy': patch
+'@backstage/plugin-splunk-on-call': patch
+'@backstage/plugin-stack-overflow': patch
+'@backstage/plugin-techdocs-react': patch
+'@backstage/core-app-api': patch
+'@backstage/plugin-catalog-graph': patch
+'@backstage/plugin-catalog-react': patch
+'@backstage/plugin-code-coverage': patch
+'@backstage/plugin-config-schema': patch
+'@backstage/plugin-cost-insights': patch
+'@backstage/plugin-github-issues': patch
+'@backstage/plugin-notifications': patch
+'@backstage/plugin-tech-insights': patch
+'@backstage/plugin-user-settings': patch
+'@backstage/plugin-azure-devops': patch
+'@backstage/plugin-code-climate': patch
+'@backstage/plugin-search-react': patch
+'@backstage/plugin-azure-sites': patch
+'@backstage/plugin-firehydrant': patch
+'@backstage/dev-utils': patch
+'@backstage/plugin-cloudbuild': patch
+'@backstage/plugin-lighthouse': patch
+'@backstage/plugin-scaffolder': patch
+'@backstage/plugin-stackstorm': patch
+'@backstage/plugin-tech-radar': patch
+'@backstage/plugin-codescene': patch
+'@backstage/plugin-dynatrace': patch
+'@backstage/plugin-gcalendar': patch
+'@backstage/plugin-org-react': patch
+'@backstage/plugin-pagerduty': patch
+'@backstage/plugin-shortcuts': patch
+'@backstage/plugin-sonarqube': patch
+'@backstage/plugin-xcmetrics': patch
+'@backstage/plugin-airbrake': patch
+'@backstage/plugin-circleci': patch
+'@backstage/plugin-devtools': patch
+'@backstage/plugin-graphiql': patch
+'@backstage/plugin-linguist': patch
+'@backstage/plugin-newrelic': patch
+'@backstage/plugin-periskop': patch
+'@backstage/plugin-playlist': patch
+'@backstage/plugin-puppetdb': patch
+'@backstage/plugin-techdocs': patch
+'@backstage/plugin-bitrise': patch
+'@backstage/plugin-catalog': patch
+'@backstage/plugin-explore': patch
+'@backstage/plugin-jenkins': patch
+'@backstage/plugin-rollbar': patch
+'@backstage/plugin-allure': patch
+'@backstage/plugin-badges': patch
+'@backstage/plugin-bazaar': patch
+'@backstage/plugin-search': patch
+'@backstage/plugin-sentry': patch
+'@backstage/plugin-fossa': patch
+'@backstage/plugin-ilert': patch
+'@backstage/plugin-kafka': patch
+'@backstage/plugin-nomad': patch
+'@backstage/plugin-vault': patch
+'example-app': patch
+'@backstage/plugin-gocd': patch
+'@backstage/plugin-home': patch
+'@backstage/plugin-adr': patch
+'@backstage/plugin-org': patch
+---
+
+Use esm exports of react-use library
@@ -114,6 +114,7 @@ env
 Env
 esbuild
 eslint
+esm
 ESModule
 ESModules
 etag
@@ -24,7 +24,7 @@ import {
  ListItemSecondaryAction,
  Switch,
 } from '@material-ui/core';
-import useLocalStorage from 'react-use/lib/useLocalStorage';
+import useLocalStorage from 'react-use/esm/useLocalStorage';

 export function AdvancedSettings() {
  const [value, setValue] = useLocalStorage<'on' | 'off'>(
@@ -22,7 +22,7 @@ import React, {
  useMemo,
  useRef,
 } from 'react';
-import useAsync from 'react-use/lib/useAsync';
+import useAsync from 'react-use/esm/useAsync';
 import {
  ApiProvider,
  AppThemeSelector,
@@ -28,7 +28,7 @@ import { MemoryRouter } from 'react-router-dom';
 import { AppIdentityProxy } from '../apis/implementations/IdentityApi/AppIdentityProxy';
 import { render, screen } from '@testing-library/react';
 import { AppRouter } from './AppRouter';
-import useAsync from 'react-use/lib/useAsync';
+import useAsync from 'react-use/esm/useAsync';
 import { AppContextProvider } from './AppContext';
 import { TestApiProvider } from '@backstage/test-utils';
 import { ConfigReader } from '@backstage/config';
@@ -16,7 +16,7 @@

 import React, { useMemo, useEffect, useState, PropsWithChildren } from 'react';
 import { useApi, appThemeApiRef, AppTheme } from '@backstage/core-plugin-api';
-import useObservable from 'react-use/lib/useObservable';
+import useObservable from 'react-use/esm/useObservable';

 // This tries to find the most accurate match, but also falls back to less
 // accurate results in order to avoid errors.
@@ -19,7 +19,7 @@ import { act, fireEvent } from '@testing-library/react';
 import { renderInTestApp, TestApiProvider } from '@backstage/test-utils';
 import { CopyTextButton } from './CopyTextButton';
 import { errorApiRef } from '@backstage/core-plugin-api';
-import useCopyToClipboard from 'react-use/lib/useCopyToClipboard';
+import useCopyToClipboard from 'react-use/esm/useCopyToClipboard';

 jest.mock('popper.js', () => {
  const PopperJS = jest.requireActual('popper.js');
@@ -19,7 +19,7 @@ import IconButton from '@material-ui/core/IconButton';
 import Tooltip from '@material-ui/core/Tooltip';
 import CopyIcon from '@material-ui/icons/FileCopy';
 import React, { MouseEventHandler, useEffect, useState } from 'react';
-import useCopyToClipboard from 'react-use/lib/useCopyToClipboard';
+import useCopyToClipboard from 'react-use/esm/useCopyToClipboard';
 import { coreComponentsTranslationRef } from '../../translation';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';

@@ -16,7 +16,7 @@

 import React, { ReactNode, useState, useEffect } from 'react';
 import { useApi, storageApiRef } from '@backstage/core-plugin-api';
-import useObservable from 'react-use/lib/useObservable';
+import useObservable from 'react-use/esm/useObservable';
 import classNames from 'classnames';
 import { makeStyles } from '@material-ui/core/styles';
 import Snackbar from '@material-ui/core/Snackbar';
@@ -16,7 +16,7 @@

 import { errorApiRef, useApi } from '@backstage/core-plugin-api';
 import { useEffect, useState } from 'react';
-import useCopyToClipboard from 'react-use/lib/useCopyToClipboard';
+import useCopyToClipboard from 'react-use/esm/useCopyToClipboard';
 import { AnsiLine } from './AnsiProcessor';

 export function useLogViewerSelection(lines: AnsiLine[]) {
@@ -22,7 +22,7 @@ import DialogTitle from '@material-ui/core/DialogTitle';
 import List from '@material-ui/core/List';
 import Button from '@material-ui/core/Button';
 import React, { useMemo, useState } from 'react';
-import useObservable from 'react-use/lib/useObservable';
+import useObservable from 'react-use/esm/useObservable';
 import LoginRequestListItem from './LoginRequestListItem';
 import {
  useApi,
@@ -23,7 +23,7 @@ import { ProviderComponent, ProviderLoader, SignInProvider } from './types';
 import { ProxiedSignInIdentity } from '../ProxiedSignInPage/ProxiedSignInIdentity';
 import { discoveryApiRef, useApi } from '@backstage/core-plugin-api';
 import { GuestUserIdentity } from './GuestUserIdentity';
-import useLocalStorage from 'react-use/lib/useLocalStorage';
+import useLocalStorage from 'react-use/esm/useLocalStorage';
 import { ResponseError } from '@backstage/errors';
 import { coreComponentsTranslationRef } from '../../translation';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
@@ -18,7 +18,7 @@ import { appThemeApiRef, useApi } from '@backstage/core-plugin-api';
 import { ListItemIcon, ListItemText, Menu, MenuItem } from '@material-ui/core';
 import AutoIcon from '@material-ui/icons/BrightnessAuto';
 import React, { cloneElement, useCallback, useState } from 'react';
-import useObservable from 'react-use/lib/useObservable';
+import useObservable from 'react-use/esm/useObservable';

 type ThemeIconProps = {
  active?: boolean;
@@ -29,7 +29,7 @@ import { useEntity } from '@backstage/plugin-catalog-react';
 import { adrDecoratorFactories } from './decorators';
 import { AdrContentDecorator } from './types';
 import { adrApiRef } from '../../api';
-import useAsync from 'react-use/lib/useAsync';
+import useAsync from 'react-use/esm/useAsync';

 /**
 * Component to fetch and render an ADR.
@@ -16,7 +16,7 @@

 import React, { useEffect, useState } from 'react';
 import { Link, useSearchParams } from 'react-router-dom';
-import useAsync from 'react-use/lib/useAsync';
+import useAsync from 'react-use/esm/useAsync';

 import groupBy from 'lodash/groupBy';

@@ -26,7 +26,7 @@ import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
 import { makeStyles } from '@material-ui/core/styles';
 import React from 'react';
-import useAsync from 'react-use/lib/useAsync';
+import useAsync from 'react-use/esm/useAsync';
 import { airbrakeApiRef } from '../../api';
 import { MissingAnnotationEmptyState } from '@backstage/plugin-catalog-react';
 import { AIRBRAKE_PROJECT_ID_ANNOTATION, useProjectId } from '../useProjectId';
@@ -26,7 +26,7 @@ import {
  getAllureProjectId,
 } from '../annotationHelpers';
 import { Progress } from '@backstage/core-components';
-import useAsync from 'react-use/lib/useAsync';
+import useAsync from 'react-use/esm/useAsync';
 import { Entity } from '@backstage/catalog-model';

 const AllureReport = (props: { entity: Entity }) => {
@@ -33,7 +33,7 @@ import Typography from '@material-ui/core/Typography';
 import OpenInBrowserIcon from '@material-ui/icons/OpenInBrowser';
 import Alert from '@material-ui/lab/Alert';
 import React, { useEffect, useState } from 'react';
-import useAsync from 'react-use/lib/useAsync';
+import useAsync from 'react-use/esm/useAsync';
 import { apacheAirflowApiRef } from '../../api';
 import { Dag } from '../../api/types';
 import { ScheduleIntervalLabel } from '../ScheduleIntervalLabel';
@@ -15,7 +15,7 @@
 */
 import React from 'react';
 import { apacheAirflowApiRef } from '../../api';
-import useAsync from 'react-use/lib/useAsync';
+import useAsync from 'react-use/esm/useAsync';
 import { DagRun } from '../../api/types/Dags';
 import { useApi } from '@backstage/core-plugin-api';
 import Box from '@material-ui/core/Box';
@@ -22,7 +22,7 @@ import {
 import { useApi } from '@backstage/core-plugin-api';
 import Alert from '@material-ui/lab/Alert';
 import React from 'react';
-import useAsync from 'react-use/lib/useAsync';
+import useAsync from 'react-use/esm/useAsync';
 import { apacheAirflowApiRef } from '../../api';
 import { InstanceStatus } from '../../api/types';

@@ -22,7 +22,7 @@ import {
 import { useApi } from '@backstage/core-plugin-api';
 import Alert from '@material-ui/lab/Alert';
 import React from 'react';
-import useAsync from 'react-use/lib/useAsync';
+import useAsync from 'react-use/esm/useAsync';
 import { apacheAirflowApiRef } from '../../api';
 import { InstanceVersion } from '../../api/types';

@@ -17,7 +17,7 @@
 import { Team } from '@backstage/plugin-azure-devops-common';
 import { azureDevOpsApiRef } from '../api';
 import { useApi } from '@backstage/core-plugin-api';
-import useAsync from 'react-use/lib/useAsync';
+import useAsync from 'react-use/esm/useAsync';

 export function useAllTeams(): {
  teams?: Team[];
@@ -22,7 +22,7 @@ import {

 import { azureDevOpsApiRef } from '../api';
 import { useApi } from '@backstage/core-plugin-api';
-import useAsync from 'react-use/lib/useAsync';
+import useAsync from 'react-use/esm/useAsync';
 import { getAnnotationValuesFromEntity } from '../utils';
 import { Entity, stringifyEntityRef } from '@backstage/catalog-model';

@@ -15,8 +15,8 @@
 */

 import { errorApiRef, useApi } from '@backstage/core-plugin-api';
-import useAsyncRetry from 'react-use/lib/useAsyncRetry';
-import useInterval from 'react-use/lib/useInterval';
+import useAsyncRetry from 'react-use/esm/useAsyncRetry';
+import useInterval from 'react-use/esm/useInterval';

 import { DashboardPullRequest } from '@backstage/plugin-azure-devops-common';
 import { azureDevOpsApiRef } from '../api';
@@ -19,7 +19,7 @@ import { GitTag } from '@backstage/plugin-azure-devops-common';
 import { Entity, stringifyEntityRef } from '@backstage/catalog-model';
 import { azureDevOpsApiRef } from '../api';
 import { useApi } from '@backstage/core-plugin-api';
-import useAsync from 'react-use/lib/useAsync';
+import useAsync from 'react-use/esm/useAsync';
 import { getAnnotationValuesFromEntity } from '../utils';

 export function useGitTags(entity: Entity): {
@@ -24,7 +24,7 @@ import {
 import { Entity, stringifyEntityRef } from '@backstage/catalog-model';
 import { azureDevOpsApiRef } from '../api';
 import { useApi } from '@backstage/core-plugin-api';
-import useAsync from 'react-use/lib/useAsync';
+import useAsync from 'react-use/esm/useAsync';
 import { getAnnotationValuesFromEntity } from '../utils';

 export function usePullRequests(
@@ -19,7 +19,7 @@ import { Readme } from '@backstage/plugin-azure-devops-common';
 import { Entity, stringifyEntityRef } from '@backstage/catalog-model';
 import { azureDevOpsApiRef } from '../api';
 import { useApi } from '@backstage/core-plugin-api';
-import useAsync from 'react-use/lib/useAsync';
+import useAsync from 'react-use/esm/useAsync';
 import { getAnnotationValuesFromEntity } from '../utils';

 export function useReadme(entity: Entity): {
@@ -15,7 +15,7 @@
 */

 import { identityApiRef, useApi } from '@backstage/core-plugin-api';
-import useAsync from 'react-use/lib/useAsync';
+import useAsync from 'react-use/esm/useAsync';

 export function useUserEmail(): string | undefined {
  const identityApi = useApi(identityApiRef);
@@ -16,7 +16,7 @@

 import { azureDevOpsApiRef } from '../api';
 import { useApi } from '@backstage/core-plugin-api';
-import useAsync from 'react-use/lib/useAsync';
+import useAsync from 'react-use/esm/useAsync';

 export function useUserTeamIds(userId: string | undefined): {
  teamIds?: string[];
@@ -14,8 +14,8 @@
 * limitations under the License.
 */

-import useInterval from 'react-use/lib/useInterval';
-import useAsyncRetry from 'react-use/lib/useAsyncRetry';
+import useInterval from 'react-use/esm/useInterval';
+import useAsyncRetry from 'react-use/esm/useAsyncRetry';
 import { useApi, errorApiRef } from '@backstage/core-plugin-api';
 import { AzureSiteListResponse } from '@backstage/plugin-azure-sites-common';
 import { azureSiteApiRef } from '../api';
@@ -25,7 +25,7 @@ import DialogTitle from '@material-ui/core/DialogTitle';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
 import { useTheme } from '@material-ui/core/styles';
 import React from 'react';
-import useAsync from 'react-use/lib/useAsync';
+import useAsync from 'react-use/esm/useAsync';
 import { badgesApiRef } from '../api';

 import {
@@ -16,7 +16,7 @@

 import React, { useEffect, useState } from 'react';
 import { ProjectPreview } from '../ProjectPreview/ProjectPreview';
-import useAsyncFn from 'react-use/lib/useAsyncFn';
+import useAsyncFn from 'react-use/esm/useAsyncFn';
 import { Entity, stringifyEntityRef } from '@backstage/catalog-model';
 import { useApi, useRouteRef } from '@backstage/core-plugin-api';
 import { catalogApiRef } from '@backstage/plugin-catalog-react';
@@ -15,7 +15,7 @@
 */

 import React, { useState, useEffect } from 'react';
-import useAsyncFn from 'react-use/lib/useAsyncFn';
+import useAsyncFn from 'react-use/esm/useAsyncFn';
 import { useApi } from '@backstage/core-plugin-api';
 import { stringifyEntityRef } from '@backstage/catalog-model';
 import { useEntity } from '@backstage/plugin-catalog-react';
@@ -35,7 +35,7 @@ import { useApi, identityApiRef } from '@backstage/core-plugin-api';
 import { BazaarProject, Member } from '../../types';
 import { bazaarApiRef } from '../../api';
 import Alert from '@material-ui/lab/Alert';
-import useAsyncFn from 'react-use/lib/useAsyncFn';
+import useAsyncFn from 'react-use/esm/useAsyncFn';
 import ExitToAppIcon from '@material-ui/icons/ExitToApp';
 import { parseEntityRef } from '@backstage/catalog-model';
 import { ConfirmationDialog } from '../ConfirmationDialog';
@@ -44,7 +44,7 @@ import {
 import { Member, BazaarProject } from '../../types';
 import { bazaarApiRef } from '../../api';
 import Alert from '@material-ui/lab/Alert';
-import useAsyncFn from 'react-use/lib/useAsyncFn';
+import useAsyncFn from 'react-use/esm/useAsyncFn';
 import { catalogApiRef, entityRouteRef } from '@backstage/plugin-catalog-react';

 import {
@@ -20,7 +20,7 @@ import { AddProjectDialog } from '../AddProjectDialog';
 import { ProjectPreview } from '../ProjectPreview/ProjectPreview';
 import Button from '@material-ui/core/Button';
 import { makeStyles } from '@material-ui/core/styles';
-import useAsyncFn from 'react-use/lib/useAsyncFn';
+import useAsyncFn from 'react-use/esm/useAsyncFn';
 import { Entity, stringifyEntityRef } from '@backstage/catalog-model';
 import { useApi } from '@backstage/core-plugin-api';
 import { catalogApiRef } from '@backstage/plugin-catalog-react';
@@ -21,7 +21,7 @@ import {
 } from '@backstage/plugin-catalog-react';
 import React, { useState } from 'react';
 import { useBitriseBuildWorkflows } from '../../hooks/useBitriseBuildWorkflows';
-import { AsyncState } from 'react-use/lib/useAsync';
+import { AsyncState } from 'react-use/esm/useAsync';
 import { BitriseBuildsTable } from '../BitriseBuildsTableComponent';
 import { Item, Select } from '../Select';
 import { Content, ContentHeader, Page } from '@backstage/core-components';
@@ -14,7 +14,7 @@
 * limitations under the License.
 */

-import useAsync from 'react-use/lib/useAsync';
+import useAsync from 'react-use/esm/useAsync';
 import { BitriseBuildArtifactDetails } from '../api/bitriseApi.model';
 import { bitriseApiRef } from '../plugin';
 import { useApi } from '@backstage/core-plugin-api';
@@ -14,7 +14,7 @@
 * limitations under the License.
 */

-import useAsync from 'react-use/lib/useAsync';
+import useAsync from 'react-use/esm/useAsync';
 import { BitriseBuildArtifact } from '../api/bitriseApi.model';
 import { bitriseApiRef } from '../plugin';
 import { useApi } from '@backstage/core-plugin-api';
@@ -14,7 +14,7 @@
 * limitations under the License.
 */

-import useAsync, { AsyncState } from 'react-use/lib/useAsync';
+import useAsync, { AsyncState } from 'react-use/esm/useAsync';
 import { bitriseApiRef } from '../plugin';
 import { BitriseApp } from '../api/bitriseApi.model';
 import { useApi } from '@backstage/core-plugin-api';
@@ -14,7 +14,7 @@
 * limitations under the License.
 */

-import useAsync, { AsyncState } from 'react-use/lib/useAsync';
+import useAsync, { AsyncState } from 'react-use/esm/useAsync';
 import {
  BitriseApp,
  BitriseBuildListResponse,
@@ -26,7 +26,7 @@ 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 useAsync from 'react-use/lib/useAsync';
+import useAsync from 'react-use/esm/useAsync';

 const useStyles = makeStyles(
  {
@@ -28,7 +28,7 @@ import {
  useState,
 } from 'react';
 import { useLocation } from 'react-router-dom';
-import usePrevious from 'react-use/lib/usePrevious';
+import usePrevious from 'react-use/esm/usePrevious';
 import { Direction } from '../EntityRelationsGraph';

 export type CatalogGraphPageValue = {
@@ -14,7 +14,7 @@
 * limitations under the License.
 */
 import { MouseEvent, useState } from 'react';
-import useDebounce from 'react-use/lib/useDebounce';
+import useDebounce from 'react-use/esm/useDebounce';
 import { RelationPairs, ALL_RELATION_PAIRS } from './relations';
 import { EntityEdge, EntityNode } from './types';
 import { useEntityRelationGraph } from './useEntityRelationGraph';
@@ -17,7 +17,7 @@ import { Entity, stringifyEntityRef } from '@backstage/catalog-model';
 import { useApi } from '@backstage/core-plugin-api';
 import { catalogApiRef } from '@backstage/plugin-catalog-react';
 import { Dispatch, useCallback, useRef, useState } from 'react';
-import useAsyncFn from 'react-use/lib/useAsyncFn';
+import useAsyncFn from 'react-use/esm/useAsyncFn';

 // TODO: This is a good use case for a graphql API, once it is available in the
 // future.
@@ -28,7 +28,7 @@ import Typography from '@material-ui/core/Typography';
 import { makeStyles } from '@material-ui/core/styles';
 import React, { useCallback, useEffect, useState } from 'react';
 import { UnpackNestedValue, UseFormReturn } from 'react-hook-form';
-import useAsync from 'react-use/lib/useAsync';
+import useAsync from 'react-use/esm/useAsync';
 import YAML from 'yaml';
 import { AnalyzeResult, catalogImportApiRef } from '../../api';
 import { useCatalogFilename } from '../../hooks';
@@ -19,7 +19,7 @@ import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import { Autocomplete } from '@material-ui/lab';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useApi } from '@backstage/core-plugin-api';
-import useAsync from 'react-use/lib/useAsync';
+import useAsync from 'react-use/esm/useAsync';
 import { catalogApiRef } from '../../api';
 import { EntityAutocompletePickerOption } from './EntityAutocompletePickerOption';
 import { EntityAutocompletePickerInput } from './EntityAutocompletePickerInput';
@@ -15,7 +15,7 @@
 */

 import { useApi } from '@backstage/core-plugin-api';
-import useAsync from 'react-use/lib/useAsync';
+import useAsync from 'react-use/esm/useAsync';
 import { catalogApiRef } from '../../api';

 /**
@@ -14,7 +14,7 @@
 * limitations under the License.
 */
 import { useApi } from '@backstage/core-plugin-api';
-import useAsyncFn from 'react-use/lib/useAsyncFn';
+import useAsyncFn from 'react-use/esm/useAsyncFn';
 import { catalogApiRef } from '../../api';
 import { useState } from 'react';
 import { Entity, parseEntityRef } from '@backstage/catalog-model';
@@ -19,7 +19,7 @@ import { useQueryEntities } from './useQueryEntities';
 import { Entity, stringifyEntityRef } from '@backstage/catalog-model';
 import { useApi } from '@backstage/core-plugin-api';
 import { catalogApiRef } from '../../api';
-import useAsyncFn from 'react-use/lib/useAsyncFn';
+import useAsyncFn from 'react-use/esm/useAsyncFn';
 import { useMountEffect } from '@react-hookz/web';

 export function useFetchEntities({
@@ -15,7 +15,7 @@
 */
 import { useApi } from '@backstage/core-plugin-api';
 import { catalogApiRef } from '../../api';
-import useAsyncFn from 'react-use/lib/useAsyncFn';
+import useAsyncFn from 'react-use/esm/useAsyncFn';
 import { Entity } from '@backstage/catalog-model';

 type QueryEntitiesResponse = {
@@ -14,7 +14,7 @@
 * limitations under the License.
 */

-import useAsyncFn from 'react-use/lib/useAsyncFn';
+import useAsyncFn from 'react-use/esm/useAsyncFn';
 import { catalogApiRef } from '../../api';
 import React, { PropsWithChildren, useEffect, useMemo, useState } from 'react';
 import HoverPopover from 'material-ui-popup-state/HoverPopover';
@@ -25,7 +25,7 @@ import {
 import Clear from '@material-ui/icons/Clear';
 import Search from '@material-ui/icons/Search';
 import React, { useState } from 'react';
-import useDebounce from 'react-use/lib/useDebounce';
+import useDebounce from 'react-use/esm/useDebounce';
 import { useEntityList } from '../../hooks/useEntityListProvider';
 import { EntityTextFilter } from '../../filters';

@@ -31,7 +31,7 @@ import { Box, DialogContentText, makeStyles } from '@material-ui/core';
 import classNames from 'classnames';
 import React, { useLayoutEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import useAsync from 'react-use/lib/useAsync';
+import useAsync from 'react-use/esm/useAsync';
 import { catalogApiRef } from '../../../api';
 import { humanizeEntityRef } from '../../EntityRefLink';
 import { entityRouteRef } from '../../../routes';
@@ -30,7 +30,7 @@ import {
 } from '@material-ui/core';
 import { Alert } from '@material-ui/lab';
 import React from 'react';
-import useAsync from 'react-use/lib/useAsync';
+import useAsync from 'react-use/esm/useAsync';
 import { catalogApiRef } from '../../../api';
 import { EntityRefLink } from '../../EntityRefLink';
 import { KeyValueListItem, ListItemText } from './common';
@@ -22,7 +22,7 @@ import {
 } from '@backstage/catalog-model';
 import { catalogApiRef } from '../../api';
 import { useCallback } from 'react';
-import useAsync from 'react-use/lib/useAsync';
+import useAsync from 'react-use/esm/useAsync';
 import { useApi } from '@backstage/core-plugin-api';

 /**
@@ -17,7 +17,7 @@ import { QueryEntitiesInitialRequest } from '@backstage/catalog-client';
 import { useApi } from '@backstage/core-plugin-api';
 import { compact, isEqual } from 'lodash';
 import { useMemo, useRef } from 'react';
-import useAsync from 'react-use/lib/useAsync';
+import useAsync from 'react-use/esm/useAsync';
 import { catalogApiRef } from '../../api';
 import { useEntityList } from '../../hooks';
 import { reduceCatalogFilters } from '../../utils';
@@ -17,13 +17,13 @@
 import { identityApiRef, useApi } from '@backstage/core-plugin-api';
 import { compact, intersection } from 'lodash';
 import { useMemo } from 'react';
-import useAsync from 'react-use/lib/useAsync';
+import useAsync from 'react-use/esm/useAsync';
 import { catalogApiRef } from '../../api';
 import { EntityOwnerFilter, EntityUserFilter } from '../../filters';
 import { useEntityList } from '../../hooks';
 import { CatalogFilters, reduceCatalogFilters } from '../../utils';
-import useAsyncFn from 'react-use/lib/useAsyncFn';
-import useDeepCompareEffect from 'react-use/lib/useDeepCompareEffect';
+import useAsyncFn from 'react-use/esm/useAsyncFn';
+import useDeepCompareEffect from 'react-use/esm/useDeepCompareEffect';

 export function useOwnedEntitiesCount() {
  const identityApi = useApi(identityApiRef);
@@ -19,7 +19,7 @@ import { parseEntityRef, stringifyEntityRef } from '@backstage/catalog-model';
 import { useApi } from '@backstage/core-plugin-api';
 import { compact, isEqual } from 'lodash';
 import { useMemo, useRef } from 'react';
-import useAsync from 'react-use/lib/useAsync';
+import useAsync from 'react-use/esm/useAsync';
 import { catalogApiRef } from '../../api';
 import { EntityUserFilter } from '../../filters';
 import { useEntityList, useStarredEntities } from '../../hooks';
@@ -26,9 +26,9 @@ import React, {
  useState,
 } from 'react';
 import { useLocation } from 'react-router-dom';
-import useAsyncFn from 'react-use/lib/useAsyncFn';
-import useDebounce from 'react-use/lib/useDebounce';
-import useMountedState from 'react-use/lib/useMountedState';
+import useAsyncFn from 'react-use/esm/useAsyncFn';
+import useDebounce from 'react-use/esm/useDebounce';
+import useMountedState from 'react-use/esm/useMountedState';
 import { catalogApiRef } from '../api';
 import {
  EntityErrorFilter,
@@ -21,7 +21,7 @@ import {
 } from '@backstage/catalog-model';
 import { identityApiRef, useApi } from '@backstage/core-plugin-api';
 import { useMemo } from 'react';
-import useAsync from 'react-use/lib/useAsync';
+import useAsync from 'react-use/esm/useAsync';
 import { getEntityRelations } from '../utils/getEntityRelations';

 /**
@@ -15,7 +15,7 @@
 */

 import { useEffect, useMemo, useRef, useState } from 'react';
-import useAsync from 'react-use/lib/useAsync';
+import useAsync from 'react-use/esm/useAsync';
 import isEqual from 'lodash/isEqual';
 import sortBy from 'lodash/sortBy';
 import { useApi } from '@backstage/core-plugin-api';
@@ -16,7 +16,7 @@

 import { Entity, parseEntityRef } from '@backstage/catalog-model';
 import { useApi } from '@backstage/core-plugin-api';
-import useAsync from 'react-use/lib/useAsync';
+import useAsync from 'react-use/esm/useAsync';
 import { catalogApiRef } from '../api';

 /**
@@ -21,7 +21,7 @@ import {
 } from '@backstage/catalog-model';
 import { useApi } from '@backstage/core-plugin-api';
 import { useCallback, useMemo } from 'react';
-import useObservable from 'react-use/lib/useObservable';
+import useObservable from 'react-use/esm/useObservable';
 import { starredEntitiesApiRef } from '../apis';

 function getEntityRef(
@@ -32,7 +32,7 @@ import { alertApiRef, useApi } from '@backstage/core-plugin-api';
 import { UnprocessedEntity } from '../types';
 import { EntityDialog } from './EntityDialog';
 import { catalogUnprocessedEntitiesApiRef } from '../api';
-import useAsync from 'react-use/lib/useAsync';
+import useAsync from 'react-use/esm/useAsync';
 import DeleteIcon from '@material-ui/icons/Delete';

 const useStyles = makeStyles((theme: Theme) => ({
@@ -28,7 +28,7 @@ import { UnprocessedEntity } from '../types';

 import { EntityDialog } from './EntityDialog';
 import { useApi } from '@backstage/core-plugin-api';
-import useAsync from 'react-use/lib/useAsync';
+import useAsync from 'react-use/esm/useAsync';
 import { catalogUnprocessedEntitiesApiRef } from '../api';

 const useStyles = makeStyles((theme: Theme) => ({
@@ -26,7 +26,7 @@ import {
 } from '@backstage/plugin-catalog-react';
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import useAsyncRetry from 'react-use/lib/useAsyncRetry';
+import useAsyncRetry from 'react-use/esm/useAsyncRetry';

 export const useEntityFromUrl = (): EntityLoadingStatus => {
  const { kind, namespace, name } = useRouteRefParams(entityRouteRef);
@@ -16,7 +16,7 @@

 import { useApi } from '@backstage/core-plugin-api';
 import { catalogApiRef } from '@backstage/plugin-catalog-react';
-import useAsync from 'react-use/lib/useAsync';
+import useAsync from 'react-use/esm/useAsync';

 /**
 * Fetch and return all availible kinds.
@@ -32,7 +32,7 @@ import { useEntityPermission } from '@backstage/plugin-catalog-react/alpha';
 import { catalogEntityDeletePermission } from '@backstage/plugin-catalog-common/alpha';
 import { UnregisterEntity, UnregisterEntityOptions } from './UnregisterEntity';
 import { useApi, alertApiRef } from '@backstage/core-plugin-api';
-import useCopyToClipboard from 'react-use/lib/useCopyToClipboard';
+import useCopyToClipboard from 'react-use/esm/useCopyToClipboard';

 /** @public */
 export type EntityContextMenuClassKey = 'button';
@@ -29,7 +29,7 @@ import {
  ENTITY_STATUS_CATALOG_PROCESSING_TYPE,
 } from '@backstage/catalog-client';
 import { useApi, ApiHolder } from '@backstage/core-plugin-api';
-import useAsync from 'react-use/lib/useAsync';
+import useAsync from 'react-use/esm/useAsync';
 import { SerializedError } from '@backstage/errors';

 const errorFilter = (i: EntityStatusItem) =>
@@ -22,7 +22,7 @@ import {
 } from '@backstage/plugin-catalog-react';
 import Alert from '@material-ui/lab/Alert';
 import React from 'react';
-import useAsync from 'react-use/lib/useAsync';
+import useAsync from 'react-use/esm/useAsync';
 import Box from '@material-ui/core/Box';
 import { ResponseErrorPanel } from '@backstage/core-components';
 import { useApi, ApiHolder } from '@backstage/core-plugin-api';
@@ -23,7 +23,7 @@ import {
  useElementFilter,
  ApiHolder,
 } from '@backstage/core-plugin-api';
-import useAsync from 'react-use/lib/useAsync';
+import useAsync from 'react-use/esm/useAsync';

 const ENTITY_SWITCH_KEY = 'core.backstage.entitySwitch';

@@ -34,7 +34,7 @@ import Typography from '@material-ui/core/Typography';
 import { makeStyles, useTheme } from '@material-ui/core/styles';
 import ZoomOutMap from '@material-ui/icons/ZoomOutMap';
 import React from 'react';
-import useAsync from 'react-use/lib/useAsync';
+import useAsync from 'react-use/esm/useAsync';

 import {
  DependencyGraph,
@@ -15,7 +15,7 @@
 */

 import React, { CSSProperties, DependencyList } from 'react';
-import useAsync from 'react-use/lib/useAsync';
+import useAsync from 'react-use/esm/useAsync';
 import { Box, LinearProgress } from '@material-ui/core';
 import Timeline from '@material-ui/lab/Timeline';
 import TimelineItem from '@material-ui/lab/TimelineItem';
@@ -14,7 +14,7 @@
 * limitations under the License.
 */
 import { useCallback, useMemo } from 'react';
-import useAsyncRetry from 'react-use/lib/useAsyncRetry';
+import useAsyncRetry from 'react-use/esm/useAsyncRetry';
 import { circleCIApiRef } from '../api';
 import { useAsyncPolling } from './useAsyncPolling';
 import { useProjectSlugFromEntity, mapVcsType } from './useBuilds';
@@ -18,7 +18,7 @@ import { useEntity } from '@backstage/plugin-catalog-react';
 import { BuildSummary, GitType } from 'circleci-api';
 import { getOr } from 'lodash/fp';
 import { useCallback, useEffect, useState } from 'react';
-import useAsyncRetry from 'react-use/lib/useAsyncRetry';
+import useAsyncRetry from 'react-use/esm/useAsyncRetry';
 import { circleCIApiRef } from '../api';
 import type { CITableBuildInfo } from '../components/BuildsPage/lib/CITable';
 import { CIRCLECI_ANNOTATION } from '../constants';
@@ -13,7 +13,7 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-import useAsync from 'react-use/lib/useAsync';
+import useAsync from 'react-use/esm/useAsync';
 import { ActionsListWorkflowRunsForRepoResponseData } from '../../api/types';

 export const useWorkflowRunJobs = (jobsUrl?: string) => {
@@ -13,7 +13,7 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-import useAsync from 'react-use/lib/useAsync';
+import useAsync from 'react-use/esm/useAsync';
 import { cloudbuildApiRef } from '../../api';
 import { useApi, useRouteRefParams } from '@backstage/core-plugin-api';
 import { buildRouteRef } from '../../routes';
@@ -14,7 +14,7 @@
 * limitations under the License.
 */

-import useAsync from 'react-use/lib/useAsync';
+import useAsync from 'react-use/esm/useAsync';
 import { Entity } from '@backstage/catalog-model';

 /** @public */
@@ -14,7 +14,7 @@
 * limitations under the License.
 */
 import { useState } from 'react';
-import useAsyncRetry from 'react-use/lib/useAsyncRetry';
+import useAsyncRetry from 'react-use/esm/useAsyncRetry';
 import { cloudbuildApiRef } from '../api/CloudbuildApi';
 import {
  ActionsListWorkflowRunsForRepoResponseData,
@@ -15,7 +15,7 @@
 */

 import React from 'react';
-import useAsync from 'react-use/lib/useAsync';
+import useAsync from 'react-use/esm/useAsync';
 import { codeClimateApiRef } from '../../api';
 import { CodeClimateTable } from '../CodeClimateTable';
 import { CODECLIMATE_REPO_ID_ANNOTATION } from '../../plugin';
@@ -27,7 +27,7 @@ import TrendingUpIcon from '@material-ui/icons/TrendingUp';
 import Alert from '@material-ui/lab/Alert';
 import { ClassNameMap } from '@material-ui/styles/withStyles';
 import React from 'react';
-import useAsync from 'react-use/lib/useAsync';
+import useAsync from 'react-use/esm/useAsync';
 import {
  CartesianGrid,
  Legend,
@@ -19,7 +19,7 @@ import Paper from '@material-ui/core/Paper';
 import { makeStyles } from '@material-ui/core/styles';
 import Alert from '@material-ui/lab/Alert';
 import React from 'react';
-import useAsync from 'react-use/lib/useAsync';
+import useAsync from 'react-use/esm/useAsync';
 import { codeCoverageApiRef } from '../../api';
 import { FileEntry } from '../../types';
 import { CodeRow } from './CodeRow';
@@ -22,7 +22,7 @@ import FolderIcon from '@material-ui/icons/Folder';
 import FileOutlinedIcon from '@material-ui/icons/InsertDriveFileOutlined';
 import Alert from '@material-ui/lab/Alert';
 import React, { Fragment, useEffect, useState } from 'react';
-import useAsync from 'react-use/lib/useAsync';
+import useAsync from 'react-use/esm/useAsync';
 import { codeCoverageApiRef } from '../../api';
 import { FileEntry } from '../../types';
 import { FileContent } from './FileContent';
@@ -18,7 +18,7 @@ import { configApiRef, useApi, useApp } from '@backstage/core-plugin-api';
 import Alert from '@material-ui/lab/Alert';
 import React from 'react';
 import { useEntity } from '@backstage/plugin-catalog-react';
-import useAsync from 'react-use/lib/useAsync';
+import useAsync from 'react-use/esm/useAsync';
 import { codesceneApiRef } from '../../api/api';
 import { Analysis } from '../../api/types';
 import { CodeHealthKpisCard } from '../CodeHealthKpisCard/CodeHealthKpisCard';
@@ -22,7 +22,7 @@ import {
 } from '@backstage/core-components';
 import { useRouteRef, useApi } from '@backstage/core-plugin-api';
 import Alert from '@material-ui/lab/Alert';
-import useAsync from 'react-use/lib/useAsync';
+import useAsync from 'react-use/esm/useAsync';
 import { Link as RouterLink } from 'react-router-dom';
 import { rootRouteRef } from '../../routes';
 import { codesceneApiRef } from '../../api/api';
@@ -17,7 +17,7 @@
 import { Analysis } from '../api/types';
 import { codesceneApiRef } from '../api/api';
 import { useApi } from '@backstage/core-plugin-api';
-import useAsync from 'react-use/lib/useAsync';
+import useAsync from 'react-use/esm/useAsync';

 export const useAnalyses = (projectId: number) => {
  const codesceneApi = useApi(codesceneApiRef);
@@ -14,7 +14,7 @@
 * limitations under the License.
 */
 import React, { useMemo } from 'react';
-import useObservable from 'react-use/lib/useObservable';
+import useObservable from 'react-use/esm/useObservable';
 import { configSchemaApiRef } from '../../api';
 import { SchemaViewer } from '../SchemaViewer';
 import { Typography } from '@material-ui/core';
@@ -16,7 +16,7 @@

 import React, { useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
-import useCopyToClipboard from 'react-use/lib/useCopyToClipboard';
+import useCopyToClipboard from 'react-use/esm/useCopyToClipboard';
 import Tooltip from '@material-ui/core/Tooltip';
 import IconButton from '@material-ui/core/IconButton';
 import AssignmentOutlinedIcon from '@material-ui/icons/AssignmentOutlined';
@@ -16,7 +16,7 @@

 import React from 'react';
 import Typography from '@material-ui/core/Typography';
-import useAsync from 'react-use/lib/useAsync';
+import useAsync from 'react-use/esm/useAsync';
 import { useCostInsightsStyles } from '../../utils/styles';
 import { Group } from '@backstage/plugin-cost-insights-common';
 import { identityApiRef, useApi } from '@backstage/core-plugin-api';
@@ -16,7 +16,7 @@

 import { devToolsApiRef } from '../api';
 import { useApi } from '@backstage/core-plugin-api';
-import useAsync from 'react-use/lib/useAsync';
+import useAsync from 'react-use/esm/useAsync';
 import { ConfigInfo } from '@backstage/plugin-devtools-common';

 export function useConfig(): {
@@ -16,7 +16,7 @@

 import { devToolsApiRef } from '../api';
 import { useApi } from '@backstage/core-plugin-api';
-import useAsync from 'react-use/lib/useAsync';
+import useAsync from 'react-use/esm/useAsync';
 import { ExternalDependency } from '@backstage/plugin-devtools-common';

 export function useExternalDependencies(): {
@@ -16,7 +16,7 @@

 import { devToolsApiRef } from '../api';
 import { useApi } from '@backstage/core-plugin-api';
-import useAsync from 'react-use/lib/useAsync';
+import useAsync from 'react-use/esm/useAsync';
 import { DevToolsInfo } from '@backstage/plugin-devtools-common';

 export function useInfo(): {
@@ -14,7 +14,7 @@
 * limitations under the License.
 */
 import React from 'react';
-import useAsync from 'react-use/lib/useAsync';
+import useAsync from 'react-use/esm/useAsync';
 import {
  Progress,
  ResponseErrorPanel,
@@ -14,7 +14,7 @@
 * limitations under the License.
 */
 import React from 'react';
-import useAsync from 'react-use/lib/useAsync';
+import useAsync from 'react-use/esm/useAsync';
 import { Progress, ResponseErrorPanel } from '@backstage/core-components';
 import { InfoCard } from '@backstage/core-components';
 import { useApi, configApiRef } from '@backstage/core-plugin-api';
@@ -15,7 +15,7 @@
 */

 import React from 'react';
-import useAsync from 'react-use/lib/useAsync';
+import useAsync from 'react-use/esm/useAsync';
 import { Progress, ResponseErrorPanel } from '@backstage/core-components';
 import { useApi } from '@backstage/core-plugin-api';
 import Chip from '@material-ui/core/Chip';
@@ -20,7 +20,7 @@ import { useApi } from '@backstage/core-plugin-api';
 import { EntityRefLink } from '@backstage/plugin-catalog-react';
 import { EntityRatingsData } from '@backstage/plugin-entity-feedback-common';
 import React from 'react';
-import useAsync from 'react-use/lib/useAsync';
+import useAsync from 'react-use/esm/useAsync';

 import { entityFeedbackApiRef } from '../../api';

@@ -35,7 +35,7 @@ import {
  Typography,
 } from '@material-ui/core';
 import React, { ReactNode, useState } from 'react';
-import useAsyncFn from 'react-use/lib/useAsyncFn';
+import useAsyncFn from 'react-use/esm/useAsyncFn';

 import { entityFeedbackApiRef } from '../../api';

@@ -21,7 +21,7 @@ import { FeedbackResponse } from '@backstage/plugin-entity-feedback-common';
 import { Chip, makeStyles } from '@material-ui/core';
 import CheckIcon from '@material-ui/icons/Check';
 import React from 'react';
-import useAsync from 'react-use/lib/useAsync';
+import useAsync from 'react-use/esm/useAsync';

 import { entityFeedbackApiRef } from '../../api';

@@ -30,8 +30,8 @@ import ThumbUpIcon from '@material-ui/icons/ThumbUp';
 import ThumbDownOutlinedIcon from '@material-ui/icons/ThumbDownOutlined';
 import ThumbUpOutlinedIcon from '@material-ui/icons/ThumbUpOutlined';
 import React, { ReactNode, useCallback, useState } from 'react';
-import useAsync from 'react-use/lib/useAsync';
-import useAsyncFn from 'react-use/lib/useAsyncFn';
+import useAsync from 'react-use/esm/useAsync';
+import useAsyncFn from 'react-use/esm/useAsyncFn';

 import { entityFeedbackApiRef } from '../../api';
 import {
--- a/Show More
+++ b/Show More