Adjusted the view change button position #9172
Conversation
WalkthroughThe changes in this pull request involve modifications to the Changes
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
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. |
![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 (2)
src/components/Resource/ResourceList.tsx (1)
221-226: Consider adding a data-testid attributeTo ensure the button positioning can be verified through automated testing, consider adding data-testid attributes to the button container and buttons.
- <div className="mt-2 flex w-full flex-col gap-2 lg:w-fit lg:flex-row lg:gap-4"> + <div className="mt-2 flex w-full flex-col gap-2 lg:w-fit lg:flex-row lg:gap-4" data-testid="view-toggle-container"> - <ButtonV2 className="py-[11px]" onClick={onBoardViewBtnClick}> + <ButtonV2 className="py-[11px]" onClick={onBoardViewBtnClick} data-testid="board-view-button"> <CareIcon icon="l-list-ul" className="rotate-90" /> {t("board_view")} </ButtonV2> - <AdvancedFilterButton + <AdvancedFilterButton + data-testid="advanced-filter-button" onClick={() => advancedFilter.setShow(true)} /> </div>src/components/Shifting/ShiftingList.tsx (1)
282-287: Review button container implementationThe flex container implementation with responsive classes (
flex-col→lg:flex-row) and width control (w-full→lg:w-fit) provides consistent button positioning across different screen sizes. The gap utilities (gap-2→lg:gap-4) ensure proper spacing in both layouts.Consider extracting this button container pattern into a reusable component to ensure consistent positioning across both Shifting and Resource pages.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
src/components/Resource/ResourceList.tsx(2 hunks)src/components/Shifting/ShiftingList.tsx(1 hunks)
🔇 Additional comments (4)
src/components/Resource/ResourceList.tsx (2)
192-192: LGTM: Good i18n practice!
Using the translation function for the title ensures consistent internationalization support.
223-225: Verify button positioning consistency
The AdvancedFilterButton placement within the flex container looks good and should maintain consistent positioning. However, let's verify that this implementation matches the ShiftingList component to ensure unified behavior across both pages.
✅ Verification successful
Let me verify the button positioning by checking the actual button implementations and their container structures.
Let me try one more search to get the ShiftingList button implementation:
Button positioning is consistent across components
The AdvancedFilterButton implementation in ResourceList matches the ShiftingList component exactly:
- Both use the same flex container with identical classes:
mt-2 flex w-full flex-col gap-2 lg:w-fit lg:flex-row lg:gap-4 - Both have the same button arrangement with ButtonV2 and AdvancedFilterButton
- Both maintain consistent padding with
py-[11px]on the ButtonV2 component
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify consistent button container implementation across components
# Check if the same flex container classes are used in ShiftingList.tsx
rg -A 2 -B 2 "mt-2 flex w-full flex-col gap-2 lg:w-fit lg:flex-row lg:gap-4" src/components/Shifting/
Length of output: 474
Script:
#!/bin/bash
# Check the AdvancedFilterButton implementation in ResourceList
rg -A 5 -B 5 "AdvancedFilterButton" src/components/Resource/ResourceList.tsx
# Check the button implementation in ShiftingList
rg -A 5 -B 5 "ButtonV2.*className=\"py-\[11px\]\"" src/components/Shifting/ShiftingList.tsx
Length of output: 1071
Script:
#!/bin/bash
# Search for the flex container and surrounding button implementation in ShiftingList
rg -A 10 -B 10 "mt-2 flex w-full flex-col gap-2 lg:w-fit lg:flex-row lg:gap-4" src/components/Shifting/ShiftingList.tsx
Length of output: 948
src/components/Shifting/ShiftingList.tsx (2)
284-286: Ensure consistent button positioning across views
The AdvancedFilterButton placement looks good, but verify that this implementation matches the Resource page to maintain consistency.
Let's check the Resource page implementation:
✅ Verification successful
Button positioning implementation matches across views
The verification confirms that both Resource and Shifting pages implement identical button container structures:
- Same flex container classes:
flex w-full flex-col gap-2 lg:w-fit lg:flex-row lg:gap-4 - Consistent button padding:
py-[11px] - Identical AdvancedFilterButton placement after the view toggle button
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Compare button implementations between Shifting and Resource pages
# Check for similar button container structure in ResourceList.tsx
rg -A 5 "flex.*w-full.*flex-col.*gap-2.*lg:w-fit.*lg:flex-row" src/components/Resource/
Length of output: 1211
282-283: Verify view transition behavior
The BoardView button implementation preserves query parameters during view transition, which is essential for maintaining filter state. The padding class py-[11px] ensures consistent button height.
Let's verify the view transition implementation in both components:
✅ Verification successful
View transition behavior is correctly implemented
The verification confirms consistent view transition behavior across both Shifting and Resource components:
- Both ShiftingList and ShiftingBoard correctly preserve query parameters (
qParams) during navigation - Navigation paths are correctly implemented as pairs:
/shifting/list↔️ /shifting/board/resource/list↔️ /resource/board
- Icon and text labels are appropriately used for view switching buttons
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check view transition implementations
# Look for navigation patterns between List and Board views
rg -A 3 "navigate\(.*/(shifting|resource)/(list|board)" src/components/
Length of output: 1396
Proposed Changes
Screen Recording:
Recording.2024-11-21.122035.mp4
@ohcnetwork/care-fe-code-reviewers
Merge Checklist
Summary by CodeRabbit
Summary by CodeRabbit
New Features
Bug Fixes
Style