feat: add searchable TSC members filter and repo dropdown (#4711) #4712
Conversation
mohdaffankhan
requested review from
Mayaleeeee,
akshatnema,
anshgoyalevil,
asyncapi-bot-eve,
derberg,
princerajpoot20 and
sambhavgupta0705
as code owners
WalkthroughAdds client-side search, repository filtering, and a searchable repo-dropdown to CommunityLayout.tsx; normalizes GitHub username/avatar handling and centralizes role rendering. Also updates two ZenWave SDK technology labels in config/tools.json and stops automatic start() invocation in scripts/index.ts. Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes
Possibly related issues
Possibly related PRs
Suggested reviewers
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
💤 Files with no reviewable changes (1)
⏰ Context from checks skipped due to timeout of 180000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
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. Comment |
❌ Deploy Preview for asyncapi-website failed.Built without sensitive environment variables
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
components/layout/CommunityLayout.tsx (2)
60-60: Remove orphaned comment.This comment is redundant since the logic is already documented at lines 49-50 where
avatarUrlis actually set.- // (avatarUrl was set above when github exists)
215-246: Consider extracting IIFE to a named helper function.The IIFE pattern works but is unconventional in React and reduces readability. Consider extracting this to a small helper function or using conditional rendering with fragments.
+function renderMemberRole(user: Tsc | Ambassador, githubUsername: string) { + if ('repos' in user) { + return ( + <div className='flex flex-wrap items-center gap-1'> + Maintainer of: + {user.repos.map((repo: { name: string; url: string }) => ( + <a + data-testid='Repo-Links' + key={repo.name} + className='inline-flex items-center rounded-full bg-cyan-100 px-3 py-0.5 text-xs font-medium leading-5 text-cyan-800 hover:bg-cyan-300' + href={repo.url} + > + {repo.name} + </a> + ))} + </div> + ); + } + + if (githubUsername) { + return ( + <TextLink + href={`/community/ambassadors/${githubUsername}`} + className='flex font-normal text-base text-blue-500 no-underline hover:text-sky-400' + > + AsyncAPI Ambassador + </TextLink> + ); + } + + return null; +}Then use
{renderMemberRole(user, githubUsername)}in the JSX.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (1)
components/layout/CommunityLayout.tsx(7 hunks)
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: aminoxix
Repo: asyncapi/website PR: 4127
File: components/layout/CommunityLayout.tsx:179-179
Timestamp: 2025-06-10T06:27:25.419Z
Learning: In AsyncAPI's community data structure, ambassadors and TSC members are guaranteed to have GitHub accounts. The `github` field is required in both `Ambassador` and `Tsc` interfaces, and the data processing in `addAdditionalUserInfo()` converts GitHub usernames to full URLs, ensuring safe string operations when extracting usernames from URLs.
📚 Learning: 2025-06-10T06:27:25.419Z
Learnt from: aminoxix
Repo: asyncapi/website PR: 4127
File: components/layout/CommunityLayout.tsx:179-179
Timestamp: 2025-06-10T06:27:25.419Z
Learning: In AsyncAPI's community data structure, ambassadors and TSC members are guaranteed to have GitHub accounts. The `github` field is required in both `Ambassador` and `Tsc` interfaces, and the data processing in `addAdditionalUserInfo()` converts GitHub usernames to full URLs, ensuring safe string operations when extracting usernames from URLs.
Applied to files:
components/layout/CommunityLayout.tsx
🧬 Code graph analysis (1)
components/layout/CommunityLayout.tsx (2)
components/typography/TextLink.tsx (1)
TextLink(21-42)pages/community/ambassadors/index.tsx (1)
addAdditionalUserInfo(19-40)
⏰ Context from checks skipped due to timeout of 180000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: Redirect rules - asyncapi-website
- GitHub Check: Header rules - asyncapi-website
- GitHub Check: Pages changed - asyncapi-website
- GitHub Check: Lighthouse CI
🔇 Additional comments (4)
components/layout/CommunityLayout.tsx (4)
188-188: LGTM!Defensive parsing that correctly handles edge cases when extracting the GitHub username from the URL.
311-365: LGTM!Memoization is well-structured with correct dependencies. The filtering logic properly handles name, company, and repository searches as specified in the requirements.
506-511: LGTM!Correctly uses
filteredMemberswhich properly handles both TSC and Board views since the basetscBoardMembersis already filtered by membership type.
512-518: LGTM!The no-results message provides clear feedback. Note that the
QuestionCardremains visible even when no members match, which is reasonable since it serves as a call-to-action for potential new members.
|
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on https://deploy-preview-4712--asyncapi-website.netlify.app/ |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #4712 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 22 22
Lines 799 798 -1
Branches 146 146
=========================================
- Hits 799 798 -1 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
components/layout/CommunityLayout.tsx (1)
451-569: Accessibility concerns addressed.The dropdown now includes all the required accessibility attributes from the previous review:
aria-expandedandaria-haspopupon the buttonrole="listbox"on the<ul>androle="option"on<li>items- Keyboard navigation with
tabIndexandonKeyDownhandlers- Outside-click handling via
useEffect
🧹 Nitpick comments (1)
components/layout/CommunityLayout.tsx (1)
482-489: Consider adding an accessible label to the repository search input.The search input inside the dropdown lacks an associated label for screen readers. Since there's no visible
<label>, add anaria-labelattribute.<input type='text' placeholder='Search repositories...' value={repoSearchQuery} onChange={(e) => setRepoSearchQuery(e.target.value)} + aria-label='Search repositories' className='w-full rounded border border-gray-300 px-3 py-1.5 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500' onClick={(e) => e.stopPropagation()} />
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
components/layout/CommunityLayout.tsx(7 hunks)config/tools.json(2 hunks)
🧰 Additional context used
🧠 Learnings (3)
📚 Learning: 2024-11-01T12:48:22.034Z
Learnt from: akshatnema
Repo: asyncapi/website PR: 3136
File: tests/fixtures/tools/automated-tools.json:8-9
Timestamp: 2024-11-01T12:48:22.034Z
Learning: In the `tests/fixtures/tools/automated-tools.json` file, the `language` field within the `filters` object can be either a string or an array. Both formats are acceptable and supported in the codebase.
Applied to files:
config/tools.json
📚 Learning: 2024-10-11T10:46:58.882Z
Learnt from: akshatnema
Repo: asyncapi/website PR: 3262
File: components/Avatar.tsx:35-44
Timestamp: 2024-10-11T10:46:58.882Z
Learning: In Next.js, when avoiding nested `<a>` tags due to hydration issues, use accessible non-link elements like `<button>` or `<span>` with appropriate roles, `tabIndex`, and event handlers to maintain accessibility and SEO.
Applied to files:
components/layout/CommunityLayout.tsx
📚 Learning: 2025-06-10T06:27:25.419Z
Learnt from: aminoxix
Repo: asyncapi/website PR: 4127
File: components/layout/CommunityLayout.tsx:179-179
Timestamp: 2025-06-10T06:27:25.419Z
Learning: In AsyncAPI's community data structure, ambassadors and TSC members are guaranteed to have GitHub accounts. The `github` field is required in both `Ambassador` and `Tsc` interfaces, and the data processing in `addAdditionalUserInfo()` converts GitHub usernames to full URLs, ensuring safe string operations when extracting usernames from URLs.
Applied to files:
components/layout/CommunityLayout.tsx
🔇 Additional comments (7)
config/tools.json (1)
869-872: Verify the technology label change from "Liquid" to "AsyncAPI CLI".This change replaces "Liquid" (a templating language) with "AsyncAPI CLI" in the ZenWave SDK tool entries. This appears to align these entries with the other ZenWave SDK occurrences in the file (e.g., in "Mocking and Testing" and "CLIs" sections) which already use "AsyncAPI CLI".
Please confirm this is an intentional correction to fix inconsistent labeling across ZenWave SDK entries.
Also applies to: 1559-1562
components/layout/CommunityLayout.tsx (6)
49-52: LGTM!The avatar URL construction using GitHub's redirect pattern (
username.png) is a valid approach. The guard ensuresavatarUrlis only set when the GitHub URL exists.
185-217: LGTM!The role rendering logic correctly distinguishes between maintainers (users with repos) and ambassadors (users without repos). Based on learnings, GitHub info is guaranteed for TSC members and ambassadors, so this is safe.
227-227: LGTM!The username extraction is defensive and handles edge cases well. The pattern gracefully handles undefined, empty, or malformed GitHub URLs.
329-343: LGTM!The outside-click handler is implemented correctly with proper cleanup. This addresses the accessibility concern from the previous review.
345-399: LGTM!The memoization strategy is well-implemented:
- Dependencies are correct for each
useMemohook- The search filter safely handles optional fields (
company,repos)member.nameis guaranteed to exist due to the fallback inaddAdditionalUserInfo
576-588: LGTM!The filtered rendering logic is correct. Note that the "No members found" message will appear alongside the
QuestionCard(which is always visible) when filters yield no results—this is acceptable since the message clarifies the filter state.
2 participants
Summary
This PR implements the searchable TSC members filter and searchable Maintainer repo dropdown requested in #4711.
What’s New
✔ Searchable TSC Members Filter
Users can now filter members by:
Search is:
✔ Searchable Maintainer Repo Dropdown
max-h-60) and scrollable.scrollbar-hiddenstylingUI Improvements
No Breaking Changes
This feature does not modify existing behavior for Board members or other pages.
Summary by CodeRabbit
New Features
Improvements
Chores
✏️ Tip: You can customize this high-level summary in your review settings.