feat(webapp): combine integrations list with provider catalog#5713
feat(webapp): combine integrations list with provider catalog#5713rubychilds wants to merge 3 commits intoNangoHQ:masterfrom
Conversation
Replace the separate "connected integrations" and "set up new integration" pages with a single unified view. The integrations page now shows All, Connected, and Not Connected filter tabs so users can browse all available providers and see which ones are already set up without navigating to a separate page. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
![propel-code-bot[bot]](https://avatars.githubusercontent.com/in/1179004?s=60&v=4){kind=small}
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
There was a problem hiding this comment.
Two important issues found around search coverage and provider error handling that may regress UX.
Status: Changes Suggested | Risk: Medium
Issues Identified & Suggestions
- Expand search keys to include integration identifiers and names:
packages/webapp/src/pages/Integrations/Show.tsx - Surface provider loading errors alongside integrations errors:
packages/webapp/src/pages/Integrations/Show.tsx
Review Details
📁 1 files reviewed | 💬 2 comments
Instruction Files
└── .claude/
├── agents/
│ └── nango-docs-migrator.md
└── skills
👍 / 👎 individual comments to help improve reviews for you
| { name: 'provider.displayName', weight: 0.3 }, | ||
| { name: 'provider.name', weight: 0.3 }, | ||
| { name: 'provider.authMode', weight: 0.2 }, | ||
| { name: 'provider.categories', weight: 0.2 } |
There was a problem hiding this comment.
[Logic] Search regression in the unified list: the Fuse.js keys only include provider fields, so searching by integration ID (integration.unique_key) or a custom integration display name won't match in the Connected tab. That breaks the prior behavior where users could search by integration ID.
Fix: include integration fields in the Fuse.js keys array (at least integration.unique_key and integration.display_name/integration.meta.displayName, plus integration.meta.authMode if needed). Fuse.js supports nested field searching via dot notation.
Context for Agents
Search regression in the unified list: the Fuse.js keys only include provider fields, so searching by integration ID (`integration.unique_key`) or a custom integration display name won't match in the Connected tab. That breaks the prior behavior where users could search by integration ID.
Fix: include integration fields in the Fuse.js keys array (at least `integration.unique_key` and `integration.display_name`/`integration.meta.displayName`, plus `integration.meta.authMode` if needed). Fuse.js supports nested field searching via dot notation.
File: packages/webapp/src/pages/Integrations/Show.tsx
Line: 76| return data?.data ?? null; | ||
| }, [data?.data]); | ||
| const { data: integrationsData, isPending: integrationsPending, error } = useListIntegrations(env); | ||
| const { data: providersData, isLoading: providersPending } = useProviders(env); |
There was a problem hiding this comment.
[Reliability] The providers request error is not handled. If useProviders fails while integrations load succeeds, the UI falls back to an empty list and shows “No integrations available,” masking the actual error.
Fix: destructure error from useProviders and surface it the same way as the integrations error (e.g., render ErrorPageComponent when either request fails).
Context for Agents
The providers request error is not handled. If `useProviders` fails while integrations load succeeds, the UI falls back to an empty list and shows “No integrations available,” masking the actual error.
Fix: destructure `error` from `useProviders` and surface it the same way as the integrations error (e.g., render `ErrorPageComponent` when either request fails).
File: packages/webapp/src/pages/Integrations/Show.tsx
Line: 34There was a problem hiding this comment.
One important correctness issue was found in integration mapping that may omit items.
Status: Changes Suggested | Risk: Medium
Issues Identified & Suggestions
- Connected tab may drop multiple integrations; include all entries:
packages/webapp/src/pages/Integrations/Show.tsx
Review Details
📁 1 files reviewed | 💬 1 comments
Instruction Files
└── .claude/
├── agents/
│ └── nango-docs-migrator.md
└── skills
👍 / 👎 individual comments to help improve reviews for you
| const allItems = useMemo(() => { | ||
| return providers.map((provider) => ({ | ||
| provider, | ||
| integration: integrations.find((i) => i.provider === provider.name) ?? null, |
There was a problem hiding this comment.
[Logic] Correctness: integrations.find(...) only selects a single integration per provider. If there are multiple integrations for the same provider (e.g., multiple configs), the Connected tab will drop all but the first and the table will be incomplete. Consider building allItems from the integrations list (or using flatMap to include all integrations for a provider) so each integration is represented.
Context for Agents
Correctness: `integrations.find(...)` only selects a single integration per provider. If there are multiple integrations for the same provider (e.g., multiple configs), the Connected tab will drop all but the first and the table will be incomplete. Consider building `allItems` from the integrations list (or using `flatMap` to include all integrations for a provider) so each integration is represented.
File: packages/webapp/src/pages/Integrations/Show.tsx
Line: 501 participant
Summary
Why?
Test plan
/integrationsand verify all three filter tabs (All, Connected, Not Connected) are visibleIt also consolidates providers and integrations into a merged dataset for the unified view, with virtualized rendering to handle larger provider lists efficiently.
This summary was automatically generated by @propel-code-bot