From 0d57638d2b8eda60fe23a4714a2abbc118acbe99 Mon Sep 17 00:00:00 2001 From: mufaddal motiwala Date: Fri, 21 Jan 2022 00:13:10 +0530 Subject: [PATCH 1/9] Replaced EntitySystemDiagramCard with EntityCatalogGraphCard Signed-off-by: mufaddal motiwala --- packages/create-app/package.json | 1 + packages/create-app/src/lib/versions.ts | 2 + .../default-app/packages/app/package.json.hbs | 1 + .../app/src/components/catalog/EntityPage.tsx | 47 +++++++++++++++++-- 4 files changed, 48 insertions(+), 3 deletions(-) diff --git a/packages/create-app/package.json b/packages/create-app/package.json index 2a3e35988a..63fc3b1c2c 100644 --- a/packages/create-app/package.json +++ b/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": "", diff --git a/packages/create-app/src/lib/versions.ts b/packages/create-app/src/lib/versions.ts index f89ff7f391..34d016ebde 100644 --- a/packages/create-app/src/lib/versions.ts +++ b/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, diff --git a/packages/create-app/templates/default-app/packages/app/package.json.hbs b/packages/create-app/templates/default-app/packages/app/package.json.hbs index f968a076d7..23c45d3f9d 100644 --- a/packages/create-app/templates/default-app/packages/app/package.json.hbs +++ b/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'}}", diff --git a/packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx b/packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx index d3b4b786a0..8e307f1d28 100644 --- a/packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx +++ b/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,7 +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. // You can for example enforce that all components of type 'service' should use GitHubActions @@ -108,6 +120,10 @@ const overviewContent = ( + + + + @@ -223,6 +239,9 @@ const apiPage = ( + + + @@ -290,6 +309,9 @@ const systemPage = ( + + + @@ -302,7 +324,23 @@ const systemPage = ( - + ); @@ -315,6 +353,9 @@ const domainPage = ( + + + From 6313075d770026d72c4f384b9b1e52c1c2948247 Mon Sep 17 00:00:00 2001 From: mufaddal motiwala Date: Fri, 21 Jan 2022 00:13:55 +0530 Subject: [PATCH 2/9] deprecate EntitySystemDiagramCard Signed-off-by: mufaddal motiwala --- plugins/catalog/src/plugin.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/plugins/catalog/src/plugin.ts b/plugins/catalog/src/plugin.ts index 03806a2aa2..a339b7e9d4 100644 --- a/plugins/catalog/src/plugin.ts +++ b/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/catalog-graph-plugin. This component will be removed in an + * upcoming release + */ export const EntitySystemDiagramCard = catalogPlugin.provide( createComponentExtension({ name: 'EntitySystemDiagramCard', From a0d446c8ecc4163a981ec1313124dab67f7db85b Mon Sep 17 00:00:00 2001 From: mufaddal motiwala Date: Fri, 21 Jan 2022 00:26:29 +0530 Subject: [PATCH 3/9] add @backstage/create-app changeset Signed-off-by: mufaddal motiwala --- .changeset/metal-bottles-lay.md | 52 +++++++++++++++++++++++++++++++++ 1 file changed, 52 insertions(+) create mode 100644 .changeset/metal-bottles-lay.md diff --git a/.changeset/metal-bottles-lay.md b/.changeset/metal-bottles-lay.md new file mode 100644 index 0000000000..e36b1c644f --- /dev/null +++ b/.changeset/metal-bottles-lay.md @@ -0,0 +1,52 @@ +--- +'@backstage/create-app': patch +--- + +Replaced EntitySystemDiagramCard with EntityCatalogGraphCard + +To make this change to an existing app: + +`yarn add @backstage/catalog-graph-plugin` + +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 + +- ++ + + ```` +````` From aac316279fecb4a90248ca4b434c1cee020c21fb Mon Sep 17 00:00:00 2001 From: mufaddal motiwala Date: Fri, 21 Jan 2022 00:26:54 +0530 Subject: [PATCH 4/9] add @backstage/plugin-catalog changeset Signed-off-by: mufaddal motiwala --- .changeset/smooth-ghosts-trade.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/smooth-ghosts-trade.md diff --git a/.changeset/smooth-ghosts-trade.md b/.changeset/smooth-ghosts-trade.md new file mode 100644 index 0000000000..58c3753747 --- /dev/null +++ b/.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/catalog-graph-plugin` . This component will be removed in an upcoming release From 40d32c3c99c5c139a99c0beb058ef72f74810a3c Mon Sep 17 00:00:00 2001 From: mufaddal motiwala Date: Fri, 21 Jan 2022 01:13:46 +0530 Subject: [PATCH 5/9] update api-report.md Signed-off-by: mufaddal motiwala --- plugins/catalog/api-report.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/catalog/api-report.md b/plugins/catalog/api-report.md index 23771d3ec9..ad391b594f 100644 --- a/plugins/catalog/api-report.md +++ b/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) From 83388d17e4a1da5d675fc8e15ea1c2a15368bffe Mon Sep 17 00:00:00 2001 From: mufaddal motiwala Date: Fri, 21 Jan 2022 01:19:06 +0530 Subject: [PATCH 6/9] typo fix Signed-off-by: mufaddal motiwala --- .changeset/smooth-ghosts-trade.md | 2 +- plugins/catalog/src/plugin.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.changeset/smooth-ghosts-trade.md b/.changeset/smooth-ghosts-trade.md index 58c3753747..64be2bd8c9 100644 --- a/.changeset/smooth-ghosts-trade.md +++ b/.changeset/smooth-ghosts-trade.md @@ -3,4 +3,4 @@ --- Deprecated `EntitySystemDiagramCard` -`EntitySystemDiagramCard` is replaced by `EntityCatalogGraphCard` which is imported from `backstage/catalog-graph-plugin` . This component will be removed in an upcoming release +`EntitySystemDiagramCard` is replaced by `EntityCatalogGraphCard` which is imported from `@backstage/plugin-catalog-graph`. This component will be removed in an upcoming release diff --git a/plugins/catalog/src/plugin.ts b/plugins/catalog/src/plugin.ts index a339b7e9d4..5a94cd2a09 100644 --- a/plugins/catalog/src/plugin.ts +++ b/plugins/catalog/src/plugin.ts @@ -178,7 +178,7 @@ export const EntityDependsOnResourcesCard = catalogPlugin.provide( ); /** - * @deprecated This component is replaced by EntityCatalogGraphCard which is imported from backstage/catalog-graph-plugin. This component will be removed in an + * @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( From d42069763de1c0b67bfc88c1636cf56bde44b7cd Mon Sep 17 00:00:00 2001 From: mufaddal motiwala Date: Fri, 21 Jan 2022 01:25:51 +0530 Subject: [PATCH 7/9] rewording Signed-off-by: mufaddal motiwala --- .changeset/metal-bottles-lay.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/metal-bottles-lay.md b/.changeset/metal-bottles-lay.md index e36b1c644f..c42e7b2a28 100644 --- a/.changeset/metal-bottles-lay.md +++ b/.changeset/metal-bottles-lay.md @@ -6,7 +6,7 @@ Replaced EntitySystemDiagramCard with EntityCatalogGraphCard To make this change to an existing app: -`yarn add @backstage/catalog-graph-plugin` +Add `@backstage/catalog-graph-plugin` in `packages/app` Apply the following changes to the `packages/app/src/components/catalog/EntityPage.tsx` file: From 49eb9780d51c0c961001a05a9448adab6f1abbd2 Mon Sep 17 00:00:00 2001 From: mufaddal motiwala Date: Fri, 21 Jan 2022 01:51:20 +0530 Subject: [PATCH 8/9] updated changeset Signed-off-by: mufaddal motiwala --- .changeset/metal-bottles-lay.md | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/.changeset/metal-bottles-lay.md b/.changeset/metal-bottles-lay.md index c42e7b2a28..706ebd3528 100644 --- a/.changeset/metal-bottles-lay.md +++ b/.changeset/metal-bottles-lay.md @@ -6,7 +6,7 @@ Replaced EntitySystemDiagramCard with EntityCatalogGraphCard To make this change to an existing app: -Add `@backstage/catalog-graph-plugin` in `packages/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: @@ -27,7 +27,7 @@ Apply the following changes to the `packages/app/src/components/catalog/EntityPa + } from '@backstage/catalog-model'; ``` -`````diff +```diff - + - ```` -````` +``` + +```diff +const cicdContent = ( + + + ++ ++ ++ +``` + +Add the above component in `overviewContent`, `apiPage` , `systemPage` and domainPage` as well. From b9ef4086ae25fd0705545fbb2262d5d63169427e Mon Sep 17 00:00:00 2001 From: mufaddal motiwala Date: Fri, 21 Jan 2022 02:08:55 +0530 Subject: [PATCH 9/9] formatting (empty line after import statement ) Signed-off-by: mufaddal motiwala --- .../packages/app/src/components/catalog/EntityPage.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx b/packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx index 8e307f1d28..84d094410b 100644 --- a/packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx +++ b/packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx @@ -67,6 +67,7 @@ import { 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. // You can for example enforce that all components of type 'service' should use GitHubActions