feat: highlight search matches in Team settings tables

[carlh7777]

Summary

Adds visual search result highlighting to Team Settings tables, making it easier to identify why rows match the current search query.

Previously, search filtering would correctly narrow the results, but matching text within names and email addresses was not visually emphasized. This made it difficult to quickly identify the portion of a row that matched the search term, especially in larger teams.

This change introduces a reusable SearchHighlight component and applies it across both Team Settings tables to provide consistent, case-insensitive match highlighting.

Screenshots

Before

After

Test Plan

• Open Settings → Team
• In Team Members, search for a partial name (e.g. carl)
• Verify matching text is highlighted in both Name and Email columns
• Verify highlighting renders correctly alongside user avatars
• In Joined Teams, repeat the same search and verify highlighting appears in both Name and Email columns
• Clear the search input and confirm highlights are removed
• Verify case-insensitive matching (e.g. CARL, Carl, and carl produce identical highlights)
• Verify rows without matches remain unchanged

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Advanced

Run ID: 69f47e34-ced7-44ea-ac3e-aa360417adb5

📥 Commits

Reviewing files that changed from the base of the PR and between 1ed2fc2 and e16c2df.

📒 Files selected for processing (3)

• web/src/components/search-highlight.tsx
• web/src/pages/user-setting/setting-team/tenant-table.tsx
• web/src/pages/user-setting/setting-team/user-table.tsx

🚧 Files skipped from review as they are similar to previous changes (3)

• web/src/pages/user-setting/setting-team/user-table.tsx
• web/src/components/search-highlight.tsx
• web/src/pages/user-setting/setting-team/tenant-table.tsx

Included review availability: Your plan provides up to 10 included reviews per hour; 7 remain after this review.

---

📝 Walkthrough

Walkthrough

A new SearchHighlight component renders case-insensitive query matches with <mark> elements. TenantTable and UserTable use it for nickname and email fields. UserTable also removes a debug console.log.

Changes

Search Highlighting in Tables

Layer / File(s)	Summary
SearchHighlight component implementation web/src/components/search-highlight.tsx	Adds a memoized component that normalizes text, trims and escapes the query, and highlights exact case-insensitive matches.
Table search highlighting and cleanup web/src/pages/user-setting/setting-team/tenant-table.tsx, web/src/pages/user-setting/setting-team/user-table.tsx	Applies SearchHighlight to nickname and email cells. Removes debug logging from UserTable sorting logic.

Priority: ⬇️ Low

Estimated code review effort: 3 (Moderate) | ~20 minutes

Merge Risk: ⚪ Minimal · up to e16c2

This change adds case-insensitive match highlighting to team-member and joined-team search results without introducing identified current-head merge risk.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 1 functions across 3 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main change: highlighting search matches in the Team settings tables.
Description check	✅ Passed	The description includes the required Summary section, explains the problem and solution, and provides relevant screenshots and a test plan.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

• Fix all pre-merge checks with AI

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{🐰 Queries hop across the screen,
Matching words now glow bright and clean,
Tenant rows and users agree,
Marks reveal what searches see,
Debug logs vanish quietly.}

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

[carlh7777]

@JinHai-CN, @dcc123456, @wangq8, @yingfeng Could you review this pr?

[carlh7777]

@dosubot please check this pr

[dosubot]

I reviewed the PR. Here's a summary:

Overall: This is a clean, well-structured change. The SearchHighlight component is reusable, properly typed, and follows good React practices [1].

Strengths:

• Good use of useMemo for performance optimization
• escapeRegExp from lodash prevents regex injection / ReDoS attacks
• Early return on empty queries avoids unnecessary work
• Consistent application across both Team Settings tables (tenant + user)
• Bonus cleanup: removes a leftover console.log

Potential issue to consider:

The text prop has no null/undefined guard. If tenant.nickname or tenant.email is ever null or undefined, the component will throw at runtime when it tries to call .split() on a non-string value. A simple defensive check (e.g., if (!text) early return, or defaulting text to "") would make this more robust [1].

Minor notes:

• Index-based keys in the .map() are acceptable here since the parts array is derived deterministically from the text/query and won't be reordered.
• The Tailwind class bg-accent-primary/25 for the <mark> element looks fine for consistent theming.

Overall this looks good to merge once the null-safety concern is addressed.

---

[carlh7777]

@JinHai-CN, @dcc123456, @wangq8, @yingfeng Could you review this pr?

[carlh7777]

@JinHai-CN, @dcc123456, @wangq8, @yingfeng Could you review this pr?

[coderabbitai]

Note

GitHub couldn't provide a complete incremental comparison for this pull request, so CodeRabbit is performing a full review instead. This review may take a little longer.