feat(releases): last edited and document count in bundle

packages/sanity/src/_singletons/core/releases/BundlesMetadataContext.ts

@@ -0,0 +1,18 @@
+import {createContext} from 'react'
+
+import type {MetadataWrapper} from '../../../core/store/bundles/createBundlesMetadataAggregator'
+
+/**
+ * @internal
+ */
+export interface BundlesMetadataContextValue {
+  state: MetadataWrapper
+  addBundleSlugsToListener: (slugs: string[]) => void
+  removeBundleSlugsFromListener: (slugs: string[]) => void
+}
+
+/**
+ * @internal
+ * @hidden
+ */
+export const BundlesMetadataContext = createContext<BundlesMetadataContextValue | null>(null)

packages/sanity/src/_singletons/index.ts

@@ -25,6 +25,7 @@ export * from './core/form/studio/TreeEditingEnabledContext'
 export * from './core/form/studio/ValidationContext'
 export * from './core/i18n/LocaleContext'
 export * from './core/presence/FormFieldPresenceContext'
+export * from './core/releases/BundlesMetadataContext'
 export * from './core/schedulePublishing/DocumentActionPropsContext'
 export * from './core/schedulePublishing/tool/ScheduledPublishingEnabledContext'
 export * from './core/schedulePublishing/tool/SchedulePublishingUpsellContext'

packages/sanity/src/core/releases/components/BundleMenuButton/BundleMenuButton.tsx

@@ -9,9 +9,10 @@ import {useBundleOperations} from '../../../store/bundles/useBundleOperations'
 
 type Props = {
   bundle?: BundleDocument
+  documentCount: number
 }
 
