Add sorting feature to Bundles table in Gate22

[Sidhi-03]

🏷️ Ticket

#145

🔗 Link to Issue

• MCP Bundles: add sorting in bundles table #145

📝 Description
Added sorting functionality to the MCP Bundles listing table to enable users to quickly find bundles by:

• Bundle Name - Sort alphabetically (A-Z or Z-A)
• Configuration Count - Sort by number of configurations in each bundle
• Creation Date - Sort by when the bundle was created (newest or oldest first)
• Each sortable column now displays an ArrowUpDown icon in the header that users can click to toggle between ascending/descending sort order.

Changes Made
File: frontend/src/app/(dashboard)/bundle-mcp/page.tsx

• Updated NAME column header to include clickable button with sort toggle
• Updated CONFIGURATIONS column header to include clickable button with custom sort function that counts array length
• CREATED column already had sort support (verified and working)
• Applied Prettier formatting to all files

Checklist

✅ I have signed the Contributor License Agreement (CLA) and read the contributing guide (required)
✅ I have linked this PR to an issue or a ticket (required)
✅ I have updated the documentation related to my change if needed
✅ I have updated the tests accordingly (required for a bug fix or a new feature)

All checks on CI passed
✅ ESLint: No warnings or errors
✅ Prettier: All files formatted
✅ Build: Compiled successfully

---

Summary by cubic

Added sorting to the MCP Bundles table so users can quickly find bundles by name, configuration count, and created date. Addresses #145.

• New Features
  • Clickable header toggles with ArrowUpDown icon on NAME and CONFIGURATIONS.
  • Custom sort for CONFIGURATIONS by number of configurations.
  • CREATED date sorting verified and unchanged.

^{Written for commit 15f0ca1. Summary will update automatically on new commits.}

Summary by CodeRabbit

• New Features
  • Column headers are now interactive—click to sort the table
  • Added visual sort direction indicators (arrow icons) to column headers
  • Configurations column sorts by the number of items in each bundle

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[vercel]

@Sidhi-03 is attempting to deploy a commit to the Proxy Team on Vercel.

A member of the Team first needs to authorize it.

[greptile-apps]

Your free trial has ended. If you'd like to continue receiving code reviews, you can add a payment method here.

[coderabbitai]

Walkthrough

The change modifies the MCPServerBundle table in the bundle-mcp dashboard page by converting static header strings to interactive React components that render clickable buttons with sorting icons (ArrowUpDown), enabling users to toggle column sorting. A custom sorting function is added for the configurations column to sort by array length.

Changes

Cohort / File(s)	Summary
Interactive Table Headers & Sorting frontend/src/app/(dashboard)/bundle-mcp/page.tsx	Replaced static header strings ("NAME", "CONFIGURATIONS") with functional React components rendering buttons with ArrowUpDown icons that toggle sorting on click. Added custom sortingFn for the configurations column to sort by the length of the mcp_server_configurations array.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Single file modification with straightforward UI component substitutions
• Logic density is low; primarily a swap of static strings to interactive button components
• One custom sorting function added following a clear pattern
• No complex control flow or structural changes introduced

Possibly related issues

• MCP Bundles: add sorting in bundles table #145 — Directly related; both PRs modify the bundle-mcp table with interactive sortable headers and sorting functions for the bundles table UI.

Poem

🐰 Headers now dance with arrows so bright,
Sorting by columns—pure delight!
Config arrays counted with gleeful care,
Clickable buttons float in the air. ✨

Pre-merge checks and finishing touches

❌ 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%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Add sorting feature to Bundles table in Gate22' directly matches the main objective of the PR, which adds sorting functionality to the MCP Bundles table.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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

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

[cubic-dev-ai]

No issues found across 1 file

[coderabbitai]

Actionable comments posted: 1

♻️ Duplicate comments (1)

frontend/src/app/(dashboard)/bundle-mcp/page.tsx (1)

169-177: Apply the same accessibility improvements here.

This sort button has the same accessibility and UX concerns as the NAME column header. Please apply the same ARIA attributes and consider dynamic sort icons.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d059fe6 and 15f0ca1.

📒 Files selected for processing (1)

• frontend/src/app/(dashboard)/bundle-mcp/page.tsx (3 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

• GitHub Check: cubic · AI code reviewer
• GitHub Check: Format & Lint
• GitHub Check: Compose Tests

🔇 Additional comments (1)

frontend/src/app/(dashboard)/bundle-mcp/page.tsx (1)

188-192: LGTM! Well-implemented custom sorting function.

The custom sortingFn correctly sorts by array length with proper null-safety handling using optional chaining and fallback values.

[Sidhi-03]

@coderabbitai generate docstrings

[coderabbitai]

✅ Actions performed

Initiated docstring generation; will generate only if new commits exist.

[coderabbitai]

Note

Docstrings generation - SUCCESS
Generated docstrings for this pull request at #177

[Sidhi-03]

@ObnoxiousProxy Could you please review this PR