8000 feat(webapp): add catalog page by kaposke · Pull Request #8201 · NangoHQ/nango · GitHub
[go: up one dir, main page]

Skip to content

feat(webapp): add catalog page - #8201

Open
kaposke wants to merge 3 commits into
gui/NAN-8078/refactor-function-panel-piecesfrom
gui/NAN-8078/feat-catalog
Open

kaposke wants to merge 3 commits into
gui/NAN-8078/refactor-function-panel-piecesfrom
gui/NAN-8078/feat-catalog

Conversation

@kaposke
@kaposke kaposke commented Nov 5, 2026 •
Copy link
Copy Markdown
Contributor

Closes NAN-8078. 4/4.

New Catalog page, replacing the "Create integration" provider list. Design: Figma and the designer handoff.

Grid (/:env/catalog)

  • Category rail, search (/ to focus), "Popular first" / "A–Z" sort, and an "Instant setup only" switch. All filters are in the URL.
  • 2 to 5 columns using the existing xl / 3xl / 4xl breakpoints, 48 cards then "Show more".
  • Cards show the logo (or initials), a configured check, an instant-setup zap and "N actions · M syncs", falling back to categories.

Detail (/:env/catalog/:provider)

  • Header with auth/instant/category tags, Docs, and one "Set up X" button.
  • Callout: managed OAuth, API key, other instant modes, or "N integrations set up in env" with "View in Integrations".
  • Actions/Syncs tabs, function search, list and side panel built on the pieces from refactor(webapp): split function panel into reusable pieces #8200. Empty states for no results and no functions. Unknown providers show the 404.

Rules (catalog.utils.ts, unit te 8000 sted)

  • Instant setup: Nango-managed OAuth, or an auth mode other than OAUTH1/OAUTH2/APP/CUSTOM (MCP OAuth with a static client excluded).
  • Popular: providers with the popular category, which is never shown as a category.

Also

  • Catalog is first in the sidebar. Every integrations/create link now points to the catalog, that route redirects, and CreateList.tsx is deleted.
  • Design system: the Instant setup callout uses Alert's cta="button" variant from feat(design-system): add button CTA variant to Alert #8203. Alert also gets icon="success" for the configured callout's green check. The tailwind-merge config now knows one-side token borders (border-l-ds-2…), which cn used to drop.
  • Analytics: new integrations:catalog_link_click and integrations:setup_button_click. integrations:filter_update gains category, instant_setup and sort filter values and an optional page.
  • The sliding panel animation moved into SlidingPanelLayout, now shared with the Functions tab.

Known gaps

  • The grid's top bar is empty (single breadcrumbs are hidden), and the detail breadcrumb shows the provider key.
  • The empty-state copy and the generic instant callout copy are placeholders to confirm with design.

Testing: /dev/catalog. Toggle the filters, reload, search, open Show more. Open a managed OAuth provider (Airtable), an API key or two-step one (3CX), one you've configured, and a function with nested fields.

🤖 Generated with Claude Code

@kaposke
kaposke added this pull request to stack #8202 November 5, 2026 22:02
@linear-code
linear-code Bot commented Nov 5, 2026
Copy link
Copy Markdown

NAN-8078

@github-actions
github-actions Bot commented Nov 5, 2026 •
Copy link
Copy Markdown
Contributor

Preview Deploys

Preview Status URL Deploy Logs Last Updated
Webapp ✅ Ready Preview URL Deploy Logs 6 Nov 2026, 17:20 UTC
Storybook ✅ Ready Preview URL Deploy Logs 6 Nov 2026, 17:20 UTC

@cubic-dev-ai cubic-dev-ai 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.

1 issue found across 30 files

Confidence score: 4/5

  • The new catalog events in packages/types/lib/analytics/catalogue.ts use provider for an integration identity, splitting the same fact across two PostHog property names. Rename it to integration in both the event schemas and emitters.
Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. When an issue isn't valid or won't be fixed in this PR, reply in its thread with the reason and then resolve the thread. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="packages/types/lib/analytics/catalogue.ts">

<violation number="1" location="packages/types/lib/analytics/catalogue.ts:351">
P2: These new catalog events use `provider` for an integration identity, creating a second PostHog taxonomy name for the same fact. Rename this property to `integration` in both new event schemas and emitters so catalog analytics remain queryable with the existing integration dimensions.</violation>
</file>

Reply with feedback, questions, or to request a fix.

View guided diff | Re-trigger cubic

8000
surface: 'web',
insight: 'Which APIs people open from the catalog, and whether Instant setup or already configured APIs draw more interest',
fires: 'When someone clicks an API card in the catalog',
properties: z.object({ provider: z.string(), is_instant_setup: z.boolean(), is_configured: z.boolean() })
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.

P2: These new catalog events use provider for an integration identity, creating a second PostHog taxonomy name for the same fact. Rename this property to integration in both new event schemas and emitters so catalog analytics remain queryable with the existing integration dimensions.

Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. When an issue isn't valid or won't be fixed in this PR, reply in its thread with the reason and then resolve the thread. At packages/types/lib/analytics/catalogue.ts, line 351:

<comment>These new catalog events use `provider` for an integration identity, creating a second PostHog taxonomy name for the same fact. Rename this property to `integration` in both new event schemas and emitters so catalog analytics remain queryable with the existing integration dimensions.</comment>

<file context>
@@ -336,9 +336,25 @@ export const analyticsEventCatalogue = defineCatalogue({
+        surface: 'web',
+        insight: 'Which APIs people open from the catalog, and whether Instant setup or already configured APIs draw more interest',
+        fires: 'When someone clicks an API card in the catalog',
+        properties: z.object({ provider: z.string(), is_instant_setup: z.boolean(), is_configured: z.boolean() })
+    },
+    'integrations:setup_button_click': {
</file context>

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

integration unfortunately doesn't describe this well. An integration is a configuration, a provider is it's listing in the catalog. I considered adding a new category of events eg. catalog:card_click, but wasn't fully convinced.

@macko911 would love your opinion.

@kaposke
kaposke requested a review from macko911 November 6, 2026 17:36
@kaposke
kaposke marked this pull request as ready for review November 6, 2026 17:54

This branch was previously deployed

1 inactive deployment
development — 09a8a500 Deployed Nov 6, 2026 by kaposke via Webapp #1744
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant

0