feat(webapp): redesign integrations page#5176
Conversation
🤖 My Senior Dev — Analysis Complete👤 For @kaposke📁 Expert in View your contributor analytics → 📊 50 files reviewed • 7 high risk • 11 need attention 🚨 High Risk:
🚀 Open Interactive Review →The full interface unlocks features not available in GitHub:
💬 Chat here: 📖 View all 12 personas & slash commandsYou can interact with me by mentioning In PR comments or on any line of code:
Slash commands:
AI Personas (mention to get their perspective):
For the best experience, view this PR on myseniordev.com — includes AI chat, file annotations, and interactive reviews. |
5a40f7f to
a3d6fe2
Compare
There was a problem hiding this comment.
Had to make things optional because we now do per-field saves. Not a single form for these anymore. Curious if there's any unforeseen consequence.
There was a problem hiding this comment.
can a partial but invalid state be processed and stored successfully?
There was a problem hiding this comment.
Hmm not sure I got what you mean
There was a problem hiding this comment.
Technically for a PATCH endpoint that's fine to only send partial updates.
| onFunctionClick?: (func: NangoSyncConfig) => void; | ||
| integration: ApiIntegration; | ||
| }> = ({ groupedFunctions, onFunctionClick, integration }) => { | ||
| return ( |
There was a problem hiding this comment.
the hover and group header background color seems to be the same. Making it hard to differentiate when hovering with the mouse
There was a problem hiding this comment.
good catch, it had the wrong hover color
|
|
||
| return ( | ||
| <div className="flex flex-col gap-1.5"> | ||
| {Object.entries(schema.properties || {}).map(([name, property]) => ( |
There was a problem hiding this comment.
should we only show the N first top level properties in case a schema has tons of them?
There was a problem hiding this comment.
Sure. I'm curious to see a case where it gets crazy enough though
There was a problem hiding this comment.
I'd say it looks Ok until level 7 (this is in it's minimum width). I'll cap it there.
There was a problem hiding this comment.
I'll cap it at 3-4. I feel like everything more complicated isn't going to be read in the browser anyway
| if (body.appLink !== undefined) { | ||
| integration.app_link = body.appLink; | ||
| } | ||
| if (body.appId !== undefined || body.privateKey !== undefined) { |
There was a problem hiding this comment.
why the if combine with the spread operator below with the same condition
|
Food for thought: If the action output only has 1 schema, would it make sense to just hide that schema name at the top? Otherwise it looks out-of-place and it's not clear what it means. If there were 2, then clicking between them would make it clear what they are. |
|
It's hard to show on video, but when I click the "Enabled" toggle on the actions page, turning on shows a spinner indicating it is loading, but turning off doesn't have any feedback that stuff is happening in the background and it the toggle does turn off after a moment, but it feels a bit more as if the UI was "frozen". Should we add a spinner to both transitions while the request is in-flight? |
marcindobry
left a comment
There was a problem hiding this comment.
Pretty sure I missed some things but hopefully nothing major 🙈
Huge redesign of the integrations page. This includes:
Video walkthrough:
https://www.loom.com/share/d84c46fb8f6742a1b159d4688ffe5bf5
It's a lot of code so I expect to have a few very visible mistakes, or duplicated code here and there. Don't hesitate to point anything out.
The functions tab now groups entries with inline enable/disable confirmations and deep links into a dedicated detail view that renders expandable JSON schemas for inputs and outputs, while the settings tab uses reusable inline editors with per-field confirmation flows to update each authentication mode in place.
Affected Areas
• packages/webapp/src/pages/Integrations/providerConfigKey
• packages/webapp/src/components-v2
• packages/server/lib/controllers/v1/integrations/providerConfigKey/patchIntegration.ts
• packages/server/lib/routes.private.ts
• packages/types/lib/integration/api.ts
• packages/webapp/src/index.css
• packages/webapp/package.json
This summary was automatically generated by @propel-code-bot