Ported the posts and pages lists to React behind a flag

apps/admin-x-framework/src/api/pages.ts

@@ -1,6 +1,9 @@
 import {InfiniteData} from '@tanstack/react-query';
-import {Meta, createInfiniteQuery, createQuery, createQueryWithId} from '../utils/api/hooks';
+import {Meta, createInfiniteQuery, createMutation, createQuery, createQueryWithId} from '../utils/api/hooks';
+import type {Email, PostBulkAction, PostListFields} from './posts';
 
+// A page is a post with `displayName: 'page'` server-side, so the list screens
+// read the same fields off both.
 export type Page = {
     id: string;
     title: string;
@@ -10,7 +13,17 @@ export type Page = {
     published_at?: string;
     visibility?: string;
     uuid?: string;
-};
+    feature_image?: string;
+    email?: Email;
+    count?: {
+        clicks?: number;
+    };
+    // Pages are never emailed, but the list reads these off both resources
+    // through one type, so they have to be addressable here too.
+    email_only?: boolean;
+    email_segment?: string;
+    newsletter?: object;
+} & PostListFields;
 
 export interface PagesResponseType {
     meta?: Meta
@@ -54,3 +67,29 @@ export const useBrowsePagesInfinite = createInfiniteQuery<PagesResponseType & {i
         };
     }
 });
+
+/** Duplicate a page. As with posts, the copy is always a draft. */
+export const useCopyPage = createMutation<PagesResponseType, string>({
+    method: 'POST',
+    path: id => `/pages/${id}/copy/`
+});
+
+/** Bulk-edit pages matching an NQL filter. See `useBulkEditPosts`. */
+export const useBulkEditPages = createMutation<unknown, {filter: string; action: PostBulkAction}>({
+    method: 'PUT',
+    path: () => '/pages/bulk/',
+    searchParams: ({filter}) => ({filter}),
+    body: ({action}) => ({
+        bulk: {
+            action: action.type,
+            meta: 'meta' in action ? action.meta : {}
+        }
+    })
+});
+
+/** Bulk-delete pages matching an NQL filter. */
+export const useBulkDeletePages = createMutation<unknown, {filter: string}>({
+    method: 'DELETE',
+    path: () => '/pages/',
+    searchParams: ({filter}) => ({filter})
+});

apps/admin-x-framework/src/api/posts.ts

