feat(mrf-admin-view): hawkeye v1.0

frontend/src/features/admin-form/AdminFormResultsResponsesPage.stories.tsx

@@ -9,6 +9,7 @@ import {
   createFormBuilderMocks,
   getAdminFormCollaborators,
   getAdminFormSubmissions,
+  getMultiRespondentSubmissionMetadataResponse,
   getStorageSubmissionMetadataResponse,
 } from '~/mocks/msw/handlers/admin-form'
 import { getUser } from '~/mocks/msw/handlers/user'
@@ -185,6 +186,24 @@ StorageFormLoading.parameters = {
   ],
 }
 
+export const MultiRespondentFormUnlocked = Template.bind({})
+MultiRespondentFormUnlocked.parameters = {
+  msw: [
+    ...createFormBuilderMocks(
+      {
+        responseMode: FormResponseMode.Multirespondent,
+        publicKey: MOCK_KEYPAIR.publicKey,
+      },
+      0,
+    ),
+    getAdminFormSubmissions({ override: 5 }),
+    getMultiRespondentSubmissionMetadataResponse(),
+    getUser(),
+    getAdminFormCollaborators(),
+  ],
+}
+MultiRespondentFormUnlocked.play = StorageFormUnlocked.play
+
 export const Loading = Template.bind({})
 Loading.parameters = {
   msw: [

frontend/src/features/admin-form/responses/AdminSubmissionsService.ts

@@ -138,6 +138,10 @@ export const getDecryptedSubmissionById = async ({
       encryptedSubmission.submissionType === SubmissionType.Encrypt
         ? encryptedSubmission.payment
         : undefined,
+    mrf:
+      encryptedSubmission.submissionType === SubmissionType.Multirespondent
+        ? encryptedSubmission.mrfMeta
+        : undefined,
     responses,
     mrfVersion,
   }

frontend/src/features/admin-form/responses/IndividualResponsePage/IndividualResponsePage.tsx

@@ -22,7 +22,16 @@ import { useAdminForm } from '~features/admin-form/common/queries'
 import { FormActivationSvg } from '~features/admin-form/settings/components/FormActivationSvg'
 import { useUser } from '~features/user/queries'
 
+import {
+  getCurrentStepString,
+  getStatusFromWorkflowStatus,
+} from '../common/utils/mrfSubmissionView'
 import { SecretKeyVerification } from '../components/SecretKeyVerification'
+import {
+  MRF_CURRENT_STEP_LABEL,
+  MRF_FIRST_STEP_TIMESTAMP_LABEL,
+  MRF_STATUS_LABEL,
+} from '../constants'
 import { useStorageResponsesContext } from '../ResponsesPage/storage'
 
 import { DecryptedRow } from './DecryptedRow'
@@ -84,6 +93,8 @@ export const IndividualResponsePage = (): JSX.Element => {
 
   const { data: form } = useAdminForm()
 
+  const isMrf = form?.responseMode === FormResponseMode.Multirespondent
+
   const { user } = useUser()
   const { secretKey } = useStorageResponsesContext()
   const { data, isLoading, isError } = useIndividualSubmission()
@@ -156,8 +167,42 @@ export const IndividualResponsePage = (): JSX.Element => {
             isLoading={isLoading}
             isError={isError}
           />
+          {isMrf ? (
+            <>
+              <StackRow
+                label={MRF_STATUS_LABEL}
+                value={getStatusFromWorkflowStatus(data?.mrf?.workflowStatus)}
+                isLoading={isLoading}
+                isError={isError}
+              />
+              <StackRow
+                label={MRF_CURRENT_STEP_LABEL}
+                value={getCurrentStepString(
+                  data?.mrf?.workflowCurrentStepNumber,
+                  data?.mrf?.workflowNumTotalSteps,
+                )}
+                isLoading={isLoading}
+                isError={isError}
+              />
+            </>
+          ) : null}
+          <StackRow
+            label="Status"
+            value={getStatusFromWorkflowStatus(data?.mrf?.workflowStatus)}
+            isLoading={isLoading}
+            isError={isError}
+          />
+          <StackRow
+            label="Current step"
+            value={getCurrentStepString(
+              data?.mrf?.workflowCurrentStepNumber,
+              data?.mrf?.workflowNumTotalSteps,
+            )}
+            isLoading={isLoading}
+            isError={isError}
+          />
           <StackRow
-            label="Timestamp"
+            label={isMrf ? MRF_FIRST_STEP_TIMESTAMP_LABEL : 'Timestamp'}
             value={
               data?.submissionTime ?? t('features.common.loadingWithEllipsis')
             }

frontend/src/features/admin-form/responses/ResponsesPage/storage/StorageResponsesProvider.tsx

@@ -45,8 +45,9 @@ export const StorageResponsesProvider = ({
       responsesCount: dateRangeResponsesCount,
       startDate: dateRange[0],
       endDate: dateRange[1],
+      isMrf: form?.responseMode === FormResponseMode.Multirespondent,
     }
-  }, [dateRange, dateRangeResponsesCount, secretKey])
+  }, [dateRange, dateRangeResponsesCount, secretKey, form?.responseMode])
 
   return (
     <StorageResponsesContext.Provider

frontend/src/features/admin-form/responses/ResponsesPage/storage/UnlockedResponses/ResponsesTable/ResponsesTable.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo } from 'react'
+import { BiCheckDouble, BiSolidHourglass } from 'react-icons/bi'
 import { useNavigate } from 'react-router-dom'
 import {
   Column,
@@ -7,42 +8,89 @@ import {
   useResizeColumns,
   useTable,
 } from 'react-table'
-import { Flex, Table, Tbody, Td, Th, Thead, Tr } from '@chakra-ui/react'
+import {
+  Flex,
+  Icon,
+  Table,
+  Tbody,
+  Td,
+  Text,
+  Th,
+  Thead,
+  Tr,
+} from '@chakra-ui/react'
 
-import { FormResponseMode, SubmissionMetadata } from '~shared/types'
+import {
+  FormResponseMode,
+  SubmissionMetadata,
+  WorkflowStatus,
+} from '~shared/types'
 import { centsToDollars } from '~shared/utils/payments'
 
+import Badge from '~components/Badge'
+
 import { useAdminForm } from '~features/admin-form/common/queries'
+import {
+  MRF_CURRENT_STEP_LABEL,
+  MRF_FIRST_STEP_TIMESTAMP_LABEL,
+  MRF_STATUS_LABEL,
+} from '~features/admin-form/responses/constants'
 
+import { getCurrentStepString } from '../../../../common/utils/mrfSubmissionView'
 import { useUnlockedResponses } from '../UnlockedResponsesProvider'
 
 import { getNetAmount } from './utils'
 
 type ResponseColumnData = SubmissionMetadata
 
-const RESPONSE_TABLE_COLUMNS: Column<ResponseColumnData>[] = [
+const PendingBadge = () => (
+  <Badge
+    width="fit-content"
+    display="flex"
+    textColor="warning.700"
+    backgroundColor="warning.100"
+  >
+    <Icon as={BiSolidHourglass} mr="0.25rem" fontSize="1rem" />
+    <Text textStyle="caption-1">Pending</Text>
+  </Badge>
+)
+
+const CompletedBadge = () => (
+  <Badge
+    width="fit-content"
+    display="flex"
+    textColor="success.700"
+    backgroundColor="success.100"
+  >
+    <Icon as={BiCheckDouble} mr="0.25rem" fontSize="1rem" />
+    <Text textStyle="caption-1">Completed</Text>
+  </Badge>
+)
+
+const NON_MRF_RESPONSE_TABLE_COLUMNS: Column<ResponseColumnData>[] = [
   {
     Header: '#',
     accessor: 'number',
-    minWidth: 80, // minWidth is only used as a limit for resizing
     width: 80, // width is used for both the flex-basis and flex-grow
+    minWidth: 80, // minWidth is only used as a limit for resizing
     maxWidth: 100, // maxWidth is only used as a limit for resizing
   },
   {
     Header: 'Response ID',
     accessor: 'refNo',
-    minWidth: 300,
     width: 300,
-    maxWidth: 240, // maxWidth is only used as a limit for resizing
+    minWidth: 300,
+    maxWidth: 300,
   },
   {
     Header: 'Timestamp',
     accessor: 'submissionTime',
-    minWidth: 250,
     width: 250,
+    minWidth: 250,
     disableResizing: true,
   },
 ]
+
 const PAYMENT_COLUMNS: Column<ResponseColumnData>[] = [
   {
     Header: 'Email',
@@ -105,15 +153,67 @@ const PAYMENT_COLUMNS: Column<ResponseColumnData>[] = [
   },
 ]
 
+const MRF_RESPONSE_TABLE_COLUMNS: Column<ResponseColumnData>[] = [
+  {
+    Header: '#',
+    accessor: 'number',
+    width: 80,
+    minWidth: 80,
+    maxWidth: 100,
+  },
+  {
+    Header: 'Response ID',
+    accessor: 'refNo',
+    width: 300,
+    minWidth: 300,
+    maxWidth: 300,
+  },
+  {
+    Header: MRF_STATUS_LABEL,
+    accessor: ({ mrf }) => {
+      if (!mrf?.workflowStatus) {
+        return ''
+      }
+      if (mrf.workflowStatus === WorkflowStatus.PENDING) {
+        return <PendingBadge />
+      }
+      return <CompletedBadge />
+    },
+    width: 200,
+    minWidth: 180,
+    maxWidth: 220,
+  },
+  {
+    Header: MRF_CURRENT_STEP_LABEL,
+    accessor: ({ mrf }) =>
+      getCurrentStepString(
+        mrf?.workflowCurrentStepNumber,
+        mrf?.workflowNumTotalSteps,
+      ),
+    width: 200,
+    minWidth: 180,
+    maxWidth: 220,
+  },
+  {
+    Header: MRF_FIRST_STEP_TIMESTAMP_LABEL,
+    accessor: 'submissionTime',
+    width: 250,
+    minWidth: 250,
+    disableResizing: true,
+  },
+]
+
 const PAYMENT_RESPONSE_TABLE_COLUMNS =
-  RESPONSE_TABLE_COLUMNS.concat(PAYMENT_COLUMNS)
+  NON_MRF_RESPONSE_TABLE_COLUMNS.concat(PAYMENT_COLUMNS)
 
 export const ResponsesTable = () => {
   const { data: form } = useAdminForm()
   const isPaymentsForm =
     form?.responseMode === FormResponseMode.Encrypt
       ? form.payments_field.enabled
       : false
+  const isMultiRespondentForm =
+    form?.responseMode === FormResponseMode.Multirespondent
 
   const {
     currentPage: currentPage1Indexed,
@@ -138,6 +238,16 @@ export const ResponsesTable = () => {
     }
   }, [filteredMetadata, metadata, submissionId])
 
+  const columns = useMemo(() => {
+    if (isMultiRespondentForm) {
+      return MRF_RESPONSE_TABLE_COLUMNS
+    }
+    if (isPaymentsForm) {
+      return PAYMENT_RESPONSE_TABLE_COLUMNS
+    }
+    return NON_MRF_RESPONSE_TABLE_COLUMNS
+  }, [isMultiRespondentForm, isPaymentsForm])
+
   const {
     prepareRow,
     getTableProps,
@@ -147,9 +257,7 @@ export const ResponsesTable = () => {
     gotoPage,
   } = useTable<ResponseColumnData>(
     {
-      columns: isPaymentsForm
-        ? PAYMENT_RESPONSE_TABLE_COLUMNS
-        : RESPONSE_TABLE_COLUMNS,
+      columns,
       data: metadataToUse,
       // Server side pagination.
       manualPagination: true,

frontend/src/features/admin-form/responses/ResponsesPage/storage/types.ts

@@ -2,6 +2,8 @@ import { FormField } from '@opengovsg/formsg-sdk/dist/types'
 import { Remote } from 'comlink'
 import { SetRequired } from 'type-fest'
 
+import { SubmissionMrfMetadata } from '~shared/types'
+
 import { CsvRecord } from './utils/CsvRecord.class'
 import { DecryptionWorkerApi } from './worker/decryption.worker'
 
@@ -23,6 +25,7 @@ export type CsvRecordData = FormField
 export type DecryptedSubmissionData = {
   created: string
   submissionId: string
+  mrfMeta?: SubmissionMrfMetadata
   record: CsvRecordData[]
 }
 

frontend/src/features/admin-form/responses/ResponsesPage/storage/useDecryptionWorkers.ts

@@ -48,6 +48,8 @@ export type DownloadEncryptedParams = EncryptedResponsesStreamParams & {
   secretKey: string
   // Number of responses to expect to download.
   responsesCount: number
+  // Used to determine if we should add MRF related columns to the CSV.
+  isMrf: boolean
 }
 interface UseDecryptionWorkersProps {
   onProgress: (progress: number) => void
@@ -104,6 +106,7 @@ const useDecryptionWorkers = ({
       secretKey,
       endDate,
       startDate,
+      isMrf,
     }: DownloadEncryptedParams) => {
       if (!adminForm || !responsesCount) {
         return Promise.resolve({
@@ -158,6 +161,7 @@ const useDecryptionWorkers = ({
       const csvGenerator = new EncryptedResponseCsvGenerator(
         responsesCount,
         NUM_OF_METADATA_ROWS,
+        isMrf,
       )
 
       const stream = await getEncryptedResponsesStream(
@@ -382,6 +386,7 @@ const useDecryptionWorkers = ({
       secretKey,
       endDate,
       startDate,
+      isMrf,
     }: DownloadEncryptedParams) => {
       if (!adminForm || !responsesCount) {
         return Promise.resolve({
@@ -435,6 +440,7 @@ const useDecryptionWorkers = ({
       const csvGenerator = new EncryptedResponseCsvGenerator(
         responsesCount,
         NUM_OF_METADATA_ROWS,
+        isMrf,
       )
 
       const stream = await getEncryptedResponsesStream(