Refactor entity collection

Signed-off-by: Adam Harvey <adam.harvey@dxc.com>

.changeset/perfect-coats-train.md

@@ -19,7 +19,7 @@ For example,
 +    <EntityPageLayout.Content
 +      path="/diagram/*"
 +      title="Diagram"
-+      element={<EntitySystemDiagramCard entity={entity} />}
++      element={<EntitySystemDiagramCard />}
 +    />
    </EntityPageLayout>
  );

packages/app/src/components/catalog/EntityPage.tsx

@@ -461,7 +461,7 @@ const SystemEntityPage = ({ entity }: { entity: Entity }) => (
     <EntityPageLayout.Content
       path="/diagram/*"
       title="Diagram"
-      element={<EntitySystemDiagramCard entity={entity} />}
+      element={<EntitySystemDiagramCard />}
     />
   </EntityPageLayout>
 );

plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.test.tsx

@@ -15,7 +15,11 @@
  */
 
 import { ApiProvider, ApiRegistry } from '@backstage/core';
-import { catalogApiRef, CatalogApi } from '@backstage/plugin-catalog-react';
+import {
+  catalogApiRef,
+  CatalogApi,
+  EntityProvider,
+} from '@backstage/plugin-catalog-react';
 import { Entity, RELATION_PART_OF } from '@backstage/catalog-model';
 import { renderInTestApp } from '@backstage/test-utils';
 import React from 'react';
@@ -51,7 +55,9 @@ describe('<SystemDiagramCard />', () => {
 
     const { queryByText } = await renderInTestApp(
       <ApiProvider apis={ApiRegistry.from([[catalogApiRef, catalogApi]])}>
-        <SystemDiagramCard entity={entity} />
+        <EntityProvider entity={entity}>
+          <SystemDiagramCard />
+        </EntityProvider>
       </ApiProvider>,
     );
 
@@ -105,7 +111,9 @@ describe('<SystemDiagramCard />', () => {
 
     const { getByText } = await renderInTestApp(
       <ApiProvider apis={ApiRegistry.from([[catalogApiRef, catalogApi]])}>
-        <SystemDiagramCard entity={entity} />
+        <EntityProvider entity={entity}>
+          <SystemDiagramCard />
+        </EntityProvider>
       </ApiProvider>,
     );
 

plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.tsx

@@ -23,6 +23,7 @@ import {
 import {
   catalogApiRef,
   getEntityRelations,
+  useEntity,
 } from '@backstage/plugin-catalog-react';
 import {
   DependencyGraph,
@@ -37,10 +38,6 @@ import ZoomOutMap from '@material-ui/icons/ZoomOutMap';
 import React from 'react';
 import { useAsync } from 'react-use';
 
-type SystemDiagramProps = {
-  entity: Entity;
-};
-
 function simplifiedEntityName(
   ref:
     | Entity
@@ -61,7 +58,8 @@ function simplifiedEntityName(
  * Dynamically generates a diagram of a system, its assigned entities,
  * and relationships of those entities.
  */
-export function SystemDiagramCard({ entity }: SystemDiagramProps) {
+export function SystemDiagramCard() {
+  const { entity } = useEntity();
   const currentSystemName = entity.metadata.name;
   const currentSystemNode = simplifiedEntityName(entity);
   const systemNodes = new Array<{ id: string }>();