Second composibility refactor

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

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>,
     );
 

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 }>();

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

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

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';

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),
+    },
+  }),
+);