feat: Complete Migration to New Front End by tfhartmann · Pull Request #367 · broadinstitute/backstage

tfhartmann · 2026-04-09T16:44:11Z

This is a pretty large change and includes a number of plugin updates and adds some docs.

This PR completes the migration to the new backstage frontend, and migrates as many pluins as I was able.

This changes the way backstage looks and how a number of pages are laid out.

This change includes a number of plugin updates and adds some docs. This changes the way backstage looks and how a number of pages are laid out.

Copilot

Pull request overview

Completes the migration of this Backstage instance to the new frontend system by updating plugin dependencies, swapping legacy route/plugin wiring to alpha frontend plugins + modules, and updating documentation to reflect the current plugin set and removed plugins.

Changes:

Update Backstage/third-party plugin versions (notably Copilot, GitHub Actions/PR board, Tech Radar, Spotify plugins) and remove Cloud Build.
Migrate the app to the new frontend architecture (alpha plugins + frontend modules), including a new navigation module/sidebar.
Refresh plugin documentation and repository ignores.

Reviewed changes

Copilot reviewed 8 out of 10 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
`docs/plugins.md`	Rewrites plugin inventory/notes and documents removed plugins.
`backstage/yarn.lock`	Large dependency graph update reflecting plugin/version migration and removals.
`backstage/packages/backend/package.json`	Bumps backend plugin dependencies (Copilot backend + Spotify/Roadie modules).
`backstage/packages/app/src/plugins.ts`	Removes Cloud Build plugin export.
`backstage/packages/app/src/modules/nav/Sidebar.tsx`	Adds new sidebar implementation for the migrated frontend.
`backstage/packages/app/src/modules/nav/index.ts`	Registers the nav frontend module extension.
`backstage/packages/app/src/components/catalog/EntityPage.tsx`	Removes Cloud Build + Roadie PR views; switches PR routing and updates Soundcheck imports.
`backstage/packages/app/src/App.tsx`	Switches to `@backstage/frontend-defaults` app creation and registers alpha plugin features + modules.
`backstage/packages/app/package.json`	Updates app plugin dependency versions and mermaid addon version.
`.gitignore`	Ignores `.backstage-tmp`.

Comments suppressed due to low confidence (2)

docs/plugins.md:158

