24524572619

Committed 16 Apr 2026 05:31PM UTC coverage: 88.168%. First build

Build # 24524572619

Build Type

Pull #601

github

Committed by

web-flow

Commit Message

Merge 4bc0dd104 into cc4997e5a

Pull Request Pull Request #601: Map tab optimizations

Coverage Stats

1172 of 1430 branches covered (81.96%)

Branch coverage included in aggregate %.

168 of 266 new or added lines in 19 files covered. (63.16%)

2591 of 2838 relevant lines covered (91.3%)

228.83 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

87.5

/src/components/Search/Pill.js

import { dateRangeChanged } from '../../reducers/query/querySlice';
import {
  filterRemoved,
  filtersReplaced,
} from '../../reducers/filters/filtersSlice';
import { filterPatch, SLUG_SEPARATOR } from '../../constants';
import { formatPillPrefix, getUpdatedFilters } from '../../utils/filters';
import { useDispatch, useSelector } from 'react-redux';
import { coalesce } from '../../utils';
import { Icon } from '@cfpb/design-system-react';
import PropTypes from 'prop-types';
import { selectFiltersRoot } from '../../reducers/filters/selectors';
import { useGetAggregations } from '../../api/hooks/useGetAggregations';

export const Pill = ({ fieldName, value, displayValue, onRemove }) => {
  const { data: aggsState, error } = useGetAggregations();
  const filtersState = useSelector(selectFiltersRoot);
  const aggs = coalesce(aggsState, fieldName, []);
  const filters = coalesce(filtersState, fieldName, []);
  const prefix = formatPillPrefix(fieldName);
  const renderedValue = displayValue || value;
  const trimmed = renderedValue.split(SLUG_SEPARATOR).pop();
  const dispatch = useDispatch();

  const remove = () => {
    if (onRemove) {
      onRemove(value);
      return;
    }
    if (fieldName === 'date_received') {
      // reset date range
      dispatch(dateRangeChanged('All'));
    } else {
      const filterName = value;
      if (filterPatch.includes(fieldName)) {
        const updatedFilters = getUpdatedFilters(
          filterName,
          filters,
          aggs,
          fieldName,
        );
        dispatch(filtersReplaced(fieldName, updatedFilters));
      } else {
        dispatch(filterRemoved(fieldName, filterName));
      }
    }
  };

  return error ? null : (
    <li>
      <button
        className="a-tag-filter"
        aria-label={`${prefix}${trimmed}`}
        onClick={remove}
      >
        {prefix}
        {trimmed}
        <span className="a-btn--icon a-btn--icon--on-right">
          <Icon name="error" isPresentational />
        </span>
      </button>
    </li>
  );
};

Pill.propTypes = {
  fieldName: PropTypes.string.isRequired,
  value: PropTypes.string.isRequired,
  displayValue: PropTypes.string,
  onRemove: PropTypes.func,
};

1	import { dateRangeChanged } from '../../reducers/query/querySlice';
2	import {
3	filterRemoved,
4	filtersReplaced,
5	} from '../../reducers/filters/filtersSlice';
6	import { filterPatch, SLUG_SEPARATOR } from '../../constants';
7	import { formatPillPrefix, getUpdatedFilters } from '../../utils/filters';
8	import { useDispatch, useSelector } from 'react-redux';
9	import { coalesce } from '../../utils';
10	import { Icon } from '@cfpb/design-system-react';
11	import PropTypes from 'prop-types';
12	import { selectFiltersRoot } from '../../reducers/filters/selectors';
13	import { useGetAggregations } from '../../api/hooks/useGetAggregations';
14
15	export const Pill = ({ fieldName, value, displayValue, onRemove }) => {	8✔
16	const { data: aggsState, error } = useGetAggregations();	18✔
17	const filtersState = useSelector(selectFiltersRoot);	18✔
18	const aggs = coalesce(aggsState, fieldName, []);	18✔
19	const filters = coalesce(filtersState, fieldName, []);	18✔
20	const prefix = formatPillPrefix(fieldName);	18✔
21	const renderedValue = displayValue \|\| value;	18✔
22	const trimmed = renderedValue.split(SLUG_SEPARATOR).pop();	18✔
23	const dispatch = useDispatch();	18✔
24
25	const remove = () => {	18✔
26	if (onRemove) {	3!
NEW 27	onRemove(value);	×
NEW 28	return;	×
29	}
30	if (fieldName === 'date_received') {	3✔
31	// reset date range
32	dispatch(dateRangeChanged('All'));	1✔
33	} else {
34	const filterName = value;	2✔
35	if (filterPatch.includes(fieldName)) {	2✔
36	const updatedFilters = getUpdatedFilters(	1✔
37	filterName,
38	filters,
39	aggs,
40	fieldName,
41	);
42	dispatch(filtersReplaced(fieldName, updatedFilters));	1✔
43	} else {
44	dispatch(filterRemoved(fieldName, filterName));	1✔
45	}
46	}
47	};
48
49	return error ? null : (	18!
50	<li>
51	<button
52	className="a-tag-filter"
53	aria-label={`${prefix}${trimmed}`}
54	onClick={remove}
55	>
56	{prefix}
57	{trimmed}
58	<span className="a-btn--icon a-btn--icon--on-right">
59	<Icon name="error" isPresentational />
60	</span>
61	</button>
62	</li>
63	);
64	};
65
66	Pill.propTypes = {	8✔
67	fieldName: PropTypes.string.isRequired,
68	value: PropTypes.string.isRequired,
69	displayValue: PropTypes.string,
70	onRemove: PropTypes.func,
71	};

cfpb / ccdb5-ui / 24524572619

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous