feat(webapp): connection list view refresh#5806
Conversation
![propel-code-bot[bot]](https://avatars.githubusercontent.com/in/1179004?s=60&v=4){kind=small}
There was a problem hiding this comment.
Changes suggested: key filtering and token issues could cause incorrect results and inconsistent UI styling.
Status: Changes Suggested | Risk: Medium
Issues Identified & Suggestions
- Client-side status filters run post-pagination; can hide valid results.
packages/webapp/src/pages/Connection/List.tsx - Add server support or clear UX messaging for partial filter results.
packages/webapp/src/pages/Connection/List.tsx - Neutral light-mode CSS tokens use invalid namespace; may render incorrectly.
packages/webapp/src/index.css - Replace conflicting selected text classes to avoid unintended dim styling.
packages/webapp/src/components-v2/MultiSelect.tsx
Review Details
📁 6 files reviewed | 💬 3 comments
Instruction Files
└── .claude/
├── agents/
│ └── nango-docs-migrator.md
└── skills
👍 / 👎 individual comments to help improve reviews for you
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 5e005180f4
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 807ed53061
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
Refresh the connections list UI with improved filtering and status indicators. - Replace MultiSelect with new Combobox component (single + multi-select) - Add granular Status filter: OK, Error, Auth error, Sync error, Paused syncs - Status filter persisted in URL query params - Show hasPausedSyncs indicator per connection row - Integration filter now shows logos and "Add integration" footer CTA - Rename StatusCircleWithIcon → StatusWithIcon with redesigned style - Add neutral feedback color CSS variables - Fix MultiSelect: strict equality, remove duplicate check icon
agusayerza
force-pushed
the
agus/NAN-5076/connection-list-refresh-fe
branch
from
64de12c to
cf77eae
Compare
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: cf77eaeeb9
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
| label: integration.display_name || integration.unique_key, | ||
| value: integration.unique_key, | ||
| icon: <IntegrationLogo provider={integration.provider} className="size-7 rounded-[3.7px] p-[3.48px] bg-transparent border-transparent" /> |
There was a problem hiding this comment.
The integration filter now displays display_name but does not set filterValue, and Combobox search matches filterValue ?? label. As a result, searching by an integration unique_key (the value users often copy from config/URLs) no longer returns matches when the display name differs, which is a regression from the previous implementation that searched by key. Add a filterValue that includes unique_key (and optionally provider) so key-based lookups continue to work.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 4d1f879f48
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
| footer={ | ||
| <div className="flex items-center justify-between gap-3"> | ||
| <span className="flex items-center justify-center gap-2 text-text-tertiary text-body-small-regular"> | ||
| Need a new integration? |
There was a problem hiding this comment.
This footer introduces an “Add integration” action, but the multi-select trigger is disabled whenever options.length === 0 in components-v2/ui/combobox.tsx, so the menu (and this CTA) cannot be opened in the exact state where no integrations are returned. That makes the new recovery path unavailable for empty integration lists and leaves users stuck until they navigate elsewhere.
Useful? React with 👍 / 👎.
1 participant
Refresh the connections list UI with improved filtering and status indicators
https://www.figma.com/design/2MyZwo8A4D2XRIOhXL3cZ8/CURRENT-%F0%9F%90%BA-Design-Sytem---Product?node-id=9094-77970&m=dev
Loom demo
Requires #5699 to be merged
NAN-5076
This update also standardizes filtering behavior by combining URL-backed status state with frontend status composition logic layered on top of existing backend error filtering, while introducing reusable UI building blocks intended to support richer filter hierarchies and status rendering patterns across the app.
This summary was automatically generated by @propel-code-bot