Fixed comment filter migration regressions

ref https://linear.app/ghost/issue/BER-3505/migrate-comment-moderation-filters-to-new-filter-primitives

Aligned comments filtering with members by preserving draft filter state, using site timezone date defaults, keeping thread as URL state, and isolating temporary legacy URL fallback code.

Author: jonatansberg

apps/posts/src/views/comments/comments.tsx

@@ -28,7 +28,6 @@ const CommentsPage: React.FC<{timezone: string; singleCommentId?: string}> = ({
 }) => {
     const [searchParams, setSearchParams] = useSearchParams();
     const {filters, nql, setFilters} = useFilterState(timezone);
-    const threadParam = searchParams.get('thread') ?? undefined;
     const handleAddFilter = useCallback((field: string, value: string, operator: string = 'is') => {
         const nextFilters = [
             ...filters.filter(filter => filter.field !== field),
@@ -74,7 +73,6 @@ const CommentsPage: React.FC<{timezone: string; singleCommentId?: string}> = ({
         hasNextPage
     } = useBrowseComments({
         searchParams: {
-            ...(threadParam && !singleCommentId ? {thread: threadParam} : {}),
             ...(effectiveFilter ? {filter: effectiveFilter} : {})
         },
         keepPreviousData: true
@@ -88,6 +86,7 @@ const CommentsPage: React.FC<{timezone: string; singleCommentId?: string}> = ({
                 {!singleCommentId && (
                     <CommentsFilters
                         filters={filters}
+                        siteTimezone={timezone}
                         onFiltersChange={setFilters}
                     />
                 )}

apps/posts/src/views/comments/components/comments-filters.tsx

@@ -7,18 +7,21 @@ import {usePostResourceValueSource} from '@src/hooks/filter-sources/use-post-res
 
 interface CommentsFiltersProps {
     filters: Filter[];
+    siteTimezone: string;
     onFiltersChange: (filters: Filter[]) => void;
 }
 
 const CommentsFilters: React.FC<CommentsFiltersProps> = ({
     filters,
+    siteTimezone,
     onFiltersChange
 }) => {
     const postValueSource = usePostResourceValueSource();
     const memberValueSource = useMemberValueSource();
     const filterFields = useCommentFilterFields({
         memberValueSource,
-        postValueSource
+        postValueSource,
+        siteTimezone
     });
 
     const hasFilters = filters.length > 0;

apps/posts/src/views/comments/hooks/use-filter-state.ts

@@ -1,6 +1,7 @@
 import {Filter} from '@tryghost/shade/patterns';
 import {hasTimezoneSensitiveCommentFilter, parseCommentFilter, serializeCommentFilters} from '../comment-filter-query';
-import {useCallback, useMemo} from 'react';
+import {parseLegacyCommentFilters, removeLegacyCommentFilterParams} from '../legacy-comment-filter-query';
+import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {useSearchParams} from '@tryghost/admin-x-framework';
 
 type SetFiltersAction = Filter[] | ((prevFilters: Filter[]) => Filter[]);
@@ -22,6 +23,7 @@ function toSearchParams(baseSearchParams: URLSearchParams, filters: Filter[], ti
     const filter = serializeCommentFilters(filters, timezone);
 
     params.delete('filter');
+    removeLegacyCommentFilterParams(params);
 
     if (filter) {
         params.set('filter', filter);
@@ -40,21 +42,51 @@ export function shouldDelayCommentDateFilterHydration(
 
 export function useFilterState(timezone: string): UseFilterStateReturn {
     const [searchParams, setSearchParams] = useSearchParams();
+    const lastWrittenQueryRef = useRef<string | null>(null);
     const filterParam = useMemo(() => searchParams.get('filter') ?? undefined, [searchParams]);
+    const currentQuery = useMemo(() => searchParams.toString(), [searchParams]);
 
-    const filters = useMemo(() => {
-        return parseCommentFilter(filterParam, timezone);
-    }, [filterParam, timezone]);
+    const parsedFilters = useMemo(() => {
+        if (filterParam !== undefined) {
+            return parseCommentFilter(filterParam, timezone);
+        }
+
+        return parseLegacyCommentFilters(searchParams);
+    }, [filterParam, searchParams, timezone]);
+    const [filters, setDraftFilters] = useState<Filter[]>(parsedFilters);
 
     const nql = useMemo(() => {
         return serializeCommentFilters(filters, timezone);
     }, [filters, timezone]);
 
+    useEffect(() => {
+        if (currentQuery !== lastWrittenQueryRef.current) {
+            setDraftFilters(parsedFilters);
+            lastWrittenQueryRef.current = currentQuery;
+        }
+    }, [currentQuery, parsedFilters]);
+
+    useEffect(() => {
+        if (lastWrittenQueryRef.current !== null && currentQuery !== lastWrittenQueryRef.current) {
+            return;
+        }
+
+        const nextParams = toSearchParams(searchParams, filters, timezone);
+        const nextQuery = nextParams.toString();
+
+        if (nextQuery !== currentQuery) {
+            lastWrittenQueryRef.current = nextQuery;
+            setSearchParams(nextParams, {replace: true});
+        }
+    }, [currentQuery, filters, searchParams, setSearchParams, timezone]);
+
     const setFilters = useCallback((action: SetFiltersAction, options: SetFiltersOptions = {}) => {
         const newFilters = typeof action === 'function' ? action(filters) : action;
         const newParams = toSearchParams(searchParams, newFilters, timezone);
         const replace = options.replace ?? true;
 
+        setDraftFilters(newFilters);
+        lastWrittenQueryRef.current = newParams.toString();
         setSearchParams(newParams, {replace});
     }, [filters, searchParams, setSearchParams, timezone]);
 
@@ -63,6 +95,9 @@ export function useFilterState(timezone: string): UseFilterStateReturn {
 
         newParams.delete('filter');
 
+        removeLegacyCommentFilterParams(newParams);
+        setDraftFilters([]);
+        lastWrittenQueryRef.current = newParams.toString();
         setSearchParams(newParams, {replace});
     }, [searchParams, setSearchParams]);
 

apps/posts/src/views/comments/legacy-comment-filter-query.ts

@@ -0,0 +1,57 @@
+import {Filter} from '@tryghost/shade/patterns';
+
+// TODO: Remove this file after the comment filters migration has safely rolled out.
+const LEGACY_COMMENT_FILTER_FIELDS = ['status', 'created_at', 'body', 'post', 'author', 'reported'] as const;
+const LEGACY_OPERATOR_MAP: Record<string, string> = {
+    is_not: 'is-not',
+    not_contains: 'does-not-contain'
+};
+
+function parseLegacyFilterValue(queryValue: string): {operator: string; value: string} | null {
+    const colonIndex = queryValue.indexOf(':');
+
+    if (colonIndex <= 0) {
+        return null;
+    }
+
+    const operator = queryValue.substring(0, colonIndex);
+    const value = queryValue.substring(colonIndex + 1);
+
+    if (!value) {
+        return null;
+    }
+
+    return {
+        operator: LEGACY_OPERATOR_MAP[operator] ?? operator,
+        value
+    };
+}
+
+export function parseLegacyCommentFilters(searchParams: URLSearchParams): Filter[] {
+    const filters: Filter[] = [];
+
+    for (const [field, queryValue] of searchParams.entries()) {
+        if (!LEGACY_COMMENT_FILTER_FIELDS.includes(field as typeof LEGACY_COMMENT_FILTER_FIELDS[number])) {
+            continue;
+        }
+
+        const parsed = parseLegacyFilterValue(queryValue);
+
+        if (!parsed) {
+            continue;
+        }
+
+        filters.push({
+            id: `${field}:${filters.length + 1}`,
+            field,
+            operator: parsed.operator,
+            values: [parsed.value]
+        });
+    }
+
+    return filters;
+}
+
+export function removeLegacyCommentFilterParams(searchParams: URLSearchParams): void {
+    LEGACY_COMMENT_FILTER_FIELDS.forEach(field => searchParams.delete(field));
+}

apps/posts/src/views/comments/use-comment-filter-fields.ts

@@ -1,4 +1,5 @@
 import React, {useMemo} from 'react';
+import moment from 'moment-timezone';
 import {FilterFieldConfig, ValueSource} from '@tryghost/shade/patterns';
 import {LucideIcon} from '@tryghost/shade/utils';
 import {commentFields} from './comment-fields';
@@ -7,6 +8,7 @@ import {createOperatorOptions} from '../filters/filter-operator-options';
 interface UseCommentFilterFieldsOptions {
     postValueSource: ValueSource<string>;
     memberValueSource: ValueSource<string>;
+    siteTimezone?: string;
 }
 
 const COMMENT_FIELD_ORDER = ['author', 'post', 'body', 'status', 'reported', 'created_at'] as const;
@@ -32,9 +34,12 @@ function getFieldIcon(key: string) {
 
 export function useCommentFilterFields({
     postValueSource,
-    memberValueSource
+    memberValueSource,
+    siteTimezone = 'UTC'
 }: UseCommentFilterFieldsOptions): FilterFieldConfig[] {
     return useMemo(() => {
+        const today = moment.tz(siteTimezone).format('YYYY-MM-DD');
+
         return COMMENT_FIELD_ORDER.map((key) => {
             const field = commentFields[key];
 
@@ -44,9 +49,10 @@ export function useCommentFilterFields({
                 icon: getFieldIcon(key),
                 operators: createOperatorOptions(field.operators),
                 ...('options' in field && field.options ? {options: field.options} : {}),
+                ...(key === 'created_at' ? {defaultValue: today} : {}),
                 ...(key === 'author' ? {valueSource: memberValueSource} : {}),
                 ...(key === 'post' ? {valueSource: postValueSource} : {})
             };
         });
-    }, [memberValueSource, postValueSource]);
+    }, [memberValueSource, postValueSource, siteTimezone]);
 }

apps/posts/test/unit/views/comments/comments.test.tsx

@@ -119,36 +119,33 @@ describe('Comments', () => {
             keepPreviousData: true,
             searchParams: {filter: 'id:\'comment_123\''}
         }));
-        expect(screen.queryByTestId('apply-filter')).not.toBeInTheDocument();
-        expect(screen.getByRole('button', {name: 'Show all comments'})).toBeInTheDocument();
+        expect(screen.queryByTestId('apply-filter')).toBeNull();
+        expect(screen.getByRole('button', {name: 'Show all comments'})).not.toBeNull();
     });
 
     it('clears the full query string when leaving single-comment mode', async () => {
         await renderComments('/?id=is:comment_123&thread=is:comment_456&filter=status:published');
 
         fireEvent.click(screen.getByRole('button', {name: 'Show all comments'}));
 
-        expect(screen.getByTestId('location-search')).toHaveTextContent('');
+        expect(screen.getByTestId('location-search').textContent).toBe('');
     });
 
     it('keeps thread state separate from canonical filter state updates', async () => {
         await renderComments('/?thread=is:comment_456');
 
         expect(useBrowseCommentsMock).toHaveBeenCalledWith(expect.objectContaining({
-            searchParams: {
-                thread: 'is:comment_456'
-            }
+            searchParams: {}
         }));
 
         fireEvent.click(screen.getByTestId('apply-filter'));
 
         expect(useBrowseCommentsMock).toHaveBeenLastCalledWith(expect.objectContaining({
             searchParams: {
-                filter: 'status:published',
-                thread: 'is:comment_456'
+                filter: 'status:published'
             }
         }));
-        expect(screen.getByTestId('location-search')).toHaveTextContent('?thread=is%3Acomment_456&filter=status%3Apublished');
+        expect(screen.getByTestId('location-search').textContent).toBe('?thread=is%3Acomment_456&filter=status%3Apublished');
     });
 
     it('leaves single-comment mode when applying a row-level filter', async () => {
@@ -161,7 +158,7 @@ describe('Comments', () => {
                 filter: 'member_id:member_456'
             }
         }));
-        expect(screen.getByTestId('location-search')).toHaveTextContent('?filter=member_id%3Amember_456');
+        expect(screen.getByTestId('location-search').textContent).toBe('?filter=member_id%3Amember_456');
     });
 
     it('delays date-filter hydration until the site timezone is resolved', async () => {

apps/posts/test/unit/views/comments/use-comment-filter-fields.test.tsx

@@ -0,0 +1,37 @@
+import {afterEach, describe, expect, it, vi} from 'vitest';
+import {renderHook} from '@testing-library/react';
+import {useCommentFilterFields} from '@src/views/comments/use-comment-filter-fields';
+import type {ValueSource} from '@tryghost/shade/patterns';
+
+const emptyValueSource: ValueSource<string> = {
+    id: 'empty',
+    useOptions: () => ({
+        options: [],
+        isInitialLoad: false,
+        isSearching: false,
+        isLoadingMore: false,
+        hasMore: false,
+        loadMore: vi.fn()
+    })
+};
+
+describe('useCommentFilterFields', () => {
+    afterEach(() => {
+        vi.useRealTimers();
+    });
+
+    it('sets date filter defaults in the site timezone', () => {
+        vi.useFakeTimers();
+        vi.setSystemTime(new Date('2024-03-10T06:00:00.000Z'));
+
+        const {result} = renderHook(() => useCommentFilterFields({
+            memberValueSource: emptyValueSource,
+            postValueSource: emptyValueSource,
+            siteTimezone: 'America/Los_Angeles'
+        }));
+
+        expect(result.current.find(field => field.key === 'created_at')).toMatchObject({
+            defaultValue: '2024-03-09'
+        });
+    });
+});

apps/posts/test/unit/views/comments/use-filter-state.test.tsx

@@ -40,6 +40,40 @@ describe('use-filter-state', () => {
             expect(result.current.nql).toBe('status:published');
         });
 
+        it('migrates legacy per-field filter params to canonical filters', () => {
+            const {result} = renderHook(() => {
+                const state = useFilterState('UTC');
+                const [searchParams] = useSearchParams();
+
+                return {
+                    ...state,
+                    query: searchParams.toString()
+                };
+            }, {wrapper: createWrapper('/?status=is:hidden&body=not_contains:spam&author=is_not:member_123')});
+
+            expect(result.current.filters).toEqual([
+                {
+                    id: 'status:1',
+                    field: 'status',
+                    operator: 'is',
+                    values: ['hidden']
+                },
+                {
+                    id: 'body:2',
+                    field: 'body',
+                    operator: 'does-not-contain',
+                    values: ['spam']
+                },
+                {
+                    id: 'author:3',
+                    field: 'author',
+                    operator: 'is-not',
+                    values: ['member_123']
+                }
+            ]);
+            expect(result.current.query).toBe('filter=html%3A-%7E%27spam%27%2Bmember_id%3A-member_123%2Bstatus%3Ahidden');
+        });
+
         it('ignores legacy id params because single-comment mode is handled outside filter state', () => {
             const {result} = renderHook(() => useFilterState('UTC'), {
                 wrapper: createWrapper('/?id=is:comment_123')
@@ -74,6 +108,40 @@ describe('use-filter-state', () => {
             expect(result.current.query).toBe('thread=is%3Acomment_123&filter=count.reports%3A%3E0');
         });
 
+        it('keeps draft filters that are not serializable yet', () => {
+            const {result} = renderHook(() => {
+                const state = useFilterState('UTC');
+                const [searchParams] = useSearchParams();
+
+                return {
+                    ...state,
+                    query: searchParams.toString()
+                };
+            }, {wrapper: createWrapper('/?thread=is:comment_123')});
+
+            act(() => {
+                result.current.setFilters([
+                    {
+                        id: '1',
+                        field: 'body',
+                        operator: 'contains',
+                        values: ['']
+                    }
+                ], {replace: false});
+            });
+
+            expect(result.current.filters).toEqual([
+                {
+                    id: '1',
+                    field: 'body',
+                    operator: 'contains',
+                    values: ['']
+                }
+            ]);
+            expect(result.current.nql).toBeUndefined();
+            expect(result.current.query).toBe('thread=is%3Acomment_123');
+        });
+
         it('removes only the canonical filter param when clearing filters', () => {
             const {result} = renderHook(() => {
                 const state = useFilterState('UTC');