Added deleted post indicator to ActivityPub (#22392)

ref AP-839

- When a reply to a deleted post is opened there's no indication that
the post has been deleted

---------

Co-authored-by: Michael Barrett <mike@ghost.org>

apps/admin-x-activitypub/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tryghost/admin-x-activitypub",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "license": "MIT",
   "repository": {
     "type": "git",

apps/admin-x-activitypub/src/api/activitypub.ts

@@ -77,8 +77,9 @@ export interface GetAccountFollowsResponse {
 }
 
 export enum PostType {
+    Note = 0,
     Article = 1,
-    Note = 2,
+    Tombstone = 2
 }
 
 export interface Post {

apps/admin-x-activitypub/src/components/feed/ArticleModal.tsx

@@ -17,6 +17,7 @@ import {useThreadForUser} from '@hooks/use-activity-pub-queries';
 
 import APAvatar from '../global/APAvatar';
 import APReplyBox from '../global/APReplyBox';
+import DeletedFeedItem from './DeletedFeedItem';
 import TableOfContents, {TOCItem} from './TableOfContents';
 import getReadingTime from '../../utils/get-reading-time';
 import {useDebounce} from 'use-debounce';
@@ -867,7 +868,9 @@ const ArticleModal: React.FC<ArticleModalProps> = ({
                         <div className={`mx-auto px-8 pb-10 pt-5`} style={{maxWidth: currentMaxWidth}}>
                             {threadParents.map((item) => {
                                 return (
-                                    <>
+                                    item.object.type === 'Tombstone' ? (
+                                        <DeletedFeedItem last={false} />
+                                    ) : (
                                         <FeedItem
                                             actor={item.actor}
                                             allowDelete={false}
@@ -885,7 +888,7 @@ const ArticleModal: React.FC<ArticleModalProps> = ({
                                                 setIsFocused(true);
                                             }}
                                         />
-                                    </>
+                                    )
                                 );
                             })}
 
@@ -942,6 +945,9 @@ const ArticleModal: React.FC<ArticleModalProps> = ({
                                     </div>
                                 </div>
                             )}
+                            {object.type === 'Tombstone' && (
+                                <DeletedFeedItem last={true} />
+                            )}
 
                             <div ref={replyBoxRef}>
                                 <APReplyBox

apps/admin-x-activitypub/src/components/feed/DeletedFeedItem.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import {LucideIcon} from '@tryghost/shade';
+
+interface DeletedFeedItemProps {
+    last?: boolean;
+}
+
+const DeletedFeedItem: React.FC<DeletedFeedItemProps> = ({last}) => {
+    return (
+        <div className='relative py-5'>
+            <div className='flex h-10 grow items-center gap-2 rounded-lg border border-gray-200 p-2 px-[10px] text-center text-sm text-gray-600'>
+                <LucideIcon.Trash size={16} strokeWidth={1.25} />
+                This post has been deleted
+            </div>
+            {!last && <div className="absolute bottom-0 left-[18px] top-[62px] z-0 mb-[-13px] w-[2px] rounded-sm bg-gray-200"></div>}
+        </div>
+    );
+};
+
+export default DeletedFeedItem;

apps/admin-x-activitypub/src/hooks/use-activity-pub-queries.ts

@@ -597,6 +597,7 @@ export function useThreadForUser(handle: string, id: string) {
 
     const threadQuery = useQuery({
         queryKey,
+        refetchOnMount: 'always',
         async queryFn() {
             const siteUrl = await getSiteUrl();
             const api = createActivityPubAPI(handle, siteUrl);

apps/admin-x-activitypub/src/utils/posts.ts

@@ -77,12 +77,12 @@ export function mapPostToActivity(post: Post): Activity {
         };
     }
 
-    // If the post is an article, then the object type is: "Article"
-    // otherwise, we use "Note" as the object type
-    let objectType: 'Article' | 'Note' = 'Note';
+    let objectType: 'Article' | 'Note' | 'Tombstone' = 'Note';
 
     if (post.type === PostType.Article) {
         objectType = 'Article';
+    } else if (post.type === PostType.Tombstone) {
+        objectType = 'Tombstone';
     }
 
     const object = {

apps/admin-x-activitypub/src/views/Notifications/Notifications.tsx

@@ -286,7 +286,7 @@ const Notifications: React.FC<NotificationsProps> = () => {
         switch (group.type) {
         case ACTIVITY_TYPE.CREATE:
             NiceModal.show(ArticleModal, {
-                activityId: group.id,
+                activityId: group.object.id,
                 object: group.object,
                 actor: group.actors[0],
                 focusReplies: true,

apps/admin-x-activitypub/test/unit/utils/posts.test.ts

@@ -102,6 +102,13 @@ describe('mapPostToActivity', function () {
                 type: PostType.Note
             }).object.type
         ).toBe('Note');
+
+        expect(
+            mapPostToActivity({
+                ...post,
+                type: PostType.Tombstone
+            }).object.type
+        ).toBe('Tombstone');
     });
 
     test('it sets the correct object', function () {

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

@@ -9,7 +9,7 @@ export type FollowItem = {
 
 export type ObjectProperties = {
     '@context': string | (string | object)[];
-    type: 'Article' | 'Link' | 'Note';
+    type: 'Article' | 'Link' | 'Note' | 'Tombstone';
     name: string;
     content: string | null;
     url?: string | undefined;