feat: Backstage 1.34.2 (#355)

.dockerignore

@@ -2,7 +2,6 @@
 .yarn/install-state.gz
 node_modules
 packages/*/node_modules
-plugins
 *.local.yaml
 trivy.*
 eslint_report.json

.github/workflows/test.yaml

@@ -22,7 +22,7 @@ jobs:
       id-token: none
     strategy:
       matrix:
-        node-version: [20]
+        node-version: [22]
     steps:
     - uses: actions/checkout@v4
       with:
@@ -41,4 +41,5 @@ jobs:
         report-json: "eslint_report.json"
         only-pr-files: false
       continue-on-error: true
+    - run: yarn tsc
     - run: yarn test

.gitignore

@@ -15,7 +15,7 @@ coverage
 # Dependencies
 node_modules
 
-# Yarn 3 files
+# Yarn files
 .pnp.*
 .yarn/*
 !.yarn/patches

Dockerfile

@@ -1,5 +1,5 @@
 # Stage 1 - Install dependencies
-FROM registry.access.redhat.com/ubi9/nodejs-20:latest AS deps
+FROM registry.access.redhat.com/ubi9/nodejs-22:latest AS deps
 USER 0
 
 # Install yarn and libs for building isolated-vm with node-gyp
@@ -8,17 +8,18 @@ RUN    curl --silent --location https://dl.yarnpkg.com/rpm/yarn.repo | tee /etc/
 
 COPY ./package.json ./yarn.lock ./
 COPY ./packages ./packages
+COPY ./plugins ./plugins
 COPY .yarnrc.yml ./
 COPY .yarn/ ./.yarn
 
 # Remove all files except package.json
-RUN find packages -mindepth 2 -maxdepth 2 \! -name "package.json" -exec rm -rf {} \+
+RUN find packages plugins -mindepth 2 -maxdepth 2 \! -name "package.json" -exec rm -rf {} \+
 
 RUN yarn install --immutable --network-timeout 600000
 RUN chown 1001:0 ".yarn/install-state.gz"
 
 # Stage 2 - Build packages
-FROM registry.access.redhat.com/ubi9/nodejs-20:latest AS build
+FROM registry.access.redhat.com/ubi9/nodejs-22:latest AS build
 USER 0
 
 # Install yarn
@@ -33,14 +34,14 @@ RUN yarn tsc
 RUN yarn build:backend
 
 # Stage 3 - Build the actual backend image and install production dependencies
-FROM ghcr.io/radiorabe/ubi9-minimal:0.6.6
+FROM ghcr.io/radiorabe/ubi9-minimal:0.8.0
 
 ENV APP_ROOT=/opt/app-root \
     # The $HOME is not set by default, but some applications need this variable
     HOME=/opt/app-root/src \
     NPM_RUN=start \
     PLATFORM="el9" \
-    NODEJS_VERSION=20 \
+    NODEJS_VERSION=22 \
     NPM_RUN=start \
     NAME=backstage
 
@@ -91,6 +92,7 @@ RUN    microdnf -y module disable nodejs \
          mkdocs-autorefs \
          'mkdocstrings[python]' \
          mkdocs-techdocs-core \
+         mkdocs-monorepo-plugin \
     && microdnf clean all \
     && useradd -u 1001 -r -g 0 -s /sbin/nologin \
          -c "Default Application User" default \

README.md

@@ -18,7 +18,7 @@ yarn dev
 To keep it updated, run:
 
 ```sh
-yarn backstage-cli versions:bump --pattern '@{backstage,roadiehq,janus-idp}/*'
+yarn backstage-cli versions:bump --pattern '@{backstage,backstage-community,roadiehq,janus-idp}/*'
 ```
 
 ## Release Management

app-config.production.yaml

@@ -30,6 +30,16 @@ backend:
   cache:
     store: memory
 
+integrations:
+  github:
+    - host: github.com
+      # This is a GitHub App that was generated using the backstage-cli. You can find out how to generate the credentials
+      # file, and more information about setting up the GitHub integration here:
+      # * https://backstage.io/docs/integrations/github/locations#configuration
+      # * https://backstage.io/docs/integrations/github/github-apps
+      apps:
+        - $include: github-app-backstage-credentials.yaml
+
 auth:
   environment: production
 

app-config.yaml

@@ -2,12 +2,12 @@ app:
   title: RaBe Backstage
   baseUrl: http://localhost:3000
   support:
-    url: https://github.com/radiorabe/backstage/issues
+    url: https://github.com/radiorabe/rabe-backstage/issues
     items:
       - title: Issues
         icon: github
         links:
-          - url: https://github.com/radiorabe/backstage/issues
+          - url: https://github.com/radiorabe/rabe-backstage/issues
             title: GitHub Issues
 
 organization:
@@ -40,13 +40,6 @@ backend:
     connection: ":memory:"
   # workingDirectory: /tmp # Use this to configure a working directory for the scaffolder, defaults to the OS temp-dir
 
-integrations:
-  github:
-    - host: github.com
-      # This is a Personal Access Token or PAT from GitHub. You can find out how to generate this token, and more information
-      # about setting up the GitHub integration here: https://backstage.io/docs/getting-started/configuration#setting-up-a-github-integration
-      token: ${GITHUB_TOKEN}
-
 proxy:
   endpoints:
     ### Allow calling github api from scaffolder-backend-module-http-request
@@ -71,12 +64,15 @@ auth:
   session:
     secret: ${SESSION_SECRET}
   providers:
-    keycloak:
+    oidc:
       production:
         prompt: auto
         metadataUrl: ${AUTH_KEYCLOAK_METADATA_URL}
         clientId: ${AUTH_KEYCLOAK_CLIENT_ID}
         clientSecret: ${AUTH_KEYCLOAK_CLIENT_SECRET}
+        signIn:
+          resolvers:
+            - resolver: emailMatchingUserEntityProfileEmail
     github:
       production:
         clientId: ${AUTH_GITHUB_CLIENT_ID}

backstage.json

@@ -1,3 +1,3 @@
 {
-  "version": "1.23.4"
+  "version": "1.34.2"
 }

package.json

@@ -3,10 +3,10 @@
   "version": "1.0.0",
   "private": true,
   "engines": {
-    "node": "18 || 20"
+    "node": "22"
   },
   "scripts": {
-    "dev": "concurrently \"yarn start\" \"yarn start-backend\"",
+    "dev": "yarn workspaces foreach -A --include backend --include app --parallel -v -i run start",
     "start": "yarn workspace app start",
     "start-backend": "yarn workspace backend start",
     "build:backend": "yarn workspace backend build",
@@ -32,20 +32,18 @@
     "@backstage/cli": "^0.29.4",
     "@backstage/e2e-test-utils": "^0.1.1",
     "@playwright/test": "^1.41.2",
-    "@spotify/prettier-config": "^15.0.0",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "concurrently": "^8.2.2",
-    "lerna": "^8.1.2",
-    "node-gyp": "^10.0.1",
+    "eslint-plugin-jest": "^28.10.0",
+    "node-gyp": "^11.0.0",
     "prettier": "^3.2.5",
-    "typescript": "~5.4.2"
+    "typescript": "~5.7.2"
   },
   "resolutions": {
     "@types/react": "^18",
     "@types/react-dom": "^18"
   },
-  "prettier": "@spotify/prettier-config",
+  "prettier": "@backstage/cli/config/prettier",
   "lint-staged": {
     "*.{js,jsx,ts,tsx,mjs,cjs}": [
       "eslint --fix",

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

@@ -17,5 +17,10 @@ import { test, expect } from '@playwright/test';
 
 test('App should render the welcome page', async ({ page }) => {
   await page.goto('/');
+
+  const enterButton = page.getByRole('button', { name: 'Enter' });
+  await expect(enterButton).toBeVisible();
+  await enterButton.click();
+
   await expect(page.getByText('My Company Catalog')).toBeVisible();
 });

packages/app/package.json

@@ -14,55 +14,53 @@
     "lint": "backstage-cli package lint"
   },
   "dependencies": {
-    "@backstage/app-defaults": "^1.5.0",
-    "@backstage/catalog-model": "^1.4.4",
+    "@backstage-community/plugin-github-actions": "^0.7.0",
+    "@backstage-community/plugin-github-pull-requests-board": "^0.3.0",
+    "@backstage-community/plugin-todo": "^0.3.0",
+    "@backstage/app-defaults": "^1.5.15",
+    "@backstage/catalog-model": "^1.7.2",
     "@backstage/cli": "^0.29.4",
-    "@backstage/core-app-api": "^1.12.0",
-    "@backstage/core-components": "^0.14.0",
-    "@backstage/core-plugin-api": "^1.9.0",
-    "@backstage/integration-react": "^1.1.24",
-    "@backstage/plugin-api-docs": "^0.11.0",
-    "@backstage/plugin-catalog": "^1.17.0",
-    "@backstage/plugin-catalog-common": "^1.0.21",
-    "@backstage/plugin-catalog-graph": "^0.4.0",
-    "@backstage/plugin-catalog-import": "^0.10.6",
-    "@backstage/plugin-catalog-react": "^1.10.0",
-    "@backstage/plugin-catalog-unprocessed-entities": "^0.1.8",
-    "@backstage/plugin-devtools": "^0.1.9",
-    "@backstage/plugin-devtools-common": "^0.1.8",
-    "@backstage/plugin-github-actions": "^0.6.11",
-    "@backstage/plugin-github-pull-requests-board": "^0.1.24",
-    "@backstage/plugin-home": "^0.6.2",
-    "@backstage/plugin-org": "^0.6.20",
-    "@backstage/plugin-permission-react": "^0.4.20",
-    "@backstage/plugin-scaffolder": "^1.18.0",
-    "@backstage/plugin-search": "^1.4.6",
-    "@backstage/plugin-search-react": "^1.7.6",
-    "@backstage/plugin-tech-radar": "^0.6.13",
-    "@backstage/plugin-techdocs": "^1.10.0",
-    "@backstage/plugin-techdocs-module-addons-contrib": "^1.1.5",
-    "@backstage/plugin-techdocs-react": "^1.1.16",
-    "@backstage/plugin-todo": "^0.2.34",
-    "@backstage/plugin-user-settings": "^0.8.1",
-    "@backstage/theme": "^0.5.1",
+    "@backstage/core-app-api": "^1.15.3",
+    "@backstage/core-components": "^0.16.2",
+    "@backstage/core-plugin-api": "^1.10.2",
+    "@backstage/integration-react": "^1.2.2",
+    "@backstage/plugin-api-docs": "^0.12.2",
+    "@backstage/plugin-catalog": "^1.26.0",
+    "@backstage/plugin-catalog-common": "^1.1.2",
+    "@backstage/plugin-catalog-graph": "^0.4.14",
+    "@backstage/plugin-catalog-import": "^0.12.8",
+    "@backstage/plugin-catalog-react": "^1.15.0",
+    "@backstage/plugin-catalog-unprocessed-entities": "^0.2.12",
+    "@backstage/plugin-devtools": "^0.1.22",
+    "@backstage/plugin-devtools-common": "^0.1.14",
+    "@backstage/plugin-home": "^0.8.3",
+    "@backstage/plugin-org": "^0.6.34",
+    "@backstage/plugin-permission-react": "^0.4.29",
+    "@backstage/plugin-scaffolder": "^1.27.3",
+    "@backstage/plugin-search": "^1.4.21",
+    "@backstage/plugin-search-react": "^1.8.4",
+    "@backstage/plugin-techdocs": "^1.12.0",
+    "@backstage/plugin-techdocs-module-addons-contrib": "^1.1.19",
+    "@backstage/plugin-techdocs-react": "^1.2.12",
+    "@backstage/plugin-user-settings": "^0.8.17",
+    "@backstage/theme": "^0.6.3",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
-    "@roadiehq/backstage-plugin-github-insights": "^2.3.27",
-    "history": "^5.3.0",
+    "@roadiehq/backstage-plugin-github-insights": "^2.5.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router": "^6.22.1",
-    "react-router-dom": "^6.22.1",
-    "react-use": "^17.5.0"
+    "react-router-dom": "^6.22.1"
   },
   "devDependencies": {
-    "@backstage/test-utils": "^1.5.0",
+    "@backstage/test-utils": "^1.7.3",
     "@playwright/test": "^1.41.2",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",
-    "@types/node": "^20",
+    "@types/node": "^22",
+    "@types/react": "^18",
     "@types/react-dom": "^18",
     "cross-env": "^7.0.3"
   },

packages/app/public/index.html

@@ -6,7 +6,7 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Backstage is an open platform for building developer portals"
+      content="RaBe Backstage is the developer portal used to manage our open source code and how it's deployed"
     />
     <!--
       manifest.json provides metadata used when your web app is installed on a

packages/app/src/App.tsx

@@ -23,7 +23,7 @@ import { TechDocsAddons } from '@backstage/plugin-techdocs-react';
 import { DevToolsPage } from '@backstage/plugin-devtools';
 import { ReportIssue } from '@backstage/plugin-techdocs-module-addons-contrib';
 import { UserSettingsPage } from '@backstage/plugin-user-settings';
-import { apis, keycloakOIDCAuthApiRef } from './apis';
+import { apis, oidcAuthApiRef } from './apis';
 import { homePage } from './components/home/HomePage';
 import { entityPage } from './components/catalog/EntityPage';
 import { searchPage } from './components/search/SearchPage';
@@ -63,11 +63,12 @@ const app = createApp({
     SignInPage: props => (
       <SignInPage
         {...props}
+        auto
         provider={{
-          id: 'keycloak-auth-provider',
-          title: 'Keycloak',
-          message: 'Sign in using Keycloak',
-          apiRef: keycloakOIDCAuthApiRef,
+          id: 'oidc-auth-provider',
+          title: 'RaBe Login',
+          message: 'Sign in using RaBe account',
+          apiRef: oidcAuthApiRef,
         }}
       />
     ),

packages/app/src/apis.ts

@@ -8,6 +8,7 @@ import {
   AnyApiFactory,
   ApiRef,
   BackstageIdentityApi,
+  OAuthApi,
   OpenIdConnectApi,
   ProfileInfoApi,
   SessionApi,
@@ -18,15 +19,15 @@ import {
   oauthRequestApiRef
 } from '@backstage/core-plugin-api';
 
-export const keycloakOIDCAuthApiRef: ApiRef<
-  OpenIdConnectApi & ProfileInfoApi & BackstageIdentityApi & SessionApi
+export const oidcAuthApiRef: ApiRef<
+  OAuthApi & OpenIdConnectApi & ProfileInfoApi & BackstageIdentityApi & SessionApi
 > = createApiRef({
-  id: 'auth.keycloak',
+  id: 'internal.auth.oidc',
 });
 
 export const apis: AnyApiFactory[] = [
   createApiFactory({
-    api: keycloakOIDCAuthApiRef,
+    api: oidcAuthApiRef,
     deps: {
       discoveryApi: discoveryApiRef,
       oauthRequestApi: oauthRequestApiRef,
@@ -38,8 +39,8 @@ export const apis: AnyApiFactory[] = [
         discoveryApi,
         oauthRequestApi,
         provider: {
-          id: 'keycloak',
-          title: 'Keycloak auth provider',
+          id: 'oidc',
+          title: 'OIDC auth provider',
           icon: () => null,
         },
         environment: configApi.getOptionalString('auth.environment'),