Fix: UI Issues in Data Fetch Scroll, Text Area Overflow, and User Profile Navigation in notes tab #9919
Conversation
…in EncounterNotesTab
WalkthroughThe pull request introduces enhancements to 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)
🧰 Additional context used🪛 eslintsrc/pages/Encounters/tabs/EncounterNotesTab.tsx[error] 183-183: Replace (prettier/prettier) 🪛 GitHub Check: lintsrc/pages/Encounters/tabs/EncounterNotesTab.tsx[failure] 183-183: 🪛 GitHub Check: cypress-run (1)src/pages/Encounters/tabs/EncounterNotesTab.tsx[failure] 183-183: 🪛 GitHub Actions: Lint Code Basesrc/pages/Encounters/tabs/EncounterNotesTab.tsx[error] 183-183: Prettier formatting error: Incorrect formatting of span element attributes. The attributes should be properly aligned on separate lines. 🪛 GitHub Actions: Cypress Testssrc/pages/Encounters/tabs/EncounterNotesTab.tsx[error] 183-183: Replace 🔇 Additional comments (5)
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 failed.
|
![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 (2)
src/pages/Encounters/tabs/EncounterNotesTab.tsx (2)
428-435: Consider improving scroll behavior for better UXWhile the current implementation fixes the automatic scrolling issue, consider adding a "scroll to bottom" button that appears when new messages arrive and the user has scrolled up. This would give users more control over the scroll behavior.
useEffect(() => { if ( messagesData && !messagesLoading && !isFetchingNextPage && (messagesData.pages.length === 1 || scrollToBottom) ) { messagesEndRef.current?.scrollIntoView(); setScrollToBottom(false); } }, [selectedThread, messagesData, messagesLoading, isFetchingNextPage]); + +const [showScrollButton, setShowScrollButton] = useState(false); + +useEffect(() => { + const handleScroll = (e: Event) => { + const element = e.target as HTMLElement; + const isScrolledUp = element.scrollHeight - element.scrollTop > element.clientHeight + 100; + setShowScrollButton(isScrolledUp); + }; + + const scrollArea = document.querySelector('.scroll-area'); + scrollArea?.addEventListener('scroll', handleScroll); + return () => scrollArea?.removeEventListener('scroll', handleScroll); +}, []);
648-648: Consider using a CSS variable for the max heightWhile the max-height constraint effectively prevents text area overflow, consider using a CSS variable for better maintainability and consistency across the application.
-className="max-h-[150px]" +className="max-h-[var(--textarea-max-height)]"Add this to your CSS:
:root { --textarea-max-height: 150px; }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/pages/Encounters/tabs/EncounterNotesTab.tsx(10 hunks)
🔇 Additional comments (2)
src/pages/Encounters/tabs/EncounterNotesTab.tsx (2)
141-145: LGTM: User profile navigation implementationThe implementation successfully addresses the unresponsive user avatar and username issue by adding click handlers that navigate to the user's profile page.
Also applies to: 163-166, 186-189
616-625: LGTM: Loading indicator implementationThe new loading indicator provides clear feedback during data fetching without disrupting the scroll position, effectively addressing the loading skeleton issue mentioned in the PR objectives.
|
👋 Hi, @shauryag2002, This message is automatically generated by prince-chrismc/label-merge-conflicts-action so don't hesitate to report issues/improvements there. |
…o shaurya/fix-notes
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/pages/Encounters/tabs/EncounterNotesTab.tsx (1)
648-648: LGTM! Text area overflow prevention.The
max-heightconstraint prevents layout overflow while maintaining usability.Consider adding
aria-labelto improve accessibility:- className="max-h-[150px]" + className="max-h-[150px]" + aria-label={t("encounter_notes__message_input")}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/pages/Encounters/tabs/EncounterNotesTab.tsx(10 hunks)
🧰 Additional context used
🪛 eslint
src/pages/Encounters/tabs/EncounterNotesTab.tsx
[error] 163-166: Replace ⏎················className="flex·cursor-pointer"⏎················onClick={navigateToUser}⏎·············· with ·className="flex·cursor-pointer"·onClick={navigateToUser}
(prettier/prettier)
🪛 GitHub Check: cypress-run (1)
src/pages/Encounters/tabs/EncounterNotesTab.tsx
[failure] 163-163:
Replace ⏎················className="flex·cursor-pointer"⏎················onClick={navigateToUser}⏎·············· with ·className="flex·cursor-pointer"·onClick={navigateToUser}
🪛 GitHub Check: lint
src/pages/Encounters/tabs/EncounterNotesTab.tsx
[failure] 163-163:
Replace ⏎················className="flex·cursor-pointer"⏎················onClick={navigateToUser}⏎·············· with ·className="flex·cursor-pointer"·onClick={navigateToUser}
🪛 GitHub Actions: Lint Code Base
src/pages/Encounters/tabs/EncounterNotesTab.tsx
[error] 163-163: Prettier formatting error: Incorrect line breaks in JSX attributes. The className and onClick attributes should be on the same line.
🪛 GitHub Actions: Cypress Tests
src/pages/Encounters/tabs/EncounterNotesTab.tsx
[error] 163-163: Code formatting error: Improper indentation and line breaks
🪛 GitHub Actions: Deploy Care Fe
src/pages/Encounters/tabs/EncounterNotesTab.tsx
[error] 163-163: Replace multiline className and onClick props with single line format
🔇 Additional comments (4)
src/pages/Encounters/tabs/EncounterNotesTab.tsx (4)
16-16: LGTM! New imports support user profile navigation.The addition of
navigateanduseSlughook provides the necessary functionality for implementing user profile navigation.Also applies to: 51-51
141-145: LGTM! User profile navigation implementation.The
navigateToUserfunction correctly constructs the navigation path using the facility ID and username.
332-332: LGTM! Improved scroll behavior during data fetch.The scroll behavior has been improved by:
- Adding
scrollToBottomstate to control when scrolling occurs- Only scrolling on initial load, thread change, or after sending a message
- Preventing automatic scrolling during data fetch
Also applies to: 411-411, 428-435
616-625: LGTM! Non-intrusive loading indicator.The new loading indicator is well-implemented:
- Floating design prevents layout shifts
- Includes loading animation and translated text
- Maintains scroll position during data fetch
| <div | ||
| className="flex cursor-pointer" | ||
| onClick={navigateToUser} | ||
| > |
There was a problem hiding this comment.
Fix formatting issues in click handlers.
The pipeline is failing due to formatting issues. Please fix the line breaks in the JSX attributes.
Apply this diff to fix the formatting:
- <div
- className="flex cursor-pointer"
- onClick={navigateToUser}
- >
+ <div className="flex cursor-pointer" onClick={navigateToUser}>- <span
- className="text-xs text-gray-500 mb-1 cursor-pointer"
- onClick={navigateToUser}
- >
+ <span className="text-xs text-gray-500 mb-1 cursor-pointer" onClick={navigateToUser}>Also applies to: 186-189
🧰 Tools
🪛 eslint
[error] 163-166: Replace ⏎················className="flex·cursor-pointer"⏎················onClick={navigateToUser}⏎·············· with ·className="flex·cursor-pointer"·onClick={navigateToUser}
(prettier/prettier)
🪛 GitHub Check: cypress-run (1)
[failure] 163-163:
Replace ⏎················className="flex·cursor-pointer"⏎················onClick={navigateToUser}⏎·············· with ·className="flex·cursor-pointer"·onClick={navigateToUser}
🪛 GitHub Check: lint
[failure] 163-163:
Replace ⏎················className="flex·cursor-pointer"⏎················onClick={navigateToUser}⏎·············· with ·className="flex·cursor-pointer"·onClick={navigateToUser}
🪛 GitHub Actions: Lint Code Base
[error] 163-163: Prettier formatting error: Incorrect line breaks in JSX attributes. The className and onClick attributes should be on the same line.
🪛 GitHub Actions: Cypress Tests
[error] 163-163: Code formatting error: Improper indentation and line breaks
🪛 GitHub Actions: Deploy Care Fe
[error] 163-163: Replace multiline className and onClick props with single line format
Proposed Changes
Fixes UI Issues in Data Fetch Scroll, Text Area Overflow, and User Profile Navigation #9918
Scroll Behavior on Data Fetch:
Loading...appears without forcing the component to scroll to the bottom.Resizable Input Text Area Overflow:
Unresponsive User Avatar and Username:
@ohcnetwork/care-fe-code-reviewers
Merge Checklist
Summary by CodeRabbit