Show last login time on audit progress (#2061)

Show last successful login in audit progress `Status` column

Author: kshen0

client/jest.config.js

@@ -12,7 +12,7 @@ module.exports = {
     // this number should only be getting closer to 0).
     global: {
       lines: -161,
-      branches: -194,
+      branches: -195,
     },
   },
   moduleFileExtensions: [

client/src/components/AuditAdmin/ActivityLog.tsx

@@ -5,8 +5,9 @@ import { IOrganization, useAuthDataContext, IAuditAdmin } from '../UserContext'
 import { Wrapper, Inner } from '../Atoms/Wrapper'
 import { StyledTable, downloadTableAsCSV } from '../Atoms/Table'
 import { fetchApi } from '../../utils/api'
+import useAuditAdminsOrganizations from '../useAuditAdminsOrganizations'
 
-interface IActivity {
+export interface IActivity {
   id: string
   activityName: string
   timestamp: string
@@ -73,11 +74,7 @@ const prettyAction = (activity: IActivity) => {
 const ActivityLog: React.FC = () => {
   const auth = useAuthDataContext()
   const user = auth && (auth.user as IAuditAdmin)
-  const organizations = useQuery<IOrganization[]>(
-    'orgs',
-    () => fetchApi(`/api/audit_admins/${user!.id}/organizations`),
-    { enabled: !!user }
-  )
+  const organizations = useAuditAdminsOrganizations(user)
   if (!organizations.isSuccess) return null
   return <ActivityLogOrgsLoaded organizations={organizations.data} />
 }

client/src/components/AuditAdmin/AuditAdminView.test.tsx

@@ -260,6 +260,7 @@ describe('AA setup flow', () => {
       }),
       aaApiCalls.getRounds(roundMocks.singleIncomplete),
       aaApiCalls.getJurisdictions,
+      aaApiCalls.getLastLoginByJurisdiction(),
       aaApiCalls.getMapData,
     ]
     await withMockFetch(expectedCalls, async () => {
@@ -299,6 +300,7 @@ describe('AA setup flow', () => {
       },
       aaApiCalls.getJurisdictions,
       aaApiCalls.getRounds(roundMocks.empty),
+      aaApiCalls.getLastLoginByJurisdiction(),
       aaApiCalls.getMapData,
     ]
     await withMockFetch(expectedCalls, async () => {
@@ -324,6 +326,7 @@ describe('AA setup flow', () => {
       aaApiCalls.getJurisdictions,
       aaApiCalls.getContests(contestMocks.filledTargeted),
       aaApiCalls.getSettings(auditSettingsMocks.all),
+      aaApiCalls.getLastLoginByJurisdiction(),
       aaApiCalls.getMapData,
       jaApiCalls.getBallotManifestFile(manifestMocks.empty),
       ...jaApiCalls.uploadManifestCalls,
@@ -332,6 +335,7 @@ describe('AA setup flow', () => {
         ...aaApiCalls.getJurisdictions,
         response: { jurisdictions: jurisdictionMocks.allManifests },
       },
+      aaApiCalls.getLastLoginByJurisdiction(),
     ]
     await withMockFetch(expectedCalls, async () => {
       const { container } = render('progress')
@@ -344,7 +348,7 @@ describe('AA setup flow', () => {
       let rows = screen.getAllByRole('row')
       let row1 = within(rows[1]).getAllByRole('cell')
       expect(row1[0]).toHaveTextContent('Jurisdiction One')
-      within(row1[1]).getByText('No manifest uploaded')
+      within(row1[1]).getByText('Logged in')
 
       // Click on a jurisdiction name to open the detail modal
       userEvent.click(screen.getByRole('button', { name: 'Jurisdiction One' }))
@@ -383,6 +387,7 @@ it('finishes a round', async () => {
     },
     aaApiCalls.getContests(contestMocks.filledTargeted),
     aaApiCalls.getSettings(auditSettingsMocks.all),
+    aaApiCalls.getLastLoginByJurisdiction(),
     aaApiCalls.getMapData,
     aaApiCalls.postFinishRound,
     aaApiCalls.getRounds(roundMocks.singleComplete),

client/src/components/AuditAdmin/AuditAdminView.tsx

@@ -14,7 +14,11 @@ import {
   IRound,
   useFinishRound,
 } from './useRoundsAuditAdmin'
-import { useJurisdictions, jurisdictionsQueryKey } from '../useJurisdictions'
+import {
+  jurisdictionsQueryKey,
+  jurisdictionsWithLastLoginQueryKey,
+  useJurisdictions,
+} from '../useJurisdictions'
 import { useContests } from '../useContests'
 import { useAuditSettings } from '../useAuditSettings'
 import { Wrapper, Inner } from '../Atoms/Wrapper'
@@ -48,16 +52,19 @@ const AuditAdminView: React.FC = () => {
         isDrawSampleComplete(rounds)
       ) {
         queryClient.invalidateQueries(jurisdictionsQueryKey(electionId))
+        queryClient.invalidateQueries(
+          jurisdictionsWithLastLoginQueryKey(electionId)
+        )
         history.push(`/election/${electionId}/progress`)
       }
       lastFetchedRounds.current = rounds
     },
   })
+  const jurisdictionsQuery = useJurisdictions(electionId)
   const startNextRoundMutation = useStartNextRound(electionId)
   const finishRoundMutation = useFinishRound(electionId)
   const undoRoundStartMutation = useUndoRoundStart(electionId)
 
-  const jurisdictionsQuery = useJurisdictions(electionId)
   const contestsQuery = useContests(electionId)
   const auditSettingsQuery = useAuditSettings(electionId)
 
@@ -66,13 +73,14 @@ const AuditAdminView: React.FC = () => {
     !contestsQuery.isSuccess ||
     !roundsQuery.isSuccess ||
     !auditSettingsQuery.isSuccess
-  )
+  ) {
     return null // Still loading
+  }
 
-  const jurisdictions = jurisdictionsQuery.data
   const contests = contestsQuery.data
   const rounds = roundsQuery.data
   const auditSettings = auditSettingsQuery.data
+  const jurisdictions = jurisdictionsQuery.data
 
   if (isDrawingSample(rounds)) {
     return (
@@ -153,6 +161,9 @@ const AuditAdminView: React.FC = () => {
               refresh={() => {
                 queryClient.invalidateQueries(roundsQueryKey(electionId))
                 queryClient.invalidateQueries(jurisdictionsQueryKey(electionId))
+                queryClient.invalidateQueries(
+                  jurisdictionsWithLastLoginQueryKey(electionId)
+                )
               }}
             />
           </AuditAdminStatusBox>

client/src/components/AuditAdmin/Progress/JurisdictionDetail.test.tsx

@@ -66,6 +66,32 @@ const render = (props: Partial<IJurisdictionDetailProps>) =>
   )
 
 describe('JurisdictionDetail', () => {
+  it('shows last login if it exists', async () => {
+    const expectedCalls = [
+      jaApiCalls.getBallotManifestFile(manifestMocks.empty),
+    ]
+    await withMockFetch(expectedCalls, async () => {
+      const loginTime = new Date().toLocaleString()
+      render({
+        jurisdiction: jurisdictionMocks.oneManifest[0],
+        lastLoginActivity: {
+          id: '0',
+          activityName: 'JurisdictionAdminLogin',
+          timestamp: loginTime,
+          user: {
+            type: 'jurisdiction-admin',
+            key: 'ja-1@example.com',
+            supportUser: false,
+          },
+          election: null,
+          info: {},
+        },
+      })
+
+      await screen.findByText(`ja-1@example.com at ${loginTime}`)
+    })
+  })
+
   it('before launch, shows manifest for ballot polling audit', async () => {
     const expectedCalls = [
       jaApiCalls.getBallotManifestFile(manifestMocks.empty),

client/src/components/AuditAdmin/Progress/JurisdictionDetail.tsx

@@ -32,6 +32,7 @@ import DownloadBatchRetrievalListButton from '../../JurisdictionAdmin/BatchRound
 import DownloadBatchTallySheetsButton from '../../JurisdictionAdmin/BatchRoundSteps/DownloadBatchTallySheetsButton'
 import { candidateTotalsByBatchTemplateCsvPath } from '../../JurisdictionAdmin/candidateTotalsByBatchTemplateCsv'
 import DownloadStackLabelsButton from '../../JurisdictionAdmin/BatchRoundSteps/DownloadStackLabelsButton'
+import { IActivity } from '../ActivityLog'
 
 const StatusCard = styled(Card)`
   &:not(:last-child) {
@@ -51,6 +52,7 @@ export interface IJurisdictionDetailProps {
   electionId: string
   round: IRound | null
   auditSettings: IAuditSettings
+  lastLoginActivity?: IActivity
 }
 
 const JurisdictionDetail: React.FC<IJurisdictionDetailProps> = ({
@@ -59,6 +61,7 @@ const JurisdictionDetail: React.FC<IJurisdictionDetailProps> = ({
   electionId,
   round,
   auditSettings,
+  lastLoginActivity,
 }) => {
   const cvrsEnabled =
     auditSettings.auditType === 'BALLOT_COMPARISON' ||
@@ -125,6 +128,16 @@ const JurisdictionDetail: React.FC<IJurisdictionDetailProps> = ({
             auditSettings={auditSettings}
           />
         )}
+        {lastLoginActivity && (
+          <>
+            <H5>Last Login</H5>
+            <span>
+              {`${lastLoginActivity.user!.key} at ${new Date(
+                lastLoginActivity.timestamp
+              ).toLocaleString()}`}
+            </span>
+          </>
+        )}
       </div>
     </Dialog>
   )