Merge branch 'corel' into fix-ReleaseSummary-test

packages/sanity/src/core/releases/store/createReleaseStore.ts

@@ -10,13 +10,11 @@ import {
   merge,
   type Observable,
   of,
-  retry,
   scan,
   shareReplay,
   Subject,
   switchMap,
   tap,
-  timeout,
 } from 'rxjs'
 import {map, mergeMap, startWith, toArray} from 'rxjs/operators'
 
@@ -129,12 +127,6 @@ export function createReleaseStore(context: {
     tap(() => fetchPending$.next(true)),
     concatWith(
       listenQuery(client, QUERY, {}, {tag: 'releases.listen'}).pipe(
-        timeout(10_000), // 10s timeout
-        retry({
-          count: 2,
-          delay: 1_000,
-          resetOnSuccess: true,
-        }),
         tap(() => fetchPending$.next(false)),
         map((releases) =>
           releases.map(

packages/sanity/src/core/releases/tool/components/Table/Table.tsx

@@ -5,6 +5,7 @@ import {
   useVirtualizer,
   type VirtualItem,
 } from '@tanstack/react-virtual'
+import {isValid} from 'date-fns'
 import {get} from 'lodash'
 import {
   type CSSProperties,
@@ -102,22 +103,32 @@ const TableInner = <TableData, AdditionalRowTableData>({
 
     const sortColumn = columnDefs.find((column) => column.id === sort.column)
     return [...filteredResult].sort((a, b) => {
-      // TODO: Update this tos support sorting not only by date but also by string
-      const parseDate = (datum: TableData) => {
-        const transformedSortValue = sortColumn?.sortTransform?.(
-          datum as RowDatum<TableData, AdditionalRowTableData>,
-        )
-        if (transformedSortValue !== undefined) return transformedSortValue
+      let order: number
 
-        const sortValue = get(datum, sort.column)
+      const [aValue, bValue]: (number | string)[] = [a, b].map(
+        (sortValue) =>
+          sortColumn?.sortTransform?.(sortValue as RowDatum<TableData, AdditionalRowTableData>) ??
+          get(sortValue, sort.column),
+      )
+      if (
+        typeof aValue === 'string' &&
+        typeof bValue === 'string' &&
+        !isValid(aValue) &&
+        !isValid(bValue)
+      ) {
+        order = aValue.toLowerCase().localeCompare(bValue.toLowerCase())
+      } else {
+        const parseDate = (datum: number | string) => {
+          if (sortColumn?.sortTransform && typeof datum === 'number') return datum
 
-        return typeof sortValue === 'string' ? Date.parse(sortValue) : 0
-      }
+          return typeof datum === 'string' ? Date.parse(datum) : 0
+        }
+
+        const [aDate, bDate] = [aValue, bValue].map(parseDate)
 
-      const aDate = parseDate(a)
-      const bDate = parseDate(b)
+        order = aDate - bDate
+      }
 
-      const order = aDate - bDate
       if (sort.direction === 'asc') return order
       return -order
     })
@@ -138,16 +149,14 @@ const TableInner = <TableData, AdditionalRowTableData>({
       sorting: false,
       width: 50,
       header: ({headerProps: {id}}) => (
-        <Flex as="th" id={id} paddingY={3} sizing="border" style={{width: 50}}>
-          <Box padding={2}>
-            <Text muted size={1} weight="medium">
-              &nbsp;
-            </Text>
-          </Box>
+        <Flex as="th" id={id} paddingY={3} paddingX={3} sizing="border" style={{width: '50px'}}>
+          <Text muted size={1} weight="medium">
+            &nbsp;
+          </Text>
         </Flex>
       ),
       cell: ({datum, cellProps: {id}}) => (
-        <Flex as="td" id={id} align="center" flex="none" padding={3}>
+        <Flex as="td" id={id} align="center" flex="none" padding={3} style={{width: '25px'}}>
           {rowActions?.({datum}) || <Box style={{width: '25px'}} />}
         </Flex>
       ),

packages/sanity/src/core/releases/tool/components/Table/TableHeader.tsx

@@ -55,7 +55,7 @@ const TableHeaderSearch = ({
   const {setSearchTerm, searchTerm} = useTableContext()
 
   return (
-    <Stack {...headerProps} flex={1} paddingY={2} paddingRight={3}>
+    <Stack {...headerProps} flex={1} paddingY={2} paddingRight={3} sizing="border">
       <TextInput
         border={false}
         fontSize={1}

packages/sanity/src/core/releases/tool/detail/ReleaseDashboardHeader.tsx

@@ -23,6 +23,7 @@ export function ReleaseDashboardHeader(props: {
   const {inspector, release, setInspector} = props
   const title = release.metadata.title
   const {t} = useTranslation(releasesLocaleNamespace)
+  const {t: tCore} = useTranslation()
   const router = useRouter()
   const handleNavigateToReleasesList = useCallback(() => {
     router.navigate({})
@@ -60,9 +61,10 @@ export function ReleaseDashboardHeader(props: {
           <Button
             mode="bleed"
             onClick={handleTitleClick}
-            text={title}
+            text={title || tCore('release.placeholder-untitled-release')}
             textWeight="semibold"
             padding={2}
+            style={title ? undefined : {opacity: 0.5}}
           />
         </Breadcrumbs>
       </Flex>

packages/sanity/src/core/releases/tool/detail/ReleaseSummary.tsx

@@ -84,18 +84,19 @@ export function ReleaseSummary(props: ReleaseSummaryProps) {
         scrollContainerRef={scrollContainerRef}
         defaultSort={{column: 'search', direction: 'asc'}}
       />
-      <Container width={3}>
-        <Card padding={3}>
-          <Button
-            icon={AddIcon}
-            mode="bleed"
-            onClick={() => setAddDocumentDialog(true)}
-            padding={2}
-            text={t('action.add-document')}
-          />
-        </Card>
-      </Container>
-
+      {release.state === 'active' && (
+        <Container width={3}>
+          <Card padding={3}>
+            <Button
+              icon={AddIcon}
+              mode="bleed"
+              onClick={() => setAddDocumentDialog(true)}
+              padding={2}
+              text={t('action.add-document')}
+            />
+          </Card>
+        </Container>
+      )}
       <AddDocumentSearch
         open={openAddDocumentDialog}
         onClose={closeAddDialog}

packages/sanity/src/core/releases/tool/overview/ReleasesOverview.tsx

@@ -1,7 +1,6 @@
 import {AddIcon, ChevronDownIcon, CloseIcon, EarthGlobeIcon} from '@sanity/icons'
 import {Box, type ButtonMode, Card, Container, Flex, Stack, Text} from '@sanity/ui'
 import {endOfDay, format, isSameDay, startOfDay} from 'date-fns'
-import {zonedTimeToUtc} from 'date-fns-tz'
 import {AnimatePresence, motion} from 'framer-motion'
 import {type MouseEventHandler, useCallback, useEffect, useMemo, useRef, useState} from 'react'
 import {type RouterContextValue, type SearchParam, useRouter} from 'sanity/router'
@@ -13,6 +12,7 @@ import {
   type CalendarProps,
 } from '../../../../ui-components/inputs/DateFilters/calendar/CalendarFilter'
 import {useTranslation} from '../../../i18n'
+import useDialogTimeZone from '../../../scheduledPublishing/hooks/useDialogTimeZone'
 import useTimeZone from '../../../scheduledPublishing/hooks/useTimeZone'
 import {CreateReleaseDialog} from '../../components/dialog/CreateReleaseDialog'
 import {usePerspective} from '../../hooks/usePerspective'
@@ -74,18 +74,22 @@ export interface TableRelease extends ReleaseDocument {
   isDeleted?: boolean
 }
 
-// TODO: use the selected timezone rather than client
-const getTimezoneAdjustedDateTimeRange = (date: Date) => {
-  const {timeZone} = Intl.DateTimeFormat().resolvedOptions()
+const useTimezoneAdjustedDateTimeRange = () => {
+  const {zoneDateToUtc} = useTimeZone()
 
-  return [startOfDay(date), endOfDay(date)].map((time) => zonedTimeToUtc(time, timeZone))
+  return useCallback(
+    (date: Date) => [startOfDay(date), endOfDay(date)].map(zoneDateToUtc),
+    [zoneDateToUtc],
+  )
 }
 
 const ReleaseCalendarDay: CalendarProps['renderCalendarDay'] = (props) => {
   const {data: releases} = useReleases()
+  const getTimezoneAdjustedDateTimeRange = useTimezoneAdjustedDateTimeRange()
+
   const {date} = props
 
-  const [startOfDayUTC, endOfDayUTC] = getTimezoneAdjustedDateTimeRange(date)
+  const [startOfDayForTimeZone, endOfDayForTimeZone] = getTimezoneAdjustedDateTimeRange(date)
 
   const dayHasReleases = releases?.some((release) => {
     const releasePublishAt = release.publishAt || release.metadata.intendedPublishAt
@@ -95,8 +99,8 @@ const ReleaseCalendarDay: CalendarProps['renderCalendarDay'] = (props) => {
 
     return (
       release.metadata.releaseType === 'scheduled' &&
-      publishDateUTC >= startOfDayUTC &&
-      publishDateUTC <= endOfDayUTC
+      publishDateUTC >= startOfDayForTimeZone &&
+      publishDateUTC <= endOfDayForTimeZone
     )
   })
 
@@ -135,8 +139,10 @@ export function ReleasesOverview() {
   const loadingTableData = loading || (!releasesMetadata && Boolean(releaseIds.length))
   const {t} = useTranslation(releasesLocaleNamespace)
   const {t: tCore} = useTranslation()
-  const {timeZone} = useTimeZone()
+  const {timeZone, utcToCurrentZoneDate} = useTimeZone()
   const {currentGlobalBundleId} = usePerspective()
+  const {DialogTimeZone, dialogProps, dialogTimeZoneShow} = useDialogTimeZone()
+  const getTimezoneAdjustedDateTimeRange = useTimezoneAdjustedDateTimeRange()
 
   const getRowProps = useCallback(
     (datum: TableRelease): Partial<TableRowProps> =>
@@ -179,11 +185,19 @@ export function ReleasesOverview() {
     [],
   )
 
-  const handleSelectFilterDate = useCallback((date?: Date) => {
-    setReleaseFilterDate((prevFilterDate) =>
-      prevFilterDate && date && isSameDay(prevFilterDate, date) ? undefined : date,
-    )
-  }, [])
+  const handleSelectFilterDate = useCallback(
+    (date?: Date) =>
+      setReleaseFilterDate((prevFilterDate) => {
+        if (!date) return undefined
+
+        const timeZoneAdjustedDate = utcToCurrentZoneDate(date)
+
+        return prevFilterDate && isSameDay(prevFilterDate, timeZoneAdjustedDate)
+          ? undefined
+          : timeZoneAdjustedDate
+      }),
+    [utcToCurrentZoneDate],
+  )
 
   const clearFilterDate = useCallback(() => {
     setReleaseFilterDate(undefined)
@@ -301,15 +315,22 @@ export function ReleasesOverview() {
   const filteredReleases = useMemo(() => {
     if (!releaseFilterDate) return releaseGroupMode === 'open' ? tableReleases : archivedReleases
 
-    const [startOfDayUTC, endOfDayUTC] = getTimezoneAdjustedDateTimeRange(releaseFilterDate)
+    const [startOfDayForTimeZone, endOfDayForTimeZone] =
+      getTimezoneAdjustedDateTimeRange(releaseFilterDate)
 
     return tableReleases.filter((release) => {
       if (!release.publishAt || release.metadata.releaseType !== 'scheduled') return false
 
       const publishDateUTC = new Date(release.publishAt)
-      return publishDateUTC >= startOfDayUTC && publishDateUTC <= endOfDayUTC
+      return publishDateUTC >= startOfDayForTimeZone && publishDateUTC <= endOfDayForTimeZone
     })
-  }, [releaseFilterDate, releaseGroupMode, tableReleases, archivedReleases])
+  }, [
+    releaseFilterDate,
+    releaseGroupMode,
+    tableReleases,
+    archivedReleases,
+    getTimezoneAdjustedDateTimeRange,
+  ])
 
   return (
     <Flex direction="row" flex={1} style={{height: '100%'}}>
@@ -347,7 +368,9 @@ export function ReleasesOverview() {
                   mode="bleed"
                   padding={2}
                   text={`${timeZone.abbreviation} (${timeZone.namePretty})`}
+                  onClick={dialogTimeZoneShow}
                 />
+                {DialogTimeZone && <DialogTimeZone {...dialogProps} />}
                 {loadingOrHasReleases && createReleaseButton}
               </Flex>
             </Flex>

packages/sanity/src/core/releases/tool/overview/ReleasesOverviewColumnDefs.tsx

@@ -2,12 +2,13 @@ import {LockIcon, PinFilledIcon, PinIcon} from '@sanity/icons'
 import {Box, Card, Flex, Stack, Text} from '@sanity/ui'
 import {format} from 'date-fns'
 import {type TFunction} from 'i18next'
-import {useCallback} from 'react'
+import {useCallback, useMemo} from 'react'
 import {useRouter} from 'sanity/router'
 
 import {Button, Tooltip} from '../../../../ui-components'
 import {RelativeTime} from '../../../components'
 import {Translate, useTranslation} from '../../../i18n'
+import useTimeZone, {getLocalTimeZone} from '../../../scheduledPublishing/hooks/useTimeZone'
 import {ReleaseAvatar} from '../../components/ReleaseAvatar'
 import {usePerspective} from '../../hooks/usePerspective'
 import {releasesLocaleNamespace} from '../../i18n'
@@ -22,9 +23,18 @@ import {type TableRelease} from './ReleasesOverview'
 
 const ReleaseTime = ({release}: {release: TableRelease}) => {
   const {t} = useTranslation()
+  const {timeZone, utcToCurrentZoneDate} = useTimeZone()
+  const {abbreviation: localeTimeZoneAbbreviation} = getLocalTimeZone()
+
   const {metadata} = release
 
-  const getTimeString = () => {
+  const getTimezoneAbbreviation = useCallback(
+    () =>
+      timeZone.abbreviation === localeTimeZoneAbbreviation ? '' : `(${timeZone.abbreviation})`,
+    [localeTimeZoneAbbreviation, timeZone.abbreviation],
+  )
+
+  const timeString = useMemo(() => {
     if (metadata.releaseType === 'asap') {
       return t('release.type.asap')
     }
@@ -34,12 +44,14 @@ const ReleaseTime = ({release}: {release: TableRelease}) => {
 
     const publishDate = getPublishDateFromRelease(release)
 
-    return publishDate ? format(new Date(publishDate), 'PPpp') : null
-  }
+    return publishDate
+      ? `${format(utcToCurrentZoneDate(publishDate), 'PPpp')} ${getTimezoneAbbreviation()}`
+      : null
+  }, [metadata.releaseType, release, utcToCurrentZoneDate, getTimezoneAbbreviation, t])
 
   return (
     <Text muted size={1}>
-      {getTimeString()}
+      {timeString}
     </Text>
   )
 }
@@ -75,7 +87,7 @@ const ReleaseNameCell: Column<TableRelease>['cell'] = ({cellProps, datum: releas
   const displayTitle = release.metadata.title || tCore('release.placeholder-untitled-release')
 
   return (
-    <Box {...cellProps} marginLeft={3} flex={1} padding={1}>
+    <Box {...cellProps} marginLeft={3} flex={1} paddingY={1} paddingRight={2} sizing={'border'}>
       <Tooltip
         disabled={!release.isDeleted}
         content={
@@ -127,9 +139,16 @@ export const releasesOverviewColumnDefs: (
       id: 'title',
       sorting: false,
       width: null,
-      style: {minWidth: '50%'},
+      style: {minWidth: '50%', maxWidth: '50%'},
       header: ({headerProps}) => (
-        <Flex {...headerProps} flex={1} marginLeft={3} paddingY={3} sizing="border">
+        <Flex
+          {...headerProps}
+          flex={1}
+          marginLeft={3}
+          paddingRight={2}
+          paddingY={3}
+          sizing="border"
+        >
           <Headers.BasicHeader text={t('table-header.title')} />
         </Flex>
       ),
@@ -148,14 +167,7 @@ export const releasesOverviewColumnDefs: (
       },
       width: 250,
       header: (props) => (
-        <Flex
-          {...props.headerProps}
-          align="center"
-          gap={1}
-          paddingX={1}
-          paddingY={0}
-          sizing="border"
-        >
+        <Flex {...props.headerProps} paddingY={3} sizing="border">
           <Headers.SortHeaderButton text={t('table-header.time')} {...props} />
         </Flex>
       ),