From 4f9ca91ebf508f2ac9de7f26f6815a68c01cb051 Mon Sep 17 00:00:00 2001 From: Deepthi Ajith Date: Thu, 5 Jun 2025 12:19:06 +0530 Subject: [PATCH 01/14] Added caution design changes to building app - converting-3rd party plugin Signed-off-by: Deepthi Ajith --- docs/frontend-system/building-apps/06-plugin-conversion.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/docs/frontend-system/building-apps/06-plugin-conversion.md b/docs/frontend-system/building-apps/06-plugin-conversion.md index 2fab6cf828..88c4b69d45 100644 --- a/docs/frontend-system/building-apps/06-plugin-conversion.md +++ b/docs/frontend-system/building-apps/06-plugin-conversion.md @@ -8,8 +8,9 @@ description: Documentation for how to convert 3rd-party plugins to support the n If you are using or want to use a 3rd-party plugin that does not yet support the new frontend system in your app, you can often use conversion utilities from `@backstage/core-compat-api` in order wrap the plugin to make it possible to install in your app. -> [!CAUTION] -> The purpose of these utilities is to wrap 3rd-party plugins. Do not use them for your own plugins where you can add support for the new frontend system directly. +:::caution +The purpose of these utilities is to wrap 3rd-party plugins. Do not use them for your own plugins where you can add support for the new frontend system directly. +::: ## Converting a legacy plugin From e36e8559977e8ec0fd2ae8ade89b0220c1c4bd61 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Thu, 5 Jun 2025 12:10:32 +0200 Subject: [PATCH 02/14] cli: add backstage.pluginId templating Signed-off-by: Patrik Oldsberg --- .changeset/stupid-goats-teach.md | 5 +++++ .../cli/templates/backend-plugin-module/package.json.hbs | 3 ++- packages/cli/templates/backend-plugin/package.json.hbs | 3 ++- packages/cli/templates/frontend-plugin/package.json.hbs | 3 ++- .../cli/templates/plugin-common-library/package.json.hbs | 3 ++- packages/cli/templates/plugin-node-library/package.json.hbs | 3 ++- packages/cli/templates/plugin-web-library/package.json.hbs | 3 ++- .../cli/templates/scaffolder-backend-module/package.json.hbs | 3 ++- 8 files changed, 19 insertions(+), 7 deletions(-) create mode 100644 .changeset/stupid-goats-teach.md diff --git a/.changeset/stupid-goats-teach.md b/.changeset/stupid-goats-teach.md new file mode 100644 index 0000000000..f90d9373e7 --- /dev/null +++ b/.changeset/stupid-goats-teach.md @@ -0,0 +1,5 @@ +--- +'@backstage/cli': patch +--- + +Added `backstage.pluginId` field in `package.json` to all default plugin package templates for the `new` command. diff --git a/packages/cli/templates/backend-plugin-module/package.json.hbs b/packages/cli/templates/backend-plugin-module/package.json.hbs index 20d78380ca..c34f7e0646 100644 --- a/packages/cli/templates/backend-plugin-module/package.json.hbs +++ b/packages/cli/templates/backend-plugin-module/package.json.hbs @@ -9,7 +9,8 @@ "types": "dist/index.d.ts" }, "backstage": { - "role": "backend-plugin-module" + "role": "backend-plugin-module", + "pluginId": "{{pluginId}}" }, "scripts": { "start": "backstage-cli package start", diff --git a/packages/cli/templates/backend-plugin/package.json.hbs b/packages/cli/templates/backend-plugin/package.json.hbs index ad3810dff3..d8fcb9a9d6 100644 --- a/packages/cli/templates/backend-plugin/package.json.hbs +++ b/packages/cli/templates/backend-plugin/package.json.hbs @@ -8,7 +8,8 @@ "types": "dist/index.d.ts" }, "backstage": { - "role": "backend-plugin" + "role": "backend-plugin", + "pluginId": "{{pluginId}}" }, "scripts": { "start": "backstage-cli package start", diff --git a/packages/cli/templates/frontend-plugin/package.json.hbs b/packages/cli/templates/frontend-plugin/package.json.hbs index 64888c2d37..1ee8231228 100644 --- a/packages/cli/templates/frontend-plugin/package.json.hbs +++ b/packages/cli/templates/frontend-plugin/package.json.hbs @@ -8,7 +8,8 @@ "types": "dist/index.d.ts" }, "backstage": { - "role": "frontend-plugin" + "role": "frontend-plugin", + "pluginId": "{{pluginId}}" }, "sideEffects": false, "scripts": { diff --git a/packages/cli/templates/plugin-common-library/package.json.hbs b/packages/cli/templates/plugin-common-library/package.json.hbs index 085ccb40dd..117679abc1 100644 --- a/packages/cli/templates/plugin-common-library/package.json.hbs +++ b/packages/cli/templates/plugin-common-library/package.json.hbs @@ -10,7 +10,8 @@ "types": "dist/index.d.ts" }, "backstage": { - "role": "common-library" + "role": "common-library", + "pluginId": "{{pluginId}}" }, "sideEffects": false, "scripts": { diff --git a/packages/cli/templates/plugin-node-library/package.json.hbs b/packages/cli/templates/plugin-node-library/package.json.hbs index 182ef1c93f..876d6414ac 100644 --- a/packages/cli/templates/plugin-node-library/package.json.hbs +++ b/packages/cli/templates/plugin-node-library/package.json.hbs @@ -9,7 +9,8 @@ "types": "dist/index.d.ts" }, "backstage": { - "role": "node-library" + "role": "node-library", + "pluginId": "{{pluginId}}" }, "scripts": { "build": "backstage-cli package build", diff --git a/packages/cli/templates/plugin-web-library/package.json.hbs b/packages/cli/templates/plugin-web-library/package.json.hbs index d104a29305..6924600989 100644 --- a/packages/cli/templates/plugin-web-library/package.json.hbs +++ b/packages/cli/templates/plugin-web-library/package.json.hbs @@ -9,7 +9,8 @@ "types": "dist/index.d.ts" }, "backstage": { - "role": "web-library" + "role": "web-library", + "pluginId": "{{pluginId}}" }, "sideEffects": false, "scripts": { diff --git a/packages/cli/templates/scaffolder-backend-module/package.json.hbs b/packages/cli/templates/scaffolder-backend-module/package.json.hbs index 3866a83672..36c99c7687 100644 --- a/packages/cli/templates/scaffolder-backend-module/package.json.hbs +++ b/packages/cli/templates/scaffolder-backend-module/package.json.hbs @@ -9,7 +9,8 @@ "types": "dist/index.d.ts" }, "backstage": { - "role": "backend-plugin-module" + "role": "backend-plugin-module", + "pluginId": "scaffolder" }, "scripts": { "start": "backstage-cli package start", From aaf2d2bd9b18837d509391a61d5ef76c1a71b8e9 Mon Sep 17 00:00:00 2001 From: Mihai Tabara Date: Thu, 5 Jun 2025 20:20:57 +0100 Subject: [PATCH 03/14] Change ownership in HomePlugin Signed-off-by: Mihai Tabara --- OWNERS.md | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/OWNERS.md b/OWNERS.md index 85ffadae42..377489e244 100644 --- a/OWNERS.md +++ b/OWNERS.md @@ -89,12 +89,13 @@ Team: @backstage/home-maintainers Scope: The Backstage home page and information architecture -| Name | Organization | Team | GitHub | Discord | -| ------------------------ | ------------ | -------------- | ---------------------------------------- | ----------------- | -| Avantika Iyer | Spotify | Infinite Buck$ | [tikabom](http://github.com/tikabom) | - | -| Emma Indal | Spotify | Infinite Buck$ | [emmaindal](http://github.com/emmaindal) | emmaindal#7503 | -| Djamaile Rahamat | Spotify | Infinite Buck$ | [djamaile](http://github.com/djamaile) | dyoqi | -| Raghunandan Balachandran | Spotify | Infinite Buck$ | [soapraj](http://github.com/soapraj) | raghunandanb#1114 | +| Name | Organization | Team | GitHub | Discord | +| ------------------------ | ------------ | --------------- | ----------------------------------------- | ------- | +| Avantika Iyer | Spotify | Imaginary Goats | [tikabom](http://github.com/tikabom) | - | +| Eric Peterson | Spotify | Imaginary Goats | [iamEAP](http://github.com/iamEAP) | - | +| Daniel Jelčić | Spotify | Imaginary Goats | [djamaile](http://github.com/danieljelcic)| - | +| Musaab Elfaqih | Spotify | Imaginary Goats | [TheSabby](http://github.com/TheSabby) | - | +| Ainhoa Ainhoa Larumbe | Spotify | Imaginary Goats | [ainhoaL](http://github.com/ainhoaL) | - | ### Kubernetes From a61e4754ecad1fe6f7531de0b18d24f9c4de442d Mon Sep 17 00:00:00 2001 From: Mihai Tabara Date: Thu, 5 Jun 2025 20:22:49 +0100 Subject: [PATCH 04/14] Sort alphabetically Signed-off-by: Mihai Tabara --- OWNERS.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/OWNERS.md b/OWNERS.md index 377489e244..517d8682c8 100644 --- a/OWNERS.md +++ b/OWNERS.md @@ -91,11 +91,11 @@ Scope: The Backstage home page and information architecture | Name | Organization | Team | GitHub | Discord | | ------------------------ | ------------ | --------------- | ----------------------------------------- | ------- | -| Avantika Iyer | Spotify | Imaginary Goats | [tikabom](http://github.com/tikabom) | - | -| Eric Peterson | Spotify | Imaginary Goats | [iamEAP](http://github.com/iamEAP) | - | -| Daniel Jelčić | Spotify | Imaginary Goats | [djamaile](http://github.com/danieljelcic)| - | -| Musaab Elfaqih | Spotify | Imaginary Goats | [TheSabby](http://github.com/TheSabby) | - | | Ainhoa Ainhoa Larumbe | Spotify | Imaginary Goats | [ainhoaL](http://github.com/ainhoaL) | - | +| Avantika Iyer | Spotify | Imaginary Goats | [tikabom](http://github.com/tikabom) | - | +| Daniel Jelčić | Spotify | Imaginary Goats | [djamaile](http://github.com/danieljelcic)| - | +| Eric Peterson | Spotify | Imaginary Goats | [iamEAP](http://github.com/iamEAP) | - | +| Musaab Elfaqih | Spotify | Imaginary Goats | [TheSabby](http://github.com/TheSabby) | - | ### Kubernetes From a019651a22327cae291df2cc4a805d6a28b1727a Mon Sep 17 00:00:00 2001 From: Mihai Tabara Date: Thu, 5 Jun 2025 20:24:53 +0100 Subject: [PATCH 05/14] Fix styling Signed-off-by: Mihai Tabara --- OWNERS.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/OWNERS.md b/OWNERS.md index 517d8682c8..0261606fc8 100644 --- a/OWNERS.md +++ b/OWNERS.md @@ -79,9 +79,9 @@ Scope: The Backstage [Helm Chart(s)](https://github.com/backstage/charts). | Name | Organization | Team | GitHub | Discord | | -------------------- | ------------ | ---- | ---------------------------------------- | -------------- | -| Andrew Block | Red Hat | | [sabre1041](http://github.com/sabre1041) | sabre1041#2622 | -| Tom Coufal | Red Hat | | [tumido](http://github.com/tumido) | Tumi#4346 | -| Vincenzo Scamporlino | Spotify | | [vinzscam](http://github.com/vinzscam) | vinzscam#6944 | +| Andrew Block | Red Hat | | [sabre1041](http://github.com/sabre1041) | `sabre1041#2622` | +| Tom Coufal | Red Hat | | [tumido](http://github.com/tumido) | `Tumi#4346` | +| Vincenzo Scamporlino | Spotify | | [vinzscam](http://github.com/vinzscam) | `vinzscam#6944` | ### Home From 4177fc40e5c15198224419faed07a2ec1f7b4ed6 Mon Sep 17 00:00:00 2001 From: Mihai Tabara Date: Thu, 5 Jun 2025 21:31:14 +0100 Subject: [PATCH 06/14] Update OWNERS.md Co-authored-by: Avantika Iyer Signed-off-by: Mihai Tabara --- OWNERS.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/OWNERS.md b/OWNERS.md index 0261606fc8..c838b1b1d6 100644 --- a/OWNERS.md +++ b/OWNERS.md @@ -93,7 +93,7 @@ Scope: The Backstage home page and information architecture | ------------------------ | ------------ | --------------- | ----------------------------------------- | ------- | | Ainhoa Ainhoa Larumbe | Spotify | Imaginary Goats | [ainhoaL](http://github.com/ainhoaL) | - | | Avantika Iyer | Spotify | Imaginary Goats | [tikabom](http://github.com/tikabom) | - | -| Daniel Jelčić | Spotify | Imaginary Goats | [djamaile](http://github.com/danieljelcic)| - | +| Daniel Jelčić | Spotify | Imaginary Goats | [djelcic](http://github.com/danieljelcic)| - | | Eric Peterson | Spotify | Imaginary Goats | [iamEAP](http://github.com/iamEAP) | - | | Musaab Elfaqih | Spotify | Imaginary Goats | [TheSabby](http://github.com/TheSabby) | - | From 389bdea8636ce19c29577633e19f622bfca23716 Mon Sep 17 00:00:00 2001 From: Mihai Tabara Date: Thu, 5 Jun 2025 21:31:20 +0100 Subject: [PATCH 07/14] Update OWNERS.md Co-authored-by: Avantika Iyer Signed-off-by: Mihai Tabara --- OWNERS.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/OWNERS.md b/OWNERS.md index c838b1b1d6..5be0e62524 100644 --- a/OWNERS.md +++ b/OWNERS.md @@ -91,7 +91,7 @@ Scope: The Backstage home page and information architecture | Name | Organization | Team | GitHub | Discord | | ------------------------ | ------------ | --------------- | ----------------------------------------- | ------- | -| Ainhoa Ainhoa Larumbe | Spotify | Imaginary Goats | [ainhoaL](http://github.com/ainhoaL) | - | +| Ainhoa Larumbe | Spotify | Imaginary Goats | [ainhoaL](http://github.com/ainhoaL) | - | | Avantika Iyer | Spotify | Imaginary Goats | [tikabom](http://github.com/tikabom) | - | | Daniel Jelčić | Spotify | Imaginary Goats | [djelcic](http://github.com/danieljelcic)| - | | Eric Peterson | Spotify | Imaginary Goats | [iamEAP](http://github.com/iamEAP) | - | From 202394a5ee4ef83c43a334e11f9eb249e1bd4ad3 Mon Sep 17 00:00:00 2001 From: Mihai Tabara Date: Thu, 5 Jun 2025 21:31:28 +0100 Subject: [PATCH 08/14] Update OWNERS.md Co-authored-by: Avantika Iyer Signed-off-by: Mihai Tabara --- OWNERS.md | 1 + 1 file changed, 1 insertion(+) diff --git a/OWNERS.md b/OWNERS.md index 5be0e62524..d3988196c2 100644 --- a/OWNERS.md +++ b/OWNERS.md @@ -96,6 +96,7 @@ Scope: The Backstage home page and information architecture | Daniel Jelčić | Spotify | Imaginary Goats | [djelcic](http://github.com/danieljelcic)| - | | Eric Peterson | Spotify | Imaginary Goats | [iamEAP](http://github.com/iamEAP) | - | | Musaab Elfaqih | Spotify | Imaginary Goats | [TheSabby](http://github.com/TheSabby) | - | +| Landry Zinda-Snead | Spotify | Imaginary Goats | [landryzs](http://github.com/landryzs) | - | ### Kubernetes From 2ff5ecf693e0ca5d3145dce8bb1782073016b865 Mon Sep 17 00:00:00 2001 From: Mihai Tabara Date: Thu, 5 Jun 2025 22:03:25 +0100 Subject: [PATCH 09/14] Run prettier upon review Signed-off-by: Mihai Tabara --- OWNERS.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/OWNERS.md b/OWNERS.md index d3988196c2..44d7c7784f 100644 --- a/OWNERS.md +++ b/OWNERS.md @@ -77,8 +77,8 @@ Team: @backstage/helm-chart-maintainers Scope: The Backstage [Helm Chart(s)](https://github.com/backstage/charts). -| Name | Organization | Team | GitHub | Discord | -| -------------------- | ------------ | ---- | ---------------------------------------- | -------------- | +| Name | Organization | Team | GitHub | Discord | +| -------------------- | ------------ | ---- | ---------------------------------------- | ---------------- | | Andrew Block | Red Hat | | [sabre1041](http://github.com/sabre1041) | `sabre1041#2622` | | Tom Coufal | Red Hat | | [tumido](http://github.com/tumido) | `Tumi#4346` | | Vincenzo Scamporlino | Spotify | | [vinzscam](http://github.com/vinzscam) | `vinzscam#6944` | @@ -89,14 +89,14 @@ Team: @backstage/home-maintainers Scope: The Backstage home page and information architecture -| Name | Organization | Team | GitHub | Discord | -| ------------------------ | ------------ | --------------- | ----------------------------------------- | ------- | -| Ainhoa Larumbe | Spotify | Imaginary Goats | [ainhoaL](http://github.com/ainhoaL) | - | -| Avantika Iyer | Spotify | Imaginary Goats | [tikabom](http://github.com/tikabom) | - | -| Daniel Jelčić | Spotify | Imaginary Goats | [djelcic](http://github.com/danieljelcic)| - | -| Eric Peterson | Spotify | Imaginary Goats | [iamEAP](http://github.com/iamEAP) | - | -| Musaab Elfaqih | Spotify | Imaginary Goats | [TheSabby](http://github.com/TheSabby) | - | -| Landry Zinda-Snead | Spotify | Imaginary Goats | [landryzs](http://github.com/landryzs) | - | +| Name | Organization | Team | GitHub | Discord | +| ------------------ | ------------ | --------------- | ----------------------------------------- | ------- | +| Ainhoa Larumbe | Spotify | Imaginary Goats | [ainhoaL](http://github.com/ainhoaL) | - | +| Avantika Iyer | Spotify | Imaginary Goats | [tikabom](http://github.com/tikabom) | - | +| Daniel Jelčić | Spotify | Imaginary Goats | [djelcic](http://github.com/danieljelcic) | - | +| Eric Peterson | Spotify | Imaginary Goats | [iamEAP](http://github.com/iamEAP) | - | +| Musaab Elfaqih | Spotify | Imaginary Goats | [TheSabby](http://github.com/TheSabby) | - | +| Landry Zinda-Snead | Spotify | Imaginary Goats | [landryzs](http://github.com/landryzs) | - | ### Kubernetes From f2f814a6168309d4cdc7f6d971239bfc96f35af7 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Fri, 6 Jun 2025 09:18:57 +0200 Subject: [PATCH 10/14] Add render prop to Button Signed-off-by: Charles de Dreuille --- .changeset/kind-houses-feel.md | 5 ++ packages/canon/report.api.md | 6 +- .../src/components/Button/Button.stories.tsx | 12 ++++ .../canon/src/components/Button/Button.tsx | 72 ++++++++++--------- packages/canon/src/components/Button/types.ts | 9 +-- 5 files changed, 60 insertions(+), 44 deletions(-) create mode 100644 .changeset/kind-houses-feel.md diff --git a/.changeset/kind-houses-feel.md b/.changeset/kind-houses-feel.md new file mode 100644 index 0000000000..a4b3ac0d14 --- /dev/null +++ b/.changeset/kind-houses-feel.md @@ -0,0 +1,5 @@ +--- +'@backstage/canon': patch +--- + +Added a render prop to the Button component in Canon to use it as a link. diff --git a/packages/canon/report.api.md b/packages/canon/report.api.md index bc0ad71e90..b6ce130ecc 100644 --- a/packages/canon/report.api.md +++ b/packages/canon/report.api.md @@ -149,7 +149,7 @@ export const breakpoints: Breakpoint[]; // @public (undocumented) export const Button: ForwardRefExoticComponent< - ButtonProps & RefAttributes + Omit & RefAttributes >; // @public (undocumented) @@ -174,9 +174,7 @@ export const buttonPropDefs: { }; // @public -export interface ButtonProps - extends Omit, 'children'> { - children: React.ReactNode; +export interface ButtonProps extends useRender.ComponentProps<'button'> { iconEnd?: ReactElement; iconStart?: ReactElement; size?: ButtonOwnProps['size']; diff --git a/packages/canon/src/components/Button/Button.stories.tsx b/packages/canon/src/components/Button/Button.stories.tsx index c0519cb279..2034f8a3d4 100644 --- a/packages/canon/src/components/Button/Button.stories.tsx +++ b/packages/canon/src/components/Button/Button.stories.tsx @@ -131,6 +131,18 @@ export const Disabled: Story = { ), }; +export const AsLink: Story = { + args: { + children: 'Button', + }, + render: args => ( + - ); + const { renderElement } = useRender({ + render, + props: { + className: clsx('canon-Button', className), + ['data-variant']: responsiveVariant, + ['data-size']: responsiveSize, + ...rest, + children: ( + <> + {iconStart && ( + + )} + {children} + {iconEnd && ( + + )} + + ), + }, + refs: [ref, internalRef], + }); + + return renderElement(); }, ); diff --git a/packages/canon/src/components/Button/types.ts b/packages/canon/src/components/Button/types.ts index 4ab62d5683..e91538299e 100644 --- a/packages/canon/src/components/Button/types.ts +++ b/packages/canon/src/components/Button/types.ts @@ -16,14 +16,14 @@ import type { ButtonOwnProps } from './Button.props'; import { ReactElement } from 'react'; +import type { useRender } from '@base-ui-components/react/use-render'; /** * Properties for {@link Button} * * @public */ -export interface ButtonProps - extends Omit, 'children'> { +export interface ButtonProps extends useRender.ComponentProps<'button'> { /** * The size of the button * @defaultValue 'medium' @@ -36,11 +36,6 @@ export interface ButtonProps */ variant?: ButtonOwnProps['variant']; - /** - * The content of the button - */ - children: React.ReactNode; - /** * Optional icon to display at the start of the button */ From a61671f5ae84b7b3d3723f12ca671a99ab0ef4d1 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Fri, 6 Jun 2025 09:39:04 +0200 Subject: [PATCH 11/14] Improve docs Signed-off-by: Charles de Dreuille --- .../src/app/(docs)/components/button/page.mdx | 14 ++++++++++++++ .../src/app/(docs)/components/button/props.ts | 6 ++++++ .../canon/src/components/Button/Button.stories.tsx | 4 ++-- 3 files changed, 22 insertions(+), 2 deletions(-) diff --git a/canon-docs/src/app/(docs)/components/button/page.mdx b/canon-docs/src/app/(docs)/components/button/page.mdx index e1ecee8920..3554ee39f9 100644 --- a/canon-docs/src/app/(docs)/components/button/page.mdx +++ b/canon-docs/src/app/(docs)/components/button/page.mdx @@ -125,6 +125,20 @@ Here's a view when buttons are disabled. code={``} /> +### As Link + +Here's a view when buttons are rendered as a link. + +} + code={``} +/> + ### Responsive Here's a view when buttons are responsive. diff --git a/canon-docs/src/app/(docs)/components/button/props.ts b/canon-docs/src/app/(docs)/components/button/props.ts index 813dcaa6f0..36b0f73066 100644 --- a/canon-docs/src/app/(docs)/components/button/props.ts +++ b/canon-docs/src/app/(docs)/components/button/props.ts @@ -14,6 +14,12 @@ export const buttonPropDefs: Record = { default: 'medium', responsive: true, }, + render: { + type: 'enum', + values: ['ReactNode'], + responsive: false, + default: '