docs: address copilot review feedback

Fix links in viewing-catalog.md and filter-catalog.md to point to
the new frontend system catalog-customization.md instead of the old
guide. Fix the Kubernetes entity content extension ID to use the
correct `entity-content:kubernetes/kubernetes` format. Wrap raw
extension definitions in `createFrontendModule` in search and
scaffolder docs. Correct TechDocs addon installation instructions
to explicitly install addon modules rather than claiming
auto-discovery.

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
Made-with: Cursor
This commit is contained in:
Patrik Oldsberg
2026-03-30 12:42:11 +02:00
parent c9132c223c
commit 561f555fb1
7 changed files with 62 additions and 17 deletions
+1 -1
View File
@@ -24,7 +24,7 @@ The Kubernetes tab is shown by default for entities where Kubernetes data is ava
```yaml title="app-config.yaml"
app:
extensions:
- entity-content:kubernetes:
- entity-content:kubernetes/kubernetes:
config:
filter:
metadata.annotations.backstage.io/kubernetes-id:
+13 -3
View File
@@ -119,14 +119,24 @@ export const MySearchResultListItem = SearchResultListItemBlueprint.make({
});
```
Install this in your app by passing it to `createApp`:
Install this in your app by wrapping it in a frontend module and passing it to `createApp`:
```tsx title="packages/app/src/search/searchModule.ts"
import { createFrontendModule } from '@backstage/frontend-plugin-api';
import { MySearchResultListItem } from './MySearchResultListItem';
export const searchCustomizations = createFrontendModule({
pluginId: 'search',
extensions: [MySearchResultListItem],
});
```
```tsx title="packages/app/src/App.tsx"
import { createApp } from '@backstage/frontend-defaults';
import { MySearchResultListItem } from './search/MySearchResultListItem';
import { searchCustomizations } from './search/searchModule';
const app = createApp({
features: [MySearchResultListItem],
features: [searchCustomizations],
});
export default app.createRoot();
+13 -3
View File
@@ -178,14 +178,24 @@ The extension is then exported from your plugin's alpha entry point and
automatically discovered when the plugin is installed.
If you need to provide a search result list item extension from your app
rather than a plugin, you can install it directly in `createApp`:
rather than a plugin, wrap it in a frontend module and pass it to `createApp`:
```tsx title="packages/app/src/search/searchModule.ts"
import { createFrontendModule } from '@backstage/frontend-plugin-api';
import { YourSearchResultListItem } from './YourSearchResultListItem';
export const searchCustomizations = createFrontendModule({
pluginId: 'search',
extensions: [YourSearchResultListItem],
});
```
```tsx title="packages/app/src/App.tsx"
import { createApp } from '@backstage/frontend-defaults';
import { YourSearchResultListItem } from './search/YourSearchResultListItem';
import { searchCustomizations } from './search/searchModule';
const app = createApp({
features: [YourSearchResultListItem],
features: [searchCustomizations],
});
export default app.createRoot();
@@ -117,14 +117,24 @@ export const ValidateKebabCaseFieldExtension = FormFieldBlueprint.make({
export { ValidateKebabCaseFieldExtension } from './extensions';
```
Once the extension is created, install it in your app by passing it to `createApp`:
Once the extension is created, install it in your app by wrapping it in a frontend module and passing it to `createApp`:
```tsx title="packages/app/src/scaffolder/scaffolderModule.ts"
import { createFrontendModule } from '@backstage/frontend-plugin-api';
import { ValidateKebabCaseFieldExtension } from './ValidateKebabCase';
export const scaffolderCustomizations = createFrontendModule({
pluginId: 'scaffolder',
extensions: [ValidateKebabCaseFieldExtension],
});
```
```tsx title="packages/app/src/App.tsx"
import { createApp } from '@backstage/frontend-defaults';
import { ValidateKebabCaseFieldExtension } from './scaffolder/ValidateKebabCase';
import { scaffolderCustomizations } from './scaffolder/scaffolderModule';
const app = createApp({
features: [ValidateKebabCaseFieldExtension],
features: [scaffolderCustomizations],
});
export default app.createRoot();
+18 -3
View File
@@ -29,15 +29,30 @@ The plugin provides a docs index page at `/docs` and a reader page for individua
## Using TechDocs Addons
The TechDocs Addon framework lets you render React components in documentation pages. Addons are provided as separate plugin packages that are automatically discovered when installed.
The TechDocs Addon framework lets you render React components in documentation pages. Addons are provided as separate plugin modules.
For example, to add the Report Issue addon:
For example, to add the Report Issue addon, first install the package:
```bash title="From your Backstage root directory"
yarn --cwd packages/app add @backstage/plugin-techdocs-module-addons-contrib
```
Once installed, the addon is automatically active. You can see it in action when you highlight text in your documentation:
Then install the addon module in your app:
```tsx title="packages/app/src/App.tsx"
import { createApp } from '@backstage/frontend-defaults';
import { techDocsReportIssueAddonModule } from '@backstage/plugin-techdocs-module-addons-contrib/alpha';
const app = createApp({
features: [techDocsReportIssueAddonModule],
});
export default app.createRoot();
```
The same package also provides `techDocsExpandableNavigationAddonModule`, `techDocsTextSizeAddonModule`, and `techDocsLightBoxAddonModule`.
You can see the Report Issue addon in action when you highlight text in your documentation:
<!-- todo: Needs zoomable plugin -->
+1 -1
View File
@@ -8,7 +8,7 @@ Audience: All
## Overview
The Catalog can be filtered by any combination of owner, kind, type, lifecycle, processing status, namespace, and name. [Customize Filters](../features/software-catalog/catalog-customization--old.md#customize-filters) provides information on how to modify the available filter criteria.
The Catalog can be filtered by any combination of owner, kind, type, lifecycle, processing status, namespace, and name. [Catalog filters](../features/software-catalog/catalog-customization.md#catalog-filters) provides information on how to modify the available filter criteria.
![Catalog filter options](../assets/uiguide/catalog-filter-options.png)
+3 -3
View File
@@ -31,7 +31,7 @@ Initially, the Catalog displays registered entities matching the following filte
- `Processing Status` - normal
- `Namespace` - The ID of a [namespace](../features/software-catalog/descriptor-format.md#namespace-optional) to which the entity belongs
You can change the initial setting for the [Owner](../features/software-catalog/catalog-customization--old.md#initially-selected-filter) and [Kind](../features/software-catalog/catalog-customization--old.md#initially-selected-kind) filters.
You can change the initial setting for the [Owner](../features/software-catalog/catalog-customization.md#catalog-filters) and [Kind](../features/software-catalog/catalog-customization.md#catalog-filters) filters.
## Informational columns for each entity
@@ -55,7 +55,7 @@ For each kind of entity, a set of columns display information regarding the enti
- `Tags` - an optional field that can be used for searching
- `Actions` - see [Catalog Actions](#catalog-actions)
You can modify the columns associated with each kind of entity, following the instructions in [Customize Columns](../features/software-catalog/catalog-customization--old.md#customize-columns).
You can modify the columns associated with each kind of entity, following the instructions in [Customizing columns, actions, and table options](../features/software-catalog/catalog-customization.md#customizing-columns-actions-and-table-options).
## Catalog Actions
@@ -69,7 +69,7 @@ From left to right, the actions are:
- Edit - Edit the `catalog-info.yaml` file that defines the entity. See [Updating a Component](../getting-started/update-a-component.md)
- Star - Designate the entity as a favorite. You can [filter](../getting-started/filter-catalog.md) the catalog for starred entities.
[Customize Actions](../features/software-catalog/catalog-customization--old.md#customize-actions) describes how you can modify the actions that are displayed.
[Customizing columns, actions, and table options](../features/software-catalog/catalog-customization.md#customizing-columns-actions-and-table-options) describes how you can modify the actions that are displayed.
## Viewing entity details