Skip to content

feat: improve TSC page design to display all repos maintained by an individual for better visibility and transparency#5606

Open
princerajpoot20 wants to merge 8 commits into
asyncapi:masterfrom
princerajpoot20:tsc-improvement
Open

feat: improve TSC page design to display all repos maintained by an individual for better visibility and transparency#5606
princerajpoot20 wants to merge 8 commits into
asyncapi:masterfrom
princerajpoot20:tsc-improvement

Conversation

@princerajpoot20

@princerajpoot20 princerajpoot20 commented Jun 30, 2026

Copy link
Copy Markdown
Member

Resolves #5551

Evidence

Screen.Recording.2026-07-01.at.10.55.45.PM.mov

Summary by CodeRabbit

  • New Features
    • Added an “Ambassador” badge for eligible members, linking to their ambassador profile.
    • Made member repositories interactive with expandable/collapsible sections and clickable repo pills.
    • Added an “Ambassador” filter to show only ambassador members.
  • UI Improvements
    • Refreshed social icons and improved expand/collapse controls (“+N” and “Show less”).
  • Bug Fixes
    • Ensured repo pills navigate directly to the correct GitHub repositories.
  • Tests
    • Added end-to-end coverage for repo expand/collapse, ambassador badges, and ambassador filtering.

@netlify

netlify Bot commented Jun 30, 2026

Copy link
Copy Markdown

Deploy Preview for asyncapi-website ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit 5e0a271
🔍 Latest deploy log https://app.netlify.com/projects/asyncapi-website/deploys/6a454af81067e60008354006
😎 Deploy Preview https://deploy-preview-5606--asyncapi-website.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@github-project-automation github-project-automation Bot moved this to To Be Triaged in Website - Kanban Jun 30, 2026
@coderabbitai

coderabbitai Bot commented Jun 30, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review
📝 Walkthrough

Walkthrough

Adds clickable repo pills with expand/collapse, an ambassador badge and filter on the TSC page, updates pagination chevron usage, and adds Cypress coverage for the new interactions.

Changes

TSC Ambassador Filter and Repo Expand/Collapse

Layer / File(s) Summary
New chevron icon components
components/icons/ChevronDown.tsx, components/icons/ChevronUp.tsx
Adds shared SVG chevron icon components for down and up states.
TSCMemberCard: ambassador badge, repo links, expand/collapse
components/community/TSCMemberCard.tsx
Adds isAmbassador, renders an ambassador badge link when true, changes repo display to clickable GitHub pills with expand/collapse state, and switches social links to imported icon components.
TSC page: ambassador filter and isAmbassador prop
pages/community/tsc.tsx
Loads ambassador data, derives ambassador handles, adds an Ambassador filter option, updates filtering logic, and passes isAmbassador into TSCMemberCard.
Pagination dropdown chevron
components/Pagination.tsx
Replaces the inline dropdown chevron with the shared down-chevron icon while keeping the existing rotation behavior.
Cypress page object and specs for new behaviors
cypress/pages/tscpage.js, cypress/tscpage.cy.js
Adds helpers for repo pill link checks, expand/collapse, ambassador badge checks, and filter actions, plus specs for repo links, expand/collapse, ambassador badges, and ambassador filtering.

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

Possibly related PRs

  • asyncapi/website#5063: Adds adjacent TSC/ambassador end-to-end coverage that exercises the same page and interaction surface.

Suggested labels: gsoc

Suggested reviewers: derberg, akshatnema, sambhavgupta0705, Mayaleeeee, anshgoyalevil

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Out of Scope Changes check ⚠️ Warning Ambassador badges/filters and the Pagination chevron refactor are unrelated to #5551. Split the ambassador and Pagination changes into separate PRs, or remove them from this change set.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly summarizes the main TSC repo visibility change and clickable repository behavior.
Linked Issues check ✅ Passed The repo pills are clickable and the + control expands to the full repo list, matching #5551.
Docstring Coverage ✅ Passed Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

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

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

@asyncapi-bot

asyncapi-bot commented Jun 30, 2026

Copy link
Copy Markdown
Contributor

⚡️ Lighthouse report for the changes in this PR:

Category Score
🔴 Performance 41
🟢 Accessibility 98
🟢 Best practices 92
🟢 SEO 100
🔴 PWA 33

Lighthouse ran on https://deploy-preview-5606--asyncapi-website.netlify.app/

@codecov

codecov Bot commented Jun 30, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (b527970) to head (5e0a271).

