diff --git a/.changeset/eight-sloths-walk.md b/.changeset/eight-sloths-walk.md new file mode 100644 index 0000000000..666069ce8b --- /dev/null +++ b/.changeset/eight-sloths-walk.md @@ -0,0 +1,5 @@ +--- +'@backstage/frontend-plugin-api': minor +--- + +**BREAKING**: Removed the deprecated `createFrontendPlugin` variant where the plugin ID is passed via an `id` option. To update existing code, switch to using the `pluginId` option instead. diff --git a/.changeset/great-hounds-fix.md b/.changeset/great-hounds-fix.md new file mode 100644 index 0000000000..a7cc488ecb --- /dev/null +++ b/.changeset/great-hounds-fix.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-scaffolder-backend': minor +--- + +Fixed fs:readdir action example diff --git a/.changeset/open-bottles-film.md b/.changeset/open-bottles-film.md new file mode 100644 index 0000000000..68c04f8ada --- /dev/null +++ b/.changeset/open-bottles-film.md @@ -0,0 +1,7 @@ +--- +'@backstage/plugin-catalog-graph': patch +'@backstage/plugin-api-docs': patch +'@backstage/plugin-org': patch +--- + +Updated README instructions for the new frontend system diff --git a/.changeset/shiny-rats-accept.md b/.changeset/shiny-rats-accept.md new file mode 100644 index 0000000000..1c9bb96764 --- /dev/null +++ b/.changeset/shiny-rats-accept.md @@ -0,0 +1,5 @@ +--- +'@backstage/repo-tools': patch +--- + +Removed build-in ignore of the `packages/canon` package for knip reports. diff --git a/.changeset/solid-ducks-flow.md b/.changeset/solid-ducks-flow.md new file mode 100644 index 0000000000..7828216898 --- /dev/null +++ b/.changeset/solid-ducks-flow.md @@ -0,0 +1,7 @@ +--- +'@backstage/frontend-defaults': patch +'@backstage/frontend-app-api': patch +'@backstage/cli': patch +--- + +Deprecated new frontend system config setting `app.experimental.packages` to just `app.packages`. The old config will continue working for the time being, but may be removed in a future release. diff --git a/.changeset/tame-sloths-boil.md b/.changeset/tame-sloths-boil.md new file mode 100644 index 0000000000..8b718fe970 --- /dev/null +++ b/.changeset/tame-sloths-boil.md @@ -0,0 +1,5 @@ +--- +'@backstage/create-app': patch +--- + +Updated the `app.packages` config setting now that it no longer is experimental diff --git a/.changeset/tangy-pets-smoke.md b/.changeset/tangy-pets-smoke.md new file mode 100644 index 0000000000..f7438da333 --- /dev/null +++ b/.changeset/tangy-pets-smoke.md @@ -0,0 +1,6 @@ +--- +'@backstage/frontend-plugin-api': patch +'@backstage/frontend-app-api': patch +--- + +Improved runtime error message clarity when extension factories don't return an iterable object. diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 519204ff24..89fba0c8ad 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -28,7 +28,6 @@ yarn.lock @backstage/maintainers @backst /microsite/static @backstage/maintainers @backstage/documentation-maintainers /packages @backstage/framework-maintainers /packages/backend-openapi-utils @backstage/maintainers @backstage/reviewers @backstage/openapi-tooling-maintainers -/packages/canon @backstage/design-system-maintainers /packages/catalog-client @backstage/catalog-maintainers /packages/catalog-model @backstage/catalog-maintainers /packages/cli @backstage/tooling-maintainers diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index bdf6edbbac..34dfb738b5 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -127,10 +127,6 @@ jobs: - name: build all packages run: yarn backstage-cli repo build --all - # For now canon has a custom build script and needs to be built separately - - name: build canon - run: yarn --cwd packages/canon build - # For now BUI has a custom build script and needs to be built separately - name: build BUI run: yarn --cwd packages/ui build diff --git a/.github/workflows/deploy_packages.yml b/.github/workflows/deploy_packages.yml index 3f24fcc783..f429be076c 100644 --- a/.github/workflows/deploy_packages.yml +++ b/.github/workflows/deploy_packages.yml @@ -110,10 +110,6 @@ jobs: - name: build run: yarn backstage-cli repo build --all - # For now canon has a custom build script and needs to be built separately - - name: build canon - run: yarn --cwd packages/canon build - # For now BUI has a custom build script and needs to be built separately - name: build BUI run: yarn --cwd packages/ui build diff --git a/.github/workflows/sync_canon.yml b/.github/workflows/sync_canon.yml index 5abae892f6..31009094e3 100644 --- a/.github/workflows/sync_canon.yml +++ b/.github/workflows/sync_canon.yml @@ -1,4 +1,4 @@ -name: Sync Canon Docs +name: Sync BUI Docs on: push: branches: [master] @@ -36,7 +36,7 @@ jobs: - name: Configure Git run: | git config --global user.email noreply@backstage.io - git config --global user.name 'Github Canon Docs workflow' + git config --global user.name 'Github BUI Docs workflow' - name: Install dependencies working-directory: docs-ui @@ -53,9 +53,9 @@ jobs: git rm -rf . cp -R ../docs-ui/dist/. . - - name: Commit to canon-storybook repo + - name: Commit to bui-storybook repo working-directory: bui-external-docs run: | git add . - git commit -am "Canon Docs build for backstage/backstage@${{ github.sha }}" + git commit -am "BUI Docs build for backstage/backstage@${{ github.sha }}" git push diff --git a/LABELS.md b/LABELS.md index 32d5c7f095..f1af06d4fa 100644 --- a/LABELS.md +++ b/LABELS.md @@ -40,7 +40,7 @@ These labels indicate which part of Backstage an issue or pull request relates t - `area:auditor` - Auditor service and it's use in plugins. - `area:auth` - Authentication and 3rd party authorization. - `area:catalog` - The Catalog plugin and the Software Catalog model and integrations. -- `area:design-system` - The Canon design system and library. +- `area:design-system` - The Backstage UI design system and library. - `area:documentation` - Documentation for adopters, users, and developers. - `area:events` - The Events system and integrations for other plugins. - `area:framework` - The core Backstage framework. diff --git a/app-config.yaml b/app-config.yaml index 910a3e4f99..9c0cb8ef16 100644 --- a/app-config.yaml +++ b/app-config.yaml @@ -1,8 +1,7 @@ app: title: Backstage Example App baseUrl: http://localhost:3000 - experimental: - packages: all # ✨ + packages: all # ✨ #datadogRum: # clientToken: '123456789' diff --git a/docs/architecture-decisions/adr015-jsx-loader-structure.md b/docs/architecture-decisions/adr015-jsx-loader-structure.md new file mode 100644 index 0000000000..b50ccb90e4 --- /dev/null +++ b/docs/architecture-decisions/adr015-jsx-loader-structure.md @@ -0,0 +1,77 @@ +--- +id: adrs-adr015 +title: 'ADR015: Types and naming for element and component options' +description: Architecture Decision Record (ADR) for the proper types and naming for element and component options +--- + +## Context + +Until now there hasn't been a clear standard for how to define options that are intended to provide JSX elements or components. This led to a mix of different patterns in public APIs, which this ADR aims to standardize. + +## Decision + +We will use one of the following option property names and types when defining options that are intended to provide JSX elements or components: + +### Simple element + +This option is used when a simple synchronous JSX element is provided. It must only be used in areas where lazy-loading is not needed. + +```tsx +{ + element: JSX.Element; +} +``` + +### Simple component + +This option is used when a simple synchronous component is provided. It must only be used in areas where lazy-loading is not needed. + +```tsx +{ + component: (props: { ... }) => JSX.Element | null +} +``` + +### Async element loader + +This option is used when a simple asynchronous JSX element is provided. It is the preferred option when only producing a single instance and there is no need to pass properties to the component. This format simplifies the creation of closures for passing additional properties in the loader implementation. + +```tsx +{ + loader: () => Promise; +} +``` + +### Async component loader + +This option is used when a simple asynchronous component is provided. It is the preferred option when properties need to be passed to the component or multiple instance are needed, and lazy-loading is required. + +```tsx +{ + loader: () => Promise<(props: { ... }) => JSX.Element | null> +} +``` + +### Any component loader + +This option is used in the same cases as the async component loader, but when the option of synchronous loading is also needed. The structure of always having the outer loader function, even in the synchronous case, makes it possible to determine the type of the loader at runtime. + +```tsx +{ + loader: (() => props => JSX.Element | null) | (() => Promise JSX.Element | null>) +} +``` + +Note that when consuming this loader we'll need to unconditionally wrap it with `React.lazy`. This is because you can't delay the call to `React.lazy` until rendering, because you're not allowed to call it within a render function. This means that we can't first call the loader to check whether the returned value is a promise or not, and we must instead unconditionally wrap it with `React.lazy`. Therefore the implementation of accepting one of these loaders as an option needs to look something like this: + +```tsx +const LazyComponent = React.lazy(() => + Promise.resolve(options.loader()).then(loaded => ({ default: loaded })), +); +``` + +## Consequences + +We will update all APIs for the new frontend system in the `@backstage/frontend-*` packages. + +We will not update any of the existing APIs for the old frontend system in the `@backstage/core-*` packages. diff --git a/docs/frontend-system/architecture/10-app.md b/docs/frontend-system/architecture/10-app.md index 3fcfec9e9b..d1ab51d5be 100644 --- a/docs/frontend-system/architecture/10-app.md +++ b/docs/frontend-system/architecture/10-app.md @@ -48,31 +48,28 @@ App feature discovery lets you automatically discover and install features provi Because feature discovery needs to interact with the compilation process, it is only available when using the `@backstage/cli` to build your app. It is hooked into the WebPack compilation process by scanning your app package for compatible dependencies, which are then made part of the app compilation bundle. -Since the `@backstage/cli` is a more stable component than the new frontend system, feature discovery is currently marked as an experimental feature of the CLI and needs to be enabled manually. To enable it, add the following configuration to your `app-config.yaml`: +To enable frontend feature discovery, add the following configuration to your `app-config.yaml`: ```yaml app: - experimental: - packages: all + packages: all ``` This will cause all dependencies in your app package to be installed automatically. If this is not desired, you can use include or exclude filters to narrow down the set of packages: ```yaml app: - experimental: - packages: - # Only the following packages will be included - include: - - '@backstage/plugin-catalog' - - '@backstage/plugin-scaffolder' + packages: + # Only the following packages will be included + include: + - '@backstage/plugin-catalog' + - '@backstage/plugin-scaffolder' --- app: - experimental: - packages: - # All but the following package will be included - exclude: - - '@backstage/plugin-catalog' + packages: + # All but the following package will be included + exclude: + - '@backstage/plugin-catalog' ``` Note that you do not need to manually exclude packages that you also import explicitly in code, since plugin instances are deduplicated by the app. You will never end up with duplicate plugin installations except if they are in fact two different plugin instances with different IDs. diff --git a/docs/frontend-system/building-apps/08-migrating.md b/docs/frontend-system/building-apps/08-migrating.md index a4ed7859f6..e796f64728 100644 --- a/docs/frontend-system/building-apps/08-migrating.md +++ b/docs/frontend-system/building-apps/08-migrating.md @@ -244,8 +244,7 @@ Plugins don't even have to be imported manually after installing their package i ```yaml title="in app-config.yaml" app: # Enabling plugin and override features discovery - experimental: - packages: all # ✨ + packages: all # ✨ ``` ### `featureFlags` diff --git a/package.json b/package.json index 85467a94f6..1963ae3561 100644 --- a/package.json +++ b/package.json @@ -154,7 +154,7 @@ "sloc": "^0.3.1", "sort-package-json": "^2.8.0", "typedoc": "^0.28.0", - "typescript": "~5.6.0" + "typescript": "~5.7.0" }, "packageManager": "yarn@4.8.1", "engines": { diff --git a/packages/app-next/app-config.yaml b/packages/app-next/app-config.yaml index 5665324be6..f83e4d4ba0 100644 --- a/packages/app-next/app-config.yaml +++ b/packages/app-next/app-config.yaml @@ -1,6 +1,5 @@ app: - experimental: - packages: 'all' # ✨ + packages: 'all' # ✨ routes: bindings: diff --git a/packages/app-next/knip-report.md b/packages/app-next/knip-report.md index c30e426318..de7de83ffc 100644 --- a/packages/app-next/knip-report.md +++ b/packages/app-next/knip-report.md @@ -1,6 +1,6 @@ # Knip report -## Unused dependencies (30) +## Unused dependencies (26) | Name | Location | Severity | | :----------------------------------------------- | :----------- | :------- | @@ -12,19 +12,15 @@ | @backstage/plugin-catalog-common | package.json | error | | @backstage/plugin-techdocs-react | package.json | error | | @backstage/plugin-catalog-graph | package.json | error | -| @backstage/plugin-notifications | package.json | error | | @backstage/plugin-search-common | package.json | error | | @backstage/plugin-search-react | package.json | error | | @backstage/integration-react | package.json | error | | @backstage/plugin-auth-react | package.json | error | | @backstage/plugin-scaffolder | package.json | error | -| @backstage/frontend-app-api | package.json | error | | @backstage/core-plugin-api | package.json | error | | @backstage/plugin-api-docs | package.json | error | | @backstage/plugin-catalog | package.json | error | | @backstage/plugin-signals | package.json | error | -| @backstage/catalog-model | package.json | error | -| @backstage/plugin-search | package.json | error | | @backstage/app-defaults | package.json | error | | @backstage/plugin-app | package.json | error | | @backstage/plugin-org | package.json | error | diff --git a/packages/app/package.json b/packages/app/package.json index 7991c0f9a6..6ef4a0c14a 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -94,7 +94,7 @@ "@types/react": "*", "@types/react-dom": "*", "@types/zen-observable": "^0.8.0", - "axios": "^1.7.7", + "axios": "^1.11.0", "cross-env": "^7.0.0", "msw": "^1.0.0" }, diff --git a/packages/backend-dynamic-feature-service/knip-report.md b/packages/backend-dynamic-feature-service/knip-report.md index 79f2435433..55e3fd302b 100644 --- a/packages/backend-dynamic-feature-service/knip-report.md +++ b/packages/backend-dynamic-feature-service/knip-report.md @@ -1,8 +1,17 @@ # Knip report -## Unused dependencies (1) +## Unused dependencies (10) -| Name | Location | Severity | -| :------------------------------ | :----------- | :------- | -| @backstage/plugin-search-common | package.json | error | +| Name | Location | Severity | +| :------------------------------------ | :----------- | :------- | +| @backstage/plugin-search-backend-node | package.json | error | +| @backstage/plugin-permission-common | package.json | error | +| @backstage/plugin-catalog-backend | package.json | error | +| @backstage/plugin-permission-node | package.json | error | +| @backstage/plugin-scaffolder-node | package.json | error | +| @backstage/plugin-events-backend | package.json | error | +| @backstage/plugin-search-common | package.json | error | +| @backstage/plugin-events-node | package.json | error | +| @backstage/plugin-auth-node | package.json | error | +| express-promise-router | package.json | error | diff --git a/packages/canon/.eslintrc.js b/packages/canon/.eslintrc.js deleted file mode 100644 index 9638ff6e45..0000000000 --- a/packages/canon/.eslintrc.js +++ /dev/null @@ -1,9 +0,0 @@ -module.exports = { - ...require('@backstage/cli/config/eslint-factory')(__dirname), - extends: ['plugin:storybook/recommended'], - rules: { - 'react/forbid-elements': 'off', - '@backstage/no-mixed-plugin-imports': 'off' - }, -}; - diff --git a/packages/canon/.gitignore b/packages/canon/.gitignore deleted file mode 100644 index dac138d9e0..0000000000 --- a/packages/canon/.gitignore +++ /dev/null @@ -1 +0,0 @@ -css diff --git a/packages/canon/CHANGELOG.md b/packages/canon/CHANGELOG.md deleted file mode 100644 index 6af38b6b55..0000000000 --- a/packages/canon/CHANGELOG.md +++ /dev/null @@ -1,328 +0,0 @@ -# @backstage/canon - -## 0.6.1-next.0 - -### Patch Changes - -- Updated dependencies - - @backstage/ui@0.7.0-next.0 - -## 0.6.0 - -### Minor Changes - -- 1d64db6: **Breaking changes** We are updating our Link component to use React Aria under the hood. To match their API we are updating the `to` prop to `href` to match both internal and external routing. We are also updating our variant naming to include all our new font sizes. -- 83fd7f4: **Breaking change** We are moving the Select component to use React Aria under the hood. We updated most props and events according to their underlying API. -- cae63df: **Breaking changes** The Tabs components has been updates to use React Aria under the hood and to work with react-router-dom directly. -- 4c6d891: **BREAKING CHANGES** - - We’re updating our Button component to provide better support for button links. - - - We’re introducing a new `ButtonLink` component, which replaces the previous render prop pattern. - - To maintain naming consistency across components, `IconButton` is being renamed to `ButtonIcon`. - - Additionally, the render prop will be removed from all button-related components. - - These changes aim to simplify usage and improve clarity in our component API. - -- 2e30459: We are moving our Tooltip component to use React Aria under the hood. In doing so, the structure of the component and its prop are changing to follow the new underlying structure. -- 8fd6fcb: We are renaming @backstage/canon into @backstage/ui. As part of this move we are renaming all class names and CSS variables to follow the new name. "--canon" prefix is becoming "--bui" and all component class names starting with ".canon" will now start with ".bui" - -### Patch Changes - -- 140f652: We are consolidating all css files into a single styles.css in Canon. -- 76255b8: Add new Card component to Canon. -- 8154fb9: Add new SearchField component in Canon -- b0a6c8e: Add new Header component to Canon. -- 6910892: Add new `RadioGroup` + `Radio` component to Canon -- 9c17305: Fix scrolling width and height on ScrollArea component in Canon. -- 390ea20: Export Card and Skeleton components. -- be76576: Improve Button, ButtonIcon and ButtonLink styling in Canon. -- 17beb9b: Update return types for Heading & Text components for React 19. -- a8a8514: We are transforming how we structure our class names and data attributes definitions for all components. They are now all set in the same place. -- 667b951: Added placeholder prop to TextField component. -- eac4a4c: Add new tertiary variant to Button, ButtonIcon and ButtonLink in Canon. -- e71333a: adding export for ButtonLink so it's importable -- 8f2e82d: Add new Skeleton component in Canon -- Updated dependencies - - @backstage/ui@0.6.0 - -## 0.6.0-next.1 - -### Minor Changes - -- 2e30459: We are moving our Tooltip component to use React Aria under the hood. In doing so, the structure of the component and its prop are changing to follow the new underlying structure. - -### Patch Changes - -- 76255b8: Add new Card component to Canon. -- b0a6c8e: Add new Header component to Canon. -- be76576: Improve Button, ButtonIcon and ButtonLink styling in Canon. -- 17beb9b: Update return types for Heading & Text components for React 19. -- eac4a4c: Add new tertiary variant to Button, ButtonIcon and ButtonLink in Canon. -- 8f2e82d: Add new Skeleton component in Canon - -## 0.6.0-next.0 - -### Minor Changes - -- 4c6d891: **BREAKING CHANGES** - - We’re updating our Button component to provide better support for button links. - - - We’re introducing a new `ButtonLink` component, which replaces the previous render prop pattern. - - To maintain naming consistency across components, `IconButton` is being renamed to `ButtonIcon`. - - Additionally, the render prop will be removed from all button-related components. - - These changes aim to simplify usage and improve clarity in our component API. - -### Patch Changes - -- 140f652: We are consolidating all css files into a single styles.css in Canon. -- 8154fb9: Add new SearchField component in Canon -- 6910892: Add new `RadioGroup` + `Radio` component to Canon -- a8a8514: We are transforming how we structure our class names and data attributes definitions for all components. They are now all set in the same place. -- 667b951: Added placeholder prop to TextField component. -- e71333a: adding export for ButtonLink so it's importable - -## 0.5.0 - -### Minor Changes - -- 621fac9: We are updating the default size of the Button component in Canon to be small instead of medium. -- a842554: We set the default size for IconButton in Canon to be small instead of medium. -- 35fd51d: Move TextField component to use react Aria under the hood. Introducing a new FieldLabel component to help build custom fields. -- 78204a2: **Breaking** We are adding a new as prop on the Heading and Text component to make it easier to change the component tag. We are removing the render prop in favour of the as prop. -- c49e335: TextField in Canon now has multiple label sizes as well as the capacity to hide label and description but still make them available for screen readers. -- 24b45ef: Fixes spacing props on layout components and aligned on naming for the Grid component. You should now call the Grid root component using instead of just . - -### Patch Changes - -- 44df879: Add min-width: 0; by default on every Flex components in Canon to help support truncated texts inside flex elements. -- ee6ffe6: Fix styling for the title4 prop on the Heading component in Canon. -- f2f814a: Added a render prop to the Button component in Canon to use it as a link. -- 98f02a6: Add new Switch component in Canon. -- c94f8e0: The filter input in menu comboboxes should now always use the full width of the menu it's in. -- 269316d: Remove leftover console.log from Container component. - -## 0.5.0-next.2 - -### Patch Changes - -- 44df879: Add min-width: 0; by default on every Flex components in Canon to help support truncated texts inside flex elements. -- ee6ffe6: Fix styling for the title4 prop on the Heading component in Canon. -- f2f814a: Added a render prop to the Button component in Canon to use it as a link. - -## 0.5.0-next.1 - -### Minor Changes - -- 621fac9: We are updating the default size of the Button component in Canon to be small instead of medium. -- a842554: We set the default size for IconButton in Canon to be small instead of medium. - -## 0.5.0-next.0 - -### Minor Changes - -- 24b45ef: Fixes spacing props on layout components and aligned on naming for the Grid component. You should now call the Grid root component using instead of just . - -### Patch Changes - -- 269316d: Remove leftover console.log from Container component. - -## 0.4.0 - -### Minor Changes - -- ea36f74: **Breaking Change** Icons on Button and IconButton now need to be imported and placed like this: