chore: upgrade backstage to 1.49

app-config.yaml

@@ -2,6 +2,15 @@ app:
   title: Scaffolded Backstage App
   baseUrl: http://localhost:3000
 
+  # Enable all packages by default, this will discover packages from packages/app/package.json
+  packages: all
+
+  extensions:
+    # Configure the catalog index page to be the root page, this is normally mounted on /catalog
+    - page:catalog:
+        config:
+          path: /
+
 organization:
   name: My Company
 

backstage.json

@@ -1,3 +1,3 @@
 {
-  "version": "1.44.1"
+  "version": "1.49.3"
 }

package.json

@@ -3,10 +3,10 @@
   "version": "1.0.0",
   "private": true,
   "engines": {
-    "node": "20 || 22"
+    "node": "22 || 24"
   },
   "scripts": {
-    "start": "backstage-cli repo start",
+    "start": "NODE_OPTIONS='--no-node-snapshot' backstage-cli repo start",
     "build:backend": "yarn workspace backend build",
     "build:all": "backstage-cli repo build --all",
     "build-image": "yarn workspace backend build-image",
@@ -23,16 +23,28 @@
     "prettier:fix": "prettier --write .",
     "new": "backstage-cli new"
   },
-  "workspaces": {
-    "packages": [
-      "packages/*",
-      "plugins/*"
-    ]
+  "backstage": {
+    "cli": {
+      "new": {
+        "globals": {
+          "license": "UNLICENSED"
+        }
+      }
+    }
   },
+  "workspaces": [
+    "packages/*",
+    "plugins/*"
+  ],
   "devDependencies": {
-    "@backstage/cli": "^0.34.4",
-    "@backstage/e2e-test-utils": "^0.1.1",
+    "@backstage/cli": "^0.36.0",
+    "@backstage/cli-defaults": "^0.1.0",
+    "@backstage/e2e-test-utils": "^0.1.2",
+    "@jest/environment-jsdom-abstract": "^30.0.0",
     "@playwright/test": "^1.55.1",
+    "@types/jest": "^30.0.0",
+    "jest": "^30.2.0",
+    "jsdom": "^27.1.0",
     "node-gyp": "^10.0.0",
     "prettier": "^2.3.2",
     "typescript": "~5.8.0"
@@ -53,5 +65,10 @@
       "prettier --write"
     ]
   },
-  "packageManager": "yarn@4.4.1"
+  "packageManager": "yarn@4.4.1",
+  "dependenciesMeta": {
+    "isolated-vm": {
+      "built": false
+    }
+  }
 }

packages/app-next/package.json

@@ -19,36 +19,37 @@
     "lint": "backstage-cli package lint"
   },
   "dependencies": {
-    "@backstage/cli": "^0.34.4",
-    "@backstage/core-compat-api": "^0.5.3",
-    "@backstage/core-components": "^0.18.2",
-    "@backstage/core-plugin-api": "^1.11.1",
-    "@backstage/frontend-defaults": "^0.3.2",
-    "@backstage/frontend-plugin-api": "^0.12.1",
-    "@backstage/integration-react": "^1.2.11",
-    "@backstage/plugin-catalog": "^1.31.4",
-    "@backstage/plugin-catalog-import": "^0.13.6",
-    "@backstage/plugin-notifications": "^0.5.10",
-    "@backstage/plugin-org": "^0.6.45",
-    "@backstage/plugin-scaffolder": "^1.34.2",
-    "@backstage/plugin-search": "^1.4.31",
-    "@backstage/plugin-signals": "^0.0.24",
-    "@backstage/plugin-user-settings": "^0.8.27",
-    "@backstage/ui": "^0.8.0",
+    "@backstage/cli": "^0.36.0",
+    "@backstage/core-compat-api": "^0.5.9",
+    "@backstage/core-components": "^0.18.8",
+    "@backstage/core-plugin-api": "^1.12.4",
+    "@backstage/frontend-defaults": "^0.5.0",
+    "@backstage/frontend-plugin-api": "^0.15.1",
+    "@backstage/integration-react": "^1.2.16",
+    "@backstage/plugin-app-react": "^0.2.1",
+    "@backstage/plugin-catalog": "^2.0.1",
+    "@backstage/plugin-catalog-import": "^0.13.11",
+    "@backstage/plugin-notifications": "^0.5.15",
+    "@backstage/plugin-org": "^0.7.0",
+    "@backstage/plugin-scaffolder": "^1.36.1",
+    "@backstage/plugin-search": "^1.7.0",
+    "@backstage/plugin-signals": "^0.0.29",
+    "@backstage/plugin-user-settings": "^0.9.1",
+    "@backstage/ui": "^0.13.2",
     "@codeverse-gp/plugin-usage-statistics": "workspace:^",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
     "react": "^18.0.2",
     "react-dom": "^18.0.2",
-    "react-router": "^6.3.0",
-    "react-router-dom": "^6.3.0"
+    "react-router": "^6.30.2",
+    "react-router-dom": "^6.30.2"
   },
   "devDependencies": {
-    "@backstage/test-utils": "^1.7.12",
+    "@backstage/test-utils": "^1.7.16",
     "@playwright/test": "^1.32.3",
-    "@testing-library/dom": "^9.0.0",
+    "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.0.0",
-    "@testing-library/react": "^14.0.0",
+    "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.0.0",
     "@types/react-dom": "*"
   },

