feat(tasks): track activity changes with document history. (#5965)

* feat(tasks): track task changes with document history

Signed-off-by: Fred Carlsen <fred@sjelfull.no>

* feat(tasks): update tasks activity log to display values

* fix(tasks): always fetch publishedId, add client api version

* fix(tasks): update status selector and workspace provider to disable warnings generated

---------

Signed-off-by: Fred Carlsen <fred@sjelfull.no>
Co-authored-by: Fred Carlsen <fred@sjelfull.no>

Author: pedrobonamin

packages/sanity/src/tasks/src/tasks/components/activity/TaskActivityEditedAt.tsx

@@ -1,44 +1,19 @@
-import {DotIcon} from '@sanity/icons'
 import {Box, Flex, Text} from '@sanity/ui'
 import {memo} from 'react'
 
 import {Tooltip} from '../../../../../ui-components'
-import {getStringForKey, UpdatedTimeAgo} from './helpers'
+import {getChangeDetails, UpdatedTimeAgo, UserName} from './helpers'
+import {type FieldChange} from './helpers/parseTransactions'
 
 interface EditedAtProps {
-  activity: {
-    author: string
-    field: string
-    from?: string | null
-    to?: string | null
-    timestamp: string
-  }
+  activity: FieldChange
 }
 
 export const EditedAt = memo(
   function EditedAt(props: EditedAtProps) {
     const {activity} = props
-    let key: string = activity.field
-    let showToValue: boolean = key === 'dueDate' || key === 'status' || key === 'targetContent'
-
-    //If the status is changed to be done
-    if (activity.field === 'status' && activity.to === 'done') {
-      key = 'statusDone'
-      showToValue = true
-    }
-    //If a task is unassigned - it goes from having a assignee to be unassigned
-    if (activity.field === 'assignedTo' && !!activity.to && activity.from) {
-      key = 'unassigned'
-    }
-
-    //Set the due date for the first time
-    if (activity.field === 'dueDate' && (activity.from === null || undefined) && activity.to) {
-      key = 'dueDateSet'
-      showToValue = true
-    }
-
     const {formattedDate, timeAgo} = UpdatedTimeAgo(activity.timestamp)
-    const {icon, string} = getStringForKey(key) || {icon: null, string: ''}
+    const {icon, text, changeTo} = getChangeDetails(activity)
 
     return (
       <Flex gap={1}>
@@ -48,9 +23,7 @@ export const EditedAt = memo(
           </Box>
         </Box>
         <Text muted size={1}>
-          <strong style={{fontWeight: 600}}>{activity.author} </strong>
-          {string} {showToValue && <strong style={{fontWeight: 600}}>{activity.to}</strong>}{' '}
-          <DotIcon />{' '}
+          <UserName userId={activity.author} /> {text} {changeTo} •{' '}
           <Tooltip content={formattedDate} placement="top-end">
             <time dateTime={formattedDate}>{timeAgo}</time>
           </Tooltip>

packages/sanity/src/tasks/src/tasks/components/activity/TasksActivityCreatedAt.tsx

@@ -1,4 +1,3 @@
-import {DotIcon} from '@sanity/icons'
 import {Flex, Text, TextSkeleton} from '@sanity/ui'
 import {memo} from 'react'
 import {useUser} from 'sanity'
@@ -31,7 +30,7 @@ export const TasksActivityCreatedAt = memo(
             <strong style={{fontWeight: 600}}>
               {loading ? <UserSkeleton /> : user?.displayName ?? 'Unknown user'}{' '}
             </strong>
-            created this task <DotIcon />{' '}
+            created this task •{' '}
             <Tooltip content={formattedDate} placement="top-end">
               <time dateTime={createdAt}>{timeAgo}</time>
             </Tooltip>

packages/sanity/src/tasks/src/tasks/components/activity/TasksActivityLog.tsx

@@ -1,10 +1,20 @@
 import {Box, Flex, Stack, Text} from '@sanity/ui'
 import {uuid} from '@sanity/uuid'
 import {AnimatePresence, motion, type Variants} from 'framer-motion'
-import {Fragment, useCallback, useMemo} from 'react'
-import {type FormPatch, LoadingBlock, type PatchEvent, type Path, useCurrentUser} from 'sanity'
+import {useCallback, useEffect, useMemo, useState} from 'react'
+import {
+  type FormPatch,
+  getPublishedId,
+  LoadingBlock,
+  type PatchEvent,
+  type Path,
+  type TransactionLogEventWithEffects,
+  useClient,
+  useCurrentUser,
+} from 'sanity'
 import styled from 'styled-components'
 
+import {getJsonStream} from '../../../../../core/store/_legacy/history/history/getJsonStream'
 import {
   type CommentBaseCreatePayload,
   type CommentCreatePayload,
@@ -16,13 +26,77 @@ import {
   type CommentUpdatePayload,
   useComments,
 } from '../../../../../structure/comments'
+import {API_VERSION} from '../../constants/API_VERSION'
 import {type TaskDocument} from '../../types'
+import {CurrentWorkspaceProvider} from '../form/CurrentWorkspaceProvider'
+import {type FieldChange, trackFieldChanges} from './helpers/parseTransactions'
 import {EditedAt} from './TaskActivityEditedAt'
 import {TasksActivityCommentInput} from './TasksActivityCommentInput'
 import {TasksActivityCreatedAt} from './TasksActivityCreatedAt'
 import {ActivityItem} from './TasksActivityItem'
 import {TasksSubscribers} from './TasksSubscribers'
 
+function useActivityLog(task: TaskDocument) {
+  const [changes, setChanges] = useState<FieldChange[]>([])
+  const client = useClient({apiVersion: API_VERSION})
+  const {dataset, token} = client.config()
+
+  const queryParams = `tag=sanity.studio.tasks.history&effectFormat=mendoza&excludeContent=true&includeIdentifiedDocumentsOnly=true&reverse=true`
+  const transactionsUrl = client.getUrl(
+    `/data/history/${dataset}/transactions/${getPublishedId(task._id)}?${queryParams}`,
+  )
+
+  const fetchAndParse = useCallback(
+    async (newestTaskDocument: TaskDocument) => {
+      try {
+        const transactions: TransactionLogEventWithEffects[] = []
+
+        const stream = await getJsonStream(transactionsUrl, token)
+        const reader = stream.getReader()
+        let result
+        for (;;) {
+          result = await reader.read()
+          if (result.done) {
+            break
+          }
+          if ('error' in result.value) {
+            throw new Error(result.value.error.description || result.value.error.type)
+          }
+          transactions.push(result.value)
+        }
+
+        const fieldsToTrack: (keyof Omit<TaskDocument, '_rev'>)[] = [
+          'createdByUser',
+          'title',
+          'description',
+          'dueBy',
+          'assignedTo',
+          'status',
+          'target',
+        ]
+
+        const parsedChanges = await trackFieldChanges(
+          newestTaskDocument,
+          [...transactions],
+          fieldsToTrack,
+        )
+
+        setChanges(parsedChanges)
+      } catch (error) {
+        console.error('Failed to fetch and parse activity log', error)
+      }
+    },
+    [transactionsUrl, token],
+  )
+
+  useEffect(() => {
+    fetchAndParse(task)
+    // Task is updated on every change, wait until the revision changes to update the activity log.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fetchAndParse, task._rev])
+  return {changes}
+}
+
 const EMPTY_ARRAY: [] = []
 
 const VARIANTS: Variants = {
@@ -45,14 +119,6 @@ interface TasksActivityLogProps {
   value: TaskDocument
 }
 
-interface ActivityLogItem {
-  author: string
-  field: string
-  from: string
-  timestamp: string
-  to?: string
-}
-
 type Activity =
   | {
       _type: 'comment'
@@ -61,7 +127,7 @@ type Activity =
     }
   | {
       _type: 'activity'
-      payload: ActivityLogItem
+      payload: FieldChange
       timestamp: string
     }
 
@@ -148,13 +214,12 @@ export function TasksActivityLog(props: TasksActivityLogProps) {
     [operation],
   )
 
-  // TODO: Get the task real activity.
-  const activityData: ActivityLogItem[] = EMPTY_ARRAY
+  const activityData = useActivityLog(value).changes
 
   const activity: Activity[] = useMemo(() => {
     const taskActivity: Activity[] = activityData.map((item) => ({
       _type: 'activity' as const,
-      payload: item as ActivityLogItem,
+      payload: item,
       timestamp: item.timestamp,
     }))
     const commentsActivity: Activity[] = taskComments.map((comment) => ({
@@ -199,48 +264,45 @@ export function TasksActivityLog(props: TasksActivityLogProps) {
             )}
 
             {currentUser && (
-              <Stack space={4} marginTop={1}>
-                {taskComments.length > 0 && (
-                  <Fragment>
-                    {activity.map((item) => {
-                      if (item._type === 'activity') {
-                        return <EditedAt key={item.timestamp} activity={item.payload} />
-                      }
-
-                      return (
-                        <ActivityItem
+              <CurrentWorkspaceProvider>
+                <Stack space={4} marginTop={1}>
+                  {activity.map((item) => {
+                    if (item._type === 'activity') {
+                      return <EditedAt key={item.timestamp} activity={item.payload} />
+                    }
+                    return (
+                      <ActivityItem
+                        key={item.payload.parentComment._id}
+                        userId={item.payload.parentComment.authorId}
+                      >
+                        <CommentsListItem
+                          avatarConfig={COMMENTS_LIST_ITEM_AVATAR_CONFIG}
+                          canReply
+                          currentUser={currentUser}
+                          innerPadding={1}
+                          isSelected={false}
                           key={item.payload.parentComment._id}
-                          userId={item.payload.parentComment.authorId}
-                        >
-                          <CommentsListItem
-                            avatarConfig={COMMENTS_LIST_ITEM_AVATAR_CONFIG}
-                            canReply
-                            currentUser={currentUser}
-                            innerPadding={1}
-                            isSelected={false}
-                            key={item.payload.parentComment._id}
-                            mentionOptions={mentionOptions}
-                            mode="default" // TODO: set dynamic mode?
-                            onCreateRetry={handleCommentCreateRetry}
-                            onDelete={handleCommentRemove}
-                            onEdit={handleCommentEdit}
-                            onReactionSelect={handleCommentReact}
-                            onReply={handleCommentReply}
-                            parentComment={item.payload.parentComment}
-                            replies={item.payload.replies}
-                          />
-                        </ActivityItem>
-                      )
-                    })}
-                  </Fragment>
-                )}
-
-                <TasksActivityCommentInput
-                  currentUser={currentUser}
-                  mentionOptions={mentionOptions}
-                  onSubmit={handleCommentCreate}
-                />
-              </Stack>
+                          mentionOptions={mentionOptions}
+                          mode="default" // TODO: set dynamic mode?
+                          onCreateRetry={handleCommentCreateRetry}
+                          onDelete={handleCommentRemove}
+                          onEdit={handleCommentEdit}
+                          onReactionSelect={handleCommentReact}
+                          onReply={handleCommentReply}
+                          parentComment={item.payload.parentComment}
+                          replies={item.payload.replies}
+                        />
+                      </ActivityItem>
+                    )
+                  })}
+
+                  <TasksActivityCommentInput
+                    currentUser={currentUser}
+                    mentionOptions={mentionOptions}
+                    onSubmit={handleCommentCreate}
+                  />
+                </Stack>
+              </CurrentWorkspaceProvider>
             )}
           </MotionStack>
         )}

packages/sanity/src/tasks/src/tasks/components/activity/helpers/groupChanges.test.ts

@@ -0,0 +1,105 @@
+import {describe, expect, it} from '@jest/globals'
+
+import {groupChanges} from './groupChanges'
+import {type FieldChange} from './parseTransactions'
+
+describe('Tests grouping the changes', () => {
+  it('Should group the changes done by the same user in the title field', () => {
+    const changes: FieldChange[] = [
+      {
+        field: 'title',
+        to: 'Prepare the tasks PR no',
+        from: 'Prepare the tasks PR',
+        timestamp: '2024-03-11T08:31:12.619628Z',
+        author: 'piIz2Gfg5',
+      },
+      {
+        field: 'title',
+        from: 'Prepare the tasks PR no',
+        to: 'Prepare the tasks PR now',
+        timestamp: '2024-03-11T08:31:13.627854Z',
+        author: 'piIz2Gfg5',
+      },
+    ]
+    const output = groupChanges(changes)
+    expect(output).toEqual([
+      {
+        field: 'title',
+        from: 'Prepare the tasks PR',
+        to: 'Prepare the tasks PR now',
+        timestamp: '2024-03-11T08:31:13.627854Z',
+        author: 'piIz2Gfg5',
+      },
+    ])
+  })
+  it('Should group the changes done by the same user in the title field, with a max of 5 minutes.', () => {
+    const changes: FieldChange[] = [
+      {
+        field: 'title',
+        to: 'Prepare the tasks PR no',
+        from: 'Prepare the tasks PR',
+        timestamp: '2024-03-11T08:31:12.619628Z',
+        author: 'piIz2Gfg5',
+      },
+      {
+        field: 'title',
+        from: 'Prepare the tasks PR no',
+        to: 'Prepare the tasks PR now',
+        timestamp: '2024-03-11T08:31:13.627854Z',
+        author: 'piIz2Gfg5',
+      },
+      {
+        field: 'title',
+        from: 'Prepare the tasks PR now',
+        to: 'Prepare the tasks PR',
+        timestamp: '2024-03-11T08:38:13.627854Z',
+        author: 'piIz2Gfg5',
+      },
+    ]
+    const output = groupChanges(changes)
+    expect(output).toEqual([
+      {
+        field: 'title',
+        from: 'Prepare the tasks PR',
+        to: 'Prepare the tasks PR now',
+        timestamp: '2024-03-11T08:31:13.627854Z',
+        author: 'piIz2Gfg5',
+      },
+      {
+        field: 'title',
+        from: 'Prepare the tasks PR now',
+        to: 'Prepare the tasks PR',
+        timestamp: '2024-03-11T08:38:13.627854Z',
+        author: 'piIz2Gfg5',
+      },
+    ])
+  })
+  it('Should not group the changes if the user did changes to other fields in between', () => {
+    const changes: FieldChange[] = [
+      {
+        field: 'title',
+        to: 'Prepare the tasks PR no',
+        from: 'Prepare the tasks PR',
+        timestamp: '2024-03-11T08:31:12.619628Z',
+        author: 'piIz2Gfg5',
+      },
+      {
+        field: 'assignedTo',
+        from: 'old',
+        to: 'new',
+        timestamp: '2024-03-11T08:31:13.627854Z',
+        author: 'piIz2Gfg5',
+      },
+      {
+        field: 'title',
+        from: 'Prepare the tasks PR no',
+        to: 'Prepare the tasks PR now',
+        timestamp: '2024-03-11T08:31:13.627854Z',
+        author: 'piIz2Gfg5',
+      },
+    ]
+    const output = groupChanges(changes)
+
+    expect(output).toEqual(changes)
+  })
+})

packages/sanity/src/tasks/src/tasks/components/activity/helpers/groupChanges.ts

@@ -0,0 +1,38 @@
+import {type TaskDocument} from '../../../types'
+import {type FieldChange} from './parseTransactions'
+
+const FIELDS_TO_GROUP: (keyof TaskDocument)[] = ['title', 'description', 'target']
+const GROUP_TIME = 2 * 60 * 1000 // 2 minutes
+export function groupChanges(changes: FieldChange[]): FieldChange[] {
+  // If we have two or more changes done by the same user in a similar timestamp +- X time, in any of the fields specified  we group them together.
+  const groupedChanges: FieldChange[] = []
+  for (const change of changes) {
+    const lastChangeProcessed = groupedChanges[groupedChanges.length - 1]
+    if (!lastChangeProcessed) {
+      groupedChanges.push(change)
+      continue
+    }
+    if (!FIELDS_TO_GROUP.includes(change.field)) {
+      groupedChanges.push(change)
+      continue
+    }
+    if (
+      lastChangeProcessed.author === change.author &&
+      lastChangeProcessed.field === change.field
+    ) {
+      // Check the timestamp difference
+      const lastChangeDate = new Date(lastChangeProcessed.timestamp)
+      const changeDate = new Date(change.timestamp)
+      const diff = Math.abs(lastChangeDate.getTime() - changeDate.getTime())
+      if (diff <= GROUP_TIME) {
+        // We keep the from value and update the to value, and the date.
+        lastChangeProcessed.to = change.to
+        lastChangeProcessed.timestamp = change.timestamp
+        continue
+      }
+    }
+    groupedChanges.push(change)
+  }
+
+  return groupedChanges
+}

packages/sanity/src/tasks/src/tasks/components/activity/helpers/index.tsx

@@ -1,64 +1,176 @@
-import {
-  CalendarIcon,
-  CheckmarkCircleIcon,
-  CircleIcon,
-  EditIcon,
-  LinkIcon,
-  UserIcon,
-} from '@sanity/icons'
+import {CalendarIcon, CircleIcon, EditIcon, LinkIcon, UserIcon} from '@sanity/icons'
+import {TextSkeleton} from '@sanity/ui'
 import {type ReactElement} from 'react'
 import {
   type RelativeTimeOptions,
   useDateTimeFormat,
   type UseDateTimeFormatOptions,
   useRelativeTime,
+  useSchema,
+  useUser,
 } from 'sanity'
+import {IntentLink} from 'sanity/router'
+import styled from 'styled-components'
 
-interface KeyStringMapValue {
-  string: string
-  icon: ReactElement
-  link?: ReactElement
-}
+import {TASK_STATUS} from '../../../constants/TaskStatus'
+import {useDocumentPreviewValues} from '../../../hooks/useDocumentPreviewValues'
+import {type TaskTarget} from '../../../types'
+import {type FieldChange} from './parseTransactions'
 
 const DATE_FORMAT_OPTIONS: UseDateTimeFormatOptions = {
-  dateStyle: 'medium',
+  month: 'long',
+  day: '2-digit',
+  minute: '2-digit',
+  hour: '2-digit',
+  second: '2-digit',
 }
 
 const RELATIVE_TIME_OPTIONS: RelativeTimeOptions = {
   minimal: true,
   useTemporalPhrase: true,
 }
 
+const Strong = styled.strong`
+  font-weight: 600;
+`
+
 export function UpdatedTimeAgo(timestamp: string) {
+  const date = new Date(timestamp)
   const dateFormatter = useDateTimeFormat(DATE_FORMAT_OPTIONS)
-  const formattedDate = dateFormatter.format(new Date(timestamp))
+  const formattedDate = dateFormatter.format(date)
 
-  const updatedTimeAgo = useRelativeTime(formattedDate || '', RELATIVE_TIME_OPTIONS)
+  const updatedTimeAgo = useRelativeTime(date || '', RELATIVE_TIME_OPTIONS)
 
   return {timeAgo: updatedTimeAgo, formattedDate}
 }
 
-export function getStringForKey(key: string): KeyStringMapValue | undefined {
-  const keyStringMap: {[key: string]: KeyStringMapValue} = {
-    assignedTo: {string: 'assigned to', icon: <UserIcon />},
-    unassigned: {string: 'unassigned this task', icon: <UserIcon />},
-    dueDate: {string: 'changed the due date to', icon: <CalendarIcon />},
-    dueDateSet: {
-      string: 'set the due date to',
-      icon: <CalendarIcon />,
-    },
-    description: {string: 'updated the task description', icon: <EditIcon />},
-    title: {string: 'updated the task title', icon: <EditIcon />},
-    targetContent: {string: 'set the target content to', icon: <LinkIcon />},
-    statusDone: {
-      string: 'changed status to',
-      icon: <CheckmarkCircleIcon />,
-    },
-    status: {
-      string: 'changed status to',
-      icon: <CircleIcon />,
-    },
+export function UserName({userId}: {userId: string}) {
+  const [user, isLoading] = useUser(userId)
+  return isLoading ? <TextSkeleton style={{width: '15ch'}} /> : <Strong>{user?.displayName}</Strong>
+}
+
+const DUE_BY_DATE_OPTIONS: UseDateTimeFormatOptions = {
+  month: 'short',
+  day: 'numeric',
+}
+
+function DueByChange({date}: {date: string}) {
+  const dueBy = new Date(date)
+  const dateFormatter = useDateTimeFormat(DUE_BY_DATE_OPTIONS)
+  const formattedDate = dateFormatter.format(dueBy)
+  return <Strong>{formattedDate}</Strong>
+}
+
+const LinkWrapper = styled.span`
+  > a {
+    color: var(--card-fg-muted-color);
+    text-decoration: underline;
+    text-underline-offset: 1px;
+    font-weight: 600;
+  }
+`
+
+function TargetContentChange({target}: {target: TaskTarget}) {
+  const schema = useSchema()
+  const documentId = target.document._ref
+  const documentType = target.documentType
+  const documentSchema = schema.get(documentType)
+  const {isLoading, value} = useDocumentPreviewValues({
+    documentId,
+    documentType,
+  })
+
+  if (isLoading) {
+    return <TextSkeleton style={{width: '15ch'}} />
+  }
+  if (!documentSchema) {
+    return null
   }
 
-  return keyStringMap[key]
+  return (
+    <LinkWrapper>
+      <IntentLink intent="edit" params={{id: documentId, type: documentType}}>
+        {value?.title}
+      </IntentLink>
+    </LinkWrapper>
+  )
+}
+
+export function getChangeDetails(activity: FieldChange): {
+  text: string
+  icon: ReactElement
+  changeTo?: ReactElement
+} {
+  switch (activity.field) {
+    case 'status': {
+      const statusTitle = TASK_STATUS.find((s) => s.value === activity.to)?.title
+      return {
+        text: 'changed status to',
+        icon: TASK_STATUS.find((s) => s.value === activity.to)?.icon || <CircleIcon />,
+        changeTo: <Strong>{statusTitle}</Strong>,
+      }
+    }
+    case 'target':
+      if (!activity.to)
+        return {
+          text: 'removed target content',
+          icon: <LinkIcon />,
+          changeTo: undefined,
+        }
+      return {
+        text: 'set target content to',
+        icon: <LinkIcon />,
+        changeTo: <TargetContentChange target={activity.to} />,
+      }
+    case 'dueBy':
+      if (!activity.from) {
+        return {
+          text: 'set the due date to',
+          icon: <CalendarIcon />,
+          changeTo: <DueByChange date={activity.to} />,
+        }
+      }
+      if (!activity.to) {
+        return {
+          text: 'removed the due date',
+          icon: <CalendarIcon />,
+          changeTo: undefined,
+        }
+      }
+      return {
+        text: 'changed the due date to',
+        icon: <CalendarIcon />,
+        changeTo: <DueByChange date={activity.to} />,
+      }
+    case 'assignedTo':
+      if (!activity.to) {
+        return {
+          text: 'unassigned this task',
+          icon: <UserIcon />,
+          changeTo: undefined,
+        }
+      }
+      return {
+        text: 'assigned to',
+        icon: <UserIcon />,
+        changeTo: <UserName userId={activity.to} />,
+      }
+    case 'description':
+      return {
+        text: 'updated the task description',
+        icon: <EditIcon />,
+        changeTo: undefined,
+      }
+    case 'title':
+      return {
+        text: 'updated the task title',
+        icon: <EditIcon />,
+        changeTo: undefined,
+      }
+    default:
+      return {
+        text: '',
+        icon: <CircleIcon />,
+      }
+  }
 }

packages/sanity/src/tasks/src/tasks/components/activity/helpers/parseTransactions.ts

@@ -0,0 +1,72 @@
+import {applyPatch} from 'mendoza'
+import {type TransactionLogEventWithEffects} from 'sanity'
+
+import {type TaskDocument} from '../../../types'
+import {groupChanges} from './groupChanges'
+
+export interface FieldChange {
+  field: keyof TaskDocument
+  from: any
+  to: any
+  timestamp: string
+  author: string
+}
+
+function omitRev(document: TaskDocument) {
+  const {_rev, ...doc} = document
+  return doc
+}
+
+/**
+ * Tracks changes to specified fields across document versions by applying patches in reverse.
+ * @param newestDocument -  The latest state of the document.
+ * @param transactions - An array of transactions containing patches.
+ * @param fieldsToTrack - The fields to track for changes.
+ * @returns An array of changes for the tracked fields.
+ */
+export function trackFieldChanges(
+  newestDocument: TaskDocument,
+  transactions: TransactionLogEventWithEffects[],
+  fieldsToTrack: (keyof Omit<TaskDocument, '_rev'>)[],
+): FieldChange[] {
+  let currentDocument: Omit<TaskDocument, '_rev'> = omitRev(newestDocument)
+  const changes: FieldChange[] = []
+  let previousDocument = currentDocument
+
+  for (const transaction of transactions) {
+    const {timestamp, effects} = transaction
+
+    // Assuming there's a single document being tracked in this transaction
+    const documentId = transaction.documentIDs[0]
+    const effect = effects[documentId]
+    if (!effect || !effect.revert) continue
+
+    previousDocument = applyPatch(currentDocument, effect.revert)
+
+    // Track changes for specified fields
+    // eslint-disable-next-line no-loop-func
+    fieldsToTrack.forEach((field) => {
+      if (previousDocument?.[field] !== currentDocument?.[field]) {
+        changes.push({
+          field,
+          from: previousDocument?.[field],
+          to: currentDocument?.[field],
+          timestamp,
+          author: transaction.author,
+        })
+      }
+    })
+
+    // Prepare for next iteration
+    currentDocument = previousDocument
+  }
+
+  const changesSortedByTimestamp = changes.sort((a, b) => a.timestamp.localeCompare(b.timestamp))
+  // Find the moment the task was created by the user.
+  const createdByUserIndex = changesSortedByTimestamp.findIndex(
+    (change) => change.field === 'createdByUser',
+  )
+
+  // Return changes sorted by timestamp in ascending order from the moment the task was created.
+  return groupChanges(changesSortedByTimestamp.slice(createdByUserIndex + 1))
+}

packages/sanity/src/tasks/src/tasks/components/form/addonWorkspace/TasksAddOnWorkspaceProvider.tsx

@@ -12,6 +12,7 @@ import {
   WorkspaceProvider,
 } from 'sanity'
 
+import {API_VERSION} from '../../../constants/API_VERSION'
 import {type FormMode} from '../../../types'
 import {taskSchema} from './taskSchema'
 
@@ -24,7 +25,7 @@ function TasksAddonWorkspaceProviderInner({
   children: React.ReactNode
   mode: FormMode
 }) {
-  const client = useClient()
+  const client = useClient({apiVersion: API_VERSION})
   const apiHost = client.config().apiHost
   // TODO: Is basePath necessary here?
   const basePath = ''

packages/sanity/src/tasks/src/tasks/components/form/addonWorkspace/taskSchema.tsx

@@ -1,5 +1,6 @@
 import {type ArrayFieldProps, defineField, defineType, type ObjectFieldProps} from 'sanity'
 
+import {TASK_STATUS} from '../../../constants/TaskStatus'
 import {type FormMode} from '../../../types'
 import {
   AssigneeCreateFormField,
@@ -139,10 +140,7 @@ export const taskSchema = (mode: FormMode) =>
         name: 'status',
         title: 'Status',
         options: {
-          list: [
-            {value: 'open', title: 'To Do'},
-            {value: 'closed', title: 'Done'},
-          ],
+          list: TASK_STATUS.map((s) => ({value: s.value, title: s.title})),
         },
         hidden: true,
       },

packages/sanity/src/tasks/src/tasks/components/form/fields/StatusSelector.tsx

@@ -1,6 +1,6 @@
-import {CheckmarkCircleIcon, CheckmarkIcon, CircleIcon} from '@sanity/icons'
+import {CheckmarkIcon, CircleIcon} from '@sanity/icons'
 import {Menu} from '@sanity/ui'
-import {type ForwardedRef, forwardRef, type ReactNode} from 'react'
+import {type ForwardedRef, forwardRef} from 'react'
 import {
   type FormPatch,
   isString,
@@ -11,25 +11,21 @@ import {
 } from 'sanity'
 
 import {Button, MenuButton, MenuItem} from '../../../../../../ui-components'
-
-// TODO: support customizing icons and options.
-const OPTION_ICONS: Record<string, ReactNode> = {
-  closed: <CheckmarkCircleIcon />,
-  open: <CircleIcon />,
-}
+import {TASK_STATUS} from '../../../constants/TaskStatus'
 
 export const StatusMenuButton = forwardRef(function StatusMenuButton(
   props: {value: string | undefined; options: TitledListValue<string>[]},
   ref: ForwardedRef<HTMLButtonElement>,
 ) {
-  const {value, options} = props
+  const {value, options, ...rest} = props
   const selectedOption = options.find((option) => option.value === value)
+  const icon = TASK_STATUS.find((status) => status.value === value)?.icon
   return (
     <Button
-      {...props}
+      {...rest}
       ref={ref}
       tooltipProps={null}
-      icon={value && OPTION_ICONS[value]}
+      icon={icon}
       text={selectedOption?.title || value}
       tone="default"
       mode="ghost"
@@ -54,12 +50,11 @@ export function StatusSelector(props: StatusSelectorProps) {
         <Menu>
           {options.map((option) => {
             const isSelected = value === option.value
+            const icon = TASK_STATUS.find((status) => status.value === option.value)?.icon
             return (
               <MenuItem
                 key={option.title}
-                icon={
-                  isString(option.value) ? OPTION_ICONS[option.value] || CircleIcon : CircleIcon
-                }
+                icon={isString(option.value) ? icon || CircleIcon : CircleIcon}
                 text={option.title || option.value}
                 pressed={isSelected}
                 iconRight={isSelected && <CheckmarkIcon />}

packages/sanity/src/tasks/src/tasks/constants/API_VERSION.ts

@@ -0,0 +1 @@
+export const API_VERSION = '2024-03-05'

packages/sanity/src/tasks/src/tasks/constants/TaskStatus.tsx

@@ -0,0 +1,6 @@
+import {CheckmarkCircleIcon, CircleIcon} from '@sanity/icons'
+
+export const TASK_STATUS = [
+  {value: 'open', title: 'To Do', icon: <CircleIcon />},
+  {value: 'closed', title: 'Done', icon: <CheckmarkCircleIcon />},
+]