chore(core): improve release status message for the Published status

packages/sanity/src/core/releases/i18n/resources.ts

@@ -99,7 +99,7 @@ const releasesLocaleStrings = {
   'archive-info.title': 'This release is archived',
   /** Description for information card on a published or archived release to description retention effects */
   'archive-info.description':
-    'Your plan supports a {{retentionDays}}-day retention period. After this period this release will be removed.',
+    'It will be available for {{retentionDays}} days, then automatically removed on {{removalDate}}. <Link>Learn about retention</Link>.',
 
   /** Title for changes to published documents */
   'changes-published-docs.title': 'Changes to published documents',
@@ -277,7 +277,7 @@ const releasesLocaleStrings = {
   'publish-dialog.validation.error': 'Some documents have validation errors',
 
   /** Title for information card on a published release */
-  'publish-info.title': 'This release is published',
+  'publish-info.title': 'This release is published successfully.',
 
   /** Placeholder title for a release with no title */
   'release-placeholder.title': 'Untitled',

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

@@ -0,0 +1,63 @@
+import {type ReleaseDocument} from '@sanity/client'
+import {InfoOutlineIcon} from '@sanity/icons'
+import {Card, Flex, Stack, Text} from '@sanity/ui'
+import {addDays, format} from 'date-fns'
+import {useMemo} from 'react'
+
+import {useProjectSubscriptions} from '../../../hooks/useProjectSubscriptions'
+import {useTimeZone} from '../../../hooks/useTimeZone'
+import {Translate, useTranslation} from '../../../i18n'
+import {CONTENT_RELEASES_TIME_ZONE_SCOPE} from '../../../studio/constants'
+import {releasesLocaleNamespace} from '../../i18n'
+
+export function ArchivedReleaseBanner({release}: {release: ReleaseDocument}) {
+  const {state} = release
+  const {t: tRelease} = useTranslation(releasesLocaleNamespace)
+  const {projectSubscriptions} = useProjectSubscriptions()
+
+  const retentionDays = projectSubscriptions?.featureTypes.retention.features[0].attributes
+    .maxRetentionDays as number | undefined
+
+  const {utcToCurrentZoneDate} = useTimeZone(CONTENT_RELEASES_TIME_ZONE_SCOPE)
+  const removalDate = useMemo(() => {
+    if (!retentionDays || !release?._updatedAt) return ''
+    const _removalDate = addDays(new Date(release._updatedAt), retentionDays)
+
+    return format(utcToCurrentZoneDate(_removalDate), 'PP')
+  }, [retentionDays, release, utcToCurrentZoneDate])
+
+  return (
+    <Card padding={4} radius={4} tone="primary" data-testid="retention-policy-card">
+      <Flex gap={3}>
+        <Text size={1}>
+          <InfoOutlineIcon />
+        </Text>
+        <Stack space={4}>
+          <Text size={1} weight="semibold">
+            {state === 'archived' ? tRelease('archive-info.title') : tRelease('publish-info.title')}
+          </Text>
+          {retentionDays && (
+            <Text size={1} accent>
+              <Translate
+                t={tRelease}
+                i18nKey="archive-info.description"
+                values={{retentionDays, removalDate: removalDate || ''}}
+                components={{
+                  Link: ({children}) => (
+                    <a
+                      href="https://www.sanity.io/docs/user-guides/history-experience"
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      {children}
+                    </a>
+                  ),
+                }}
+              />
+            </Text>
+          )}
+        </Stack>
+      </Flex>
+    </Card>
+  )
+}

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

@@ -1,19 +1,12 @@
 import {type ReleaseDocument} from '@sanity/client'
-import {
-  ErrorOutlineIcon,
-  InfoOutlineIcon,
-  PinFilledIcon,
-  PinIcon,
-  WarningOutlineIcon,
-} from '@sanity/icons'
+import {ErrorOutlineIcon, PinFilledIcon, PinIcon, WarningOutlineIcon} from '@sanity/icons'
 import {Box, Card, Container, Flex, Stack, Text} from '@sanity/ui'
 import {useCallback, useEffect, useRef, useState} from 'react'
 
 import {Button} from '../../../../ui-components/button/Button'
 import {ToneIcon} from '../../../../ui-components/toneIcon/ToneIcon'
 import {TextWithTone} from '../../../components/textWithTone/TextWithTone'
 import {Details} from '../../../form/components/Details'
-import {useProjectSubscriptions} from '../../../hooks/useProjectSubscriptions'
 import {useTranslation} from '../../../i18n'
 import {usePerspective} from '../../../perspective/usePerspective'
 import {useSetPerspective} from '../../../perspective/useSetPerspective'
@@ -23,6 +16,7 @@ import {useReleaseOperations} from '../../store/useReleaseOperations'
 import {useReleasePermissions} from '../../store/useReleasePermissions'
 import {getReleaseIdFromReleaseDocumentId} from '../../util/getReleaseIdFromReleaseDocumentId'
 import {isNotArchivedRelease} from '../../util/util'
+import {ArchivedReleaseBanner} from './ArchivedReleaseBanner'
 import {ReleaseDetailsEditor} from './ReleaseDetailsEditor'
 import {ReleaseTypePicker} from './ReleaseTypePicker'
 import {type DocumentInRelease} from './useBundleDocuments'
@@ -36,17 +30,15 @@ export function ReleaseDashboardDetails({
   documents: DocumentInRelease[]
 }) {
   const {state} = release
+
   const releaseId = getReleaseIdFromReleaseDocumentId(release._id)
   const {checkWithPermissionGuard} = useReleasePermissions()
   const {publishRelease, schedule} = useReleaseOperations()
 
   const {t: tRelease} = useTranslation(releasesLocaleNamespace)
   const {selectedReleaseId} = usePerspective()
   const setPerspective = useSetPerspective()
-  const {projectSubscriptions} = useProjectSubscriptions()
 
-  const retentionDays =
-    projectSubscriptions?.featureTypes.retention.features[0].attributes.maxRetentionDays
   const isSelected = releaseId === selectedReleaseId
   const isAtTimeRelease = release?.metadata?.releaseType === 'scheduled'
   const isReleaseOpen = state !== 'archived' && state !== 'published'
@@ -189,25 +181,7 @@ export function ReleaseDashboardDetails({
           </Card>
         )}
 
-        {!isReleaseOpen && retentionDays && (
-          <Card padding={4} radius={4} tone="primary" data-testid="retention-policy-card">
-            <Flex gap={3}>
-              <Text size={1}>
-                <InfoOutlineIcon />
-              </Text>
-              <Stack space={4}>
-                <Text size={1} weight="semibold">
-                  {state === 'archived'
-                    ? tRelease('archive-info.title')
-                    : tRelease('publish-info.title')}
-                </Text>
-                <Text size={1} accent>
-                  {tRelease('archive-info.description', {retentionDays})}
-                </Text>
-              </Stack>
-            </Flex>
-          </Card>
-        )}
+        {!isReleaseOpen && <ArchivedReleaseBanner release={release} />}
       </Stack>
     </Container>
   )

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

@@ -5,7 +5,7 @@ import {LazyTextInput} from '../../../components/inputs/DateInputs/LazyTextInput
 import {useTimeZone} from '../../../hooks/useTimeZone'
 import {CONTENT_RELEASES_TIME_ZONE_SCOPE} from '../../../studio/constants'
 
-const dateInputFormat = 'PP HH:mm'
+export const dateInputFormat = 'PP HH:mm'
 
 export function ReleaseDateInput(props: {
   setIsIntendedScheduleDateInPast: (isIntendedScheduleDateInPast: boolean) => void

packages/sanity/src/core/releases/tool/detail/__tests__/ReleaseDetail.test.tsx

@@ -404,7 +404,7 @@ describe('after releases have loaded', () => {
     it('should show published retention card', async () => {
       await renderTest()
 
-      screen.getByText('This release is published')
+      screen.getByText('This release is published successfully.')
 
       within(screen.getByTestId('retention-policy-card')).getByText('123', {exact: false})
     })