packages/app-next/src/App.tsx

@@ -13,43 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Navigate } from 'react-router';
-
-import {
-  createFrontendModule,
-  PageBlueprint,
-} from '@backstage/frontend-plugin-api';
 import { createApp } from '@backstage/frontend-defaults';
 import catalogPlugin from '@backstage/plugin-catalog/alpha';
-import catalogImportPlugin from '@backstage/plugin-catalog-import/alpha';
-import userSettingsPlugin from '@backstage/plugin-user-settings/alpha';
-import searchPlugin from '@backstage/plugin-search/alpha';
-import signalsPlugin from '@backstage/plugin-signals/alpha';
-
-import usageStatisticsPlugin from '@codeverse-gp/plugin-usage-statistics/alpha';
-
 import { navModule } from './modules/nav';
 
-const homePageExtension = PageBlueprint.make({
-  name: 'homePage',
-  params: {
-    path: '/',
-    loader: () => Promise.resolve(<Navigate to="catalog" />),
-  },
-});
-
 export default createApp({
-  features: [
-    createFrontendModule({
-      pluginId: 'app',
-      extensions: [homePageExtension],
-    }),
-    catalogPlugin,
-    catalogImportPlugin,
-    navModule,
-    userSettingsPlugin,
-    searchPlugin,
-    signalsPlugin,
-    usageStatisticsPlugin,
-  ],
+  features: [catalogPlugin, navModule],
 });

packages/app-next/src/modules/nav/Sidebar.tsx

@@ -14,54 +14,60 @@
  * limitations under the License.
  */
 import {
+  Sidebar,
   SidebarDivider,
   SidebarGroup,
   SidebarItem,
   SidebarScrollWrapper,
   SidebarSpace,
 } from '@backstage/core-components';
-import { compatWrapper } from '@backstage/core-compat-api';
-import { Sidebar } from '@backstage/core-components';
-import { NavContentBlueprint } from '@backstage/frontend-plugin-api';
+import { NavContentBlueprint } from '@backstage/plugin-app-react';
 import { SidebarLogo } from './SidebarLogo';
 import MenuIcon from '@material-ui/icons/Menu';
 import SearchIcon from '@material-ui/icons/Search';
 import { SidebarSearchModal } from '@backstage/plugin-search';
-import {
-  UserSettingsSignInAvatar,
-  Settings as SidebarSettings,
-} from '@backstage/plugin-user-settings';
+import { UserSettingsSignInAvatar } from '@backstage/plugin-user-settings';
+import { NotificationsSidebarItem } from '@backstage/plugin-notifications';
 
 export const SidebarContent = NavContentBlueprint.make({
   params: {
-    component: ({ items }) =>
-      compatWrapper(
+    component: ({ navItems }) => {
+      const nav = navItems.withComponent(item => (
+        <SidebarItem icon={() => item.icon} to={item.href} text={item.title} />
+      ));
+
+      // Skipped items
+      nav.take('page:search'); // Using search modal instead
+
+      return (
         <Sidebar>
           <SidebarLogo />
           <SidebarGroup label="Search" icon={<SearchIcon />} to="/search">
             <SidebarSearchModal />
           </SidebarGroup>
           <SidebarDivider />
           <SidebarGroup label="Menu" icon={<MenuIcon />}>
+            {nav.take('page:catalog')}
+            {nav.take('page:scaffolder')}
+            <SidebarDivider />
             <SidebarScrollWrapper>
-              {/* Items in this group will be scrollable if they run out of space */}
-              {items
-                .filter(item => item.to !== '/settings')
-                .map((item, index) => (
-                  <SidebarItem {...item} key={index} />
-                ))}
+              {nav.rest({ sortBy: 'title' })}
             </SidebarScrollWrapper>
           </SidebarGroup>
           <SidebarSpace />
           <SidebarDivider />
+          <NotificationsSidebarItem />
+          <SidebarDivider />
           <SidebarGroup
             label="Settings"
             icon={<UserSettingsSignInAvatar />}
             to="/settings"
           >
-            <SidebarSettings />
+            {nav.take('page:app-visualizer')}
+            {nav.take('page:user-settings')}
           </SidebarGroup>
-        </Sidebar>,
-      ),
+        </Sidebar>
+      );
+    },
   },
 });

