feat(admin): Ballot Count Report Builder

apps/admin/frontend/src/components/reporting/filter_editor.test.tsx

@@ -15,14 +15,21 @@ afterEach(() => {
   apiMock.assertComplete();
 });
 
-test('general flow + precinct, voting method, ballot style selection', () => {
+test('precinct, voting method, ballot style selection (general flow)', () => {
   const { election } = electionTwoPartyPrimaryDefinition;
   const onChange = jest.fn();
 
   apiMock.expectGetScannerBatches([]);
-  renderInAppContext(<FilterEditor election={election} onChange={onChange} />, {
-    apiMock,
-  });
+  renderInAppContext(
+    <FilterEditor
+      election={election}
+      onChange={onChange}
+      allowedFilters={['ballot-style', 'precinct', 'voting-method']}
+    />,
+    {
+      apiMock,
+    }
+  );
 
   // Add filter row, precinct
   userEvent.click(screen.getButton('Add Filter'));
@@ -94,7 +101,7 @@ test('general flow + precinct, voting method, ballot style selection', () => {
   });
 });
 
-test('scanner + batch selection', async () => {
+test('scanner, batch selection', async () => {
   const { election } = electionTwoPartyPrimaryDefinition;
   const onChange = jest.fn();
 
@@ -118,9 +125,16 @@ test('scanner + batch selection', async () => {
       electionId: 'id',
     },
   ]);
-  renderInAppContext(<FilterEditor election={election} onChange={onChange} />, {
-    apiMock,
-  });
+  renderInAppContext(
+    <FilterEditor
+      election={election}
+      onChange={onChange}
+      allowedFilters={['scanner', 'batch']}
+    />,
+    {
+      apiMock,
+    }
+  );
 
   // add scanner filter
   userEvent.click(screen.getButton('Add Filter'));
@@ -147,14 +161,49 @@ test('scanner + batch selection', async () => {
   });
 });
 
+test('party selection', () => {
+  const { election } = electionTwoPartyPrimaryDefinition;
+  const onChange = jest.fn();
+
+  apiMock.expectGetScannerBatches([]);
+  renderInAppContext(
+    <FilterEditor
+      election={election}
+      onChange={onChange}
+      allowedFilters={['party']}
+    />,
+    {
+      apiMock,
+    }
+  );
+
+  // add scanner filter
+  userEvent.click(screen.getButton('Add Filter'));
+  userEvent.click(screen.getByLabelText('Select New Filter Type'));
+  userEvent.click(screen.getByText('Party'));
+  expect(onChange).toHaveBeenNthCalledWith(1, { partyIds: [] });
+  userEvent.click(screen.getByLabelText('Select Filter Values'));
+  screen.getByText('Mammal');
+  screen.getByText('Fish');
+  userEvent.click(screen.getByText('Mammal'));
+  expect(onChange).toHaveBeenNthCalledWith(2, { partyIds: ['0'] });
+});
+
 test('can cancel adding a filter', () => {
   const { election } = electionTwoPartyPrimaryDefinition;
   const onChange = jest.fn();
 
   apiMock.expectGetScannerBatches([]);
-  renderInAppContext(<FilterEditor election={election} onChange={onChange} />, {
-    apiMock,
-  });
+  renderInAppContext(
+    <FilterEditor
+      election={election}
+      onChange={onChange}
+      allowedFilters={['precinct']}
+    />,
+    {
+      apiMock,
+    }
+  );
 
   userEvent.click(screen.getButton('Add Filter'));
   userEvent.click(screen.getByLabelText('Cancel Add Filter'));

apps/admin/frontend/src/components/reporting/filter_editor.tsx

@@ -10,11 +10,7 @@ import styled from 'styled-components';
 import { SearchSelect, SelectOption, Icons, Button } from '@votingworks/ui';
 import type { ScannerBatch } from '@votingworks/admin-backend';
 import { getScannerBatches } from '../../api';
-
-export interface FilterEditorProps {
-  onChange: (filter: Tabulation.Filter) => void;
-  election: Election;
-}
+import { getPartiesWithPrimaryElections } from '../../utils/election';
 
 const FilterEditorContainer = styled.div`
   width: 100%;
@@ -74,12 +70,9 @@ const FILTER_TYPES = [
   'ballot-style',
   'scanner',
   'batch',
+  'party',
 ] as const;
-type FilterType = (typeof FILTER_TYPES)[number];
-
-function getAllowedFilterTypes(): FilterType[] {
-  return ['precinct', 'voting-method', 'ballot-style', 'scanner', 'batch'];
-}
+export type FilterType = (typeof FILTER_TYPES)[number];
 
 interface FilterRow {
   rowId: number;
@@ -94,6 +87,7 @@ const FILTER_TYPE_LABELS: Record<FilterType, string> = {
   'ballot-style': 'Ballot Style',
   scanner: 'Scanner',
   batch: 'Batch',
+  party: 'Party',
 };
 
 function getFilterTypeOption(filterType: FilterType): SelectOption<FilterType> {
@@ -123,6 +117,11 @@ function generateOptionsForFilter({
         value: bs.id,
         label: bs.id,
       }));
+    case 'party':
+      return getPartiesWithPrimaryElections(election).map((party) => ({
+        value: party.id,
+        label: party.name,
+      }));
     case 'voting-method':
       return typedAs<Array<SelectOption<Tabulation.VotingMethod>>>([
         {
@@ -172,6 +171,9 @@ function convertFilterRowsToTabulationFilter(
       case 'ballot-style':
         tabulationFilter.ballotStyleIds = filterValues;
         break;
+      case 'party':
+        tabulationFilter.partyIds = filterValues;
+        break;
       case 'scanner':
         tabulationFilter.scannerIds = filterValues;
         break;
@@ -187,9 +189,16 @@ function convertFilterRowsToTabulationFilter(
   return tabulationFilter;
 }
 
+export interface FilterEditorProps {
+  onChange: (filter: Tabulation.Filter) => void;
+  election: Election;
+  allowedFilters: FilterType[];
+}
+
 export function FilterEditor({
   onChange,
   election,
+  allowedFilters,
 }: FilterEditorProps): JSX.Element {
   const [rows, setRows] = useState<FilterRows>([]);
   const [nextRowId, setNextRowId] = useState(0);
@@ -236,7 +245,7 @@ export function FilterEditor({
   }
 
   const activeFilters: FilterType[] = rows.map((row) => row.filterType);
-  const unusedFilters: FilterType[] = getAllowedFilterTypes().filter(
+  const unusedFilters: FilterType[] = allowedFilters.filter(
     (filterType) => !activeFilters.includes(filterType)
   );
 

apps/admin/frontend/src/components/reporting/group_by_editor.test.tsx

@@ -8,10 +8,22 @@ test('GroupByEditor', () => {
   const setGroupBy = jest.fn();
   const groupBy: Tabulation.GroupBy = {
     groupByPrecinct: true,
+    groupByParty: true,
   };
 
   renderInAppContext(
-    <GroupByEditor groupBy={groupBy} setGroupBy={setGroupBy} />
+    <GroupByEditor
+      groupBy={groupBy}
+      setGroupBy={setGroupBy}
+      allowedGroupings={[
+        'groupByBallotStyle',
+        'groupByBatch',
+        'groupByParty',
+        'groupByPrecinct',
+        'groupByScanner',
+        'groupByVotingMethod',
+      ]}
+    />
   );
 
   const items: Array<[label: string, checked: boolean]> = [
@@ -20,6 +32,7 @@ test('GroupByEditor', () => {
     ['Ballot Style', false],
     ['Scanner', false],
     ['Batch', false],
+    ['Party', true],
   ];
 
   for (const [label, checked] of items) {

apps/admin/frontend/src/components/reporting/group_by_editor.tsx

@@ -2,19 +2,9 @@ import { Tabulation } from '@votingworks/types';
 import styled from 'styled-components';
 import { Checkbox, Font } from '@votingworks/ui';
 
-type Grouping = keyof Tabulation.GroupBy;
+export type GroupByType = keyof Tabulation.GroupBy;
 
-function getAllowedGroupings(): Grouping[] {
-  return [
-    'groupByPrecinct',
-    'groupByVotingMethod',
-    'groupByBallotStyle',
-    'groupByScanner',
-    'groupByBatch',
-  ];
-}
-
-const GROUPING_LABEL: Record<Grouping, string> = {
+const GROUPING_LABEL: Record<GroupByType, string> = {
   groupByParty: 'Party',
   groupByPrecinct: 'Precinct',
   groupByBallotStyle: 'Ballot Style',
@@ -26,11 +16,12 @@ const GROUPING_LABEL: Record<Grouping, string> = {
 export interface GroupByEditorProps {
   groupBy: Tabulation.GroupBy;
   setGroupBy: (groupBy: Tabulation.GroupBy) => void;
+  allowedGroupings: GroupByType[];
 }
 
 const Container = styled.div`
   display: grid;
-  grid-template-columns: repeat(5, min-content);
+  grid-template-columns: repeat(6, min-content);
   gap: 0.75rem;
 `;
 
@@ -66,15 +57,15 @@ const CheckboxContainer = styled.div`
 export function GroupByEditor({
   groupBy,
   setGroupBy,
+  allowedGroupings,
 }: GroupByEditorProps): JSX.Element {
-  function toggleGrouping(grouping: Grouping): void {
+  function toggleGrouping(grouping: GroupByType): void {
     setGroupBy({
       ...groupBy,
       [grouping]: !groupBy[grouping],
     });
   }
 
-  const allowedGroupings = getAllowedGroupings();
   return (
     <Container data-testid="group-by-editor">
       {allowedGroupings.map((grouping) => {

apps/admin/frontend/src/components/reporting/tally_report_viewer.test.tsx

@@ -184,7 +184,9 @@ test('print after preview loaded + test success logging', async () => {
     'election_manager',
     {
       disposition: 'success',
-      message: 'User printed a custom tally report from the report builder.',
+      message: 'User printed a tally report.',
+      filter: '{}',
+      groupBy: '{}',
     }
   );
 });
@@ -277,7 +279,9 @@ test('print failure logging', async () => {
       {
         disposition: 'failure',
         message:
-          'User attempted to print a custom tally report from the report builder, but an error occurred: printer broken',
+          'User attempted to print a tally report, but an error occurred: printer broken',
+        filter: '{}',
+        groupBy: '{}',
       }
     );
   });

apps/admin/frontend/src/components/reporting/tally_report_viewer.tsx

@@ -252,17 +252,23 @@ export function TallyReportViewer({
     );
 
     setProgressModalText('Printing Report');
+    const reportProperties = {
+      filter: JSON.stringify(filter),
+      groupBy: JSON.stringify(groupBy),
+    } as const;
     try {
       await printElement(reportToPrint, { sides: 'one-sided' });
       await logger.log(LogEventId.TallyReportPrinted, userRole, {
-        message: `User printed a custom tally report from the report builder.`,
+        message: `User printed a tally report.`,
         disposition: 'success',
+        ...reportProperties,
       });
     } catch (error) {
       assert(error instanceof Error);
       await logger.log(LogEventId.TallyReportPrinted, userRole, {
-        message: `User attempted to print a custom tally report from the report builder, but an error occurred: ${error.message}`,
+        message: `User attempted to print a tally report, but an error occurred: ${error.message}`,
         disposition: 'failure',
+        ...reportProperties,
       });
     } finally {
       setProgressModalText(undefined);

apps/admin/frontend/src/screens/tally_report_builder.tsx

@@ -69,11 +69,31 @@ export function TallyReportBuilder(): JSX.Element {
       </ul>
       <H3>Filters</H3>
       <FilterEditorContainer>
-        <FilterEditor election={election} onChange={updateFilter} />
+        <FilterEditor
+          election={election}
+          onChange={updateFilter}
+          allowedFilters={[
+            'ballot-style',
+            'batch',
+            'precinct',
+            'scanner',
+            'voting-method',
+          ]} // omits party
+        />
       </FilterEditorContainer>
       <H3>Report By</H3>
       <GroupByEditorContainer>
-        <GroupByEditor groupBy={groupBy} setGroupBy={updateGroupBy} />
+        <GroupByEditor
+          groupBy={groupBy}
+          setGroupBy={updateGroupBy}
+          allowedGroupings={[
+            'groupByBallotStyle',
+            'groupByBatch',
+            'groupByPrecinct',
+            'groupByScanner',
+            'groupByVotingMethod',
+          ]} // omits party
+        />
       </GroupByEditorContainer>
       <TallyReportViewer
         filter={filter}