feat(webapp): add triggered via field to deployment details page #2850
Conversation
Display the deployment trigger source (CLI, CI/CD, Dashboard, GitHub Integration) with appropriate icons on the deployment details page. The triggeredVia field was already in the database but not displayed.
|
WalkthroughThis change exposes the Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes 🚥 Pre-merge checks | ✅ 1 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
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 |
PR Review: feat(webapp): add triggered via field to deployment details pageSummaryThis PR displays the What is Good
Suggestions for Improvement1. Consider using a Record/Map instead of a large switch statementThe 2. Consider extracting icon components or using a consistent icon patternThe PR uses
3. Minor: IIFE in JSX could be simplifiedThe current IIFE pattern could be simplified to a ternary or extracted to a small SecurityNo security concerns. The field is read-only display data from the database. PerformanceNo performance concerns. The field is already being fetched in the Prisma query; this just displays it. Test CoverageNo tests are included in this PR. While this is a straightforward UI addition, consider adding:
VerdictLooks good to merge! The suggestions above are minor improvements that could be addressed in a follow-up if desired. The core functionality is correct and follows the codebase patterns. |
Review CompleteYour review story is ready! Comment !reviewfast on this PR to re-generate the story. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments.$deploymentParam/route.tsx (1)
85-167: Consider refactoring to a lookup object for better maintainability.The
getTriggeredViaDisplayfunction works correctly and handles all edge cases well, including graceful fallbacks for unknown values. However, the large switch statement could be refactored to use a lookup object for improved maintainability.♻️ Optional refactor using a lookup object
+const TRIGGERED_VIA_DISPLAY_MAP: Record< + string, + { icon: React.ComponentType<{ className?: string }>; label: string } +> = { + "cli:manual": { icon: TerminalSquareIcon, label: "CLI (Manual)" }, + "cli:github_actions": { icon: GitBranchIcon, label: "CLI (GitHub Actions)" }, + "cli:gitlab_ci": { icon: ServerIcon, label: "CLI (GitLab CI)" }, + "cli:circleci": { icon: ServerIcon, label: "CLI (CircleCI)" }, + "cli:jenkins": { icon: ServerIcon, label: "CLI (Jenkins)" }, + "cli:azure_pipelines": { icon: ServerIcon, label: "CLI (Azure Pipelines)" }, + "cli:bitbucket_pipelines": { icon: ServerIcon, label: "CLI (Bitbucket Pipelines)" }, + "cli:travis_ci": { icon: ServerIcon, label: "CLI (Travis CI)" }, + "cli:buildkite": { icon: ServerIcon, label: "CLI (Buildkite)" }, + "cli:ci_other": { icon: ServerIcon, label: "CLI (CI)" }, + "git_integration:github": { icon: GitBranchIcon, label: "GitHub Integration" }, + dashboard: { icon: LayoutDashboardIcon, label: "Dashboard" }, +}; + function getTriggeredViaDisplay(triggeredVia: string | null | undefined): { icon: React.ReactNode; label: string; } | null { if (!triggeredVia) return null; const iconClass = "size-4 text-text-dimmed"; - - switch (triggeredVia) { - case "cli:manual": - return { - icon: <TerminalSquareIcon className={iconClass} />, - label: "CLI (Manual)", - }; - case "cli:github_actions": - return { - icon: <GitBranchIcon className={iconClass} />, - label: "CLI (GitHub Actions)", - }; - case "cli:gitlab_ci": - return { - icon: <ServerIcon className={iconClass} />, - label: "CLI (GitLab CI)", - }; - case "cli:circleci": - return { - icon: <ServerIcon className={iconClass} />, - label: "CLI (CircleCI)", - }; - case "cli:jenkins": - return { - icon: <ServerIcon className={iconClass} />, - label: "CLI (Jenkins)", - }; - case "cli:azure_pipelines": - return { - icon: <ServerIcon className={iconClass} />, - label: "CLI (Azure Pipelines)", - }; - case "cli:bitbucket_pipelines": - return { - icon: <ServerIcon className={iconClass} />, - label: "CLI (Bitbucket Pipelines)", - }; - case "cli:travis_ci": - return { - icon: <ServerIcon className={iconClass} />, - label: "CLI (Travis CI)", - }; - case "cli:buildkite": - return { - icon: <ServerIcon className={iconClass} />, - label: "CLI (Buildkite)", - }; - case "cli:ci_other": - return { - icon: <ServerIcon className={iconClass} />, - label: "CLI (CI)", - }; - case "git_integration:github": - return { - icon: <GitBranchIcon className={iconClass} />, - label: "GitHub Integration", - }; - case "dashboard": - return { - icon: <LayoutDashboardIcon className={iconClass} />, - label: "Dashboard", - }; - default: - // Handle any unknown values gracefully - if (triggeredVia.startsWith("cli:")) { - return { - icon: <TerminalSquareIcon className={iconClass} />, - label: `CLI (${triggeredVia.replace("cli:", "")})`, - }; - } - return { - icon: <ServerIcon className={iconClass} />, - label: triggeredVia, - }; - } + + const config = TRIGGERED_VIA_DISPLAY_MAP[triggeredVia]; + + if (config) { + const IconComponent = config.icon; + return { + icon: <IconComponent className={iconClass} />, + label: config.label, + }; + } + + // Handle any unknown values gracefully + if (triggeredVia.startsWith("cli:")) { + return { + icon: <TerminalSquareIcon className={iconClass} />, + label: `CLI (${triggeredVia.replace("cli:", "")})`, + }; + } + + return { + icon: <ServerIcon className={iconClass} />, + label: triggeredVia, + }; }This approach makes it easier to add or modify trigger source mappings without touching the function logic.
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/webapp/app/presenters/v3/DeploymentPresenter.server.tsapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments.$deploymentParam/route.tsx
🧰 Additional context used
📓 Path-based instructions (7)
**/*.{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
Files:
apps/webapp/app/presenters/v3/DeploymentPresenter.server.tsapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments.$deploymentParam/route.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/presenters/v3/DeploymentPresenter.server.tsapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments.$deploymentParam/route.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use function declarations instead of default exports
Files:
apps/webapp/app/presenters/v3/DeploymentPresenter.server.tsapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments.$deploymentParam/route.tsx
apps/webapp/app/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/webapp.mdc)
Access all environment variables through the
envexport ofenv.server.tsinstead of directly accessingprocess.envin the Trigger.dev webapp
Files:
apps/webapp/app/presenters/v3/DeploymentPresenter.server.tsapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments.$deploymentParam/route.tsx
apps/webapp/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/webapp.mdc)
apps/webapp/**/*.{ts,tsx}: When importing from@trigger.dev/corein the webapp, use subpath exports from the package.json instead of importing from the root path
Follow the Remix 2.1.0 and Express server conventions when updating the main trigger.dev webapp
Files:
apps/webapp/app/presenters/v3/DeploymentPresenter.server.tsapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments.$deploymentParam/route.tsx
**/*.{js,ts,jsx,tsx,json,md,css,scss}
📄 CodeRabbit inference engine (AGENTS.md)
Format code using Prettier
Files:
apps/webapp/app/presenters/v3/DeploymentPresenter.server.tsapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments.$deploymentParam/route.tsx
**/*.ts
📄 CodeRabbit inference engine (.cursor/rules/otel-metrics.mdc)
**/*.ts: OpenTelemetry metric attributes must have low cardinality - use only enums, booleans, bounded error codes, or bounded shard IDs as attribute values
Do not use high-cardinality attributes in OpenTelemetry metrics: avoid UUIDs/IDs (envId, userId, runId, projectId, organizationId), unbounded integers (itemCount, batchSize, retryCount), timestamps (createdAt, startTime), or free-form strings (errorMessage, taskName, queueName)
Files:
apps/webapp/app/presenters/v3/DeploymentPresenter.server.ts
🧠 Learnings (9)
📚 Learning: 2025-11-27T16:27:35.304Z
Learnt from: CR
Repo: triggerdotdev/trigger.dev PR: 0
File: .cursor/rules/writing-tasks.mdc:0-0
Timestamp: 2025-11-27T16:27:35.304Z
Learning: Applies to **/trigger.config.ts : Use build extensions in trigger.config.ts (additionalFiles, additionalPackages, aptGet, prismaExtension, etc.) to customize the build
Applied to files:
apps/webapp/app/presenters/v3/DeploymentPresenter.server.tsapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments.$deploymentParam/route.tsx
📚 Learning: 2025-11-27T16:26:58.661Z
Learnt from: CR
Repo: triggerdotdev/trigger.dev PR: 0
File: .cursor/rules/webapp.mdc:0-0
Timestamp: 2025-11-27T16:26:58.661Z
Learning: Applies to apps/webapp/**/*.{ts,tsx} : Follow the Remix 2.1.0 and Express server conventions when updating the main trigger.dev webapp
Applied to files:
apps/webapp/app/presenters/v3/DeploymentPresenter.server.tsapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments.$deploymentParam/route.tsx
📚 Learning: 2025-11-27T16:27:35.304Z
Learnt from: CR
Repo: triggerdotdev/trigger.dev PR: 0
File: .cursor/rules/writing-tasks.mdc:0-0
Timestamp: 2025-11-27T16:27:35.304Z
Learning: Applies to **/trigger.config.ts : Configure build process in trigger.config.ts using `build` object with external packages, extensions, and JSX settings
Applied to files:
apps/webapp/app/presenters/v3/DeploymentPresenter.server.ts
📚 Learning: 2025-11-27T16:27:35.304Z
Learnt from: CR
Repo: triggerdotdev/trigger.dev PR: 0
File: .cursor/rules/writing-tasks.mdc:0-0
Timestamp: 2025-11-27T16:27:35.304Z
Learning: Applies to **/trigger/**/*.{ts,tsx,js,jsx} : Attach metadata to task runs using the metadata option when triggering, and access/update it inside runs using metadata functions
Applied to files:
apps/webapp/app/presenters/v3/DeploymentPresenter.server.ts
📚 Learning: 2025-11-27T16:27:35.304Z
Learnt from: CR
Repo: triggerdotdev/trigger.dev PR: 0
File: .cursor/rules/writing-tasks.mdc:0-0
Timestamp: 2025-11-27T16:27:35.304Z
Learning: Applies to **/trigger/**/*.{ts,tsx,js,jsx} : Use metadata methods (set, del, replace, append, remove, increment, decrement, stream, flush) to update metadata during task execution
Applied to files:
apps/webapp/app/presenters/v3/DeploymentPresenter.server.ts
📚 Learning: 2025-11-27T16:27:35.304Z
Learnt from: CR
Repo: triggerdotdev/trigger.dev PR: 0
File: .cursor/rules/writing-tasks.mdc:0-0
Timestamp: 2025-11-27T16:27:35.304Z
Learning: Applies to **/trigger/**/*.{ts,tsx,js,jsx} : Use `trigger.dev/sdk/v3` for all imports in Trigger.dev tasks
Applied to files:
apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments.$deploymentParam/route.tsx
📚 Learning: 2025-11-27T16:26:58.661Z
Learnt from: CR
Repo: triggerdotdev/trigger.dev PR: 0
File: .cursor/rules/webapp.mdc:0-0
Timestamp: 2025-11-27T16:26:58.661Z
Learning: Applies to apps/webapp/**/*.{ts,tsx} : When importing from `trigger.dev/core` in the webapp, use subpath exports from the package.json instead of importing from the root path
Applied to files:
apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments.$deploymentParam/route.tsx
📚 Learning: 2025-11-27T16:27:35.304Z
Learnt from: CR
Repo: triggerdotdev/trigger.dev PR: 0
File: .cursor/rules/writing-tasks.mdc:0-0
Timestamp: 2025-11-27T16:27:35.304Z
Learning: Applies to **/trigger/**/*.{ts,tsx,js,jsx} : Export tasks with unique IDs within the project to enable proper task discovery and execution
Applied to files:
apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments.$deploymentParam/route.tsx
📚 Learning: 2025-11-27T16:26:58.661Z
Learnt from: CR
Repo: triggerdotdev/trigger.dev PR: 0
File: .cursor/rules/webapp.mdc:0-0
Timestamp: 2025-11-27T16:26:58.661Z
Learning: Applies to apps/webapp/app/**/*.{ts,tsx} : Access all environment variables through the `env` export of `env.server.ts` instead of directly accessing `process.env` in the Trigger.dev webapp
Applied to files:
apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments.$deploymentParam/route.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (24)
- GitHub Check: units / internal / 🧪 Unit Tests: Internal (6, 8)
- GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (7, 8)
- GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (2, 8)
- GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (6, 8)
- GitHub Check: units / internal / 🧪 Unit Tests: Internal (5, 8)
- GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (8, 8)
- GitHub Check: units / internal / 🧪 Unit Tests: Internal (7, 8)
- GitHub Check: units / internal / 🧪 Unit Tests: Internal (2, 8)
- GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (4, 8)
- GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (5, 8)
- GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (3, 8)
- GitHub Check: units / internal / 🧪 Unit Tests: Internal (8, 8)
- GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (1, 8)
- GitHub Check: units / internal / 🧪 Unit Tests: Internal (4, 8)
- GitHub Check: units / internal / 🧪 Unit Tests: Internal (3, 8)
- GitHub Check: units / internal / 🧪 Unit Tests: Internal (1, 8)
- GitHub Check: e2e / 🧪 CLI v3 tests (ubuntu-latest - npm)
- GitHub Check: units / packages / 🧪 Unit Tests: Packages (1, 1)
- GitHub Check: e2e / 🧪 CLI v3 tests (windows-latest - pnpm)
- GitHub Check: e2e / 🧪 CLI v3 tests (ubuntu-latest - pnpm)
- GitHub Check: e2e / 🧪 CLI v3 tests (windows-latest - npm)
- GitHub Check: typecheck / typecheck
- GitHub Check: claude-review
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (4)
apps/webapp/app/presenters/v3/DeploymentPresenter.server.ts (2)
159-159: LGTM! Field selection added correctly.The
triggeredViafield is properly added to the Prisma select statement, following the same pattern as other fields.
229-229: LGTM! Field properly exposed in API response.The
triggeredViavalue is correctly passed through from the database record to the API response object.apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments.$deploymentParam/route.tsx (2)
6-15: LGTM! Icon imports added correctly.The new icons (
TerminalSquareIcon,LayoutDashboardIcon,GitBranchIcon,ServerIcon) are properly imported and used in thegetTriggeredViaDisplayhelper function.
504-518: LGTM! UI integration is clean and consistent.The "Triggered via" field is properly integrated into the deployment details table. The implementation follows existing patterns, includes appropriate fallback handling, and provides accessible text labels alongside decorative icons.
Display the deployment trigger source (CLI, CI/CD, Dashboard, GitHub Integration) with appropriate icons on the deployment details page. The triggeredVia field was already in the database but not displayed.