fix(quickstart): moved CustomDrawer out of the packages/app

[debsmita1]

Hey, I just made a Pull Request!

Part of :
https://issues.redhat.com/browse/RHDHBUGS-2770

Solution description:
Moved the CustomDrawer component from packages/app to plugins/quickstart/dev to resolve workspace accessibility issues during development. This ensures the component is directly available to the dev plugin without relying on the app workspace package

✔️ Checklist

• 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-gh-app]

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	patch	v1.8.2

[rhdh-qodo-merge]

Review Summary by Qodo

Move CustomDrawer to quickstart dev exports

✨ Enhancement

Walkthroughs

Description

• Moved CustomDrawer component from packages/app to plugins/quickstart/dev
• Exported CustomDrawer as public dev API through package exports
• Updated DrawerComponent to use CustomDrawer instead of raw MUI Drawer
• Enhanced package.json with improved scripts, metadata, and scalprum configuration

Diagram

flowchart LR
  A["packages/app<br/>ApplicationDrawer.tsx"] -->|"import from"| B["plugins/quickstart/dev<br/>CustomDrawer.tsx"]
  C["DrawerComponent.tsx"] -->|"uses"| B
  B -->|"exported as"| D["package.json<br/>dev export"]
  D -->|"enables"| E["External consumers<br/>can import CustomDrawer"]

Loading

File Changes

1. workspaces/quickstart/.changeset/true-moons-shop.md 📝 Documentation +5/-0

Changeset for CustomDrawer relocation

• Added changeset documenting the CustomDrawer component relocation
• Marked as patch version bump for the quickstart plugin

workspaces/quickstart/.changeset/true-moons-shop.md

---

2. workspaces/quickstart/packages/app/src/components/Root/ApplicationDrawer.tsx ✨ Enhancement +1/-1

Update CustomDrawer import path

• Updated import path for CustomDrawer from local file to plugin dev export
• Changed from relative import to package-based import

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

---

3. workspaces/quickstart/plugins/quickstart/dev/CustomDrawer.tsx 📝 Documentation +6/-0

Mark CustomDrawer as internal API

• Added @internal JSDoc comments to CustomDrawerProps type and CustomDrawer component
• Marked component as internal API to indicate it's for development use only

workspaces/quickstart/plugins/quickstart/dev/CustomDrawer.tsx

---

View more (3)

4. workspaces/quickstart/plugins/quickstart/dev/DrawerComponent.tsx ✨ Enhancement +7/-27

Refactor to use CustomDrawer component

• Removed direct MUI Drawer implementation and styling logic
• Replaced with CustomDrawer component wrapper for cleaner abstraction
• Added setDrawerWidth to context destructuring for width change handling
• Removed unused imports for Drawer and ThemeConfig

workspaces/quickstart/plugins/quickstart/dev/DrawerComponent.tsx

---

5. workspaces/quickstart/plugins/quickstart/package.json ⚙️ Configuration changes +33/-5

Export CustomDrawer and enhance package configuration

• Added ./dev export pointing to CustomDrawer.tsx for external access
• Added dev entry to typesVersions for TypeScript support
• Enhanced scripts with lint:check, lint:fix, prettier commands, and test coverage
• Added pluginPackage field and scalprum configuration with exposed modules
• Added package metadata including keywords, homepage, bugs, maintainers, and author

workspaces/quickstart/plugins/quickstart/package.json

---

6. workspaces/quickstart/plugins/quickstart/report-dev.api.md 📝 Documentation +7/-0

Add API Extractor report file

• Generated API report file for the quickstart plugin package
• Created by API Extractor tool for documentation purposes

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

---

[rhdh-qodo-merge]

Code Review by Qodo

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

1. App depends on /dev entrypoint 🐞 Bug ⛯ Reliability

Description

packages/app now imports CustomDrawer from the plugin’s @.../dev entrypoint. This couples the
app runtime to an internal/dev-only module surface, which is non-standard in this repo and increases
the chance of breakage if the ./dev export is changed/removed or not packaged for production
consumption.

Code

