diff --git a/src/short-urls/helpers/ShortUrlsFilterDropdown.tsx b/src/short-urls/helpers/ShortUrlsFilterDropdown.tsx
index 4b36d502..5d774e1a 100644
--- a/src/short-urls/helpers/ShortUrlsFilterDropdown.tsx
+++ b/src/short-urls/helpers/ShortUrlsFilterDropdown.tsx
@@ -5,23 +5,40 @@ import { ShortUrlsFilter } from '../data';
interface ShortUrlsFilterDropdownProps {
onChange: (filters: ShortUrlsFilter) => void;
+ supportsDisabledFiltering: boolean;
selected?: ShortUrlsFilter;
className?: string;
}
export const ShortUrlsFilterDropdown = (
- { onChange, selected = {}, className }: ShortUrlsFilterDropdownProps,
+ { onChange, selected = {}, className, supportsDisabledFiltering }: ShortUrlsFilterDropdownProps,
) => {
- const { excludeBots = false } = selected;
- const onBotsClick = () => onChange({ ...selected, excludeBots: !selected?.excludeBots });
+ const { excludeBots = false, excludeMaxVisitsReached = false, excludePastValidUntil = false } = selected;
+ const onFilterClick = (key: keyof ShortUrlsFilter) => () => onChange({ ...selected, [key]: !selected?.[key] });
return (
- Bots:
- Exclude bots visits
+ Visits:
+ Ignore visits from bots
+
+ {supportsDisabledFiltering && (
+ <>
+
+ Short URLs:
+
+ Exclude with visits reached
+
+
+ Exclude enabled in the past
+
+ >
+ )}
- onChange({ excludeBots: false })}>
+ onChange({ excludeBots: false, excludeMaxVisitsReached: false, excludePastValidUntil: false })}
+ >
Clear filters
diff --git a/test/short-urls/helpers/ShortUrlsFilterDropdown.test.tsx b/test/short-urls/helpers/ShortUrlsFilterDropdown.test.tsx
new file mode 100644
index 00000000..b1168b27
--- /dev/null
+++ b/test/short-urls/helpers/ShortUrlsFilterDropdown.test.tsx
@@ -0,0 +1,21 @@
+import { screen, waitFor } from '@testing-library/react';
+import { ShortUrlsFilterDropdown } from '../../../src/short-urls/helpers/ShortUrlsFilterDropdown';
+import { renderWithEvents } from '../../__helpers__/setUpTest';
+
+describe('', () => {
+ const setUp = (supportsDisabledFiltering: boolean) => renderWithEvents(
+ ,
+ );
+
+ it.each([
+ [true, 3],
+ [false, 1],
+ ])('displays proper amount of menu items', async (supportsDisabledFiltering, expectedItems) => {
+ const { user } = setUp(supportsDisabledFiltering);
+
+ await user.click(screen.getByRole('button', { name: 'Filters' }));
+ await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument());
+
+ expect(screen.getAllByRole('menuitem')).toHaveLength(expectedItems);
+ });
+});