Merge pull request #4265 from SDA-SE/feat/create-catalog-common-react

Create @backstage/plugin-catalog-react package
2021-02-01 12:04:07 +01:00
parent cc022714f1 59828b177f
commit 7ee15d2c5b
108 changed files with 457 additions and 237 deletions
@@ -32,7 +32,7 @@
    "@asyncapi/react-component": "^0.18.2",
    "@backstage/catalog-model": "^0.7.0",
    "@backstage/core": "^0.5.0",
-    "@backstage/plugin-catalog": "^0.2.14",
+    "@backstage/plugin-catalog-react": "^0.0.1",
    "@backstage/theme": "^0.2.2",
    "@material-icons/font": "^1.0.2",
    "@material-ui/core": "^4.11.0",
@@ -16,7 +16,7 @@

 import { Entity } from '@backstage/catalog-model';
 import { ApiProvider, ApiRegistry, storageApiRef } from '@backstage/core';
-import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog';
+import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog-react';
 import { MockStorageApi, wrapInTestApp } from '@backstage/test-utils';
 import { render } from '@testing-library/react';
 import React from 'react';
@@ -15,7 +15,7 @@
 */

 import { Content, ContentHeader, SupportButton, useApi } from '@backstage/core';
-import { catalogApiRef } from '@backstage/plugin-catalog';
+import { catalogApiRef } from '@backstage/plugin-catalog-react';
 import { Button } from '@material-ui/core';
 import React from 'react';
 import { Link as RouterLink } from 'react-router-dom';
@@ -16,7 +16,7 @@

 import { Entity, RELATION_CONSUMES_API } from '@backstage/catalog-model';
 import { ApiProvider, ApiRegistry } from '@backstage/core';
-import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog';
+import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog-react';
 import { renderInTestApp } from '@backstage/test-utils';
 import { waitFor } from '@testing-library/react';
 import React from 'react';
@@ -16,7 +16,7 @@

 import { Entity, RELATION_PROVIDES_API } from '@backstage/catalog-model';
 import { ApiProvider, ApiRegistry } from '@backstage/core';
-import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog';
+import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog-react';
 import { renderInTestApp } from '@backstage/test-utils';
 import { waitFor } from '@testing-library/react';
 import React from 'react';
@@ -16,7 +16,7 @@

 import { Entity, RELATION_API_CONSUMED_BY } from '@backstage/catalog-model';
 import { ApiProvider, ApiRegistry } from '@backstage/core';
-import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog';
+import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog-react';
 import { renderInTestApp } from '@backstage/test-utils';
 import { waitFor } from '@testing-library/react';
 import React from 'react';
@@ -16,7 +16,7 @@

 import { Entity, RELATION_API_PROVIDED_BY } from '@backstage/catalog-model';
 import { ApiProvider, ApiRegistry } from '@backstage/core';
-import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog';
+import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog-react';
 import { renderInTestApp } from '@backstage/test-utils';
 import { waitFor } from '@testing-library/react';
 import React from 'react';
@@ -15,7 +15,10 @@
 */

 import { Entity } from '@backstage/catalog-model';
-import { entityRoute, entityRouteParams } from '@backstage/plugin-catalog';
+import {
+  entityRoute,
+  entityRouteParams,
+} from '@backstage/plugin-catalog-react';
 import { Link } from '@material-ui/core';
 import React, { PropsWithChildren } from 'react';
 import { generatePath, Link as RouterLink } from 'react-router-dom';
@@ -15,7 +15,7 @@
 */
 import { Entity } from '@backstage/catalog-model';
 import { useApi } from '@backstage/core';
-import { catalogApiRef } from '@backstage/plugin-catalog';
+import { catalogApiRef } from '@backstage/plugin-catalog-react';
 import { useAsyncRetry } from 'react-use';

 // TODO: Maybe this hook is interesting for others too?
@@ -33,7 +33,7 @@
    "@backstage/catalog-model": "^0.7.0",
    "@backstage/core": "^0.5.0",
    "@backstage/integration": "^0.3.1",
