Fix: UI Issues in Data Fetch Scroll, Text Area Overflow, and User Profile Navigation in notes tab #10200
Conversation
…in EncounterNotesTab
…o shaurya/fix-notes
…o shaurya/fix-notes
WalkthroughThe pull request modifies the Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant C as EncounterNotesTab Component
participant R as raviger (navigate)
participant P as User Profile Page
U->>C: Click on avatar/username
C->>C: Call navigateToUser()
C->>R: Generate URL with facilityId and username
R->>P: Redirect user to profile page
sequenceDiagram
participant M as Message System
participant C as EncounterNotesTab Component
participant S as Scroll Handler
M->>C: New message or thread change
C->>C: Set scrollToBottom state to true
C->>S: Check scrollToBottom condition
S->>C: Trigger scrolling action
C->>C: Reset scrollToBottom state to false
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Tip 🌐 Web search-backed reviews and chat
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
🧹 Nitpick comments (1)
src/pages/Encounters/tabs/EncounterNotesTab.tsx (1)
Line range hint
1-1: Consider adding error boundaries.While the implementation is solid, consider wrapping the component with an error boundary to gracefully handle runtime errors and provide fallback UI.
+import { ErrorBoundary } from '@/components/Common/ErrorBoundary'; + export const EncounterNotesTab = ({ encounter }: EncounterTabProps) => { // ... existing code ... return ( + <ErrorBoundary fallback={<div>Error loading notes. Please try again.</div>}> <div className="flex h-[calc(100vh-12rem)]"> {/* ... existing JSX ... */} </div> + </ErrorBoundary> ); };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
cypress/support/commands.ts(1 hunks)src/components/Resource/ResourceBoard.tsx(1 hunks)src/pages/Encounters/tabs/EncounterNotesTab.tsx(10 hunks)
✅ Files skipped from review due to trivial changes (1)
- src/components/Resource/ResourceBoard.tsx
🔇 Additional comments (5)
cypress/support/commands.ts (1)
65-65: LGTM! Important fix for Cypress command chain.Adding the
returnstatement ensures proper promise chain handling in thegetAttachedcommand, preventing potential race conditions in tests.src/pages/Encounters/tabs/EncounterNotesTab.tsx (4)
124-128: LGTM! User profile navigation implementation.The implementation correctly uses the facility slug for constructing the profile URL and adds click handlers to both avatar and username elements.
Also applies to: 146-150, 166-169
312-312: LGTM! Improved scroll behavior control.The new
scrollToBottomstate variable and modified scroll logic effectively prevent unwanted scrolling while ensuring proper scroll behavior when needed (initial load, new messages).Also applies to: 391-391, 408-415
630-630: LGTM! Fixed text area overflow.The
max-height-[150px]class effectively prevents infinite expansion while maintaining usability.
598-606: LGTM! Enhanced loading indicator UI.The new loading indicator provides better visual feedback with centered positioning and proper contrast.
shauryag2002
changed the title
|
👋 Hi, @shauryag2002, This message is automatically generated by prince-chrismc/label-merge-conflicts-action so don't hesitate to report issues/improvements there. |
| @@ -393,8 +405,14 @@ export const EncounterNotesTab = ({ encounter }: EncounterTabProps) => { | |||
|
|
|||
| // Scroll to bottom on initial load and thread change | |||
| useEffect(() => { | |||
| if (messagesData && !messagesLoading && !isFetchingNextPage) { | |||
| if ( | |||
There was a problem hiding this comment.
The issue with this approach is that it will just scroll to the top. Instead it should scroll to the very bottom of the newly loaded data, so navigating the conversation would be seamless for the user.
There was a problem hiding this comment.
I'm currently stuck on implementing this properly. Right now, the scroll jumps to the top instead of smoothly moving to the bottom of the newly loaded data. Could you guide me on how to fix this in code and achieve the desired behavior?
There was a problem hiding this comment.
I was looking into a few different approaches yesterday, but wasn't satisfied with the result 🤔 Let's remove the changes for scroll behavior for now, I'll take that up. Clear the merge conflicts so we can get this PR merged.
…o shaurya/fix-notes
|
@Jacobjeevan can you reply back the query |
|
@shauryag2002 what is the status on this PR |
Sorry for delay. |
…o shaurya/fix-notes
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
.unimportedrc.json(1 hunks)src/pages/Encounters/tabs/EncounterNotesTab.tsx(10 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: cypress-run (1)
🔇 Additional comments (5)
src/pages/Encounters/tabs/EncounterNotesTab.tsx (5)
17-17: LGTM: User profile navigation implementation.The implementation correctly addresses the unresponsive user avatar and username issue by adding navigation functionality.
Also applies to: 52-52, 124-128
146-146: LGTM: Click handler implementation.Click handlers are properly added to both the avatar and username elements, providing consistent navigation behavior.
Also applies to: 167-170
319-319: LGTM: Scroll behavior implementation.The scroll behavior has been improved by adding proper state management and conditions for when to scroll, addressing the previous scroll issues.
Also applies to: 398-398, 412-420
602-612: LGTM: Loading indicator improvements.The loading indicator has been enhanced with a centered design and clear visual feedback, improving user experience during data fetching.
634-634: LGTM: Text area overflow fix.The addition of
max-heightproperly addresses the infinite expansion issue of the input text area.
.unimportedrc.json
Outdated
| [ | ||
| "tsx/cjs", | ||
| [ | ||
| "node_modules\\find-cypress-specs\\src\\index.js" | ||
| ] | ||
| ], |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Remove duplicate path entries.
The added entries with backslashes are redundant as the existing entries with forward slashes (lines 33-38 and 46-50) already cover these paths. Modern path handling in Node.js and most build tools automatically normalize path separators.
- [
- "tsx/cjs",
- [
- "node_modules\\find-cypress-specs\\src\\index.js"
- ]
- ],
- [
- "virtual:pwa-register",
- [
- "src\\index.tsx"
- ]
- ]Also applies to: 51-56
.unimportedrc.json
Outdated
| [ | ||
| "tsx/cjs", | ||
| [ | ||
| "node_modules\\find-cypress-specs\\src\\index.js" | ||
| ] | ||
| ], | ||
| [ | ||
| "virtual:pwa-register", | ||
| [ | ||
| "src/index.tsx" | ||
| ] | ||
| ], | ||
| [ | ||
| "virtual:pwa-register", | ||
| [ | ||
| "src\\index.tsx" | ||
| ] |
There was a problem hiding this comment.
These changes occurred due to running npx unimported -u.
Why?
The pre-commit hook failed due to unresolved imports detected by unimported, preventing the commit.
Root Cause
unimported flagged two unresolved imports:
virtual:pwa-registerinsrc/index.tsxtsx/cjsinnode_modules/find-cypress-specs/src/index.js
There was a problem hiding this comment.
❌ Unimported: Initializing
Summary (unimported v1.31.1)
| Category | Count |
|---|---|
| Entry Files | 11 |
| Unresolved Imports | 2 |
| Unused Dependencies | 0 |
| Unimported Files | 0 |
📂 Entry Files
src/index.tsxvite.config.mtstailwind.config.jscypress.config.tsscripts/scripts/generate-build-version.jsscripts/generate-sbom-data.tsscripts/generate-supported-browsers.mjsscripts/install-platform-deps.tsscripts/setup-care-apps.tsscripts/sort-locales.js
⚠️ Unresolved Imports (2)
| # | Import | Location |
|---|---|---|
| 1 | virtual:pwa-register |
src/index.tsx |
| 2 | tsx/cjs |
node_modules/find-cypress-specs/src/index.js |
🔍 Suggested Fix
Inspect the results and run:
npx unimported -u
There was a problem hiding this comment.
these imports are already ignored in the config. just the slashes are different.
we do not encourage using windows for development.
discard these changes.
There was a problem hiding this comment.
Done, @rithviknishad
.unimportedrc.json
Outdated
| [ | ||
| "tsx/cjs", | ||
| [ | ||
| "node_modules\\find-cypress-specs\\src\\index.js" | ||
| ] | ||
| ], | ||
| [ | ||
| "virtual:pwa-register", | ||
| [ | ||
| "src/index.tsx" | ||
| ] | ||
| ], | ||
| [ | ||
| "virtual:pwa-register", | ||
| [ | ||
| "src\\index.tsx" | ||
| ] |
There was a problem hiding this comment.
these imports are already ignored in the config. just the slashes are different.
we do not encourage using windows for development.
discard these changes.
Proposed Changes
Fixes UI Issues in Data Fetch Scroll, Text Area Overflow, and User Profile Navigation #9918
Fixed cypress command error.
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