fix(web): restore dropdown id compatibility safely

[elibosley]

Summary

• restore the dropdown id compatibility fix that was reverted from main
• scope the rewrite logic to reka-dropdown-* ids so legacy WebGUI VM and Docker context menus keep their exact dropdown-* ids
• add mount-engine coverage for both the Connect/Reka rewrite path and preserved legacy WebGUI dropdown ids

Root cause

The original compatibility observer rewrote any dropdown-* id or related ARIA reference in the page. That fixed the Connect dropdown collision with plugins like ZFS Master, but it also renamed legacy Dynamix context-menu ids that VM and Docker pages still look up directly, which broke those dropdowns.

Testing

• pnpm exec vitest --run __test__/components/Wrapper/mount-engine.test.ts

Summary by CodeRabbit

• Bug Fixes

  • Enhanced dropdown ID compatibility by automatically resolving ID conflicts during component mounting. This ensures dropdown elements work reliably across different component configurations and initialization scenarios.

• Tests

  • Added test coverage for dropdown ID sanitization behavior, including validation of ID conflict resolution and compatibility with both legacy and standard component implementations.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 31d01285-1d8b-42a2-a555-dc33cc24d4ee

📥 Commits

Reviewing files that changed from the base of the PR and between ffeb148 and bb085d8.

📒 Files selected for processing (3)

• web/__test__/components/Wrapper/mount-engine.test.ts
• web/src/components/Wrapper/mount-engine.ts
• web/src/utils/dropdownIdCompatibility.ts

---

Walkthrough

This PR introduces a dropdown ID compatibility layer that sanitizes legacy Reka-style dropdown IDs during application mount, replacing conflicting reka-dropdown-menu-* identifiers with reka-menu-* while maintaining legacy WebGUI dropdown elements unchanged.

Changes

Cohort / File(s)	Summary
Dropdown ID Compatibility Implementation web/src/utils/dropdownIdCompatibility.ts, web/src/components/Wrapper/mount-engine.ts	New utility module exports enableDropdownIdCompatibility() that sanitizes the document tree on first invocation by replacing conflicting reka-dropdown-menu-* attributes with reka-menu-* patterns across id, aria-controls, and aria-labelledby attributes, then installs a shared MutationObserver for continuous compatibility. Integration point added to mountUnifiedApp() calls this function before Vue context creation.
Compatibility Tests web/__test__/components/Wrapper/mount-engine.test.ts	Two new test cases verify sanitization behavior: legacy Reka dropdown elements with conflicting IDs are rewritten to safe values while legacy WebGUI dropdown elements remain unmodified after mount.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• fix(web): avoid legacy dropdown id collisions #1958: Implements the same dropdown ID compatibility feature with matching utility, integration, and tests across related codebase.

Poem

🐰 The dropdowns once danced with conflicting names,
Legacy IDs playing chaotic games,
With a flick of our paws, we sanitize with grace,
Replacing reka-dropdown-menu with its rightful place,
Now observers watch for mutations so fine,
Keeping dropdown harmony in perfect line! 🔄✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 16.67% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and specifically describes the main change: restoring dropdown ID compatibility with a focus on safety, which matches the PR's core objective of reintroducing a previously reverted compatibility fix while limiting rewrites to reka-dropdown-* prefixed IDs.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch codex/dropdown-id-compat-followup

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[codecov]

Codecov Report

❌ Patch coverage is 88.23529% with 8 lines in your changes missing coverage. Please review.
✅ Project coverage is 51.94%. Comparing base (ffeb148) to head (bb085d8).
⚠️ Report is 1 commits behind head on main.

Files with missing lines	Patch %	Lines
web/src/utils/dropdownIdCompatibility.ts	87.87%	8 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1962      +/-   ##
==========================================
+ Coverage   51.91%   51.94%   +0.02%     
==========================================
  Files        1029     1030       +1     
  Lines       71069    71137      +68     
  Branches     7912     7934      +22     
==========================================
+ Hits        36895    36949      +54     
- Misses      34051    34065      +14     
  Partials      123      123              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[github-actions]

This plugin has been deployed to Cloudflare R2 and is available for testing.
Download it at this URL:

https://preview.dl.unraid.net/unraid-api/tag/PR1962/dynamix.unraid.net.plg