Smoother search in Edit Role and Vendor file views, plus shared-constant cleanup
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 existinguseDebouncehook (300ms) before passing them touseRoleDetail; 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): debouncessearchQueryand uses the debounced value in bothget_filesWebSocket requests, with effect dependencies updated accordingly. - Shared constants: adds
packages/ui/src/constants/app.constants.tsdefiningGLOBAL_DEBOUNCE_DELAY_MS(300) andMAX_TRUNCATED_CHARS_TO_SHOW(50), exported via a new@dsm/ui/constantsentry in the package. - Deletes the duplicate
app.constants.tsfrom 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_filesmessages 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.