M2-6109: [FE] [Web App] Header - Update to Include Subject and Respon…

…dent (#442)

This PR creates a `MultiInformantBadge` component that is shown during the completion of an activity in a multi-informant context. The component displays itself when the following are true:
- The `enableMultiInformant` feature flag is turned on
- The multi-informant state has been set. This state is set during the validation of multi-informant parameters in the `ValidateTakeNowParams` component.

src/abstract/lib/types/multiInformant.ts

@@ -1,4 +1,10 @@
+export type MultiInformantSubject = {
+  id: string;
+  secretId: string | null;
+  nickname: string | null;
+};
+
 export type MultiInformantState = {
-  sourceSubjectId?: string;
-  targetSubjectId?: string;
+  sourceSubject?: MultiInformantSubject;
+  targetSubject?: MultiInformantSubject;
 };

src/entities/applet/model/hooks/useMultiInformantState.ts

@@ -21,7 +21,7 @@ export const useMultiInformantState = (): Return => {
   const getMultiInformantState = useCallback(() => multiInformantState, [multiInformantState]);
 
   const isInMultiInformantFlow = useCallback(() => {
-    return !!multiInformantState.sourceSubjectId && !!multiInformantState.targetSubjectId;
+    return !!multiInformantState.sourceSubject?.id && !!multiInformantState.targetSubject?.id;
   }, [multiInformantState]);
 
   const initiateTakeNow = useCallback(

src/entities/applet/model/types.ts

@@ -1,4 +1,5 @@
 import { GroupProgress } from '~/abstract/lib';
+import { MultiInformantState } from '~/abstract/lib/types/multiInformant';
 import {
   Answer,
   AudioPlayerItem,
@@ -174,7 +175,4 @@ export type InProgressFlow = {
   pipelineActivityOrder: number;
 };
 
-export type MultiInformantPayload = {
-  sourceSubjectId: string;
-  targetSubjectId: string;
-};
+export type MultiInformantPayload = Required<MultiInformantState>;

src/features/TakeNow/lib/useTakeNowValidation.tsx

@@ -121,6 +121,9 @@ export const useTakeNowValidation = ({
     return errorState(t('takeNow.invalidSubject'));
   }
 
+  const { nickname: targetSubjectNickname, secretUserId: targetSecretUserId } =
+    subjectData.data.result;
+
   if (isActivityError) {
     return errorState(t('takeNow.invalidActivity'));
   }
@@ -161,15 +164,27 @@ export const useTakeNowValidation = ({
     return errorState(null);
   }
 
-  const { subjectId: sourceSubjectId } = respondentData.data.result;
+  const {
+    subjectId: sourceSubjectId,
+    nickname: sourceSubjectNickname,
+    secretUserId: sourceSecretUserId,
+  } = respondentData.data.result;
 
   return {
     isLoading: false,
     isError: false,
     isSuccess: true,
     data: {
-      sourceSubjectId,
-      targetSubjectId,
+      sourceSubject: {
+        id: sourceSubjectId,
+        nickname: sourceSubjectNickname,
+        secretId: sourceSecretUserId,
+      },
+      targetSubject: {
+        id: targetSubjectId,
+        nickname: targetSubjectNickname,
+        secretId: targetSecretUserId,
+      },
     },
   };
 };

src/features/TakeNow/ui/MultiInformantBadge.tsx

@@ -0,0 +1,37 @@
+import { useMultiInformantState } from '~/entities/applet/model/hooks';
+import { MultiInformantBadgeTile } from '~/features/TakeNow/ui/MultiInformantBadgeTile';
+import { Theme } from '~/shared/constants';
+import { Box } from '~/shared/ui';
+import { useLaunchDarkly } from '~/shared/utils/hooks/useLaunchDarkly';
+
+const borderSize = 1;
+
+export const MultiInformantBadge = () => {
+  const { getMultiInformantState, isInMultiInformantFlow } = useMultiInformantState();
+  const { flags: featureFlags } = useLaunchDarkly();
+
+  if (!isInMultiInformantFlow() || !featureFlags.enableMultiInformant) {
+    return null;
+  }
+
+  const { sourceSubject, targetSubject } = getMultiInformantState();
+
+  if (!sourceSubject || !targetSubject) {
+    return null;
+  }
+
+  return (
+    <Box
+      display="flex"
+      padding={`${4 - borderSize}px`}
+      alignItems="center"
+      gap="4px"
+      width="192px"
+      borderRadius="8px"
+      border={`${borderSize}px solid ${Theme.colors.light.surfaceVariant}`}
+    >
+      <MultiInformantBadgeTile type="Respondent" subject={sourceSubject} />
+      <MultiInformantBadgeTile type="Subject" subject={targetSubject} />
+    </Box>
+  );
+};

src/features/TakeNow/ui/MultiInformantBadgeTile.tsx

@@ -0,0 +1,55 @@
+import Tooltip from '@mui/material/Tooltip';
+
+import { MultiInformantSubject } from '~/abstract/lib/types/multiInformant';
+import { Theme } from '~/shared/constants';
+import { Box } from '~/shared/ui';
+
+type MultiInformantBadgeTileProps = {
+  type: 'Subject' | 'Respondent';
+  subject: MultiInformantSubject;
+};
+
+export const MultiInformantBadgeTile = ({ subject, type }: MultiInformantBadgeTileProps) => {
+  const { id, secretId, nickname } = subject;
+  let text = secretId ?? id;
+  if (nickname) {
+    text += `, ${nickname}`;
+  }
+
+  const tooltipText = `${type}: ${text}`;
+
+  const backgroundColor = type === 'Subject' ? Theme.colors.light.inverseOnSurface : 'transparent';
+
+  return (
+    <Box
+      display="flex"
+      padding="8px"
+      alignItems="center"
+      gap="8px"
+      flex="1 0 0"
+      borderRadius="4px"
+      width="78px"
+      height="100%"
+      sx={{ backgroundColor, cursor: 'default' }}
+    >
+      <Tooltip title={tooltipText}>
+        <p
+          style={{
+            overflow: 'hidden',
+            color: Theme.colors.light.onSurface,
+            textOverflow: 'ellipsis',
+
+            fontSize: '16px',
+            fontStyle: 'normal',
+            fontWeight: 400,
+            lineHeight: '24px',
+            letterSpacing: '0.5px',
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {text}
+        </p>
+      </Tooltip>
+    </Box>
+  );
+};

src/features/TakeNow/ui/ValidateTakeNowParams.tsx

@@ -26,15 +26,15 @@ function ValidateTakeNowParams({
 
   useEffect(() => {
     if (isSuccess && data) {
-      const { sourceSubjectId, targetSubjectId } = data;
+      const { sourceSubject, targetSubject } = data;
 
       const multiInformantState = getMultiInformantState();
       if (
         !isInMultiInformantFlow() ||
-        sourceSubjectId !== multiInformantState.sourceSubjectId ||
-        targetSubjectId !== multiInformantState.targetSubjectId
+        sourceSubject.id !== multiInformantState.sourceSubject?.id ||
+        targetSubject.id !== multiInformantState.targetSubject?.id
       ) {
-        initiateTakeNow({ sourceSubjectId, targetSubjectId });
+        initiateTakeNow({ sourceSubject, targetSubject });
       }
     }
   }, [data, initiateTakeNow, isInMultiInformantFlow, isSuccess]);

src/features/TakeNow/ui/index.ts

@@ -1 +1,3 @@
 export * from './ValidateTakeNowParams';
+export * from './MultiInformantBadge';
+export * from './MultiInformantBadgeTile';

src/widgets/ActivityDetails/model/hooks/useAnswers.ts

@@ -142,8 +142,8 @@ export const useAnswer = (props: Props) => {
       if (featureFlags.enableMultiInformant) {
         const multiInformantState = getMultiInformantState();
         if (isInMultiInformantFlow()) {
-          answer.sourceSubjectId = multiInformantState.sourceSubjectId;
-          answer.targetSubjectId = multiInformantState.targetSubjectId;
+          answer.sourceSubjectId = multiInformantState.sourceSubject?.id;
+          answer.targetSubjectId = multiInformantState.targetSubject?.id;
         }
       }
 

src/widgets/ActivityDetails/ui/AssessmentLayoutHeader.tsx

@@ -1,7 +1,7 @@
 import { SaveAndExitButton } from '~/features/SaveAssessmentAndExit';
+import { MultiInformantBadge } from '~/features/TakeNow';
 import { ROUTES, Theme } from '~/shared/constants';
-import { Box } from '~/shared/ui';
-import { BaseProgressBar, Text } from '~/shared/ui';
+import { BaseProgressBar, Box, Text } from '~/shared/ui';
 import { useCustomMediaQuery, useCustomNavigation } from '~/shared/utils';
 
 type Props = {
@@ -40,12 +40,15 @@ export const AssessmentLayoutHeader = (props: Props) => {
       justifyContent="center"
       gridTemplateColumns="1fr minmax(300px, 900px) 1fr"
       padding={greaterThanSM ? '19px 24px' : '15px 16px'}
+      height={87}
       gap={1.5}
       sx={{
         backgroundColor: Theme.colors.light.surface,
         borderBottom: `1px solid ${Theme.colors.light.surfaceVariant}`,
       }}
     >
+      <MultiInformantBadge />
+
       <Box sx={{ gridColumn: '2 / 3' }}>
         <Box
           display="flex"