feat(webapp): Improve the Integrations page layout#4379
Draft
samejr wants to merge 1 commit into
Draft
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
WalkthroughThe changes refactor project integration settings around shared settings-layout components, add dynamic child-route page titles, and introduce development-only preview data for GitHub and Vercel states. GitHub and Vercel panels gain additional rendering modes and reorganized connection, configuration, disconnect, and save controls. A rounded padlock SVG icon is added and registered in the Storybook icon gallery. 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 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}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 5
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro Plus
Run ID: a96e13b0-de76-4f74-8896-e10a7fc39fbe
📒 Files selected for processing (7)
apps/webapp/app/assets/icons/PadlockRoundedIcon.tsxapps/webapp/app/components/integrations/devRevealIntegrations.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings.integrations/route.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings/route.tsxapps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.github.tsxapps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.vercel.tsxapps/webapp/app/routes/storybook.icons/route.tsx
📜 Review details
⏰ Context from checks skipped due to timeout. (17)
- GitHub Check: webapp / 🧪 Unit Tests: Webapp (8, 12)
- GitHub Check: webapp / 🧪 Unit Tests: Webapp (7, 12)
- GitHub Check: webapp / 🧪 Unit Tests: Webapp (12, 12)
- GitHub Check: webapp / 🧪 Unit Tests: Webapp (3, 12)
- GitHub Check: webapp / 🧪 Unit Tests: Webapp (11, 12)
- GitHub Check: webapp / 🧪 Unit Tests: Webapp (1, 12)
- GitHub Check: webapp / 🧪 Unit Tests: Webapp (2, 12)
- GitHub Check: webapp / 🧪 Unit Tests: Webapp (10, 12)
- GitHub Check: webapp / 🧪 Unit Tests: Webapp (4, 12)
- GitHub Check: webapp / 🧪 Unit Tests: Webapp (9, 12)
- GitHub Check: webapp / 🧪 Unit Tests: Webapp (5, 12)
- GitHub Check: webapp / 🧪 Unit Tests: Webapp (6, 12)
- GitHub Check: e2e-webapp / 🧪 E2E Tests: Webapp
- GitHub Check: runops-guard / runops-guard
- GitHub Check: typecheck / typecheck
- GitHub Check: code-quality / code-quality
- GitHub Check: Analyze (javascript-typescript)
🧰 Additional context used
📓 Path-based instructions (6)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{ts,tsx}: Use types over interfaces for TypeScript
Avoid using enums; prefer string unions or const objects instead
**/*.{ts,tsx}: Prefer static imports over dynamicimport(); use dynamic imports only for unresolvable circular dependencies, genuine performance code splitting, or conditional runtime loading.
Import Trigger.dev tasks from@trigger.dev/sdk; never use@trigger.dev/sdk/v3or deprecatedclient.defineJob.
Add agentcrumbs while writing code using approved namespaces; mark lines with//@Crumbsor blocks with `// `#region` `@crumbs, and strip them before merging.
Files:
apps/webapp/app/routes/storybook.icons/route.tsxapps/webapp/app/assets/icons/PadlockRoundedIcon.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings/route.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings.integrations/route.tsxapps/webapp/app/components/integrations/devRevealIntegrations.tsxapps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.vercel.tsxapps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.github.tsx
{packages/core,apps/webapp}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use zod for validation in packages/core and apps/webapp
Files:
apps/webapp/app/routes/storybook.icons/route.tsxapps/webapp/app/assets/icons/PadlockRoundedIcon.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings/route.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings.integrations/route.tsxapps/webapp/app/components/integrations/devRevealIntegrations.tsxapps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.vercel.tsxapps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.github.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use function declarations instead of default exports
Files:
apps/webapp/app/routes/storybook.icons/route.tsxapps/webapp/app/assets/icons/PadlockRoundedIcon.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings/route.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings.integrations/route.tsxapps/webapp/app/components/integrations/devRevealIntegrations.tsxapps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.vercel.tsxapps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.github.tsx
apps/webapp/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/webapp.mdc)
apps/webapp/**/*.{ts,tsx}: Access environment variables through theenvexport ofenv.server.tsinstead of directly accessingprocess.env
Use subpath exports from@trigger.dev/corepackage instead of importing from the root@trigger.dev/corepathDo not reintroduce the removed v1 execution path;
RunEngineVersion.V1branches may only reject or finalize gracefully so v3 clients receive a clean 4xx, never a 5xx.
Files:
apps/webapp/app/routes/storybook.icons/route.tsxapps/webapp/app/assets/icons/PadlockRoundedIcon.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings/route.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings.integrations/route.tsxapps/webapp/app/components/integrations/devRevealIntegrations.tsxapps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.vercel.tsxapps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.github.tsx
apps/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
For apps, use
typecheckfor verification and never usebuildas the correctness check.
Files:
apps/webapp/app/routes/storybook.icons/route.tsxapps/webapp/app/assets/icons/PadlockRoundedIcon.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings/route.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings.integrations/route.tsxapps/webapp/app/components/integrations/devRevealIntegrations.tsxapps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.vercel.tsxapps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.github.tsx
apps/webapp/app/**/*.{ts,tsx}
📄 CodeRabbit inference engine (apps/webapp/CLAUDE.md)
apps/webapp/app/**/*.{ts,tsx}: For dashboard changes, visually verify the running Remix app with Chrome DevTools MCP, using snapshots, screenshots, interaction, and console-message checks as appropriate.
UseuseCallbackanduseMemoonly for context provider values, expensive derived data used as a dependency, or stable references required by dependency arrays; do not wrap ordinary event handlers or trivial computations.
Use named constants for sentinel or placeholder values instead of scattering raw string literals across comparisons.
Files:
apps/webapp/app/routes/storybook.icons/route.tsxapps/webapp/app/assets/icons/PadlockRoundedIcon.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings/route.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings.integrations/route.tsxapps/webapp/app/components/integrations/devRevealIntegrations.tsxapps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.vercel.tsxapps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.github.tsx
🧠 Learnings (20)
📚 Learning: 2026-02-03T18:27:40.429Z
Learnt from: 0ski
Repo: triggerdotdev/trigger.dev PR: 2994
File: apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.environment-variables/route.tsx:553-555
Timestamp: 2026-02-03T18:27:40.429Z
Learning: In apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.environment-variables/route.tsx, the menu buttons (e.g., Edit with PencilSquareIcon) in the TableCellMenu are intentionally icon-only with no text labels as a compact UI pattern. This is a deliberate design choice for this route; preserve the icon-only behavior for consistency in this file.
Applied to files:
apps/webapp/app/routes/storybook.icons/route.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings/route.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings.integrations/route.tsxapps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.vercel.tsxapps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.github.tsx
📚 Learning: 2026-07-22T11:16:06.546Z
Learnt from: samejr
Repo: triggerdotdev/trigger.dev PR: 4332
File: apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.regions/route.tsx:166-168
Timestamp: 2026-07-22T11:16:06.546Z
Learning: In the Trigger.dev web app, copy-interaction accessibility (keyboard and touch behavior for the copy affordance) is owned by the shared `CopyableText` `icon-right` primitive. When reviewing route-level code (e.g., admin debug panels and runs tables) that intentionally reuses this pattern, avoid suggesting divergent call-site-only accessibility fixes; instead, route any accessibility changes back to a holistic update of the `CopyableText` `icon-right` implementation so all reuse sites benefit consistently.
Applied to files:
apps/webapp/app/routes/storybook.icons/route.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings/route.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings.integrations/route.tsxapps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.vercel.tsxapps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.github.tsx
📚 Learning: 2026-02-11T16:37:32.429Z
Learnt from: matt-aitken
Repo: triggerdotdev/trigger.dev PR: 3019
File: apps/webapp/app/components/primitives/charts/Card.tsx:26-30
Timestamp: 2026-02-11T16:37:32.429Z
Learning: In projects using react-grid-layout, avoid relying on drag-handle class to imply draggability. Ensure drag-handle elements only affect dragging when the parent grid item is configured draggable in the layout; conditionally apply cursor styles based on the draggable prop. This improves correctness and accessibility.
Applied to files:
apps/webapp/app/routes/storybook.icons/route.tsxapps/webapp/app/assets/icons/PadlockRoundedIcon.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings/route.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings.integrations/route.tsxapps/webapp/app/components/integrations/devRevealIntegrations.tsxapps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.vercel.tsxapps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.github.tsx
📚 Learning: 2026-03-22T13:26:12.060Z
Learnt from: ericallam
Repo: triggerdotdev/trigger.dev PR: 3244
File: apps/webapp/app/components/code/TextEditor.tsx:81-86
Timestamp: 2026-03-22T13:26:12.060Z
Learning: In the triggerdotdev/trigger.dev codebase, do not flag `navigator.clipboard.writeText(...)` calls for `missing-await`/`unhandled-promise` issues. These clipboard writes are intentionally invoked without `await` and without `catch` handlers across the project; keep that behavior consistent when reviewing TypeScript/TSX files (e.g., usages like in `apps/webapp/app/components/code/TextEditor.tsx`).
Applied to files:
apps/webapp/app/routes/storybook.icons/route.tsxapps/webapp/app/assets/icons/PadlockRoundedIcon.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings/route.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings.integrations/route.tsxapps/webapp/app/components/integrations/devRevealIntegrations.tsxapps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.vercel.tsxapps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.github.tsx
📚 Learning: 2026-03-22T19:24:14.403Z
Learnt from: matt-aitken
Repo: triggerdotdev/trigger.dev PR: 3187
File: apps/webapp/app/v3/services/alerts/deliverErrorGroupAlert.server.ts:200-204
Timestamp: 2026-03-22T19:24:14.403Z
Learning: In the triggerdotdev/trigger.dev codebase, webhook URLs are not expected to contain embedded credentials/secrets (e.g., fields like `ProjectAlertWebhookProperties` should only hold credential-free webhook endpoints). During code review, if you see logging or inclusion of raw webhook URLs in error messages, do not automatically treat it as a credential-leak/secrets-in-logs issue by default—first verify the URL does not contain embedded credentials (for example, no username/password in the URL, no obvious secret/token query params or fragments). If the URL is credential-free per this project’s conventions, allow the logging.
Applied to files:
apps/webapp/app/routes/storybook.icons/route.tsxapps/webapp/app/assets/icons/PadlockRoundedIcon.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings/route.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings.integrations/route.tsxapps/webapp/app/components/integrations/devRevealIntegrations.tsxapps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.vercel.tsxapps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.github.tsx
📚 Learning: 2026-05-18T08:21:27.694Z
Learnt from: d-cs
Repo: triggerdotdev/trigger.dev PR: 3632
File: apps/webapp/sentry.server.ts:4-21
Timestamp: 2026-05-18T08:21:27.694Z
Learning: When handling Prisma error P1001 ("Can't reach database server") in TypeScript, don’t assume a single error shape. Prisma can surface P1001 via two different error classes/fields: `PrismaClientKnownRequestError` exposes it as `err.code === "P1001"` (common during mid-query connection drops), while `PrismaClientInitializationError` exposes it as `err.errorCode === "P1001"` (common on client startup failure). Therefore, predicates should use `err.code === "P1001" || err.errorCode === "P1001"`. Do not flag `err.code === "P1001"` as “unreachable/never matches,” as it is expected in production.
Applied to files:
apps/webapp/app/routes/storybook.icons/route.tsxapps/webapp/app/assets/icons/PadlockRoundedIcon.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings/route.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings.integrations/route.tsxapps/webapp/app/components/integrations/devRevealIntegrations.tsxapps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.vercel.tsxapps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.github.tsx
📚 Learning: 2026-05-18T08:21:27.694Z
Learnt from: d-cs
Repo: triggerdotdev/trigger.dev PR: 3632
File: apps/webapp/sentry.server.ts:4-21
Timestamp: 2026-05-18T08:21:27.694Z
Learning: When handling Prisma errors for P1001 ("Can't reach database server"), do not assume it only appears under a single property name. Prisma may surface P1001 via either `PrismaClientKnownRequestError` (`err.code === "P1001"`, e.g., mid-query connection drops) or `PrismaClientInitializationError` (`err.errorCode === "P1001"`, e.g., client startup connection failure). To reliably detect the condition, check `err.code === "P1001" || err.errorCode === "P1001"`, and avoid review rules that would incorrectly flag `err.code === "P1001"` as unreachable/never-matching.
Applied to files:
apps/webapp/app/routes/storybook.icons/route.tsxapps/webapp/app/assets/icons/PadlockRoundedIcon.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings/route.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings.integrations/route.tsxapps/webapp/app/components/integrations/devRevealIntegrations.tsxapps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.vercel.tsxapps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.github.tsx
📚 Learning: 2026-06-13T19:53:13.759Z
Learnt from: ericallam
Repo: triggerdotdev/trigger.dev PR: 3937
File: packages/trigger-sdk/skills/realtime-and-frontend/SKILL.md:258-260
Timestamp: 2026-06-13T19:53:13.759Z
Learning: When reviewing code that uses `trigger.dev/react-hooks`’s `useRealtimeRun`, preserve the call signature where the first argument is the full realtime handle object (not `handle.id`). This is intentional to maintain type-safety and is consistent with the official docs; do not suggest changing the first argument from the handle object to `handle.id`.
Applied to files:
apps/webapp/app/routes/storybook.icons/route.tsxapps/webapp/app/assets/icons/PadlockRoundedIcon.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings/route.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings.integrations/route.tsxapps/webapp/app/components/integrations/devRevealIntegrations.tsxapps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.vercel.tsxapps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.github.tsx
📚 Learning: 2026-06-17T17:13:49.929Z
Learnt from: matt-aitken
Repo: triggerdotdev/trigger.dev PR: 3948
File: apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.bulk-actions.$bulkActionParam/route.tsx:48-62
Timestamp: 2026-06-17T17:13:49.929Z
Learning: In triggerdotdev/trigger.dev, within `dashboardLoader`/`dashboardAction` (or similar context resolver code) whenever you resolve an organization ID from an organization slug for RBAC/enterprise authorization scope, always read from the primary Prisma client (`prisma`), not `$replica`. Using `$replica` can hit replica-lag and cause the RBAC lookup/authorization to run without the correct org scope (bypassing intended role enforcement). Implement the slug→org lookup with `prisma.organization.findFirst(...)` (or equivalent primary-client query) and add an inline comment documenting why the primary client is required (replica lag could lead to unscoped RBAC checks).
Applied to files:
apps/webapp/app/routes/storybook.icons/route.tsxapps/webapp/app/assets/icons/PadlockRoundedIcon.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings/route.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings.integrations/route.tsxapps/webapp/app/components/integrations/devRevealIntegrations.tsxapps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.vercel.tsxapps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.github.tsx
📚 Learning: 2026-06-23T13:04:21.413Z
Learnt from: carderne
Repo: triggerdotdev/trigger.dev PR: 4023
File: apps/webapp/app/services/upsertBranch.server.ts:14-18
Timestamp: 2026-06-23T13:04:21.413Z
Learning: In TypeScript, it’s valid to `import { type X }` and then use `typeof X` in a type-only position, e.g. `type Alias = z.infer<typeof X>`. The `type` modifier suppresses the runtime import, but the type checker still has the full exported type so `z.infer<typeof X>` can resolve correctly. In code reviews, don’t flag this as a TypeScript compile error as long as `typeof X` is used in a type context (e.g., with `z.infer`, `type` aliases, generics), not as a runtime value.
Applied to files:
apps/webapp/app/routes/storybook.icons/route.tsxapps/webapp/app/assets/icons/PadlockRoundedIcon.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings/route.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings.integrations/route.tsxapps/webapp/app/components/integrations/devRevealIntegrations.tsxapps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.vercel.tsxapps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.github.tsx
📚 Learning: 2026-04-02T19:18:26.255Z
Learnt from: samejr
Repo: triggerdotdev/trigger.dev PR: 3319
File: apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.bulk-actions/route.tsx:179-189
Timestamp: 2026-04-02T19:18:26.255Z
Learning: In this repo’s route components that render the Inspector `ResizablePanelGroup` panels, it’s acceptable to pass `collapsed={!isShowingInspector}` together with a no-op `onCollapseChange={() => {}}` when panel visibility is intentionally controlled only by route parameters (e.g., `*Param` search/route params) rather than user drag/collapse interactions. Do not flag an empty/no-op `onCollapseChange` as “missing wiring” in these cases; only flag it when collapse state is expected to change based on user interaction.
Applied to files:
apps/webapp/app/routes/storybook.icons/route.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings/route.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings.integrations/route.tsx
📚 Learning: 2026-05-12T21:04:00.184Z
Learnt from: ericallam
Repo: triggerdotdev/trigger.dev PR: 3542
File: apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.sessions._index/route.tsx:40-42
Timestamp: 2026-05-12T21:04:00.184Z
Learning: In triggerdotdev/trigger.dev route loader implementations (Remix `route.tsx` files under `apps/webapp/app/routes/**`), follow the existing convention for missing/unauthorized environment lookups: when `findEnvironmentBySlug` (or the equivalent env resolver) returns a falsy value, handle it by throwing `new Error("Environment not found")` rather than returning a `404` `Response` (i.e., do not flag this as “missing 404 response”). Changing the error-to-404 convention is a cross-cutting refactor and should be left out of individual PRs unless the PR explicitly addresses that broader migration.
Applied to files:
apps/webapp/app/routes/storybook.icons/route.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings/route.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings.integrations/route.tsx
📚 Learning: 2026-05-08T21:00:20.973Z
Learnt from: samejr
Repo: triggerdotdev/trigger.dev PR: 3538
File: apps/webapp/app/components/primitives/Resizable.tsx:60-78
Timestamp: 2026-05-08T21:00:20.973Z
Learning: In the triggerdotdev/trigger.dev codebase, treat Zod as a boundary validation tool (API handlers, request/response validation, and storage/DB read/write validation), not as inline render-time validation inside React components/primitive UI code. For render-time guards, prefer small manual type-narrowing checks (e.g., a short predicate like ~10–20 lines) over importing Zod into UI primitives, to avoid per-render schema-parse overhead and unnecessary abstraction. Use the manual guard approach unless you truly need schema validation at a boundary; only then introduce Zod.
Applied to files:
apps/webapp/app/routes/storybook.icons/route.tsxapps/webapp/app/assets/icons/PadlockRoundedIcon.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings/route.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings.integrations/route.tsxapps/webapp/app/components/integrations/devRevealIntegrations.tsxapps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.vercel.tsxapps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.github.tsx
📚 Learning: 2026-06-25T18:21:55.847Z
Learnt from: carderne
Repo: triggerdotdev/trigger.dev PR: 4039
File: apps/webapp/app/routes/invite-resend.tsx:0-0
Timestamp: 2026-06-25T18:21:55.847Z
Learning: In the triggerdotdev/trigger.dev Zod 4 migration, avoid importing from the root package `conform-to/zod` in webapp code. It can resolve to the Zod 3 build and may crash at module load under Zod 4. When reviewing TypeScript/TSX files in `apps/webapp`, prefer importing from the Zod 4 subpath `conform-to/zod/v4` for Zod 4-compatible schemas/types.
Applied to files:
apps/webapp/app/routes/storybook.icons/route.tsxapps/webapp/app/assets/icons/PadlockRoundedIcon.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings/route.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings.integrations/route.tsxapps/webapp/app/components/integrations/devRevealIntegrations.tsxapps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.vercel.tsxapps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.github.tsx
📚 Learning: 2026-05-12T21:04:05.815Z
Learnt from: ericallam
Repo: triggerdotdev/trigger.dev PR: 3542
File: apps/webapp/app/components/sessions/v1/SessionStatus.tsx:1-3
Timestamp: 2026-05-12T21:04:05.815Z
Learning: In this Remix + TypeScript codebase, do not flag a server/client boundary violation when a file imports only types from a module matching `*.server`.
Specifically, it’s safe to import types using `import type { Foo } from "*.server"` or `import { type Foo } from "*.server"` because TypeScript erases type-only imports at compile time and they emit no JavaScript, so they won’t cross the Remix server/client bundle boundary.
Only raise the boundary concern for value imports (e.g., `import { Foo }` without `type`, or `import Foo`), since those produce JavaScript output.
Applied to files:
apps/webapp/app/routes/storybook.icons/route.tsxapps/webapp/app/assets/icons/PadlockRoundedIcon.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings/route.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings.integrations/route.tsxapps/webapp/app/components/integrations/devRevealIntegrations.tsxapps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.vercel.tsxapps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.github.tsx
📚 Learning: 2026-06-25T18:21:51.905Z
Learnt from: carderne
Repo: triggerdotdev/trigger.dev PR: 4039
File: apps/webapp/app/routes/invite-revoke.tsx:0-0
Timestamp: 2026-06-25T18:21:51.905Z
Learning: During the Zod v4 migration in the triggerdotdev/trigger.dev webapp, ensure any imports from `conform-to/zod` use the Zod-4 subpath: `conform-to/zod/v4` (e.g., `import { parseWithZod } from "conform-to/zod/v4"`). Do not import from the package root `conform-to/zod`, because it is the Zod 3 implementation and may load Zod-3-only symbols (e.g., `ZodBranded`, `ZodEffects`), which can throw at module load (notably with `zod4.4.3`). This should be enforced across `apps/webapp/**/*` where helpers like `parseWithZod` and `conformZodMessage` are used.
Applied to files:
apps/webapp/app/routes/storybook.icons/route.tsxapps/webapp/app/assets/icons/PadlockRoundedIcon.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings/route.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings.integrations/route.tsxapps/webapp/app/components/integrations/devRevealIntegrations.tsxapps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.vercel.tsxapps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.github.tsx
📚 Learning: 2026-07-03T17:10:21.498Z
Learnt from: 0ski
Repo: triggerdotdev/trigger.dev PR: 4148
File: apps/webapp/app/models/orgMember.server.ts:149-168
Timestamp: 2026-07-03T17:10:21.498Z
Learning: In triggerdotdev/trigger.dev, `User.email` (Prisma schema: `internal-packages/database/prisma/schema.prisma`) currently does NOT use `citext` and does NOT have a `lower(email)` functional unique index. Therefore, do not introduce Prisma queries like `where: { email: { equals: <value>, mode: "insensitive" } }` (or any case-insensitive lookup) against `User.email`, because it can force sequential scans of the `users` table under load. During review, ensure email is normalized (e.g., lowercased/trimmed) before both writes and subsequent lookups, and if true case-insensitive behavior/uniqueness is required, implement it via a separate app-wide migration (e.g., switch to `citext` and/or add a functional unique index with backfill) rather than bolting it onto individual feature PRs.
Applied to files:
apps/webapp/app/routes/storybook.icons/route.tsxapps/webapp/app/assets/icons/PadlockRoundedIcon.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings/route.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings.integrations/route.tsxapps/webapp/app/components/integrations/devRevealIntegrations.tsxapps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.vercel.tsxapps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.github.tsx
📚 Learning: 2026-05-14T15:57:42.664Z
Learnt from: ericallam
Repo: triggerdotdev/trigger.dev PR: 3545
File: apps/webapp/app/routes/storybook.streamdown/route.tsx:1-117
Timestamp: 2026-05-14T15:57:42.664Z
Learning: In triggerdotdev/trigger.dev, `crumbs` markers (e.g., `// crumbs` or `// `#region` crumbs`) are optional debug instrumentation that are stripped before merge, so they are not a hard requirement. During code review, do not flag missing `crumbs` in Storybook/dev-only UI route files—specifically files like `apps/webapp/app/routes/storybook.*/route.tsx`—since there’s nothing in production to trace from these contexts.
Applied to files:
apps/webapp/app/routes/storybook.icons/route.tsx
📚 Learning: 2026-06-25T18:21:54.729Z
Learnt from: carderne
Repo: triggerdotdev/trigger.dev PR: 4039
File: apps/webapp/app/routes/confirm-basic-details.tsx:0-0
Timestamp: 2026-06-25T18:21:54.729Z
Learning: For Remix + TypeScript files that use Conform v1 (conform-to/react) and its getInputProps helper, when you intend to suppress the helper-provided default value for non-checkbox/non-radio inputs (e.g., hidden inputs managed via an explicit value prop), use the Conform v1 option key `value: false`. Do not recommend `defaultValue: false` here, because `defaultValue` is not a valid option key for these input types in Conform v1 typings.
Applied to files:
apps/webapp/app/routes/storybook.icons/route.tsxapps/webapp/app/assets/icons/PadlockRoundedIcon.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings/route.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings.integrations/route.tsxapps/webapp/app/components/integrations/devRevealIntegrations.tsxapps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.vercel.tsxapps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.github.tsx
📚 Learning: 2026-04-16T14:21:15.229Z
Learnt from: ericallam
Repo: triggerdotdev/trigger.dev PR: 3368
File: apps/webapp/app/components/logs/LogsTaskFilter.tsx:135-163
Timestamp: 2026-04-16T14:21:15.229Z
Learning: When rendering lists of task registry items in apps/webapp (e.g., <SelectItem /> rows) and using `key={item.slug}`, do not flag it as potentially non-unique. In trigger.dev’s `TaskIdentifier` table, the DB constraint `@unique([runtimeEnvironmentId, slug])` guarantees `slug` is unique within a given runtime environment, so `item.slug` is safe as the React key as long as the list is derived from that registry/constraint (and not from a legacy query that could produce duplicate slugs).
Applied to files:
apps/webapp/app/components/integrations/devRevealIntegrations.tsx
🪛 Betterleaks (1.6.1)
apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings.integrations/route.tsx
[high] 355-355: Detected a Vercel API Token, which may expose deployment and serverless infrastructure to unauthorized access.
(vercel-api-token)
🔇 Additional comments (11)
apps/webapp/app/assets/icons/PadlockRoundedIcon.tsx (1)
1-34: LGTM!apps/webapp/app/routes/storybook.icons/route.tsx (1)
96-96: LGTM!Also applies to: 237-237
apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings/route.tsx (1)
1-1: LGTM!Also applies to: 45-64
apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings.integrations/route.tsx (2)
45-46: LGTM!
558-578: LGTM!Also applies to: 581-603
apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.github.tsx (2)
406-417: LGTM!Also applies to: 480-480, 701-793
853-938: LGTM!Also applies to: 1055-1077
apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.vercel.tsx (3)
788-790: LGTM!Also applies to: 999-1014
815-874: LGTM!Also applies to: 962-987, 1020-1045
1101-1109: LGTM!Also applies to: 1149-1149
apps/webapp/app/components/integrations/devRevealIntegrations.tsx (1)
57-78: 📐 Maintainability & Code QualityNo change needed.
apps/webapp/tsconfig.jsondoes not enablenoUncheckedIndexedAccess, and the webapp tsconfig does not inherit a root-levelnoUncheckedIndexedAccesssetting.> Likely an incorrect or invalid review comment.
Comment on lines
+1
to
+22
| /** | ||
| * TEMPORARY — DEVELOPMENT ONLY. DELETE THIS FILE BEFORE MERGING. | ||
| * | ||
| * The project Integrations settings page hides most of its UI behind | ||
| * environment config (a configured GitHub App, a configured Vercel | ||
| * integration) and behind connection state (connected vs. not connected). | ||
| * Locally that leaves almost nothing on screen, which makes it impossible to | ||
| * style the page. | ||
| * | ||
| * When `DEV_REVEAL_ALL` is true, the page and its two panels render every | ||
| * state at once using the placeholder data below. Nothing here is wired to a | ||
| * real integration — the forms still post to their real actions and will fail. | ||
| * | ||
| * To revert: set `DEV_REVEAL_ALL` to false, delete this file, and remove every | ||
| * `devReveal` prop and `DEV_REVEAL_ALL` reference. `rg "DEV_REVEAL_ALL|devReveal"` | ||
| * finds all of them. | ||
| */ | ||
|
|
||
| import { type ReactNode } from "react"; | ||
| import { type VercelProjectIntegrationData } from "~/v3/vercel/vercelProjectIntegrationSchema"; | ||
|
|
||
| export const DEV_REVEAL_ALL = true; |
Contributor
There was a problem hiding this comment.
🎯 Functional Correctness | 🔴 Critical | ⚡ Quick win
Remove the DEV_REVEAL_ALL preview scaffolding before merge. The PR objectives state this is temporary, but DEV_REVEAL_ALL is a hardcoded true, so production users see "DEV PREVIEW" labels, fabricated acme-inc/acme-app repo data, a fake connected Vercel project, and every mutually exclusive integration state stacked on one page. The four sites unwind from the single flag definition:
apps/webapp/app/components/integrations/devRevealIntegrations.tsx#L1-L22: delete the module (or, if the preview must survive review iterations, gate the flag onprocess.env.NODE_ENV !== "production"so it folds away in prod builds).apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.github.tsx#L1144-L1191: drop thedevRevealbranch, thedevRevealprop, and the fixture imports; fourConnectedGitHubRepoForminstances also collide on the shared Conform form idupdate-git-settings.apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.vercel.tsx#L1158-L1235: drop thedevRevealbranch, thedevRevealprop, and thedevRevealConnectedVercelProject/devRevealVercelCustomEnvironmentsimports.apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings.integrations/route.tsx#L353-L355: drop the|| DEV_REVEAL_ALLclauses and the twodevReveal={DEV_REVEAL_ALL}props so section visibility followsgithubAppEnabled/vercelIntegrationEnabledagain.
Note: Betterleaks flagging a "Vercel API Token" on Line 355 of the integrations route is a false positive — it is matching the vercelIntegrationEnabled || DEV_REVEAL_ALL identifier text.
Want me to open a tracking issue for the removal?
📍 Affects 4 files
apps/webapp/app/components/integrations/devRevealIntegrations.tsx#L1-L22(this comment)apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.github.tsx#L1144-L1191apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.vercel.tsx#L1158-L1235apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings.integrations/route.tsx#L353-L355
Source: Linters/SAST tools
Comment on lines
+481
to
+505
| <SettingsRow | ||
| align="start" | ||
| htmlFor={fields.triggerConfigFilePath.id} | ||
| title="Trigger config file" | ||
| description="Path to your Trigger configuration file, relative to the root directory of your repo." | ||
| action={ | ||
| <SettingsControl> | ||
| <Input | ||
| {...getInputProps(fields.triggerConfigFilePath, { type: "text" })} | ||
| variant="medium" | ||
| defaultValue={buildSettings?.triggerConfigFilePath || ""} | ||
| placeholder="trigger.config.ts" | ||
| onChange={(e) => { | ||
| setBuildSettingsValues((prev) => ({ | ||
| ...prev, | ||
| useNativeBuildServer: isChecked, | ||
| triggerConfigFilePath: e.target.value, | ||
| })); | ||
| }} | ||
| /> | ||
| <Hint> | ||
| Native build server builds don't rely on external build providers and are used by | ||
| default. Requires version 4.2.0 or newer. | ||
| </Hint> | ||
| <FormError id={fields.useNativeBuildServer.errorId}> | ||
| {fields.useNativeBuildServer.errors} | ||
| <FormError id={fields.triggerConfigFilePath.errorId}> | ||
| {fields.triggerConfigFilePath.errors} | ||
| </FormError> | ||
| </InputGroup> | ||
| </div> | ||
| <FormError>{buildSettingsForm.errors}</FormError> | ||
| <FormButtons | ||
| confirmButton={ | ||
| <Button | ||
| type="submit" | ||
| name="action" | ||
| value="update-build-settings" | ||
| variant="secondary/small" | ||
| disabled={isBuildSettingsLoading || !hasBuildSettingsChanges} | ||
| LeadingIcon={isBuildSettingsLoading ? SpinnerWhite : undefined} | ||
| > | ||
| Save | ||
| </Button> | ||
| } | ||
| /> | ||
| </Fieldset> | ||
| </SettingsControl> | ||
| } | ||
| /> |
Contributor
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🌐 Web query:
Conform v1 getInputProps defaultValue behavior on lastResult error
💡 Result:
In Conform v1, the getInputProps helper automatically derives the initial state of an input field based on its type [1]. When a form is submitted and returns an error, Conform updates the field's metadata using the provided lastResult [2][3]. Behavior of defaultValue with lastResult Errors: 1. Automatic Population: For standard input types (e.g., text, email, password), getInputProps populates the defaultValue property using the field's initialValue [1]. When an error occurs, the library internally updates the field's initialValue to reflect the submitted data from lastResult rather than the original form default, ensuring the user's input is preserved during re-rendering [3]. 2. Checkbox/Radio Inputs: For checkbox and radio inputs, the helper returns defaultChecked and value properties instead of defaultValue, ensuring these inputs also correctly reflect the state derived from the last submission [1]. 3. Handling Stale Values: If you observe that form fields are not correctly preserving their values after an error, it is often due to the timing of how lastResult is synchronized with the useForm hook [4][5]. A common practice to ensure the form remains responsive to the latest submission result is to pass lastResult directly to useForm, and ensure that your logic correctly handles the transition state (e.g., waiting for the form to be idle before resetting or updating) [4][5][6]. If you find that inputs are not behaving as expected when an error occurs, verify that your lastResult is being passed correctly to the useForm hook and that your UI components are utilizing the props returned by getInputProps, as these are designed to sync with the field's current metadata [2][6][7].
Citations:
- 1: docs: fix document for getInputProps edmundhung/conform#1227
- 2: https://conform.guide/api/react/useForm
- 3: docs: the Return value of
useFormFunction edmundhung/conform#887 - 4: defaultValue does not persist across form submissions edmundhung/conform#550
- 5: Stale default values in Next.js after submitting a form action edmundhung/conform#797
- 6: https://conform.guide/integration/nextjs
- 7: Conform + Next.js 15: How to prevent a form getting reset when the Server Action returns an error? edmundhung/conform#981
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Locate and inspect the targeted route and relevant imports/usages.
TARGET='apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings.integrations/route.tsx'
if [ -f "$TARGET" ]; then
echo "=== target exists ==="
wc -l "$TARGET"
echo "=== imports around line 1-80 ==="
sed -n '1,90p' "$TARGET" | cat -n
echo "=== relevant settings rows 450-550 ==="
sed -n '450,550p' "$TARGET" | cat -n
else
echo "target missing: $TARGET"
echo "matching files:"
fd -a 'route\.tsx$' apps/webapp/app/routes | sed 's#^\./##' | grep -F 'settings.integrations' || true
fi
echo "=== conform dependency versions ==="
for f in package.json apps/webapp/package.json pnpm-lock.yaml yarn.lock package-lock.json; do
[ -f "$f" ] && { echo "--- $f"; rg -n '"`@conform-to/`|conform|`@conform`' "$f" | head -80; }
done
echo "=== local input helper usage of getInputProps + explicit defaultValue ==="
rg -n "getInputProps\\([^)]*\\{[^}]*type:\\s*[\"']text[\"'][^}]*\\}[^)]*\\)[\\s\\S]?{[\\s\\S]*defaultValue|getInputProps\\(fields\\.[^,]+,[^)]*\\{[^}]*type:\\s*[\"']text[\"'][^}]*\\}[^)]*\\)[\\s\\S]*defaultValue|defaultValue=\\.\\.\\.getInputProps" apps/webapp -g '*.tsx' -g '*.ts' || trueRepository: triggerdotdev/trigger.dev
Length of output: 9619
Don’t override Conform’s defaultValue; remove the explicit values.
getInputProps(fields.x, { type: "text" }) already preserves the field’s last submitted/CW value, so spreading it and then assigning another defaultValue lets the persisted setting win after validation fails. Apply this to the Trigger, install command, and pre-build command inputs.
Comment on lines
+994
to
+1026
| <SettingsRow | ||
| action={ | ||
| previewEnvironmentEnabled ? ( | ||
| <Switch | ||
| name="previewDeploymentsEnabled" | ||
| defaultChecked={connectedGitHubRepo.previewDeploymentsEnabled} | ||
| variant="medium" | ||
| onCheckedChange={(checked) => { | ||
| setGitSettingsValues((prev) => ({ | ||
| ...prev, | ||
| stagingBranch: e.target.value, | ||
| previewDeploymentsEnabled: checked, | ||
| })); | ||
| }} | ||
| /> | ||
|
|
||
| <div className="flex items-center gap-1.5"> | ||
| <EnvironmentIcon environment={{ type: "PREVIEW" }} className="size-4" /> | ||
| <span className={`text-sm ${environmentTextClassName({ type: "PREVIEW" })}`}> | ||
| {environmentFullTitle({ type: "PREVIEW" })} | ||
| </span> | ||
| </div> | ||
| <div className="flex items-center gap-1.5"> | ||
| <Switch | ||
| name="previewDeploymentsEnabled" | ||
| disabled={!previewEnvironmentEnabled} | ||
| defaultChecked={ | ||
| connectedGitHubRepo.previewDeploymentsEnabled && previewEnvironmentEnabled | ||
| } | ||
| variant="small" | ||
| label="Create preview deployments for pull requests" | ||
| labelPosition="right" | ||
| onCheckedChange={(checked) => { | ||
| setGitSettingsValues((prev) => ({ | ||
| ...prev, | ||
| previewDeploymentsEnabled: checked, | ||
| })); | ||
| }} | ||
| /> | ||
| {!previewEnvironmentEnabled && ( | ||
| <InfoIconTooltip | ||
| content={ | ||
| <span className="text-xs"> | ||
| <TextLink to={billingPath}>Upgrade</TextLink> your plan to enable preview | ||
| branches | ||
| </span> | ||
| } | ||
| /> | ||
| )} | ||
| </div> | ||
| </div> | ||
| <FormError>{fields.productionBranch?.errors}</FormError> | ||
| <FormError>{fields.stagingBranch?.errors}</FormError> | ||
| <FormError>{fields.previewDeploymentsEnabled?.errors}</FormError> | ||
| <FormError>{gitSettingsForm.errors}</FormError> | ||
| </InputGroup> | ||
|
|
||
| <FormButtons | ||
| confirmButton={ | ||
| <Button | ||
| type="submit" | ||
| name="action" | ||
| value="update-git-settings" | ||
| ) : ( | ||
| <LinkButton | ||
| to={billingPath} | ||
| variant="secondary/small" | ||
| disabled={isGitSettingsLoading || !hasGitSettingsChanges || !canManageGithub} | ||
| tooltip={ | ||
| canManageGithub | ||
| ? undefined | ||
| : "You don't have permission to manage the GitHub integration" | ||
| } | ||
| LeadingIcon={isGitSettingsLoading ? SpinnerWhite : undefined} | ||
| LeadingIcon={ArrowUpCircleIcon} | ||
| leadingIconClassName="text-indigo-500" | ||
| > | ||
| Save | ||
| </Button> | ||
| Upgrade | ||
| </LinkButton> | ||
| ) | ||
| } | ||
| > | ||
| <EnvironmentRowLabel | ||
| type="PREVIEW" | ||
| description={ | ||
| previewEnvironmentEnabled ? undefined : "Upgrade your plan to enable preview branches" | ||
| } | ||
| /> | ||
| </Fieldset> | ||
| </SettingsRow> |
Contributor
There was a problem hiding this comment.
🗄️ Data Integrity & Integration | 🟠 Major | ⚡ Quick win
Gated preview state renders no previewDeploymentsEnabled input at all.
When previewEnvironmentEnabled is false the Switch is replaced by an Upgrade link, so the field is absent from the POST body. UpdateGitSettingsFormSchema transforms a missing value to false (Line 130-133), which means any save from a downgraded plan silently clears a previously-enabled previewDeploymentsEnabled. Consider rendering a hidden input carrying the persisted value when the control is gated.
🛡️ Proposed fix
) : (
- <LinkButton
- to={billingPath}
- variant="secondary/small"
- LeadingIcon={ArrowUpCircleIcon}
- leadingIconClassName="text-indigo-500"
- >
- Upgrade
- </LinkButton>
+ <>
+ {connectedGitHubRepo.previewDeploymentsEnabled && (
+ <input type="hidden" name="previewDeploymentsEnabled" value="on" />
+ )}
+ <LinkButton
+ to={billingPath}
+ variant="secondary/small"
+ LeadingIcon={ArrowUpCircleIcon}
+ leadingIconClassName="text-indigo-500"
+ >
+ Upgrade
+ </LinkButton>
+ </>
)📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <SettingsRow | |
| action={ | |
| previewEnvironmentEnabled ? ( | |
| <Switch | |
| name="previewDeploymentsEnabled" | |
| defaultChecked={connectedGitHubRepo.previewDeploymentsEnabled} | |
| variant="medium" | |
| onCheckedChange={(checked) => { | |
| setGitSettingsValues((prev) => ({ | |
| ...prev, | |
| stagingBranch: e.target.value, | |
| previewDeploymentsEnabled: checked, | |
| })); | |
| }} | |
| /> | |
| <div className="flex items-center gap-1.5"> | |
| <EnvironmentIcon environment={{ type: "PREVIEW" }} className="size-4" /> | |
| <span className={`text-sm ${environmentTextClassName({ type: "PREVIEW" })}`}> | |
| {environmentFullTitle({ type: "PREVIEW" })} | |
| </span> | |
| </div> | |
| <div className="flex items-center gap-1.5"> | |
| <Switch | |
| name="previewDeploymentsEnabled" | |
| disabled={!previewEnvironmentEnabled} | |
| defaultChecked={ | |
| connectedGitHubRepo.previewDeploymentsEnabled && previewEnvironmentEnabled | |
| } | |
| variant="small" | |
| label="Create preview deployments for pull requests" | |
| labelPosition="right" | |
| onCheckedChange={(checked) => { | |
| setGitSettingsValues((prev) => ({ | |
| ...prev, | |
| previewDeploymentsEnabled: checked, | |
| })); | |
| }} | |
| /> | |
| {!previewEnvironmentEnabled && ( | |
| <InfoIconTooltip | |
| content={ | |
| <span className="text-xs"> | |
| <TextLink to={billingPath}>Upgrade</TextLink> your plan to enable preview | |
| branches | |
| </span> | |
| } | |
| /> | |
| )} | |
| </div> | |
| </div> | |
| <FormError>{fields.productionBranch?.errors}</FormError> | |
| <FormError>{fields.stagingBranch?.errors}</FormError> | |
| <FormError>{fields.previewDeploymentsEnabled?.errors}</FormError> | |
| <FormError>{gitSettingsForm.errors}</FormError> | |
| </InputGroup> | |
| <FormButtons | |
| confirmButton={ | |
| <Button | |
| type="submit" | |
| name="action" | |
| value="update-git-settings" | |
| ) : ( | |
| <LinkButton | |
| to={billingPath} | |
| variant="secondary/small" | |
| disabled={isGitSettingsLoading || !hasGitSettingsChanges || !canManageGithub} | |
| tooltip={ | |
| canManageGithub | |
| ? undefined | |
| : "You don't have permission to manage the GitHub integration" | |
| } | |
| LeadingIcon={isGitSettingsLoading ? SpinnerWhite : undefined} | |
| LeadingIcon={ArrowUpCircleIcon} | |
| leadingIconClassName="text-indigo-500" | |
| > | |
| Save | |
| </Button> | |
| Upgrade | |
| </LinkButton> | |
| ) | |
| } | |
| > | |
| <EnvironmentRowLabel | |
| type="PREVIEW" | |
| description={ | |
| previewEnvironmentEnabled ? undefined : "Upgrade your plan to enable preview branches" | |
| } | |
| /> | |
| </Fieldset> | |
| </SettingsRow> | |
| <SettingsRow | |
| action={ | |
| previewEnvironmentEnabled ? ( | |
| <Switch | |
| name="previewDeploymentsEnabled" | |
| defaultChecked={connectedGitHubRepo.previewDeploymentsEnabled} | |
| variant="medium" | |
| onCheckedChange={(checked) => { | |
| setGitSettingsValues((prev) => ({ | |
| ...prev, | |
| previewDeploymentsEnabled: checked, | |
| })); | |
| }} | |
| /> | |
| ) : ( | |
| <> | |
| {connectedGitHubRepo.previewDeploymentsEnabled && ( | |
| <input type="hidden" name="previewDeploymentsEnabled" value="on" /> | |
| )} | |
| <LinkButton | |
| to={billingPath} | |
| variant="secondary/small" | |
| LeadingIcon={ArrowUpCircleIcon} | |
| leadingIconClassName="text-indigo-500" | |
| > | |
| Upgrade | |
| </LinkButton> | |
| </> | |
| ) | |
| } | |
| > | |
| <EnvironmentRowLabel | |
| type="PREVIEW" | |
| description={ | |
| previewEnvironmentEnabled ? undefined : "Upgrade your plan to enable preview branches" | |
| } | |
| /> | |
| </SettingsRow> |
Comment on lines
+1121
to
+1126
| const connectedRepo = | ||
| data?.connectedRepository ?? (devReveal ? devRevealConnectedGitHubRepo : undefined); | ||
| const installations = data?.installations?.length | ||
| ? data.installations | ||
| : devRevealGitHubInstallations; | ||
| const canManageGithub = data?.canManageGithub ?? true; |
Contributor
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
installations falls back to dev fixtures without a devReveal guard.
connectedRepo on Line 1121 correctly gates its fixture behind devReveal, but installations does not — it resolves to devRevealGitHubInstallations whenever the loader returns an empty installation list, in any mode. It happens to be consumed only inside the devReveal block today, which makes it dead weight in the real path and a live bug the moment anything else reads it.
🐛 Proposed fix
- const installations = data?.installations?.length
- ? data.installations
- : devRevealGitHubInstallations;
+ const installations = data?.installations?.length
+ ? data.installations
+ : devReveal
+ ? devRevealGitHubInstallations
+ : [];📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| const connectedRepo = | |
| data?.connectedRepository ?? (devReveal ? devRevealConnectedGitHubRepo : undefined); | |
| const installations = data?.installations?.length | |
| ? data.installations | |
| : devRevealGitHubInstallations; | |
| const canManageGithub = data?.canManageGithub ?? true; | |
| const connectedRepo = | |
| data?.connectedRepository ?? (devReveal ? devRevealConnectedGitHubRepo : undefined); | |
| const installations = data?.installations?.length | |
| ? data.installations | |
| : devReveal | |
| ? devRevealGitHubInstallations | |
| : []; | |
| const canManageGithub = data?.canManageGithub ?? true; |
Comment on lines
+920
to
940
| setValue={(value) => { | ||
| if (!Array.isArray(value)) { | ||
| const env = customEnvironments?.find((e) => e.id === value); | ||
| setConfigValues((prev) => { | ||
| const next = { | ||
| ...prev, | ||
| vercelStagingEnvironment: env | ||
| ? { environmentId: env.id, displayName: env.slug } | ||
| : null, | ||
| }; | ||
| // When clearing the staging mapping, strip "stg" from build settings | ||
| if (!env) { | ||
| next.pullEnvVarsBeforeBuild = prev.pullEnvVarsBeforeBuild.filter( | ||
| (s) => s !== "stg" | ||
| ); | ||
| next.discoverEnvVars = prev.discoverEnvVars.filter((s) => s !== "stg"); | ||
| } | ||
| }} | ||
| items={[{ id: "", slug: "None" }, ...customEnvironments]} | ||
| variant="tertiary/small" | ||
| placeholder="Select environment" | ||
| dropdownIcon | ||
| text={configValues.vercelStagingEnvironment?.displayName || "None"} | ||
| > | ||
| {[ | ||
| <SelectItem key="" value=""> | ||
| None | ||
| </SelectItem>, | ||
| ...customEnvironments.map((env) => ( | ||
| <SelectItem key={env.id} value={env.id}> | ||
| {env.slug} | ||
| </SelectItem> | ||
| )), | ||
| ]} | ||
| </Select> | ||
| </div> | ||
| )} | ||
|
|
||
| <BuildSettingsFields | ||
| availableEnvSlugs={availableEnvSlugsForBuildSettings} | ||
| pullEnvVarsBeforeBuild={configValues.pullEnvVarsBeforeBuild} | ||
| onPullEnvVarsChange={(slugs) => | ||
| setConfigValues((prev) => ({ ...prev, pullEnvVarsBeforeBuild: slugs })) | ||
| } | ||
| discoverEnvVars={configValues.discoverEnvVars} | ||
| onDiscoverEnvVarsChange={(slugs) => | ||
| setConfigValues((prev) => ({ ...prev, discoverEnvVars: slugs })) | ||
| } | ||
| atomicBuilds={configValues.atomicBuilds} | ||
| onAtomicBuildsChange={(slugs) => | ||
| setConfigValues((prev) => ({ ...prev, atomicBuilds: slugs })) | ||
| } | ||
| envVarsConfigLink={`/orgs/${organizationSlug}/projects/${projectSlug}/env/${environmentSlug}/environment-variables`} | ||
| disabledEnvSlugs={disabledEnvSlugsForBuildSettings} | ||
| autoPromote={configValues.autoPromote} | ||
| onAutoPromoteChange={(value) => | ||
| setConfigValues((prev) => ({ ...prev, autoPromote: value })) | ||
| } | ||
| currentTriggerVersion={currentTriggerVersion} | ||
| currentTriggerVersionFetchFailed={currentTriggerVersionFetchFailed} | ||
| hideSectionToggles | ||
| /> | ||
|
|
||
| {/* Warning: autoAssignCustomDomains must be disabled for atomic deployments */} | ||
| {autoAssignCustomDomains !== false && configValues.atomicBuilds.includes("prod") && ( | ||
| <Callout variant="warning"> | ||
| <div className="flex flex-col gap-2"> | ||
| <p className="font-sans text-xs font-normal text-text-dimmed"> | ||
| Atomic deployments require the "Auto-assign Custom Domains" setting to be | ||
| disabled on your Vercel project. Without this, Vercel will promote deployments | ||
| before Trigger.dev is ready. | ||
| </p> | ||
| <Form method="post" action={actionUrl}> | ||
| <input type="hidden" name="action" value="disable-auto-assign" /> | ||
| <Button | ||
| type="submit" | ||
| variant="tertiary/small" | ||
| disabled={ | ||
| navigation.formData?.get("action") === "disable-auto-assign" && | ||
| (navigation.state === "submitting" || navigation.state === "loading") | ||
| } | ||
| LeadingIcon={ | ||
| navigation.formData?.get("action") === "disable-auto-assign" && | ||
| (navigation.state === "submitting" || navigation.state === "loading") | ||
| ? SpinnerWhite | ||
| : undefined | ||
| } | ||
| > | ||
| Disable auto-assign custom domains | ||
| </Button> | ||
| </Form> | ||
| </div> | ||
| </Callout> | ||
| )} | ||
| </div> | ||
|
|
||
| <FormError>{configForm.errors}</FormError> | ||
| </InputGroup> | ||
|
|
||
| <FormButtons | ||
| confirmButton={ | ||
| <Button | ||
| ref={saveButtonRef} | ||
| type="submit" | ||
| name="action" | ||
| value="update-config" | ||
| variant="secondary/small" | ||
| disabled={isConfigLoading || !hasConfigChanges || !canManageVercel} | ||
| tooltip={ | ||
| canManageVercel | ||
| ? undefined | ||
| : "You don't have permission to manage the Vercel integration" | ||
| } | ||
| LeadingIcon={isConfigLoading ? SpinnerWhite : undefined} | ||
| onClick={(event) => { | ||
| if (shouldPromptClearOnSave) { | ||
| event.preventDefault(); | ||
| setShowClearDialog(true); | ||
| return next; | ||
| }); | ||
| } | ||
| }} |
Contributor
There was a problem hiding this comment.
🗄️ Data Integrity & Integration | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
ast-grep outline apps/webapp/app/v3/vercel/vercelProjectIntegrationSchema.ts --items all
rg -nP -C4 'getAvailableEnvSlugsForBuildSettings|atomicBuilds' apps/webapp/app/v3/vercel/vercelProjectIntegrationSchema.tsRepository: triggerdotdev/trigger.dev
Length of output: 3322
🏁 Script executed:
#!/bin/bash
sed -n '880,970p' apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.vercel.tsx
sed -n '134,165p' apps/webapp/app/v3/vercel/vercelProjectIntegrationSchema.tsRepository: triggerdotdev/trigger.dev
Length of output: 1252
Clear the "stg" entry from atomicBuilds when clearing the staging mapping.
atomicBuilds is also an EnvSlugSchema array, and "stg" is a legal slug. Unmapping vercelStagingEnvironment leaves any existing "stg" entry in atomicBuilds pointing to no backing environment, so strip it the same way as pullEnvVarsBeforeBuild and discoverEnvVars.
samejr
changed the title
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
1 participant
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" rather than inheriting "Project settings" from the parent layout.
The GitHub section also picks up two things it was missing. A
GitHub app: Installedrow now persists once the app is installed, where previously that confirmation vanished the moment a repository was connected. And where the Preview environment is gated by plan, the row shows a real Upgrade button instead of a permanently disabled switch behind an info tooltip.Nested form fix
The Vercel panel rendered its "Disable auto-assign custom domains" form inside the config form. Browsers drop a nested
<form>when parsing SSR HTML, so React logged a hydration mismatch and re-rendered the entire document on the client, silently truncating everything below it. It now submits through a fetcher instead.This was reachable in normal use: it fires for any Vercel-connected project with atomic production builds where auto-assign custom domains has not been disabled yet.
Not ready to merge
Opened as a draft because this still carries development-only code that forces every conditionally hidden state to render at once, so the layout can be worked on without provisioning a GitHub App or Vercel integration locally. Each one is labelled
DEV PREVIEWin the UI.To strip it: delete
apps/webapp/app/components/integrations/devRevealIntegrations.tsx, thenrg "DEV_REVEAL_ALL|devReveal"for the remaining props and branches.