Fix : DOM nesting Warning in BreadCrumbs.tsx #9941
Conversation
WalkthroughThe pull request modifies the Changes
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
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 (
|
✅ Deploy Preview for care-ohc ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
rithviknishad
added
invalid
|
@Rustix69 I assume this is still work in progress? |
|
mark it as draft until changes are completed |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
src/components/Common/Breadcrumbs.tsx (1)
73-90: Clean implementation of breadcrumb items!Good improvements:
- Proper semantic structure using BreadcrumbItem
- Clean conditional rendering between interactive and non-interactive items
- Consistent styling approach
Consider extracting the common Button props to reduce duplication:
const linkButtonProps = { asChild: true, variant: "link", className: "p-1 font-normal text-gray-800 hover:text-gray-700" } as const; // Usage <Button {...linkButtonProps}>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/Common/Breadcrumbs.tsx(3 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: OSSAR-Scan
🔇 Additional comments (3)
src/components/Common/Breadcrumbs.tsx (3)
12-12: LGTM! Good use of structured UI components.The addition of specialized UI components from the design system will help maintain consistent DOM hierarchy and styling.
98-114: Good improvements to the back button implementation!The back button is now properly structured with:
- Correct semantic hierarchy using BreadcrumbItem
- Proper button type attribute
- Clear styling classes
- Improved click handler logic
Line range hint
1-142: Overall great improvements to the breadcrumbs component!The changes successfully address the DOM nesting warnings by:
- Using proper semantic structure with BreadcrumbItem components
- Implementing clean conditional rendering
- Maintaining consistent styling and accessibility
A few items need attention:
- Implement the dropdown menu content
- Verify the intention behind showFullPath state
- Consider reducing Button props duplication
| <DropdownMenu> | ||
| {/* ... (dropdown menu content) ... */} | ||
| </DropdownMenu> |
There was a problem hiding this comment.
Implementation needed for dropdown menu content.
The dropdown menu content is currently commented out. Please implement the menu content to ensure proper functionality.
| @@ -57,7 +51,7 @@ | |||
| }: BreadcrumbsProps) { | |||
| const { goBack } = useAppHistory(); | |||
| const path = usePath(); | |||
| const [showFullPath, setShowFullPath] = useState(false); | |||
| const [showFullPath] = useState(false); | |||
There was a problem hiding this comment.
💡 Codebase verification
Replace useState with a constant boolean value
The showFullPath state is never updated since its setter has been removed. Since it's initialized as false and never changes, replace useState(false) with a constant:
const showFullPath = false;Or better yet, simplify the conditional rendering since showFullPath is always false:
{crumbs && crumbs.length > 1 && (
<BreadcrumbItem>
<DropdownMenu>
{/* dropdown content */}
</DropdownMenu>
</BreadcrumbItem>
)}🔗 Analysis chain
Verify if showFullPath state needs to be mutable.
The state setter for showFullPath has been removed, but the state is still used for conditional rendering. If this is intentional, consider using a constant instead of state.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search for any updates to showFullPath in the codebase
rg "setShowFullPath|showFullPath\s*=" --type typescript
Length of output: 92
Script:
#!/bin/bash
# Search for showFullPath usage and assignments
rg "showFullPath" -g "*.ts" -g "*.tsx" -A 2 -B 2
# Get the complete implementation of Breadcrumbs component
ast-grep --pattern 'const Breadcrumbs = $_: React.FC<$_> {
$$$
}'
Length of output: 1131
@rithviknishad The Code is running quite good. I had pushed the PR you may check it. The error was due to :
|
|
Closing as most of the changes doesn't make sense and is pretty much incomplete |
Screenshots :
Reviewers : @rithviknishad @ohcnetwork/care-fe-code-reviewers
Summary by CodeRabbit