feat(webapp): Improve the Integrations page layout - #4379
Merged
Conversation
Rebuilds the project Integrations page with the SettingsContainer, SettingsSection and SettingsRow primitives already used by the org SSO page, so GitHub, Vercel and build settings read as one consistent list of rows instead of headings over bordered boxes. The page now titles itself "Integrations" rather than inheriting "Project settings", via a pageTitle handle that the parent settings layout reads. Also fixes a nested form in the Vercel panel. Browsers drop a nested <form> when parsing server-rendered HTML, so any project with atomic production builds and auto-assign custom domains still enabled failed hydration and re-rendered the whole document on the client. Carries temporary development-only code (devRevealIntegrations.tsx plus the devReveal props) that forces every conditionally hidden state to render at once. That must be removed before this merges.
|
Contributor
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
WalkthroughThe integrations settings page now uses shared settings layout primitives, dynamic child-route page titles, conditional GitHub and Vercel sections, and refactored build configuration controls. GitHub and Vercel panels support settings-row layouts, dialogs, alerts, and updated connection flows. New warning button and select variants, unlock styling, and Storybook examples were added. A rounded padlock icon was introduced and registered in the icon gallery. 🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
Shortens the five descriptions in the project build settings section by about 60%. Most of the cut is descriptions restating their own label: "Command to install your project dependencies" under a field called "Install command" carries no information, so only the non obvious part remains (it runs from the repo root, and we auto detect it). Also names the version requirement on the native build server row. It previously read "version 4.2.0 or newer" without saying version of what. The section sentence keeps its trailing "flag." rather than ending on the code chip, whose horizontal padding left the full stop looking detached, and the flag no longer breaks across two lines mid token.
Adds warning/small through warning/extra-large for the recovery action on a warning panel: amber text on a translucent amber fill, so the button reads as part of the warning rather than as something destructive. The solid danger variant is unchanged and stays the right choice for genuinely destructive buttons. Both are shown side by side in the buttons storybook.
… unlock control Two additions to the settings layout shared by the org SSO and project settings pages. SettingsRow gains align="end", so a row whose action belongs beside the last line of a long description can sit there instead of centring against the whole block. A CSS rule lets a disabled row highlight the control elsewhere on the page that unlocks it. The row carries .unlock-hint-<name>, the control carries data-unlock-target="<name>", and a :has() selector scoped to the surrounding form draws a dashed ring while the row is hovered. It has to be CSS rather than a sibling selector because the control sits before the hovered row in the DOM.
Rebuilds the Vercel section of the project Integrations page as settings rows, matching the GitHub section above it. The states now read as a progression: install the app, connect a project, then configure it. The "Vercel app: Installed" and "Vercel project: Connected" rows persist once each step is done, so the confirmation no longer disappears the moment you move past it. Environment variable settings become one row per environment. A disabled toggle explains why in place rather than hiding the reason in a hover tooltip, and hovering it ring-highlights the control that unlocks it. The three warning panels become rows with a hazard icon, a title, and their recovery action on the right. Copy throughout leads with the outcome instead of restating the field label. Atomic deployments now says what it buys you, that your app never runs against a mismatched task version, rather than only describing the mechanism. Still carries the temporary development-only preview states added earlier on this branch.
Every settings row carried about 4px more space above its title than below its description, despite a symmetric py-4. SettingsRowTitle renders an inline element, so inside the block-level row wrapper it sat in an anonymous line box sized by the inherited line-height (24px) rather than by its own leading-tight (17.5px). The surplus split above and below the title, but only the top half read as whitespace because the description absorbed the bottom half. Making the title block-level sizes its box to its own line-height. Applies anywhere the row is used, so the org SSO page gets the same correction as the project settings pages.
… preview DEV_REVEAL_MODE switches the development-only preview between stacking every state with a label on each, and rendering one fully connected, warning-free state per section for screenshots. Goes away with the rest of the preview before this merges.
samejr
changed the title
…gain Flips DEV_REVEAL_MODE back to "all" so every state is on screen while the modals and dialogs still need reviewing. The healthy single-state mode stays available for screenshots.
…itives It was defined inline in the Vercel resource route, but it is a general shape: hazard icon and title in the severity colour, explanation in the usual dimmed body text, recovery action on the right. It belongs next to the other row primitives so other settings pages can use it. No visual change. Callout is untouched and still the right choice outside the settings row layout.
…ry modal The account and repository dropdowns move up a size and their selected value now reads at full brightness rather than dimmed, and Cancel becomes secondary. Needed a secondary/medium select variant: both the medium size and the secondary style already existed, they just were not combined.
…odal The modal needs a Vercel org integration to produce its onboarding payload, so without one it cannot be opened at all and its layout could not be reviewed. Behind the development-only flag it now falls back to a placeholder payload. Goes away with the rest of the preview before this merges.
Connect GitHub repository: the repository filter field no longer draws a blue border and ring when focused. It is a bare input, so @tailwindcss/forms was styling its focus state and overriding the app%s own treatment. Set up Vercel Integration: the project dropdown reads at full brightness, Cancel becomes secondary, and the TRIGGER_SECRET_KEY note becomes the dropdown%s field description rather than a detached paragraph, so it sits at the same distance as every other field hint. The copy now carries the step on its own, so the redundant "Select Vercel Project" heading is gone, and it no longer promises to sync "your API keys" when what actually syncs is one key. Also brightens the Vercel logo in the install and connect buttons and in the connected-project line, where it was inheriting dimmed body colour.
The filter row padded its own left edge, and the bare input inside it also carries left padding from @tailwindcss/forms, so the placeholder sat indented past the options in the list. Dropping the row padding lets the input padding line the text up.
Deletes the development-only preview that forced every conditionally hidden state on the project Integrations page to render at once, along with the placeholder data and the devReveal props that drove it. The real conditions are restored: the GitHub panel returns null when the app is not configured, and the Vercel section only renders where the integration is supported. Also drops the explanatory comments added while iterating on the layout.
samejr
marked this pull request as ready for review
July 26, 2026 20:33
|
Preview Deployment
|
With the Preview environment gated by plan there is no toggle to submit, so saving Git settings sent no previewDeploymentsEnabled value and the schema transformed the absence into false, silently clearing a setting the user could not see. A hidden input now carries the persisted value through the save. Pre-existing: the toggle it replaced was rendered unchecked and disabled when gated, so it submitted nothing either.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
Every other action in the Vercel settings form disables itself and explains why when the role cannot manage the integration. This button did not, so it looked clickable to a viewer even though the action rejects them.
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
The deployments blank state wrapped GitHubSettingsPanel in a shrink-to-fit container. That suited the button-only prompt, but the connected repository view now renders full-width settings rows, and the wrapper held them to 567px of the 655px the step provides. Nothing overflowed, so this is a refinement rather than a broken layout. The prompt state is unaffected: the button keeps its natural size and only the hint wraps later.
samejr
force-pushed
the
samejr/Settings-page-layouts
branch
from
July 27, 2026 11:04
dc47899 to
e8d4447
Compare
matt-aitken
approved these changes
Jul 27, 2026
@trigger.dev/build
trigger.dev
@trigger.dev/core
@trigger.dev/python
@trigger.dev/react-hooks
@trigger.dev/redis-worker
@trigger.dev/rsc
@trigger.dev/schema-to-json
@trigger.dev/sdk
commit: |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
The project Integrations page now uses the same settings layout as the org SSO page: a centered column of titled rows with dividers, instead of headings over bordered boxes. GitHub, Vercel and build settings read as one consistent list, and the page titles itself "Integrations".
Confirmations persist rather than vanishing once you move past them (
GitHub app: Installed,Vercel project: Connected), plan-gated rows offer an Upgrade button instead of a dead toggle, a disabled toggle explains why in place and highlights the control that unlocks it, and warnings are rows with a hazard icon and their recovery action on the right. Copy throughout leads with the outcome instead of restating the field label.Two fixes along the way: a nested
<form>in the Vercel panel that failed hydration and silently truncated the page, and every settings row carrying a few pixels more space above its title than below its description.Before
After