From 9acdd257ddc31353300237855ab84c6b928aa4ea Mon Sep 17 00:00:00 2001
From: Alex Rybchenko <arybchenko@box.com>
Date: Tue, 28 Sep 2021 18:52:17 +0200
Subject: [PATCH 01/11] added "title" columns

Signed-off-by: Alex Rybchenko <arybchenko@box.com>
---
 .changeset/giant-eagles-talk.md                 |  6 ++++++
 .../src/components/EntityTable/columns.tsx      | 17 +++++++++++++++++
 .../src/components/CatalogTable/columns.tsx     | 14 ++++++++++++++
 3 files changed, 37 insertions(+)
 create mode 100644 .changeset/giant-eagles-talk.md

diff --git a/.changeset/giant-eagles-talk.md b/.changeset/giant-eagles-talk.md
new file mode 100644
index 0000000000..759719c2d9
--- /dev/null
+++ b/.changeset/giant-eagles-talk.md
@@ -0,0 +1,6 @@
+---
+'@backstage/plugin-catalog': minor
+'@backstage/plugin-catalog-react': minor
+---
+
+Added `createMetadataTitleColumn` to allow table column for `metadata.title` entity field
diff --git a/plugins/catalog-react/src/components/EntityTable/columns.tsx b/plugins/catalog-react/src/components/EntityTable/columns.tsx
index 6956d6a900..701a8a167c 100644
--- a/plugins/catalog-react/src/components/EntityTable/columns.tsx
+++ b/plugins/catalog-react/src/components/EntityTable/columns.tsx
@@ -150,6 +150,23 @@ export function createMetadataDescriptionColumn<
   };
 }
 