Additional details and impacted files
@@            Coverage Diff            @@
##            master     #5606   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           23        23           
  Lines          931       931           
  Branches       180       180           
=========================================
  Hits           931       931           

☔ View full report in Codecov by Harness.
📢 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.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

🧹 Nitpick comments (1)
components/community/TSCMemberCard.tsx (1)

84-103: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Add aria-expanded to the repo expand/collapse controls.

The expand (+N) and "Show less" buttons toggle visible content but expose no state to assistive tech. Adding aria-expanded improves screen-reader usability.

♿ Suggested change
               <button
                 onClick={() => setShowAllRepos(true)}
                 data-testid='repo-expand-button'
+                aria-expanded={false}
                 className='inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 cursor-pointer transition-colors'
               >
                 +{hiddenCount}
                 <IconChevronDown className='w-3 h-3' />
               </button>
               <button
                 onClick={() => setShowAllRepos(false)}
                 data-testid='repo-collapse-button'
+                aria-expanded={true}
                 className='inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 cursor-pointer transition-colors'
               >
                 Show less
                 <IconChevronUp className='w-3 h-3' />
               </button>
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@components/community/TSCMemberCard.tsx` around lines 84 - 103, The repo
toggle controls in TSCMemberCard currently change the visible repos without
exposing their open/closed state to assistive tech. Update both buttons in the
showAllRepos / hiddenCount branches to include aria-expanded, using the current
showAllRepos state so the +N expand control and the Show less collapse control
each announce their expanded state correctly.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@cypress/pages/tscpage.js`:
- Around line 50-65: The `expandRepos` helper in `TSCPage` leaves the member
search field populated, which can leak filtered state into later tests. Update
`expandRepos` to clean up after itself by clearing the search input once the
repo expand action is complete, or make the surrounding Cypress flow
self-contained by resetting the search in test setup/teardown; keep
`collapseRepos` working by ensuring the member card remains discoverable after
`expandRepos` is used.

In `@cypress/tscpage.cy.js`:
- Around line 87-98: The expandRepos spec leaves the TSC page search filter
active after expanding “Aishat Muibudeen,” which can leak state into later
tests. Update the test in cypress/tscpage.cy.js to clear the search input after
the assertions, using the same search field selector already used elsewhere.
Keep the fix localized to the expand spec and rely on tscPage.expandRepos plus
the existing h3/repo-pill checks.

In `@pages/community/tsc.tsx`:
- Line 18: The ambassador GitHub matching in tsc.tsx is case-sensitive, so users
can be missed when the handles differ only by letter casing. Normalize the
values when building ambassadorGitHubHandles from ambassadorsList and when
checking member.github in both the filter and the isAmbassador prop so
comparisons use the same case-insensitive form. Update the lookups around
ambassadorGitHubHandles, the member filter, and the isAmbassador usage to
consistently compare normalized GitHub usernames.

---

Nitpick comments:
In `@components/community/TSCMemberCard.tsx`:
- Around line 84-103: The repo toggle controls in TSCMemberCard currently change
the visible repos without exposing their open/closed state to assistive tech.
Update both buttons in the showAllRepos / hiddenCount branches to include
aria-expanded, using the current showAllRepos state so the +N expand control and
the Show less collapse control each announce their expanded state correctly.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 84b982ed-162b-4b89-9379-5421db98e961

📥 Commits

Reviewing files that changed from the base of the PR and between 3da826f and 3397496.

📒 Files selected for processing (6)
  • components/community/TSCMemberCard.tsx
  • components/icons/ChevronDown.tsx
  • components/icons/ChevronUp.tsx
  • cypress/pages/tscpage.js
  • cypress/tscpage.cy.js
  • pages/community/tsc.tsx

Comment thread cypress/pages/tscpage.js
Comment thread cypress/tscpage.cy.js
Comment thread pages/community/tsc.tsx Outdated
@sonarqubecloud

sonarqubecloud Bot commented Jul 1, 2026

Copy link
Copy Markdown

@Mayaleeeee Mayaleeeee left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @princerajpoot20 thanks for working on this. I love the idea.

Here is my review:

  • Make the + button active when the user hovers over and clicks on it. - as well as the show less
    button too.
Image
  • Instead of a long list, let's use a dropdown here. The goal of the redesign is to show less information upfront and streamline user navigation.
Image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: To Be Triaged

Development

Successfully merging this pull request may close these issues.

Improve TSC page design to display all repos maintained by an individual for better visibility and transparency

3 participants