From 47e6dda89951843071a4953f2727b00a0bcea527 Mon Sep 17 00:00:00 2001
From: Pedro Bonamin <pedrobonamin@gmail.com>
Date: Mon, 8 Jul 2024 15:42:23 +0200
Subject: [PATCH] feat(corel): releases DocumentRow updates

---
 .../releases/tool/detail/ReleaseOverview.tsx  | 48 ++++++----
 .../detail/documentTable/DocumentHeader.tsx   | 12 +--
 .../tool/detail/documentTable/DocumentRow.tsx | 92 ++++++++-----------
 .../detail/documentTable/DocumentTable.tsx    |  3 +-
 4 files changed, 77 insertions(+), 78 deletions(-)

diff --git a/packages/sanity/src/core/releases/tool/detail/ReleaseOverview.tsx b/packages/sanity/src/core/releases/tool/detail/ReleaseOverview.tsx
index 0491ad25ba12..785c9f3d57cc 100644
--- a/packages/sanity/src/core/releases/tool/detail/ReleaseOverview.tsx
+++ b/packages/sanity/src/core/releases/tool/detail/ReleaseOverview.tsx
@@ -1,10 +1,13 @@
 import {DocumentsIcon} from '@sanity/icons'
+import {type SanityDocument} from '@sanity/types'
 import {AvatarStack, Card, Flex, Heading, Stack, Text, useToast} from '@sanity/ui'
 import {useCallback, useState} from 'react'
-import {type SanityDocument, useAddonDataset, UserAvatar, useRelativeTime} from 'sanity'
 
 import {BundleIconEditorPicker} from '../../../bundles/components/dialog/BundleIconEditorPicker'
+import {RelativeTime} from '../../../components/RelativeTime'
+import {UserAvatar} from '../../../components/userAvatar/UserAvatar'
 import {type BundleDocument} from '../../../store/bundles/types'
+import {useAddonDataset} from '../../../studio/addonDataset/useAddonDataset'
 import {Chip} from '../../components/Chip'
 import {DocumentTable} from './documentTable'
 
