From 865e76d9b65caa2cc18649f379e93531c94838a7 Mon Sep 17 00:00:00 2001 From: Adam Harvey Date: Tue, 23 Mar 2021 16:27:41 -0400 Subject: [PATCH] Refactor for composability pattern Signed-off-by: Adam Harvey --- .changeset/perfect-coats-train.md | 6 +++--- packages/app/src/components/catalog/EntityPage.tsx | 4 ++-- .../EntitySystemDiagramCard.test.tsx} | 8 ++++---- .../EntitySystemDiagramCard.tsx} | 4 ++-- .../{SystemDiagram => EntitySystemDiagramCard}/index.ts | 2 +- plugins/catalog/src/index.ts | 2 +- 6 files changed, 13 insertions(+), 13 deletions(-) rename plugins/catalog/src/components/{SystemDiagram/SystemDiagram.test.tsx => EntitySystemDiagramCard/EntitySystemDiagramCard.test.tsx} (93%) rename plugins/catalog/src/components/{SystemDiagram/SystemDiagram.tsx => EntitySystemDiagramCard/EntitySystemDiagramCard.tsx} (97%) rename plugins/catalog/src/components/{SystemDiagram => EntitySystemDiagramCard}/index.ts (89%) diff --git a/.changeset/perfect-coats-train.md b/.changeset/perfect-coats-train.md index 25b19fb45c..98b558e8d6 100644 --- a/.changeset/perfect-coats-train.md +++ b/.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, + } ++ element={} + /> ); diff --git a/packages/app/src/components/catalog/EntityPage.tsx b/packages/app/src/components/catalog/EntityPage.tsx index f417fa82b8..2d0bde2a7a 100644 --- a/packages/app/src/components/catalog/EntityPage.tsx +++ b/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 }) => ( } + element={} /> ); diff --git a/plugins/catalog/src/components/SystemDiagram/SystemDiagram.test.tsx b/plugins/catalog/src/components/EntitySystemDiagramCard/EntitySystemDiagramCard.test.tsx similarity index 93% rename from plugins/catalog/src/components/SystemDiagram/SystemDiagram.test.tsx rename to plugins/catalog/src/components/EntitySystemDiagramCard/EntitySystemDiagramCard.test.tsx index ed9b12e3e5..8a5434db8b 100644 --- a/plugins/catalog/src/components/SystemDiagram/SystemDiagram.test.tsx +++ b/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('', () => { +describe('', () => { beforeAll(() => { Object.defineProperty(window.SVGElement.prototype, 'getBBox', { value: () => ({ width: 100, height: 100 }), @@ -51,7 +51,7 @@ describe('', () => { const { queryByText } = await renderInTestApp( - + , ); @@ -105,7 +105,7 @@ describe('', () => { const { getByText } = await renderInTestApp( - + , ); diff --git a/plugins/catalog/src/components/SystemDiagram/SystemDiagram.tsx b/plugins/catalog/src/components/EntitySystemDiagramCard/EntitySystemDiagramCard.tsx similarity index 97% rename from plugins/catalog/src/components/SystemDiagram/SystemDiagram.tsx rename to plugins/catalog/src/components/EntitySystemDiagramCard/EntitySystemDiagramCard.tsx index 47ada9003d..4231ee22ff 100644 --- a/plugins/catalog/src/components/SystemDiagram/SystemDiagram.tsx +++ b/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 }>(); diff --git a/plugins/catalog/src/components/SystemDiagram/index.ts b/plugins/catalog/src/components/EntitySystemDiagramCard/index.ts similarity index 89% rename from plugins/catalog/src/components/SystemDiagram/index.ts rename to plugins/catalog/src/components/EntitySystemDiagramCard/index.ts index e086aed507..b9a924a511 100644 --- a/plugins/catalog/src/components/SystemDiagram/index.ts +++ b/plugins/catalog/src/components/EntitySystemDiagramCard/index.ts @@ -14,4 +14,4 @@ * limitations under the License. */ -export { SystemDiagram } from './SystemDiagram'; +export { EntitySystemDiagramCard } from './EntitySystemDiagramCard'; diff --git a/plugins/catalog/src/index.ts b/plugins/catalog/src/index.ts index 72e33defe7..2494e5ba28 100644 --- a/plugins/catalog/src/index.ts +++ b/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 {