The document still contains a placeholder section header (## todo). This looks like unfinished documentation and will likely confuse readers; either remove it or replace it with a proper ## TODO section that explains what remains and tracks actionable items (ideally with links/issues).

### Removed Plugins

- Google Cloud Build: This plugin has been removed from the app and is no longer
  in use.

## todo

Configuration as Data (kpt)

backstage/packages/backend/package.json:76

@backstage/backend-defaults (current lockfile versions) declares an optional peer dependency on better-sqlite3@^12.0.0, but this package.json still pins better-sqlite3 to ^11.8.0. Even if optional, this will produce peer dependency warnings and may break SQLite-backed deployments; consider upgrading better-sqlite3 to ^12 (or aligning Backstage package versions) to match the peer range.

    "@spotify/backstage-plugin-soundcheck-backend-module-github": "^0.8.8",
    "@spotify/backstage-plugin-soundcheck-backend-module-http": "^0.1.18",
    "@spotify/backstage-plugin-soundcheck-backend-module-scm": "^0.11.8",
    "app": "link:../app",
    "better-sqlite3": "^11.8.0",
    "dockerode": "^4.0.3",
    "express": "^5.1.0",
    "express-promise-router": "^4.1.0",

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-09T16:49:45Z

backstage/packages/app/src/modules/nav/Sidebar.tsx

+            // Search and primary pages are placed in fixed groups below.
+            nav.take('page:search');
+            nav.take('page:catalog');
+            nav.take('page:api-docs');
+            nav.take('page:techdocs');
+            nav.take('page:scaffolder');
+            nav.take('page:insights');
+            nav.take('page:rbac');
+            nav.take('page:pagerduty');
+            nav.take('page:user-settings');


nav.take('page:insights') and nav.take('page:pagerduty') remove those pages from nav.rest(...), but this sidebar implementation doesn't render replacement items/links for them. If those plugins are intended to be user-accessible (they’re installed/enabled elsewhere), this effectively hides them from navigation; either stop taking them here or add explicit SidebarItem entries for their routes.

Copilot · 2026-04-09T16:49:45Z

backstage/packages/app/src/modules/nav/Sidebar.tsx

+                            icon={ExtensionIcon}
+                            to="/rbac"
+                            text="RBAC"


The RBAC SidebarItem block is mis-indented compared to the rest of the file (and will likely fail prettier --check / make future diffs noisy). Run Prettier (or adjust indentation) so this JSX matches the surrounding formatting.

Suggested change

icon={ExtensionIcon}

to="/rbac"

text="RBAC"

icon={ExtensionIcon}

to="/rbac"

text="RBAC"

Copilot · 2026-04-09T16:49:45Z

backstage/packages/app/src/components/catalog/EntityPage.tsx

@@ -84,11 +83,6 @@ const techdocsContent = (
    </EntityTechdocsContent>
 );
 import { SkillExchangeUserEntitySkillsCard } from '@spotify/backstage-plugin-skill-exchange';
-import {
-    EntitySoundcheckContent,
-    EntitySoundcheckCard,
-} from '@spotify/backstage-plugin-soundcheck';
-import { GroupSoundcheckContent } from '@spotify/backstage-plugin-soundcheck';
 import { Mermaid } from 'backstage-plugin-techdocs-addon-mermaid';
 import elkLayouts from '@mermaid-js/layout-elk';



There are import ... statements after executable code (const techdocsContent = ...). While valid ESM, it’s inconsistent with the rest of the codebase and makes the module harder to scan/maintain; please move these imports up with the other imports at the top of the file.

Copilot · 2026-04-09T16:49:46Z

backstage/packages/app/package.json

    "@material-ui/icons": "^4.9.1",
    "@mermaid-js/layout-elk": "^0.1.8",
    "@pagerduty/backstage-plugin": "^0.18.0",
    "@pagerduty/backstage-plugin-backend": "^0.11.0",
    "@pagerduty/backstage-plugin-common": "^0.2.3",
-    "@roadiehq/backstage-plugin-github-pull-requests": "^3.6.0",
+    "@roadiehq/backstage-plugin-github-pull-requests": "^3.7.0",
    "@roadiehq/plugin-scaffolder-frontend-module-http-request-field": "^2.3.0",
-    "@spotify/backstage-plugin-analytics-module-insights": "^0.10.1",
-    "@spotify/backstage-plugin-insights": "^0.8.2",
-    "@spotify/backstage-plugin-rbac": "^0.8.1",
-    "@spotify/backstage-plugin-skill-exchange": "^0.12.14",
-    "@spotify/backstage-plugin-soundcheck": "^0.19.6",
+    "@spotify/backstage-plugin-analytics-module-insights": "^0.10.6",
+    "@spotify/backstage-plugin-insights": "^0.9.0",
+    "@spotify/backstage-plugin-rbac": "^0.8.6",
+    "@spotify/backstage-plugin-skill-exchange": "^0.12.19",
+    "@spotify/backstage-plugin-soundcheck": "^0.23.2",


@roadiehq/backstage-plugin-github-pull-requests is still listed as a dependency, but it no longer appears to be imported/used anywhere in the app code after switching entity pull requests to @backstage-community/plugin-github-pull-requests-board. Consider removing this dependency to reduce install size and avoid carrying unused transitive deps.

gemini-code-assist

Code Review

This pull request updates numerous Backstage plugin dependencies and migrates the application frontend toward the new Backstage frontend system. Key changes include the removal of the Google Cloud Build plugin, the introduction of a new sidebar module using the NavContentBlueprint, and the registration of several plugins (Catalog, Search, TechDocs, etc.) via the new features array in createApp. Feedback highlights potential route collisions in App.tsx where legacy route definitions for API Docs and other migrated plugins overlap with automatic route registration in the new system.

gemini-code-assist · 2026-04-09T16:52:57Z

backstage/packages/app/src/App.tsx

            {searchPage}
        </Route>
-        <Route path="/settings" element={<UserSettingsPage />} />
+        <Route path="/api-docs" element={<ApiExplorerPage />} />


This route is redundant because the apiDocsPlugin is already included in the features array (line 180). In the new frontend system, the alpha version of this plugin automatically registers the /api-docs route. Defining it here in the legacy routes object will cause a route collision.

gemini-code-assist · 2026-04-09T16:52:57Z

backstage/packages/app/src/App.tsx


 const app = createApp({
-    features: [...convertedRootFeatures, convertedOptionsModule],
+    features: [


Several plugins added here (homePlugin, searchPlugin, techdocsPlugin, scaffolderPlugin, and catalogImportPlugin) still have legacy route definitions in the routes constant. To complete the migration and avoid route conflicts, these legacy routes should be removed. Any custom logic (such as Scaffolder groups at line 118 or TechDocs addons at line 100) should be moved to the new extension system using the appropriate blueprints or extension creators.

…tityPage components

…folder in App component

feat: Complete Migration to New Front End

9835520

This change includes a number of plugin updates and adds some docs. This changes the way backstage looks and how a number of pages are laid out.

Copilot AI review requested due to automatic review settings April 9, 2026 16:44

tfhartmann requested a review from a team as a code owner April 9, 2026 16:44

tfhartmann had a problem deploying to development April 9, 2026 16:44 — with GitHub Actions Failure

github-actions bot added the feature label Apr 9, 2026

Copilot started reviewing on behalf of tfhartmann April 9, 2026 16:44 View session

Copilot AI reviewed Apr 9, 2026

View reviewed changes

gemini-code-assist bot reviewed Apr 9, 2026

View reviewed changes

fix: update Mermaid layoutLoaders to use typed variable in App and En…

b825975

…tityPage components

tfhartmann had a problem deploying to development April 9, 2026 16:53 — with GitHub Actions Failure

github-actions bot added feature and removed feature labels Apr 9, 2026

feat: implement module overrides for home, search, techdocs, and scaf…

7cdf68b

…folder in App component

tfhartmann temporarily deployed to development April 9, 2026 18:13 — with GitHub Actions Inactive

github-actions bot added feature and removed feature labels Apr 9, 2026

tfhartmann temporarily deployed to development April 9, 2026 18:21 — with GitHub Actions Inactive

tfhartmann temporarily deployed to development April 9, 2026 18:22 — with GitHub Actions Inactive

fix: replace HomeIcon with dynamic homeItem in Sidebar component

b534090

tfhartmann temporarily deployed to development April 9, 2026 18:47 — with GitHub Actions Inactive

github-actions bot added feature and removed feature labels Apr 9, 2026

tfhartmann temporarily deployed to development April 9, 2026 18:55 — with GitHub Actions Inactive

tfhartmann temporarily deployed to development April 9, 2026 18:56 — with GitHub Actions Inactive

fix: fixing soundcheck for new frontend

553a029

tfhartmann temporarily deployed to development April 9, 2026 20:44 — with GitHub Actions Inactive

github-actions bot added feature and removed feature labels Apr 9, 2026

tfhartmann deployed to development April 9, 2026 20:52 — with GitHub Actions Active

tfhartmann had a problem deploying to development April 9, 2026 20:52 — with GitHub Actions Failure

tfhartmann added the work in progress don't merge yet label Apr 9, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Complete Migration to New Front End#367

feat: Complete Migration to New Front End#367
tfhartmann wants to merge 5 commits intomainfrom
new-frontend

tfhartmann commented Apr 9, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 9, 2026

Uh oh!

Copilot AI Apr 9, 2026

Uh oh!

Copilot AI Apr 9, 2026

Uh oh!

Copilot AI Apr 9, 2026

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

gemini-code-assist bot Apr 9, 2026

Uh oh!

gemini-code-assist bot Apr 9, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

tfhartmann commented Apr 9, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Apr 9, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 9, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 9, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 9, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist bot Apr 9, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Apr 9, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants