feat(cost-management): upgrade Backstage from 1.39.0 to 1.49.4

workspaces/cost-management/.changeset/backstage-upgrade-1494.md

@@ -0,0 +1,2 @@
+---
+---

workspaces/cost-management/README.md

@@ -51,9 +51,7 @@ The Cost Management plugin's Optimizations section is dependent on [Orchestrator
 - [Installing Red Hat Developer Hub with Orchestrator by using the Red Hat Developer Hub Operator](https://docs.redhat.com/en/documentation/red_hat_developer_hub/1.8/html/orchestrator_in_red_hat_developer_hub/assembly-install-rhdh-orchestrator-operator)
 - [Installing Red Hat Developer Hub with Orchestrator by using the Red Hat Developer Hub Helm chart](https://docs.redhat.com/en/documentation/red_hat_developer_hub/1.8/html/orchestrator_in_red_hat_developer_hub/assembly-install-rhdh-orchestrator-helm)
 
-This method requires vanilla backstage to be used:
-
-- [Install as a static plugin for local development](https://github.com/redhat-developer/rhdh-plugins/tree/main/workspaces/orchestrator#install-as-a-static-plugin)
+For vanilla Backstage local development, see the [Local Development with Orchestrator](#local-development-with-orchestrator) section below.
 
 **Workflow details** : [Here is the link to the workflow](https://github.com/rhdhorchestrator/serverless-workflows/tree/main/workflows/patch-k8s-resource) which is being used for manually applying the recommendation from the Resource Optimization plugin.
 
@@ -176,6 +174,40 @@ The HTTP endpoints exposed by the cost-management-backend can enforce authorizat
 
 An application for applying the recommendations automatically. The application makes use of OSL (OpenShift Serverless Logic, a.k.a. SonataFlow) which is part of the Orchestrator installation. If you already have the [Orchestrator plugin and the workflow](#dependency-on-orchestrator-plugin-and-workflow-details) installed then you are ready for installing the Optimizer application. Follow the [application instructions](https://github.com/rhdhorchestrator/optimizer/tree/main) for installing and configuring it.
 
+## Local Development with Orchestrator
+
+The orchestrator plugin is **not** included in the dev app by default. The cost-management plugin communicates with the orchestrator backend at runtime via the Backstage discovery API, so the orchestrator packages are not a compile-time dependency.
+
+If you need to test the "Apply Recommendation" workflow locally, add the orchestrator packages to the dev app:
+
+```sh
+# From the cost-management workspace root
+yarn --cwd packages/app add @red-hat-developer-hub/backstage-plugin-orchestrator
+yarn --cwd packages/backend add @red-hat-developer-hub/backstage-plugin-orchestrator-backend
+```
+
+Then register the plugins in the dev app:
+
+1. In `packages/app/src/App.tsx`, add:
+
+   ```tsx
+   import { OrchestratorPage } from '@red-hat-developer-hub/backstage-plugin-orchestrator';
+   // ... inside <FlatRoutes>:
+   <Route path="/orchestrator" element={<OrchestratorPage />} />;
+   ```
+
+2. In `packages/backend/src/index.ts`, add:
+
+   ```ts
+   backend.add(
+     import('@red-hat-developer-hub/backstage-plugin-orchestrator-backend'),
+   );
+   backend.add(import('@backstage/plugin-notifications-backend'));
+   backend.add(import('@backstage/plugin-signals-backend'));
+   ```
+
+For the full orchestrator setup guide, see: [Install as a static plugin for local development](https://github.com/redhat-developer/rhdh-plugins/tree/main/workspaces/orchestrator#install-as-a-static-plugin)
+
 ## References
 
 - [Installing ROS-OCP RHDH plugin on Red Hat Developer Hub on a Openshift Cluster](https://docs.google.com/document/d/1tExe7cEBYMJplkk9ppSdBINwE-14KmxURczGjloHqZ4/edit?usp=sharing)

workspaces/cost-management/backstage.json

@@ -1 +1 @@
-{ "version": "1.39.0" }
+{ "version": "1.49.4" }

workspaces/cost-management/package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "private": true,
   "engines": {
-    "node": "18 || 20"
+    "node": "22"
   },
   "scripts": {
     "start": "concurrently -c auto -n \"fe,be\" -p \"{name}:{pid}\" \"yarn start-app\" \"yarn start-backend\"",
@@ -40,9 +40,10 @@
     "directory": "workspaces/cost-management"
   },
   "devDependencies": {
-    "@backstage/cli": "^0.29.4",
-    "@backstage/e2e-test-utils": "^0.1.1",
-    "@backstage/repo-tools": "^0.13.3",
+    "@backstage/cli": "^0.36.0",
+    "@backstage/cli-defaults": "^0.1.0",
+    "@backstage/e2e-test-utils": "^0.1.2",
+    "@backstage/repo-tools": "^0.17.0",
     "@changesets/cli": "^2.27.1",
     "@microsoft/api-extractor-model": "^7.29.2",
     "@microsoft/tsdoc": "^0.16.0",
@@ -52,21 +53,14 @@
     "knip": "^5.27.4",
     "node-gyp": "^9.0.0",
     "prettier": "^2.3.2",
-    "typescript": "~5.3.0"
+    "typescript": "~5.8.0"
   },
   "resolutions": {
-    "@backstage/plugin-catalog-backend": "1.30.0",
-    "@backstage/plugin-catalog-backend-module-logs": "0.1.6",
-    "@backstage/plugin-catalog-backend-module-scaffolder-entity-model": "0.2.4",
-    "@backstage/plugin-catalog-backend-module-unprocessed": "0.5.4",
-    "@backstage/plugin-scaffolder": "1.27.5",
-    "@backstage/plugin-scaffolder-backend": "1.29.0",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "react": "^18",
     "react-dom": "^18",
-    "@rjsf/core": "5.24.13",
-    "@rjsf/utils": "5.24.13"
+    "@protobufjs/inquire": "1.1.0"
   },
   "prettier": "@spotify/prettier-config",
   "lint-staged": {

workspaces/cost-management/packages/app/package.json

@@ -21,52 +21,51 @@
   "dependencies": {
     "@backstage-community/plugin-rbac": "1.33.2",
     "@backstage-community/plugin-tech-radar": "^0.7.4",
-    "@backstage/app-defaults": "^1.5.16",
-    "@backstage/catalog-model": "^1.7.3",
-    "@backstage/cli": "^0.29.4",
-    "@backstage/core-app-api": "^1.15.4",
-    "@backstage/core-components": "^0.16.3",
-    "@backstage/core-plugin-api": "^1.10.3",
-    "@backstage/integration-react": "^1.2.3",
-    "@backstage/plugin-api-docs": "^0.12.3",
-    "@backstage/plugin-catalog": "^1.26.1",
-    "@backstage/plugin-catalog-common": "^1.1.3",
-    "@backstage/plugin-catalog-graph": "^0.4.15",
-    "@backstage/plugin-catalog-import": "^0.12.9",
-    "@backstage/plugin-catalog-react": "^1.15.1",
-    "@backstage/plugin-org": "^0.6.35",
-    "@backstage/plugin-permission-react": "^0.4.30",
-    "@backstage/plugin-scaffolder": "^1.27.5",
-    "@backstage/plugin-search": "^1.4.22",
-    "@backstage/plugin-search-react": "^1.8.5",
-    "@backstage/plugin-techdocs": "^1.12.2",
-    "@backstage/plugin-techdocs-module-addons-contrib": "^1.1.20",
-    "@backstage/plugin-techdocs-react": "^1.2.13",
-    "@backstage/plugin-user-settings": "^0.8.18",
-    "@backstage/theme": "^0.6.3",
+    "@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/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-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",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
     "@patternfly/patternfly": "^6.3.0",
-    "@red-hat-developer-hub/backstage-plugin-orchestrator": "^2.5.1",
     "@red-hat-developer-hub/backstage-plugin-theme": "^0.12.0",
     "@red-hat-developer-hub/plugin-cost-management": "workspace:^",
     "history": "^5.0.0",
     "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",
     "react-use": "^17.2.4"
   },
   "devDependencies": {
-    "@backstage/test-utils": "^1.7.4",
+    "@backstage/test-utils": "^1.7.16",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@mui/icons-material": "^5.16.1",
     "@mui/material": "^5.16.1",
     "@playwright/test": "^1.56.1",
-    "@testing-library/dom": "^9.0.0",
+    "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.0.0",
-    "@testing-library/react": "^15.0.0",
+    "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.0.0",
     "@types/react": "^18",
     "@types/react-dom": "*",

workspaces/cost-management/packages/app/src/App.tsx

@@ -55,7 +55,6 @@ import {
   ResourceOptimizationPage,
   OpenShiftPage,
 } from '@red-hat-developer-hub/plugin-cost-management';
-import { OrchestratorPage } from '@red-hat-developer-hub/backstage-plugin-orchestrator';
 import { useRhdhTheme } from './hooks/useRhdhTheme';
 import { githubAuthApiRef } from '@backstage/core-plugin-api';
 import { RbacPage } from '@backstage-community/plugin-rbac';
@@ -144,7 +143,6 @@ const routes = (
     <Route path="/catalog-graph" element={<CatalogGraphPage />} />
     <Route path="/cost-management" element={<ResourceOptimizationPage />} />
     <Route path="/cost-management/openshift" element={<OpenShiftPage />} />
-    <Route path="/orchestrator" element={<OrchestratorPage />} />
     <Route path="/rbac" element={<RbacPage />} />
   </FlatRoutes>
 );

workspaces/cost-management/packages/app/src/components/Root/Root.tsx

@@ -44,7 +44,6 @@ import SearchIcon from '@material-ui/icons/Search';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 import { CostManagementIconOutlined } from '@red-hat-developer-hub/plugin-cost-management';
-import { OrchestratorIcon } from '@red-hat-developer-hub/backstage-plugin-orchestrator';
 import { useRhdhTheme } from '../../hooks/useRhdhTheme';
 import { Administration } from '@backstage-community/plugin-rbac';
 
@@ -220,12 +219,6 @@ export const Root = ({ children }: PropsWithChildren<{}>) => {
               }`}
             />
           </CollapsibleSubmenu>
-
-          <SidebarItem
-            icon={OrchestratorIcon}
-            to="orchestrator"
-            text="Orchestrator"
-          />
         </SidebarGroup>
         <SidebarSpace />
         <SidebarDivider />

workspaces/cost-management/packages/app/src/components/catalog/EntityPage.tsx

@@ -133,17 +133,17 @@ const overviewContent = (
   <Grid container spacing={3} alignItems="stretch">
     {entityWarningContent}
     <Grid item md={6}>
-      <EntityAboutCard variant="gridItem" />
+      <EntityAboutCard />
     </Grid>
     <Grid item md={6} xs={12}>
-      <EntityCatalogGraphCard variant="gridItem" height={400} />
+      <EntityCatalogGraphCard height={400} />
     </Grid>
 
     <Grid item md={4} xs={12}>
       <EntityLinksCard />
     </Grid>
     <Grid item md={8} xs={12}>
-      <EntityHasSubcomponentsCard variant="gridItem" />
+      <EntityHasSubcomponentsCard />
     </Grid>
   </Grid>
 );
@@ -172,10 +172,10 @@ const serviceEntityPage = (
     <EntityLayout.Route path="/dependencies" title="Dependencies">
       <Grid container spacing={3} alignItems="stretch">
         <Grid item md={6}>
-          <EntityDependsOnComponentsCard variant="gridItem" />
+          <EntityDependsOnComponentsCard />
         </Grid>
         <Grid item md={6}>
-          <EntityDependsOnResourcesCard variant="gridItem" />
+          <EntityDependsOnResourcesCard />
         </Grid>
       </Grid>
     </EntityLayout.Route>
@@ -199,10 +199,10 @@ const websiteEntityPage = (
     <EntityLayout.Route path="/dependencies" title="Dependencies">
       <Grid container spacing={3} alignItems="stretch">
         <Grid item md={6}>
-          <EntityDependsOnComponentsCard variant="gridItem" />
+          <EntityDependsOnComponentsCard />
         </Grid>
         <Grid item md={6}>
-          <EntityDependsOnResourcesCard variant="gridItem" />
+          <EntityDependsOnResourcesCard />
         </Grid>
       </Grid>
     </EntityLayout.Route>
@@ -255,7 +255,7 @@ const apiPage = (
           <EntityAboutCard />
         </Grid>
         <Grid item md={6} xs={12}>
-          <EntityCatalogGraphCard variant="gridItem" height={400} />
+          <EntityCatalogGraphCard height={400} />
         </Grid>
         <Grid item md={4} xs={12}>
           <EntityLinksCard />
@@ -287,10 +287,10 @@ const userPage = (
       <Grid container spacing={3}>
         {entityWarningContent}
         <Grid item xs={12} md={6}>
-          <EntityUserProfileCard variant="gridItem" />
+          <EntityUserProfileCard />
         </Grid>
         <Grid item xs={12} md={6}>
-          <EntityOwnershipCard variant="gridItem" />
+          <EntityOwnershipCard />
         </Grid>
       </Grid>
     </EntityLayout.Route>
@@ -303,10 +303,10 @@ const groupPage = (
       <Grid container spacing={3}>
         {entityWarningContent}
         <Grid item xs={12} md={6}>
-          <EntityGroupProfileCard variant="gridItem" />
+          <EntityGroupProfileCard />
         </Grid>
         <Grid item xs={12} md={6}>
-          <EntityOwnershipCard variant="gridItem" />
+          <EntityOwnershipCard />
         </Grid>
         <Grid item xs={12} md={6}>
           <EntityMembersListCard />
@@ -325,28 +325,27 @@ const systemPage = (
       <Grid container spacing={3} alignItems="stretch">
         {entityWarningContent}
         <Grid item md={6}>
-          <EntityAboutCard variant="gridItem" />
+          <EntityAboutCard />
         </Grid>
         <Grid item md={6} xs={12}>
-          <EntityCatalogGraphCard variant="gridItem" height={400} />
+          <EntityCatalogGraphCard height={400} />
         </Grid>
         <Grid item md={4} xs={12}>
           <EntityLinksCard />
         </Grid>
         <Grid item md={8}>
-          <EntityHasComponentsCard variant="gridItem" />
+          <EntityHasComponentsCard />
         </Grid>
         <Grid item md={6}>
-          <EntityHasApisCard variant="gridItem" />
+          <EntityHasApisCard />
         </Grid>
         <Grid item md={6}>
-          <EntityHasResourcesCard variant="gridItem" />
+          <EntityHasResourcesCard />
         </Grid>
       </Grid>
     </EntityLayout.Route>
     <EntityLayout.Route path="/diagram" title="Diagram">
       <EntityCatalogGraphCard
-        variant="gridItem"
         direction={Direction.TOP_BOTTOM}
         title="System Diagram"
         height={700}
@@ -372,13 +371,13 @@ const domainPage = (
       <Grid container spacing={3} alignItems="stretch">
         {entityWarningContent}
         <Grid item md={6}>
-          <EntityAboutCard variant="gridItem" />
+          <EntityAboutCard />
         </Grid>
         <Grid item md={6} xs={12}>
-          <EntityCatalogGraphCard variant="gridItem" height={400} />
+          <EntityCatalogGraphCard height={400} />
         </Grid>
         <Grid item md={6}>
-          <EntityHasSystemsCard variant="gridItem" />
+          <EntityHasSystemsCard />
         </Grid>
       </Grid>
     </EntityLayout.Route>