From b57e25c22404c2d9c635fed2e07bb488afcca80f Mon Sep 17 00:00:00 2001
From: Jacob John Jeevan <40040905+Jacobjeevan@users.noreply.github.com>
Date: Thu, 2 Jan 2025 19:45:06 +0530
Subject: [PATCH] Minor enhancements (#9631)

---
 src/components/Common/UserSelector.tsx        | 12 +++++++++---
 src/pages/Encounters/EncounterList.tsx        | 19 ++++++++++++++++---
 .../Encounters/tabs/EncounterFilesTab.tsx     |  6 +++---
 .../components/LinkFacilityUserSheet.tsx      | 11 +++++++++--
 .../Organization/components/LinkUserSheet.tsx |  1 +
 5 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/src/components/Common/UserSelector.tsx b/src/components/Common/UserSelector.tsx
index 986dfb5091d..b28fbeb48c9 100644
--- a/src/components/Common/UserSelector.tsx
+++ b/src/components/Common/UserSelector.tsx
@@ -33,6 +33,7 @@ interface Props {
   onChange: (user: UserBase) => void;
   placeholder?: string;
   noOptionsMessage?: string;
+  popoverClassName?: string;
 }
 
 export default function UserSelector({
@@ -40,6 +41,7 @@ export default function UserSelector({
   onChange,
   placeholder,
   noOptionsMessage,
+  popoverClassName,
 }: Props) {
   const { t } = useTranslation();
   const [open, setOpen] = useState(false);
@@ -55,8 +57,8 @@ export default function UserSelector({
   const users = data?.results || [];
 
   return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
+    <Popover open={open} onOpenChange={setOpen} modal={true}>
+      <PopoverTrigger asChild className={popoverClassName}>
         <Button
           variant="outline"
           role="combobox"
@@ -77,7 +79,11 @@ export default function UserSelector({
           <CaretDownIcon className="ml-auto" />
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="p-0" align="start">
+      <PopoverContent
+        className="p-0 w-[var(--radix-popover-trigger-width)] max-w-[--radix-popover-content-available-width]"
+        align="start"
+        sideOffset={4}
+      >
         <Command filter={() => 1}>
           <CommandInput
             placeholder={t("search")}
diff --git a/src/pages/Encounters/EncounterList.tsx b/src/pages/Encounters/EncounterList.tsx
index 39bc5537a1b..a1fb5da391c 100644
--- a/src/pages/Encounters/EncounterList.tsx
+++ b/src/pages/Encounters/EncounterList.tsx
@@ -184,13 +184,23 @@ export function EncounterList({
       queryParams: {
         ...buildQueryParams(status, facilityId, encounterClass, priority),
         name,
-        encounter_id,
         external_identifier,
         limit: resultsPerPage,
         offset: ((qParams.page || 1) - 1) * resultsPerPage,
       },
     }),
-    enabled: !propEncounters,
+    enabled: !propEncounters && !encounter_id,
+  });
+
+  const { data: queryEncounter } = useQuery<Encounter>({
+    queryKey: ["encounter", encounter_id],
+    queryFn: query(routes.encounter.get, {
+      pathParams: { id: encounter_id },
+      queryParams: {
+        facility: facilityId,
+      },
+    }),
+    enabled: !!encounter_id,
   });
 
   const searchOptions = [
@@ -220,7 +230,10 @@ export function EncounterList({
     },
   ];
 
-  const encounters = propEncounters || queryEncounters?.results || [];
+  const encounters =
+    propEncounters ||
+    queryEncounters?.results ||
+    (queryEncounter ? [queryEncounter] : []);
 
   const { t } = useTranslation();
 
diff --git a/src/pages/Encounters/tabs/EncounterFilesTab.tsx b/src/pages/Encounters/tabs/EncounterFilesTab.tsx
index 9b89fe926e4..053637b75d8 100644
--- a/src/pages/Encounters/tabs/EncounterFilesTab.tsx
+++ b/src/pages/Encounters/tabs/EncounterFilesTab.tsx
@@ -28,7 +28,7 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Tabs, TabsContent } from "@/components/ui/tabs";
 import {
   Tooltip,
   TooltipContent,
@@ -490,7 +490,7 @@ export const EncounterFilesTab = (props: EncounterTabProps) => {
       >
         <div className="mx-2 flex flex-col flex-wrap gap-3 sm:flex-row justify-between">
           <div className="flex sm:flex-row flex-wrap flex-col gap-4 sm:items-center">
-            <TabsList className="flex flex-row flex-wrap gap-2 h-auto">
+            {/* <TabsList className="flex flex-row flex-wrap gap-2 h-auto">
               {fileCategories.map((category) => (
                 <TabsTrigger
                   key={category.value}
@@ -500,7 +500,7 @@ export const EncounterFilesTab = (props: EncounterTabProps) => {
                   {category.label}
                 </TabsTrigger>
               ))}
-            </TabsList>
+            </TabsList> */}
             <FilterButton />
           </div>
           <FileUploadButtons />
diff --git a/src/pages/FacilityOrganization/components/LinkFacilityUserSheet.tsx b/src/pages/FacilityOrganization/components/LinkFacilityUserSheet.tsx
index 0c1f999d251..c0cb464b2b1 100644
--- a/src/pages/FacilityOrganization/components/LinkFacilityUserSheet.tsx
+++ b/src/pages/FacilityOrganization/components/LinkFacilityUserSheet.tsx
@@ -118,7 +118,7 @@ export default function LinkFacilityUserSheet({
           Link User
         </Button>
       </SheetTrigger>
-      <SheetContent>
+      <SheetContent className="w-full sm:max-w-md overflow-y-auto p-8">
         <SheetHeader>
           <SheetTitle>Link User to Facility</SheetTitle>
           <SheetDescription>
@@ -131,6 +131,7 @@ export default function LinkFacilityUserSheet({
             onChange={handleUserChange}
             placeholder="Search for a user"
             noOptionsMessage="No users found"
+            popoverClassName="w-full"
           />
           {selectedUser && (
             <div className="space-y-4">
@@ -173,7 +174,13 @@ export default function LinkFacilityUserSheet({
                   <SelectTrigger className="h-12">
                     <SelectValue placeholder="Select a role" />
                   </SelectTrigger>
-                  <SelectContent>
+                  <SelectContent
+                    position="popper"
+                    className="max-h-[calc(100vh-60vh)] w-[var(--radix-select-trigger-width)] max-w-[var(--radix-select-content-available-width)] overflow-y-auto"
+                    sideOffset={4}
+                    side="bottom"
+                    avoidCollisions={true}
+                  >
                     {roles?.results?.map((role) => (
                       <SelectItem key={role.id} value={role.id}>
                         <div className="flex flex-col text-left">
diff --git a/src/pages/Organization/components/LinkUserSheet.tsx b/src/pages/Organization/components/LinkUserSheet.tsx
index ef31f2d475f..ea60a7bfb32 100644
--- a/src/pages/Organization/components/LinkUserSheet.tsx
+++ b/src/pages/Organization/components/LinkUserSheet.tsx
@@ -130,6 +130,7 @@ export default function LinkUserSheet({
             onChange={handleUserChange}
             placeholder="Search for a user"
             noOptionsMessage="No users found"
+            popoverClassName="w-full"
           />
           {selectedUser && (
             <div className="space-y-4">