Add tooltips to facility, organization, and patient switchers #10766
Conversation
✅ Deploy Preview for care-ohc ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
WalkthroughThis pull request adds tooltip functionality to three sidebar components. In the FacilitySwitcher and OrganizationSwitcher components, a new Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant PS as PatientSwitcher
participant TT as TooltipTrigger
participant TC as TooltipContent
U->>PS: Hover over patient selector
PS->>TT: Activate tooltip trigger
TT->>TC: Request tooltip content
TC-->>U: Display tooltip with selected patient's name
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
✨ Finishing Touches
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
🧹 Nitpick comments (3)
src/components/ui/sidebar/facility-switcher.tsx (1)
43-43: Add fallback text for tooltip when no facility is selected.For consistency with the organization switcher and button text, consider using the fallback translation when no facility is selected.
- tooltip={selectedFacility?.name} + tooltip={selectedFacility?.name || t("select_facility")}src/components/ui/sidebar/patient-switcher.tsx (2)
68-85: Consider extracting the expanded view into a separate component.The conditional rendering for the open state contains complex nested JSX. Consider extracting it into a separate component for better readability and maintainability.
+ const ExpandedPatientView = ({ patient }: { patient: Patient }) => ( + <div className="flex flex-row justify-between items-center gap-2 w-full text-primary-800"> + <Avatar name={patient?.name || "User"} className="h-5 w-5" /> + <div className="flex flex-row items-center justify-between w-full gap-2"> + <span className="font-semibold truncate max-w-32">{patient?.name}</span> + <span className="text-xs text-secondary-600">{t("switch")}</span> + </div> + </div> + ); {open && <ExpandedPatientView patient={patientUserContext.selectedPatient} />}
86-96: Consider extracting the collapsed view into a separate component.Similarly, the collapsed state rendering could be extracted into a separate component.
+ const CollapsedPatientView = ({ patient }: { patient: Patient }) => ( + <div className="flex flex-row items-center -ml-1.5"> + <Avatar name={patient?.name || "User"} className="h-4 w-4" /> + </div> + ); {!open && <CollapsedPatientView patient={patientUserContext.selectedPatient} />}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/components/ui/sidebar/facility-switcher.tsx(1 hunks)src/components/ui/sidebar/organization-switcher.tsx(1 hunks)src/components/ui/sidebar/patient-switcher.tsx(2 hunks)
🔇 Additional comments (2)
src/components/ui/sidebar/organization-switcher.tsx (1)
45-49: LGTM! Good use of i18n for tooltip text.The tooltip implementation is consistent with the button text and properly internationalized.
src/components/ui/sidebar/patient-switcher.tsx (1)
100-104: LGTM! Good use of conditional tooltip visibility.The tooltip is correctly shown only when the sidebar is collapsed, which prevents redundant information when the full patient name is already visible.
Proposed Changes
@ohcnetwork/care-fe-code-reviewers
Merge Checklist
Summary by CodeRabbit