-export const BundleMenuButton = ({bundle}: Props) => {
+export const BundleMenuButton = ({bundle, documentCount}: Props) => {
   const {deleteBundle, updateBundle} = useBundleOperations()
   const router = useRouter()
   const isBundleArchived = !!bundle?.archivedAt
@@ -56,8 +57,7 @@ export const BundleMenuButton = ({bundle}: Props) => {
     setIsPerformingOperation(false)
   }
 
-  // TODO: Replace this with the count once it's available. Wait for @jordanl17 change on that.
-  const count = 2
+  const bundleHasDocuments = !!documentCount
 
   return (
     <>
@@ -92,8 +92,10 @@ export const BundleMenuButton = ({bundle}: Props) => {
       {showDiscardDialog && (
         <Dialog
           id="discard-version-dialog"
-          header={`Are you sure you want to delete the ${bundle?.title} release?`}
+          header={`Are you sure you want to delete the '${bundle?.title}' release?`}
           onClose={() => setShowDiscardDialog(false)}
+          // remove body padding if no documents in release
+          padding={bundleHasDocuments}
           footer={{
             confirmButton: {
               tone: 'default',
@@ -103,9 +105,11 @@ export const BundleMenuButton = ({bundle}: Props) => {
             },
           }}
         >
-          <Text muted size={1}>
-            This will also delete {count} document version{count > 1 ? 's' : ''}.
-          </Text>
+          {bundleHasDocuments && (
+            <Text data-testid="confirm-delete-body" muted size={1}>
+              This will also delete {documentCount} document version{documentCount > 1 ? 's' : ''}.
+            </Text>
+          )}
         </Dialog>
       )}
     </>

packages/sanity/src/core/releases/components/BundleMenuButton/__tests__/BundleMenuButton.test.tsx

@@ -1,4 +1,4 @@
-import {describe, expect, jest, test} from '@jest/globals'
+import {beforeEach, describe, expect, jest, test} from '@jest/globals'
 import {fireEvent, render, screen} from '@testing-library/react'
 import {act} from 'react'
 import {useRouter} from 'sanity/router'
@@ -21,14 +21,18 @@ jest.mock('sanity/router', () => ({
   useRouter: jest.fn().mockReturnValue({state: {}, navigate: jest.fn()}),
 }))
 
-const renderTest = async (bundle: BundleDocument) => {
+const renderTest = async (bundle: BundleDocument, documentCount: number = 2) => {
   const wrapper = await createTestProvider({
     resources: [releasesUsEnglishLocaleBundle],
   })
-  return render(<BundleMenuButton bundle={bundle} />, {wrapper})
+  return render(<BundleMenuButton bundle={bundle} documentCount={documentCount} />, {wrapper})
 }
 
 describe('BundleMenuButton', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
   test('will archive an unarchived bundle', async () => {
     const activeBundle: BundleDocument = {
       _id: 'activeBundle',
@@ -40,6 +44,8 @@ describe('BundleMenuButton', () => {
       _createdAt: new Date().toISOString(),
       _updatedAt: new Date().toISOString(),
       _rev: '',
+      hue: 'gray',
+      icon: 'cube',
     }
 
     await renderTest(activeBundle)
@@ -67,6 +73,8 @@ describe('BundleMenuButton', () => {
       _createdAt: new Date().toISOString(),
       _updatedAt: new Date().toISOString(),
       _rev: '',
+      hue: 'gray',
+      icon: 'cube',
     }
     await renderTest(archivedBundle)
 
@@ -82,7 +90,7 @@ describe('BundleMenuButton', () => {
     })
   })
 
-  test('will delete a bundle', async () => {
+  test('will delete a bundle with documents', async () => {
     const activeBundle: BundleDocument = {
       _id: 'activeBundle',
       _type: 'bundle',
@@ -93,6 +101,8 @@ describe('BundleMenuButton', () => {
       _createdAt: new Date().toISOString(),
       _updatedAt: new Date().toISOString(),
       _rev: '',
+      hue: 'gray',
+      icon: 'cube',
     }
     await renderTest(activeBundle)
 
@@ -102,6 +112,8 @@ describe('BundleMenuButton', () => {
       fireEvent.click(screen.getByText('Delete'))
     })
     expect(useBundleOperations().deleteBundle).not.toHaveBeenCalled()
+    // TODO: remove not exact once i18n used for strings
+    screen.getByText('This will also delete 2 document versions', {exact: false})
 
     await act(() => {
       fireEvent.click(screen.getByText('Confirm'))
@@ -110,4 +122,37 @@ describe('BundleMenuButton', () => {
     expect(useBundleOperations().deleteBundle).toHaveBeenCalledWith(activeBundle)
     expect(useRouter().navigate).not.toHaveBeenCalled()
   })
+
+  test('will delete a bundle with no documents', async () => {
+    const activeEmptyBundle: BundleDocument = {
+      _id: 'activeEmptyBundle',
+      _type: 'bundle',
+      archivedAt: new Date().toISOString(),
+      title: 'activeEmptyBundle',
+      name: 'activeEmptyBundle',
+      authorId: 'author',
+      _createdAt: new Date().toISOString(),
+      _updatedAt: new Date().toISOString(),
+      _rev: '',
+      hue: 'gray',
+      icon: 'cube',
+    }
+    await renderTest(activeEmptyBundle, 0)
+
+    fireEvent.click(screen.getByLabelText('Release menu'))
+
+    await act(() => {
+      fireEvent.click(screen.getByText('Delete'))
+    })
+    expect(useBundleOperations().deleteBundle).not.toHaveBeenCalled()
+    // confirm dialog body is hidden when no documents in bundle
+    expect(screen.queryByTestId('confirm-delete-body')).toBeNull()
+
+    await act(() => {
+      fireEvent.click(screen.getByText('Confirm'))
+    })
+
+    expect(useBundleOperations().deleteBundle).toHaveBeenCalledWith(activeEmptyBundle)
+    expect(useRouter().navigate).not.toHaveBeenCalled()
+  })
 })

packages/sanity/src/core/releases/components/BundlesTable/BundleHeader.tsx → packages/sanity/src/core/releases/components/ReleasesTable/ReleaseHeader.tsx

@@ -1,16 +1,16 @@
 import {SearchIcon} from '@sanity/icons'
-import {Button, Card, Flex, Stack, TextInput} from '@sanity/ui'
+import {Box, Button, Card, Flex, Stack, Text, TextInput} from '@sanity/ui'
 
 /**
  * @internal
  */
-export interface BundleHeaderProps {
+export interface ReleaseHeaderProps {
   searchDisabled?: boolean
   searchTerm?: string
   setSearchTerm: (value?: string) => void
 }
 
-export function BundleHeader({searchDisabled, searchTerm, setSearchTerm}: BundleHeaderProps) {
+export function ReleaseHeader({searchDisabled, searchTerm, setSearchTerm}: ReleaseHeaderProps) {
   return (
     <Card as="thead" radius={3}>
       <Flex as="tr">
@@ -29,6 +29,22 @@ export function BundleHeader({searchDisabled, searchTerm, setSearchTerm}: Bundle
             clearButton={!!searchTerm}
           />
         </Stack>
+        {/* Number of documents */}
+        <Flex as="th" paddingY={3} sizing="border" style={{width: 90}}>
+          <Box padding={2}>
+            <Text muted size={1} weight="medium">
+              Documents
+            </Text>
+          </Box>
+        </Flex>
+        {/* Created */}
+        <Flex as="th" paddingY={3} sizing="border" style={{width: 120}}>
+          <Button mode="bleed" padding={2} radius={3} space={1} text="Created" />
+        </Flex>
+        {/* Edited */}
+        <Flex as="th" paddingY={3} sizing="border" style={{width: 100}}>
+          <Button mode="bleed" padding={2} radius={3} space={1} text="Edited" />
+        </Flex>
         {/* Published */}
         <Flex
           as="th"

packages/sanity/src/core/releases/components/BundlesTable/BundleRow.tsx → packages/sanity/src/core/releases/components/ReleasesTable/ReleaseRow.tsx

@@ -2,15 +2,16 @@ import {Box, Card, Flex, Stack, Text} from '@sanity/ui'
 import {useRouter} from 'sanity/router'
 
 import {BundleBadge} from '../../../bundles/components/BundleBadge'
-import {RelativeTime} from '../../../components'
-import {type BundleDocument} from '../../../store/bundles/types'
+import {RelativeTime, UserAvatar} from '../../../components'
 import {BundleMenuButton} from '../BundleMenuButton/BundleMenuButton'
+import {type TableBundle} from './ReleasesTable'
 
-type Props = {
-  bundle: BundleDocument
+type ReleaseRowProps = {
+  bundle: TableBundle
 }
 
-export function BundleRow({bundle}: Props) {
+export function ReleaseRow({bundle}: ReleaseRowProps) {
+  const {documentsMetadata} = bundle
   const router = useRouter()
 
   return (
@@ -38,6 +39,43 @@ export function BundleRow({bundle}: Props) {
           </Flex>
         </Card>
       </Box>
+      {/* # of documents */}
+      <Flex as="td" align="center" paddingX={2} paddingY={3} sizing="border" style={{width: 90}}>
+        <Text muted size={1}>
+          {documentsMetadata.documentCount}
+        </Text>
+      </Flex>
+      {/* Created */}
+      <Flex
+        as="td"
+        align="center"
+        gap={2}
+        paddingX={2}
+        paddingY={3}
+        sizing="border"
+        style={{width: 120}}
+      >
+        {bundle.authorId && <UserAvatar size={0} user={bundle.authorId} />}
+        <Text muted size={1}>
+          <RelativeTime time={bundle._createdAt} useTemporalPhrase minimal />
+        </Text>
+      </Flex>
+      {/* Edited */}
+      <Flex
+        as="td"
+        align="center"
+        gap={2}
+        paddingX={2}
+        paddingY={3}
+        sizing="border"
+        style={{width: 100}}
+      >
+        {documentsMetadata.updatedAt && (
+          <Text muted size={1}>
+            <RelativeTime time={documentsMetadata.updatedAt} useTemporalPhrase minimal />
+          </Text>
+        )}
+      </Flex>
       {/* Published */}
       <Flex as="td" align="center" paddingX={2} paddingY={3} sizing="border" style={{width: 100}}>
         {!!bundle.publishedAt && (
@@ -48,7 +86,7 @@ export function BundleRow({bundle}: Props) {
       </Flex>
       {/* Actions */}
       <Flex as="td" align="center" flex="none" padding={3}>
-        <BundleMenuButton bundle={bundle} />
+        <BundleMenuButton bundle={bundle} documentCount={bundle.documentsMetadata.documentCount} />
       </Flex>
     </Card>
   )

packages/sanity/src/core/releases/components/BundlesTable/BundlesTable.tsx → packages/sanity/src/core/releases/components/ReleasesTable/ReleasesTable.tsx

@@ -3,8 +3,9 @@ import {useMemo} from 'react'
 import {styled} from 'styled-components'
 
 import {type BundleDocument} from '../../../store/bundles/types'
-import {BundleHeader, type BundleHeaderProps} from './BundleHeader'
-import {BundleRow} from './BundleRow'
+import {type BundlesMetadata} from '../../tool/useBundlesMetadata'
+import {ReleaseHeader, type ReleaseHeaderProps} from './ReleaseHeader'
+import {ReleaseRow} from './ReleaseRow'
 
 const RowStack = styled(Stack)({
   '& > *:not(:first-child)': {
@@ -19,11 +20,15 @@ const RowStack = styled(Stack)({
   },
 })
 
-interface BundlesTableProps extends Omit<BundleHeaderProps, 'searchDisabled'> {
-  bundles: BundleDocument[]
+export interface TableBundle extends BundleDocument {
+  documentsMetadata: BundlesMetadata
 }
 
-export function BundlesTable({bundles, searchTerm, setSearchTerm}: BundlesTableProps) {
+interface ReleasesTableProps extends Omit<ReleaseHeaderProps, 'searchDisabled'> {
+  bundles: TableBundle[]
+}
+
+export function ReleasesTable({bundles, searchTerm, setSearchTerm}: ReleasesTableProps) {
   const tableContent = useMemo(() => {
     if (bundles.length === 0) {
       return (
@@ -44,12 +49,12 @@ export function BundlesTable({bundles, searchTerm, setSearchTerm}: BundlesTableP
       )
     }
 
-    return bundles.map((bundle) => <BundleRow key={bundle.name} bundle={bundle} />)
+    return bundles.map((bundle) => <ReleaseRow key={bundle.name} bundle={bundle} />)
   }, [bundles])
 
   return (
     <Stack as="table" space={1}>
-      <BundleHeader
+      <ReleaseHeader
         searchDisabled={!searchTerm && !bundles.length}
         searchTerm={searchTerm}
         setSearchTerm={setSearchTerm}