paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 53 Packages Projects Releases Wiki Activity

Merge pull request #22619 from backstage/camilaibs/migrate-catalog-graph-to-new-frontend-system

Browse Source 
Migrate catalog graph to new frontend system
This commit is contained in:
Patrik Oldsberg
2024-02-06 11:52:53 +01:00
committed by GitHub
parent 0b0fffa12d f7ef0521a9
commit 5682465615
13 changed files with 511 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/mighty-toys-laugh.md
+5
View File
@@ -0,0 +1,5 @@
---
'@backstage/plugin-catalog-react': minor
---
Add support to `configSchema` option on the `createEntityCardExtension` factory function.
.changeset/neat-eels-greet.md
+5
View File
@@ -0,0 +1,5 @@
---
'@backstage/plugin-catalog-graph': minor
---
Migrate plugin to the new frontend system, it is experimental and available via alpha subpath.
packages/app-next/app-config.yaml
+3
View File
@@ -16,6 +16,9 @@ app:
config:
filter: kind:component has:links
- entity-card:linguist/languages
- entity-card:catalog-graph/relations:
config:
height: 300
- entity-card:azure-devops/readme
# Entity page content
- entity-content:techdocs
plugins/catalog-graph/README-alpha.md
+317
View File
@@ -0,0 +1,317 @@
# Catalog Graph
> [!WARNING]
> This documentation is made for those using the experimental new Frontend system.
> If you are not using the new frontend system, please go [here](./README.md).
The Catalog graph plugin helps you to visualize the relations between entities, like ownership, grouping or API relationships.
It comes with these features:
- A card that displays the directly related entities to the current entity on the Catalog entity page. It can be customized, for example filtering for specific relations.
<img src="./catalog-graph-entity-relations-card.png" width="600" />
- A standalone page that can be added to your application providing a viewer for your entity relations.
This viewer can be used to navigate through the entities and filter for specific relations, you can access it from the card "View Graph" action.
<img src="./catalog-graph-entity-relations-page.png" width="600" />
## Table of Content
- [Installation](#installation)
- [Customization](#customization)
- [Packages](#packages)
- [Routes](#routes)
- [Extensions](#extensions)
- [Catalog entity relations graph card](#catalog-entity-relations-graph-card)
- [Catalog entity relations graph page](#catalog-entity-relations-graph-page)
## Installation
This plugin installation requires the following steps:
> [!IMPORTANT]
> In addition to installing this plugin, be sure to install the [Catalog](https://backstage.io/docs/features/software-catalog/) plugin, as the Catalog graph extends its capabilities.
1. Add the `@backstage/catalog-graph` dependency to your app `package.json` file and install it;
2. In your application's configuration file, enable the catalog entity relations graphic card extension so that the card begins to be presented on the catalog entity page:
```yaml
# app-config.yaml
app:
experimental:
# Auto discovering all plugins extensions
packages: all
extensions:
# This is required because the card is not enable by default once you install the plugin
- entity-card:catalog-graph/relations
```
3. Then start the app, navigate to an entity's page and see the Relations graph there;
4. By clicking on the "View Graph" card action, you will be redirected to the catalog entity relations page.
## Customization
This plugin can be customized in two ways: via the `app-config.yaml` file or through code. The following sections will explain to you what kind of configurations are available for use, as well as how you can customize the plugin implementation.
### Packages
The features of this plug-in can be discovered automatically as soon as you install it, but you can also configure the plug-in not to be enabled for certain [environments](https://backstage.io/docs/conf/writing/#configuration-files). See the examples below:
_Enabling auto discovering the plugin extensions in production_
```yaml
# app-config.production.yaml
# Overriding configurations for the local production environment
app:
experimental:
packages:
# Only the following packages will be included
include:
- '@backstage/plugin-catalog-graph'
```
_Disabling auto discovering the plugin extensions in development_
```yaml
# app-config.local.yaml
# Overriding configurations for the local development environment
app:
experimental:
packages:
# All but the following package will be included
exclude:
- '@backstage/plugin-catalog-graph'
```
For more options of package configurations, see [this](https://backstage.io/docs/frontend-system/architecture/app/#feature-discovery) documentation.
### Routes
The Catalog graph plugin exposes regular and external routes that can be used to configure route bindings.
| Key | Type | Description |
| --------------- | -------------- | --------------------------------------- |
| `catalogGraph` | Regular route | A route ref to the Catalog graph page. |
| `catalogEntity` | External route | A route ref to the Catalog entity page. |
As an example, here is an association between the external entity page and a different route other than the Catalog plugin's default entity page:
```yaml
# app-config.yaml
app:
routes:
bindings:
# example binding the external catalog graph to a regular route
# defaults to catalog.catalogEntity
catalog-graph.catalogEntity: <some-plugin-id>.<some-regular-route-key>
```
Additionally, it is possible to point a route from another plugin to the Catalog graph page:
```yaml
# app-config.yaml
app:
routes:
bindings:
# example binding a external route to the catalog graph page
<plugin-id>.<external-route-key>: catalog-graph.catalogGraph
```
Route binding is also possible through code. For more information, see [this](https://backstage.io/docs/frontend-system/architecture/routes#binding-external-route-references) documentation.
### Extensions
The Catalog graphics plugin provides extensions for each of its features, see below how to customize these extensions:
#### Catalog Entity Relations Graph Card
An [entity card](https://backstage.io/docs/frontend-system/building-plugins/extension-types#entitycard---reference) extension that renders the relation graph for an entity on the Catalog entity page and has an action that redirects users to the more advanced [relations graph page](#catalog-entity-relations-graph-page).
| kind | namespace | name | id | Default enabled |
| ----------- | ------------- | ---------------- | ------------------------------------- | --------------- |
| entity-card | catalog-graph | entity-relations | `entity-card:catalog-graph/relations` | No |
##### Output
A React component defined by the [coreExtensionData.reactElement](https://backstage.io/docs/reference/frontend-plugin-api.coreextensiondata/) type.
##### Inputs
There are no inputs available for this extension.
##### Config
The card configurations should be defined under the `app.extensions.entity-card:catalog-graph/relations.config` key:
```yaml
# app-config.yaml
app:
extensions:
# this is the extension id and it follows the naming pattern bellow:
# <extension-kind>/<plugin-namespace>:<extension-name>
- entity-card:catalog-graph/relations:
config:
# example configuring the card title
# defaults to "Relations"
title: 'Entities Relations Graph'
```
See below the complete list of available configs:
| Key | Description | Type | Optional | Default value |
| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------- | ---------------------------------------------------------------------------------------------------------------- |
| `filter` | A [text-based query](<(https://github.com/backstage/backstage/pull/21480)>) used to filter whether the extension should be rendered or not. | `string` | yes | - |
| `title` | The card title text. | `string` | yes | `'Relations'` |
| `height` | The card height fixed size. | `number` | yes | - |
| `kinds` | Restricted list of entity [kinds](https://backstage.io/docs/features/software-catalog/descriptor-format/#contents) to display in the graph. | `string[]` | yes | - |
| `relations` | Restricted list of entity [relations](https://backstage.io/docs/features/software-catalog/descriptor-format/#common-to-all-kinds-relations) to display in the graph. | `string[]` | yes | - |
| `maxDepth` | A maximum number of levels of relations to display in the graph. | `number` | yes | `1` |
| `unidirectional` | Shows only relations that are from the source to the target entity. | `boolean` | yes | `true` |
| `mergeRelations` | Merge the relations line into a single one. | `boolean` | yes | `true` |
| `direction` | Render direction of the graph. | `TB` \| `BT` \| `LR` \| `RL` | yes | `'LR'` |
| `relationPairs` | A list of [pairs of entity relations](https://backstage.io/docs/features/software-catalog/well-known-relations#relations), used to define which relations are merged together and which the primary relation is. | `[string[], string[]]` | yes | Show all entity [relations](https://backstage.io/docs/features/software-catalog/well-known-relations#relations). |
| `zoom` | Controls zoom behavior of graph. | `enabled` \| `disabled` \| `enable-on-click` | yes | `'enabled'` |
| `curve` | A factory name for curve generators addressing both lines and areas. | `curveStepBefore` \| `curveMonotoneX` | yes | `'enable-on-click' ` |
##### Disable
The card is disabled by default when you install the plugin, but you can prevent future versions from enabling it by adding this configuration:
```yaml
# app-config.yaml
app:
extensions:
# this is the extension id and it follows the naming pattern bellow:
# <extension-kind>/<plugin-namespace>:<extension-name>
# example disbaling the graph card extension
- entity-card:catalog-graph/relations: false
```
##### Override
Overriding the card extension allows you to modify how it is implemented.
> [!CAUTION]
> To maintain the same level of configuration, you should define the same or an extended configuration schema.
Here is an example overriding the card extension with a custom component:
```tsx
import { createExtensionOverrides, createSchemaFromZod } from '@backstage/backstage-plugin-api';
import { createEntityCardExtension } from '@backstage/plugin-catalog-react/alpha';
export default createExtensionOverrides(
extensions: [
createEntityCardExtension({
// These namespace and name are necessary so the system knows that this extension will replace the default 'entity-relations' card extension provided by the 'catalog-graph' plugin
namespace: 'catalog-graph',
name: 'entity-relations',
configSchema: createSchemaFromZod(z => z.object({
filter: z.string().optional(),
// Ommitting the rest of default configs for simplicity in this example
})),
loader: () => import('./components').then(m => <m.MyEntityRelationsCard />)
})
]
);
```
For more information about where to place extension overrides, see the official [documentation](https://backstage.io/docs/frontend-system/architecture/extension-overrides).
#### Catalog Entity Relations Graph Page
A [page](https://backstage.io/docs/reference/frontend-plugin-api.createapiextension) extension that lets you customize the relations displayed for a Catalog entity in the graph viewer using a series of filters.
| Kind | Namespace | Name | Id | Default enabled |
| ---- | ------------- | :--: | -------------------- | :-------------: |
| page | catalog-graph | - | `page:catalog-graph` | Yes |
##### Output
A React component defined by the [coreExtensionData.reactElement](https://backstage.io/docs/reference/frontend-plugin-api.coreextensiondata/) type.
##### Inputs
There are no inputs available for this extension.
##### Config
The page configurations should be defined under the `app.extensions.page:catalog-graph.config` key:
```yaml
# app-config.yaml
app:
extensions:
# this is the extension id and it follows the naming pattern bellow:
# <extension-kind>/<plugin-namespace>:<extension-name>
- page:catalog-graph:
config:
# example configuring the page path
# defaults to "/catalog-graph"
path: '/entity-graph'
```
See below the complete list of available configs:
| Key | Description | Type | Optional | Default value |
| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ---------------------------------------------------------------------------------------------------------------- |
| `path` | The page route path. | `string` | true | `'/catalog-graph' ` |
| `initialState` | These are the initial filter values, as opposed to configuration of the available filter values. | `{ selectedRelations?: string[],selectedKinds?: string[],rootEntityRefs?: string[],maxDepth?: number,unidirectional?: boolean,mergeRelations?: boolean,direction?: Direction,showFilters?: boolean,curve?: 'curveStepBefore' \| 'curveMonotoneX' }` | true | `{}` |
| `kinds` | Restricted list of entity [kinds](https://backstage.io/docs/features/software-catalog/descriptor-format/#contents) to display in the graph. | `string[]` | yes | - |
| `relations` | Restricted list of entity [relations](https://backstage.io/docs/features/software-catalog/descriptor-format/#common-to-all-kinds-relations) to display in the graph. | `string[]` | yes | - |
| `maxDepth` | A maximum number of levels of relations to display in the graph. | `number` | yes | `1` |
| `unidirectional` | Shows only relations that are from the source to the target entity. | `boolean` | yes | `true` |
| `mergeRelations` | Merge the relations line into a single one. | `boolean` | yes | `true` |
| `direction` | Render direction of the graph. | `TB` \| `BT` \| `LR` \| `RL` | yes | `'LR'` |
| `relationPairs` | A list of [pairs of entity relations](https://backstage.io/docs/features/software-catalog/well-known-relations#relations), used to define which relations are merged together and which the primary relation is. | `[string[], string[]]` | yes | Show all entity [relations](https://backstage.io/docs/features/software-catalog/well-known-relations#relations). |
| `zoom` | Controls zoom behavior of graph. | `enabled` \| `disabled` \| `enable-on-click` | yes | `'enabled'` |
| `curve` | A factory name for curve generators addressing both lines and areas. | `curveStepBefore` \| `curveMonotoneX` | yes | `'enable-on-click' ` |
##### Disable
When you install the plugin, the page is automatically enabled, but you can disable it with the following setting:
```yaml
# app-config.yaml
app:
extensions:
# this is the extension id and it follows the naming pattern bellow:
# <extension-kind>/<plugin-namespace>:<extension-name>
# example disbaling the graph page extension
- page:catalog-graph: false
```
##### Override
Overriding the page extension allows you to modify how it is implemented.
> [!CAUTION]
> To maintain the same level of configuration, you need to define the same or an extended configuration schema. In order to avoid side effects on external plugins that expect this page to be associated with the default path and route reference, remember to use the same default path so that applications that use the default path still point to the same page and the same route reference.
Here is example overriding the page extension with a custom component:
```tsx
import { createExtensionOverrides, createPageExtension, createSchemaFromZod } from '@backstage/backstage-plugin-api';
import { convertLegacyRouteRef } from '@backstage/core-compat-api';
import { catalogGraphRouteRef } from '@backstage/plugin-catalog-graph';
export default createExtensionOverrides(
extensions: [
createPageExtension({
// Ommiting name since it is an index page
// This namespace is necessary so the system knows that this extension will replace the default 'catalog-graph' page extension
namespace: 'catalog-graph',
defaultPath: '/catalog-graph',
routeRef: convertLegacyRouteRef(catalogGraphRouteRef),
createSchemaFromZod(z => z.object({
path: z.string().default('/catalog-graph')
// Ommitting the rest of default configs for simplicity in this example
})),
loader: () => import('./components').then(m => <m.CustomEntityRelationsPage />)
})
]
);
```
For more information about where to place extension overrides, see the official [documentation](https://backstage.io/docs/frontend-system/architecture/extension-overrides).
plugins/catalog-graph/README.md
+3
View File
@@ -1,5 +1,8 @@
# catalog-graph
> Disclaimer:
> If you are looking for documentation on the experimental new frontend system support, please go [here](./README-alpha.md).
Welcome to the catalog graph plugin! The catalog graph visualizes the relations
between entities, like ownership, grouping or API relationships.
plugins/catalog-graph/api-report-alpha.md
+29
View File
@@ -0,0 +1,29 @@
## API Report File for "@backstage/plugin-catalog-graph"
> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
```ts
import { BackstagePlugin } from '@backstage/frontend-plugin-api';
import { ExternalRouteRef } from '@backstage/frontend-plugin-api';
import { RouteRef } from '@backstage/frontend-plugin-api';
// @public (undocumented)
const _default: BackstagePlugin<
{
catalogGraph: RouteRef<undefined>;
},
{
catalogEntity: ExternalRouteRef<
{
name: string;
kind: string;
namespace: string;
},
true
>;
}
>;
export default _default;
// (No @packageDocumentation comment for this package)
```
plugins/catalog-graph/catalog-graph-entity-relations-card.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 231 KiB

plugins/catalog-graph/catalog-graph-entity-relations-page.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 155 KiB

plugins/catalog-graph/package.json
+18 -3
View File
@@ -5,9 +5,22 @@
"types": "src/index.ts",
"license": "Apache-2.0",
"publishConfig": {
"access": "public",
"main": "dist/index.esm.js",
"types": "dist/index.d.ts"
"access": "public"
},
"exports": {
".": "./src/index.ts",
"./alpha": "./src/alpha.tsx",
"./package.json": "./package.json"
},
"typesVersions": {
"*": {
"alpha": [
"src/alpha.tsx"
],
"package.json": [
"package.json"
]
}
},
"backstage": {
"role": "frontend-plugin"
@@ -31,8 +44,10 @@
"dependencies": {
"@backstage/catalog-client": "workspace:^",
"@backstage/catalog-model": "workspace:^",
"@backstage/core-compat-api": "workspace:^",
"@backstage/core-components": "workspace:^",
"@backstage/core-plugin-api": "workspace:^",
"@backstage/frontend-plugin-api": "workspace:^",
"@backstage/plugin-catalog-react": "workspace:^",
"@backstage/types": "workspace:^",
"@material-ui/core": "^4.12.2",
plugins/catalog-graph/src/alpha.tsx
+108
View File
@@ -0,0 +1,108 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React from 'react';
import {
createPageExtension,
createPlugin,
createSchemaFromZod,
} from '@backstage/frontend-plugin-api';
import {
compatWrapper,
convertLegacyRouteRef,
} from '@backstage/core-compat-api';
import { createEntityCardExtension } from '@backstage/plugin-catalog-react/alpha';
import { catalogGraphRouteRef, catalogEntityRouteRef } from './routes';
import { Direction } from './components';
function getEntityGraphRelationsConfigSchema(
z: Parameters<Parameters<typeof createSchemaFromZod>[0]>[0],
) {
// Mapping EntityRelationsGraphProps to config
// The classname and render functions are configurable only via extension overrides
return z.object({
kinds: z.array(z.string()).optional(),
relations: z.array(z.string()).optional(),
maxDepth: z.number().optional(),
unidirectional: z.boolean().optional(),
mergeRelations: z.boolean().optional(),
direction: z.nativeEnum(Direction).optional(),
relationPairs: z.array(z.tuple([z.string(), z.string()])).optional(),
zoom: z.enum(['enabled', 'disabled', 'enable-on-click']).optional(),
curve: z.enum(['curveStepBefore', 'curveMonotoneX']).optional(),
});
}
const CatalogGraphEntityCard = createEntityCardExtension({
name: 'relations',
configSchema: createSchemaFromZod(z =>
z
.object({
// Filter is a config required to all entity cards
filter: z.string().optional(),
title: z.string().optional(),
height: z.number().optional(),
// Skipping a "variant" config for now, defaulting to "gridItem" in the component
// For more details, see this comment: https://github.com/backstage/backstage/pull/22619#discussion_r1477333252
})
.merge(getEntityGraphRelationsConfigSchema(z)),
),
loader: async ({ config: { filter, ...props } }) =>
import('./components/CatalogGraphCard').then(m =>
compatWrapper(<m.CatalogGraphCard {...props} />),
),
});
const CatalogGraphPage = createPageExtension({
defaultPath: '/catalog-graph',
routeRef: convertLegacyRouteRef(catalogGraphRouteRef),
configSchema: createSchemaFromZod(z =>
z.object({
// Path is a default config required to all pages
path: z.string().default('/catalog-graph'),
// Mapping intialState prop to config, these are the initial filter values, as opposed to configuration of the available filter values
initialState: z
.object({
selectedKinds: z.array(z.string()).optional(),
selectedRelations: z.array(z.string()).optional(),
rootEntityRefs: z.array(z.string()).optional(),
maxDepth: z.number().optional(),
unidirectional: z.boolean().optional(),
mergeRelations: z.boolean().optional(),
direction: z.nativeEnum(Direction).optional(),
showFilters: z.boolean().optional(),
curve: z.enum(['curveStepBefore', 'curveMonotoneX']).optional(),
})
.merge(getEntityGraphRelationsConfigSchema(z))
.optional(),
}),
),
loader: ({ config: { path, ...props } }) =>
import('./components/CatalogGraphPage').then(m =>
compatWrapper(<m.CatalogGraphPage {...props} />),
),
});
export default createPlugin({
id: 'catalog-graph',
routes: {
catalogGraph: convertLegacyRouteRef(catalogGraphRouteRef),
},
externalRoutes: {
catalogEntity: convertLegacyRouteRef(catalogEntityRouteRef),
},
extensions: [CatalogGraphPage, CatalogGraphEntityCard],
});
plugins/catalog-react/api-report-alpha.md
+7 -3
View File
@@ -9,6 +9,7 @@ import { AnyExtensionInputMap } from '@backstage/frontend-plugin-api';
import { ConfigurableExtensionDataRef } from '@backstage/frontend-plugin-api';
import { Entity } from '@backstage/catalog-model';
import { ExtensionDefinition } from '@backstage/frontend-plugin-api';
import { PortableSchema } from '@backstage/frontend-plugin-api';
import { ResolvedExtensionInputs } from '@backstage/frontend-plugin-api';
import { ResourcePermission } from '@backstage/plugin-permission-common';
import { RouteRef } from '@backstage/frontend-plugin-api';
@@ -25,6 +26,9 @@ export const catalogExtensionData: {
// @alpha (undocumented)
export function createEntityCardExtension<
TConfig extends {
filter?: string;
},
TInputs extends AnyExtensionInputMap,
>(options: {
namespace?: string;
@@ -35,15 +39,15 @@ export function createEntityCardExtension<
};
disabled?: boolean;
inputs?: TInputs;
configSchema?: PortableSchema<TConfig>;
filter?:
| typeof catalogExtensionData.entityFilterFunction.T
| typeof catalogExtensionData.entityFilterExpression.T;
loader: (options: {
config: TConfig;
inputs: Expand<ResolvedExtensionInputs<TInputs>>;
}) => Promise<JSX.Element>;
}): ExtensionDefinition<{
filter?: string | undefined;
}>;
}): ExtensionDefinition<TConfig>;
// @alpha (undocumented)
export function createEntityContentExtension<
plugins/catalog-react/src/alpha.tsx
+14 -6
View File
@@ -17,6 +17,7 @@
import {
AnyExtensionInputMap,
ExtensionBoundary,
PortableSchema,
ResolvedExtensionInputs,
RouteRef,
coreExtensionData,
@@ -48,6 +49,7 @@ export const catalogExtensionData = {
// TODO: Figure out how to merge with provided config schema
/** @alpha */
export function createEntityCardExtension<
TConfig extends { filter?: string },
TInputs extends AnyExtensionInputMap,
>(options: {
namespace?: string;
@@ -55,13 +57,23 @@ export function createEntityCardExtension<
attachTo?: { id: string; input: string };
disabled?: boolean;
inputs?: TInputs;
configSchema?: PortableSchema<TConfig>;
filter?:
| typeof catalogExtensionData.entityFilterFunction.T
| typeof catalogExtensionData.entityFilterExpression.T;
loader: (options: {
config: TConfig;
inputs: Expand<ResolvedExtensionInputs<TInputs>>;
}) => Promise<JSX.Element>;
}) {
const configSchema =
'configSchema' in options
? options.configSchema
: (createSchemaFromZod(z =>
z.object({
filter: z.string().optional(),
}),
) as PortableSchema<TConfig>);
return createExtension({
kind: 'entity-card',
namespace: options.namespace,
@@ -77,15 +89,11 @@ export function createEntityCardExtension<
filterExpression: catalogExtensionData.entityFilterExpression.optional(),
},
inputs: options.inputs,
configSchema: createSchemaFromZod(z =>
z.object({
filter: z.string().optional(),
}),
),
configSchema,
factory({ config, inputs, node }) {
const ExtensionComponent = lazy(() =>
options
.loader({ inputs })
.loader({ inputs, config })
.then(element => ({ default: () => element })),
);
yarn.lock
+2
View File
@@ -5785,9 +5785,11 @@ __metadata:
"@backstage/catalog-model": "workspace:^"
"@backstage/cli": "workspace:^"
"@backstage/core-app-api": "workspace:^"
"@backstage/core-compat-api": "workspace:^"
"@backstage/core-components": "workspace:^"
"@backstage/core-plugin-api": "workspace:^"
"@backstage/dev-utils": "workspace:^"
"@backstage/frontend-plugin-api": "workspace:^"
"@backstage/plugin-catalog": "workspace:^"
"@backstage/plugin-catalog-react": "workspace:^"
"@backstage/test-utils": "workspace:^"