Adds a tooltip to the Status header showing deployment status descrip… #1554
Conversation
|
|
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 eslint
apps/webapp/app/components/runs/v3/DeploymentStatus.tsxOops! Something went wrong! :( ESLint: 8.45.0 ESLint couldn't find the config "custom" to extend from. Please check that the name of the config is correct. The config "custom" was referenced from the config file in "/.eslintrc.js". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team. WalkthroughThe changes introduce a new constant Changes
Possibly related PRs
Suggested reviewers
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![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
🧹 Outside diff range and nitpick comments (3)
apps/webapp/app/components/runs/v3/DeploymentStatus.tsx (2)
122-129: LGTM! Consider type safety improvements.The
deploymentStatusesconstant correctly excludes unused statuses with a clear explanatory comment.Consider using const assertion for better type safety:
-export const deploymentStatuses: WorkerDeploymentStatus[] = [ +export const deploymentStatuses = [ "BUILDING", "DEPLOYING", "DEPLOYED", "FAILED", "TIMED_OUT", -]; +] as const;
131-151: LGTM! Consider adding JSDoc documentation.The
deploymentStatusDescriptionfunction provides clear and user-friendly descriptions for all statuses.Consider adding JSDoc documentation to improve IDE support:
+/** + * Returns a user-friendly description for each deployment status + * @param status - The deployment status to describe + * @returns A string description of the status + */ export function deploymentStatusDescription(status: WorkerDeploymentStatus): string {apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.deployments/route.tsx (1)
127-150: Consider extracting tooltip content to a separate component.While the implementation is solid, the tooltip content could be extracted to improve maintainability.
Consider creating a separate component:
+function StatusTooltipContent() { + return ( + <div className="flex flex-col divide-y divide-grid-dimmed"> + {deploymentStatuses.map((status) => ( + <div + key={status} + className="grid grid-cols-[8rem_1fr] gap-x-2 py-2 first:pt-1 last:pb-1" + > + <div className="mb-0.5 flex items-center gap-1.5 whitespace-nowrap"> + <DeploymentStatus status={status} isBuilt={false} /> + </div> + <Paragraph + variant="extra-small" + className="!text-wrap text-text-dimmed" + > + {deploymentStatusDescription(status)} + </Paragraph> + </div> + ))} + </div> + ); +} <TableHeaderCell - tooltip={ - <div className="flex flex-col divide-y divide-grid-dimmed"> - {deploymentStatuses.map((status) => ( - <div - key={status} - className="grid grid-cols-[8rem_1fr] gap-x-2 py-2 first:pt-1 last:pb-1" - > - <div className="mb-0.5 flex items-center gap-1.5 whitespace-nowrap"> - <DeploymentStatus status={status} isBuilt={false} /> - </div> - <Paragraph - variant="extra-small" - className="!text-wrap text-text-dimmed" - > - {deploymentStatusDescription(status)} - </Paragraph> - </div> - ))} - </div> - } + tooltip={<StatusTooltipContent />} + aria-label="Deployment status explanations" >
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/webapp/app/components/runs/v3/DeploymentStatus.tsx(1 hunks)apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.deployments/route.tsx(2 hunks)
🔇 Additional comments (1)
apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.deployments/route.tsx (1)
38-42: LGTM! Imports are well organized.
The new imports are logically grouped and correctly imported from the DeploymentStatus component.
@trigger.dev/build
@trigger.dev/core
@trigger.dev/react-hooks
@trigger.dev/rsc
trigger.dev
@trigger.dev/sdk
commit: |
A tooltip now explains the statuses of the build process.
PENDING and CANCELED are available in the data but I omitted them from the UI as they're not being used.
Summary by CodeRabbit
New Features
Bug Fixes
Documentation