feat(releases): sorting release overview table (#7159)

* feat(releases): sorting releases table with new Table component

* fix(releases): fixing sanity require for DocumentPerspectiveMenu.test

* refactor(releases): clarifying generic names; minor tidies to naming

* refactor(releases): default table data type of unknown; rename of some variables; improved types for TableProvider

* refactor(releases): default table data type of unknown; rename of some variables; improved types for TableProvider

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

@@ -0,0 +1,34 @@
+import {createContext, useContext} from 'react'
+
+/**
+ * @internal
+ */
+export interface TableContextValue {
+  searchTerm: string | null
+  setSearchTerm: (searchTerm: string) => void
+  sort: {column: string; direction: 'asc' | 'desc'} | null
+  setSearchColumn: (column: string) => void
+}
+
+const DEFAULT_TABLE_CONTEXT: TableContextValue = {
+  searchTerm: null,
+  setSearchTerm: () => null,
+  sort: null,
+  setSearchColumn: () => null,
+}
+
+/**
+ * @internal
+ */
+export const TableContext = createContext<TableContextValue | null>(null)
+
+/**
+ * @internal
+ */
+export const useTableContext = (): TableContextValue => {
+  const context = useContext(TableContext)
+  if (!context) {
+    throw new Error('useTableContext must be used within a TableProvider')
+  }
+  return context || DEFAULT_TABLE_CONTEXT
+}

packages/sanity/src/_singletons/index.ts

@@ -67,3 +67,4 @@ export * from './context/WorkspaceContext'
 export * from './context/WorkspacesContext'
 export * from './context/ZIndexContext'
 export * from './core/releases/BundlesMetadataContext'
+export * from './core/releases/ReleasesTableContext'

packages/sanity/src/core/bundles/components/BundleBadge.tsx

@@ -1,5 +1,5 @@
-import {hues} from '@sanity/color'
-import {ChevronDownIcon, Icon} from '@sanity/icons'
+import {type ColorHueKey, hues} from '@sanity/color'
+import {ChevronDownIcon, Icon, type IconSymbol} from '@sanity/icons'
 // eslint-disable-next-line camelcase
 import {Box, Flex, rgba, Text, useTheme_v2} from '@sanity/ui'
 import {type CSSProperties} from 'react'
@@ -10,7 +10,15 @@ import {type BundleDocument} from '../../store/bundles/types'
  * @internal
  */
 export function BundleBadge(
-  props: Partial<BundleDocument> & {openButton?: boolean; padding?: number; title?: string},
+  props: Partial<
+    BundleDocument & {
+      icon: IconSymbol
+      hue: ColorHueKey
+      openButton: boolean
+      padding: number
+      title: string
+    }
+  >,
 ): JSX.Element {
   const {hue = 'gray', icon, openButton, padding = 3, title} = props
   const {color} = useTheme_v2()

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

@@ -98,6 +98,7 @@ export const BundleMenuButton = ({bundle, documentCount}: Props) => {
           padding={bundleHasDocuments}
           footer={{
             confirmButton: {
+              text: 'Delete',
               tone: 'default',
               onClick: handleOnDeleteBundle,
               loading: discardStatus === 'discarding',

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

@@ -116,7 +116,7 @@ describe('BundleMenuButton', () => {
     screen.getByText('This will also delete 2 document versions', {exact: false})
 
     await act(() => {
-      fireEvent.click(screen.getByText('Confirm'))
+      fireEvent.click(screen.getByText('Delete'))
     })
 
     expect(useBundleOperations().deleteBundle).toHaveBeenCalledWith(activeBundle)
@@ -149,7 +149,7 @@ describe('BundleMenuButton', () => {
     expect(screen.queryByTestId('confirm-delete-body')).toBeNull()
 
     await act(() => {
-      fireEvent.click(screen.getByText('Confirm'))
+      fireEvent.click(screen.getByText('Delete'))
     })
 
     expect(useBundleOperations().deleteBundle).toHaveBeenCalledWith(activeEmptyBundle)