✨ Show account, identity and record events

app/reports/page-content.tsx

@@ -317,8 +317,13 @@ function useModerationQueueQuery() {
   const minReportedRecordsCount = params.get('minReportedRecordsCount')
   const minTakendownRecordsCount = params.get('minTakendownRecordsCount')
   const { sortField, sortDirection } = getSortParams(params)
-  const { lastReviewedBy, subject, reporters, includeAllUserRecords } =
-    useFluentReportSearchParams()
+  const {
+    lastReviewedBy,
+    subject,
+    reporters,
+    includeAllUserRecords,
+    hostingStatuses,
+  } = useFluentReportSearchParams()
 
   return useInfiniteQuery({
     queryKey: [
@@ -338,6 +343,7 @@ function useModerationQueueQuery() {
         queueName,
         includeMuted,
         onlyMuted,
+        hostingStatuses,
         subjectType,
         collections,
         minAccountSuspendCount,
@@ -391,6 +397,10 @@ function useModerationQueueQuery() {
         queryParams.tags = tags.split(',')
       }
 
+      if (hostingStatuses) {
+        queryParams.hostingStatuses = hostingStatuses
+      }
+
       if (excludeTags) {
         queryParams.excludeTags = excludeTags.split(',')
       }

components/mod-event/EventItem.tsx

@@ -114,9 +114,7 @@ const Comment = ({
 const Email = ({
   modEvent,
 }: {
-  modEvent: ToolsOzoneModerationDefs.ModEventView & {
-    event: ToolsOzoneModerationDefs.ModEventEmail
-  }
+  modEvent: ModEventType<ToolsOzoneModerationDefs.ModEventEmail>
 }) => {
   return (
     <>
@@ -134,6 +132,80 @@ const Email = ({
   )
 }
 
+const Record = ({
+  modEvent,
+}: {
+  modEvent: ModEventType<ToolsOzoneModerationDefs.RecordEvent>
+}) => {
+  let operation = ''
+  switch (modEvent.event.op) {
+    case 'create':
+      operation = 'Created'
+      break
+    case 'delete':
+      operation = 'Deleted'
+      break
+    case 'update':
+      operation = 'Updated'
+      break
+    default:
+      operation = modEvent.event.op
+  }
+
+  return (
+    <>
+      <p>
+        {operation} at{' '}
+        {dateFormatter.format(new Date(modEvent.event.timestamp))}
+      </p>
+      {modEvent.event.comment && <p>{modEvent.event.comment}</p>}
+      {modEvent.event.cid && (
+        <p className="text-gray-500">CID: {modEvent.event.cid}</p>
+      )}
+    </>
+  )
+}
+
+const Account = ({
+  modEvent,
+}: {
+  modEvent: ModEventType<ToolsOzoneModerationDefs.AccountEvent>
+}) => {
+  return (
+    <>
+      <p>
+        {modEvent.event.status && (
+          <span className="capitalize">{modEvent.event.status} </span>
+        )}
+        at {dateFormatter.format(new Date(modEvent.event.timestamp))}
+      </p>
+      {modEvent.event.comment && <p>{modEvent.event.comment}</p>}
+    </>
+  )
+}
+
+const Identity = ({
+  modEvent,
+}: {
+  modEvent: ModEventType<ToolsOzoneModerationDefs.IdentityEvent>
+}) => {
+  return (
+    <>
+      <p>
+        {modEvent.event.handle && (
+          <span>New Handle: {modEvent.event.handle} </span>
+        )}
+        {modEvent.event.pdsHost && (
+          <span>PDS Host: {modEvent.event.pdsHost} </span>
+        )}
+        {modEvent.event.tombstone && <span>Tombstoned </span>}
+        at {dateFormatter.format(new Date(modEvent.event.timestamp))}
+      </p>
+      {modEvent.event.comment && <p>{modEvent.event.comment}</p>}
+    </>
+  )
+}
+
 function isMessageSubject(
   subject: ToolsOzoneModerationDefs.ModEventView['subject'],
 ): subject is ChatBskyConvoDefs.MessageRef {
@@ -412,6 +484,15 @@ export const ModEventItem = ({
   if (isModEventType(modEvent, ToolsOzoneModerationDefs.isModEventEmail)) {
     eventItem = <Email modEvent={modEvent} />
   }
+  if (isModEventType(modEvent, ToolsOzoneModerationDefs.isRecordEvent)) {
+    eventItem = <Record modEvent={modEvent} />
+  }
+  if (isModEventType(modEvent, ToolsOzoneModerationDefs.isAccountEvent)) {
+    eventItem = <Account modEvent={modEvent} />
+  }
+  if (isModEventType(modEvent, ToolsOzoneModerationDefs.isIdentityEvent)) {
+    eventItem = <Identity modEvent={modEvent} />
+  }
   const previewSubject = modEvent.subject.uri || modEvent.subject.did
   return (
     <div className="mt-4">

components/mod-event/FilterPanel.tsx

@@ -17,10 +17,7 @@ import { useState } from 'react'
 import { RepoFinder } from '@/repositories/Finder'
 import { Dropdown } from '@/common/Dropdown'
 import { ChevronDownIcon } from '@heroicons/react/24/solid'
-import {
-  ActionPoliciesSelector,
-  ActionPolicySelector,
-} from '@/reports/ModerationForm/ActionPolicySelector'
+import { ActionPoliciesSelector } from '@/reports/ModerationForm/ActionPolicySelector'
 
 export const EventFilterPanel = ({
   limit,

components/mod-event/ItemTitle.tsx

@@ -94,6 +94,15 @@ export const ItemTitle = ({
     eventColor = 'text-blue-400'
     eventTitle = 'Email sent'
   }
+  if (ToolsOzoneModerationDefs.isAccountEvent(modEvent.event)) {
+    eventTitle = 'Account event'
+  }
+  if (ToolsOzoneModerationDefs.isRecordEvent(modEvent.event)) {
+    eventTitle = 'Record event'
+  }
+  if (ToolsOzoneModerationDefs.isIdentityEvent(modEvent.event)) {
+    eventTitle = 'Identity event'
+  }
   const subjectStatus = modEvent.repo
     ? modEvent.repo.moderation.subjectStatus
     : modEvent.record

components/mod-event/constants.ts

@@ -14,6 +14,9 @@ export const MOD_EVENTS = {
   EMAIL: 'tools.ozone.moderation.defs#modEventEmail',
   TAG: 'tools.ozone.moderation.defs#modEventTag',
   DIVERT: 'tools.ozone.moderation.defs#modEventDivert',
+  IDENTITY: 'tools.ozone.moderation.defs#identityEvent',
+  ACCOUNT: 'tools.ozone.moderation.defs#accountEvent',
+  RECORD: 'tools.ozone.moderation.defs#recordEvent',
   APPEAL: 'appeal',
   DISABLE_DMS: 'disableDms',
   ENABLE_DMS: 'enableDms',
@@ -38,6 +41,9 @@ export const MOD_EVENT_TITLES = {
   [MOD_EVENTS.TAG]: 'Tag',
   [MOD_EVENTS.APPEAL]: 'Appeal',
   [MOD_EVENTS.DIVERT]: 'Divert',
+  [MOD_EVENTS.IDENTITY]: 'Identity Event',
+  [MOD_EVENTS.ACCOUNT]: 'Account Event',
+  [MOD_EVENTS.RECORD]: 'Record Event',
   [MOD_EVENTS.DISABLE_DMS]: 'Disable DMs',
   [MOD_EVENTS.ENABLE_DMS]: 'Enable DMs',
   [MOD_EVENTS.DISABLE_VIDEO_UPLOAD]: 'Disable Video Upload',

components/reports/ModerationForm/ActionPolicySelector.tsx

@@ -91,7 +91,7 @@ const ActionPolicyList = ({ policyList }: { policyList: any[] }) => {
           onChange={(event) => setQuery(event.target.value)}
           onFocus={() => setIsFocused(true)}
           onBlur={() => setIsFocused(false)}
-          displayValue={(values) => {
+          displayValue={(values?: string[]) => {
             // When focused from blur, display empty value allowing user to input their search query
             return isFocused
               ? ''

components/reports/useFluentReportSearch.ts

@@ -5,13 +5,15 @@ type SearchQueryParams = {
   subject?: string
   lastReviewedBy?: string
   reporters?: string[]
+  hostingStatuses?: string[]
   includeAllUserRecords?: boolean
 }
 
 const ParamPrefixes = {
   subject: 'subject',
   reporters: 'reporters',
   lastReviewedBy: 'lastReviewedBy',
+  hostingStatuses: 'hostingStatuses',
   includeAllUserRecords: 'includeAllUserRecords',
 }
 
@@ -75,6 +77,7 @@ export const useFluentReportSearchParams = (): SearchQueryParams => {
       subject,
       lastReviewedBy: undefined,
       reporters: undefined,
+      hostingStatuses: undefined,
       includeAllUserRecords: undefined,
     }
 
@@ -89,6 +92,9 @@ export const useFluentReportSearchParams = (): SearchQueryParams => {
       searchParams.reporters = paramsFromQuery.reporters
         ? paramsFromQuery.reporters.split(',')
         : undefined
+      searchParams.hostingStatuses = paramsFromQuery.hostingStatuses
+        ? paramsFromQuery.hostingStatuses.split(',')
+        : undefined
     }
 
     return searchParams

package.json

@@ -22,7 +22,7 @@
     "@atproto/oauth-types": "^0.1.4",
     "@atproto/xrpc": "^0.6.1",
     "@headlessui/react": "^1.7.7",
-    "@heroicons/react": "^2.0.13",
+    "@heroicons/react": "2.0.13",
     "@tanstack/react-query": "^4.22.0",
     "@types/node": "18.11.17",
     "@types/react": "18.0.26",