diff --git a/docs/features/kubernetes/installation.md b/docs/features/kubernetes/installation.md index b8b9868f6a..18352e78ad 100644 --- a/docs/features/kubernetes/installation.md +++ b/docs/features/kubernetes/installation.md @@ -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: diff --git a/docs/features/search/getting-started.md b/docs/features/search/getting-started.md index ba8ff1c840..6e4789becc 100644 --- a/docs/features/search/getting-started.md +++ b/docs/features/search/getting-started.md @@ -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(); diff --git a/docs/features/search/how-to-guides.md b/docs/features/search/how-to-guides.md index 53f838898c..8c0f430886 100644 --- a/docs/features/search/how-to-guides.md +++ b/docs/features/search/how-to-guides.md @@ -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(); diff --git a/docs/features/software-templates/writing-custom-field-extensions.md b/docs/features/software-templates/writing-custom-field-extensions.md index cca45422cb..b63d29da7a 100644 --- a/docs/features/software-templates/writing-custom-field-extensions.md +++ b/docs/features/software-templates/writing-custom-field-extensions.md @@ -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(); diff --git a/docs/features/techdocs/getting-started.md b/docs/features/techdocs/getting-started.md index 862d14eb4e..d9706c1de8 100644 --- a/docs/features/techdocs/getting-started.md +++ b/docs/features/techdocs/getting-started.md @@ -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: diff --git a/docs/getting-started/filter-catalog.md b/docs/getting-started/filter-catalog.md index 2488b4caab..bdadca3ae7 100644 --- a/docs/getting-started/filter-catalog.md +++ b/docs/getting-started/filter-catalog.md @@ -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) diff --git a/docs/getting-started/viewing-catalog.md b/docs/getting-started/viewing-catalog.md index 3307a863da..464edd8601 100644 --- a/docs/getting-started/viewing-catalog.md +++ b/docs/getting-started/viewing-catalog.md @@ -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