chore(quickstart): backstage upgrade with app & app-legacy setup

workspaces/quickstart/.eslintignore

@@ -1 +1,2 @@
 playwright.config.ts
+e2e-tests/

workspaces/quickstart/.gitignore

@@ -52,3 +52,6 @@ site
 
 # E2E test reports
 e2e-test-report/
+**/e2e-test-report*/
+**/test-results/
+**/playwright-report/

workspaces/quickstart/backstage.json

@@ -1,3 +1,3 @@
 {
-  "version": "1.45.2"
+  "version": "1.49.2"
 }

workspaces/quickstart/packages/app/e2e-tests/utils/translations.ts → workspaces/quickstart/e2e-tests/utils/translations.ts

@@ -15,12 +15,12 @@
  */
 
 /* eslint-disable @backstage/no-relative-monorepo-imports */
-import { quickstartMessages } from '../../../../plugins/quickstart/src/translations/ref.js';
-import quickstartTranslationDe from '../../../../plugins/quickstart/src/translations/de.js';
-import quickstartTranslationFr from '../../../../plugins/quickstart/src/translations/fr.js';
-import quickstartTranslationEs from '../../../../plugins/quickstart/src/translations/es.js';
-import quickstartTranslationIt from '../../../../plugins/quickstart/src/translations/it.js';
-import quickstartTranslationJa from '../../../../plugins/quickstart/src/translations/ja.js';
+import { quickstartMessages } from '../../plugins/quickstart/src/translations/ref.js';
+import quickstartTranslationDe from '../../plugins/quickstart/src/translations/de.js';
+import quickstartTranslationFr from '../../plugins/quickstart/src/translations/fr.js';
+import quickstartTranslationEs from '../../plugins/quickstart/src/translations/es.js';
+import quickstartTranslationIt from '../../plugins/quickstart/src/translations/it.js';
+import quickstartTranslationJa from '../../plugins/quickstart/src/translations/ja.js';
 /* eslint-enable @backstage/no-relative-monorepo-imports */
 
 export type QuickstartMessages = typeof quickstartMessages;
@@ -29,13 +29,13 @@
   const result = Object.keys(messages).reduce((res, key) => {
     const path = key.split('.');
     const lastIndex = path.length - 1;
     path.reduce((acc: Record<string, string | {}>, currentPath, i) => {
       acc[currentPath] =
         lastIndex === i
           ? (messages as Record<string, string>)[key]
           : acc[currentPath] || {};
       return acc[currentPath];
     }, res);
     return res;
   }, {});
 

workspaces/quickstart/package.json

@@ -7,6 +7,7 @@
   },
   "scripts": {
     "start": "backstage-cli repo start",
+    "start:legacy": "backstage-cli repo start packages/app-legacy packages/backend",
     "tsc": "tsc",
     "tsc:full": "tsc --skipLibCheck true --incremental false",
     "build:all": "backstage-cli repo build --all",
@@ -36,15 +37,16 @@
     "directory": "workspaces/quickstart"
   },
   "devDependencies": {
-    "@backstage/cli": "^0.34.5",
-    "@backstage/e2e-test-utils": "^0.1.1",
-    "@backstage/repo-tools": "^0.16.0",
+    "@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",
     "@playwright/test": "1.58.2",
     "knip": "^5.27.4",
     "node-gyp": "^9.0.0",
     "prettier": "^2.3.2",
-    "typescript": "~5.3.0"
+    "typescript": "~5.8.0"
   },
   "resolutions": {
     "@types/react": "^18",

workspaces/quickstart/packages/app-legacy/.eslintignore

@@ -0,0 +1 @@
+public

workspaces/quickstart/packages/app-legacy/.eslintrc.js

@@ -0,0 +1 @@
+module.exports = require('@backstage/cli/config/eslint-factory')(__dirname);

workspaces/quickstart/packages/app-legacy/package.json

@@ -0,0 +1,86 @@
+{
+  "name": "app-legacy",
+  "version": "0.0.0",
+  "private": true,
+  "bundled": true,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/redhat-developer/rhdh-plugins",
+    "directory": "workspaces/quickstart/packages/app-legacy"
+  },
+  "backstage": {
+    "role": "frontend"
+  },
+  "scripts": {
+    "start": "backstage-cli package start",
+    "build": "backstage-cli package build",
+    "clean": "backstage-cli package clean",
+    "test": "backstage-cli package test",
+    "lint": "backstage-cli package lint"
+  },
+  "dependencies": {
+    "@backstage-community/plugin-rbac": "^1.40.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/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.0",
+    "@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.1",
+    "@material-ui/core": "^4.12.2",
+    "@material-ui/icons": "^4.9.1",
+    "@mui/icons-material": "5.18.0",
+    "@mui/material": "5.18.0",
+    "@red-hat-developer-hub/backstage-plugin-global-header": "^1.17.1",
+    "@red-hat-developer-hub/backstage-plugin-quickstart": "workspace:^",
+    "@red-hat-developer-hub/backstage-plugin-theme": "^0.12.0",
+    "react": "^18.0.2",
+    "react-dom": "^18.0.2",
+    "react-router": "^6.3.0",
+    "react-router-dom": "^6.3.0"
+  },
+  "devDependencies": {
+    "@axe-core/playwright": "^4.10.0",
+    "@backstage/test-utils": "^1.7.16",
+    "@playwright/test": "1.58.2",
+    "@testing-library/dom": "^9.0.0",
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.0.0",
+    "@types/react-dom": "*",
+    "cross-env": "^7.0.0"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "files": [
+    "dist"
+  ]
+}

workspaces/quickstart/packages/app-legacy/public/index.html

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Backstage is an open source framework for building developer portals"
+    />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link
+      rel="manifest"
+      href="<%= publicPath %>/manifest.json"
+      crossorigin="use-credentials"
+    />
+    <link rel="icon" href="<%= publicPath %>/favicon.ico" />
+    <link rel="shortcut icon" href="<%= publicPath %>/favicon.ico" />
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="<%= publicPath %>/apple-touch-icon.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="<%= publicPath %>/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="<%= publicPath %>/favicon-16x16.png"
+    />
+    <link
+      rel="mask-icon"
+      href="<%= publicPath %>/safari-pinned-tab.svg"
+      color="#5bbad5"
+    />
+    <title><%= config.getOptionalString('app.title') ?? 'Backstage' %></title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `yarn start`.
+      To create a production bundle, use `yarn build`.
+    -->
+  </body>
+</html>

workspaces/quickstart/packages/app-legacy/public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "Backstage",
+  "name": "Backstage",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "48x48",
+      "type": "image/png"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

workspaces/quickstart/packages/app-legacy/public/robots.txt

@@ -0,0 +1,2 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *

workspaces/quickstart/packages/app-legacy/src/App.test.tsx

@@ -0,0 +1,100 @@
+/*
+ * Copyright Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { render, waitFor } from '@testing-library/react';
+import App from './App';
+
+// Mock HTMLCanvasElement.getContext to avoid canvas-related errors in tests
+Object.defineProperty(HTMLCanvasElement.prototype, 'getContext', {
+  value: jest.fn(() => ({
+    fillRect: jest.fn(),
+    clearRect: jest.fn(),
+    getImageData: jest.fn(() => ({
+      data: new Array(4),
+    })),
+    putImageData: jest.fn(),
+    createImageData: jest.fn(() => []),
+    setTransform: jest.fn(),
+    drawImage: jest.fn(),
+    save: jest.fn(),
+    fillText: jest.fn(),
+    restore: jest.fn(),
+    beginPath: jest.fn(),
+    moveTo: jest.fn(),
+    lineTo: jest.fn(),
+    closePath: jest.fn(),
+    stroke: jest.fn(),
+    translate: jest.fn(),
+    scale: jest.fn(),
+    rotate: jest.fn(),
+    arc: jest.fn(),
+    fill: jest.fn(),
+    measureText: jest.fn(() => ({ width: 0 })),
+    transform: jest.fn(),
+    rect: jest.fn(),
+    clip: jest.fn(),
+    createLinearGradient: jest.fn(() => ({
+      addColorStop: jest.fn(),
+    })),
+  })),
+});
+
+// eslint-disable-next-line no-console
+const originalError = console.error;
+beforeAll(() => {
+  // eslint-disable-next-line no-console
+  console.error = (...args: any[]) => {
+    if (
+      typeof args[0] === 'string' &&
+      (args[0].includes('MUI: The') ||
+        args[0].includes('Warning: findDOMNode') ||
+        args[0].includes('Not implemented: HTMLCanvasElement'))
+    ) {
+      return;
+    }
+    originalError.call(console, ...args);
+  };
+});
+
+afterAll(() => {
+  // eslint-disable-next-line no-console
+  console.error = originalError;
+});
+
+describe('App', () => {
+  it('should render', async () => {
+    process.env = {
+      NODE_ENV: 'test',
+      APP_CONFIG: [
+        {
+          data: {
+            app: { title: 'Test' },
+            backend: { baseUrl: 'http://localhost:7007' },
+            techdocs: {
+              storageUrl: 'http://localhost:7007/api/techdocs/static/docs',
+            },
+          },
+          context: 'test',
+        },
+      ] as any,
+    };
+
+    const rendered = render(<App />);
+
+    await waitFor(() => {
+      expect(rendered.baseElement).toBeInTheDocument();
+    });
+  });
+});