Update UI for Jurisdiction, Audit, and Organization overview pages (#…

…2094)

* Separate support tool pages into individual files

* Update spacing and layout of Organization overview

* Update spacing and layout of Jurisdiction overview

* Update spacing and layout of Audit overview

* Update snapshots

* PR feedback: move Org edit, delete buttons to be next to heading

* PR feedback: move org breadcrumb back above audit title

client/src/components/AuditAdmin/__snapshots__/ActivityLog.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Activity Log shows a table of activity for the org 1`] = `
 <table
-  class="sc-kpOJdX dLlwHp"
+  class="sc-ckVGcZ diiVgN"
   id="activityLog"
   style="table-layout: auto;"
 >

client/src/components/AuditBoard/__snapshots__/AuditBoardView.test.tsx.snap

@@ -597,7 +597,7 @@ exports[`AuditBoardView ballot interaction renders board table with ballots 1`]
               class="sc-GMQeP FVNiK"
             >
               <table
-                class="sc-kpOJdX dLlwHp"
+                class="sc-ckVGcZ diiVgN"
                 role="table"
               >
                 <thead>
@@ -2878,7 +2878,7 @@ exports[`AuditBoardView ballot interaction renders board table with no audited b
               class="sc-GMQeP FVNiK"
             >
               <table
-                class="sc-kpOJdX dLlwHp"
+                class="sc-ckVGcZ diiVgN"
                 role="table"
               >
                 <thead>
@@ -4781,7 +4781,7 @@ exports[`AuditBoardView ballot interaction renders board table with no ballots 1
               class="sc-GMQeP FVNiK"
             >
               <table
-                class="sc-kpOJdX dLlwHp"
+                class="sc-ckVGcZ diiVgN"
                 role="table"
               >
                 <thead>
@@ -5105,7 +5105,7 @@ exports[`AuditBoardView member form submits, goes to ballot table, and header sh
               class="sc-GMQeP FVNiK"
             >
               <table
-                class="sc-kpOJdX dLlwHp"
+                class="sc-ckVGcZ diiVgN"
                 role="table"
               >
                 <thead>

client/src/components/SupportTools/Audit.tsx

@@ -0,0 +1,109 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+import { H2, AnchorButton, Tag, H4 } from '@blueprintjs/core'
+import { useElection, IElection } from './support-api'
+import RoundsTable from './RoundsTable'
+import { List, LinkItem } from './List'
+import Breadcrumbs from './Breadcrumbs'
+import { Column, Row } from './shared'
+
+const prettyAuditType = (auditType: IElection['auditType']) =>
+  ({
+    BALLOT_POLLING: 'Ballot Polling',
+    BALLOT_COMPARISON: 'Ballot Comparison',
+    BATCH_COMPARISON: 'Batch Comparison',
+    HYBRID: 'Hybrid',
+  }[auditType])
+
+const Audit = ({ electionId }: { electionId: string }) => {
+  const election = useElection(electionId)
+
+  if (!election.isSuccess) return null
+
+  const {
+    id,
+    auditName,
+    auditType,
+    organization,
+    jurisdictions,
+    rounds,
+  } = election.data
+
+  return (
+    <div
+      style={{
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        marginTop: '20px',
+      }}
+    >
+      <Row>
+        <Breadcrumbs>
+          <Link to={`/support/orgs/${organization.id}`}>
+            {organization.name}
+          </Link>
+        </Breadcrumbs>
+      </Row>
+      <Row>
+        <div
+          style={{
+            display: 'flex',
+            width: '100%',
+            justifyContent: 'space-between',
+            margin: '10px 0 20px 0',
+          }}
+        >
+          <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+            <H2 style={{ marginBottom: 0 }}>{auditName}</H2>
+            <Tag large>{prettyAuditType(auditType)}</Tag>
+          </div>
+          <AnchorButton
+            href={`/api/support/elections/${id}/login`}
+            icon="log-in"
+            intent="primary"
+          >
+            Log in as audit admin
+          </AnchorButton>
+        </div>
+      </Row>
+      <Row>
+        <Column>
+          <H4>Jurisdictions</H4>
+          <List>
+            {jurisdictions.map(jurisdiction => (
+              <LinkItem
+                to={`/support/jurisdictions/${jurisdiction.id}`}
+                key={jurisdiction.id}
+              >
+                {jurisdiction.name}
+                <AnchorButton
+                  href={`/api/support/jurisdictions/${jurisdiction.id}/login`}
+                  icon="log-in"
+                  onClick={(e: React.MouseEvent) => e.stopPropagation()}
+                >
+                  Log in
+                </AnchorButton>
+              </LinkItem>
+            ))}
+          </List>
+        </Column>
+        <Column>
+          <H4>Rounds</H4>
+          <div
+            style={{
+              alignItems: 'center',
+              display: 'flex',
+              marginBottom: '10px',
+            }}
+          ></div>
+          <div style={{ marginBottom: '10px' }}>
+            <RoundsTable electionId={electionId} rounds={rounds} />
+          </div>
+        </Column>
+      </Row>
+    </div>
+  )
+}
+
+export default Audit