Minor fix | Merge develop to Staging v24.18.0

.github/workflows/stale.yml

@@ -13,9 +13,9 @@ jobs:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
           stale-issue-label: "stale"
           stale-pr-label: "stale"
-          stale-issue-message: "Hi, @gigincg, @nihal467, @khavinshankar, @mathew-alex, @aparnacoronasafe, This issue has been automatically marked as stale because it has not had any recent activity."
+          stale-issue-message: "Hi, @coronasafe/care-frontend-maintainers, This issue has been automatically marked as stale because it has not had any recent activity."
           stale-pr-message: "Hi, This pr has been automatically marked as stale because it has not had any recent activity. It will be automatically closed if no further activity occurs for 7 more days. Thank you for your contributions."
-          close-pr-message: "Hi, @gigincg, @nihal467, @khavinshankar, @mathew-alex, This pr has been automatically closed because it has not had any recent activity. Thank you for your contributions. Feel free to repopen the pr."
+          close-pr-message: "Hi, @coronasafe/care-frontend-maintainers, This PR has been automatically closed due to inactivity. Thank you for your contributions. Feel free to re-open the PR."
           exempt-issue-labels: "blocked,waiting for related PR,waiting for back end,help wanted,work-in-progress,In Progress,wishlist,EPIC"
           exempt-pr-labels: "tested,needs testing,need Review,waiting for related PR,waiting for back end,help wanted,blocked,work-in-progress,In Progress"
           days-before-issue-stale: 14

cypress/e2e/users_spec/user_manage.cy.ts

@@ -33,7 +33,7 @@ describe("Manage User", () => {
     cy.awaitUrl("/users");
   });
 
