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

[rohitkrai03]

Hey, I just made a Pull Request!

This PR is the first step in migrating quickstarts plugin to new frontend system.

• Upgraded to latest Backstage version.
• Added NFS app package.
• Moved app to app-legacy.
• Moved e2e-tests folder out to root.

[rhdh-gh-app]

Missing Changesets

The following package(s) are changed by this PR but do not have a changeset:

• @red-hat-developer-hub/backstage-plugin-quickstart

See CONTRIBUTING.md for more information about how to add changesets.

Changed Packages

Package Name	Package Path	Changeset Bump	Current Version
app-legacy	workspaces/quickstart/packages/app-legacy	none	v0.0.0
app	workspaces/quickstart/packages/app	none	v0.0.0
backend	workspaces/quickstart/packages/backend	none	v0.0.0
@red-hat-developer-hub/backstage-plugin-quickstart	workspaces/quickstart/plugins/quickstart	none	v1.8.3

[rhdh-qodo-merge]

Review Summary by Qodo

Migrate quickstart to new Backstage frontend system with app-legacy fallback

✨ Enhancement

Walkthroughs

Description

• Upgraded Backstage from v1.45.2 to v1.49.2 across all packages
• Migrated app package to new frontend system with modular architecture
• Created app-legacy package preserving old frontend implementation
• Added new navigation module with sidebar components and logo assets
• Updated all Backstage dependencies to latest compatible versions

Diagram

flowchart LR
  A["Backstage v1.45.2"] -->|"Upgrade to v1.49.2"| B["Updated Dependencies"]
  C["Old App Package"] -->|"Refactor"| D["New App with Frontend Modules"]
  C -->|"Preserve"| E["App-Legacy Package"]
  D -->|"Add"| F["Navigation Module"]
  F -->|"Contains"| G["Sidebar & Logo Components"]

Loading

File Changes

1. workspaces/quickstart/backstage.json Dependencies +1/-1

Upgrade Backstage version to 1.49.2

workspaces/quickstart/backstage.json

---

2. workspaces/quickstart/package.json Dependencies +4/-3

Update root dependencies and add legacy start script

workspaces/quickstart/package.json

---

3. workspaces/quickstart/packages/app/package.json Dependencies +26/-41

Refactor app dependencies for new frontend system

workspaces/quickstart/packages/app/package.json

---

View more (36)

4. workspaces/quickstart/packages/app/src/App.tsx ✨ Enhancement +5/-131

Simplify app to use new frontend defaults and modules

workspaces/quickstart/packages/app/src/App.tsx

---

5. workspaces/quickstart/packages/app/src/index.tsx ✨ Enhancement +1/-1

Update app rendering to use new createRoot API

workspaces/quickstart/packages/app/src/index.tsx

---

6. workspaces/quickstart/packages/app/src/App.test.tsx 🧪 Tests +1/-58

Simplify test to use new app rendering method

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

---

7. workspaces/quickstart/packages/app/src/modules/nav/index.ts ✨ Enhancement +22/-0

Create navigation module with frontend plugin API

workspaces/quickstart/packages/app/src/modules/nav/index.ts

---

8. workspaces/quickstart/packages/app/src/modules/nav/Sidebar.tsx ✨ Enhancement +69/-0

Implement sidebar navigation with menu and settings groups

workspaces/quickstart/packages/app/src/modules/nav/Sidebar.tsx

---

9. workspaces/quickstart/packages/app/src/modules/nav/SidebarLogo.tsx ✨ Enhancement +51/-0

Create responsive sidebar logo component

workspaces/quickstart/packages/app/src/modules/nav/SidebarLogo.tsx

---

10. workspaces/quickstart/packages/app/src/modules/nav/LogoFull.tsx ✨ Enhancement +43/-0

Add full logo SVG component for expanded sidebar

workspaces/quickstart/packages/app/src/modules/nav/LogoFull.tsx

---

11. workspaces/quickstart/packages/app/src/modules/nav/LogoIcon.tsx ✨ Enhancement +43/-0

Add icon logo SVG component for collapsed sidebar

workspaces/quickstart/packages/app/src/modules/nav/LogoIcon.tsx

---

12. workspaces/quickstart/packages/app-legacy/package.json ⚙️ Configuration changes +86/-0

Create legacy app package with old frontend dependencies

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

---

13. workspaces/quickstart/packages/app-legacy/src/App.tsx ✨ Enhancement +148/-0

Preserve original app implementation for legacy support

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

---

14. workspaces/quickstart/packages/app-legacy/src/index.tsx ✨ Enhancement +21/-0

Legacy app entry point with original rendering method

workspaces/quickstart/packages/app-legacy/src/index.tsx

---

15. workspaces/quickstart/packages/app-legacy/src/App.test.tsx 🧪 Tests +100/-0

Add comprehensive app tests with canvas mocking

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

---

16. workspaces/quickstart/packages/app-legacy/src/setupTests.ts 🧪 Tests +16/-0

Configure test environment with testing library

workspaces/quickstart/packages/app-legacy/src/setupTests.ts

---

17. workspaces/quickstart/packages/app-legacy/public/index.html ⚙️ Configuration changes +60/-0

Create HTML template for legacy app

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

---

18. workspaces/quickstart/packages/app-legacy/public/manifest.json ⚙️ Configuration changes +15/-0

Add web app manifest for legacy app

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

---

19. workspaces/quickstart/packages/app-legacy/.eslintrc.js ⚙️ Configuration changes +1/-0

Configure ESLint for legacy app package

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

---

20. workspaces/quickstart/packages/app-legacy/.eslintignore ⚙️ Configuration changes +1/-0

Exclude public directory from linting

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

---

21. workspaces/quickstart/packages/backend/package.json Dependencies +24/-24

Update backend dependencies to match new versions

workspaces/quickstart/packages/backend/package.json

---

22. workspaces/quickstart/plugins/quickstart/package.json Dependencies +9/-9

Update plugin dependencies to latest Backstage versions

workspaces/quickstart/plugins/quickstart/package.json

---

23. workspaces/quickstart/packages/app/e2e-tests/app.test.ts 🧪 Tests +29/-0

Add end-to-end tests for app welcome page

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

---

24. workspaces/quickstart/packages/app-legacy/e2e-tests/quick-start-admin-guest.spec.ts Additional files +0/-0

...

workspaces/quickstart/packages/app-legacy/e2e-tests/quick-start-admin-guest.spec.ts

---

25. workspaces/quickstart/packages/app-legacy/e2e-tests/quick-start-developer.spec.ts Additional files +0/-0

...

workspaces/quickstart/packages/app-legacy/e2e-tests/quick-start-developer.spec.ts

---

26. workspaces/quickstart/packages/app-legacy/e2e-tests/utils/accessibility.ts Additional files +0/-0

...

workspaces/quickstart/packages/app-legacy/e2e-tests/utils/accessibility.ts

---

27. workspaces/quickstart/packages/app-legacy/e2e-tests/utils/helper.ts Additional files +0/-0

...

workspaces/quickstart/packages/app-legacy/e2e-tests/utils/helper.ts

---

28. workspaces/quickstart/packages/app-legacy/e2e-tests/utils/localeSkip.ts Additional files +0/-0

...

workspaces/quickstart/packages/app-legacy/e2e-tests/utils/localeSkip.ts

---

29. workspaces/quickstart/packages/app-legacy/e2e-tests/utils/translations.ts Additional files +0/-0

...

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

---

30. workspaces/quickstart/packages/app-legacy/public/robots.txt Additional files +2/-0

...

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

---

31. workspaces/quickstart/packages/app-legacy/src/apis.ts Additional files +0/-0

...

workspaces/quickstart/packages/app-legacy/src/apis.ts

---

32. workspaces/quickstart/packages/app-legacy/src/components/Root/ApplicationDrawer.tsx Additional files +0/-0

...

workspaces/quickstart/packages/app-legacy/src/components/Root/ApplicationDrawer.tsx

---

33. workspaces/quickstart/packages/app-legacy/src/components/Root/LogoFull.tsx Additional files +0/-0

...

workspaces/quickstart/packages/app-legacy/src/components/Root/LogoFull.tsx

---

34. workspaces/quickstart/packages/app-legacy/src/components/Root/LogoIcon.tsx Additional files +0/-0

...

workspaces/quickstart/packages/app-legacy/src/components/Root/LogoIcon.tsx

---

35. workspaces/quickstart/packages/app-legacy/src/components/Root/QuickstartSidebarItem.tsx Additional files +0/-0

...

workspaces/quickstart/packages/app-legacy/src/components/Root/QuickstartSidebarItem.tsx

---

36. workspaces/quickstart/packages/app-legacy/src/components/Root/Root.tsx Additional files +0/-0

...

workspaces/quickstart/packages/app-legacy/src/components/Root/Root.tsx

---

37. workspaces/quickstart/packages/app-legacy/src/components/Root/index.ts Additional files +0/-0

...

