Deploy page table rows stay selected when the side menu is open #1492
Conversation
|
WalkthroughThe changes in the pull request focus on enhancing the functionality and visual feedback of the deployment table within the Changes
Suggested reviewers
Poem
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 (1.23.1)
apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.deployments/route.tsx(node:45465) ESLintIgnoreWarning: The ".eslintignore" file is no longer supported. Switch to using the "ignores" property in "eslint.config.js": https://eslint.org/docs/latest/use/configure/migration-guide#ignoring-files Oops! Something went wrong! :( ESLint: 9.15.0 ESLint couldn't find an eslint.config.(js|mjs|cjs) file. From ESLint v9.0.0, the default configuration file is now eslint.config.js. https://eslint.org/docs/latest/use/configure/migration-guide If you still have problems after following the migration guide, please stop by 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 (1)
apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.deployments/route.tsx (1)
145-148: Consider minor styling enhancementsThe implementation effectively highlights selected rows. Consider these optional improvements:
- Extract the background color class to a constant for reusability
- Add distinct hover states for selected vs unselected rows
+const SELECTED_ROW_CLASS = "bg-grid-dimmed"; +const ROW_HOVER_CLASS = "hover:bg-grid-bright"; +const SELECTED_ROW_HOVER_CLASS = "hover:bg-grid-dimmed/80"; <TableRow key={deployment.id} - className={cn("group", isSelected ? "bg-grid-dimmed" : undefined)} + className={cn( + "group", + isSelected ? SELECTED_ROW_CLASS : ROW_HOVER_CLASS, + isSelected && SELECTED_ROW_HOVER_CLASS + )} >
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.deployments/route.tsx(2 hunks)
🔇 Additional comments (2)
apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.deployments/route.tsx (2)
49-49: LGTM: Clean utility import addition
The cn utility import is well-placed and appropriately used for managing conditional class names.
143-143: LGTM: Clean selection tracking implementation
The selection logic is straightforward and effective, using the deployment's shortCode to track the selected row.
When you click on a table row on the Deployments page to open the side menu, the table row stays selected
Summary by CodeRabbit
New Features
Bug Fixes