-  it("linking skills for a  users and verify its reflection in profile", () => {
+  it("linking skills for users and verify its reflection in profile", () => {
     // select the district user and select one skill link and verify its profile reflection
     userPage.typeInSearchInput(usernameforworkinghour);
     userPage.checkUsernameText(usernameforworkinghour);
@@ -49,7 +49,7 @@ describe("Manage User", () => {
     manageUserPage.navigateToProfile();
     userCreationPage.verifyElementContainsText(
       "username-profile-details",
-      usernameforworkinghour
+      usernameforworkinghour,
     );
     manageUserPage.assertSkillInAlreadyLinkedSkills(linkedskill);
   });

src/Components/Facility/DoctorVideoSlideover.tsx

@@ -1,79 +1,57 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import SlideOver from "../../CAREUI/interactive/SlideOver";
 import { UserAssignedModel } from "../Users/models";
 import { SkillObjectModel } from "../Users/models";
 import CareIcon, { IconName } from "../../CAREUI/icons/CareIcon";
-import { relativeTime } from "../../Utils/utils";
+import { classNames, relativeTime } from "../../Utils/utils";
 import useAuthUser from "../../Common/hooks/useAuthUser";
 import { triggerGoal } from "../../Integrations/Plausible";
 import { Warn } from "../../Utils/Notifications";
 import Switch from "../../CAREUI/interactive/Switch";
 import useQuery from "../../Utils/request/useQuery";
 import routes from "../../Redux/api";
+import Loading from "../Common/Loading";
 
-enum FilterTypes {
-  ALL = "All",
-  DOCTOR = "Doctor",
-  NURSE = "Nurse",
-  TELEICU = "TeleICU Hub",
-}
+const UserGroups = {
+  ALL: "All",
+  DOCTOR: "Doctor",
+  NURSE: "Nurse",
+  TELEICU: "TeleICU Doctor",
+};
 
-interface DoctorDetails {
-  users: UserAssignedModel[];
-  type: FilterTypes.DOCTOR | FilterTypes.NURSE | FilterTypes.TELEICU;
-}
+type UserGroup = keyof typeof UserGroups;
+
+type UserAnnotatedWithGroup = UserAssignedModel & { group?: UserGroup };
 
 const isHomeUser = (user: UserAssignedModel, facilityId: string) =>
   user.home_facility_object?.id === facilityId;
-
 export default function DoctorVideoSlideover(props: {
   show: boolean;
   facilityId: string;
   setShow: (show: boolean) => void;
 }) {
   const { show, facilityId, setShow } = props;
-  const [filteredDoctors, setFilteredDoctors] = useState<DoctorDetails[]>([]);
-  const [filter, setFilter] = useState<FilterTypes>(FilterTypes.ALL);
+  const [filter, setFilter] = useState<UserGroup>("ALL");
 
-  const { data: users, loading } = useQuery(routes.getFacilityUsers, {
+  const { data } = useQuery(routes.getFacilityUsers, {
     prefetch: show,
     pathParams: { facility_id: facilityId },
     query: { limit: 50 },
   });
 
-  useEffect(() => {
-    const filterDoctors = (users: UserAssignedModel[]) => {
-      const filteredusers = users
-        .filter((user: UserAssignedModel) => {
-          return user.alt_phone_number || user.video_connect_link;
-        })
-        .sort((a: UserAssignedModel, b: UserAssignedModel) => {
-          const aIsHomeUser = isHomeUser(a, facilityId);
-          const bIsHomeUser = isHomeUser(b, facilityId);
-          return aIsHomeUser === bIsHomeUser ? 0 : aIsHomeUser ? -1 : 1;
-        });
-      const Doctors = filteredusers.filter((user: UserAssignedModel) => {
-        return user.user_type === "Doctor" && isHomeUser(user, facilityId);
-      });
-      const Nurses = filteredusers.filter((user: UserAssignedModel) => {
-        return user.user_type === "Nurse" && isHomeUser(user, facilityId);
-      });
-      const TeleICU = filteredusers.filter((user: UserAssignedModel) => {
-        return (
-          (user.user_type === "Doctor" || user.user_type === "Nurse") &&
-          !isHomeUser(user, facilityId)
-        );
-      });
-      setFilteredDoctors([
-        { users: Doctors, type: FilterTypes.DOCTOR },
-        { users: Nurses, type: FilterTypes.NURSE },
-        { users: TeleICU, type: FilterTypes.TELEICU },
-      ]);
-    };
-    if (users?.results && !loading) {
-      filterDoctors(users?.results);
+  const getUserGroup = (user: UserAssignedModel) => {
+    if (isHomeUser(user, facilityId)) {
+      if (user.user_type === "Doctor") return "DOCTOR";
+      if (user.user_type === "Nurse") return "NURSE";
     }
-  }, [facilityId, filter, loading, users?.results]);
+
+    if (user.user_type === "Doctor") return "TELEICU";
+  };
+
+  const annotatedUsers: UserAnnotatedWithGroup[] | undefined = data?.results
+    .filter((user) => user.alt_phone_number || user.video_connect_link)
+    .map((user) => ({ ...user, group: getUserGroup(user) }))
+    .filter((user) => !!user.group) as UserAnnotatedWithGroup[];
 
   return (
     <SlideOver
@@ -88,62 +66,94 @@ export default function DoctorVideoSlideover(props: {
       </p>
       <div className="flex justify-center" id="doctor-connect-filter-tabs">
         <Switch
-          tabs={
-            Object.values(FilterTypes).reduce(
-              (acc, type) => ({ ...acc, [type]: type }),
-              {},
-            ) as Record<FilterTypes, string>
-          }
+          tabs={UserGroups}
           selected={filter}
           onChange={(tab) => setFilter(tab)}
           size="md"
         />
       </div>
-      {filteredDoctors.map((doctor) => {
-        return (
-          (filter === FilterTypes.ALL || filter === doctor.type) && (
-            <div>
-              <p className="pt-2">{doctor.type}</p>
-              {doctor.users.map((user, i) => {
-                return (
-                  <div
-                    key={i}
-                    className="mb-4"
-                    id={`doctor-connect-${
-                      isHomeUser(user, facilityId) ? "home" : "remote"
-                    }-${user.user_type.toLowerCase()}`}
-                  >
-                    <ul
-                      className="mt-3 max-h-96 list-none"
-                      id="options"
-                      role="listbox"
-                    >
-                      <UserListItem
-                        key={user.id}
-                        user={user}
-                        facilityId={facilityId}
-                      />
-                    </ul>
-                  </div>
-                );
-              })}
-            </div>
-          )
-        );
-      })}
+
+      {!annotatedUsers ? (
+        <Loading />
+      ) : filter === "ALL" ? (
+        <div className="flex flex-col py-2">
+          <UserGroupList
+            group="DOCTOR"
+            users={annotatedUsers}
+            showGroupHeading
+          />
+
+          <UserGroupList
+            group="NURSE"
+            users={annotatedUsers}
+            showGroupHeading
+          />
+
+          <UserGroupList
+            group="TELEICU"
+            users={annotatedUsers}
+            showGroupHeading
+          />
+        </div>
+      ) : (
+        <div className="py-6">
+          <UserGroupList group={filter} users={annotatedUsers} />
+        </div>
+      )}
     </SlideOver>
   );
 }
 
+const UserGroupList = (props: {
+  users: UserAnnotatedWithGroup[];
+  group: UserGroup;
+  showGroupHeading?: boolean;
+}) => {
+  const users = props.users.filter((user) => user.group === props.group);
+
+  return (
+    <div className="py-2">
+      {props.showGroupHeading && (
+        <div className="flex w-full items-center pb-2">
+          <span className="whitespace-nowrap text-lg font-bold">
+            {UserGroups[props.group]}
+          </span>
+          <div className="mx-6 h-1 w-full bg-gray-300" />
+        </div>
+      )}
+
+      {!users.length && (
+        <span className="flex w-full justify-center py-2 font-bold text-gray-500">
+          No users in this category
+        </span>
+      )}
+
+      {!!users.length && (
+        <ul className="flex flex-col gap-3" id="options" role="listbox">
+          {users.map((user) => (
+            <li
+              key={user.id}
+              role="option"
+              id={`doctor-connect-${
+                user.group !== "TELEICU" ? "home" : "remote"
+              }-${user.user_type.toLowerCase()}`}
+            >
+              <UserListItem user={user} />
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
+
 type MSLaunchURI = (
   uri: string,
   successCB?: null | (() => void),
   noHandlerCB?: null | (() => void),
 ) => void;
 
-function UserListItem(props: { user: UserAssignedModel; facilityId: string }) {
-  const user = props.user;
-  const facilityId = props.facilityId;
+function UserListItem({ user }: { user: UserAnnotatedWithGroup }) {
   const icon: IconName =
     user.user_type === "Doctor" ? "l-user-md" : "l-user-nurse";
 
@@ -207,17 +217,13 @@ function UserListItem(props: { user: UserAssignedModel; facilityId: string }) {
   }
 
   return (
-    <li
-      key={user.id}
-      className={
-        "group cursor-default select-none rounded-xl p-3 " +
-        (user.alt_phone_number
+    <div
+      className={classNames(
+        "group cursor-default select-none rounded-xl p-3",
+        user.alt_phone_number
           ? "cursor-pointer border border-gray-400 transition hover:border-green-500 hover:bg-green-50"
-          : "pointer-events-none cursor-not-allowed bg-gray-400 ")
-      }
-      id="option-1"
-      role="option"
-      tabIndex={-1}
+          : "pointer-events-none cursor-not-allowed bg-gray-400",
+      )}
     >
       <a className="flex" onClick={connectOnWhatsApp}>
         <div className="flex flex-none items-center justify-center sm:h-6 sm:w-6 md:h-10 md:w-10">
@@ -232,16 +238,11 @@ function UserListItem(props: { user: UserAssignedModel; facilityId: string }) {
           }
         </div>
         <div className="ml-4 flex flex-auto flex-col gap-1">
-          <div className="flex justify-between gap-2 text-sm font-medium text-gray-700">
+          <div className="flex justify-between gap-2 text-sm text-gray-700">
             <span>
-              {user.first_name} {user.last_name}
-              <span className="pl-1 font-normal text-gray-700">
-                (
-                {isHomeUser(user, facilityId)
-                  ? user.user_type
-                  : `TeleICU Hub ${user.user_type}`}
-                )
-              </span>
+              <strong>
+                {user.first_name} {user.last_name}
+              </strong>
             </span>
             <DoctorConnectButtons
               user={user}
@@ -289,7 +290,7 @@ function UserListItem(props: { user: UserAssignedModel; facilityId: string }) {
           </div>
         </div>
       </a>
-    </li>
+    </div>
   );
 }
 

src/Components/Facility/FacilityHome.tsx

@@ -411,7 +411,9 @@ export const FacilityHome = (props: any) => {
                 <CareIcon icon="l-monitor-heart-rate" className="text-lg" />
                 <span>Central Nursing Station</span>
               </ButtonV2>
-              <LiveMonitoringButton />
+              {CameraFeedPermittedUserTypes.includes(authUser.user_type) && (
+                <LiveMonitoringButton />
+              )}
               <ButtonV2
                 variant="primary"
                 ghost
@@ -499,24 +501,21 @@ export const FacilityHome = (props: any) => {
 const LiveMonitoringButton = () => {
   const facilityId = useSlug("facility");
   const [location, setLocation] = useState<string>();
-  const authUser = useAuthUser();
 
   return (
     <Popover className="relative">
-      {CameraFeedPermittedUserTypes.includes(authUser.user_type) && (
-        <Popover.Button className="mt-2 w-full">
-          <ButtonV2
-            variant="primary"
-            ghost
-            border
-            className="w-full"
-            id="facility-detailspage-livemonitoring"
-          >
-            <CareIcon icon="l-video" className="text-lg" />
-            <span>Live Monitoring</span>
-          </ButtonV2>
-        </Popover.Button>
-      )}
+      <Popover.Button className="mt-2 w-full">
+        <ButtonV2
+          variant="primary"
+          ghost
+          border
+          className="w-full"
+          id="facility-detailspage-livemonitoring"
+        >
+          <CareIcon icon="l-video" className="text-lg" />
+          <span>Live Monitoring</span>
+        </ButtonV2>
+      </Popover.Button>
 
       <Transition
         as={Fragment}