Merge pull request #1677 from gchq/BAI-1463-update-reaction-hover-sho…

…w-friendly-dn-instead-full-dn

Started work on new bulk endpoint for fetching friendly names

backend/src/models/Response.ts

@@ -37,6 +37,7 @@ export const ReactionKind = {
   LIKE: 'like',
   DISLIKE: 'dislike',
   CELEBRATE: 'celebrate',
+  HEART: 'heart',
 } as const
 export type ReactionKindKeys = (typeof ReactionKind)[keyof typeof ReactionKind]
 

backend/src/routes.ts

@@ -169,7 +169,6 @@ server.patch('/api/v2/schema/:schemaId', ...patchSchema)
 server.delete('/api/v2/schema/:schemaId', ...deleteSchema)
 
 server.get('/api/v2/reviews', ...getReviews)
-
 server.get('/api/v2/responses', ...getResponses)
 server.patch('/api/v2/response/:responseId', ...patchResponse)
 server.patch('/api/v2/response/:responseId/reaction/:kind', ...patchResponseReaction)

backend/test/routes/entities/getEntityLookup.spec.ts

@@ -22,9 +22,6 @@ vi.mock('../../../src/utils/entity.js', async () => ({
 
 describe('routes > entities > getEntityLookup', () => {
   test('200 > ok', async () => {
-    vi.mock('../../../src/services/model.js', () => ({
-      getModelById: vi.fn(() => ({ _id: 'test' })),
-    }))
     const res = await testGet(`/api/v2/entity/userdn/lookup`)
 
     expect(res.statusCode).toBe(200)

frontend/actions/user.ts

@@ -63,6 +63,10 @@ export function useGetUserInformation(dn: string) {
   }
 }
 
+export function getUserInformation(dn: string) {
+  return fetch(`/api/v2/entity/${dn}/lookup`, { method: 'get' })
+}
+
 interface GetUserTokensResponse {
   tokens: TokenInterface[]
 }

frontend/src/reviews/ReactionButtons.tsx

@@ -1,4 +1,10 @@
-import { Celebration, InsertEmoticon, ThumbDown, ThumbUp } from '@mui/icons-material'
+import {
+  CelebrationTwoTone,
+  FavoriteTwoTone,
+  InsertEmoticon,
+  ThumbDownTwoTone,
+  ThumbUpTwoTone,
+} from '@mui/icons-material'
 import { IconButton, Popover, Stack } from '@mui/material'
 import { patchResponseReaction } from 'actions/response'
 import { useGetCurrentUser } from 'actions/user'
@@ -47,7 +53,7 @@ export default function ReactionButtons({ response, mutateResponses, onError }:
                   activeReactions.push(
                     <ReactionDisplay
                       kind={ReactionKind.LIKE}
-                      icon={<ThumbUp fontSize='small' />}
+                      icon={<ThumbUpTwoTone fontSize='small' />}
                       users={reaction.users}
                       onReactionClick={handleReactionClick}
                     />,
@@ -57,7 +63,17 @@ export default function ReactionButtons({ response, mutateResponses, onError }:
                   activeReactions.push(
                     <ReactionDisplay
                       kind={ReactionKind.DISLIKE}
-                      icon={<ThumbDown fontSize='small' />}
+                      icon={<ThumbDownTwoTone fontSize='small' />}
+                      users={reaction.users}
+                      onReactionClick={handleReactionClick}
+                    />,
+                  )
+                  break
+                case ReactionKind.HEART:
+                  activeReactions.push(
+                    <ReactionDisplay
+                      kind={ReactionKind.CELEBRATE}
+                      icon={<FavoriteTwoTone fontSize='small' />}
                       users={reaction.users}
                       onReactionClick={handleReactionClick}
                     />,
@@ -67,7 +83,7 @@ export default function ReactionButtons({ response, mutateResponses, onError }:
                   activeReactions.push(
                     <ReactionDisplay
                       kind={ReactionKind.CELEBRATE}
-                      icon={<Celebration fontSize='small' />}
+                      icon={<CelebrationTwoTone fontSize='small' />}
                       users={reaction.users}
                       onReactionClick={handleReactionClick}
                     />,
@@ -91,7 +107,7 @@ export default function ReactionButtons({ response, mutateResponses, onError }:
   return (
     <>
       {isCurrentUserLoading && <Loading />}
-      <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1} alignItems='center'>
+      <Stack direction={{ xs: 'column', sm: 'row' }} alignItems='center'>
         <IconButton aria-label='Add reaction' color='primary' onClick={(event) => setAnchorEl(event.currentTarget)}>
           <InsertEmoticon fontSize='small' />
         </IconButton>
@@ -112,13 +128,19 @@ export default function ReactionButtons({ response, mutateResponses, onError }:
       >
         <Stack direction='row' spacing={1} sx={{ p: 1 }}>
           <IconButton onClick={() => handleReactionClick(ReactionKind.LIKE)}>
-            <ThumbUp fontSize='small' color={isReactionActive(ReactionKind.LIKE) ? 'primary' : 'inherit'} />
+            <ThumbUpTwoTone fontSize='small' color={isReactionActive(ReactionKind.LIKE) ? 'primary' : 'inherit'} />
           </IconButton>
           <IconButton onClick={() => handleReactionClick(ReactionKind.DISLIKE)}>
-            <ThumbDown fontSize='small' color={isReactionActive(ReactionKind.DISLIKE) ? 'primary' : 'inherit'} />
+            <ThumbDownTwoTone fontSize='small' color={isReactionActive(ReactionKind.DISLIKE) ? 'primary' : 'inherit'} />
+          </IconButton>
+          <IconButton onClick={() => handleReactionClick(ReactionKind.HEART)}>
+            <FavoriteTwoTone fontSize='small' color={isReactionActive(ReactionKind.HEART) ? 'primary' : 'inherit'} />
           </IconButton>
           <IconButton onClick={() => handleReactionClick(ReactionKind.CELEBRATE)}>
-            <Celebration fontSize='small' color={isReactionActive(ReactionKind.CELEBRATE) ? 'primary' : 'inherit'} />
+            <CelebrationTwoTone
+              fontSize='small'
+              color={isReactionActive(ReactionKind.CELEBRATE) ? 'primary' : 'inherit'}
+            />
           </IconButton>
         </Stack>
       </Popover>

frontend/src/reviews/ReactionDisplay.tsx

@@ -1,5 +1,6 @@
 import { Button, Tooltip } from '@mui/material'
-import { ReactNode, useMemo } from 'react'
+import { getUserInformation } from 'actions/user'
+import { ReactNode, useEffect, useState } from 'react'
 import { ReactionKindKeys } from 'types/types'
 import { plural } from 'utils/stringUtils'
 
@@ -11,28 +12,34 @@ type ReactionDisplayProps = {
 }
 
 export default function ReactionDisplay({ kind, icon, users, onReactionClick }: ReactionDisplayProps) {
-  const title = useMemo(() => {
-    let text = ''
-    if (users.length > 3) {
-      text = `${users[0]}, ${users[1]}, ${users[2]} + ${users.length - 3} more`
-    } else {
-      users.forEach((user, index) => {
-        text += `${user}`
-        if (index !== users.length - 1) {
-          text += ', '
-        }
-      })
+  const [usersToDisplay, setUsersToDisplay] = useState('')
+
+  useEffect(() => {
+    async function fetchData() {
+      if (!usersToDisplay) {
+        setUsersToDisplay(
+          `${users
+            .slice(0, 3)
+            .map(async (user) => {
+              const response = await getUserInformation(user)
+              if (response.ok) {
+                const responseBody = await response.json()
+                return responseBody.entity.name
+              }
+            })
+            .join(', ')} ${users.length > 3 ? ` and ${users.length - 3} others` : ''}`,
+        )
+      }
     }
-    return text
-  }, [users])
+    fetchData()
+  }, [users, usersToDisplay])
 
   return (
-    <Tooltip title={title}>
+    <Tooltip title={usersToDisplay}>
       <Button
         size='small'
         aria-label={plural(users.length, kind)}
         onClick={() => onReactionClick(kind)}
-        variant='outlined'
         startIcon={icon}
       >
         {users.length}

frontend/types/types.ts

@@ -134,6 +134,7 @@ export const ReactionKind = {
   LIKE: 'like',
   DISLIKE: 'dislike',
   CELEBRATE: 'celebrate',
+  HEART: 'heart',
 } as const
 export type ReactionKindKeys = (typeof ReactionKind)[keyof typeof ReactionKind]