+export function createMetadataTitleColumn<
+  T extends Entity,
+>(): TableColumn<T> {
+  return {
+    title: 'Title',
+    field: 'metadata.title',
+    render: entity => (
+      <OverflowTooltip
+        text={entity.metadata.title}
+        placement="bottom-start"
+        line={2}
+      />
+    ),
+    width: 'auto',
+  };
+}
+
 export function createSpecLifecycleColumn<T extends Entity>(): TableColumn<T> {
   return {
     title: 'Lifecycle',
diff --git a/plugins/catalog/src/components/CatalogTable/columns.tsx b/plugins/catalog/src/components/CatalogTable/columns.tsx
index 60493d1847..389e11f3c4 100644
--- a/plugins/catalog/src/components/CatalogTable/columns.tsx
+++ b/plugins/catalog/src/components/CatalogTable/columns.tsx
@@ -94,6 +94,20 @@ export function createMetadataDescriptionColumn(): TableColumn<EntityRow> {
   };
 }
 
+export function createMetadataTitleColumn(): TableColumn<EntityRow> {
+  return {
+    title: 'Title',
+    field: 'entity.metadata.title',
+    render: ({ entity }) => (
+      <OverflowTooltip
+        text={entity.metadata.title}
+        placement="bottom-start"
+      />
+    ),
+    width: 'auto',
+  };
+}
+
 export function createTagsColumn(): TableColumn<EntityRow> {
   return {
     title: 'Tags',

From 9428a20365258c8cc8a5a8a97e96ee6eb95db7aa Mon Sep 17 00:00:00 2001
From: Alex Rybchenko <arybchenko@box.com>
Date: Tue, 28 Sep 2021 19:38:27 +0200
Subject: [PATCH 02/11] forgot to run Prettier

Signed-off-by: Alex Rybchenko <arybchenko@box.com>
---
 plugins/catalog-react/src/components/EntityTable/columns.tsx | 4 +---
 plugins/catalog/src/components/CatalogTable/columns.tsx      | 5 +----
 2 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/plugins/catalog-react/src/components/EntityTable/columns.tsx b/plugins/catalog-react/src/components/EntityTable/columns.tsx
index 701a8a167c..57aaa156e8 100644
--- a/plugins/catalog-react/src/components/EntityTable/columns.tsx
+++ b/plugins/catalog-react/src/components/EntityTable/columns.tsx
@@ -150,9 +150,7 @@ export function createMetadataDescriptionColumn<
   };
 }
 
-export function createMetadataTitleColumn<
-  T extends Entity,
->(): TableColumn<T> {
+export function createMetadataTitleColumn<T extends Entity>(): TableColumn<T> {
   return {
     title: 'Title',
     field: 'metadata.title',
diff --git a/plugins/catalog/src/components/CatalogTable/columns.tsx b/plugins/catalog/src/components/CatalogTable/columns.tsx
index 389e11f3c4..1ed0e1f72b 100644
--- a/plugins/catalog/src/components/CatalogTable/columns.tsx
+++ b/plugins/catalog/src/components/CatalogTable/columns.tsx
@@ -99,10 +99,7 @@ export function createMetadataTitleColumn(): TableColumn<EntityRow> {
     title: 'Title',
     field: 'entity.metadata.title',
     render: ({ entity }) => (
-      <OverflowTooltip
-        text={entity.metadata.title}
-        placement="bottom-start"
-      />
+      <OverflowTooltip text={entity.metadata.title} placement="bottom-start" />
     ),
     width: 'auto',
   };

From 954abc76cac432497b2ecdf0931f6e101c20d2d2 Mon Sep 17 00:00:00 2001
From: Alex Rybchenko <arybchenko@box.com>
Date: Wed, 29 Sep 2021 15:30:31 +0200
Subject: [PATCH 03/11] added optional `title` prop in EntityRefLink

Signed-off-by: Alex Rybchenko <arybchenko@box.com>
---
 .changeset/giant-eagles-talk.md               |  6 ----
 .../EntityRefLink/EntityRefLink.tsx           | 29 ++++++++++++-------
 .../src/components/EntityTable/columns.tsx    | 21 ++++----------
 .../src/components/CatalogTable/columns.tsx   | 12 +-------
 4 files changed, 24 insertions(+), 44 deletions(-)
 delete mode 100644 .changeset/giant-eagles-talk.md

diff --git a/.changeset/giant-eagles-talk.md b/.changeset/giant-eagles-talk.md
deleted file mode 100644
index 759719c2d9..0000000000
--- a/.changeset/giant-eagles-talk.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-'@backstage/plugin-catalog': minor
-'@backstage/plugin-catalog-react': minor
----
-
-Added `createMetadataTitleColumn` to allow table column for `metadata.title` entity field
diff --git a/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.tsx b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.tsx
index e220acc543..123c768e36 100644
--- a/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.tsx
+++ b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.tsx
@@ -19,20 +19,23 @@ import {
   ENTITY_DEFAULT_NAMESPACE,
 } from '@backstage/catalog-model';
 import React, { forwardRef } from 'react';
-import { generatePath } from 'react-router';
-import { entityRoute } from '../../routes';
+import { entityRouteRef } from '../../routes';
 import { formatEntityRefTitle } from './format';
 import { Link, LinkProps } from '@backstage/core-components';
+import { useRouteRef } from '@backstage/core-plugin-api';
+import { Tooltip } from '@material-ui/core';
 
 export type EntityRefLinkProps = {
   entityRef: Entity | EntityName;
   defaultKind?: string;
+  title?: string;
   children?: React.ReactNode;
 } & Omit<LinkProps, 'to'>;
 
 export const EntityRefLink = forwardRef<any, EntityRefLinkProps>(
   (props, ref) => {
-    const { entityRef, defaultKind, children, ...linkProps } = props;
+    const { entityRef, defaultKind, title, children, ...linkProps } = props;
+    const entityRoute = useRouteRef(entityRouteRef);
 
     let kind;
     let namespace;
@@ -57,16 +60,20 @@ export const EntityRefLink = forwardRef<any, EntityRefLinkProps>(
       name,
     };
 
-    // TODO: Use useRouteRef here to generate the path
-    return (
-      <Link
-        {...linkProps}
-        ref={ref}
-        to={generatePath(`/catalog/${entityRoute.path}`, routeParams)}
-      >
+    const link = (
+      <Link {...linkProps} ref={ref} to={entityRoute(routeParams)}>
         {children}
-        {!children && formatEntityRefTitle(entityRef, { defaultKind })}
+        {!children &&
+          (title ?? formatEntityRefTitle(entityRef, { defaultKind }))}
       </Link>
     );
+
+    return title ? (
+      <Tooltip title={formatEntityRefTitle(entityRef, { defaultKind })}>
+        {link}
+      </Tooltip>
+    ) : (
+      link
+    );
   },
 );
diff --git a/plugins/catalog-react/src/components/EntityTable/columns.tsx b/plugins/catalog-react/src/components/EntityTable/columns.tsx
index 57aaa156e8..9a48b2d554 100644
--- a/plugins/catalog-react/src/components/EntityTable/columns.tsx
+++ b/plugins/catalog-react/src/components/EntityTable/columns.tsx
@@ -58,7 +58,11 @@ export function createEntityRefColumn<T extends Entity>({
       return formatContent(entity1).localeCompare(formatContent(entity2));
     },
     render: entity => (
-      <EntityRefLink entityRef={entity} defaultKind={defaultKind} />
+      <EntityRefLink
+        entityRef={entity}
+        defaultKind={defaultKind}
+        title={entity.metadata?.title}
+      />
     ),
   };
 }
@@ -150,21 +154,6 @@ export function createMetadataDescriptionColumn<
   };
 }
 
-export function createMetadataTitleColumn<T extends Entity>(): TableColumn<T> {
-  return {
-    title: 'Title',
-    field: 'metadata.title',
-    render: entity => (
-      <OverflowTooltip
-        text={entity.metadata.title}
-        placement="bottom-start"
-        line={2}
-      />
-    ),
-    width: 'auto',
-  };
-}
-
 export function createSpecLifecycleColumn<T extends Entity>(): TableColumn<T> {
   return {
     title: 'Lifecycle',
diff --git a/plugins/catalog/src/components/CatalogTable/columns.tsx b/plugins/catalog/src/components/CatalogTable/columns.tsx
index 1ed0e1f72b..89c1a23966 100644
--- a/plugins/catalog/src/components/CatalogTable/columns.tsx
+++ b/plugins/catalog/src/components/CatalogTable/columns.tsx
@@ -34,6 +34,7 @@ export function createNameColumn(
       <EntityRefLink
         entityRef={entity}
         defaultKind={props?.defaultKind || 'Component'}
+        title={entity.metadata?.title}
       />
     ),
   };
@@ -94,17 +95,6 @@ export function createMetadataDescriptionColumn(): TableColumn<EntityRow> {
   };
 }
 
-export function createMetadataTitleColumn(): TableColumn<EntityRow> {
-  return {
-    title: 'Title',
-    field: 'entity.metadata.title',
-    render: ({ entity }) => (
-      <OverflowTooltip text={entity.metadata.title} placement="bottom-start" />
-    ),
-    width: 'auto',
-  };
-}
-
 export function createTagsColumn(): TableColumn<EntityRow> {
   return {
     title: 'Tags',

From 9648c4801564de941c1aa8194c20a0e33925a472 Mon Sep 17 00:00:00 2001
From: Alex Rybchenko <arybchenko@box.com>
Date: Wed, 29 Sep 2021 19:11:27 +0200
Subject: [PATCH 04/11] updated tests

Signed-off-by: Alex Rybchenko <arybchenko@box.com>
---
 .../EntityRefLink/EntityRefLink.test.tsx      | 80 ++++++++++++-------
 .../EntityRefLink/EntityRefLinks.test.tsx     | 30 ++++---
 .../components/EntityTable/presets.test.tsx   | 11 +++
 .../UnregisterEntityDialog.test.tsx           | 36 +++++++++
 4 files changed, 120 insertions(+), 37 deletions(-)

diff --git a/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.test.tsx b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.test.tsx
index 45411a9d5e..eaaaab39bc 100644
--- a/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.test.tsx
+++ b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.test.tsx
@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import { render } from '@testing-library/react';
+import { renderInTestApp } from '@backstage/test-utils';
 import React from 'react';
-import { MemoryRouter } from 'react-router';
+import { entityRouteRef } from '../../routes';
 import { EntityRefLink } from './EntityRefLink';
 
 describe('<EntityRefLink />', () => {
-  it('renders link for entity in default namespace', () => {
+  it('renders link for entity in default namespace', async () => {
     const entity = {
       apiVersion: 'v1',
       kind: 'Component',
@@ -33,9 +33,14 @@ describe('<EntityRefLink />', () => {
         lifecycle: 'production',
       },
     };
-    const { getByText } = render(<EntityRefLink entityRef={entity} />, {
-      wrapper: MemoryRouter,
-    });
+    const { getByText } = await renderInTestApp(
+      <EntityRefLink entityRef={entity} />,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name/*': entityRouteRef,
+        },
+      },
+    );
 
     expect(getByText('component:software')).toHaveAttribute(
       'href',
@@ -43,7 +48,7 @@ describe('<EntityRefLink />', () => {
     );
   });
 
-  it('renders link for entity in other namespace', () => {
+  it('renders link for entity in other namespace', async () => {
     const entity = {
       apiVersion: 'v1',
       kind: 'Component',
@@ -57,16 +62,21 @@ describe('<EntityRefLink />', () => {
         lifecycle: 'production',
       },
     };
-    const { getByText } = render(<EntityRefLink entityRef={entity} />, {
-      wrapper: MemoryRouter,
-    });
+    const { getByText } = await renderInTestApp(
+      <EntityRefLink entityRef={entity} />,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name/*': entityRouteRef,
+        },
+      },
+    );
     expect(getByText('component:test/software')).toHaveAttribute(
       'href',
       '/catalog/test/component/software',
     );
   });
 
-  it('renders link for entity and hides default kind', () => {
+  it('renders link for entity and hides default kind', async () => {
     const entity = {
       apiVersion: 'v1',
       kind: 'Component',
@@ -80,10 +90,12 @@ describe('<EntityRefLink />', () => {
         lifecycle: 'production',
       },
     };
-    const { getByText } = render(
+    const { getByText } = await renderInTestApp(
       <EntityRefLink entityRef={entity} defaultKind="Component" />,
       {
-        wrapper: MemoryRouter,
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name/*': entityRouteRef,
+        },
       },
     );
     expect(getByText('test/software')).toHaveAttribute(
@@ -92,46 +104,58 @@ describe('<EntityRefLink />', () => {
     );
   });
 
-  it('renders link for entity name in default namespace', () => {
+  it('renders link for entity name in default namespace', async () => {
     const entityName = {
       kind: 'Component',
       namespace: 'default',
       name: 'software',
     };
-    const { getByText } = render(<EntityRefLink entityRef={entityName} />, {
-      wrapper: MemoryRouter,
-    });
+    const { getByText } = await renderInTestApp(
+      <EntityRefLink entityRef={entityName} />,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name/*': entityRouteRef,
+        },
+      },
+    );
     expect(getByText('component:software')).toHaveAttribute(
       'href',
       '/catalog/default/component/software',
     );
   });
 
-  it('renders link for entity name in other namespace', () => {
+  it('renders link for entity name in other namespace', async () => {
     const entityName = {
       kind: 'Component',
       namespace: 'test',
       name: 'software',
     };
-    const { getByText } = render(<EntityRefLink entityRef={entityName} />, {
-      wrapper: MemoryRouter,
-    });
+    const { getByText } = await renderInTestApp(
+      <EntityRefLink entityRef={entityName} />,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name/*': entityRouteRef,
+        },
+      },
+    );
     expect(getByText('component:test/software')).toHaveAttribute(
       'href',
       '/catalog/test/component/software',
     );
   });
 
-  it('renders link for entity name and hides default kind', () => {
+  it('renders link for entity name and hides default kind', async () => {
     const entityName = {
       kind: 'Component',
       namespace: 'test',
       name: 'software',
     };
-    const { getByText } = render(
+    const { getByText } = await renderInTestApp(
       <EntityRefLink entityRef={entityName} defaultKind="component" />,
       {
-        wrapper: MemoryRouter,
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name/*': entityRouteRef,
+        },
       },
     );
     expect(getByText('test/software')).toHaveAttribute(
@@ -140,18 +164,20 @@ describe('<EntityRefLink />', () => {
     );
   });
 
-  it('renders link with custom children', () => {
+  it('renders link with custom children', async () => {
     const entityName = {
       kind: 'Component',
       namespace: 'test',
       name: 'software',
     };
-    const { getByText } = render(
+    const { getByText } = await renderInTestApp(
       <EntityRefLink entityRef={entityName} defaultKind="component">
         Custom Children
       </EntityRefLink>,
       {
-        wrapper: MemoryRouter,
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name/*': entityRouteRef,
+        },
       },
     );
     expect(getByText('Custom Children')).toHaveAttribute(
diff --git a/plugins/catalog-react/src/components/EntityRefLink/EntityRefLinks.test.tsx b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLinks.test.tsx
index 97817f3de9..147e139749 100644
--- a/plugins/catalog-react/src/components/EntityRefLink/EntityRefLinks.test.tsx
+++ b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLinks.test.tsx
@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import { render } from '@testing-library/react';
+import { renderInTestApp } from '@backstage/test-utils';
 import React from 'react';
-import { MemoryRouter } from 'react-router';
+import { entityRouteRef } from '../../routes';
 import { EntityRefLinks } from './EntityRefLinks';
 
 describe('<EntityRefLinks />', () => {
-  it('renders a single link', () => {
+  it('renders a single link', async () => {
     const entityNames = [
       {
         kind: 'Component',
@@ -28,16 +28,21 @@ describe('<EntityRefLinks />', () => {
         name: 'software',
       },
     ];
-    const { getByText } = render(<EntityRefLinks entityRefs={entityNames} />, {
-      wrapper: MemoryRouter,
-    });
+    const { getByText } = await renderInTestApp(
+      <EntityRefLinks entityRefs={entityNames} />,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name/*': entityRouteRef,
+        },
+      },
+    );
     expect(getByText('component:software')).toHaveAttribute(
       'href',
       '/catalog/default/component/software',
     );
   });
 
-  it('renders multiple links', () => {
+  it('renders multiple links', async () => {
     const entityNames = [
       {
         kind: 'Component',
@@ -50,9 +55,14 @@ describe('<EntityRefLinks />', () => {
         name: 'interface',
       },
     ];
-    const { getByText } = render(<EntityRefLinks entityRefs={entityNames} />, {
-      wrapper: MemoryRouter,
-    });
+    const { getByText } = await renderInTestApp(
+      <EntityRefLinks entityRefs={entityNames} />,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name/*': entityRouteRef,
+        },
+      },
+    );
     expect(getByText(',')).toBeInTheDocument();
     expect(getByText('component:software')).toHaveAttribute(
       'href',
diff --git a/plugins/catalog-react/src/components/EntityTable/presets.test.tsx b/plugins/catalog-react/src/components/EntityTable/presets.test.tsx
index 6e18508b1f..a509b67477 100644
--- a/plugins/catalog-react/src/components/EntityTable/presets.test.tsx
+++ b/plugins/catalog-react/src/components/EntityTable/presets.test.tsx
@@ -23,6 +23,7 @@ import {
 import { renderInTestApp } from '@backstage/test-utils';
 import { waitFor } from '@testing-library/react';
 import React from 'react';
+import { entityRouteRef } from '../../routes';
 import { EntityTable } from './EntityTable';
 import { componentEntityColumns, systemEntityColumns } from './presets';
 
@@ -68,6 +69,11 @@ describe('systemEntityColumns', () => {
         emptyContent={<div>EMPTY</div>}
         columns={systemEntityColumns}
       />,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name/*': entityRouteRef,
+        },
+      },
     );
 
     await waitFor(() => {
@@ -123,6 +129,11 @@ describe('componentEntityColumns', () => {
         emptyContent={<div>EMPTY</div>}
         columns={componentEntityColumns}
       />,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name/*': entityRouteRef,
+        },
+      },
     );
 
     await waitFor(() => {
diff --git a/plugins/catalog-react/src/components/UnregisterEntityDialog/UnregisterEntityDialog.test.tsx b/plugins/catalog-react/src/components/UnregisterEntityDialog/UnregisterEntityDialog.test.tsx
index 339323c1bf..eccf824c2e 100644
--- a/plugins/catalog-react/src/components/UnregisterEntityDialog/UnregisterEntityDialog.test.tsx
+++ b/plugins/catalog-react/src/components/UnregisterEntityDialog/UnregisterEntityDialog.test.tsx
@@ -22,6 +22,7 @@ import { UnregisterEntityDialog } from './UnregisterEntityDialog';
 import { ORIGIN_LOCATION_ANNOTATION } from '@backstage/catalog-model';
 import { CatalogClient } from '@backstage/catalog-client';
 import { catalogApiRef } from '../../api';
+import { entityRouteRef } from '../../routes';
 import { screen, waitFor } from '@testing-library/react';
 import { renderInTestApp } from '@backstage/test-utils';
 import * as state from './useUnregisterEntityDialogState';
@@ -89,6 +90,11 @@ describe('UnregisterEntityDialog', () => {
           entity={entity}
         />
       </Wrapper>,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name/*': entityRouteRef,
+        },
+      },
     );
 
     userEvent.click(screen.getByText('Cancel'));
@@ -110,6 +116,11 @@ describe('UnregisterEntityDialog', () => {
           entity={entity}
         />
       </Wrapper>,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name/*': entityRouteRef,
+        },
+      },
     );
 
     await waitFor(() => {
@@ -132,6 +143,11 @@ describe('UnregisterEntityDialog', () => {
           entity={entity}
         />
       </Wrapper>,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name/*': entityRouteRef,
+        },
+      },
     );
 
     await waitFor(() => {
@@ -159,6 +175,11 @@ describe('UnregisterEntityDialog', () => {
           entity={entity}
         />
       </Wrapper>,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name/*': entityRouteRef,
+        },
+      },
     );
 
     await waitFor(() => {
@@ -198,6 +219,11 @@ describe('UnregisterEntityDialog', () => {
           entity={entity}
         />
       </Wrapper>,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name/*': entityRouteRef,
+        },
+      },
     );
 
     await waitFor(() => {
@@ -239,6 +265,11 @@ describe('UnregisterEntityDialog', () => {
           entity={entity}
         />
       </Wrapper>,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name/*': entityRouteRef,
+        },
+      },
     );
 
     await waitFor(() => {
@@ -282,6 +313,11 @@ describe('UnregisterEntityDialog', () => {
           entity={entity}
         />
       </Wrapper>,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name/*': entityRouteRef,
+        },
+      },
     );
 
     await waitFor(() => {

From 5aae9bb61e1e4effe4f4e853dbbbfe0b599dddc6 Mon Sep 17 00:00:00 2001
From: Alex Rybchenko <arybchenko@box.com>
Date: Wed, 29 Sep 2021 19:14:43 +0200
Subject: [PATCH 05/11] added changeset

Signed-off-by: Alex Rybchenko <arybchenko@box.com>
---
 .changeset/few-sloths-raise.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/few-sloths-raise.md

diff --git a/.changeset/few-sloths-raise.md b/.changeset/few-sloths-raise.md
new file mode 100644
index 0000000000..3c53c92ae4
--- /dev/null
+++ b/.changeset/few-sloths-raise.md
@@ -0,0 +1,6 @@
+---
+'@backstage/plugin-catalog': minor
+'@backstage/plugin-catalog-react': minor
+---
+
+Name column will now render entity `metadata.title` if its present

From bc5f753e1d0776c3db3b46a4fc95bd1d11d0c031 Mon Sep 17 00:00:00 2001
From: Alex Rybchenko <arybchenko@box.com>
Date: Wed, 29 Sep 2021 19:18:22 +0200
Subject: [PATCH 06/11] refactored entityRefLink render

Signed-off-by: Alex Rybchenko <arybchenko@box.com>
---
 .../src/components/EntityRefLink/EntityRefLink.tsx     | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.tsx b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.tsx
index 123c768e36..02e63e60e3 100644
--- a/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.tsx
+++ b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.tsx
@@ -59,19 +59,19 @@ export const EntityRefLink = forwardRef<any, EntityRefLinkProps>(
         namespace?.toLocaleLowerCase('en-US') ?? ENTITY_DEFAULT_NAMESPACE,
       name,
     };
+    const formattedEntityRefTitle = formatEntityRefTitle(entityRef, {
+      defaultKind,
+    });
 
     const link = (
       <Link {...linkProps} ref={ref} to={entityRoute(routeParams)}>
         {children}
-        {!children &&
-          (title ?? formatEntityRefTitle(entityRef, { defaultKind }))}
+        {!children && (title ?? formattedEntityRefTitle)}
       </Link>
     );
 
     return title ? (
-      <Tooltip title={formatEntityRefTitle(entityRef, { defaultKind })}>
-        {link}
-      </Tooltip>
+      <Tooltip title={formattedEntityRefTitle}>{link}</Tooltip>
     ) : (
       link
     );

From 77c8b533754a2aeb5cbb5462013ac7c7d8e8086e Mon Sep 17 00:00:00 2001
From: Alex Rybchenko <arybchenko@box.com>
Date: Wed, 29 Sep 2021 20:01:55 +0200
Subject: [PATCH 07/11] updated changeset to `patch`

Signed-off-by: Alex Rybchenko <arybchenko@box.com>
---
 .changeset/few-sloths-raise.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.changeset/few-sloths-raise.md b/.changeset/few-sloths-raise.md
index 3c53c92ae4..ab0eac93d5 100644
--- a/.changeset/few-sloths-raise.md
+++ b/.changeset/few-sloths-raise.md
@@ -1,6 +1,6 @@
 ---
-'@backstage/plugin-catalog': minor
-'@backstage/plugin-catalog-react': minor
+'@backstage/plugin-catalog': patch
+'@backstage/plugin-catalog-react': patch
 ---
 
 Name column will now render entity `metadata.title` if its present

From 905ed155082c199eb3413de5ee4594dbdf01964a Mon Sep 17 00:00:00 2001
From: Alex Rybchenko <arybchenko@box.com>
Date: Thu, 30 Sep 2021 00:20:38 +0200
Subject: [PATCH 08/11] updated FossaPage test

Signed-off-by: Alex Rybchenko <arybchenko@box.com>
---
 .../fossa/src/components/FossaPage/FossaPage.test.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/plugins/fossa/src/components/FossaPage/FossaPage.test.tsx b/plugins/fossa/src/components/FossaPage/FossaPage.test.tsx
index b9edb0746a..c7fca26a3b 100644
--- a/plugins/fossa/src/components/FossaPage/FossaPage.test.tsx
+++ b/plugins/fossa/src/components/FossaPage/FossaPage.test.tsx
@@ -15,7 +15,11 @@
  */
 
 import { Entity } from '@backstage/catalog-model';
-import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog-react';
+import {
+  CatalogApi,
+  catalogApiRef,
+  entityRouteRef,
+} from '@backstage/plugin-catalog-react';
 import { renderInTestApp } from '@backstage/test-utils';
 import React from 'react';
 import { FossaApi, fossaApiRef } from '../../api';
@@ -125,6 +129,11 @@ describe('<FossaPage />', () => {
       <Wrapper>
         <FossaPage />
       </Wrapper>,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name/*': entityRouteRef,
+        },
+      },
     );
 
     expect(getAllByText(/Not configured/i)).toHaveLength(2);

From 0a53f042c0bafc594a772da6e9cb4259f8ca10f9 Mon Sep 17 00:00:00 2001
From: Alex Rybchenko <arybchenko@box.com>
Date: Fri, 1 Oct 2021 15:26:29 +0200
Subject: [PATCH 09/11] updated AboutCard test

Signed-off-by: Alex Rybchenko <arybchenko@box.com>
---
 .../AboutCard/AboutContent.test.tsx           | 71 +++++++++++++++++++
 1 file changed, 71 insertions(+)

diff --git a/plugins/catalog/src/components/AboutCard/AboutContent.test.tsx b/plugins/catalog/src/components/AboutCard/AboutContent.test.tsx
index a1d16363a5..860ef2c532 100644
--- a/plugins/catalog/src/components/AboutCard/AboutContent.test.tsx
+++ b/plugins/catalog/src/components/AboutCard/AboutContent.test.tsx
@@ -19,6 +19,7 @@ import {
   RELATION_OWNED_BY,
   RELATION_PART_OF,
 } from '@backstage/catalog-model';
+import { entityRouteRef } from '@backstage/plugin-catalog-react';
 import { renderInTestApp } from '@backstage/test-utils';
 import React from 'react';
 import { AboutContent } from './AboutContent';
@@ -75,6 +76,11 @@ describe('<AboutContent />', () => {
     it('renders info', async () => {
       const { getByText, queryByText } = await renderInTestApp(
         <AboutContent entity={entity} />,
+        {
+          mountedRoutes: {
+            '/catalog/:namespace/:kind/:name': entityRouteRef,
+          },
+        },
       );
 
       expect(getByText('Description')).toBeInTheDocument();
@@ -103,6 +109,11 @@ describe('<AboutContent />', () => {
 
       const { getByText, queryByText } = await renderInTestApp(
         <AboutContent entity={entity} />,
+        {
+          mountedRoutes: {
+            '/catalog/:namespace/:kind/:name': entityRouteRef,
+          },
+        },
       );
 
       expect(getByText('Description')).toBeInTheDocument();
@@ -162,6 +173,11 @@ describe('<AboutContent />', () => {
     it('renders info', async () => {
       const { getByText, queryByText } = await renderInTestApp(
         <AboutContent entity={entity} />,
+        {
+          mountedRoutes: {
+            '/catalog/:namespace/:kind/:name': entityRouteRef,
+          },
+        },
       );
 
       expect(getByText('Description')).toBeInTheDocument();
@@ -193,6 +209,11 @@ describe('<AboutContent />', () => {
 
       const { getByText, queryByText } = await renderInTestApp(
         <AboutContent entity={entity} />,
+        {
+          mountedRoutes: {
+            '/catalog/:namespace/:kind/:name': entityRouteRef,
+          },
+        },
       );
 
       expect(getByText('Description')).toBeInTheDocument();
@@ -265,6 +286,11 @@ describe('<AboutContent />', () => {
     it('renders info', async () => {
       const { getByText, queryByText } = await renderInTestApp(
         <AboutContent entity={entity} />,
+        {
+          mountedRoutes: {
+            '/catalog/:namespace/:kind/:name': entityRouteRef,
+          },
+        },
       );
 
       expect(getByText('Description')).toBeInTheDocument();
@@ -299,6 +325,11 @@ describe('<AboutContent />', () => {
 
       const { getByText, queryByText } = await renderInTestApp(
         <AboutContent entity={entity} />,
+        {
+          mountedRoutes: {
+            '/catalog/:namespace/:kind/:name': entityRouteRef,
+          },
+        },
       );
 
       expect(getByText('Description')).toBeInTheDocument();
@@ -351,6 +382,11 @@ describe('<AboutContent />', () => {
     it('renders info', async () => {
       const { getByText, queryByText } = await renderInTestApp(
         <AboutContent entity={entity} />,
+        {
+          mountedRoutes: {
+            '/catalog/:namespace/:kind/:name': entityRouteRef,
+          },
+        },
       );
 
       expect(getByText('Description')).toBeInTheDocument();
@@ -374,6 +410,11 @@ describe('<AboutContent />', () => {
 
       const { getByText, queryByText } = await renderInTestApp(
         <AboutContent entity={entity} />,
+        {
+          mountedRoutes: {
+            '/catalog/:namespace/:kind/:name': entityRouteRef,
+          },
+        },
       );
 
       expect(getByText('Description')).toBeInTheDocument();
@@ -414,6 +455,11 @@ describe('<AboutContent />', () => {
     it('renders info', async () => {
       const { getByText, queryByText } = await renderInTestApp(
         <AboutContent entity={entity} />,
+        {
+          mountedRoutes: {
+            '/catalog/:namespace/:kind/:name': entityRouteRef,
+          },
+        },
       );
 
       expect(getByText('Description')).toBeInTheDocument();
@@ -438,6 +484,11 @@ describe('<AboutContent />', () => {
 
       const { getByText, queryByText } = await renderInTestApp(
         <AboutContent entity={entity} />,
+        {
+          mountedRoutes: {
+            '/catalog/:namespace/:kind/:name': entityRouteRef,
+          },
+        },
       );
 
       expect(getByText('Description')).toBeInTheDocument();
@@ -498,6 +549,11 @@ describe('<AboutContent />', () => {
     it('renders info', async () => {
       const { getByText, queryByText } = await renderInTestApp(
         <AboutContent entity={entity} />,
+        {
+          mountedRoutes: {
+            '/catalog/:namespace/:kind/:name': entityRouteRef,
+          },
+        },
       );
 
       expect(getByText('Description')).toBeInTheDocument();
@@ -525,6 +581,11 @@ describe('<AboutContent />', () => {
 
       const { getByText, queryByText } = await renderInTestApp(
         <AboutContent entity={entity} />,
+        {
+          mountedRoutes: {
+            '/catalog/:namespace/:kind/:name': entityRouteRef,
+          },
+        },
       );
 
       expect(getByText('Description')).toBeInTheDocument();
@@ -585,6 +646,11 @@ describe('<AboutContent />', () => {
     it('renders info', async () => {
       const { getByText, queryByText } = await renderInTestApp(
         <AboutContent entity={entity} />,
+        {
+          mountedRoutes: {
+            '/catalog/:namespace/:kind/:name': entityRouteRef,
+          },
+        },
       );
 
       expect(getByText('Description')).toBeInTheDocument();
@@ -610,6 +676,11 @@ describe('<AboutContent />', () => {
 
       const { getByText, queryByText } = await renderInTestApp(
         <AboutContent entity={entity} />,
+        {
+          mountedRoutes: {
+            '/catalog/:namespace/:kind/:name': entityRouteRef,
+          },
+        },
       );
 
       expect(getByText('Description')).toBeInTheDocument();

From 590062d52108c26a15dd933e26c1632a397d1ebb Mon Sep 17 00:00:00 2001
From: Alex Rybchenko <arybchenko@box.com>
Date: Fri, 1 Oct 2021 19:34:41 +0200
Subject: [PATCH 10/11] added mountedRoutes in plugin-catalog tests

Signed-off-by: Alex Rybchenko <arybchenko@box.com>
---
 .../components/AboutCard/AboutCard.test.tsx   | 42 +++++++++++++++++++
 .../CatalogPage/CatalogPage.test.tsx          |  3 +-
 .../CatalogTable/CatalogTable.test.tsx        | 21 ++++++++++
 .../DependencyOfComponentsCard.test.tsx       | 11 +++++
 .../DependsOnComponentsCard.test.tsx          | 11 +++++
 .../DependsOnResourcesCard.test.tsx           | 11 +++++
 .../EntityLayout/EntityLayout.test.tsx        | 26 ++++++++++++
 .../HasComponentsCard.test.tsx                | 11 +++++
 .../HasResourcesCard.test.tsx                 |  6 +++
 .../HasSubcomponentsCard.test.tsx             | 11 +++++
 .../HasSystemsCard/HasSystemsCard.test.tsx    | 11 +++++
 11 files changed, 163 insertions(+), 1 deletion(-)

diff --git a/plugins/catalog/src/components/AboutCard/AboutCard.test.tsx b/plugins/catalog/src/components/AboutCard/AboutCard.test.tsx
index 3b64ee6b73..d6f13ed22d 100644
--- a/plugins/catalog/src/components/AboutCard/AboutCard.test.tsx
+++ b/plugins/catalog/src/components/AboutCard/AboutCard.test.tsx
@@ -28,6 +28,7 @@ import {
   catalogApiRef,
   EntityProvider,
   CatalogApi,
+  entityRouteRef,
 } from '@backstage/plugin-catalog-react';
 import { renderInTestApp } from '@backstage/test-utils';
 import userEvent from '@testing-library/user-event';
@@ -85,6 +86,11 @@ describe('<AboutCard />', () => {
           <AboutCard />
         </EntityProvider>
       </ApiProvider>,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name': entityRouteRef,
+        },
+      },
     );
 
     expect(getByText('service')).toBeInTheDocument();
@@ -132,6 +138,11 @@ describe('<AboutCard />', () => {
           <AboutCard />
         </EntityProvider>
       </ApiProvider>,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name': entityRouteRef,
+        },
+      },
     );
     expect(getByText('View Source').closest('a')).toHaveAttribute(
       'href',
@@ -178,6 +189,11 @@ describe('<AboutCard />', () => {
           <AboutCard />
         </EntityProvider>
       </ApiProvider>,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name': entityRouteRef,
+        },
+      },
     );
 
     const editLink = getByTitle('Edit Metadata').closest('a');
@@ -211,6 +227,11 @@ describe('<AboutCard />', () => {
           <AboutCard />
         </EntityProvider>
       </ApiProvider>,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name': entityRouteRef,
+        },
+      },
     );
     expect(getByText('View Source').closest('a')).not.toHaveAttribute('href');
   });
@@ -243,6 +264,11 @@ describe('<AboutCard />', () => {
           <AboutCard />
         </EntityProvider>
       </ApiProvider>,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name': entityRouteRef,
+        },
+      },
     );
 
     expect(catalogApi.refreshEntity).not.toHaveBeenCalledWith(
@@ -280,6 +306,11 @@ describe('<AboutCard />', () => {
           <AboutCard />
         </EntityProvider>
       </ApiProvider>,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name': entityRouteRef,
+        },
+      },
     );
 
     expect(queryByTitle('Schedule entity refresh')).not.toBeInTheDocument();
@@ -326,6 +357,7 @@ describe('<AboutCard />', () => {
       {
         mountedRoutes: {
           '/docs/:namespace/:kind/:name': viewTechDocRouteRef,
+          '/catalog/:namespace/:kind/:name': entityRouteRef,
         },
       },
     );
@@ -371,6 +403,11 @@ describe('<AboutCard />', () => {
           <AboutCard />
         </EntityProvider>
       </ApiProvider>,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name': entityRouteRef,
+        },
+      },
     );
 
     expect(getByText('View TechDocs').closest('a')).not.toHaveAttribute('href');
@@ -414,6 +451,11 @@ describe('<AboutCard />', () => {
           <AboutCard />
         </EntityProvider>
       </ApiProvider>,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name': entityRouteRef,
+        },
+      },
     );
 
     expect(getByText('View TechDocs').closest('a')).not.toHaveAttribute('href');
diff --git a/plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx b/plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx
index 15f72b32ea..48ec1ef176 100644
--- a/plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx
+++ b/plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx
@@ -21,7 +21,7 @@ import {
   RELATION_OWNED_BY,
 } from '@backstage/catalog-model';
 import { TableColumn, TableProps } from '@backstage/core-components';
-import { catalogApiRef } from '@backstage/plugin-catalog-react';
+import { catalogApiRef, entityRouteRef } from '@backstage/plugin-catalog-react';
 import {
   MockStorageApi,
   renderWithEffects,
@@ -136,6 +136,7 @@ describe('CatalogPage', () => {
         {
           mountedRoutes: {
             '/create': createComponentRouteRef,
+            '/catalog/:namespace/:kind/:name': entityRouteRef,
           },
         },
       ),
diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.test.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.test.tsx
index efbd6989e4..6c80e64fa9 100644
--- a/plugins/catalog/src/components/CatalogTable/CatalogTable.test.tsx
+++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.test.tsx
@@ -24,6 +24,7 @@ import { renderInTestApp } from '@backstage/test-utils';
 import * as React from 'react';
 import { CatalogTable } from './CatalogTable';
 import {
+  entityRouteRef,
   MockEntityListContextProvider,
   UserListFilter,
 } from '@backstage/plugin-catalog-react';
@@ -60,6 +61,11 @@ describe('CatalogTable component', () => {
       <MockEntityListContextProvider value={{ error: new Error('error') }}>
         <CatalogTable />
       </MockEntityListContextProvider>,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name': entityRouteRef,
+        },
+      },
     );
     const errorMessage = await rendered.findByText(
       /Could not fetch catalog entities./,
@@ -83,6 +89,11 @@ describe('CatalogTable component', () => {
       >
         <CatalogTable />
       </MockEntityListContextProvider>,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name': entityRouteRef,
+        },
+      },
     );
     expect(rendered.getByText(/Owned \(3\)/)).toBeInTheDocument();
     expect(rendered.getByText(/component1/)).toBeInTheDocument();
@@ -104,6 +115,11 @@ describe('CatalogTable component', () => {
       <MockEntityListContextProvider value={{ entities: [entity] }}>
         <CatalogTable />
       </MockEntityListContextProvider>,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name': entityRouteRef,
+        },
+      },
     );
 
     const editButton = getByTitle('Edit');
@@ -129,6 +145,11 @@ describe('CatalogTable component', () => {
       <MockEntityListContextProvider value={{ entities: [entity] }}>
         <CatalogTable />
       </MockEntityListContextProvider>,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name': entityRouteRef,
+        },
+      },
     );
 
     const viewButton = getByTitle('View');
diff --git a/plugins/catalog/src/components/DependencyOfComponentsCard/DependencyOfComponentsCard.test.tsx b/plugins/catalog/src/components/DependencyOfComponentsCard/DependencyOfComponentsCard.test.tsx
index 7f703ef912..7dd823a8f0 100644
--- a/plugins/catalog/src/components/DependencyOfComponentsCard/DependencyOfComponentsCard.test.tsx
+++ b/plugins/catalog/src/components/DependencyOfComponentsCard/DependencyOfComponentsCard.test.tsx
@@ -19,6 +19,7 @@ import {
   CatalogApi,
   catalogApiRef,
   EntityProvider,
+  entityRouteRef,
 } from '@backstage/plugin-catalog-react';
 import { renderInTestApp } from '@backstage/test-utils';
 import { waitFor } from '@testing-library/react';
@@ -64,6 +65,11 @@ describe('<DependencyOfComponentsCard />', () => {
           <DependencyOfComponentsCard />
         </EntityProvider>
       </Wrapper>,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name': entityRouteRef,
+        },
+      },
     );
 
     expect(getByText('Dependency of components')).toBeInTheDocument();
@@ -111,6 +117,11 @@ describe('<DependencyOfComponentsCard />', () => {
           <DependencyOfComponentsCard />
         </EntityProvider>
       </Wrapper>,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name': entityRouteRef,
+        },
+      },
     );
 
     await waitFor(() => {
diff --git a/plugins/catalog/src/components/DependsOnComponentsCard/DependsOnComponentsCard.test.tsx b/plugins/catalog/src/components/DependsOnComponentsCard/DependsOnComponentsCard.test.tsx
index f57d3c5e4d..b9fd75def9 100644
--- a/plugins/catalog/src/components/DependsOnComponentsCard/DependsOnComponentsCard.test.tsx
+++ b/plugins/catalog/src/components/DependsOnComponentsCard/DependsOnComponentsCard.test.tsx
@@ -19,6 +19,7 @@ import {
   CatalogApi,
   catalogApiRef,
   EntityProvider,
+  entityRouteRef,
 } from '@backstage/plugin-catalog-react';
 import { renderInTestApp } from '@backstage/test-utils';
 import { waitFor } from '@testing-library/react';
@@ -64,6 +65,11 @@ describe('<DependsOnComponentsCard />', () => {
           <DependsOnComponentsCard />
         </EntityProvider>
       </Wrapper>,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name': entityRouteRef,
+        },
+      },
     );
 
     expect(getByText('Depends on components')).toBeInTheDocument();
@@ -111,6 +117,11 @@ describe('<DependsOnComponentsCard />', () => {
           <DependsOnComponentsCard />
         </EntityProvider>
       </Wrapper>,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name': entityRouteRef,
+        },
+      },
     );
 
     await waitFor(() => {
diff --git a/plugins/catalog/src/components/DependsOnResourcesCard/DependsOnResourcesCard.test.tsx b/plugins/catalog/src/components/DependsOnResourcesCard/DependsOnResourcesCard.test.tsx
index f9729e561c..bee759254c 100644
--- a/plugins/catalog/src/components/DependsOnResourcesCard/DependsOnResourcesCard.test.tsx
+++ b/plugins/catalog/src/components/DependsOnResourcesCard/DependsOnResourcesCard.test.tsx
@@ -19,6 +19,7 @@ import {
   CatalogApi,
   catalogApiRef,
   EntityProvider,
+  entityRouteRef,
 } from '@backstage/plugin-catalog-react';
 import { renderInTestApp } from '@backstage/test-utils';
 import { waitFor } from '@testing-library/react';
@@ -64,6 +65,11 @@ describe('<DependsOnResourcesCard />', () => {
           <DependsOnResourcesCard />
         </EntityProvider>
       </Wrapper>,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name': entityRouteRef,
+        },
+      },
     );
 
     expect(getByText('Depends on resources')).toBeInTheDocument();
@@ -111,6 +117,11 @@ describe('<DependsOnResourcesCard />', () => {
           <DependsOnResourcesCard />
         </EntityProvider>
       </Wrapper>,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name': entityRouteRef,
+        },
+      },
     );
 
     await waitFor(() => {
diff --git a/plugins/catalog/src/components/EntityLayout/EntityLayout.test.tsx b/plugins/catalog/src/components/EntityLayout/EntityLayout.test.tsx
index ad0d3bceb4..7722f6ba17 100644
--- a/plugins/catalog/src/components/EntityLayout/EntityLayout.test.tsx
+++ b/plugins/catalog/src/components/EntityLayout/EntityLayout.test.tsx
@@ -19,6 +19,7 @@ import {
   catalogApiRef,
   EntityProvider,
   AsyncEntityProvider,
+  entityRouteRef,
 } from '@backstage/plugin-catalog-react';
 import { renderInTestApp } from '@backstage/test-utils';
 import { fireEvent } from '@testing-library/react';
@@ -54,6 +55,11 @@ describe('EntityLayout', () => {
           </EntityLayout>
         </EntityProvider>
       </ApiProvider>,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name': entityRouteRef,
+        },
+      },
     );
 
     expect(rendered.getByText('my-entity')).toBeInTheDocument();
@@ -80,6 +86,11 @@ describe('EntityLayout', () => {
           </EntityLayout>
         </EntityProvider>
       </ApiProvider>,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name': entityRouteRef,
+        },
+      },
     );
 
     expect(rendered.getByText('My Entity')).toBeInTheDocument();
@@ -98,6 +109,11 @@ describe('EntityLayout', () => {
           </EntityLayout>
         </AsyncEntityProvider>
       </ApiProvider>,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name': entityRouteRef,
+        },
+      },
     );
 
     expect(rendered.getByText('Warning: Entity not found')).toBeInTheDocument();
@@ -130,6 +146,11 @@ describe('EntityLayout', () => {
           }
         />
       </Routes>,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name': entityRouteRef,
+        },
+      },
     );
 
     const secondTab = rendered.queryAllByRole('tab')[1];
@@ -172,6 +193,11 @@ describe('EntityLayout', () => {
           </EntityLayout>
         </EntityProvider>
       </ApiProvider>,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name': entityRouteRef,
+        },
+      },
     );
 
     expect(rendered.queryByText('tabbed-test-title')).toBeInTheDocument();
diff --git a/plugins/catalog/src/components/HasComponentsCard/HasComponentsCard.test.tsx b/plugins/catalog/src/components/HasComponentsCard/HasComponentsCard.test.tsx
index 91d9663f8d..d484ab026a 100644
--- a/plugins/catalog/src/components/HasComponentsCard/HasComponentsCard.test.tsx
+++ b/plugins/catalog/src/components/HasComponentsCard/HasComponentsCard.test.tsx
@@ -19,6 +19,7 @@ import {
   CatalogApi,
   catalogApiRef,
   EntityProvider,
+  entityRouteRef,
 } from '@backstage/plugin-catalog-react';
 import { renderInTestApp } from '@backstage/test-utils';
 import { waitFor } from '@testing-library/react';
@@ -64,6 +65,11 @@ describe('<HasComponentsCard />', () => {
           <HasComponentsCard />
         </EntityProvider>
       </Wrapper>,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name': entityRouteRef,
+        },
+      },
     );
 
     expect(getByText('Has components')).toBeInTheDocument();
@@ -111,6 +117,11 @@ describe('<HasComponentsCard />', () => {
           <HasComponentsCard />
         </EntityProvider>
       </Wrapper>,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name': entityRouteRef,
+        },
+      },
     );
 
     await waitFor(() => {
diff --git a/plugins/catalog/src/components/HasResourcesCard/HasResourcesCard.test.tsx b/plugins/catalog/src/components/HasResourcesCard/HasResourcesCard.test.tsx
index 6dcf2ca9fc..45604ceb56 100644
--- a/plugins/catalog/src/components/HasResourcesCard/HasResourcesCard.test.tsx
+++ b/plugins/catalog/src/components/HasResourcesCard/HasResourcesCard.test.tsx
@@ -19,6 +19,7 @@ import {
   CatalogApi,
   catalogApiRef,
   EntityProvider,
+  entityRouteRef,
 } from '@backstage/plugin-catalog-react';
 import { renderInTestApp } from '@backstage/test-utils';
 import { waitFor } from '@testing-library/react';
@@ -111,6 +112,11 @@ describe('<HasResourcesCard />', () => {
           <HasResourcesCard />
         </EntityProvider>
       </Wrapper>,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name': entityRouteRef,
+        },
+      },
     );
 
     await waitFor(() => {
diff --git a/plugins/catalog/src/components/HasSubcomponentsCard/HasSubcomponentsCard.test.tsx b/plugins/catalog/src/components/HasSubcomponentsCard/HasSubcomponentsCard.test.tsx
index 46281b43be..431e757656 100644
--- a/plugins/catalog/src/components/HasSubcomponentsCard/HasSubcomponentsCard.test.tsx
+++ b/plugins/catalog/src/components/HasSubcomponentsCard/HasSubcomponentsCard.test.tsx
@@ -19,6 +19,7 @@ import {
   CatalogApi,
   catalogApiRef,
   EntityProvider,
+  entityRouteRef,
 } from '@backstage/plugin-catalog-react';
 import { renderInTestApp } from '@backstage/test-utils';
 import { waitFor } from '@testing-library/react';
@@ -64,6 +65,11 @@ describe('<HasSubcomponentsCard />', () => {
           <HasSubcomponentsCard />
         </EntityProvider>
       </Wrapper>,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name': entityRouteRef,
+        },
+      },
     );
 
     expect(getByText('Has subcomponents')).toBeInTheDocument();
@@ -111,6 +117,11 @@ describe('<HasSubcomponentsCard />', () => {
           <HasSubcomponentsCard />
         </EntityProvider>
       </Wrapper>,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name': entityRouteRef,
+        },
+      },
     );
 
     await waitFor(() => {
diff --git a/plugins/catalog/src/components/HasSystemsCard/HasSystemsCard.test.tsx b/plugins/catalog/src/components/HasSystemsCard/HasSystemsCard.test.tsx
index b25fcaa052..3fcfed6099 100644
--- a/plugins/catalog/src/components/HasSystemsCard/HasSystemsCard.test.tsx
+++ b/plugins/catalog/src/components/HasSystemsCard/HasSystemsCard.test.tsx
@@ -19,6 +19,7 @@ import {
   CatalogApi,
   catalogApiRef,
   EntityProvider,
+  entityRouteRef,
 } from '@backstage/plugin-catalog-react';
 import { renderInTestApp } from '@backstage/test-utils';
 import { waitFor } from '@testing-library/react';
@@ -64,6 +65,11 @@ describe('<HasSystemsCard />', () => {
           <HasSystemsCard />
         </EntityProvider>
       </Wrapper>,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name': entityRouteRef,
+        },
+      },
     );
 
     expect(getByText('Has systems')).toBeInTheDocument();
@@ -109,6 +115,11 @@ describe('<HasSystemsCard />', () => {
           <HasSystemsCard />
         </EntityProvider>
       </Wrapper>,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name': entityRouteRef,
+        },
+      },
     );
 
     await waitFor(() => {

From 7c5351791e244e5e87c3cbe4e4de397101752389 Mon Sep 17 00:00:00 2001
From: Alex Rybchenko <arybchenko@box.com>
Date: Mon, 4 Oct 2021 19:01:54 +0200
Subject: [PATCH 11/11] updated tests

Signed-off-by: Alex Rybchenko <arybchenko@box.com>
---
 .../components/ApisCards/ConsumedApisCard.test.tsx    | 11 +++++++++++
 .../src/components/ApisCards/HasApisCard.test.tsx     | 11 +++++++++++
 .../components/ApisCards/ProvidedApisCard.test.tsx    | 11 +++++++++++
 .../ComponentsCards/ConsumingComponentsCard.test.tsx  | 11 +++++++++++
 .../ComponentsCards/ProvidingComponentsCard.test.tsx  | 11 +++++++++++
 .../User/UserProfileCard/UserProfileCard.test.tsx     | 10 +++++++++-
 .../techdocs/src/home/components/DocsTable.test.tsx   |  4 ++++
 7 files changed, 68 insertions(+), 1 deletion(-)

diff --git a/plugins/api-docs/src/components/ApisCards/ConsumedApisCard.test.tsx b/plugins/api-docs/src/components/ApisCards/ConsumedApisCard.test.tsx
index 340a1b4559..ac09b717f7 100644
--- a/plugins/api-docs/src/components/ApisCards/ConsumedApisCard.test.tsx
+++ b/plugins/api-docs/src/components/ApisCards/ConsumedApisCard.test.tsx
@@ -19,6 +19,7 @@ import {
   CatalogApi,
   catalogApiRef,
   EntityProvider,
+  entityRouteRef,
 } from '@backstage/plugin-catalog-react';
 import { renderInTestApp } from '@backstage/test-utils';
 import { waitFor } from '@testing-library/react';
@@ -71,6 +72,11 @@ describe('<ConsumedApisCard />', () => {
           <ConsumedApisCard />
         </EntityProvider>
       </Wrapper>,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name': entityRouteRef,
+        },
+      },
     );
 
     expect(getByText(/Consumed APIs/i)).toBeInTheDocument();
@@ -116,6 +122,11 @@ describe('<ConsumedApisCard />', () => {
           <ConsumedApisCard />
         </EntityProvider>
       </Wrapper>,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name': entityRouteRef,
+        },
+      },
     );
 
     await waitFor(() => {
diff --git a/plugins/api-docs/src/components/ApisCards/HasApisCard.test.tsx b/plugins/api-docs/src/components/ApisCards/HasApisCard.test.tsx
index e7a53446bc..ac833251e3 100644
--- a/plugins/api-docs/src/components/ApisCards/HasApisCard.test.tsx
+++ b/plugins/api-docs/src/components/ApisCards/HasApisCard.test.tsx
@@ -19,6 +19,7 @@ import {
   CatalogApi,
   catalogApiRef,
   EntityProvider,
+  entityRouteRef,
 } from '@backstage/plugin-catalog-react';
 import { renderInTestApp } from '@backstage/test-utils';
 import { waitFor } from '@testing-library/react';
@@ -71,6 +72,11 @@ describe('<HasApisCard />', () => {
           <HasApisCard />
         </EntityProvider>
       </Wrapper>,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name': entityRouteRef,
+        },
+      },
     );
 
     expect(getByText('APIs')).toBeInTheDocument();
@@ -116,6 +122,11 @@ describe('<HasApisCard />', () => {
           <HasApisCard />
         </EntityProvider>
       </Wrapper>,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name': entityRouteRef,
+        },
+      },
     );
 
     await waitFor(() => {
diff --git a/plugins/api-docs/src/components/ApisCards/ProvidedApisCard.test.tsx b/plugins/api-docs/src/components/ApisCards/ProvidedApisCard.test.tsx
index afc81c2e84..f2719d0f4b 100644
--- a/plugins/api-docs/src/components/ApisCards/ProvidedApisCard.test.tsx
+++ b/plugins/api-docs/src/components/ApisCards/ProvidedApisCard.test.tsx
@@ -19,6 +19,7 @@ import {
   CatalogApi,
   catalogApiRef,
   EntityProvider,
+  entityRouteRef,
 } from '@backstage/plugin-catalog-react';
 import { renderInTestApp } from '@backstage/test-utils';
 import { waitFor } from '@testing-library/react';
@@ -71,6 +72,11 @@ describe('<ProvidedApisCard />', () => {
           <ProvidedApisCard />
         </EntityProvider>
       </Wrapper>,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name': entityRouteRef,
+        },
+      },
     );
 
     expect(getByText(/Provided APIs/i)).toBeInTheDocument();
@@ -116,6 +122,11 @@ describe('<ProvidedApisCard />', () => {
           <ProvidedApisCard />
         </EntityProvider>
       </Wrapper>,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name': entityRouteRef,
+        },
+      },
     );
 
     await waitFor(() => {
diff --git a/plugins/api-docs/src/components/ComponentsCards/ConsumingComponentsCard.test.tsx b/plugins/api-docs/src/components/ComponentsCards/ConsumingComponentsCard.test.tsx
index 5c47ec1476..274962c346 100644
--- a/plugins/api-docs/src/components/ComponentsCards/ConsumingComponentsCard.test.tsx
+++ b/plugins/api-docs/src/components/ComponentsCards/ConsumingComponentsCard.test.tsx
@@ -19,6 +19,7 @@ import {
   CatalogApi,
   catalogApiRef,
   EntityProvider,
+  entityRouteRef,
 } from '@backstage/plugin-catalog-react';
 import { renderInTestApp } from '@backstage/test-utils';
 import { waitFor } from '@testing-library/react';
@@ -70,6 +71,11 @@ describe('<ConsumingComponentsCard />', () => {
           <ConsumingComponentsCard />
         </EntityProvider>
       </Wrapper>,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name': entityRouteRef,
+        },
+      },
     );
 
     expect(getByText('Consumers')).toBeInTheDocument();
@@ -121,6 +127,11 @@ describe('<ConsumingComponentsCard />', () => {
           <ConsumingComponentsCard />
         </EntityProvider>
       </Wrapper>,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name': entityRouteRef,
+        },
+      },
     );
 
     await waitFor(() => {
diff --git a/plugins/api-docs/src/components/ComponentsCards/ProvidingComponentsCard.test.tsx b/plugins/api-docs/src/components/ComponentsCards/ProvidingComponentsCard.test.tsx
index 77cc75535c..879944749a 100644
--- a/plugins/api-docs/src/components/ComponentsCards/ProvidingComponentsCard.test.tsx
+++ b/plugins/api-docs/src/components/ComponentsCards/ProvidingComponentsCard.test.tsx
@@ -19,6 +19,7 @@ import {
   CatalogApi,
   catalogApiRef,
   EntityProvider,
+  entityRouteRef,
 } from '@backstage/plugin-catalog-react';
 import { renderInTestApp } from '@backstage/test-utils';
 import { waitFor } from '@testing-library/react';
@@ -70,6 +71,11 @@ describe('<ProvidingComponentsCard />', () => {
           <ProvidingComponentsCard />
         </EntityProvider>
       </Wrapper>,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name': entityRouteRef,
+        },
+      },
     );
 
     expect(getByText('Providers')).toBeInTheDocument();
@@ -121,6 +127,11 @@ describe('<ProvidingComponentsCard />', () => {
           <ProvidingComponentsCard />
         </EntityProvider>
       </Wrapper>,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name': entityRouteRef,
+        },
+      },
     );
 
     await waitFor(() => {
diff --git a/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.test.tsx b/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.test.tsx
index 360e31cce5..743ed987fa 100644
--- a/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.test.tsx
+++ b/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.test.tsx
@@ -15,7 +15,10 @@
  */
 
 import { UserEntity } from '@backstage/catalog-model';
-import { EntityProvider } from '@backstage/plugin-catalog-react';
+import {
+  EntityProvider,
+  entityRouteRef,
+} from '@backstage/plugin-catalog-react';
 import { renderWithEffects, wrapInTestApp } from '@backstage/test-utils';
 import React from 'react';
 import { UserProfileCard } from './UserProfileCard';
@@ -53,6 +56,11 @@ describe('UserSummary Test', () => {
         <EntityProvider entity={userEntity}>
           <UserProfileCard entity={userEntity} variant="gridItem" />
         </EntityProvider>,
+        {
+          mountedRoutes: {
+            '/catalog/:namespace/:kind/:name': entityRouteRef,
+          },
+        },
       ),
     );
 
diff --git a/plugins/techdocs/src/home/components/DocsTable.test.tsx b/plugins/techdocs/src/home/components/DocsTable.test.tsx
index 2e5ada78a7..4564725db6 100644
--- a/plugins/techdocs/src/home/components/DocsTable.test.tsx
+++ b/plugins/techdocs/src/home/components/DocsTable.test.tsx
@@ -19,6 +19,7 @@ import { wrapInTestApp } from '@backstage/test-utils';
 import { configApiRef } from '@backstage/core-plugin-api';
 import { DocsTable } from './DocsTable';
 import { rootDocsRouteRef } from '../../routes';
+import { entityRouteRef } from '@backstage/plugin-catalog-react';
 
 // Hacky way to mock a specific boolean config value.
 const getOptionalBooleanMock = jest.fn().mockReturnValue(false);
@@ -94,6 +95,7 @@ describe('DocsTable test', () => {
         {
           mountedRoutes: {
             '/docs/:namespace/:kind/:name/*': rootDocsRouteRef,
+            '/catalog/:namespace/:kind/:name': entityRouteRef,
           },
         },
       ),
@@ -144,6 +146,7 @@ describe('DocsTable test', () => {
         {
           mountedRoutes: {
             '/techdocs/:namespace/:kind/:name/*': rootDocsRouteRef,
+            '/catalog/:namespace/:kind/:name': entityRouteRef,
           },
         },
       ),
@@ -163,6 +166,7 @@ describe('DocsTable test', () => {
       wrapInTestApp(<DocsTable entities={[]} />, {
         mountedRoutes: {
           '/docs/:namespace/:kind/:name/*': rootDocsRouteRef,
+          '/catalog/:namespace/:kind/:name': entityRouteRef,
         },
       }),
     );