From dbcabde24592503f888a3830e4ae6ea6e6aca6d7 Mon Sep 17 00:00:00 2001
From: araddcc002 <araddcc002@euro.ngc.com>
Date: Mon, 16 Dec 2024 11:22:24 +0000
Subject: [PATCH] finished implementation of multi user entity look up and
 reaction display

---
 backend/src/routes.ts                         |  2 +-
 .../routes/v2/entities/getEntitiesLookup.ts   | 16 ++++-----
 frontend/actions/user.ts                      | 10 +++---
 frontend/src/reviews/ReactionDisplay.tsx      | 35 ++++++-------------
 4 files changed, 24 insertions(+), 39 deletions(-)

diff --git a/backend/src/routes.ts b/backend/src/routes.ts
index dd9f1934e..3524de749 100644
--- a/backend/src/routes.ts
+++ b/backend/src/routes.ts
@@ -181,7 +181,7 @@ server.get('/api/v2/model/:modelId/permissions/mine', ...getModelCurrentUserPerm
 server.get('/api/v2/entities', ...getEntities)
 server.get('/api/v2/entities/me', ...getCurrentUser)
 server.get('/api/v2/entity/:dn/lookup', ...getEntityLookup)
-server.get('/api/v2/entities/:dnList/lookup', ...getEntitiesLookup)
+server.get('/api/v2/entities/lookup', ...getEntitiesLookup)
 
 server.get('/api/v2/config/ui', ...getUiConfig)
 
diff --git a/backend/src/routes/v2/entities/getEntitiesLookup.ts b/backend/src/routes/v2/entities/getEntitiesLookup.ts
index 0d467034d..ac62b93f1 100644
--- a/backend/src/routes/v2/entities/getEntitiesLookup.ts
+++ b/backend/src/routes/v2/entities/getEntitiesLookup.ts
@@ -6,17 +6,17 @@ import { UserInformation } from '../../../connectors/authentication/Base.js'
 import authentication from '../../../connectors/authentication/index.js'
 import { registerPath, UserInformationSchemaList } from '../../../services/specification.js'
 import { toEntity } from '../../../utils/entity.js'
-import { parse } from '../../../utils/validate.js'
+import { coerceArray, parse } from '../../../utils/validate.js'
 
 export const getEntitiesLookupSchema = z.object({
-  params: z.object({
-    dnList: z.string(),
+  query: z.object({
+    dnList: coerceArray(z.array(z.string())),
   }),
 })
 
 registerPath({
   method: 'get',
-  path: '/api/v2/entities/{dnList}/lookup',
+  path: '/api/v2/entities/lookup',
   tags: ['user'],
   description: 'Get information about a list of entities',
   schema: getEntitiesLookupSchema,
@@ -40,13 +40,9 @@ export const getEntitiesLookup = [
   bodyParser.json(),
   async (req: Request, res: Response<GetEntitiesLookup>) => {
     const {
-      params: { dnList },
+      query: { dnList },
     } = parse(req, getEntitiesLookupSchema)
-    //TODO check that contains []
-    const dnListArray = dnList
-      .slice(1, -1)
-      .split(',')
-      .map((dnListMember) => toEntity('user', dnListMember))
+    const dnListArray = dnList.map((dnListMember) => toEntity('user', dnListMember))
     const informationList = await authentication.getMultipleUsersInformation(dnListArray)
 
     return res.json({ entities: informationList })
diff --git a/frontend/actions/user.ts b/frontend/actions/user.ts
index c16b2c70b..53d7517a3 100644
--- a/frontend/actions/user.ts
+++ b/frontend/actions/user.ts
@@ -64,19 +64,21 @@ export function useGetUserInformation(dn: string) {
 }
 
 interface MultipleUserInformationResponse {
-  userInformationList: UserInformation[]
+  entities: UserInformation[]
 }
 
 export function useGetMultipleUserInformation(dnList: string[]) {
-  const dnListAsString = '[' + dnList.join(',') + ']'
+  const queryParams = {
+    ...(dnList.length > 0 && { dnList }),
+  }
   const { data, isLoading, error, mutate } = useSWR<MultipleUserInformationResponse, ErrorInfo>(
-    `/api/v2/entities/${dnListAsString}/lookup`,
+    `/api/v2/entities/lookup?${qs.stringify(queryParams)}`,
     fetcher,
   )
 
   return {
     mutateUserInformation: mutate,
-    userInformation: data?.userInformationList || undefined,
+    userInformation: data?.entities || [],
     isUserInformationLoading: isLoading,
     isUserInformationError: error,
   }
diff --git a/frontend/src/reviews/ReactionDisplay.tsx b/frontend/src/reviews/ReactionDisplay.tsx
index 8df084b93..08a765af3 100644
--- a/frontend/src/reviews/ReactionDisplay.tsx
+++ b/frontend/src/reviews/ReactionDisplay.tsx
@@ -16,30 +16,16 @@ export default function ReactionDisplay({ kind, icon, users, onReactionClick }:
   const { userInformation, isUserInformationLoading } = useGetMultipleUserInformation(users)
   const title = useMemo(() => {
     let text = ''
-    if (userInformation) {
-      if (userInformation.length > 3) {
-        text = `${userInformation[0]}, ${userInformation[1]}, ${userInformation[2]} + ${userInformation.length - 3} more`
-      } else {
-        userInformation.forEach((user, index) => {
-          text += `${user}`
-          if (index !== users.length - 1) {
-            text += ', '
-          }
-        })
-      }
+    if (userInformation && userInformation.length > 3) {
+      text = `${userInformation
+        .slice(0, 3)
+        .map((user) => user.name)
+        .join(', ')}, and ${userInformation.length - 3} others`
+    } else {
+      text = `${userInformation.map((user) => user.name).join(', ')}`
     }
-    //   // if (userList.length > 3) {
-    //   //   text = `${userList[0]}, ${userList[1]}, ${userList[2]} + ${userList.length - 3} more`
-    //   // } else {
-    //   //   userList.forEach((user, index) => {
-    //   //     text += `${user}`
-    //   //     if (index !== users.length - 1) {
-    //   //       text += ', '
-    //   //     }
-    //   //   })
-    //   // }
     return text
-  }, [userInformation, users.length])
+  }, [userInformation])
   if (isUserInformationLoading) {
     return <Loading />
   }
@@ -49,9 +35,10 @@ export default function ReactionDisplay({ kind, icon, users, onReactionClick }:
         size='small'
         aria-label={plural(users.length, kind)}
         onClick={() => onReactionClick(kind)}
-        variant='outlined'
         startIcon={icon}
-      ></Button>
+      >
+        {userInformation.length}
+      </Button>
     </Tooltip>
   )
 }