*/
import * as React from 'react';
import FacetBox from '../../../components/facet/FacetBox';
-import FacetHeader from '../../../components/facet/FacetHeader';
import FacetItem from '../../../components/facet/FacetItem';
import FacetItemsList from '../../../components/facet/FacetItemsList';
import { translate } from '../../../helpers/l10n';
export default function PeriodFilter(props: PeriodFilterProps) {
const { fetching, newCodeSelected, stats = {} } = props;
- const [open, setOpen] = React.useState(true);
-
const { onChange } = props;
const handleClick = React.useCallback(() => {
// We need to clear creation date filters they conflict with the new code period
});
}, [newCodeSelected, onChange]);
- const handleClear = React.useCallback(() => {
- onChange({ [Period.NewCode]: undefined });
- }, [onChange]);
-
return (
<FacetBox property={PROPERTY}>
- <FacetHeader
- fetching={fetching}
- name={translate('issues.facet', PROPERTY)}
- onClear={handleClear}
- onClick={() => setOpen(!open)}
- open={open}
- values={newCodeSelected ? [translate('issues.new_code')] : undefined}
- />
-
- {open && (
- <FacetItemsList>
- <FacetItem
- active={newCodeSelected}
- name={translate('issues.new_code')}
- onClick={handleClick}
- stat={formatFacetStat(stats[Period.NewCode])}
- value={Period.NewCode}
- />
- </FacetItemsList>
- )}
+ <FacetItemsList>
+ <FacetItem
+ active={newCodeSelected}
+ loading={fetching}
+ name={translate('issues.new_code')}
+ onClick={handleClick}
+ stat={formatFacetStat(stats[Period.NewCode])}
+ value={Period.NewCode}
+ />
+ </FacetItemsList>
</FacetBox>
);
}
import * as React from 'react';
import PeriodFilter, { PeriodFilterProps } from '../PeriodFilter';
-it('should be collapsible', async () => {
- const user = userEvent.setup();
-
- renderPeriodFilter();
-
- expect(screen.getByText('issues.new_code')).toBeInTheDocument();
-
- await user.click(screen.getByText('issues.facet.period'));
-
- expect(screen.queryByText('issues.new_code')).not.toBeInTheDocument();
-});
-
it('should filter when clicked', async () => {
const user = userEvent.setup();
const onChange = jest.fn();
});
});
-it('should be clearable', async () => {
- const user = userEvent.setup();
- const onChange = jest.fn();
-
- renderPeriodFilter({ onChange, newCodeSelected: true });
-
- await user.click(screen.getByText('clear'));
-
- expect(onChange).toHaveBeenCalledWith({
- inNewCodePeriod: undefined
- });
-});
-
function renderPeriodFilter(overrides: Partial<PeriodFilterProps> = {}) {
return render(
<PeriodFilter
issues.to_navigate_back=to navigate back
issues.to_navigate_issue_locations=to navigate issue locations
issues.to_switch_flows=to switch flows
-issues.new_code=New code
+issues.new_code=Issues in new code
issues.new_code_period=New Code Period
issues.max_new_code_period=Max New Code Period
issues.my_issues=My Issues