workspaces/quickstart/packages/app-legacy/src/components/Root/index.ts

---

38. workspaces/quickstart/packages/app-legacy/src/components/catalog/EntityPage.tsx Additional files +0/-0

...

workspaces/quickstart/packages/app-legacy/src/components/catalog/EntityPage.tsx

---

39. workspaces/quickstart/packages/app-legacy/src/components/search/SearchPage.tsx Additional files +0/-0

...

workspaces/quickstart/packages/app-legacy/src/components/search/SearchPage.tsx

---

[rhdh-qodo-merge]

Code Review by Qodo

🐞 Bugs (2) 📘 Rule violations (0) 📎 Requirement gaps (0) 📐 Spec deviations (0)

1. Unused sidebar imports 🐞 Bug ⚙ Maintainability

Description

The new NFS sidebar module imports SearchIcon, SidebarSearchModal, and NotificationsSidebarItem but
never uses them, which will fail backstage-cli repo lint for the workspace. The code also claims
it uses a search modal, but the modal is not actually rendered anywhere in the sidebar component.

Code

workspaces/quickstart/packages/app/src/modules/nav/Sidebar.tsx[R24-31]

+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 } from '@backstage/plugin-user-settings';
+import { NotificationsSidebarItem } from '@backstage/plugin-notifications';
+

Evidence

workspaces/quickstart/package.json runs backstage-cli repo lint (both lint and lint:all). In
workspaces/quickstart/packages/app/src/modules/nav/Sidebar.tsx, the following imports are unused
in the component body: SearchIcon, SidebarSearchModal, and NotificationsSidebarItem. For
comparison, workspaces/extensions/packages/app/src/modules/nav/Sidebar.tsx renders
<SidebarSearchModal /> under a Search group when it imports it, but quickstart’s sidebar does not.

workspaces/quickstart/packages/app/src/modules/nav/Sidebar.tsx[24-31]
workspaces/quickstart/package.json[8-27]
workspaces/extensions/packages/app/src/modules/nav/Sidebar.tsx[17-66]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

### Issue description
`workspaces/quickstart/packages/app/src/modules/nav/Sidebar.tsx` imports `SearchIcon`, `SidebarSearchModal`, and `NotificationsSidebarItem` but never uses them. This is expected to fail `backstage-cli repo lint` for the quickstart workspace.

### Issue Context
The sidebar code comment says search is skipped because a search modal is used, but the modal (and icon) are not actually rendered.

### Fix Focus Areas
- workspaces/quickstart/packages/app/src/modules/nav/Sidebar.tsx[24-65]

### What to change
- Either remove the unused imports and related “Using search modal instead” comment, OR implement the search group (like other workspaces do) and actually render `<SidebarSearchModal />`.
- If notifications are intended, render `<NotificationsSidebarItem />`; otherwise remove that import.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

2. Wrong repository directory 🐞 Bug ✓ Correctness

Description

packages/app-legacy/package.json sets repository.directory to
workspaces/quickstart/packages/app, which is incorrect for the new app-legacy package. This
breaks package metadata and can produce wrong source links in tooling that uses
repository.directory.

Code

workspaces/quickstart/packages/app-legacy/package.json[R6-10]

+  "repository": {
+    "type": "git",
+    "url": "https://github.com/redhat-developer/rhdh-plugins",
+    "directory": "workspaces/quickstart/packages/app"
+  },

Evidence

The new package is located at workspaces/quickstart/packages/app-legacy/, but its
repository.directory points to workspaces/quickstart/packages/app. Other workspaces’ app-legacy
packages set repository.directory to their actual app-legacy path (e.g. orchestrator).

workspaces/quickstart/packages/app-legacy/package.json[6-10]
workspaces/orchestrator/packages/app-legacy/package.json[9-13]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

### Issue description
`workspaces/quickstart/packages/app-legacy/package.json` has incorrect package metadata: `repository.directory` points to the old app path.

### Issue Context
The package lives in `workspaces/quickstart/packages/app-legacy`, so `repository.directory` should match that.

### Fix Focus Areas
- workspaces/quickstart/packages/app-legacy/package.json[6-10]

### What to change
- Update `repository.directory` from `workspaces/quickstart/packages/app` to `workspaces/quickstart/packages/app-legacy`.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

ⓘ The new review experience is currently in Beta. Learn more

[sonarqubecloud]

Quality Gate failed

Failed conditions
26.7% Duplication on New Code (required ≤ 3%)
C Reliability Rating on New Code (required ≥ A)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE

[HusneShabbir]

/lgtm
Fine with the e2e file changes.