workspaces/quickstart/packages/app/src/components/Root/ApplicationDrawer.tsx[25]

+import { CustomDrawer } from '@red-hat-developer-hub/backstage-plugin-quickstart/dev';

Evidence

The app imports from @.../dev. Other frontend plugins in this repo typically export only main
(.) and optional ./alpha entrypoints, not ./dev, so relying on ./dev from app runtime is a
maintainability/packaging risk (and becomes a functional risk if Finding #1 occurs).

workspaces/quickstart/packages/app/src/components/Root/ApplicationDrawer.tsx[17-27]
workspaces/lightspeed/plugins/lightspeed/package.json[10-14]

Agent prompt

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

## Issue description
`packages/app` imports `CustomDrawer` from `@red-hat-developer-hub/backstage-plugin-quickstart/dev`, coupling app runtime to a dev-only/internal module surface.

## Issue Context
- This becomes a direct build/runtime risk if the `./dev` entrypoint isn’t shipped (see packaging mismatch in the plugin package.json).
- Even if shipped, it sets a precedent that the app depends on plugin dev internals.

## Fix Focus Areas
- workspaces/quickstart/packages/app/src/components/Root/ApplicationDrawer.tsx[17-27]
- workspaces/quickstart/plugins/quickstart/package.json[63-87]

## Suggested directions
1) Move `CustomDrawer` into the plugin’s `src/` and export it from a clearly-internal runtime entrypoint (e.g. `./internal`).
2) Alternatively, move `CustomDrawer` into a shared workspace package intended for reuse by `packages/app` and plugin dev tooling.
3) Update `ApplicationDrawer.tsx` import to use that new non-dev entrypoint.

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

---

2. Width-change API is inert 🐞 Bug ✓ Correctness

Description

Callers pass onWidthChange={setDrawerWidth} into CustomDrawer, but CustomDrawer never invokes
onWidthChange (and does not use minWidth/maxWidth). This makes the width-change plumbing
effectively dead and can confuse future maintainers or break any intended “resizable drawer”
behavior.

Code

workspaces/quickstart/plugins/quickstart/dev/DrawerComponent.tsx[R26-29]

+  const { isDrawerOpen, drawerWidth, userRole, roleLoading, setDrawerWidth } =
    useQuickstartDrawerContext();

  const apiHolder = useApiHolder();

Evidence

DrawerComponent and ApplicationDrawer wire setDrawerWidth into CustomDrawer via
onWidthChange, implying CustomDrawer should emit width updates. However, CustomDrawer only
reads drawerWidth for rendering and never calls onWidthChange, so no width updates can originate
from CustomDrawer.

workspaces/quickstart/plugins/quickstart/dev/DrawerComponent.tsx[25-66]
workspaces/quickstart/packages/app/src/components/Root/ApplicationDrawer.tsx[180-187]
workspaces/quickstart/plugins/quickstart/dev/CustomDrawer.tsx[39-84]

Agent prompt

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

## Issue description
`CustomDrawer` exposes `onWidthChange`, `minWidth`, and `maxWidth`, and callers pass `setDrawerWidth` via `onWidthChange`, but the component never calls `onWidthChange` and does not use the min/max constraints.

## Issue Context
This makes the width-change API inert and can mislead consumers into thinking resizing is supported.

## Fix Focus Areas
- workspaces/quickstart/plugins/quickstart/dev/CustomDrawer.tsx[39-84]
- workspaces/quickstart/plugins/quickstart/dev/DrawerComponent.tsx[25-66]
- workspaces/quickstart/packages/app/src/components/Root/ApplicationDrawer.tsx[180-187]

## Suggested directions (choose one)
1) **Implement resizing**: add UI/logic to adjust width, clamp to `[minWidth, maxWidth]`, and invoke `onWidthChange(newWidth)`.
2) **Remove the inert API**: drop `onWidthChange/minWidth/maxWidth` from `CustomDrawerProps` and remove `onWidthChange={...}` at call sites.

ⓘ 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 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

[karthikjeeyar]

/approve
/lgtm