feat(quickstart): migrate quickstart plugin to NFS

[rohitkrai03]

Hey, I just made a Pull Request!

Fixes - https://redhat.atlassian.net/browse/RHIDP-11853

• Migrate quickstart plugin to NFS using AppDrawerContentBlueprint, AppRootElementBlueprint, and TranslationBlueprint
• Add NFS app shell with app.packages: all auto-discovery; preserve legacy app as app-legacy

✔️ Checklist

Screen.Recording.2026-04-21.at.2.53.03.AM.mov

• A changeset describing the change and affected packages. (more info)
• Added or Updated documentation
• Tests for new functionality and regression tests for bug fixes
• Screenshots attached (for UI changes)

[rhdh-qodo-merge]

Code Review by Qodo

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

1. Quickstart config not validated 🐞 Bug ☼ Reliability

Description

QuickstartDrawerContent blindly casts config.get('app.quickstart') to an array, which can crash at
runtime (e.g., .length/.filter) if the config value is malformed or not an array. QuickstartInit
already uses try/catch + Array.isArray checks for the same config key, but the drawer content path
does not.

Code

workspaces/quickstart/plugins/quickstart/src/alpha/QuickstartDrawerContent.tsx[R34-38]

+  const quickstartItems: QuickstartItemData[] = useMemo(() => {
+    return config?.has('app.quickstart')
+      ? (config.get('app.quickstart') as QuickstartItemData[])
+      : [];
+  }, [config]);

Relevance

⭐⭐ Medium

Type guard is sensible, but similar “validate optional config” suggestions were rejected elsewhere;
no quickstart precedent found.

PR-#2512
PR-#1476

ⓘ Recommendations generated based on similar findings in past PRs

Evidence

QuickstartDrawerContent directly reads and casts app.quickstart without guarding for runtime
type/parse errors, while QuickstartInit demonstrates a defensive pattern for that same config key.
If app.quickstart is present but not an array, filterQuickstartItemsByRole calls items.filter and
will throw.

workspaces/quickstart/plugins/quickstart/src/alpha/QuickstartDrawerContent.tsx[27-44]
workspaces/quickstart/plugins/quickstart/src/alpha/QuickstartInit.tsx[72-84]
workspaces/quickstart/plugins/quickstart/src/utils/filterQuickstartItems.ts[28-36]

Agent prompt

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

### Issue description
`QuickstartDrawerContent` reads `app.quickstart` from `configApi` and casts it to `QuickstartItemData[]` without any runtime validation. If the config value is not an array (or `config.get` throws due to unexpected structure), the drawer can crash when accessing `.length` or when `filterQuickstartItemsByRole` calls `.filter`.

### Issue Context
`QuickstartInit` already includes a defensive `try/catch` + `Array.isArray` check for `app.quickstart`, but the drawer content does not.

### Fix Focus Areas
- workspaces/quickstart/plugins/quickstart/src/alpha/QuickstartDrawerContent.tsx[27-44]
- workspaces/quickstart/plugins/quickstart/src/alpha/QuickstartInit.tsx[72-84]

### Suggested fix
- Wrap the `config.get('app.quickstart')` access in `try/catch`.
- Verify `Array.isArray(value)` before treating it as an array; otherwise return `[]`.
- (Optional but helpful) add a small log/console warning when the config is present but invalid to aid debugging.

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

---

2. Quickstart click yields no UI 🐞 Bug ≡ Correctness

Description

The NFS sidebar always renders the Quickstart SidebarItem and toggles the drawer, but
QuickstartDrawerContent returns null when the user role has no eligible quickstart items, so
clicking Quickstart can result in no Quickstart content being shown. This behavior is explicitly
covered by the drawer content test (null render when userRole has no eligible items).

Code

workspaces/quickstart/packages/app/src/modules/nav/Sidebar.tsx[R76-83]

+function QuickstartSidebarItem() {
+  const { toggleDrawer } = useAppDrawer();
+  return (
+    <SidebarItem
+      text="Quick start"
+      icon={WavingHandOutlinedIcon}
+      onClick={() => toggleDrawer(QUICKSTART_DRAWER_ID)}
+    />

Relevance

⭐⭐⭐ High

Team previously hid Quickstart sidebar/drawer when no eligible items; this is same UX bug.

PR-#1476
PR-#1532

ⓘ Recommendations generated based on similar findings in past PRs

Evidence

Sidebar.tsx unconditionally renders the Quickstart sidebar entry and toggles drawer id 'quickstart'.
The drawer content component intentionally returns null when eligibleItems.length === 0 (and
also has a test asserting this behavior for a developer role against admin-only items), meaning a
user can click the sidebar item and not see any quickstart content.

workspaces/quickstart/packages/app/src/modules/nav/Sidebar.tsx[76-85]
workspaces/quickstart/plugins/quickstart/src/alpha/QuickstartDrawerContent.tsx[40-56]
workspaces/quickstart/plugins/quickstart/src/alpha/QuickstartDrawerContent.test.tsx[95-108]

Agent prompt

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

### Issue description
The app sidebar always shows a Quickstart entry and toggles the drawer, but the drawer content returns `null` when the current role has no eligible items. That makes the sidebar entry effectively a dead action for some users/configurations.

### Issue Context
There is already a translation string for an empty-state message (`content.emptyState.title`), but the drawer content currently returns `null` instead of rendering an empty-state UI.

### Fix Focus Areas
- workspaces/quickstart/packages/app/src/modules/nav/Sidebar.tsx[76-85]
- workspaces/quickstart/plugins/quickstart/src/alpha/QuickstartDrawerContent.tsx[40-56]

### Suggested fix (pick one)
1) **Render an empty state instead of `null`** when `eligibleItems.length === 0` (and `!roleLoading`), using the existing translation key (e.g., show a short message like “Quickstart content not available for your role.”).
2) **Hide/disable the SidebarItem** when there are no eligible items (requires checking eligibility before rendering the sidebar entry).

