[desk-tool] Update timeline dropdown labels

packages/@sanity/desk-tool/src/panes/documentPane/changesPanel/changesPanel.tsx

@@ -13,6 +13,7 @@ import {useDocumentHistory} from '../documentHistory'
 
 import styles from './changesPanel.css'
 import {format} from 'date-fns'
+import {formatTimelineEventDate, formatTimelineEventLabel} from '../timeline'
 
 interface ChangesPanelProps {
   changesSinceSelectRef: React.MutableRefObject<HTMLDivElement | null>
@@ -94,11 +95,9 @@ export function ChangesPanel({
 }
 
 function sinceText(since: Chunk | null) {
-  if (!since) return 'Since unknown version'
+  if (!since) return `Since unknown version`
 
-  if (since.type === 'publish') {
-    return `Since version published at ${format(since.endTimestamp)}`
-  }
-
-  return `Since version at ${format(since.endTimestamp)}`
+  return `Since ${formatTimelineEventLabel(since.type)} ${formatTimelineEventDate(
+    since.endTimestamp
+  )}`
 }

packages/@sanity/desk-tool/src/panes/documentPane/documentPanel/header/header.tsx

@@ -14,6 +14,7 @@ import {Chunk} from '@sanity/field/diff'
 
 import styles from './header.css'
 import {format} from 'date-fns'
+import {formatTimelineEventDate, formatTimelineEventLabel} from '../../timeline'
 
 export interface DocumentPanelHeaderProps {
   activeViewId?: string
@@ -152,11 +153,21 @@ export function DocumentPanelHeader(props: DocumentPanelHeaderProps) {
               onClick={props.onTimelineOpen}
               padding="small"
             >
-              Showing {rev ? `version at ${format(rev.endTimestamp)}` : 'latest version'} ↓
+              <TimelineButtonLabel rev={rev} /> &darr;
             </Button>
           </div>
         )}
       </div>
     </div>
   )
 }
+
+function TimelineButtonLabel({rev}: {rev: Chunk | null}) {
+  if (!rev) return <>Current version</>
+
+  return (
+    <>
+      {formatTimelineEventLabel(rev.type)} {formatTimelineEventDate(rev.endTimestamp)}
+    </>
+  )
+}

packages/@sanity/desk-tool/src/panes/documentPane/timeline/helpers.ts

@@ -1,4 +1,23 @@
+import {ChunkType} from '@sanity/field/diff'
 import {format, isToday, isYesterday, differenceInHours, differenceInMinutes} from 'date-fns'
+import EditIcon from 'part:@sanity/base/edit-icon'
+import PlusIcon from 'part:@sanity/base/plus-icon'
+import PublishIcon from 'part:@sanity/base/publish-icon'
+import UnpublishIcon from 'part:@sanity/base/unpublish-icon'
+
+const LABELS: {[key: string]: string} = {
+  initial: 'Created',
+  editDraft: 'Edited',
+  publish: 'Published',
+  unpublish: 'Unpublished'
+}
+
+const ICON_COMPONENTS: {[key: string]: React.ComponentType<{}>} = {
+  initial: PlusIcon,
+  editDraft: EditIcon,
+  publish: PublishIcon,
+  unpublish: UnpublishIcon
+}
 
 export function formatHoursAgo(date: Date) {
   const now = Date.now()
@@ -17,7 +36,7 @@ export function formatHoursAgo(date: Date) {
   return 'Just now'
 }
 
-export function formatDate(date: Date) {
+export function formatTimelineEventDate(date: Date) {
   if (isToday(date)) {
     return formatHoursAgo(date)
   }
@@ -26,5 +45,13 @@ export function formatDate(date: Date) {
     return `Yesterday at ${format(date, 'h:mma')}`
   }
 
-  return format(date)
+  return format(date, 'MMM d, YYYY')
+}
+
+export function formatTimelineEventLabel(type: ChunkType) {
+  return LABELS[type]
+}
+
+export function getTimelineEventIconComponent(type: ChunkType) {
+  return ICON_COMPONENTS[type]
 }

packages/@sanity/desk-tool/src/panes/documentPane/timeline/index.ts

@@ -1 +1,2 @@
+export * from './helpers'
 export * from './timeline'

packages/@sanity/desk-tool/src/panes/documentPane/timeline/timelineItem.tsx

@@ -1,39 +1,24 @@
-import EditIcon from 'part:@sanity/base/edit-icon'
-import PlusIcon from 'part:@sanity/base/plus-icon'
-import PublishIcon from 'part:@sanity/base/publish-icon'
-import UnpublishIcon from 'part:@sanity/base/unpublish-icon'
 import React, {useCallback, createElement} from 'react'
-import {Chunk} from '@sanity/field/diff'
-import {formatDate} from './helpers'
+import {Chunk, ChunkType} from '@sanity/field/diff'
+import {
+  formatTimelineEventDate,
+  formatTimelineEventLabel,
+  getTimelineEventIconComponent
+} from './helpers'
 import {TimelineItemState} from './types'
 
 import styles from './timelineItem.css'
 
-const ICON_COMPONENTS: {[key: string]: React.ComponentType<{}>} = {
-  initial: PlusIcon,
-  editDraft: EditIcon,
-  publish: PublishIcon,
-  unpublish: UnpublishIcon
-}
-
-const LABELS: {[key: string]: string} = {
-  initial: 'Created',
-  editDraft: 'Edited',
-  publish: 'Published',
-  unpublish: 'Unpublished'
-}
-
 export function TimelineItem(props: {
   state: TimelineItemState
   title: string
   onSelect: (chunk: Chunk) => void
   chunk: Chunk
   timestamp: Date
-  type: string
+  type: ChunkType
 }) {
   const {state, onSelect, timestamp, chunk, title, type} = props
-  const iconComponent = ICON_COMPONENTS[type]
-  const label = LABELS[type] || <code>{type}</code>
+  const iconComponent = getTimelineEventIconComponent(type)
 
   const handleClick = useCallback(
     (evt: React.MouseEvent<HTMLButtonElement>) => {
@@ -56,8 +41,10 @@ export function TimelineItem(props: {
       <div className={styles.wrapper}>
         <div className={styles.iconContainer}>{iconComponent && createElement(iconComponent)}</div>
         <div className={styles.text}>
-          <div className={styles.typeName}>{label}</div>
-          <div className={styles.timestamp}>{formatDate(timestamp)}</div>
+          <div className={styles.typeName}>
+            {formatTimelineEventLabel(type) || <code>{type}</code>}
+          </div>
+          <div className={styles.timestamp}>{formatTimelineEventDate(timestamp)}</div>
         </div>
       </div>
     </button>