[desk-tool] Improve timeline selection buttons

sanity-io · Oct 6, 2020 · 66ec55f · 66ec55f
1 parent 134de81
commit 66ec55f
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 55 deletions.
diff --git a/packages/@sanity/desk-tool/src/panes/documentPane/changesPanel/changesPanel.tsx b/packages/@sanity/desk-tool/src/panes/documentPane/changesPanel/changesPanel.tsx
@@ -13,7 +13,8 @@ import {UserAvatar} from '@sanity/base/components'
 import {Tooltip} from 'part:@sanity/components/tooltip'
 import Button from 'part:@sanity/components/buttons/default'
 import {AvatarStack} from 'part:@sanity/components/avatar'
-import {formatTimelineEventDate, formatTimelineEventLabel} from '../timeline'
+import {useTimeAgo} from '@sanity/base/hooks'
+import {formatTimelineEventLabel} from '../timeline'
 import {useDocumentHistory} from '../documentHistory'
 
 import styles from './changesPanel.css'
@@ -59,6 +60,8 @@ export function ChangesPanel({
     evt.stopPropagation()
   }, [])
 
+  const menuOpen = isTimelineOpen && timelineMode === 'since'
+
   return (
     <div className={styles.root}>
       <header className={styles.header}>
@@ -85,10 +88,13 @@ export function ChangesPanel({
               selected={isTimelineOpen && timelineMode === 'since'}
               size="small"
             >
-              {isTimelineOpen && timelineMode === 'since' ? (
+              {/* eslint-disable-next-line no-nested-ternary */}
+              {menuOpen ? (
                 <>Review changes since</>
-              ) : (
+              ) : since ? (
                 sinceText(since)
+              ) : (
+                <>Since unknown version</>
               )}{' '}
               &darr;
             </Button>
@@ -132,10 +138,8 @@ export function ChangesPanel({
   )
 }
 
-function sinceText(since: Chunk | null) {
-  if (!since) return `Since unknown version`
+function sinceText(since: Chunk) {
+  const timeAgo = useTimeAgo(since.endTimestamp)
 
-  return `Since ${formatTimelineEventLabel(since.type)} ${formatTimelineEventDate(
-    since.endTimestamp
-  )}`
+  return `Since ${formatTimelineEventLabel(since.type)} ${timeAgo}`
 }
diff --git a/packages/@sanity/desk-tool/src/panes/documentPane/documentPanel/header/header.tsx b/packages/@sanity/desk-tool/src/panes/documentPane/documentPanel/header/header.tsx
@@ -1,14 +1,15 @@
+import {useTimeAgo} from '@sanity/base/hooks'
 import {Chunk} from '@sanity/field/diff'
 import classNames from 'classnames'
-import {negate} from 'lodash'
+import {negate, upperFirst} from 'lodash'
 import CloseIcon from 'part:@sanity/base/close-icon'
 import SplitHorizontalIcon from 'part:@sanity/base/split-horizontal-icon'
 import Button from 'part:@sanity/components/buttons/default'
 import {MenuItemType, MenuItemGroupType} from 'part:@sanity/components/menus/default'
 import LanguageFilter from 'part:@sanity/desk-tool/language-select-component?'
 import React, {useCallback, useState} from 'react'
 import {useDeskToolFeatures} from '../../../../features'
-import {formatTimelineEventDate, formatTimelineEventLabel} from '../../timeline'
+import {formatTimelineEventLabel} from '../../timeline'
 import {DocumentView} from '../../types'
 import {DocumentPanelContextMenu} from './contextMenu'
 import {DocumentHeaderTabs} from './tabs'
@@ -66,6 +67,7 @@ export function DocumentPanelHeader(props: DocumentPanelHeaderProps) {
 
   const showTabs = features.splitViews && props.views.length > 1
   const showVersionMenu = true // props.isHistoryOpen
+  const menuOpen = props.isTimelineOpen && props.timelineMode === 'rev'
 
   return (
     <div className={classNames(styles.root, props.isCollapsed && styles.isCollapsed)}>
@@ -157,10 +159,13 @@ export function DocumentPanelHeader(props: DocumentPanelHeaderProps) {
                 selected={props.isTimelineOpen && props.timelineMode === 'rev'}
                 size="small"
               >
-                {props.isTimelineOpen && props.timelineMode === 'rev' ? (
+                {/* eslint-disable-next-line no-nested-ternary */}
+                {menuOpen ? (
                   <>Select version</>
-                ) : (
+                ) : rev ? (
                   <TimelineButtonLabel rev={rev} />
+                ) : (
+                  <>Current version</>
                 )}{' '}
                 &darr;
               </Button>
@@ -172,12 +177,12 @@ export function DocumentPanelHeader(props: DocumentPanelHeaderProps) {
   )
 }
 
-function TimelineButtonLabel({rev}: {rev: Chunk | null}) {
-  if (!rev) return <>Current version</>
+function TimelineButtonLabel({rev}: {rev: Chunk}) {
+  const timeAgo = useTimeAgo(rev.endTimestamp)
 
   return (
     <>
-      {formatTimelineEventLabel(rev.type)} {formatTimelineEventDate(rev.endTimestamp)}
+      {upperFirst(formatTimelineEventLabel(rev.type))} {timeAgo}
     </>
   )
 }
diff --git a/packages/@sanity/desk-tool/src/panes/documentPane/timeline/helpers.ts b/packages/@sanity/desk-tool/src/panes/documentPane/timeline/helpers.ts
@@ -1,5 +1,4 @@
 import {ChunkType} from '@sanity/field/diff'
-import {format, isToday, isYesterday, differenceInHours, differenceInMinutes} from 'date-fns'
 import CloseIcon from 'part:@sanity/base/close-icon'
 import EditIcon from 'part:@sanity/base/edit-icon'
 import PlusIcon from 'part:@sanity/base/plus-icon'
@@ -8,16 +7,16 @@ import TrashIcon from 'part:@sanity/base/trash-icon'
 import UnpublishIcon from 'part:@sanity/base/unpublish-icon'
 
 const LABELS: {[key: string]: string} = {
-  create: 'Created',
-  delete: 'Deleted',
-  discardDraft: 'Discarded draft',
-  initial: 'Created',
-  editDraft: 'Edited',
-  publish: 'Published',
-  unpublish: 'Unpublished'
+  create: 'created',
+  delete: 'deleted',
+  discardDraft: 'discarded draft',
+  initial: 'created',
+  editDraft: 'edited',
+  publish: 'published',
+  unpublish: 'unpublished'
 }
 
-const ICON_COMPONENTS: {[key: string]: React.ComponentType<{}>} = {
+const ICON_COMPONENTS: {[key: string]: React.ComponentType<Record<string, unknown>>} = {
   create: PlusIcon,
   delete: TrashIcon,
   discardDraft: CloseIcon,
@@ -27,35 +26,6 @@ const ICON_COMPONENTS: {[key: string]: React.ComponentType<{}>} = {
   unpublish: UnpublishIcon
 }
 
-export function formatHoursAgo(date: Date | string) {
-  const now = Date.now()
-  const h = differenceInHours(now, date)
-
-  if (h) {
-    return `${h}h`
-  }
-
-  const m = differenceInMinutes(now, date)
-
-  if (m) {
-    return `${m}m`
-  }
-
-  return 'Just now'
-}
-
-export function formatTimelineEventDate(date: Date | string) {
-  if (isToday(date)) {
-    return formatHoursAgo(date)
-  }
-
-  if (isYesterday(date)) {
-    return `Yesterday at ${format(date, 'h:mma')}`
-  }
-
-  return format(date, 'MMM D, YYYY')
-}
-
 export function formatTimelineEventLabel(type: ChunkType) {
   return LABELS[type]
 }

diff --git a/packages/@sanity/desk-tool/src/panes/documentPane/timeline/timelineItem.css b/packages/@sanity/desk-tool/src/panes/documentPane/timeline/timelineItem.css
@@ -229,6 +229,7 @@
   font-size: var(--font-size-small);
   line-height: var(--line-height-small);
   font-weight: 600;
+  text-transform: capitalize;
 }
 
 .timestamp {

diff --git a/packages/@sanity/desk-tool/src/panes/documentPane/timeline/timelineItem.tsx b/packages/@sanity/desk-tool/src/panes/documentPane/timeline/timelineItem.tsx
@@ -1,7 +1,8 @@
 import React, {useCallback, createElement} from 'react'
+import {useTimeAgo} from '@sanity/base/hooks'
 import {Chunk, ChunkType} from '@sanity/field/diff'
 import {
-  formatTimelineEventDate,
+  // formatTimelineEventDate,
   formatTimelineEventLabel,
   getTimelineEventIconComponent
 } from './helpers'
@@ -23,6 +24,7 @@ export function TimelineItem(props: {
   const {isSelectionBottom, isSelectionTop, state, onSelect, timestamp, chunk, title, type} = props
   const iconComponent = getTimelineEventIconComponent(type)
   const authorUserIds = Array.from(chunk.authors)
+  const timeAgo = useTimeAgo(timestamp, {minimal: true})
 
   const handleClick = useCallback(
     (evt: React.MouseEvent<HTMLButtonElement>) => {
@@ -51,7 +53,7 @@ export function TimelineItem(props: {
           <div className={styles.typeName}>
             {formatTimelineEventLabel(type) || <code>{type}</code>}
           </div>
-          <div className={styles.timestamp}>{formatTimelineEventDate(timestamp)}</div>
+          <div className={styles.timestamp}>{timeAgo}</div>
         </div>
         <div className={styles.avatarStackContainer}>
           <UserAvatarStack maxLength={3} userIds={authorUserIds} />