Merge pull request #847 from acelaya-forks/exclude-tags

acelaya · web-flow · commit f6342db3bc27 · 2025-11-11T09:19:53.000+01:00
Allow short URLs to be filtered by excluded tags
diff --git a/src/short-urls/ShortUrlsFilteringBar.tsx b/src/short-urls/ShortUrlsFilteringBar.tsx
@@ -46,16 +46,19 @@ const ShortUrlsFilteringBar: FCWithDeps<ShortUrlsFilteringConnectProps, ShortUrl
   const [{
     search,
     tags,
+    tagsMode = 'any',
+    excludeTags,
+    excludeTagsMode = 'any',
     startDate,
     endDate,
     excludeBots,
     excludeMaxVisitsReached,
     excludePastValidUntil,
     domain,
-    tagsMode = 'any',
   }, toFirstPage] = useShortUrlsQuery();
   const visitsSettings = useSetting('visits');
   const supportsFilterByDomain = useFeature('filterShortUrlsByDomain');
+  const supportsFilterByExcludedTags = useFeature('filterShortUrlsByExcludedTags');
 
   const [activeInterval, setActiveInterval] = useState<DateInterval>();
   const setDates = useCallback(
@@ -75,13 +78,26 @@ const ShortUrlsFilteringBar: FCWithDeps<ShortUrlsFilteringConnectProps, ShortUrl
   const setDomain = useCallback((domain?: string) => toFirstPage({ domain }), [toFirstPage]);
   const changeTagSelection = useCallback((newTags: string[]) => toFirstPage({ tags: newTags }), [toFirstPage]);
   const changeTagsMode = useCallback((tagsMode: TagsFilteringMode) => toFirstPage({ tagsMode }), [toFirstPage]);
+  const changeExcludeTagSelection = useCallback(
+    (newTags: string[]) => toFirstPage({ excludeTags: newTags }),
+    [toFirstPage],
+  );
+  const changeExcludeTagsMode = useCallback(
+    (excludeTagsMode: TagsFilteringMode) => toFirstPage({ excludeTagsMode }),
+    [toFirstPage],
+  );
 
   return (
     <div className={clsx('flex flex-col gap-y-4', className)}>
       <SearchInput defaultValue={search} onChange={setSearch} />
 
       <div className="flex flex-col xl:flex-row-reverse justify-between gap-y-4">
-        <div className="min-w-2/3 inline-flex flex-col lg:flex-row gap-x-2 gap-y-4">
+        <div
+          className={clsx(
+            'flex flex-col lg:flex-row gap-x-2 gap-y-4',
+            { 'min-w-3/4': supportsFilterByExcludedTags, 'min-w-2/3': !supportsFilterByExcludedTags },
+          )}
+        >
           <div className="flex flex-col md:flex-row gap-x-2 gap-y-4 grow">
             <div className="grow">
               <DateRangeSelector
@@ -90,16 +106,30 @@ const ShortUrlsFilteringBar: FCWithDeps<ShortUrlsFilteringConnectProps, ShortUrl
                 onDatesChange={setDates}
               />
             </div>
-            <TagsSearchDropdown
-              title="Filter by tag"
-              prefix="With"
-              tags={tagsList.tags}
-              selectedTags={tags}
-              onTagsChange={changeTagSelection}
-              mode={tagsMode}
-              onModeChange={changeTagsMode}
-              buttonClassName="w-full"
-            />
+            <div className={clsx('grid lg:flex gap-x-2 gap-y-4', { 'grid-cols-2': supportsFilterByExcludedTags })}>
+              <TagsSearchDropdown
+                title="Filter by tag"
+                prefix="With"
+                tags={tagsList.tags}
+                selectedTags={tags}
+                onTagsChange={changeTagSelection}
+                mode={tagsMode}
+                onModeChange={changeTagsMode}
+                buttonClassName="w-full"
+              />
+              {supportsFilterByExcludedTags && (
+                <TagsSearchDropdown
+                  title="Filter by excluded tag"
+                  prefix="Without"
+                  tags={tagsList.tags}
+                  selectedTags={excludeTags}
+                  onTagsChange={changeExcludeTagSelection}
+                  mode={excludeTagsMode}
+                  onModeChange={changeExcludeTagsMode}
+                  buttonClassName="w-full"
+                />
+              )}
+            </div>
           </div>
           <div className={clsx('grid lg:flex gap-x-2 gap-y-4', { 'grid-cols-2': supportsFilterByDomain })}>
             {supportsFilterByDomain && (
diff --git a/src/short-urls/ShortUrlsList.tsx b/src/short-urls/ShortUrlsList.tsx
@@ -47,11 +47,13 @@ const ShortUrlsList: FCWithDeps<ShortUrlsListProps, ShortUrlsListDeps> = boundTo
   const location = useLocation();
   const [{
     tags,
+    tagsMode,
+    excludeTags,
+    excludeTagsMode,
     search,
     startDate,
     endDate,
     orderBy,
-    tagsMode,
     excludeBots,
     excludePastValidUntil,
     excludeMaxVisitsReached,
@@ -95,10 +97,12 @@ const ShortUrlsList: FCWithDeps<ShortUrlsListProps, ShortUrlsListDeps> = boundTo
       page,
       searchTerm: search,
       tags,
+      tagsMode,
+      excludeTags,
+      excludeTagsMode,
       startDate,
       endDate,
       orderBy: parseOrderByForShlink(actualOrderBy),
-      tagsMode,
       excludePastValidUntil,
       excludeMaxVisitsReached,
       domain,
@@ -116,6 +120,8 @@ const ShortUrlsList: FCWithDeps<ShortUrlsListProps, ShortUrlsListDeps> = boundTo
     excludePastValidUntil,
     excludeMaxVisitsReached,
     domain,
+    excludeTags,
+    excludeTagsMode,
   ]);
 
   return (
diff --git a/src/short-urls/helpers/hooks.ts b/src/short-urls/helpers/hooks.ts
@@ -13,11 +13,13 @@ type ShortUrlsQueryCommon = {
   startDate?: string;
   endDate?: string;
   tagsMode?: TagsFilteringMode;
+  excludeTagsMode?: TagsFilteringMode;
 };
 
 type ShortUrlsRawQuery = Record<string, unknown> & ShortUrlsQueryCommon & {
   orderBy?: string;
   tags?: string;
+  excludeTags?: string;
   excludeBots?: BooleanString;
   excludeMaxVisitsReached?: BooleanString;
   excludePastValidUntil?: BooleanString;
@@ -27,6 +29,7 @@ type ShortUrlsRawQuery = Record<string, unknown> & ShortUrlsQueryCommon & {
 type ShortUrlsQuery = ShortUrlsQueryCommon & {
   orderBy?: ShortUrlsOrder;
   tags: string[];
+  excludeTags: string[];
   excludeBots?: boolean;
   excludeMaxVisitsReached?: boolean;
   excludePastValidUntil?: boolean;
@@ -42,13 +45,22 @@ export const useShortUrlsQuery = (): [ShortUrlsQuery, ToFirstPage] => {
 
   const filtering = useMemo(
     (): ShortUrlsQuery => {
-      const { orderBy, tags, excludeBots, excludeMaxVisitsReached, excludePastValidUntil, ...rest } = query;
+      const {
+        orderBy,
+        tags,
+        excludeTags,
+        excludeBots,
+        excludeMaxVisitsReached,
+        excludePastValidUntil,
+        ...rest
+      } = query;
       const parsedOrderBy = orderBy ? stringToOrder<ShortUrlsOrderableFields>(orderBy) : undefined;
       const parsedTags = tags?.split(',') ?? [];
       return {
         ...rest,
         orderBy: parsedOrderBy,
         tags: parsedTags,
+        excludeTags: excludeTags?.split(',') ?? [],
         excludeBots: excludeBots !== undefined ? excludeBots === 'true' : undefined,
         excludeMaxVisitsReached: excludeMaxVisitsReached !== undefined ? excludeMaxVisitsReached === 'true' : undefined,
         excludePastValidUntil: excludePastValidUntil !== undefined ? excludePastValidUntil === 'true' : undefined,
@@ -58,11 +70,20 @@ export const useShortUrlsQuery = (): [ShortUrlsQuery, ToFirstPage] => {
   );
   const toFirstPageWithExtra = useCallback((extra: Partial<ShortUrlsQuery>) => {
     const merged = { ...filtering, ...extra };
-    const { orderBy, tags, excludeBots, excludeMaxVisitsReached, excludePastValidUntil, ...mergedFiltering } = merged;
+    const {
+      orderBy,
+      tags,
+      excludeTags,
+      excludeBots,
+      excludeMaxVisitsReached,
+      excludePastValidUntil,
+      ...mergedFiltering
+    } = merged;
     const newQuery: ShortUrlsRawQuery = {
       ...mergedFiltering,
       orderBy: orderBy && orderToString(orderBy),
       tags: tags.length > 0 ? tags.join(',') : undefined,
+      excludeTags: excludeTags.length > 0 ? excludeTags.join(',') : undefined,
       excludeBots: parseOptionalBooleanToString(excludeBots),
       excludeMaxVisitsReached: parseOptionalBooleanToString(excludeMaxVisitsReached),
       excludePastValidUntil: parseOptionalBooleanToString(excludePastValidUntil),
diff --git a/src/utils/features.ts b/src/utils/features.ts
@@ -8,6 +8,7 @@ const supportedFeatures = {
   filterShortUrlsByDomain: { minVersion: '4.3.0' },
   advancedQueryRedirectConditions: { minVersion: '4.5.0' },
   desktopDeviceTypes: { minVersion: '4.5.0' },
+  filterShortUrlsByExcludedTags: { minVersion: '4.6.0' },
 } as const satisfies Record<string, Versions>;
 
 Object.freeze(supportedFeatures);
@@ -25,6 +26,7 @@ const getFeaturesForVersion = (serverVersion: SemVerOrLatest): Record<Feature, b
   filterShortUrlsByDomain: isFeatureEnabledForVersion('filterShortUrlsByDomain', serverVersion),
   advancedQueryRedirectConditions: isFeatureEnabledForVersion('advancedQueryRedirectConditions', serverVersion),
   desktopDeviceTypes: isFeatureEnabledForVersion('advancedQueryRedirectConditions', serverVersion),
+  filterShortUrlsByExcludedTags: isFeatureEnabledForVersion('filterShortUrlsByExcludedTags', serverVersion),
 });
 
 const FeaturesContext = createContext(getFeaturesForVersion('0.0.0'));
diff --git a/test/short-urls/ShortUrlsFilteringBar.test.tsx b/test/short-urls/ShortUrlsFilteringBar.test.tsx
@@ -8,36 +8,49 @@ import { Router } from 'react-router';
 import { DEFAULT_DOMAIN } from '../../src/domains/data';
 import { SettingsProvider } from '../../src/settings';
 import { ShortUrlsFilteringBarFactory } from '../../src/short-urls/ShortUrlsFilteringBar';
+import { TagsSearchDropdownFactory } from '../../src/tags/helpers/TagsSearchDropdown';
 import { FeaturesProvider } from '../../src/utils/features';
 import { RoutesPrefixProvider } from '../../src/utils/routesPrefix';
 import { checkAccessibility } from '../__helpers__/accessibility';
 import { renderWithEvents } from '../__helpers__/setUpTest';
+import { colorGeneratorMock } from '../utils/services/__mocks__/ColorGenerator.mock';
 
 type SetUpOptions = {
   search?: string;
   routesPrefix?: string;
   filterByDomainSupported?: boolean;
+  filterByExcludedTagSupported?: boolean;
 };
 
 describe('<ShortUrlsFilteringBar />', () => {
   const ShortUrlsFilteringBar = ShortUrlsFilteringBarFactory(fromPartial({
     ExportShortUrlsBtn: () => <>ExportShortUrlsBtn</>,
-    TagsSearchDropdown: () => <>TagsSearchDropdown</>,
+    TagsSearchDropdown: TagsSearchDropdownFactory(fromPartial({ ColorGenerator: colorGeneratorMock })),
   }));
   const handleOrderBy = vi.fn();
   let history: MemoryHistory;
 
-  const setUp = ({ search, routesPrefix = '', filterByDomainSupported = false }: SetUpOptions = {}) => {
+  const setUp = ({
+    search,
+    routesPrefix = '',
+    filterByDomainSupported = false,
+    filterByExcludedTagSupported = false,
+  }: SetUpOptions = {}) => {
     history = createMemoryHistory({ initialEntries: search ? [{ search }] : undefined });
     return renderWithEvents(
       <Router location={history.location} navigator={history}>
         <SettingsProvider value={fromPartial({ visits: {} })}>
           <RoutesPrefixProvider value={routesPrefix}>
-            <FeaturesProvider value={fromPartial({ filterShortUrlsByDomain: filterByDomainSupported })}>
+            <FeaturesProvider
+              value={fromPartial({
+                filterShortUrlsByDomain: filterByDomainSupported,
+                filterShortUrlsByExcludedTags: filterByExcludedTagSupported,
+              })}
+            >
               <ShortUrlsFilteringBar
                 order={{}}
                 handleOrderBy={handleOrderBy}
-                tagsList={fromPartial({ tags: [] })}
+                tagsList={fromPartial({ tags: ['foo', 'bar', 'baz'] })}
                 domainsList={fromPartial({
                   domains: [
                     { isDefault: true, domain: 'example.com' },
@@ -60,9 +73,7 @@ describe('<ShortUrlsFilteringBar />', () => {
 
   it('renders expected children components', () => {
     setUp();
-
     expect(screen.getByText('ExportShortUrlsBtn')).toBeInTheDocument();
-    expect(screen.getByText('TagsSearchDropdown')).toBeInTheDocument();
   });
 
   it('redirects to first page when search field changes', async () => {
@@ -152,7 +163,7 @@ describe('<ShortUrlsFilteringBar />', () => {
   it.each([
     { domain: /^example.com/, expectedQueryDomain: DEFAULT_DOMAIN },
     { domain: 's.test', expectedQueryDomain: 's.test' },
-  ])('redirects to first page when selected domain changes', async ({ domain, expectedQueryDomain }) => {
+  ])('updates query params when selected domain changes', async ({ domain, expectedQueryDomain }) => {
     const { user } = setUp({ filterByDomainSupported: true });
 
     await user.click(screen.getByRole('button', { name: 'All domains' }));
@@ -161,4 +172,62 @@ describe('<ShortUrlsFilteringBar />', () => {
     await user.click(screen.getByRole('menuitem', { name: domain }));
     await waitFor(() => expect(paramFromCurrentQuery('domain')).toEqual(expectedQueryDomain));
   });
+
+  it('updates query params when tags change', async () => {
+    const { user } = setUp();
+
+    await user.click(screen.getByRole('button', { name: 'With tags...' }));
+    const menu = await screen.findByRole('menu');
+
+    await user.type(menu.querySelector('[placeholder="Search..."]')!, 'f');
+    await user.click(await screen.findByRole('option', { name: 'foo' }));
+
+    await waitFor(() => expect(paramFromCurrentQuery('tags')).toEqual('foo'));
+  });
+
+  it('updates query params when tags mode changes', async () => {
+    const { user } = setUp();
+
+    await user.click(screen.getByRole('button', { name: 'With tags...' }));
+
+    await user.click(await screen.findByRole('button', { name: 'Any' }));
+    await waitFor(() => expect(paramFromCurrentQuery('tagsMode')).toEqual('any'));
+
+    await user.click(await screen.findByRole('button', { name: 'All' }));
+    await waitFor(() => expect(paramFromCurrentQuery('tagsMode')).toEqual('all'));
+  });
+
+  it.each([true, false])('shows exclude tags dropdown if supported', (filterByExcludedTagSupported) => {
+    setUp({ filterByExcludedTagSupported });
+
+    if (filterByExcludedTagSupported) {
+      expect(screen.getByRole('button', { name: 'Without tags...' })).toBeInTheDocument();
+    } else {
+      expect(screen.queryByRole('button', { name: 'Without tags...' })).not.toBeInTheDocument();
+    }
+  });
+
+  it('updates query params when excluded tags change', async () => {
+    const { user } = setUp({ filterByExcludedTagSupported: true });
+
+    await user.click(screen.getByRole('button', { name: 'Without tags...' }));
+    const menu = await screen.findByRole('menu');
+
+    await user.type(menu.querySelector('[placeholder="Search..."]')!, 'ba');
+    await user.click(await screen.findByRole('option', { name: 'bar' }));
+
+    await waitFor(() => expect(paramFromCurrentQuery('excludeTags')).toEqual('bar'));
+  });
+
+  it('updates query params when excluded tags mode changes', async () => {
+    const { user } = setUp({ filterByExcludedTagSupported: true });
+
+    await user.click(screen.getByRole('button', { name: 'Without tags...' }));
+
+    await user.click(await screen.findByRole('button', { name: 'Any' }));
+    await waitFor(() => expect(paramFromCurrentQuery('excludeTagsMode')).toEqual('any'));
+
+    await user.click(await screen.findByRole('button', { name: 'All' }));
+    await waitFor(() => expect(paramFromCurrentQuery('excludeTagsMode')).toEqual('all'));
+  });
 });
