Fix PatientUsers card | Dialog | AddUserSheet | UserSelector Overfl…

…ow | Change Remove-button background | Modify Translation (#10172)
ohcnetwork · Feb 13, 2025 · ad5cfa4 · ad5cfa4
1 parent d9bf2c7
commit ad5cfa4
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 15 deletions.
diff --git a/public/locale/en.json b/public/locale/en.json
@@ -393,7 +393,7 @@
   "are_you_still_watching": "Are you still watching?",
   "are_you_sure_want_to_delete": "Are you sure you want to delete {{name}}?",
   "are_you_sure_want_to_delete_this_record": "Are you sure want to delete this record?",
-  "are_you_sure_want_to_remove": "Are you sure you want to remove {{name}} from the patient? This action cannot be undone",
+  "are_you_sure_want_to_remove": "Are you sure you want to remove <strong>{{name}}</strong> from the patient? This action cannot be undone",
   "ari": "ARI - Acute Respiratory illness",
   "arrived": "Arrived",
   "as_needed_prn": "As Needed / PRN",

diff --git a/src/components/Common/UserSelector.tsx b/src/components/Common/UserSelector.tsx
@@ -18,6 +18,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
+import { TooltipComponent } from "@/components/ui/tooltip";
 
 import { Avatar } from "@/components/Common/Avatar";
 
@@ -69,7 +70,11 @@ export default function UserSelector({
                 name={formatName(selected)}
                 className="size-6 rounded-full"
               />
-              <span>{formatName(selected)}</span>
+              <TooltipComponent content={formatName(selected)} side="bottom">
+                <p className="font-medium text-gray-900 truncate max-w-56 sm:max-w-48 md:max-w-64 lg:max-w-64 xl:max-w-36">
+                  {formatName(selected)}
+                </p>
+              </TooltipComponent>
             </div>
           ) : (
             <span>{placeholder || t("select_user")}</span>

diff --git a/src/components/Patient/PatientDetailsTab/PatientUsers.tsx b/src/components/Patient/PatientDetailsTab/PatientUsers.tsx
@@ -1,6 +1,7 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { t } from "i18next";
 import { useState } from "react";
+import { Trans } from "react-i18next";
 import { toast } from "sonner";
 
 import { cn } from "@/lib/utils";
@@ -34,6 +35,7 @@ import {
   SheetTitle,
   SheetTrigger,
 } from "@/components/ui/sheet";
+import { TooltipComponent } from "@/components/ui/tooltip";
 
 import { Avatar } from "@/components/Common/Avatar";
 import UserSelector from "@/components/Common/UserSelector";
@@ -135,9 +137,11 @@ function AddUserSheet({ patientId }: AddUserSheetProps) {
                     className="h-12 w-12"
                   />
                   <div className="flex flex-col flex-1">
-                    <span className="font-medium text-lg">
-                      {formatDisplayName(selectedUser)}
-                    </span>
+                    <TooltipComponent content={formatDisplayName(selectedUser)}>
+                      <p className="font-medium text-gray-900 truncate max-w-56 sm:max-w-48 md:max-w-64 lg:max-w-64 xl:max-w-36">
+                        {formatDisplayName(selectedUser)}
+                      </p>
+                    </TooltipComponent>
                     <span className="text-sm text-gray-500">
                       {selectedUser.email}
                     </span>
@@ -239,7 +243,7 @@ export const PatientUsers = (props: PatientProps) => {
   const ManageUsers = () => {
     if (!users?.results?.length) {
       return (
-        <div className="h-full text-center space-y-2 mt-2 text-center rounded-lg bg-white px-7 py-12 border border-secondary-300 text-lg text-secondary-600">
+        <div className="h-full space-y-2 mt-2 text-center rounded-lg bg-white px-7 py-12 border border-secondary-300 text-lg text-secondary-600">
           {t("no_user_assigned")}
         </div>
       );
@@ -249,7 +253,7 @@ export const PatientUsers = (props: PatientProps) => {
         {users?.results.map((user) => (
           <div
             key={user.id}
-            className="rounded-lg border border-gray-200 bg-white p-4 shadow-sm"
+            className="rounded-lg border border-gray-200 bg-white p-4 shadow-sm relative"
           >
             <div className="flex items-start justify-between">
               <div className="flex items-start space-x-4">
@@ -259,10 +263,20 @@ export const PatientUsers = (props: PatientProps) => {
                   imageUrl={user.profile_picture_url}
                 />
                 <div>
-                  <h3 className="text-sm font-medium text-gray-900">
-                    {formatDisplayName(user)}
+                  <h3 className="inline-flex">
+                    <TooltipComponent content={formatDisplayName(user)}>
+                      <p className="text-sm font-medium text-gray-900 truncate max-w-32 sm:max-w-96 md:max-w-32 lg:max-w-28 xl:max-w-36">
+                        {formatDisplayName(user)}
+                      </p>
+                    </TooltipComponent>
                   </h3>
-                  <p className="text-sm text-gray-500">{user.username}</p>
+                  <p>
+                    <TooltipComponent content={user.username}>
+                      <p className="text-sm text-gray-500 truncate sm:max-w-96 md:max-w-32 lg:max-w-32 xl:max-w-36">
+                        {user.username}
+                      </p>
+                    </TooltipComponent>
+                  </p>
                 </div>
               </div>
               <AlertDialog>
@@ -271,17 +285,24 @@ export const PatientUsers = (props: PatientProps) => {
                     variant="ghost"
                     size="icon"
                     data-cy="patient-user-remove-button"
+                    className="absolute top-0 right-0"
                   >
-                    <CareIcon icon="l-trash" className="h-4 w-4" />
+                    <CareIcon icon="l-trash" />
                   </Button>
                 </AlertDialogTrigger>
                 <AlertDialogContent>
                   <AlertDialogHeader>
                     <AlertDialogTitle>{t("remove_user")}</AlertDialogTitle>
                     <AlertDialogDescription>
-                      {t("are_you_sure_want_to_remove", {
-                        name: formatDisplayName(user),
-                      })}
+                      <Trans
+                        i18nKey="are_you_sure_want_to_remove"
+                        values={{ name: formatDisplayName(user) }}
+                        components={{
+                          strong: (
+                            <strong className="inline-block align-bottom truncate max-w-32 sm:max-w-96 md:max-w-32 lg:max-w-28 xl:max-w-36" />
+                          ),
+                        }}
+                      />
                     </AlertDialogDescription>
                   </AlertDialogHeader>
                   <AlertDialogFooter>

diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
@@ -30,7 +30,7 @@ TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 const TooltipComponent = React.forwardRef<
   React.ElementRef<typeof TooltipContent>,
   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ children, content, sideOffset = 4, className }, ref) => {
+>(({ children, content, sideOffset = 4, className, side }, ref) => {
   const [open, setOpen] = React.useState(false);
   return (
     <TooltipProvider>
@@ -45,6 +45,7 @@ const TooltipComponent = React.forwardRef<
             "z-50 overflow-hidden rounded-md bg-gray-900 px-3 py-1.5 text-xs text-gray-50 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:bg-gray-50 dark:text-gray-900",
             className,
           )}
+          side={side}
         >
           {content}
         </TooltipContent>