fix: show assigned user information in actionMenu when event is assigned to other (#10643)

* fix: show assigned user information in actionMenu when event is assigned to other

* test: add a story

Author: jamil314

packages/client/src/v2-events/features/workqueues/EventOverview/components/ActionMenu.tsx

@@ -20,6 +20,9 @@ import { getOrThrow } from '@opencrvs/commons/client'
 import { useEvents } from '@client/v2-events/features/events/useEvents/useEvents'
 import { messages } from '@client/i18n/messages/views/action'
 import { useAuthentication } from '@client/utils/userUtils'
+import { useUsers } from '@client/v2-events/hooks/useUsers'
+import { getUsersFullName } from '@client/v2-events/utils'
+import { useLocations } from '@client/v2-events/hooks/useLocations'
 import { useAllowedActionConfigurations } from './useAllowedActionConfigurations'
 
 export function ActionMenu({
@@ -30,6 +33,10 @@ export function ActionMenu({
   onAction?: () => void
 }) {
   const intl = useIntl()
+
+  const { getUser } = useUsers()
+  const { getLocations } = useLocations()
+  const [locations] = getLocations.useSuspenseQuery()
   const { searchEventById } = useEvents()
 
   const maybeAuth = useAuthentication()
@@ -45,15 +52,26 @@ export function ActionMenu({
   if (eventResults.total === 0) {
     throw new Error(`Event ${eventId} not found`)
   }
-  const eventIndex = eventResults.results[0]
+  const eventState = eventResults.results[0]
 
-  const eventState = eventIndex
+  const assignedToUser = getUser.useQuery(eventState.assignedTo || '', {
+    enabled: !!eventState.assignedTo
+  }).data
+  const assignedUserFullName = assignedToUser
+    ? getUsersFullName(assignedToUser.name, intl.locale)
+    : ''
+  const assignedOffice = assignedToUser?.primaryOfficeId || ''
+  const assignedOfficeName =
+    locations.find((l) => l.id === assignedOffice)?.name || ''
 
   const [modal, actionMenuItems] = useAllowedActionConfigurations(
     eventState,
     auth
   )
 
+  const assignedToOther =
+    eventState.assignedTo && eventState.assignedTo !== auth.sub
+
   return (
     <>
       <DropdownMenu id="action">
@@ -66,6 +84,17 @@ export function ActionMenu({
           </PrimaryButton>
         </DropdownMenu.Trigger>
         <DropdownMenu.Content>
+          {assignedToOther && (
+            <>
+              <DropdownMenu.Label>
+                {intl.formatMessage(messages.assignedTo, {
+                  name: assignedUserFullName,
+                  officeName: assignedOfficeName
+                })}
+              </DropdownMenu.Label>
+              <DropdownMenu.Separator />
+            </>
+          )}
           {actionMenuItems.map((action) => {
             return (
               <DropdownMenu.Item

packages/client/src/v2-events/features/workqueues/EventOverview/components/ActionMenuStories/ActionMenu.AssignedTo.stories.tsx

@@ -0,0 +1,113 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * OpenCRVS is also distributed under the terms of the Civil Registration
+ * & Healthcare Disclaimer located at http://opencrvs.org/license.
+ *
+ * Copyright (C) The OpenCRVS Authors located at https://github.com/opencrvs/opencrvs-core/blob/master/AUTHORS.
+ */
+
+import { userEvent, screen } from '@storybook/test'
+import React from 'react'
+import { createTRPCMsw, httpLink } from '@vafanassieff/msw-trpc'
+import superjson from 'superjson'
+import { Meta, StoryObj } from '@storybook/react'
+import {
+  ActionType,
+  getCurrentEventState,
+  tennisClubMembershipEvent
+} from '@opencrvs/commons/client'
+import { AppRouter } from '@client/v2-events/trpc'
+import { AssignmentStatus } from '@client/v2-events/utils'
+import { tennisClubMembershipEventDocument } from '@client/v2-events/features/events/fixtures'
+import {
+  addLocalEventConfig,
+  setEventData
+} from '@client/v2-events/features/events/useEvents/api'
+import { testDataGenerator } from '@client/tests/test-data-generators'
+import { ActionMenu } from '../ActionMenu'
+import { getMockEvent, UserRoles } from './ActionMenu.common'
+
+const event = getMockEvent(
+  [
+    ActionType.CREATE,
+    AssignmentStatus.ASSIGNED_TO_SELF,
+    ActionType.DECLARE,
+    ActionType.UNASSIGN,
+    AssignmentStatus.ASSIGNED_TO_OTHERS
+  ],
+  UserRoles.LOCAL_REGISTRAR
+)
+
+const tRPCMsw = createTRPCMsw<AppRouter>({
+  links: [
+    httpLink({
+      url: '/api/events'
+    })
+  ],
+  transformer: { input: superjson, output: superjson }
+})
+
+const generator = testDataGenerator()
+
+const meta: Meta<typeof ActionMenu> = {
+  title: 'ActionMenu/Assignment',
+  component: ActionMenu
+}
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const AssignedTo: Story = {
+  loaders: [
+    async () => {
+      window.localStorage.setItem(
+        'opencrvs',
+        generator.user.token.localRegistrar
+      )
+
+      // Tests are generated dynamically, and it causes intermittent failures when global state
+      // gets out of whack. This is a workaround to ensure that the state is reset
+      await new Promise((resolve) => setTimeout(resolve, 50))
+
+      return {}
+    }
+  ],
+  parameters: {
+    layout: 'centered',
+    chromatic: { disableSnapshot: true },
+    msw: {
+      handlers: {
+        event: [
+          tRPCMsw.event.search.query(() => ({
+            total: 1,
+            results: [getCurrentEventState(event, tennisClubMembershipEvent)]
+          })),
+          tRPCMsw.event.get.query(() => {
+            return tennisClubMembershipEventDocument
+          })
+        ]
+      }
+    }
+  },
+  render: () => (
+    <React.Suspense fallback={<span>{'Loading…'}</span>}>
+      <ActionMenu eventId={event.id} />
+    </React.Suspense>
+  ),
+  beforeEach: () => {
+    /*
+     * Ensure record is "downloaded offline" in the user's browser
+     */
+    addLocalEventConfig(tennisClubMembershipEvent)
+    setEventData(event.id, event)
+  },
+  play: async () => {
+    const actionButton = await screen.findByRole('button', {
+      name: 'Action'
+    })
+    await userEvent.click(actionButton)
+  }
+}