-    "@backstage/plugin-catalog": "^0.2.14",
+    "@backstage/plugin-catalog-react": "^0.0.1",
    "@backstage/theme": "^0.2.2",
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
@@ -49,6 +49,7 @@
    "yaml": "^1.10.0"
  },
  "devDependencies": {
+    "@backstage/catalog-client": "^0.3.5",
    "@backstage/cli": "^0.5.0",
    "@backstage/dev-utils": "^0.1.8",
    "@backstage/test-utils": "^0.1.6",
@@ -14,32 +14,35 @@
 * limitations under the License.
 */

-import React, { useCallback, useState } from 'react';
-import {
-  Button,
-  CircularProgress,
-  Grid,
-  Link,
-  List,
-  ListItem,
-  Typography,
-  Divider,
-} from '@material-ui/core';
-import { useGithubRepos } from '../util/useGithubRepos';
-import { ConfigSpec } from './ImportComponentPage';
+import { Entity } from '@backstage/catalog-model';
 import {
  errorApiRef,
  RouteRef,
  StructuredMetadataTable,
  useApi,
 } from '@backstage/core';
-import { PartialEntity } from '../util/types';
+import {
+  entityRoute,
+  entityRouteParams,
+} from '@backstage/plugin-catalog-react';
+import {
+  Button,
+  CircularProgress,
+  Divider,
+  Grid,
+  Link,
+  List,
+  ListItem,
+  Typography,
+} from '@material-ui/core';
+import React, { useCallback, useState } from 'react';
 import { generatePath, resolvePath } from 'react-router';
-import { entityRoute, entityRouteParams } from '@backstage/plugin-catalog';
-import { Entity } from '@backstage/catalog-model';
 import { Link as RouterLink } from 'react-router-dom';
 import * as YAML from 'yaml';
+import { PartialEntity } from '../util/types';
 import { urlType } from '../util/urls';
+import { useGithubRepos } from '../util/useGithubRepos';
+import { ConfigSpec } from './ImportComponentPage';

 const getEntityCatalogPath = ({
  entity,
@@ -13,18 +13,19 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-import React from 'react';
-import { renderInTestApp } from '@backstage/test-utils';
-import { RegisterComponentForm } from './ImportComponentForm';
+import { CatalogClient } from '@backstage/catalog-client';
 import {
  ApiProvider,
  ApiRegistry,
  DiscoveryApi,
  errorApiRef,
 } from '@backstage/core';
-import { catalogApiRef, CatalogClient } from '@backstage/plugin-catalog';
+import { catalogApiRef } from '@backstage/plugin-catalog-react';
+import { renderInTestApp } from '@backstage/test-utils';
+import { fireEvent, screen, waitFor } from '@testing-library/react';
+import React from 'react';
 import { catalogImportApiRef, CatalogImportClient } from '../api';
-import { fireEvent, waitFor, screen } from '@testing-library/react';
+import { RegisterComponentForm } from './ImportComponentForm';

 describe('<RegisterComponentForm />', () => {
  let apis: ApiRegistry;
@@ -15,6 +15,7 @@
 */

 import { errorApiRef, useApi } from '@backstage/core';
+import { catalogApiRef } from '@backstage/plugin-catalog-react';
 import { BackstageTheme } from '@backstage/theme';
 import {
  Button,
@@ -26,11 +27,10 @@ import { makeStyles } from '@material-ui/core/styles';
 import React from 'react';
 import { useForm } from 'react-hook-form';
 import { useMountedState } from 'react-use';
-import { ComponentIdValidators } from '../util/validate';
-import { useGithubRepos } from '../util/useGithubRepos';
-import { ConfigSpec } from './ImportComponentPage';
-import { catalogApiRef } from '@backstage/plugin-catalog';
 import { urlType } from '../util/urls';
+import { useGithubRepos } from '../util/useGithubRepos';
+import { ComponentIdValidators } from '../util/validate';
+import { ConfigSpec } from './ImportComponentPage';

 const useStyles = makeStyles<BackstageTheme>(theme => ({
  form: {
@@ -13,22 +13,21 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-import React from 'react';
-import { msw, renderInTestApp } from '@backstage/test-utils';
-import { ImportComponentPage } from './ImportComponentPage';
+import { CatalogClient } from '@backstage/catalog-client';
 import {
  ApiProvider,
  ApiRegistry,
  configApiRef,
  errorApiRef,
 } from '@backstage/core';
-import { catalogApiRef, CatalogClient } from '@backstage/plugin-catalog';
-import { catalogImportApiRef, CatalogImportClient } from '../api';
-
+import { catalogApiRef } from '@backstage/plugin-catalog-react';
+import { msw, renderInTestApp } from '@backstage/test-utils';
 import { fireEvent, screen, waitFor } from '@testing-library/react';
-
 import { rest } from 'msw';
 import { setupServer } from 'msw/node';
+import React from 'react';
+import { catalogImportApiRef, CatalogImportClient } from '../api';
+import { ImportComponentPage } from './ImportComponentPage';

 let codeSearchMockResponse: () => Promise<{
  data: {
@@ -0,0 +1,3 @@
+module.exports = {
+  extends: [require.resolve('@backstage/cli/config/eslint')],
+};
@@ -0,0 +1,14 @@
+# Catalog React
+
+WORK IN PROGRESS
+
+This is shared code of the frontend part of the default catalog plugin.
+
+It will implement the core API for handling your catalog of software, and
+supplies components that can be reused by third-party plugins.
+
+## Links
+
+- [Frontend part of the plugin](https://github.com/backstage/backstage/tree/master/plugins/catalog)
+- [Backend part of the plugin](https://github.com/backstage/backstage/tree/master/plugins/catalog-backend)
+- [The Backstage homepage](https://backstage.io)
@@ -0,0 +1,58 @@
+{
+  "name": "@backstage/plugin-catalog-react",
+  "version": "0.0.1",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "license": "Apache-2.0",
+  "private": false,
+  "publishConfig": {
+    "access": "public",
+    "main": "dist/index.esm.js",
+    "types": "dist/index.d.ts"
+  },
+  "homepage": "https://backstage.io",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/backstage/backstage",
+    "directory": "plugins/plugin-catalog-common-react"
+  },
+  "keywords": [
+    "backstage"
+  ],
+  "scripts": {
+    "build": "backstage-cli build",
+    "lint": "backstage-cli lint",
+    "test": "backstage-cli test",
+    "prepack": "backstage-cli prepack",
+    "postpack": "backstage-cli postpack",
+    "clean": "backstage-cli clean"
+  },
+  "dependencies": {
+    "@backstage/catalog-client": "^0.3.5",
+    "@backstage/catalog-model": "^0.7.0",
+    "@backstage/core": "^0.5.0",
+    "@material-ui/core": "^4.11.0",
+    "@types/react": "^16.9",
+    "react": "^16.13.1",
+    "react-router": "6.0.0-beta.0",
+    "react-router-dom": "6.0.0-beta.0",
+    "react-use": "^15.3.3"
+  },
+  "devDependencies": {
+    "@backstage/cli": "^0.5.0",
+    "@backstage/dev-utils": "^0.1.8",
+    "@backstage/test-utils": "^0.1.6",
+    "@testing-library/jest-dom": "^5.10.1",
+    "@testing-library/react": "^10.4.1",
+    "@testing-library/react-hooks": "^3.3.0",
+    "@testing-library/user-event": "^12.0.7",
+    "@types/jest": "^26.0.7",
+    "@types/node": "^12.0.0",
+    "cross-fetch": "^3.0.6",
+    "msw": "^0.21.2",
+    "react-test-renderer": "^16.13.1"
+  },
+  "files": [
+    "dist"
+  ]
+}
@@ -0,0 +1,24 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { CatalogApi } from '@backstage/catalog-client';
+import { createApiRef } from '@backstage/core';
+
+export const catalogApiRef = createApiRef<CatalogApi>({
+  id: 'plugin.catalog.service',
+  description:
+    'Used by the Catalog plugin to make requests to accompanying backend',
+});
@@ -15,7 +15,7 @@
 */
 import { Entity } from '@backstage/catalog-model';
 import React, { ReactNode } from 'react';
-import { EntityContext } from '../../hooks/useEntity';
+import { EntityContext } from '../../hooks';

 type EntityProviderProps = {
  entity: Entity;
@@ -31,9 +31,6 @@ type EntityRefLinkProps = {
  children?: React.ReactNode;
 };

-// TODO: This component is private for now, as it should probably belong into
-// some kind of helper module for the catalog plugin to avoid a dependency on
-// the catalog plugin itself.
 export const EntityRefLink = ({
  entityRef,
  defaultKind,
@@ -22,7 +22,6 @@ type EntityRefLinksProps = {
  defaultKind?: string;
 };

-// TODO: Move into a shared helper package
 export const EntityRefLinks = ({
  entityRefs,
  defaultKind,
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export * from './EntityRefLink';
+export * from './EntityProvider';
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { EntityContext, useEntity, useEntityFromUrl } from './useEntity';
+export { useEntityCompoundName } from './useEntityCompoundName';
@@ -18,8 +18,8 @@ import { errorApiRef, useApi } from '@backstage/core';
 import { createContext, useContext, useEffect } from 'react';
 import { useNavigate } from 'react-router';
 import { useAsync } from 'react-use';
-import { useEntityCompoundName } from '../components/useEntityCompoundName';
-import { catalogApiRef } from '../plugin';
+import { useEntityCompoundName } from './useEntityCompoundName';
+import { catalogApiRef } from '../api';

 type EntityLoadingStatus = {
  entity?: Entity;
@@ -0,0 +1,26 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export type { CatalogApi } from '@backstage/catalog-client';
+export { catalogApiRef } from './api';
+export * from './components';
+export * from './hooks';
+export {
+  catalogRouteRef,
+  entityRoute,
+  entityRouteParams,
+  entityRouteRef,
+  rootRoute,
+} from './routes';
@@ -0,0 +1,18 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import '@testing-library/jest-dom';
+import 'cross-fetch/polyfill';
@@ -33,6 +33,7 @@
    "@backstage/catalog-client": "^0.3.5",
    "@backstage/catalog-model": "^0.7.0",
    "@backstage/core": "^0.5.0",
+    "@backstage/plugin-catalog-react": "^0.0.1",
    "@backstage/plugin-scaffolder": "^0.4.1",
    "@backstage/theme": "^0.2.2",
    "@material-ui/core": "^4.11.0",
@@ -19,9 +19,9 @@ import {
  RELATION_OWNED_BY,
  RELATION_PART_OF,
 } from '@backstage/catalog-model';
+import { EntityRefLinks } from '@backstage/plugin-catalog-react';
 import { Chip, Grid, makeStyles, Typography } from '@material-ui/core';
 import React from 'react';
-import { EntityRefLinks } from '../EntityRefLink';
 import { getEntityRelations } from '../getEntityRelations';
 import { AboutField } from './AboutField';

@@ -15,10 +15,10 @@
 */

 import { useApi } from '@backstage/core';
+import { catalogApiRef } from '@backstage/plugin-catalog-react';
 import { CircularProgress, useTheme } from '@material-ui/core';
 import React from 'react';
 import { useAsync } from 'react-use';
-import { catalogApiRef } from '../../plugin';

 export const AllServicesCount = () => {
  const theme = useTheme();
@@ -23,11 +23,11 @@ import {
  identityApiRef,
  storageApiRef,
 } from '@backstage/core';
+import { catalogApiRef } from '@backstage/plugin-catalog-react';
 import { MockStorageApi, wrapInTestApp } from '@backstage/test-utils';
 import { fireEvent, render, waitFor } from '@testing-library/react';
 import React from 'react';
 import { EntityFilterGroupsProvider } from '../../filter';
-import { catalogApiRef } from '../../plugin';
 import { ButtonGroup, CatalogFilter } from './CatalogFilter';

 describe('Catalog Filter', () => {
@@ -28,11 +28,11 @@ import {
  ProfileInfo,
  storageApiRef,
 } from '@backstage/core';
+import { catalogApiRef } from '@backstage/plugin-catalog-react';
 import { MockStorageApi, wrapInTestApp } from '@backstage/test-utils';
 import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
 import { EntityFilterGroupsProvider } from '../../filter';
-import { catalogApiRef } from '../../plugin';
 import { CatalogPage } from './CatalogPage';

 describe('CatalogPage', () => {
@@ -22,6 +22,7 @@ import {
  SupportButton,
  useApi,
 } from '@backstage/core';
+import { catalogApiRef } from '@backstage/plugin-catalog-react';
 import { rootRoute as scaffolderRootRoute } from '@backstage/plugin-scaffolder';
 import { Button, makeStyles } from '@material-ui/core';
 import SettingsIcon from '@material-ui/icons/Settings';
@@ -30,14 +31,13 @@ import React, { useCallback, useMemo, useState } from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 import { EntityFilterGroupsProvider, useFilteredEntities } from '../../filter';
 import { useStarredEntities } from '../../hooks/useStarredEntities';
-import { catalogApiRef } from '../../plugin';
 import { ButtonGroup, CatalogFilter } from '../CatalogFilter/CatalogFilter';
 import { CatalogTable } from '../CatalogTable/CatalogTable';
+import { isOwnerOf } from '../isOwnerOf';
 import { ResultsFilter } from '../ResultsFilter/ResultsFilter';
+import { useOwnUser } from '../useOwnUser';
 import CatalogLayout from './CatalogLayout';
 import { CatalogTabs, LabeledComponentType } from './CatalogTabs';
-import { useOwnUser } from '../useOwnUser';
-import { isOwnerOf } from '../isOwnerOf';

 const useStyles = makeStyles(theme => ({
  contentWrapper: {
@@ -20,6 +20,11 @@ import {
  RELATION_PART_OF,
 } from '@backstage/catalog-model';
 import { Table, TableColumn, TableProps } from '@backstage/core';
+import {
+  EntityRefLink,
+  EntityRefLinks,
+  formatEntityRefTitle,
+} from '@backstage/plugin-catalog-react';
 import { Chip } from '@material-ui/core';
 import Edit from '@material-ui/icons/Edit';
 import OpenInNew from '@material-ui/icons/OpenInNew';
@@ -28,11 +33,6 @@ import React from 'react';
 import { findLocationForEntityMeta } from '../../data/utils';
 import { useStarredEntities } from '../../hooks/useStarredEntities';
 import { createEditLink } from '../createEditLink';
-import {
-  EntityRefLink,
-  EntityRefLinks,
-  formatEntityRefTitle,
-} from '../EntityRefLink';
 import {
  favouriteEntityIcon,
  favouriteEntityTooltip,
@@ -13,22 +13,21 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-import React from 'react';
-import { EntityLayout } from './EntityLayout';
+import { CatalogApi } from '@backstage/catalog-client';
+import { Entity } from '@backstage/catalog-model';
 import {
  AlertApi,
  alertApiRef,
  ApiProvider,
  ApiRegistry,
 } from '@backstage/core';
+import { catalogApiRef, EntityContext } from '@backstage/plugin-catalog-react';
 import { renderInTestApp, withLogCollector } from '@backstage/test-utils';
 import { fireEvent } from '@testing-library/react';
+import React from 'react';
 import { act } from 'react-dom/test-utils';
-import { Routes, Route } from 'react-router';
-import { Entity } from '@backstage/catalog-model';
-import { EntityContext } from '../../hooks/useEntity';
-import { catalogApiRef } from '../../plugin';
-import { CatalogApi } from '@backstage/catalog-client';
+import { Route, Routes } from 'react-router';
+import { EntityLayout } from './EntityLayout';

 const mockEntityData = {
  loading: false,
@@ -14,15 +14,6 @@
 * limitations under the License.
 */

-import React, {
-  Children,
-  Fragment,
-  PropsWithChildren,
-  ReactNode,
-  isValidElement,
-  useContext,
-  useState,
-} from 'react';
 import { Entity, ENTITY_DEFAULT_NAMESPACE } from '@backstage/catalog-model';
 import {
  attachComponentData,
@@ -32,14 +23,25 @@ import {
  Page,
  Progress,
 } from '@backstage/core';
+import {
+  EntityContext,
+  useEntityCompoundName,
+} from '@backstage/plugin-catalog-react';
 import { Box } from '@material-ui/core';
 import { Alert } from '@material-ui/lab';
+import React, {
+  Children,
+  Fragment,
+  isValidElement,
+  PropsWithChildren,
+  ReactNode,
+  useContext,
+  useState,
+} from 'react';
 import { useNavigate } from 'react-router';
-import { EntityContext } from '../../hooks/useEntity';
 import { EntityContextMenu } from '../EntityContextMenu/EntityContextMenu';
 import { FavouriteEntity } from '../FavouriteEntity/FavouriteEntity';
 import { UnregisterEntityDialog } from '../UnregisterEntityDialog/UnregisterEntityDialog';
-import { useEntityCompoundName } from '../useEntityCompoundName';
 import { TabbedLayout } from './TabbedLayout';

 type SubRoute = {
@@ -13,8 +13,11 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
+import {
+  EntityContext,
+  useEntityFromUrl,
+} from '@backstage/plugin-catalog-react';
 import React, { ReactNode } from 'react';
-import { useEntityFromUrl, EntityContext } from '../../hooks/useEntity';

 export const EntityLoaderProvider = ({ children }: { children: ReactNode }) => {
  const { entity, loading, error } = useEntityFromUrl();
@@ -19,11 +19,14 @@ import { Box } from '@material-ui/core';
 import { Alert } from '@material-ui/lab';
 import React, { PropsWithChildren, useContext, useState } from 'react';
 import { useNavigate } from 'react-router';
-import { EntityContext } from '../../hooks/useEntity';
+import {
+  EntityContext,
+  useEntityCompoundName,
+} from '@backstage/plugin-catalog-react';
 import { EntityContextMenu } from '../EntityContextMenu/EntityContextMenu';
 import { FavouriteEntity } from '../FavouriteEntity/FavouriteEntity';
 import { UnregisterEntityDialog } from '../UnregisterEntityDialog/UnregisterEntityDialog';
-import { useEntityCompoundName } from '../useEntityCompoundName';
+
 import { Tabbed } from './Tabbed';

 const EntityPageTitle = ({
@@ -14,12 +14,12 @@
 * limitations under the License.
 */

-import React from 'react';
-import { render } from '@testing-library/react';
-import { EntityContext } from '../../hooks/useEntity';
 import { Entity } from '@backstage/catalog-model';
-import { EntitySwitch } from './EntitySwitch';
+import { EntityContext } from '@backstage/plugin-catalog-react';
+import { render } from '@testing-library/react';
+import React from 'react';
 import { isKind } from './conditions';
+import { EntitySwitch } from './EntitySwitch';

 describe('EntitySwitch', () => {
  it('should switch child when entity switches', () => {
@@ -14,16 +14,16 @@
 * limitations under the License.
 */

+import { Entity } from '@backstage/catalog-model';
+import { useEntity } from '@backstage/plugin-catalog-react';
 import {
-  ReactNode,
-  PropsWithChildren,
  Children,
  Fragment,
-  useMemo,
  isValidElement,
+  PropsWithChildren,
+  ReactNode,
+  useMemo,
 } from 'react';
-import { useEntity } from '../../hooks/useEntity';
-import { Entity } from '@backstage/catalog-model';

 const EntitySwitchCase = (_: {
  if?: (entity: Entity) => boolean;
@@ -23,11 +23,11 @@ import {
  identityApiRef,
  storageApiRef,
 } from '@backstage/core';
+import { catalogApiRef } from '@backstage/plugin-catalog-react';
 import { MockStorageApi, wrapInTestApp } from '@backstage/test-utils';
 import { render } from '@testing-library/react';
 import React from 'react';
 import { EntityFilterGroupsProvider } from '../../filter';
-import { catalogApiRef } from '../../plugin';
 import { ResultsFilter } from './ResultsFilter';

 describe('Results Filter', () => {
@@ -15,15 +15,18 @@
 */
 import { ENTITY_DEFAULT_NAMESPACE } from '@backstage/catalog-model';
 import { Content } from '@backstage/core';
+import {
+  entityRoute,
+  rootRoute,
+  useEntity,
+} from '@backstage/plugin-catalog-react';
 import { Link, Typography } from '@material-ui/core';
 import React, { ComponentType } from 'react';
 import { Navigate, Route, Routes, useParams } from 'react-router';
-import { useEntity } from '../hooks/useEntity';
-import { entityRoute, rootRoute } from '../routes';
 import { CatalogPage } from './CatalogPage';
+import { EntityLoaderProvider } from './EntityLoaderProvider';
 import { EntityNotFound } from './EntityNotFound';
 import { EntityPageLayout } from './EntityPageLayout';
-import { EntityLoaderProvider } from './EntityLoaderProvider';

 const DefaultEntityPage = () => (
  <EntityPageLayout>
@@ -16,6 +16,10 @@

 import { Entity, ORIGIN_LOCATION_ANNOTATION } from '@backstage/catalog-model';
 import { alertApiRef, configApiRef, Progress, useApi } from '@backstage/core';
+import {
+  catalogApiRef,
+  formatEntityRefTitle,
+} from '@backstage/plugin-catalog-react';
 import {
  Button,
  Dialog,
@@ -31,8 +35,6 @@ import Alert from '@material-ui/lab/Alert';
 import React from 'react';
 import { useAsync } from 'react-use';
 import { AsyncState } from 'react-use/lib/useAsync';
-import { catalogApiRef } from '../../plugin';
-import { formatEntityRefTitle } from '../EntityRefLink';

 type Props = {
  open: boolean;
@@ -15,10 +15,10 @@
 */

 import { UserEntity } from '@backstage/catalog-model';
+import { identityApiRef, useApi } from '@backstage/core';
+import { catalogApiRef } from '@backstage/plugin-catalog-react';
 import { useAsync } from 'react-use';
 import { AsyncState } from 'react-use/lib/useAsync';
-import { identityApiRef, useApi } from '@backstage/core';
-import { catalogApiRef } from '../plugin';

 /**
 * Get the catalog User entity (if any) that matches the logged-in user.
@@ -15,7 +15,10 @@
 */

 import { createRoutableExtension } from '@backstage/core';
-import { catalogRouteRef, entityRouteRef } from './routes';
+import {
+  catalogRouteRef,
+  entityRouteRef,
+} from '@backstage/plugin-catalog-react';
 import { plugin } from './plugin';

 export const CatalogIndexPage = plugin.provide(
@@ -16,9 +16,9 @@

 import { Entity } from '@backstage/catalog-model';
 import { useApi } from '@backstage/core';
+import { catalogApiRef } from '@backstage/plugin-catalog-react';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useAsyncFn } from 'react-use';
-import { catalogApiRef } from '../plugin';
 import { filterGroupsContext, FilterGroupsContext } from './context';
 import {
  EntityFilterFn,
@@ -15,10 +15,10 @@
 */

 import { ApiProvider, ApiRegistry, storageApiRef } from '@backstage/core';
+import { catalogApiRef } from '@backstage/plugin-catalog-react';
 import { MockStorageApi } from '@backstage/test-utils';
 import { act, renderHook } from '@testing-library/react-hooks';
 import React from 'react';
-import { catalogApiRef } from '../plugin';
 import { EntityFilterGroupsProvider } from './EntityFilterGroupsProvider';
 import { FilterGroup, FilterGroupStatesReady } from './types';
 import { useEntityFilterGroup } from './useEntityFilterGroup';
@@ -14,15 +14,10 @@
 * limitations under the License.
 */

-export * from '@backstage/catalog-client';
 export { AboutCard } from './components/AboutCard';
-export { EntityPageLayout } from './components/EntityPageLayout';
 export { EntityLayout } from './components/EntityLayout';
-export { EntityProvider } from './components/EntityProvider';
+export { EntityPageLayout } from './components/EntityPageLayout';
 export * from './components/EntitySwitch';
 export { Router } from './components/Router';
-export { useEntityCompoundName } from './components/useEntityCompoundName';
-export { EntityContext, useEntity } from './hooks/useEntity';
-export { catalogApiRef, plugin } from './plugin';
-export * from './routes';
 export * from './extensions';
+export { plugin } from './plugin';
@@ -14,20 +14,17 @@
 * limitations under the License.
 */

-import { CatalogApi, CatalogClient } from '@backstage/catalog-client';
+import { CatalogClient } from '@backstage/catalog-client';
 import {
  createApiFactory,
-  createApiRef,
  createPlugin,
  discoveryApiRef,
 } from '@backstage/core';
-import { catalogRouteRef, entityRouteRef } from './routes';
-
-export const catalogApiRef = createApiRef<CatalogApi>({
-  id: 'plugin.catalog.service',
-  description:
-    'Used by the Catalog plugin to make requests to accompanying backend',
-});
+import {
+  catalogApiRef,
+  catalogRouteRef,
+  entityRouteRef,
+} from '@backstage/plugin-catalog-react';

 export const plugin = createPlugin({
  id: 'catalog',
@@ -33,7 +33,7 @@
  "dependencies": {
    "@backstage/catalog-model": "^0.7.0",
    "@backstage/core": "^0.5.0",
-    "@backstage/plugin-catalog": "^0.2.14",
+    "@backstage/plugin-catalog-react": "^0.0.1",
    "@backstage/theme": "^0.2.2",
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
@@ -15,14 +15,14 @@
 */

 import { errorApiRef, useApi } from '@backstage/core';
+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';
 import { circleCIApiRef } from '../api';
 import type { CITableBuildInfo } from '../components/BuildsPage/lib/CITable';
-import { useEntity } from '@backstage/plugin-catalog';
 import { CIRCLECI_ANNOTATION } from '../constants';
-import { getOr } from 'lodash/fp';

 const makeReadableStatus = (status: string | undefined) => {
  if (!status) return '';
@@ -32,7 +32,6 @@
  "dependencies": {
    "@backstage/catalog-model": "^0.7.0",
    "@backstage/core": "^0.5.0",
-    "@backstage/plugin-catalog": "^0.2.14",
    "@backstage/theme": "^0.2.2",
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
@@ -35,7 +35,6 @@
    "@backstage/catalog-model": "^0.7.0",
    "@backstage/core": "^0.5.0",
    "@backstage/integration": "^0.3.1",
-    "@backstage/plugin-catalog": "^0.2.14",
    "@backstage/theme": "^0.2.2",
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
@@ -33,7 +33,7 @@
  "dependencies": {
    "@backstage/catalog-model": "^0.7.0",
    "@backstage/core": "^0.5.0",
-    "@backstage/plugin-catalog": "^0.2.14",
+    "@backstage/plugin-catalog-react": "^0.0.1",
    "@backstage/theme": "^0.2.2",
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
@@ -13,7 +13,7 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-import { useEntity } from '@backstage/plugin-catalog';
+import { useEntity } from '@backstage/plugin-catalog-react';
 import { JENKINS_ANNOTATION } from '../constants';

 export const useProjectSlugFromEntity = () => {
@@ -22,7 +22,7 @@
  "dependencies": {
    "@backstage/catalog-model": "^0.7.0",
    "@backstage/core": "^0.5.0",
-    "@backstage/plugin-catalog": "^0.2.14",
+    "@backstage/plugin-catalog-react": "^0.0.1",
    "@backstage/theme": "^0.2.2",
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
@@ -13,11 +13,11 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-import React, { PropsWithChildren } from 'react';
-import { renderHook } from '@testing-library/react-hooks';
-import { useConsumerGroupsForEntity } from './useConsumerGroupsForEntity';
-import { EntityContext } from '@backstage/plugin-catalog';
 import { Entity } from '@backstage/catalog-model';
+import { EntityContext } from '@backstage/plugin-catalog-react';
+import { renderHook } from '@testing-library/react-hooks';
+import React, { PropsWithChildren } from 'react';
+import { useConsumerGroupsForEntity } from './useConsumerGroupsForEntity';

 describe('useConsumerGroupOffsets', () => {
  let entity: Entity;
@@ -14,7 +14,7 @@
 * limitations under the License.
 */

-import { useEntity } from '@backstage/plugin-catalog';
+import { useEntity } from '@backstage/plugin-catalog-react';
 import { useMemo } from 'react';
 import { KAFKA_CONSUMER_GROUP_ANNOTATION } from '../../constants';

@@ -13,19 +13,19 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-import React, { PropsWithChildren } from 'react';
-import { renderHook } from '@testing-library/react-hooks';
-import { EntityContext } from '@backstage/plugin-catalog';
 import { Entity } from '@backstage/catalog-model';
-import * as data from './__fixtures__/consumer-group-offsets.json';
+import { ApiProvider, ApiRegistry, errorApiRef } from '@backstage/core';
+import { EntityContext } from '@backstage/plugin-catalog-react';
+import { renderHook } from '@testing-library/react-hooks';
+import { when } from 'jest-when';
+import React, { PropsWithChildren } from 'react';
 import {
  ConsumerGroupOffsetsResponse,
  KafkaApi,
  kafkaApiRef,
 } from '../../api/types';
-import { ApiProvider, ApiRegistry, errorApiRef } from '@backstage/core';
 import { useConsumerGroupsOffsetsForEntity } from './useConsumerGroupsOffsetsForEntity';
-import { when } from 'jest-when';
+import * as data from './__fixtures__/consumer-group-offsets.json';

 const consumerGroupOffsets = data as ConsumerGroupOffsetsResponse;

@@ -34,7 +34,7 @@
    "@backstage/catalog-model": "^0.7.0",
    "@backstage/config": "^0.1.2",
    "@backstage/core": "^0.5.0",
-    "@backstage/plugin-catalog": "^0.2.14",
+    "@backstage/plugin-catalog-react": "^0.0.1",
    "@backstage/theme": "^0.2.2",
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
@@ -14,23 +14,22 @@
 * limitations under the License.
 */

-import React from 'react';
-import { render } from '@testing-library/react';
+import { Entity } from '@backstage/catalog-model';
 import { ApiProvider, ApiRegistry, errorApiRef } from '@backstage/core';
+import { EntityContext } from '@backstage/plugin-catalog-react';
+import { lightTheme } from '@backstage/theme';
+import { ThemeProvider } from '@material-ui/core';
+import { render } from '@testing-library/react';
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
 import {
  lighthouseApiRef,
  LighthouseRestApi,
  WebsiteListResponse,
 } from '../../api';
-
-import * as data from '../../__fixtures__/website-list-response.json';
-import { EntityContext } from '@backstage/plugin-catalog';
-import { Entity } from '@backstage/catalog-model';
-import { AuditListForEntity } from './AuditListForEntity';
-import { lightTheme } from '@backstage/theme';
-import { ThemeProvider } from '@material-ui/core';
-import { MemoryRouter } from 'react-router-dom';
 import { useWebsiteForEntity } from '../../hooks/useWebsiteForEntity';
+import * as data from '../../__fixtures__/website-list-response.json';
+import { AuditListForEntity } from './AuditListForEntity';

 jest.mock('../../hooks/useWebsiteForEntity', () => ({
  useWebsiteForEntity: jest.fn(),
@@ -14,21 +14,21 @@
 * limitations under the License.
 */

-import React from 'react';
+import { Entity } from '@backstage/catalog-model';
+import { EntityContext } from '@backstage/plugin-catalog-react';
+import { lightTheme } from '@backstage/theme';
+import { ThemeProvider } from '@material-ui/core';
 import { render } from '@testing-library/react';
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
 import {
  AuditCompleted,
  LighthouseCategoryId,
  WebsiteListResponse,
 } from '../../api';
-import { EntityContext } from '@backstage/plugin-catalog';
-import { Entity } from '@backstage/catalog-model';
-import { LastLighthouseAuditCard } from './LastLighthouseAuditCard';
-import { lightTheme } from '@backstage/theme';
-import { ThemeProvider } from '@material-ui/core';
 import { useWebsiteForEntity } from '../../hooks/useWebsiteForEntity';
-import { MemoryRouter } from 'react-router-dom';
 import * as data from '../../__fixtures__/website-list-response.json';
+import { LastLighthouseAuditCard } from './LastLighthouseAuditCard';

 jest.mock('../../hooks/useWebsiteForEntity', () => ({
  useWebsiteForEntity: jest.fn(),
@@ -13,14 +13,14 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-import React, { PropsWithChildren } from 'react';
-import { renderHook } from '@testing-library/react-hooks';
-import { ApiProvider, ApiRegistry, errorApiRef } from '@backstage/core';
-import { lighthouseApiRef, WebsiteListResponse } from '../api';
-import { useWebsiteForEntity } from './useWebsiteForEntity';
-import { EntityContext } from '@backstage/plugin-catalog';
 import { Entity } from '@backstage/catalog-model';
+import { ApiProvider, ApiRegistry, errorApiRef } from '@backstage/core';
+import { EntityContext } from '@backstage/plugin-catalog-react';
+import { renderHook } from '@testing-library/react-hooks';
+import React, { PropsWithChildren } from 'react';
+import { lighthouseApiRef, WebsiteListResponse } from '../api';
 import * as data from '../__fixtures__/website-list-response.json';
+import { useWebsiteForEntity } from './useWebsiteForEntity';

 const websiteListResponse = data as WebsiteListResponse;
 const website = websiteListResponse.items[0];
@@ -13,11 +13,11 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-import { useEntity } from '@backstage/plugin-catalog';
-import { LIGHTHOUSE_WEBSITE_URL_ANNOTATION } from '../../constants';
 import { errorApiRef, useApi } from '@backstage/core';
-import { lighthouseApiRef } from '../api';
+import { useEntity } from '@backstage/plugin-catalog-react';
 import { useAsync } from 'react-use';
+import { LIGHTHOUSE_WEBSITE_URL_ANNOTATION } from '../../constants';
+import { lighthouseApiRef } from '../api';

 // For the sake of simplicity we assume that an entity has only one website url. This is to avoid encoding a list
 // type in an annotation which is a plain string.
@@ -22,7 +22,7 @@
  "dependencies": {
    "@backstage/catalog-model": "^0.7.0",
    "@backstage/core": "^0.5.0",
-    "@backstage/plugin-catalog": "^0.2.14",
+    "@backstage/plugin-catalog-react": "^0.0.1",
    "@backstage/theme": "^0.2.2",
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
@@ -21,7 +21,7 @@ import {
  RELATION_PARENT_OF,
 } from '@backstage/catalog-model';
 import { Avatar, InfoCard } from '@backstage/core';
-import { entityRouteParams } from '@backstage/plugin-catalog';
+import { entityRouteParams } from '@backstage/plugin-catalog-react';
 import { Box, Grid, Link, Tooltip, Typography } from '@material-ui/core';
 import AccountTreeIcon from '@material-ui/icons/AccountTree';
 import EmailIcon from '@material-ui/icons/Email';
@@ -14,11 +14,11 @@
 * limitations under the License.
 */

+import { Entity, GroupEntity } from '@backstage/catalog-model';
+import { ApiProvider, ApiRegistry } from '@backstage/core';
+import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog-react';
 import { renderWithEffects, wrapInTestApp } from '@backstage/test-utils';
 import React from 'react';
-import { ApiProvider, ApiRegistry } from '@backstage/core';
-import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog';
-import { Entity, GroupEntity } from '@backstage/catalog-model';
 import { MembersListCard } from './MembersListCard';

 describe('MemberTab Test', () => {
@@ -20,7 +20,10 @@ import {
  UserEntity,
 } from '@backstage/catalog-model';
 import { Avatar, InfoCard, Progress, useApi } from '@backstage/core';
-import { catalogApiRef, entityRouteParams } from '@backstage/plugin-catalog';
+import {
+  catalogApiRef,
+  entityRouteParams,
+} from '@backstage/plugin-catalog-react';
 import {
  Box,
  createStyles,
@@ -17,7 +17,7 @@
 import React from 'react';
 import { InfoCard, useApi, Progress } from '@backstage/core';
 import { Entity } from '@backstage/catalog-model';
-import { catalogApiRef } from '@backstage/plugin-catalog';
+import { catalogApiRef } from '@backstage/plugin-catalog-react';
 import { useAsync } from 'react-use';
 import Alert from '@material-ui/lab/Alert';
 import {
@@ -19,7 +19,7 @@ import {
  UserEntity,
 } from '@backstage/catalog-model';
 import { Avatar, InfoCard } from '@backstage/core';
-import { entityRouteParams } from '@backstage/plugin-catalog';
+import { entityRouteParams } from '@backstage/plugin-catalog-react';
 import { Box, Grid, Link, Tooltip, Typography } from '@material-ui/core';
 import EmailIcon from '@material-ui/icons/Email';
 import GroupIcon from '@material-ui/icons/Group';
@@ -32,7 +32,7 @@
  "dependencies": {
    "@backstage/catalog-model": "^0.7.0",
    "@backstage/core": "^0.5.0",
-    "@backstage/plugin-catalog": "^0.2.14",
+    "@backstage/plugin-catalog-react": "^0.0.1",
    "@backstage/theme": "^0.2.2",
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
@@ -20,7 +20,7 @@ import {
  createRouteRef,
  errorApiRef,
 } from '@backstage/core';
-import { catalogApiRef } from '@backstage/plugin-catalog';
+import { catalogApiRef } from '@backstage/plugin-catalog-react';
 import { lightTheme } from '@backstage/theme';
 import { ThemeProvider } from '@material-ui/core';
 import { render, screen } from '@testing-library/react';
@@ -14,23 +14,23 @@
 * limitations under the License.
 */

-import React, { useState } from 'react';
-import { Grid, makeStyles } from '@material-ui/core';
+import { Entity, Location } from '@backstage/catalog-model';
 import {
-  InfoCard,
-  Page,
  Content,
-  useApi,
+  ContentHeader,
  errorApiRef,
  Header,
-  SupportButton,
-  ContentHeader,
+  InfoCard,
+  Page,
  RouteRef,
+  SupportButton,
+  useApi,
 } from '@backstage/core';
-import { RegisterComponentForm } from '../RegisterComponentForm';
-import { catalogApiRef } from '@backstage/plugin-catalog';
+import { catalogApiRef } from '@backstage/plugin-catalog-react';
+import { Grid, makeStyles } from '@material-ui/core';
+import React, { useState } from 'react';
 import { useMountedState } from 'react-use';
-import { Entity, Location } from '@backstage/catalog-model';
+import { RegisterComponentForm } from '../RegisterComponentForm';
 import { RegisterComponentResultDialog } from '../RegisterComponentResultDialog';

 const useStyles = makeStyles(theme => ({
@@ -16,7 +16,10 @@

 import { Entity } from '@backstage/catalog-model';
 import { RouteRef, StructuredMetadataTable } from '@backstage/core';
-import { entityRoute, entityRouteParams } from '@backstage/plugin-catalog';
+import {
+  entityRoute,
+  entityRouteParams,
+} from '@backstage/plugin-catalog-react';
 import {
  Button,
  Dialog,
@@ -33,7 +33,7 @@
  "dependencies": {
    "@backstage/catalog-model": "^0.7.0",
    "@backstage/core": "^0.5.0",
-    "@backstage/plugin-catalog": "^0.2.14",
+    "@backstage/plugin-catalog-react": "^0.0.1",
    "@backstage/theme": "^0.2.2",
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
@@ -21,7 +21,7 @@ import {
  ConfigApi,
  configApiRef,
 } from '@backstage/core';
-import { catalogApiRef, CatalogApi } from '@backstage/plugin-catalog';
+import { catalogApiRef, CatalogApi } from '@backstage/plugin-catalog-react';
 import { wrapInTestApp } from '@backstage/test-utils';
 import { render } from '@testing-library/react';
 import { RollbarApi, rollbarApiRef } from '../../api/RollbarApi';
@@ -14,19 +14,19 @@
 * limitations under the License.
 */

-import * as React from 'react';
 import {
  ApiProvider,
  ApiRegistry,
  ConfigApi,
  configApiRef,
 } from '@backstage/core';
+import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog-react';
 import { wrapInTestApp } from '@backstage/test-utils';
 import { render } from '@testing-library/react';
+import * as React from 'react';
 import { RollbarApi, rollbarApiRef } from '../../api/RollbarApi';
 import { RollbarTopActiveItem } from '../../api/types';
 import { RollbarProjectPage } from './RollbarProjectPage';
-import { catalogApiRef, CatalogApi } from '@backstage/plugin-catalog';

 describe('RollbarProjectPage component', () => {
  const items: RollbarTopActiveItem[] = [
@@ -14,12 +14,12 @@
 * limitations under the License.
 */

-import { useAsync } from 'react-use';
 import { useApi } from '@backstage/core';
 import {
  catalogApiRef,
  useEntityCompoundName,
-} from '@backstage/plugin-catalog';
+} from '@backstage/plugin-catalog-react';
+import { useAsync } from 'react-use';

 export function useCatalogEntity() {
  const catalogApi = useApi(catalogApiRef);
@@ -14,9 +14,9 @@
 * limitations under the License.
 */

+import { configApiRef, useApi } from '@backstage/core';
+import { catalogApiRef } from '@backstage/plugin-catalog-react';
 import { useAsync } from 'react-use';
-import { useApi, configApiRef } from '@backstage/core';
-import { catalogApiRef } from '@backstage/plugin-catalog';
 import { ROLLBAR_ANNOTATION } from '../constants';

 export function useRollbarEntities() {
@@ -32,7 +32,7 @@
  "dependencies": {
    "@backstage/catalog-model": "^0.7.0",
    "@backstage/core": "^0.5.0",
-    "@backstage/plugin-catalog": "^0.2.14",
+    "@backstage/plugin-catalog-react": "^0.0.1",
    "@backstage/theme": "^0.2.2",
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
@@ -27,7 +27,7 @@ import {
  useApi,
  WarningPanel,
 } from '@backstage/core';
-import { catalogApiRef } from '@backstage/plugin-catalog';
+import { catalogApiRef } from '@backstage/plugin-catalog-react';
 import { Button, Grid, Link, Typography } from '@material-ui/core';
 import React, { useEffect } from 'react';
 import { Link as RouterLink } from 'react-router-dom';
@@ -14,7 +14,7 @@
 * limitations under the License.
 */
 import { ApiProvider, ApiRegistry, errorApiRef } from '@backstage/core';
-import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog';
+import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog-react';
 import { renderInTestApp, renderWithEffects } from '@backstage/test-utils';
 import { lightTheme } from '@backstage/theme';
 import { ThemeProvider } from '@material-ui/core';
@@ -27,19 +27,19 @@ import {
  catalogApiRef,
  entityRoute,
  entityRouteParams,
-} from '@backstage/plugin-catalog';
+} from '@backstage/plugin-catalog-react';
 import { LinearProgress } from '@material-ui/core';
 import { IChangeEvent } from '@rjsf/core';
-import React, { useState, useCallback } from 'react';
+import parseGitUrl from 'git-url-parse';
+import React, { useCallback, useState } from 'react';
 import { generatePath, Navigate } from 'react-router';
 import { useParams } from 'react-router-dom';
 import { useAsync } from 'react-use';
 import { scaffolderApiRef } from '../../api';
 import { rootRoute } from '../../routes';
+import { useJobPolling } from '../hooks/useJobPolling';
 import { JobStatusModal } from '../JobStatusModal';
 import { MultistepJsonForm } from '../MultistepJsonForm';
-import { useJobPolling } from '../hooks/useJobPolling';
-import parseGitUrl from 'git-url-parse';

 const useTemplate = (
  templateName: string,
@@ -30,8 +30,8 @@
  },
  "dependencies": {
    "@backstage/core": "^0.5.0",
-    "@backstage/plugin-catalog": "^0.2.14",
    "@backstage/catalog-model": "^0.7.0",
+    "@backstage/plugin-catalog-react": "^0.0.1",
    "@backstage/theme": "^0.2.2",
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
@@ -14,8 +14,8 @@
 * limitations under the License.
 */

-import { CatalogApi } from '@backstage/plugin-catalog';
 import { Entity, ENTITY_DEFAULT_NAMESPACE } from '@backstage/catalog-model';
+import { CatalogApi } from '@backstage/plugin-catalog-react';

 export type Result = {
  name: string;
@@ -13,23 +13,21 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-import React, { useState, useEffect } from 'react';
-import { useAsync } from 'react-use';
-
-import { makeStyles, Typography, Grid, Divider } from '@material-ui/core';
-import { Alert } from '@material-ui/lab';
 import {
-  Link,
  EmptyState,
+  Link,
  Progress,
  Table,
  TableColumn,
  useApi,
 } from '@backstage/core';
-import { catalogApiRef } from '@backstage/plugin-catalog';
-
-import { FiltersButton, Filters, FiltersState } from '../Filters';
+import { catalogApiRef } from '@backstage/plugin-catalog-react';
+import { Divider, Grid, makeStyles, Typography } from '@material-ui/core';
+import { Alert } from '@material-ui/lab';
+import React, { useEffect, useState } from 'react';
+import { useAsync } from 'react-use';
 import SearchApi, { Result, SearchResults } from '../../apis';
+import { Filters, FiltersButton, FiltersState } from '../Filters';

 const useStyles = makeStyles(theme => ({
  searchQuery: {
@@ -15,17 +15,17 @@
 */

 import { Entity } from '@backstage/catalog-model';
-import { EntityProvider } from '@backstage/plugin-catalog';
 import { Content, Header, Page } from '@backstage/core';
 import { createDevApp, EntityGridItem } from '@backstage/dev-utils';
+import { EntityProvider } from '@backstage/plugin-catalog-react';
 import { Grid } from '@material-ui/core';
 import React from 'react';
 import {
+  EntitySentryCard,
+  EntitySentryContent,
  MockSentryApi,
  SentryApi,
  sentryApiRef,
-  EntitySentryCard,
-  EntitySentryContent,
 } from '../src';
 import { SENTRY_PROJECT_SLUG_ANNOTATION } from '../src/components/useProjectSlug';

@@ -33,7 +33,7 @@
  "dependencies": {
    "@backstage/catalog-model": "^0.7.0",
    "@backstage/core": "^0.5.0",
-    "@backstage/plugin-catalog": "^0.2.14",
+    "@backstage/plugin-catalog-react": "^0.0.1",
    "@backstage/theme": "^0.2.2",
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
@@ -14,12 +14,12 @@
 * limitations under the License.
 */

-import React from 'react';
 import {
  createComponentExtension,
  createRoutableExtension,
 } from '@backstage/core';
-import { useEntity } from '@backstage/plugin-catalog';
+import { useEntity } from '@backstage/plugin-catalog-react';
+import React from 'react';
 import { plugin, rootRouteRef } from './plugin';

 export const EntitySentryContent = plugin.provide(
@@ -33,7 +33,7 @@
  "dependencies": {
    "@backstage/catalog-model": "^0.7.0",
    "@backstage/core": "^0.5.0",
-    "@backstage/plugin-catalog": "^0.2.14",
+    "@backstage/plugin-catalog-react": "^0.0.1",
    "@backstage/test-utils": "^0.1.6",
    "@backstage/theme": "^0.2.2",
    "@backstage/techdocs-common": "^0.3.6",
@@ -15,7 +15,7 @@
 */

 import { ApiProvider, ApiRegistry } from '@backstage/core';
-import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog';
+import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog-react';
 import { wrapInTestApp } from '@backstage/test-utils';
 import { render } from '@testing-library/react';
 import React from 'react';
@@ -22,7 +22,7 @@ import {
  Progress,
  useApi,
 } from '@backstage/core';
-import { catalogApiRef } from '@backstage/plugin-catalog';
+import { catalogApiRef } from '@backstage/plugin-catalog-react';
 import { Grid } from '@material-ui/core';
 import React from 'react';
 import { generatePath, useNavigate } from 'react-router-dom';