packages/app/e2e-tests/app.test.ts

@@ -23,5 +23,7 @@ test('App should render the welcome page', async ({ page }) => {
   await expect(enterButton).toBeVisible();
   await enterButton.click();
 
-  await expect(page.getByText('My Company Catalog')).toBeVisible();
+  const nav = page.getByRole('navigation');
+  await expect(nav.getByRole('link', { name: 'Catalog' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'APIs' })).toBeVisible();
 });

packages/app/package.json

@@ -14,45 +14,46 @@
     "lint": "backstage-cli package lint"
   },
   "dependencies": {
-    "@backstage/app-defaults": "^1.7.1",
-    "@backstage/catalog-model": "^1.7.5",
-    "@backstage/cli": "^0.34.4",
-    "@backstage/core-app-api": "^1.19.1",
-    "@backstage/core-components": "^0.18.2",
-    "@backstage/core-plugin-api": "^1.11.1",
-    "@backstage/integration-react": "^1.2.11",
-    "@backstage/plugin-api-docs": "^0.13.0",
-    "@backstage/plugin-catalog": "^1.31.4",
-    "@backstage/plugin-catalog-common": "^1.1.6",
-    "@backstage/plugin-catalog-graph": "^0.5.2",
-    "@backstage/plugin-catalog-import": "^0.13.6",
-    "@backstage/plugin-catalog-react": "^1.21.2",
-    "@backstage/plugin-kubernetes": "^0.12.12",
-    "@backstage/plugin-org": "^0.6.45",
-    "@backstage/plugin-permission-react": "^0.4.37",
-    "@backstage/plugin-scaffolder": "^1.34.2",
-    "@backstage/plugin-search": "^1.4.31",
-    "@backstage/plugin-search-react": "^1.9.5",
-    "@backstage/plugin-techdocs": "^1.15.1",
-    "@backstage/plugin-techdocs-module-addons-contrib": "^1.1.29",
-    "@backstage/plugin-techdocs-react": "^1.3.4",
-    "@backstage/plugin-user-settings": "^0.8.28",
-    "@backstage/theme": "^0.7.0",
-    "@backstage/ui": "^0.8.1",
+    "@backstage/app-defaults": "^1.7.6",
+    "@backstage/catalog-model": "^1.7.7",
+    "@backstage/cli": "^0.36.0",
+    "@backstage/core-app-api": "^1.19.6",
+    "@backstage/core-components": "^0.18.8",
+    "@backstage/core-plugin-api": "^1.12.4",
+    "@backstage/frontend-defaults": "^0.5.0",
+    "@backstage/integration-react": "^1.2.16",
+    "@backstage/plugin-api-docs": "^0.13.5",
+    "@backstage/plugin-catalog": "^2.0.1",
+    "@backstage/plugin-catalog-common": "^1.1.8",
+    "@backstage/plugin-catalog-graph": "^0.6.0",
+    "@backstage/plugin-catalog-import": "^0.13.11",
+    "@backstage/plugin-catalog-react": "^2.1.1",
+    "@backstage/plugin-kubernetes": "^0.12.17",
+    "@backstage/plugin-org": "^0.7.0",
+    "@backstage/plugin-permission-react": "^0.4.41",
+    "@backstage/plugin-scaffolder": "^1.36.1",
+    "@backstage/plugin-search": "^1.7.0",
+    "@backstage/plugin-search-react": "^1.11.0",
+    "@backstage/plugin-techdocs": "^1.17.2",
+    "@backstage/plugin-techdocs-module-addons-contrib": "^1.1.34",
+    "@backstage/plugin-techdocs-react": "^1.3.9",
+    "@backstage/plugin-user-settings": "^0.9.1",
+    "@backstage/theme": "^0.7.2",
+    "@backstage/ui": "^0.13.2",
     "@codeverse-gp/plugin-usage-statistics": "workspace:^",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
     "react": "^18.0.2",
     "react-dom": "^18.0.2",
-    "react-router": "^6.3.0",
-    "react-router-dom": "^6.3.0"
+    "react-router": "^6.30.2",
+    "react-router-dom": "^6.30.2"
   },
   "devDependencies": {
-    "@backstage/test-utils": "^1.7.12",
+    "@backstage/frontend-test-utils": "^0.5.1",
     "@playwright/test": "^1.32.3",
-    "@testing-library/dom": "^9.0.0",
+    "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.0.0",
-    "@testing-library/react": "^14.0.0",
+    "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.0.0",
     "@types/react-dom": "*",
     "cross-env": "^7.0.0"