feat(core): adds events based history

.eslintrc.cjs

@@ -132,6 +132,7 @@ const config = {
             'status',
             'group',
             'textWeight',
+            'showChangesBy',
           ],
         },
       },

dev/test-studio/sanity.config.ts

@@ -174,6 +174,7 @@ const defaultWorkspace = {
   tasks: {
     enabled: true,
   },
+  beta: {eventsAPI: {enabled: true}},
 }
 
 export default defineConfig([
@@ -220,6 +221,12 @@ export default defineConfig([
     dataset: 'playground',
     plugins: [sharedSettings()],
     basePath: '/playground',
+    // eslint-disable-next-line camelcase
+    __internal_serverDocumentActions: {
+      // TODO: Switched off because Actions API doesn't support versions (yet).
+      enabled: false,
+    },
+    beta: {eventsAPI: {enabled: true}},
   },
   {
     name: 'listener-events',

dev/test-studio/schema/author.ts

@@ -115,15 +115,18 @@ export default defineType({
     },
   ],
 
-  initialValue: () => ({
+  initialValue: {
     name: 'Foo',
-    bestFriend: {_type: 'reference', _ref: 'foo-bar'},
-    image: {
-      _type: 'image',
-      asset: {
-        _ref: 'image-8dcc1391e06e4b4acbdc6bbf2e8c8588d537cbb8-4896x3264-jpg',
-        _type: 'reference',
+    bestFriend: {
+      _type: 'reference',
+      _ref: 'foo-bar',
+      _weak: true,
+      _strengthenOnPublish: {
+        type: 'author',
+        template: {
+          id: 'author',
+        },
       },
     },
-  }),
+  },
 })

packages/sanity/package.json

@@ -262,6 +262,7 @@
     "tar-fs": "^2.1.1",
     "tar-stream": "^3.1.7",
     "use-device-pixel-ratio": "^1.1.0",
+    "use-effect-event": "^1.0.2",
     "use-hot-module-reload": "^2.0.0",
     "use-sync-external-store": "^1.2.0",
     "vite": "^4.5.1",

packages/sanity/src/_singletons/context/EventsContext.ts

@@ -0,0 +1,11 @@
+import {createContext} from 'sanity/_createContext'
+
+import type {EventsStore} from '../../core/store/events/types'
+
+/**
+ * @internal
+ */
+export const EventsContext = createContext<EventsStore | null>(
+  'sanity/_singletons/context/events',
+  null,
+)

packages/sanity/src/_singletons/index.ts

@@ -21,6 +21,7 @@ export * from './context/DocumentFieldActionsContext'
 export * from './context/DocumentIdContext'
 export * from './context/DocumentPaneContext'
 export * from './context/DocumentSheetListContext'
+export * from './context/EventsContext'
 export * from './context/FieldActionsContext'
 export * from './context/FormBuilderContext'
 export * from './context/FormCallbacksContext'

packages/sanity/src/core/config/configPropertyReducers.ts

@@ -364,6 +364,26 @@ export const internalTasksReducer = (opts: {
   return result
 }
 
+export const eventsAPIReducer = (opts: {config: PluginOptions; initialValue: boolean}): boolean => {
+  const {config, initialValue} = opts
+  const flattenedConfig = flattenConfig(config, [])
+
+  const result = flattenedConfig.reduce((acc: boolean, {config: innerConfig}) => {
+    const enabled = innerConfig.beta?.eventsAPI?.enabled
+
+    if (typeof enabled === 'undefined') return acc
+    if (typeof enabled === 'boolean') return enabled
+
+    throw new Error(
+      `Expected \`beta.eventsAPI.enabled\` to be an object with footerAction, but received ${getPrintableType(
+        enabled,
+      )}`,
+    )
+  }, initialValue)
+
+  return result
+}
+
 export const partialIndexingEnabledReducer = (opts: {
   config: PluginOptions
   initialValue: boolean

packages/sanity/src/core/config/prepareConfig.ts

@@ -32,6 +32,7 @@ import {
   documentCommentsEnabledReducer,
   documentInspectorsReducer,
   documentLanguageFilterReducer,
+  eventsAPIReducer,
   fileAssetSourceResolver,
   imageAssetSourceResolver,
   initialDocumentActions,
@@ -655,6 +656,9 @@ function resolveSource({
     },
 
     beta: {
+      eventsAPI: {
+        enabled: eventsAPIReducer({config, initialValue: false}),
+      },
       treeArrayEditing: {
         // This beta feature is no longer available.
         enabled: false,

packages/sanity/src/core/config/types.ts

@@ -1007,4 +1007,14 @@ export interface BetaFeatures {
      */
     fallbackStudioOrigin?: string
   }
+  /**
+   * Config for the history events API .
+   *
+   * If enabled, it will use the new events API to fetch document history.
+   *
+   * If it is not enabled, it will continue using the legacy Timeline.
+   */
+  eventsAPI?: {
+    enabled: boolean
+  }
 }

packages/sanity/src/core/field/diff/components/ChangesError.tsx

@@ -0,0 +1,22 @@
+import {Card, Stack, Text} from '@sanity/ui'
+
+import {useTranslation} from '../../../i18n'
+
+/**
+ * @internal
+ * */
+export function ChangesError() {
+  const {t} = useTranslation()
+  return (
+    <Card tone="caution" padding={3}>
+      <Stack space={3}>
+        <Text size={1} weight="medium" as="h3">
+          {t('changes.error-title')}
+        </Text>
+        <Text as="p" size={1} muted>
+          {t('changes.error-description')}
+        </Text>
+      </Stack>
+    </Card>
+  )
+}

packages/sanity/src/core/field/diff/components/DiffTooltip.tsx

@@ -1,5 +1,5 @@
 import {type Path} from '@sanity/types'
-import {Flex, Inline, Stack, Text} from '@sanity/ui'
+import {Card, Flex, Inline, Stack, Text} from '@sanity/ui'
 import {type ReactElement, type ReactNode} from 'react'
 
 import {Tooltip, type TooltipProps} from '../../../../ui-components'
@@ -9,6 +9,7 @@ import {useTranslation} from '../../../i18n'
 import {useUser} from '../../../store'
 import {type AnnotationDetails, type Diff} from '../../types'
 import {getAnnotationAtPath, useAnnotationColor} from '../annotations'
+import {Event} from '../components/Event'
 
 /** @internal */
 export interface DiffTooltipProps extends TooltipProps {
@@ -46,7 +47,7 @@ function DiffTooltipWithAnnotation(props: DiffTooltipWithAnnotationsProps) {
   }
 
   const content = (
-    <Stack space={2}>
+    <Stack space={2} style={{minWidth: '240px'}} paddingTop={1}>
       <Text muted size={1} weight="medium">
         {description || t('changes.changed-label')}
       </Text>
@@ -75,26 +76,35 @@ function AnnotationItem({annotation}: {annotation: AnnotationDetails}) {
   const {t} = useTranslation()
 
   return (
-    <Inline space={2}>
-      <Flex
-        align="center"
-        paddingRight={3}
-        style={{
-          backgroundColor: color.background,
-          color: color.text,
-          borderRadius: 'calc(23px / 2)',
-        }}
-      >
-        <UserAvatar user={author} />
-        <Inline paddingLeft={2}>
-          <Text muted size={1} style={{color: color.text}}>
-            {user ? user.displayName : t('changes.loading-author')}
+    <>
+      {annotation.event ? (
+        <>
+          <Card borderBottom marginBottom={2} />
+          <Event event={annotation.event} showChangesBy="inline" />
+        </>
+      ) : (
+        <Inline space={2}>
+          <Flex
+            align="center"
+            paddingRight={3}
+            style={{
+              backgroundColor: color.background,
+              color: color.text,
+              borderRadius: 'calc(23px / 2)',
+            }}
+          >
+            <UserAvatar user={author} />
+            <Inline paddingLeft={2}>
+              <Text muted size={1} style={{color: color.text}}>
+                {user ? user.displayName : t('changes.loading-author')}
+              </Text>
+            </Inline>
+          </Flex>
+          <Text as="time" muted size={1} dateTime={timestamp}>
+            {timeAgo}
           </Text>
         </Inline>
-      </Flex>
-      <Text as="time" muted size={1} dateTime={timestamp}>
-        {timeAgo}
-      </Text>
-    </Inline>
+      )}
+    </>
   )
 }