All updates
QAFrontend

Smoother search in Edit Role and Vendor file views, plus shared-constant cleanup

PR #790pixbox-supportFeb 3, 2026 · 04:46 UTC
QAFeb 3, 2026

Executive summary

Fixes two search boxes that fired a request on every keystroke — permission search in the Admin Edit Role dialog and file search in the Vendor View Files modal — so they now wait until typing pauses (300ms). It also consolidates two shared configuration values into a single source of truth used by all frontend apps. This change has reached the QA environment.

Why this was needed

Both search inputs were sending traffic on every character typed: the Edit Role permission search triggered an API call per keystroke, and the Vendor View Files search pushed a WebSocket query per keystroke. That generated unnecessary backend/socket load and could surface partial or out-of-order results while a user was still typing. Separately, the same two settings (search debounce delay and text-truncation length) were duplicated in three apps, which is easy to let drift out of sync.

Client / user impact

Searching permissions in the Admin Edit Role dialog and searching files in the Vendor View Files modal now feels steadier: results refresh once after typing stops rather than flickering with each letter, and far fewer redundant requests are sent. No visible behavior changes elsewhere — the constants cleanup is internal and preserves the existing 300ms delay and 50-character truncation values.

Technical scope

  • Admin Edit Role dialog (RoleFormDialog/index.tsx): wraps the available/assigned permission search terms in the existing useDebounce hook (300ms) before passing them to useRoleDetail; when a search box is cleared it bypasses the debounce so a stale filter isn't re-sent if the dialog is quickly reopened.
  • Vendor View Files modal (ViewFilesModal.tsx): debounces searchQuery and uses the debounced value in both get_files WebSocket requests, with effect dependencies updated accordingly.
  • Shared constants: adds packages/ui/src/constants/app.constants.ts defining GLOBAL_DEBOUNCE_DELAY_MS (300) and MAX_TRUNCATED_CHARS_TO_SHOW (50), exported via a new @dsm/ui/constants entry in the package.
  • Deletes the duplicate app.constants.ts from the admin, vendor, and mail apps and repoints all imports (1 file in admin, 3 in vendor, 33 in mail) to @dsm/ui/constants. Values are unchanged.
  • Net diff is small (~77 additions / 60 deletions); most changed files are one-line import swaps.

Risk & mitigation

Low. The bug fixes touch only two components and reuse an existing, proven debounce hook. The main risk is the broad import-path change (37 files) — a missed or mistyped import would break a build — but the constant values themselves are identical, so runtime behavior is preserved. Mitigation: confirm all three apps (admin, vendor, mail) build cleanly and that the new @dsm/ui/constants export resolves.

QA validation focus

  • Admin > Edit Role: type in the available and assigned permission search boxes and confirm the API call fires only after typing stops (~300ms), not per keystroke; clear the search, reopen the dialog quickly, and confirm the prior filter is not re-applied.
  • Vendor > View Files modal: type in the file search and confirm WebSocket get_files messages are sent only after typing pauses; verify results still match the search term and pagination/date filter still work.
  • Build/smoke: verify admin, vendor, and mail apps build and load without import errors; spot-check truncated text still cuts at 50 characters and other debounced search/filter inputs across mail (grids, async selects) behave as before.