diff --git a/.changeset/migrate-entity-filters-to-predicates.md b/.changeset/migrate-entity-filters-to-predicates.md new file mode 100644 index 0000000000..452372e657 --- /dev/null +++ b/.changeset/migrate-entity-filters-to-predicates.md @@ -0,0 +1,8 @@ +--- +'@backstage/plugin-api-docs': patch +'@backstage/plugin-catalog-graph': patch +'@backstage/plugin-kubernetes': patch +'@backstage/plugin-org': patch +--- + +Updated usage of deprecated APIs in the new frontend system. diff --git a/plugins/api-docs/README-alpha.md b/plugins/api-docs/README-alpha.md index 1c30d62cd4..0f19f51b23 100644 --- a/plugins/api-docs/README-alpha.md +++ b/plugins/api-docs/README-alpha.md @@ -77,12 +77,14 @@ To link that a component provides or consumes an API, see the [`providesApis`](h - entity-card:api-docs/providing-components: config: # Presenting the card only for entities of kind api - filter: kind:api + filter: + kind: api # Shows a table of components that consumes a particular api - entity-card:api-docs/consuming-components: config: # Presenting the card only for entities of kind api - filter: kind:api + filter: + kind: api # Enabling some contents # The contents will be displayed in the same order it appears in this setting list # Shows a "Definition" tab for entities of kind api @@ -352,7 +354,8 @@ app: # The default value is a function that verifies it is a components has api pat of relations # For more information about entity cards filters, check out this pull request # https://github.com/backstage/backstage/pull/21480 - filter: 'kind:component' + filter: + kind: component ``` ###### Override @@ -361,17 +364,19 @@ Use extension overrides for completely re-implementing the has apis entity card ```tsx import { createFrontendModule } from '@backstage/backstage-plugin-api'; -import { createEntityCardExtension } from '@backstage/plugin-catalog-react/alpha'; +import { EntityCardBlueprint } from '@backstage/plugin-catalog-react/alpha'; export default createFrontendModule({ pluginId: 'api-docs', extensions: [ - createEntityCardExtension({ + EntityCardBlueprint.make({ // Name is necessary so the system knows that this extension will override the default 'has-apis' entity card extension provided by the 'api-docs' plugin name: 'has-apis', - // Returning a custom card component - loader: () => - import('./components').then(m => ), + params: { + // Returning a custom card component + loader: () => + import('./components').then(m => ), + }, }), ], }); @@ -422,29 +427,34 @@ app: # /: - entity-card:api-docs/definition: config: - # Default to 'kind:api' + # Default to { kind: 'api' } # For more information about entity cards filters, check out this pull request # https://github.com/backstage/backstage/pull/21480 - filter: 'kind:component' + filter: + kind: component ``` ###### Override -Use extension overrides for completely re-implementing the has apis entity card extension: +Use extension overrides for completely re-implementing the definition entity card extension: ```tsx import { createFrontendModule } from '@backstage/backstage-plugin-api'; -import { createEntityCardExtension } from '@backstage/plugin-catalog-react/alpha'; +import { EntityCardBlueprint } from '@backstage/plugin-catalog-react/alpha'; export default createFrontendModule({ pluginId: 'api-docs', extensions: [ - createEntityCardExtension({ + EntityCardBlueprint.make({ // Name is necessary so the system knows that this extension will override the default 'definition' entity card extension provided by the 'api-docs' plugin name: 'definition', - // Returning a custom card component - loader: () => - import('./components').then(m => ), + params: { + // Returning a custom card component + loader: () => + import('./components').then(m => ( + + )), + }, }), ], }); @@ -495,29 +505,34 @@ app: # /: - entity-card:api-docs/provided-apis: config: - # Default to 'kind:component' + # Default to { kind: 'component' } # For more information about entity cards filters, check out this pull request # https://github.com/backstage/backstage/pull/21480 - filter: 'kind:component' + filter: + kind: component ``` ###### Override -Use extension overrides for completely re-implementing the has apis entity card extension: +Use extension overrides for completely re-implementing the provided-apis entity card extension: ```tsx import { createFrontendModule } from '@backstage/backstage-plugin-api'; -import { createEntityCardExtension } from '@backstage/plugin-catalog-react/alpha'; +import { EntityCardBlueprint } from '@backstage/plugin-catalog-react/alpha'; export default createFrontendModule({ pluginId: 'api-docs', extensions: [ - createEntityCardExtension({ + EntityCardBlueprint.make({ // Name is necessary so the system knows that this extension will override the default 'provided-apis' entity card extension provided by the 'api-docs' plugin name: 'provided-apis', - // Returning a custom card component - loader: () => - import('./components').then(m => ), + params: { + // Returning a custom card component + loader: () => + import('./components').then(m => ( + + )), + }, }), ], }); @@ -568,29 +583,34 @@ app: # /: - entity-card:api-docs/consumed-apis: config: - # Default to 'kind:component' + # Default to { kind: 'component' } # For more information about entity cards filters, check out this pull request # https://github.com/backstage/backstage/pull/21480 - filter: 'kind:component' + filter: + kind: component ``` ###### Override -Use extension overrides for completely re-implementing the has apis entity card extension: +Use extension overrides for completely re-implementing the consumed-apis entity card extension: ```tsx import { createFrontendModule } from '@backstage/backstage-plugin-api'; -import { createEntityCardExtension } from '@backstage/plugin-catalog-react/alpha'; +import { EntityCardBlueprint } from '@backstage/plugin-catalog-react/alpha'; export default createFrontendModule({ pluginId: 'api-docs', extensions: [ - createEntityCardExtension({ + EntityCardBlueprint.make({ // Name is necessary so the system knows that this extension will override the default 'consumed-apis' entity card extension provided by the 'api-docs' plugin name: 'consumed-apis', - // Returning a custom card component - loader: () => - import('./components').then(m => ), + params: { + // Returning a custom card component + loader: () => + import('./components').then(m => ( + + )), + }, }), ], }); @@ -641,31 +661,34 @@ app: # /: - entity-card:api-docs/providing-components: config: - # Default to 'kind:api' + # Default to { kind: 'api' } # For more information about entity cards filters, check out this pull request # https://github.com/backstage/backstage/pull/21480 - filter: 'kind:component' + filter: + kind: component ``` ###### Override -Use extension overrides for completely re-implementing the has apis entity card extension: +Use extension overrides for completely re-implementing the providing-components entity card extension: ```tsx import { createFrontendModule } from '@backstage/backstage-plugin-api'; -import { createEntityCardExtension } from '@backstage/plugin-catalog-react/alpha'; +import { EntityCardBlueprint } from '@backstage/plugin-catalog-react/alpha'; export default createFrontendModule({ pluginId: 'api-docs', extensions: [ - createEntityCardExtension({ + EntityCardBlueprint.make({ // Name is necessary so the system knows that this extension will override the default 'providing-components' entity card extension provided by the 'api-docs' plugin name: 'providing-components', - // Returning a custom card component - loader: () => - import('./components').then(m => ( - - )), + params: { + // Returning a custom card component + loader: () => + import('./components').then(m => ( + + )), + }, }), ], }); @@ -716,31 +739,34 @@ app: # /: - entity-card:api-docs/consuming-components: config: - # Default to 'kind:api' + # Default to { kind: 'api' } # For more information about entity cards filters, check out this pull request # https://github.com/backstage/backstage/pull/21480 - filter: 'kind:component' + filter: + kind: component ``` ###### Override -Use extension overrides for completely re-implementing the has apis entity card extension: +Use extension overrides for completely re-implementing the consuming-components entity card extension: ```tsx import { createFrontendModule } from '@backstage/backstage-plugin-api'; -import { createEntityCardExtension } from '@backstage/plugin-catalog-react/alpha'; +import { EntityCardBlueprint } from '@backstage/plugin-catalog-react/alpha'; export default createFrontendModule({ pluginId: 'api-docs', extensions: [ - createEntityCardExtension({ + EntityCardBlueprint.make({ // Name is necessary so the system knows that this extension will override the default 'consuming-components' entity card extension provided by the 'api-docs' plugin name: 'consuming-components', - // Returning a custom card component - loader: () => - import('./components').then(m => ( - - )), + params: { + // Returning a custom card component + loader: () => + import('./components').then(m => ( + + )), + }, }), ], }); @@ -798,11 +824,12 @@ app: # /: - entity-content:api-docs/definition: config: - # A text-based query used to filter whether the entity contentextension should be rendered or not. + # An entity predicate used to filter whether the entity content extension should be rendered or not. # For more information about entity cards filters, check out this pull request # https://github.com/backstage/backstage/pull/21480 - # defaults to 'kind:api' - filter: 'kind:api' + # defaults to { kind: 'api' } + filter: + kind: api # The entity content table title # defaults to 'Definition' title: 'Definition' @@ -813,23 +840,25 @@ app: ###### Override -Use extension overrides for completely re-implementing the has apis entity card extension: +Use extension overrides for completely re-implementing the definition entity content extension: ```tsx import { createFrontendModule } from '@backstage/backstage-plugin-api'; -import { createEntityContentExtension } from '@backstage/plugin-catalog-react/alpha'; +import { EntityContentBlueprint } from '@backstage/plugin-catalog-react/alpha'; export default createFrontendModule({ pluginId: 'api-docs', extensions: [ - createEntityContentExtension({ + EntityContentBlueprint.make({ // Name is necessary so the system knows that this extension will override the default 'definition' entity content extension provided by the 'api-docs' plugin name: 'definition', - // Returning a custom content component - loader: () => - import('./components').then(m => ( - - )), + params: { + // Returning a custom content component + loader: () => + import('./components').then(m => ( + + )), + }, }), ], }); @@ -878,11 +907,12 @@ app: # /: - entity-content:api-docs/apis: config: - # A text-based query used to filter whether the entity contentextension should be rendered or not. + # An entity predicate used to filter whether the entity content extension should be rendered or not. # For more information about entity cards filters, check out this pull request # https://github.com/backstage/backstage/pull/21480 - # defaults to 'kind:component' - filter: 'kind:component' + # defaults to { kind: 'component' } + filter: + kind: component # The entity content table title # defaults to 'Definition' title: 'Definition' @@ -897,17 +927,19 @@ Use extension overrides for completely re-implementing the apis entity content e ```tsx import { createFrontendModule } from '@backstage/backstage-plugin-api'; -import { createEntityContentExtension } from '@backstage/plugin-catalog-react/alpha'; +import { EntityContentBlueprint } from '@backstage/plugin-catalog-react/alpha'; export default createFrontendModule({ pluginId: 'api-docs', extensions: [ - createEntityContentExtension({ + EntityContentBlueprint.make({ // Name is necessary so the system knows that this extension will override the default 'apis' entity content extension provided by the 'api-docs' plugin name: 'apis', - // Returning a custom content component - loader: () => - import('./components').then(m => ), + params: { + // Returning a custom content component + loader: () => + import('./components').then(m => ), + }, }), ], }); diff --git a/plugins/api-docs/src/alpha.test.tsx b/plugins/api-docs/src/alpha.test.tsx index c6a0adb4ab..252778cc2e 100644 --- a/plugins/api-docs/src/alpha.test.tsx +++ b/plugins/api-docs/src/alpha.test.tsx @@ -80,9 +80,9 @@ describe('api-docs plugin entity extensions', () => { ], }); - // Wait for page to render, then check definition card is not shown - expect(await screen.findByText('my-component')).toBeInTheDocument(); - expect(screen.queryByText('openapi')).not.toBeInTheDocument(); + expect( + await screen.findByTestId('empty-entity-page'), + ).toBeInTheDocument(); }); it('should display the API definition content', async () => { @@ -166,8 +166,9 @@ describe('api-docs plugin entity extensions', () => { }); // Content should not render for Components - expect(await screen.findByText('my-service')).toBeInTheDocument(); - expect(screen.queryByText('Definition')).not.toBeInTheDocument(); + expect( + await screen.findByTestId('empty-entity-page'), + ).toBeInTheDocument(); }); }); }); diff --git a/plugins/api-docs/src/alpha.tsx b/plugins/api-docs/src/alpha.tsx index 73b1c008ab..44ded088f1 100644 --- a/plugins/api-docs/src/alpha.tsx +++ b/plugins/api-docs/src/alpha.tsx @@ -109,7 +109,7 @@ const apiDocsHasApisEntityCard = EntityCardBlueprint.make({ const apiDocsDefinitionEntityCard = EntityCardBlueprint.make({ name: 'definition', params: { - filter: 'kind:api', + filter: { kind: 'api' }, loader: () => import('./components/ApiDefinitionCard').then(m => ( @@ -123,7 +123,7 @@ const apiDocsConsumedApisEntityCard = EntityCardBlueprint.make({ // Omitting configSchema for now // We are skipping variants and columns are too complex to map to zod // See: https://github.com/backstage/backstage/pull/22619#discussion_r1477333252 - filter: 'kind:component', + filter: { kind: 'component' }, loader: () => import('./components/ApisCards').then(m => ), }, @@ -135,7 +135,7 @@ const apiDocsProvidedApisEntityCard = EntityCardBlueprint.make({ // Omitting configSchema for now // We are skipping variants and columns are too complex to map to zod // See: https://github.com/backstage/backstage/pull/22619#discussion_r1477333252 - filter: 'kind:component', + filter: { kind: 'component' }, loader: () => import('./components/ApisCards').then(m => ), }, @@ -147,7 +147,7 @@ const apiDocsConsumingComponentsEntityCard = EntityCardBlueprint.make({ // Omitting configSchema for now // We are skipping variants // See: https://github.com/backstage/backstage/pull/22619#discussion_r1477333252 - filter: 'kind:api', + filter: { kind: 'api' }, loader: () => import('./components/ComponentsCards').then(m => ( @@ -161,7 +161,7 @@ const apiDocsProvidingComponentsEntityCard = EntityCardBlueprint.make({ // Omitting configSchema for now // We are skipping variants // See: https://github.com/backstage/backstage/pull/22619#discussion_r1477333252 - filter: 'kind:api', + filter: { kind: 'api' }, loader: () => import('./components/ComponentsCards').then(m => ( @@ -174,7 +174,7 @@ const apiDocsDefinitionEntityContent = EntityContentBlueprint.make({ params: { path: '/definition', title: 'Definition', - filter: 'kind:api', + filter: { kind: 'api' }, loader: async () => import('./components/ApiDefinitionCard').then(m => ( @@ -191,7 +191,7 @@ const apiDocsApisEntityContent = EntityContentBlueprint.make({ params: { path: '/apis', title: 'APIs', - filter: 'kind:component', + filter: { kind: 'component' }, loader: async () => import('./components/ApisCards').then(m => ( diff --git a/plugins/catalog-graph/README-alpha.md b/plugins/catalog-graph/README-alpha.md index bc5cea3fd1..4f506d4120 100644 --- a/plugins/catalog-graph/README-alpha.md +++ b/plugins/catalog-graph/README-alpha.md @@ -196,25 +196,26 @@ Overriding the card extension allows you to modify how it is implemented. Here is an example overriding the card extension with a custom component: ```tsx -import { - createFrontendModule, - createSchemaFromZod, -} from '@backstage/backstage-plugin-api'; -import { createEntityCardExtension } from '@backstage/plugin-catalog-react/alpha'; +import { createFrontendModule } from '@backstage/backstage-plugin-api'; +import { EntityCardBlueprint } from '@backstage/plugin-catalog-react/alpha'; export default createFrontendModule({ pluginId: 'catalog-graph', extensions: [ - createEntityCardExtension({ + EntityCardBlueprint.makeWithOverrides({ name: 'entity-relations', - configSchema: createSchemaFromZod(z => - z.object({ - filter: z.string().optional(), + config: { + schema: { + filter: z => z.string().optional(), // Omitting the rest of default configs for simplicity in this example - }), - ), - loader: () => - import('./components').then(m => ), + }, + }, + factory(originalFactory, { config }) { + return originalFactory({ + loader: () => + import('./components').then(m => ), + }); + }, }), ], }); diff --git a/plugins/catalog-react/src/testUtils/createTestEntityPage.tsx b/plugins/catalog-react/src/testUtils/createTestEntityPage.tsx index 7ad88a3188..bf62a5a440 100644 --- a/plugins/catalog-react/src/testUtils/createTestEntityPage.tsx +++ b/plugins/catalog-react/src/testUtils/createTestEntityPage.tsx @@ -155,6 +155,10 @@ export function createTestEntityPage( title: content.get(EntityContentBlueprint.dataRefs.title), })); + if (contents.length === 0 && cards.length === 0) { + return
; + } + return ( diff --git a/plugins/kubernetes/README.md b/plugins/kubernetes/README.md index 380c1dffbd..e2c967902b 100644 --- a/plugins/kubernetes/README.md +++ b/plugins/kubernetes/README.md @@ -69,5 +69,11 @@ app: extensions: - entity-content:kubernetes/kubernetes: config: - filter: kind:component,api,resource,system + filter: + kind: + $in: + - component + - api + - resource + - system ``` diff --git a/plugins/org/README-alpha.md b/plugins/org/README-alpha.md index 35258800f2..28e274b58c 100644 --- a/plugins/org/README-alpha.md +++ b/plugins/org/README-alpha.md @@ -99,9 +99,9 @@ This [entity card](https://github.com/backstage/backstage/blob/master/plugins/ca Currently, this entity card extension has only one configuration: -| Config key | Default value | Description | -| ---------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | -| `filter` | `kind:group` | An [entity filter](https://github.com/backstage/backstage/pull/21480) that determines when the card should be displayed on the entity page. | +| Config key | Default value | Description | +| ---------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | +| `filter` | `{ kind: 'group' }` | An [entity filter](https://github.com/backstage/backstage/pull/21480) that determines when the card should be displayed on the entity page. | This is how to configure the `group-profile` extension in the `app-config.yaml` file: @@ -119,19 +119,23 @@ Use extension overrides for completely re-implementing the group-profile entity ```tsx import { createFrontendModule } from '@backstage/backstage-plugin-api'; -import { createEntityCardExtension } from '@backstage/plugin-catalog-react/alpha'; +import { EntityCardBlueprint } from '@backstage/plugin-catalog-react/alpha'; export default createFrontendModule({ pluginId: 'org', extensions: [ - createEntityCardExtension({ + EntityCardBlueprint.make({ // Name is necessary so the system knows that this extension will override the default 'group-profile' entity card extension provided by the 'org' plugin name: 'group-profile', - // By default, this card will show up only for groups - filter: 'kind:group' - // Returning a custom card component - loader: () => - import('./components').then(m => ), + params: { + // By default, this card will show up only for groups + filter: { kind: 'group' }, + // Returning a custom card component + loader: () => + import('./components').then(m => ( + + )), + }, }), ], }); @@ -151,9 +155,9 @@ An [entity card](https://github.com/backstage/backstage/blob/master/plugins/cata Currently, this entity card extension has only one configuration: -| Config key | Default value | Description | -| ---------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | -| `filter` | `kind:group` | An [entity filter](https://github.com/backstage/backstage/pull/21480) that determines when the card should be displayed on the entity page. | +| Config key | Default value | Description | +| ---------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | +| `filter` | `{ kind: 'group' }` | An [entity filter](https://github.com/backstage/backstage/pull/21480) that determines when the card should be displayed on the entity page. | This is how to configure the `members-list` extension in the `app-config.yaml` file: @@ -171,19 +175,21 @@ Use extension overrides for completely re-implementing the members-list entity c ```tsx import { createFrontendModule } from '@backstage/backstage-plugin-api'; -import { createEntityCardExtension } from '@backstage/plugin-catalog-react/alpha'; +import { EntityCardBlueprint } from '@backstage/plugin-catalog-react/alpha'; export default createFrontendModule({ pluginId: 'org', extensions: [ - createEntityCardExtension({ + EntityCardBlueprint.make({ // Name is necessary so the system knows that this extension will override the default 'members-list' entity card extension provided by the 'org' plugin name: 'members-list', - // By default, this card will show up only for groups - filter: 'kind:group' - // Returning a custom card component - loader: () => - import('./components').then(m => ), + params: { + // By default, this card will show up only for groups + filter: { kind: 'group' }, + // Returning a custom card component + loader: () => + import('./components').then(m => ), + }, }), ], }); @@ -203,9 +209,9 @@ An [entity card](https://github.com/backstage/backstage/blob/master/plugins/cata Currently, this entity card extension has only one configuration: -| Config key | Default value | Description | -| ---------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | -| `filter` | `kind:group,user` | An [entity filter](https://github.com/backstage/backstage/pull/21480) that determines when the card should be displayed on the entity page. | +| Config key | Default value | Description | +| ---------- | -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | +| `filter` | `{ kind: { $in: ['group', 'user'] } }` | An [entity filter](https://github.com/backstage/backstage/pull/21480) that determines when the card should be displayed on the entity page. | This is how to configure the `ownership` extension in the `app-config.yaml` file: @@ -223,19 +229,21 @@ Use extension overrides for completely re-implementing the ownership entity card ```tsx import { createFrontendModule } from '@backstage/backstage-plugin-api'; -import { createEntityCardExtension } from '@backstage/plugin-catalog-react/alpha'; +import { EntityCardBlueprint } from '@backstage/plugin-catalog-react/alpha'; export default createFrontendModule({ pluginId: 'org', extensions: [ - createEntityCardExtension({ + EntityCardBlueprint.make({ // Name is necessary so the system knows that this extension will override the default 'ownership' entity card extension provided by the 'org' plugin name: 'ownership', - // By default, this card will show up only for groups or users - filter: 'kind:group,user' - // Returning a custom card component - loader: () => - import('./components').then(m => ), + params: { + // By default, this card will show up only for groups or users + filter: { kind: { $in: ['group', 'user'] } }, + // Returning a custom card component + loader: () => + import('./components').then(m => ), + }, }), ], }); @@ -255,9 +263,9 @@ This [entity card](https://github.com/backstage/backstage/blob/master/plugins/ca Currently, this entity card extension has only one configuration: -| Config key | Default value | Description | -| ---------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | -| `filter` | `kind:user` | An [entity filter](https://github.com/backstage/backstage/pull/21480) that determines when the card should be displayed on the entity page. | +| Config key | Default value | Description | +| ---------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- | +| `filter` | `{ kind: 'user' }` | An [entity filter](https://github.com/backstage/backstage/pull/21480) that determines when the card should be displayed on the entity page. | This is how to configure the `user-profile` extension in the `app-config.yaml` file: @@ -275,19 +283,21 @@ Use extension overrides for completely re-implementing the user-profile entity c ```tsx import { createFrontendModule } from '@backstage/backstage-plugin-api'; -import { createEntityCardExtension } from '@backstage/plugin-catalog-react/alpha'; +import { EntityCardBlueprint } from '@backstage/plugin-catalog-react/alpha'; export default createFrontendModule({ pluginId: 'org', extensions: [ - createEntityCardExtension({ + EntityCardBlueprint.make({ // Name is necessary so the system knows that this extension will override the default 'user-profile' entity card extension provided by the 'org' plugin name: 'user-profile', - // By default, this card will show up only for groups or users - filter: 'kind:user' - // Returning a custom card component - loader: () => - import('./components').then(m => ), + params: { + // By default, this card will show up only for groups or users + filter: { kind: 'user' }, + // Returning a custom card component + loader: () => + import('./components').then(m => ), + }, }), ], });