@@ -5,6 +5,43 @@ export type Email = {
     opened_count: number;
     email_count: number;
     status?: string;
+    track_opens?: boolean;
+    track_clicks?: boolean;
+};
+
+// Every field optional: these are supertypes of the narrower author/tag shapes
+// already declared around the analytics screens, so widening `Post` doesn't
+// invalidate them. The list only reads names and slugs.
+export type PostAuthor = {
+    id?: string;
+    name?: string;
+    email?: string;
+    slug?: string;
+};
+
+export type PostTag = {
+    id?: string;
+    name?: string;
+    slug?: string;
+    visibility?: string;
+};
+
+/**
+ * Fields the list screens need on top of the analytics-shaped core. All
+ * optional: the analytics endpoints don't return them, and the list gets them
+ * from the server's default relations rather than an explicit `include`.
+ */
+export type PostListFields = {
+    featured?: boolean;
+    updated_at?: string;
+    created_at?: string;
+    excerpt?: string;
+    custom_excerpt?: string;
+    authors?: PostAuthor[];
+    primary_author?: PostAuthor | null;
+    tags?: PostTag[];
+    primary_tag?: PostTag | null;
+    tiers?: object[];
 };
 
 export type Post = {
@@ -30,7 +67,7 @@ export type Post = {
     email_recipient_filter?: string;
     send_email_when_published?: boolean;
     email_stats?: object;
-};
+} & PostListFields;
 
 export interface PostsResponseType {
     meta?: Meta
@@ -80,6 +117,49 @@ export const useDeletePost = createMutation<unknown, string>({
     path: id => `/posts/${id}/`
 });
 
+export type PostBulkAction =
+    | {type: 'feature'}
+    | {type: 'unfeature'}
+    | {type: 'unpublish'}
+    | {type: 'unschedule'}
+    | {type: 'addTag'; meta: {tags: {id?: string; name: string; slug?: string}[]}}
+    | {type: 'access'; meta: {visibility: string; tiers?: {id: string}[]}};
+
+/**
+ * Bulk-edit posts matching an NQL filter.
+ *
+ * The filter is the point: after Cmd+A the selection is inverted and covers
+ * posts that were never loaded, so the action has to be expressed as a query
+ * rather than as a list of ids.
+ */
+export const useBulkEditPosts = createMutation<unknown, {filter: string; action: PostBulkAction}>({
+    method: 'PUT',
+    path: () => '/posts/bulk/',
+    searchParams: ({filter}) => ({filter}),
+    body: ({action}) => ({
+        bulk: {
+            action: action.type,
+            meta: 'meta' in action ? action.meta : {}
+        }
+    })
+});
+
+/** Bulk-delete posts matching an NQL filter. */
+export const useBulkDeletePosts = createMutation<unknown, {filter: string}>({
+    method: 'DELETE',
+    path: () => '/posts/',
+    searchParams: ({filter}) => ({filter})
+});
+
+/**
+ * Duplicate a post. The copy is always a draft, whatever the source was, so
+ * callers place it at the top of the list rather than beside its original.
+ */
+export const useCopyPost = createMutation<PostsResponseType, string>({
+    method: 'POST',
+    path: id => `/posts/${id}/copy/`
+});
+
 // Search index endpoints for efficient search
 export const useSearchIndexPosts = createQuery<PostsResponseType>({
     dataType,

apps/admin-x-framework/src/api/stats.ts

@@ -1,4 +1,6 @@
 import {createQuery, createQueryWithId} from '../utils/api/hooks';
+import {apiUrl, useFetchApi} from '../utils/api/fetch-api';
+import {keepPreviousData, useQuery} from '@tanstack/react-query';
 
 // Types
 
@@ -366,3 +368,76 @@ export const useSubscriberCountByNewsletterId = (newsletterId?: string, options:
 
     return useSubscriberCount({searchParams});
 };
+
+// Post visitor and member counts
+//
+// These two are POST-with-body *reads* — the id lists are too long for a query
+// string — so they can't go through `createQuery`, which only builds GETs.
+// Written directly against `useQuery` instead.
+
+export type PostVisitorCounts = Record<string, number>;
+
+export interface PostMemberCounts {
+    [postId: string]: {free: number; paid: number};
+}
+
+/**
+ * Visitor counts for a batch of posts, keyed by post uuid.
+ *
+ * The uuid list is part of the query key, so changing the filter starts a new
+ * query rather than writing a stale response over the new one — which is what
+ * the Ember service's manual generation counter exists to prevent.
+ */
+export const usePostVisitorCounts = (postUuids: string[], {enabled = true} = {}) => {
+    const fetchApi = useFetchApi();
+
+    return useQuery<PostVisitorCounts>({
+        queryKey: ['PostVisitorCounts', [...postUuids].sort().join(',')],
+        enabled: enabled && postUuids.length > 0,
+        // The id list is the key, so loading the next page is a brand-new
+        // query — without this every visible count blanks to zero meanwhile.
+        placeholderData: keepPreviousData,
+        queryFn: async () => {
+            const response = await fetchApi<{stats?: Array<{data?: {visitor_counts?: PostVisitorCounts}}>}>(
+                apiUrl('/stats/posts-visitor-counts/'),
+                {method: 'POST', body: JSON.stringify({postUuids})}
+            );
+
+            return response.stats?.[0]?.data?.visitor_counts ?? {};
+        }
+    });
+};
+
+/** Free and paid member counts for a batch of posts, keyed by post id. */
+export const usePostMemberCounts = (postIds: string[], {enabled = true} = {}) => {
+    const fetchApi = useFetchApi();
+
+    return useQuery<PostMemberCounts>({
+        queryKey: ['PostMemberCounts', [...postIds].sort().join(',')],
+        enabled: enabled && postIds.length > 0,
+        placeholderData: keepPreviousData,
+        queryFn: async () => {
+            // The endpoint returns `{stats: [{<postId>: {free_members,
+            // paid_members}}]}` — the map sits directly in the first element,
+            // not under a `data` key like the visitor endpoint's.
+            // No explicit content-type: `fetchApi` sets it for string bodies,
+            // and passing `Content-Type` here as well produces two
+            // differently-cased keys in the same header object, which the
+            // request drops — the endpoint then sees no body and returns an
+            // empty map rather than an error.
+            const response = await fetchApi<{
+                stats?: Array<Record<string, {free_members?: number; paid_members?: number}>>
+            }>(
+                apiUrl('/stats/posts-member-counts/'),
+                {method: 'POST', body: JSON.stringify({postIds})}
+            );
+
+            const raw = response.stats?.[0] ?? {};
+
+            return Object.fromEntries(Object.entries(raw).map(([postId, counts]) => [
+                postId,
+                {free: counts.free_members ?? 0, paid: counts.paid_members ?? 0}
+            ]));
+        }
+    });
+};

apps/admin-x-framework/src/api/users.ts

@@ -83,10 +83,19 @@ export const useBrowseUsers = createInfiniteQuery<UsersResponseType & {isEnd: bo
     dataType,
     path: '/users/',
     defaultSearchParams: {limit: '100', include: 'roles'},
-    defaultNextPageParams: (lastPage, otherParams) => ({
-        ...otherParams,
-        page: (lastPage.meta?.pagination.next || 1).toString()
-    }),
+    defaultNextPageParams: (lastPage, otherParams) => {
+        // Returning a param unconditionally makes TanStack report hasNextPage
+        // forever, so consumers render a "Load more" that refetches page 1.
+        // Every other resource here guards the same way.
+        if (!lastPage.meta?.pagination.next) {
+            return undefined;
+        }
+
+        return {
+            ...otherParams,
+            page: lastPage.meta.pagination.next.toString()
+        };
+    },
     returnData: (originalData) => {
         const {pages} = originalData as InfiniteData<UsersResponseType>;
         const users = pages.flatMap(page => page.users);

apps/admin/package.json

@@ -79,6 +79,7 @@
         "@types/react-svg-map": "2.1.4",
         "@types/semver": "catalog:",
         "@types/validator": "catalog:",
+        "@typescript/native": "catalog:",
         "@vitejs/plugin-react": "catalog:",
         "@vitest/browser-playwright": "catalog:",
         "eslint": "catalog:",
@@ -89,7 +90,6 @@
         "msw": "catalog:",
         "sirv": "3.0.2",
         "tailwindcss": "catalog:",
-        "@typescript/native": "catalog:",
         "typescript": "catalog:",
         "typescript-eslint": "catalog:",
         "vite": "catalog:",

apps/admin/src/analytics/hooks/use-latest-post-stats.ts

@@ -2,16 +2,9 @@ import {type Post, useBrowsePosts} from '@tryghost/admin-x-framework/api/posts';
 import {useMemo} from 'react';
 import {usePostStats} from '@tryghost/admin-x-framework/api/stats';
 
-// Extended Post interface that includes authors and excerpt
-interface ExtendedPost extends Post {
-    authors?: {
-        name: string;
-    }[];
-    excerpt?: string;
-    count?: {
-        clicks?: number;
-    };
-}
+// `Post` now carries authors, excerpt and click counts itself — this alias is
+// kept so the rest of the file reads unchanged.
+type ExtendedPost = Post;
 
 export interface LatestPostWithStats {
     id: string;
@@ -33,7 +26,7 @@ export interface LatestPostWithStats {
         clicks?: number;
     } | null;
     authors?: {
-        name: string;
+        name?: string;
     }[];
     // Analytics data
     recipient_count: number | null;

apps/admin/src/analytics/views/stats/overview/components/top-posts.tsx

@@ -1,4 +1,4 @@
-import FeatureImagePlaceholder from '@/analytics/views/stats/components/feature-image-placeholder';
+import FeatureImagePlaceholder from '@/shared/feature-image-placeholder';
 import React from 'react';
 import {Card, CardContent, CardDescription, CardHeader, CardTitle, EmptyIndicator, SkeletonTable} from '@tryghost/shade/components';
 import {LucideIcon, abbreviateNumber, cn, formatDisplayDate, formatNumber} from '@tryghost/shade/utils';

apps/admin/src/ember-bridge/ember-bridge.test.tsx

@@ -161,6 +161,76 @@ describe('useEmberDataSync', () => {
         unmount();
     });
 
+    /**
+     * Saving a post in the editor can *create* tags: a tag typed into the post
+     * is written as part of the post's own save, as an embedded relation. Ember
+     * therefore reports a `post` change and never a `tag` one — so the posts
+     * list's tag filter kept serving a cached list, and a tag you had just
+     * made was missing from it until a full browser reload.
+     */
+    queryTest('invalidates tags when Ember saves a post, which can create them', async ({ queryClient, wrapper }) => {
+        const mock = createMockStateBridge();
+        window.EmberBridge = { state: mock.stateBridge };
+
+        // Without a gcTime these are collected before the assertion runs, and
+        // `every` on an empty array passes vacuously.
+        queryClient.setQueryDefaults(['TagsResponseType', '/tags'], {gcTime: Infinity});
+        queryClient.setQueryDefaults(['MembersResponseType', '/members'], {gcTime: Infinity});
+        queryClient.setQueryData(['TagsResponseType', '/tags'], { tags: [] });
+        queryClient.setQueryData(['MembersResponseType', '/members'], { members: [] });
+
+        renderHook(() => useEmberDataSync(), { wrapper });
+
+        await waitFor(() => {
+            expect(mock.onSpy).toHaveBeenCalledWith('emberDataChange', expect.any(Function));
+        });
+
+        act(() => {
+            mock.emit('emberDataChange', {
+                operation: 'update',
+                modelName: 'post',
+                id: '1',
+                data: null,
+            });
+        });
+
+        await waitFor(() => {
+            const queries = queryClient.getQueryCache().getAll();
+            const tagQueries = queries.filter(q => q.queryKey[0] === 'TagsResponseType');
+            const memberQueries = queries.filter(q => q.queryKey[0] === 'MembersResponseType');
+
+            expect(tagQueries.length).toBeGreaterThan(0);
+            expect(tagQueries.every(q => q.state.isInvalidated)).toBe(true);
+            // ...and nothing unrelated is dragged along with it.
+            expect(memberQueries.every(q => !q.state.isInvalidated)).toBe(true);
+        });
+    });
+
+    queryTest('invalidates tags when Ember saves a page too', async ({ queryClient, wrapper }) => {
+        const mock = createMockStateBridge();
+        window.EmberBridge = { state: mock.stateBridge };
+
+        queryClient.setQueryDefaults(['TagsResponseType', '/tags'], {gcTime: Infinity});
+        queryClient.setQueryData(['TagsResponseType', '/tags'], { tags: [] });
+
+        renderHook(() => useEmberDataSync(), { wrapper });
+
+        await waitFor(() => {
+            expect(mock.onSpy).toHaveBeenCalledWith('emberDataChange', expect.any(Function));
+        });
+
+        act(() => {
+            mock.emit('emberDataChange', { operation: 'update', modelName: 'page', id: '1', data: null });
+        });
+
+        await waitFor(() => {
+            const tagQueries = queryClient.getQueryCache().getAll().filter(q => q.queryKey[0] === 'TagsResponseType');
+
+            expect(tagQueries.length).toBeGreaterThan(0);
+            expect(tagQueries.every(q => q.state.isInvalidated)).toBe(true);
+        });
+    });
+
     queryTest('invalidates the sidebar member count query for Ember member changes', async ({ queryClient, wrapper }) => {
         const mock = createMockStateBridge();
         window.EmberBridge = { state: mock.stateBridge };