Merge pull request #9066 from mufaddal7/feature/EntitySystemDiagramCard

Feature/entity system diagram card

.changeset/metal-bottles-lay.md

@@ -0,0 +1,63 @@
+---
+'@backstage/create-app': patch
+---
+
+Replaced EntitySystemDiagramCard with EntityCatalogGraphCard
+
+To make this change to an existing app:
+
+Add `@backstage/catalog-graph-plugin` as a `dependency` in `packages/app/package.json`
+
+Apply the following changes to the `packages/app/src/components/catalog/EntityPage.tsx` file:
+
+```diff
++ import {
++  Direction,
++  EntityCatalogGraphCard,
++ } from '@backstage/plugin-catalog-graph';
++ import {
++  RELATION_API_CONSUMED_BY,
++  RELATION_API_PROVIDED_BY,
++  RELATION_CONSUMES_API,
++  RELATION_DEPENDENCY_OF,
++  RELATION_DEPENDS_ON,
++  RELATION_HAS_PART,
++  RELATION_PART_OF,
++  RELATION_PROVIDES_API,
++ } from '@backstage/catalog-model';
+```
+
+```diff
+    <EntityLayout.Route path="/diagram" title="Diagram">
+-      <EntitySystemDiagramCard />
++      <EntityCatalogGraphCard
++        variant="gridItem"
++        direction={Direction.TOP_BOTTOM}
++        title="System Diagram"
++        height={700}
++        relations={[
++          RELATION_PART_OF,
++          RELATION_HAS_PART,
++          RELATION_API_CONSUMED_BY,
++          RELATION_API_PROVIDED_BY,
++          RELATION_CONSUMES_API,
++          RELATION_PROVIDES_API,
++          RELATION_DEPENDENCY_OF,
++          RELATION_DEPENDS_ON,
++        ]}
++        unidirectional={false}
++      />
+    </EntityLayout.Route>
+```
+
+```diff
+const cicdContent = (
+    <Grid item md={6}>
+      <EntityAboutCard variant="gridItem" />
+    </Grid>
++    <Grid item md={6} xs={12}>
++      <EntityCatalogGraphCard variant="gridItem" height={400} />
++    </Grid>
+```
+
+Add the above component in `overviewContent`, `apiPage` , `systemPage` and domainPage` as well.

.changeset/smooth-ghosts-trade.md

@@ -0,0 +1,6 @@
+---
+'@backstage/plugin-catalog': patch
+---
+
+Deprecated `EntitySystemDiagramCard`
+`EntitySystemDiagramCard` is replaced by `EntityCatalogGraphCard` which is imported from `@backstage/plugin-catalog-graph`. This component will be removed in an upcoming release

packages/create-app/package.json

@@ -63,6 +63,7 @@
     "@backstage/plugin-auth-backend": "",
     "@backstage/plugin-catalog": "",
     "@backstage/plugin-catalog-backend": "",
+    "@backstage/plugin-catalog-graph": "",
     "@backstage/plugin-catalog-import": "",
     "@backstage/plugin-explore": "",
     "@backstage/plugin-github-actions": "",

packages/create-app/src/lib/versions.ts

@@ -51,6 +51,7 @@ import { version as pluginAuthBackend } from '../../../../plugins/auth-backend/p
 import { version as pluginCatalog } from '../../../../plugins/catalog/package.json';
 import { version as pluginCatalogReact } from '../../../../plugins/catalog-react/package.json';
 import { version as pluginCatalogBackend } from '../../../../plugins/catalog-backend/package.json';
+import { version as pluginCatalogGraph } from '../../../../plugins/catalog-graph/package.json';
 import { version as pluginCatalogImport } from '../../../../plugins/catalog-import/package.json';
 import { version as pluginCircleci } from '../../../../plugins/circleci/package.json';
 import { version as pluginExplore } from '../../../../plugins/explore/package.json';
@@ -90,6 +91,7 @@ export const packageVersions = {
   '@backstage/plugin-catalog': pluginCatalog,
   '@backstage/plugin-catalog-react': pluginCatalogReact,
   '@backstage/plugin-catalog-backend': pluginCatalogBackend,
+  '@backstage/plugin-catalog-graph': pluginCatalogGraph,
   '@backstage/plugin-catalog-import': pluginCatalogImport,
   '@backstage/plugin-circleci': pluginCircleci,
   '@backstage/plugin-explore': pluginExplore,

packages/create-app/templates/default-app/packages/app/package.json.hbs

@@ -13,6 +13,7 @@
     "@backstage/integration-react": "^{{version '@backstage/integration-react'}}",
     "@backstage/plugin-api-docs": "^{{version '@backstage/plugin-api-docs'}}",
     "@backstage/plugin-catalog": "^{{version '@backstage/plugin-catalog'}}",
+    "@backstage/plugin-catalog-graph": "^{{version '@backstage/plugin-catalog-graph'}}",
     "@backstage/plugin-catalog-import": "^{{version '@backstage/plugin-catalog-import'}}",
     "@backstage/plugin-catalog-react": "^{{version '@backstage/plugin-catalog-react'}}",
     "@backstage/plugin-github-actions": "^{{version '@backstage/plugin-github-actions'}}",

packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx

@@ -27,7 +27,6 @@ import {
   EntityAboutCard,
   EntityDependsOnComponentsCard,
   EntityDependsOnResourcesCard,
-  EntitySystemDiagramCard,
   EntityHasComponentsCard,
   EntityHasResourcesCard,
   EntityHasSubcomponentsCard,
@@ -54,6 +53,20 @@ import {
 } from '@backstage/plugin-org';
 import { EntityTechdocsContent } from '@backstage/plugin-techdocs';
 import { EmptyState } from '@backstage/core-components';
+import {
+  Direction,
+  EntityCatalogGraphCard,
+} from '@backstage/plugin-catalog-graph';
+import {
+  RELATION_API_CONSUMED_BY,
+  RELATION_API_PROVIDED_BY,
+  RELATION_CONSUMES_API,
+  RELATION_DEPENDENCY_OF,
+  RELATION_DEPENDS_ON,
+  RELATION_HAS_PART,
+  RELATION_PART_OF,
+  RELATION_PROVIDES_API,
+} from '@backstage/catalog-model';
 
 const cicdContent = (
   // This is an example of how you can implement your company's logic in entity page.
@@ -108,6 +121,10 @@ const overviewContent = (
     <Grid item md={6}>
       <EntityAboutCard variant="gridItem" />
     </Grid>
+    <Grid item md={6} xs={12}>
+      <EntityCatalogGraphCard variant="gridItem" height={400} />
+    </Grid>
+
     <Grid item md={4} xs={12}>
       <EntityLinksCard />
     </Grid>
@@ -223,6 +240,9 @@ const apiPage = (
         <Grid item md={6}>
           <EntityAboutCard />
         </Grid>
+        <Grid item md={6} xs={12}>
+          <EntityCatalogGraphCard variant="gridItem" height={400} />
+        </Grid>
         <Grid item md={4} xs={12}>
           <EntityLinksCard />
         </Grid>
@@ -290,6 +310,9 @@ const systemPage = (
         <Grid item md={6}>
           <EntityAboutCard variant="gridItem" />
         </Grid>
+        <Grid item md={6} xs={12}>
+          <EntityCatalogGraphCard variant="gridItem" height={400} />
+        </Grid>
         <Grid item md={6}>
           <EntityHasComponentsCard variant="gridItem" />
         </Grid>
@@ -302,7 +325,23 @@ const systemPage = (
       </Grid>
     </EntityLayout.Route>
     <EntityLayout.Route path="/diagram" title="Diagram">
-      <EntitySystemDiagramCard />
+      <EntityCatalogGraphCard
+        variant="gridItem"
+        direction={Direction.TOP_BOTTOM}
+        title="System Diagram"
+        height={700}
+        relations={[
+          RELATION_PART_OF,
+          RELATION_HAS_PART,
+          RELATION_API_CONSUMED_BY,
+          RELATION_API_PROVIDED_BY,
+          RELATION_CONSUMES_API,
+          RELATION_PROVIDES_API,
+          RELATION_DEPENDENCY_OF,
+          RELATION_DEPENDS_ON,
+        ]}
+        unidirectional={false}
+      />
     </EntityLayout.Route>
   </EntityLayout>
 );
@@ -315,6 +354,9 @@ const domainPage = (
         <Grid item md={6}>
           <EntityAboutCard variant="gridItem" />
         </Grid>
+        <Grid item md={6} xs={12}>
+          <EntityCatalogGraphCard variant="gridItem" height={400} />
+        </Grid>
         <Grid item md={6}>
           <EntityHasSystemsCard variant="gridItem" />
         </Grid>

plugins/catalog/api-report.md

@@ -391,7 +391,7 @@ export const EntitySwitch: {
 // Warning: (ae-forgotten-export) The symbol "SystemDiagramCard" needs to be exported by the entry point index.d.ts
 // Warning: (ae-missing-release-tag) "EntitySystemDiagramCard" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const EntitySystemDiagramCard: SystemDiagramCard;
 
 // Warning: (ae-missing-release-tag) "FilterContainer" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)

plugins/catalog/src/plugin.ts

@@ -177,6 +177,10 @@ export const EntityDependsOnResourcesCard = catalogPlugin.provide(
   }),
 );
 
+/**
+ * @deprecated This component is replaced by EntityCatalogGraphCard which is imported from `@backstage/plugin-catalog-graph`. This component will be removed in an
+ * upcoming release
+ */
 export const EntitySystemDiagramCard = catalogPlugin.provide(
   createComponentExtension({
     name: 'EntitySystemDiagramCard',