fix(desk): edit logic for published- and edit status message in docum…

…ent list (#5067) * fix(desk): edit logic for published- and change status message in document list * fix(desk): remove a TimeAgo component and use hook for PublishAction tooltip * fix(core): remove TimeAgo components, use useTimeAgo for reference previews * Update packages/sanity/src/core/form/inputs/ReferenceInput/ReferencePreview.tsx Co-authored-by: Robin Pyon <[email protected]> --------- Co-authored-by: Robin Pyon <[email protected]>
sanity-io · Oct 31, 2023 · 2013203 · 2013203 · vercel · Oct 31, 2023
1 parent 829f541
commit 2013203
Show file tree

Hide file tree

Showing 8 changed files with 35 additions and 87 deletions.
diff --git a/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/utils/TimeAgo.tsx b/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/utils/TimeAgo.tsx
diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferencePreview.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferencePreview.tsx
@@ -4,9 +4,9 @@ import {Box, Flex, Inline, Label, Text, Tooltip, useRootTheme} from '@sanity/ui'
 import {EditIcon, PublishIcon} from '@sanity/icons'
 import {RenderPreviewCallback} from '../../types'
 import {PreviewLayoutKey, TextWithTone} from '../../../components'
+import {useTimeAgo} from '../../../hooks'
 import {useDocumentPresence} from '../../../store'
 import {DocumentPreviewPresence} from '../../../presence'
-import {TimeAgo} from './utils/TimeAgo'
 import {ReferenceInfo} from './types'
 
 /**
@@ -53,6 +53,16 @@ export function ReferencePreview(props: {
     [layout, previewStub, refType],
   )
 
+  const timeSincePublished = useTimeAgo(preview.published?._updatedAt || '', {
+    minimal: true,
+    agoSuffix: true,
+  })
+
+  const timeSinceEdited = useTimeAgo(preview.draft?._updatedAt || '', {
+    minimal: true,
+    agoSuffix: true,
+  })
+
   return (
     <Flex align="center">
       <Box flex={1}>{renderPreview(previewProps)}</Box>
@@ -76,13 +86,9 @@ export function ReferencePreview(props: {
                 content={
                   <Box padding={2}>
                     <Text size={1}>
-                      {preview.published?._updatedAt ? (
-                        <>
-                          Published <TimeAgo time={preview.published._updatedAt} />
-                        </>
-                      ) : (
-                        <>Not published</>
-                      )}
+                      {preview.published?._updatedAt
+                        ? `Published ${timeSincePublished}`
+                        : 'Not published'}
                     </Text>
                   </Box>
                 }
@@ -104,13 +110,9 @@ export function ReferencePreview(props: {
                 content={
                   <Box padding={2}>
                     <Text size={1}>
-                      {preview.draft?._updatedAt ? (
-                        <>
-                          Edited <TimeAgo time={preview.draft._updatedAt} />
-                        </>
-                      ) : (
-                        <>No unpublished edits</>
-                      )}
+                      {preview.draft?._updatedAt
+                        ? `Edited ${timeSinceEdited}`
+                        : 'No unpublished edits'}
                     </Text>
                   </Box>
                 }

diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/utils/TimeAgo.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/utils/TimeAgo.tsx
diff --git a/packages/sanity/src/desk/components/DraftStatus.tsx b/packages/sanity/src/desk/components/DraftStatus.tsx
@@ -2,25 +2,21 @@ import React from 'react'
 import {EditIcon} from '@sanity/icons'
 import {PreviewValue, SanityDocument} from '@sanity/types'
 import {Box, Text, Tooltip} from '@sanity/ui'
-import {TimeAgo} from './TimeAgo'
-import {TextWithTone} from 'sanity'
+import {TextWithTone, useTimeAgo} from 'sanity'
 
 export function DraftStatus(props: {document?: PreviewValue | Partial<SanityDocument> | null}) {
   const {document} = props
   const updatedAt = document && '_updatedAt' in document && document._updatedAt
 
+  // Label with abbreviations and suffix
+  const lastUpdatedTimeAgo = useTimeAgo(updatedAt || '', {minimal: true, agoSuffix: true})
+
   return (
     <Tooltip
       portal
       content={
         <Box padding={2}>
-          <Text size={1}>
-            {document ? (
-              <>Edited {updatedAt && <TimeAgo time={updatedAt} />}</>
-            ) : (
-              <>No unpublished edits</>
-            )}
-          </Text>
+          <Text size={1}>{document ? `Edited ${lastUpdatedTimeAgo}` : 'No unpublished edits'}</Text>
         </Box>
       }
     >

diff --git a/packages/sanity/src/desk/components/PublishedStatus.tsx b/packages/sanity/src/desk/components/PublishedStatus.tsx
@@ -2,26 +2,22 @@ import React from 'react'
 import {PublishIcon} from '@sanity/icons'
 import {PreviewValue, SanityDocument} from '@sanity/types'
 import {Box, Text, Tooltip} from '@sanity/ui'
-import {TimeAgo} from './TimeAgo'
-import {TextWithTone} from 'sanity'
+import {TextWithTone, useTimeAgo} from 'sanity'
 
 export function PublishedStatus(props: {document?: PreviewValue | Partial<SanityDocument> | null}) {
   const {document} = props
   const updatedAt = document && '_updatedAt' in document && document._updatedAt
   const statusLabel = document ? 'Published' : 'Not published'
 
+  // Label with abbreviations and suffix
+  const lastUpdatedTimeAgo = useTimeAgo(updatedAt || '', {minimal: true, agoSuffix: true})
+
   return (
     <Tooltip
       portal
       content={
         <Box padding={2}>
-          <Text size={1}>
-            {document ? (
-              <>Published {updatedAt && <TimeAgo time={updatedAt} />}</>
-            ) : (
-              <>Not published</>
-            )}
-          </Text>
+          <Text size={1}>{document ? `Published ${lastUpdatedTimeAgo}` : 'Not published'}</Text>
         </Box>
       }
     >

diff --git a/packages/sanity/src/desk/components/TimeAgo.tsx b/packages/sanity/src/desk/components/TimeAgo.tsx
diff --git a/packages/sanity/src/desk/components/index.ts b/packages/sanity/src/desk/components/index.ts
@@ -2,7 +2,6 @@ export * from './Delay'
 export * from './DocTitle'
 export * from './RenderActionCollectionState'
 export * from './RenderBadgeCollectionState'
-export * from './TimeAgo'
 export * from './confirmDeleteDialog'
 export * from './pane'
 export * from './paneHeaderActions'

diff --git a/packages/sanity/src/desk/documentActions/PublishAction.tsx b/packages/sanity/src/desk/documentActions/PublishAction.tsx
@@ -1,7 +1,6 @@
 import {CheckmarkIcon, PublishIcon} from '@sanity/icons'
 import {isValidationErrorMarker} from '@sanity/types'
 import React, {useCallback, useEffect, useState} from 'react'
-import {TimeAgo} from '../components'
 import {useDocumentPane} from '../panes/document/useDocumentPane'
 import {
   DocumentActionComponent,
@@ -11,6 +10,7 @@ import {
   useDocumentPairPermissions,
   useEditState,
   useSyncState,
+  useTimeAgo,
   useValidationStatus,
 } from 'sanity'
 
@@ -28,9 +28,7 @@ function getDisabledReason(
   if (reason === 'ALREADY_PUBLISHED' && publishedAt) {
     return (
       <>
-        <span>
-          Published <TimeAgo time={publishedAt} />
-        </span>
+        <span>Published {publishedAt}</span>
       </>
     )
   }
@@ -63,9 +61,14 @@ export const PublishAction: DocumentActionComponent = (props) => {
 
   const currentUser = useCurrentUser()
 
+  const lastPublishedTimeAgo = useTimeAgo(published?._updatedAt || '', {
+    minimal: true,
+    agoSuffix: true,
+  })
+
   // eslint-disable-next-line no-nested-ternary
   const title = publish.disabled
-    ? getDisabledReason(publish.disabled, (published || {})._updatedAt) || ''
+    ? getDisabledReason(publish.disabled, lastPublishedTimeAgo) || ''
     : hasValidationErrors
     ? 'There are validation errors that need to be fixed before this document can be published'
     : ''