Refactor for composability pattern

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

.changeset/perfect-coats-train.md

@@ -2,9 +2,9 @@
 '@backstage/plugin-catalog': patch
 ---
 
-Adds a new `SystemDiagram` component to visually map all elements in a system.
+Adds a new `EntitySystemDiagramCard` component to visually map all elements in a system.
 
-To use this new component, you can add a new tab with the component on to the System Entity Page in your `packages/app/src/components/catalog/EntityPage.tsx` file.
+To use this new component with the legacy composability pattern, you can add a new tab with the component on to the System Entity Page in your `packages/app/src/components/catalog/EntityPage.tsx` file.
 
 For example,
 
@@ -19,7 +19,7 @@ For example,
 +    <EntityPageLayout.Content
 +      path="/diagram/*"
 +      title="Diagram"
-+      element={<SystemDiagram entity={entity} />}
++      element={<EntitySystemDiagramCard entity={entity} />}
 +    />
    </EntityPageLayout>
  );

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

@@ -38,7 +38,7 @@ import {
   EntityHasSystemsCard,
   EntityLinksCard,
   EntityPageLayout,
-  SystemDiagram,
+  EntitySystemDiagramCard,
 } from '@backstage/plugin-catalog';
 import { EntityProvider, useEntity } from '@backstage/plugin-catalog-react';
 import {
@@ -461,7 +461,7 @@ const SystemEntityPage = ({ entity }: { entity: Entity }) => (
     <EntityPageLayout.Content
       path="/diagram/*"
       title="Diagram"
-      element={<SystemDiagram entity={entity} />}
+      element={<EntitySystemDiagramCard entity={entity} />}
     />
   </EntityPageLayout>
 );

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

@@ -19,9 +19,9 @@ import { catalogApiRef, CatalogApi } from '@backstage/plugin-catalog-react';
 import { Entity, RELATION_PART_OF } from '@backstage/catalog-model';
 import { renderInTestApp } from '@backstage/test-utils';
 import React from 'react';
-import { SystemDiagram } from './SystemDiagram';
+import { EntitySystemDiagramCard } from './EntitySystemDiagramCard';
 
-describe('<SystemDiagram />', () => {
+describe('<EntitySystemDiagramCard />', () => {
   beforeAll(() => {
     Object.defineProperty(window.SVGElement.prototype, 'getBBox', {
       value: () => ({ width: 100, height: 100 }),
@@ -51,7 +51,7 @@ describe('<SystemDiagram />', () => {
 
     const { queryByText } = await renderInTestApp(
       <ApiProvider apis={ApiRegistry.from([[catalogApiRef, catalogApi]])}>
-        <SystemDiagram entity={entity} />
+        <EntitySystemDiagramCard entity={entity} />
       </ApiProvider>,
     );
 
@@ -105,7 +105,7 @@ describe('<SystemDiagram />', () => {
 
     const { getByText } = await renderInTestApp(
       <ApiProvider apis={ApiRegistry.from([[catalogApiRef, catalogApi]])}>
-        <SystemDiagram entity={entity} />
+        <EntitySystemDiagramCard entity={entity} />
       </ApiProvider>,
     );
 

plugins/catalog/src/components/EntitySystemDiagramCard/EntitySystemDiagramCard.tsx

@@ -37,7 +37,7 @@ import ZoomOutMap from '@material-ui/icons/ZoomOutMap';
 import React from 'react';
 import { useAsync } from 'react-use';
 
-type SystemDiagramProps = {
+type EntitySystemDiagramProps = {
   entity: Entity;
 };
 
@@ -61,7 +61,7 @@ function simplifiedEntityName(
  * Dynamically generates a diagram of a system, its assigned entities,
  * and relationships of those entities.
  */
-export function SystemDiagram({ entity }: SystemDiagramProps) {
+export function EntitySystemDiagramCard({ entity }: EntitySystemDiagramProps) {
   const currentSystemName = entity.metadata.name;
   const currentSystemNode = simplifiedEntityName(entity);
   const systemNodes = new Array<{ id: string }>();

plugins/catalog/src/components/EntitySystemDiagramCard/index.ts

@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 
-export { SystemDiagram } from './SystemDiagram';
+export { EntitySystemDiagramCard } from './EntitySystemDiagramCard';

plugins/catalog/src/index.ts

@@ -17,7 +17,7 @@
 export { AboutCard } from './components/AboutCard';
 export { EntityLayout } from './components/EntityLayout';
 export { EntityPageLayout } from './components/EntityPageLayout';
-export { SystemDiagram } from './components/SystemDiagram';
+export { EntitySystemDiagramCard } from './components/EntitySystemDiagramCard';
 export * from './components/EntitySwitch';
 export { Router } from './components/Router';
 export {