@@ -25,30 +28,29 @@ export function ReleaseOverview(props: {documents: SanityDocument[]; release: Bu
   const toast = useToast()
   const handleIconValueChange = useCallback(
     async (value: {hue: BundleDocument['hue']; icon: BundleDocument['icon']}) => {
-      setIconValue(value)
-      if (client) {
-        try {
-          await client?.patch(release._id).set(value).commit()
-        } catch (e) {
-          toast.push({
-            closable: true,
-            status: 'error',
-            title: 'Failed to save changes',
-          })
-        }
-      } else {
+      if (!client) {
         toast.push({
           closable: true,
           status: 'error',
           title: 'Failed to save changes',
           description: 'AddonDataset client not found',
         })
+        return
+      }
+
+      setIconValue(value)
+      try {
+        await client?.patch(release._id).set(value).commit()
+      } catch (e) {
+        toast.push({
+          closable: true,
+          status: 'error',
+          title: 'Failed to save changes',
+        })
       }
     },
     [client, release._id, toast],
   )
-  const relativeCreatedAt = useRelativeTime(release._createdAt)
-  const relativePublishedAt = useRelativeTime(release.publishedAt || '')
 
   return (
     <Stack paddingX={4} space={5}>
@@ -81,7 +83,11 @@ export function ReleaseOverview(props: {documents: SanityDocument[]; release: Bu
             {/* Created */}
             <Chip
               avatar={<UserAvatar size={0} user={release.authorId} />}
-              text={`Created ${relativeCreatedAt}`}
+              text={
+                <span>
+                  Created <RelativeTime time={release._createdAt} useTemporalPhrase />
+                </span>
+              }
             />
 
             {/* Published */}
@@ -90,7 +96,15 @@ export function ReleaseOverview(props: {documents: SanityDocument[]; release: Bu
                 avatar={
                   release.publishedBy ? <UserAvatar size={0} user={release.publishedBy} /> : null
                 }
-                text={release.publishedAt ? `Published ${relativePublishedAt}` : 'Not published'}
+                text={
+                  release.publishedAt ? (
+                    <span>
+                      Published <RelativeTime time={release.publishedAt} useTemporalPhrase />
+                    </span>
+                  ) : (
+                    'Not published'
+                  )
+                }
               />
             )}
 
diff --git a/packages/sanity/src/core/releases/tool/detail/documentTable/DocumentHeader.tsx b/packages/sanity/src/core/releases/tool/detail/documentTable/DocumentHeader.tsx
index ed31d10b330d..0ba930892d23 100644
--- a/packages/sanity/src/core/releases/tool/detail/documentTable/DocumentHeader.tsx
+++ b/packages/sanity/src/core/releases/tool/detail/documentTable/DocumentHeader.tsx
@@ -27,7 +27,7 @@ export function DocumentHeader(props: {
         </Stack>
 
         {/* Created */}
-        <Flex paddingY={3} sizing="border" style={{width: 100}}>
+        <Flex paddingY={3} sizing="border" style={{width: 130}}>
           <Button
             iconRight={sort.property === '_createdAt' ? sortIcon : undefined}
             mode="bleed"
@@ -48,7 +48,7 @@ export function DocumentHeader(props: {
         </Flex>
 
         {/* Updated */}
-        <Flex paddingY={3} sizing="border" style={{width: 100}}>
+        <Flex paddingY={3} sizing="border" style={{width: 130}}>
           <Button
             iconRight={sort.property === '_updatedAt' ? sortIcon : undefined}
             mode="bleed"
@@ -69,7 +69,7 @@ export function DocumentHeader(props: {
         </Flex>
 
         {/* Published */}
-        <Flex paddingY={3} sizing="border" style={{width: 100}}>
+        <Flex paddingY={3} sizing="border" style={{width: 130}}>
           <Button
             iconRight={sort.property === '_publishedAt' ? sortIcon : undefined}
             mode="bleed"
@@ -107,14 +107,14 @@ export function DocumentHeader(props: {
           </Box>
         </Flex>
 
-        {/* Actions */}
-        <Flex paddingY={3} sizing="border" style={{width: 49}}>
+        {/* Actions is empty - don't render yet */}
+        {/* <Flex paddingY={3} sizing="border" style={{width: 49}}>
           <Box padding={2}>
             <Text muted size={1} weight="medium">
               &nbsp;
             </Text>
           </Box>
-        </Flex>
+        </Flex> */}
       </Flex>
     </Card>
   )
diff --git a/packages/sanity/src/core/releases/tool/detail/documentTable/DocumentRow.tsx b/packages/sanity/src/core/releases/tool/detail/documentTable/DocumentRow.tsx
index bbef31c9aff7..cc24153cb288 100644
--- a/packages/sanity/src/core/releases/tool/detail/documentTable/DocumentRow.tsx
+++ b/packages/sanity/src/core/releases/tool/detail/documentTable/DocumentRow.tsx
@@ -1,5 +1,6 @@
-import {CheckmarkCircleIcon, EllipsisHorizontalIcon, EmptyIcon, Progress50Icon} from '@sanity/icons'
-import {AvatarStack, Box, Button, Card, Flex, Text} from '@sanity/ui'
+import {CheckmarkCircleIcon, EmptyIcon, Progress50Icon} from '@sanity/icons'
+import {type SanityDocument} from '@sanity/types'
+import {AvatarStack, Box, Card, Flex, Text} from '@sanity/ui'
 import {
   type Dispatch,
   type ForwardedRef,
@@ -56,15 +57,15 @@ const DocumentStatus = ({status}: {status: keyof typeof DOCUMENT_STATUS}) => {
     </Box>
   )
 }
+
 export function DocumentRow(props: {
-  documentId: string
-  documentTypeName: string
-  // releaseName: string
+  document: SanityDocument
   release: BundleDocument
   setCollaborators: Dispatch<SetStateAction<string[]>>
 }) {
-  const {documentId, documentTypeName, release, setCollaborators} = props
-
+  const {document, release, setCollaborators} = props
+  const documentId = document._id
+  const documentTypeName = document._type
   const schema = useSchema()
   const schemaType = schema.get(documentTypeName) as SchemaType | undefined
   if (!schemaType) {
@@ -81,20 +82,13 @@ export function DocumentRow(props: {
     [documentId, documentPreviewStore, perspective, schemaType],
   )
 
-  const {
-    draft,
-    published,
-    version = {},
-    isLoading,
-  } = useObservable(previewStateObservable, {
+  const {draft, published, version, isLoading} = useObservable(previewStateObservable, {
     draft: null,
     isLoading: true,
     published: null,
   })
 
-  const value = version ?? draft ?? published
-
-  const history = useVersionHistory(documentId, value?._rev)
+  const history = useVersionHistory(documentId, document?._rev)
 
   useEffect(() => {
     setCollaborators((pre) => Array.from(new Set([...pre, ...history.editors])))
@@ -120,20 +114,12 @@ export function DocumentRow(props: {
       }),
     [documentId, documentTypeName, release.name],
   )
-  if (!value) {
-    return (
-      <Card border radius={3} style={{height: '57px'}} paddingX={3}>
-        <Flex align="center" style={{height: '100%'}}>
-          <Text muted>Loading...</Text>
-        </Flex>
-      </Card>
-    )
-  }
+
   const status =
     // eslint-disable-next-line no-nested-ternary
-    value._state === 'ready'
+    document._state === 'ready'
       ? 'ready'
-      : value._updatedAt === value._createdAt
+      : document._updatedAt === document._createdAt
         ? 'noChanges'
         : 'edited'
 
@@ -142,57 +128,56 @@ export function DocumentRow(props: {
       <Flex style={{margin: -1}}>
         <Box flex={1} padding={1}>
           <Card as={LinkComponent} radius={2} data-as="a">
-            {schemaType && (
-              // eslint-disable-next-line react/jsx-no-undef
-              <SanityDefaultPreview
-                {...getPreviewValueWithFallback({
-                  value,
-                  draft,
-                  published,
-                  version,
-                  perspective,
-                })}
-              />
-            )}
+            <SanityDefaultPreview
+              {...getPreviewValueWithFallback({
+                value: document,
+                draft,
+                published,
+                version,
+                perspective,
+              })}
+              isPlaceholder={isLoading}
+            />
           </Card>
         </Box>
 
         {/* Created */}
-        <Flex align="center" paddingX={2} paddingY={3} sizing="border" style={{width: 100}}>
-          {value._createdAt && (
+        <Flex align="center" paddingX={2} paddingY={3} sizing="border" style={{width: 130}}>
+          {document._createdAt && (
             <Flex align="center" gap={2}>
               {history.createdBy && <UserAvatar size={0} user={history.createdBy} />}
               <Text muted size={1}>
-                <RelativeTime time={value._createdAt} />
+                <RelativeTime time={document._createdAt} useTemporalPhrase minimal />
               </Text>
             </Flex>
           )}
         </Flex>
 
         {/* Updated */}
-        <Flex align="center" paddingX={2} paddingY={3} sizing="border" style={{width: 100}}>
-          {value._updatedAt && (
+        <Flex align="center" paddingX={2} paddingY={3} sizing="border" style={{width: 130}}>
+          {document._updatedAt && (
             <Flex align="center" gap={2}>
               {history.lastEditedBy && <UserAvatar size={0} user={history.lastEditedBy} />}
               <Text muted size={1}>
-                <RelativeTime time={value._updatedAt} />
+                <RelativeTime time={document._updatedAt} useTemporalPhrase minimal />
               </Text>
             </Flex>
           )}
         </Flex>
 
         {/* Published */}
-        <Flex align="center" paddingX={2} paddingY={3} sizing="border" style={{width: 100}}>
-          {value._publishedAt && (
+        <Flex align="center" paddingX={2} paddingY={3} sizing="border" style={{width: 130}}>
+          {/* TODO: How to get the publishedAt date from the document, consider history API */}
+          {/* {document._publishedAt && (
             <Flex align="center" gap={2}>
-              <UserAvatar size={0} user={value._publishedBy} />
+              <UserAvatar size={0} user={document._publishedBy} />
               <Text muted size={1}>
-                <RelativeTime time={value._publishedAt} />
+                <RelativeTime time={document._publishedAt} />
               </Text>
             </Flex>
-          )}
+          )} */}
 
-          {!value._publishedAt && (
+          {!document._publishedAt && (
             <Text muted size={1}>
               &nbsp;
             </Text>
@@ -211,14 +196,15 @@ export function DocumentRow(props: {
           <DocumentStatus status={status} />
         </Flex>
 
-        <Flex align="center" flex="none" padding={3}>
+        {/* Actions is empty - don't render yet */}
+        {/* <Flex align="center" flex="none" padding={3}>
           <Button
             disabled={Boolean(release?.archived || release?.publishedAt)}
             icon={EllipsisHorizontalIcon}
             mode="bleed"
             padding={2}
           />
-        </Flex>
+        </Flex> */}
       </Flex>
     </Card>
   )
diff --git a/packages/sanity/src/core/releases/tool/detail/documentTable/DocumentTable.tsx b/packages/sanity/src/core/releases/tool/detail/documentTable/DocumentTable.tsx
index 0c874d95ade6..82dac811fd73 100644
--- a/packages/sanity/src/core/releases/tool/detail/documentTable/DocumentTable.tsx
+++ b/packages/sanity/src/core/releases/tool/detail/documentTable/DocumentTable.tsx
@@ -57,8 +57,7 @@ export function DocumentTable(props: {
       <RowStack>
         {sortedDocuments.map((d) => (
           <DocumentRow
-            documentId={d._id}
-            documentTypeName={d._type}
+            document={d}
             key={d._id}
             release={release}
             setCollaborators={setCollaborators}