From f9ab2bb4decb723fa52144ab57ae8a261baed7d3 Mon Sep 17 00:00:00 2001
From: Adam Harvey <adam.harvey@dxc.com>
Date: Tue, 23 Mar 2021 21:12:20 -0400
Subject: [PATCH] Second composibility refactor

Signed-off-by: Adam Harvey <adam.harvey@dxc.com>
---
 .../SystemDiagramCard.test.tsx}                          | 8 ++++----
 .../SystemDiagramCard.tsx}                               | 4 ++--
 .../index.ts                                             | 2 +-
 plugins/catalog/src/index.ts                             | 2 +-
 plugins/catalog/src/plugin.ts                            | 9 +++++++++
 5 files changed, 17 insertions(+), 8 deletions(-)
 rename plugins/catalog/src/components/{EntitySystemDiagramCard/EntitySystemDiagramCard.test.tsx => SystemDiagramCard/SystemDiagramCard.test.tsx} (93%)
 rename plugins/catalog/src/components/{EntitySystemDiagramCard/EntitySystemDiagramCard.tsx => SystemDiagramCard/SystemDiagramCard.tsx} (97%)
 rename plugins/catalog/src/components/{EntitySystemDiagramCard => SystemDiagramCard}/index.ts (89%)

diff --git a/plugins/catalog/src/components/EntitySystemDiagramCard/EntitySystemDiagramCard.test.tsx b/plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.test.tsx
similarity index 93%
rename from plugins/catalog/src/components/EntitySystemDiagramCard/EntitySystemDiagramCard.test.tsx
rename to plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.test.tsx
index 8a5434db8b..ed1a1a69ea 100644
--- a/plugins/catalog/src/components/EntitySystemDiagramCard/EntitySystemDiagramCard.test.tsx
+++ b/plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.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 { EntitySystemDiagramCard } from './EntitySystemDiagramCard';
+import { SystemDiagramCard } from './SystemDiagramCard';
 
-describe('<EntitySystemDiagramCard />', () => {
+describe('<SystemDiagramCard />', () => {
   beforeAll(() => {
     Object.defineProperty(window.SVGElement.prototype, 'getBBox', {
       value: () => ({ width: 100, height: 100 }),
@@ -51,7 +51,7 @@ describe('<EntitySystemDiagramCard />', () => {
 
     const { queryByText } = await renderInTestApp(
       <ApiProvider apis={ApiRegistry.from([[catalogApiRef, catalogApi]])}>
-        <EntitySystemDiagramCard entity={entity} />
+        <SystemDiagramCard entity={entity} />
       </ApiProvider>,
     );
 
@@ -105,7 +105,7 @@ describe('<EntitySystemDiagramCard />', () => {
 
     const { getByText } = await renderInTestApp(
       <ApiProvider apis={ApiRegistry.from([[catalogApiRef, catalogApi]])}>
-        <EntitySystemDiagramCard entity={entity} />
+        <SystemDiagramCard entity={entity} />
       </ApiProvider>,
     );
 
diff --git a/plugins/catalog/src/components/EntitySystemDiagramCard/EntitySystemDiagramCard.tsx b/plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.tsx
similarity index 97%
rename from plugins/catalog/src/components/EntitySystemDiagramCard/EntitySystemDiagramCard.tsx
rename to plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.tsx
index 4231ee22ff..bec2e844c8 100644
--- a/plugins/catalog/src/components/EntitySystemDiagramCard/EntitySystemDiagramCard.tsx
+++ b/plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.tsx
@@ -37,7 +37,7 @@ import ZoomOutMap from '@material-ui/icons/ZoomOutMap';
 import React from 'react';
 import { useAsync } from 'react-use';
 
-type EntitySystemDiagramProps = {
+type SystemDiagramProps = {
   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 EntitySystemDiagramCard({ entity }: EntitySystemDiagramProps) {
+export function SystemDiagramCard({ entity }: SystemDiagramProps) {
   const currentSystemName = entity.metadata.name;
   const currentSystemNode = simplifiedEntityName(entity);
   const systemNodes = new Array<{ id: string }>();
diff --git a/plugins/catalog/src/components/EntitySystemDiagramCard/index.ts b/plugins/catalog/src/components/SystemDiagramCard/index.ts
similarity index 89%
rename from plugins/catalog/src/components/EntitySystemDiagramCard/index.ts
rename to plugins/catalog/src/components/SystemDiagramCard/index.ts
index b9a924a511..6d86b31b68 100644
--- a/plugins/catalog/src/components/EntitySystemDiagramCard/index.ts
+++ b/plugins/catalog/src/components/SystemDiagramCard/index.ts
@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 
-export { EntitySystemDiagramCard } from './EntitySystemDiagramCard';
+export { SystemDiagramCard } from './SystemDiagramCard';
diff --git a/plugins/catalog/src/index.ts b/plugins/catalog/src/index.ts
index 2494e5ba28..7ab7b95dd7 100644
--- a/plugins/catalog/src/index.ts
+++ b/plugins/catalog/src/index.ts
@@ -17,7 +17,6 @@
 export { AboutCard } from './components/AboutCard';
 export { EntityLayout } from './components/EntityLayout';
 export { EntityPageLayout } from './components/EntityPageLayout';
-export { EntitySystemDiagramCard } from './components/EntitySystemDiagramCard';
 export * from './components/EntitySwitch';
 export { Router } from './components/Router';
 export {
@@ -30,4 +29,5 @@ export {
   EntityHasSubcomponentsCard,
   EntityHasSystemsCard,
   EntityLinksCard,
+  EntitySystemDiagramCard,
 } from './plugin';
diff --git a/plugins/catalog/src/plugin.ts b/plugins/catalog/src/plugin.ts
index 19dc778280..20c7a865db 100644
--- a/plugins/catalog/src/plugin.ts
+++ b/plugins/catalog/src/plugin.ts
@@ -114,3 +114,12 @@ export const EntityHasSubcomponentsCard = catalogPlugin.provide(
     },
   }),
 );
+
+export const EntitySystemDiagramCard = catalogPlugin.provide(
+  createComponentExtension({
+    component: {
+      lazy: () =>
+        import('./components/SystemDiagramCard').then(m => m.SystemDiagramCard),
+    },
+  }),
+);