ⓘ 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

[rhdh-gh-app]

Important

This PR includes changes that affect public-facing API. Please ensure you are adding/updating documentation for new features or behavior.

Changed Packages

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

[rhdh-qodo-merge]

Review Summary by Qodo

Migrate quickstart plugin to NFS with new Backstage frontend system

✨ Enhancement

Walkthroughs

Description

• Migrate quickstart plugin to NFS using new Backstage frontend system
• Implement AppDrawerContentBlueprint for drawer integration
• Add AppRootElementBlueprint for initialization and notifications
• Support dual app modes (legacy and NFS) with environment-based testing
• Integrate with app-react plugin for drawer management

Diagram

flowchart LR
  A["Legacy App Mode"] -->|APP_MODE=legacy| B["Playwright Tests"]
  C["NFS App Mode"] -->|APP_MODE=nfs| B
  D["Quickstart Plugin"] -->|AppDrawerContentBlueprint| E["App Drawer"]
  D -->|AppRootElementBlueprint| F["Initialization & Notifications"]
  D -->|TranslationBlueprint| G["Translations"]
  H["App.tsx"] -->|Features| D
  H -->|Features| I["App React Module"]
  J["Sidebar"] -->|useAppDrawer| E

Loading

File Changes

1. workspaces/quickstart/plugins/quickstart/src/alpha/const.ts ✨ Enhancement +1/-1

Export quickstart drawer ID constant

workspaces/quickstart/plugins/quickstart/src/alpha/const.ts

---

2. workspaces/quickstart/app-config.yaml ⚙️ Configuration changes +4/-0

Enable auto-discovery of all packages

workspaces/quickstart/app-config.yaml

---

3. workspaces/quickstart/package.json ⚙️ Configuration changes +6/-1

Add dual-mode E2E testing scripts

workspaces/quickstart/package.json

---

View more (12)

4. workspaces/quickstart/packages/app/package.json Dependencies +4/-0

Add app-react and quickstart plugin dependencies

workspaces/quickstart/packages/app/package.json

---

5. workspaces/quickstart/packages/app/src/App.tsx ✨ Enhancement +12/-2

Integrate quickstart plugin with NFS modules

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

---

6. workspaces/quickstart/packages/app/src/modules/nav/Sidebar.tsx ✨ Enhancement +22/-3

Add quickstart drawer toggle and search integration

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

---

7. workspaces/quickstart/plugins/quickstart/package.json ⚙️ Configuration changes +6/-3

Update exports and dependencies for NFS

workspaces/quickstart/plugins/quickstart/package.json

---

8. workspaces/quickstart/plugins/quickstart/report-alpha.api.md 📝 Documentation +55/-12

Document new NFS plugin exports and modules

workspaces/quickstart/plugins/quickstart/report-alpha.api.md

---

9. workspaces/quickstart/plugins/quickstart/report.api.md 📝 Documentation +12/-12

Update legacy plugin API documentation

workspaces/quickstart/plugins/quickstart/report.api.md

---

10. workspaces/quickstart/plugins/quickstart/src/alpha/QuickstartDrawerContent.tsx ✨ Enhancement +65/-0

Implement drawer content with role-based filtering

workspaces/quickstart/plugins/quickstart/src/alpha/QuickstartDrawerContent.tsx

---

11. workspaces/quickstart/plugins/quickstart/src/alpha/QuickstartDrawerContent.test.tsx 🧪 Tests +114/-0

Test drawer content rendering and filtering

workspaces/quickstart/plugins/quickstart/src/alpha/QuickstartDrawerContent.test.tsx

---

12. workspaces/quickstart/plugins/quickstart/src/alpha/QuickstartInit.tsx ✨ Enhancement +163/-0

Handle first-visit auto-open and notifications

workspaces/quickstart/plugins/quickstart/src/alpha/QuickstartInit.tsx

---

13. workspaces/quickstart/plugins/quickstart/src/alpha/QuickstartInit.test.tsx 🧪 Tests +133/-0

Test initialization and drawer state persistence

workspaces/quickstart/plugins/quickstart/src/alpha/QuickstartInit.test.tsx

---

14. workspaces/quickstart/plugins/quickstart/src/alpha/index.tsx ✨ Enhancement +88/-0

Export NFS plugin with blueprints and modules

workspaces/quickstart/plugins/quickstart/src/alpha/index.tsx

---

15. workspaces/quickstart/plugins/quickstart/src/alpha/index.test.tsx 🧪 Tests +34/-0

Test alpha module exports

workspaces/quickstart/plugins/quickstart/src/alpha/index.test.tsx

---

[divyanshiGupta]

@rohitkrai03 Please rebase your branch with main.

[rohitkrai03]

@rohitkrai03 Please rebase your branch with main.

Done.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[divyanshiGupta]

Thanks @rohitkrai03. Code looks good to me!