feat: showing documents in archived and published releases (#7994)

packages/sanity/src/core/releases/components/documentHeader/VersionChip.tsx

@@ -10,33 +10,49 @@ import {
   useRef,
   useState,
 } from 'react'
-import {styled} from 'styled-components'
+import {css, styled} from 'styled-components'
 
 import {Button, Popover, Tooltip} from '../../../../ui-components'
 import {getVersionId} from '../../../util/draftUtils'
 import {useVersionOperations} from '../../hooks/useVersionOperations'
-import {type ReleaseDocument} from '../../store/types'
+import {type ReleaseDocument, type ReleaseState} from '../../store/types'
 import {getReleaseIdFromReleaseDocumentId} from '../../util/getReleaseIdFromReleaseDocumentId'
 import {DiscardVersionDialog} from '../dialog/DiscardVersionDialog'
 import {ReleaseAvatar} from '../ReleaseAvatar'
 import {VersionContextMenu} from './contextMenu/VersionContextMenu'
 import {CopyToNewReleaseDialog} from './dialog/CopyToNewReleaseDialog'
 
-const Chip = styled(Button)`
-  border-radius: 9999px !important;
-  transition: none;
-  text-decoration: none !important;
-  cursor: pointer;
+interface ChipStyleProps {
+  $isArchived?: boolean
+}
 
-  // target enabled state
-  &:not([data-disabled='true']) {
-    --card-border-color: var(--card-badge-default-bg-color);
-  }
+const Chip = styled(Button)<ChipStyleProps>(
+  ({$isArchived}) =>
+    `
+    border-radius: 9999px !important;
+    transition: none;
+    text-decoration: none !important;
+    cursor: pointer;
 
-  &[data-disabled='true'] {
-    color: var(--card-muted-fg-color);
-  }
-`
+    // target enabled state
+    &:not([data-disabled='true']) {
+      --card-border-color: var(--card-badge-default-bg-color);
+    }
+
+    &[data-disabled='true'] {
+      color: var(--card-muted-fg-color);
+      cursor: default;
+
+      // archived will be disabled but should have bg color
+      ${
+        $isArchived &&
+        css`
+          background-color: var(--card-badge-default-bg-color);
+        `
+      }
+    }
+  `,
+)
 
 /**
  * @internal
@@ -56,6 +72,7 @@ export const VersionChip = memo(function VersionChip(props: {
     documentType: string
     menuReleaseId: string
     fromRelease: string
+    releaseState?: ReleaseState
     isVersion: boolean
     disabled?: boolean
   }
@@ -75,6 +92,7 @@ export const VersionChip = memo(function VersionChip(props: {
       documentType,
       menuReleaseId,
       fromRelease,
+      releaseState,
       isVersion,
       disabled: contextMenuDisabled = false,
     },
@@ -162,6 +180,8 @@ export const VersionChip = memo(function VersionChip(props: {
     } as HTMLElement
   }, [contextMenuPoint])
 
+  const contextMenuHandler = disabled ? undefined : handleContextMenu
+
   return (
     <>
       <Tooltip content={tooltipContent} fallbackPlacements={[]} portal placement="bottom">
@@ -178,7 +198,8 @@ export const VersionChip = memo(function VersionChip(props: {
           tone={tone}
           icon={<ReleaseAvatar padding={1} tone={tone} />}
           iconRight={locked && LockIcon}
-          onContextMenu={handleContextMenu}
+          onContextMenu={contextMenuHandler}
+          $isArchived={releaseState === 'archived'}
         />
       </Tooltip>
 

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

@@ -6,7 +6,7 @@ import {IntentLink} from 'sanity/router'
 import {DocumentPreviewPresence} from '../../../presence'
 import {SanityDefaultPreview} from '../../../preview/components/SanityDefaultPreview'
 import {getPublishedId} from '../../../util/draftUtils'
-import {useDocumentPresence} from '../../index'
+import {type ReleaseState, useDocumentPresence} from '../../index'
 import {getReleaseIdFromReleaseDocumentId} from '../../util/getReleaseIdFromReleaseDocumentId'
 
 interface ReleaseDocumentPreviewProps {
@@ -15,7 +15,8 @@ interface ReleaseDocumentPreviewProps {
   releaseId: string
   previewValues: PreviewValue
   isLoading: boolean
-  hasValidationError?: boolean
+  releaseState?: ReleaseState
+  documentRevision?: string
 }
 
 export function ReleaseDocumentPreview({
@@ -24,10 +25,24 @@ export function ReleaseDocumentPreview({
   releaseId,
   previewValues,
   isLoading,
-  hasValidationError,
+  releaseState,
+  documentRevision,
 }: ReleaseDocumentPreviewProps) {
   const documentPresence = useDocumentPresence(documentId)
 
+  const intentParams = useMemo(() => {
+    if (releaseState !== 'published' && releaseState !== 'archived') return {}
+
+    const rev = releaseState === 'archived' ? '@lastEdited' : '@lastPublished'
+
+    return {
+      rev,
+      inspect: 'sanity/structure/history',
+      historyEvent: documentRevision,
+      historyVersion: getReleaseIdFromReleaseDocumentId(releaseId),
+    }
+  }, [documentRevision, releaseId, releaseState])
+
   const LinkComponent = useMemo(
     () =>
       // eslint-disable-next-line @typescript-eslint/no-shadow
@@ -39,13 +54,21 @@ export function ReleaseDocumentPreview({
             params={{
               id: getPublishedId(documentId),
               type: documentTypeName,
+              ...intentParams,
             }}
-            searchParams={[['perspective', getReleaseIdFromReleaseDocumentId(releaseId)]]}
+            searchParams={[
+              [
+                'perspective',
+                releaseState === 'published'
+                  ? 'published'
+                  : getReleaseIdFromReleaseDocumentId(releaseId),
+              ],
+            ]}
             ref={ref}
           />
         )
       }),
-    [documentId, documentTypeName, releaseId],
+    [documentId, documentTypeName, intentParams, releaseId, releaseState],
   )
 
   const previewPresence = useMemo(

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

@@ -177,7 +177,7 @@ export const ReleaseMenuButton = ({ignoreCTA, release}: ReleaseMenuButtonProps)
   const confirmActionDialog = useMemo(() => {
     if (!selectedAction) return null
 
-    const {confirmDialog, ...actionValues} = RELEASE_ACTION_MAP[selectedAction]
+    const {confirmDialog} = RELEASE_ACTION_MAP[selectedAction]
 
     if (!confirmDialog) return null
 

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

@@ -42,19 +42,20 @@ export function ReleaseSummary(props: ReleaseSummaryProps) {
     [documents, documentsHistory],
   )
 
-  const renderRowActions: ({datum}: {datum: BundleDocumentRow | unknown}) => JSX.Element =
-    useCallback(
-      ({datum}) => {
-        const document = datum as BundleDocumentRow
+  const renderRowActions: React.FC<{datum: BundleDocumentRow | unknown}> = useCallback(
+    ({datum}) => {
+      if (release.state !== 'active') return null
 
-        return <DocumentActions document={document} releaseTitle={release.metadata.title} />
-      },
-      [release.metadata.title],
-    )
+      const document = datum as BundleDocumentRow
+
+      return <DocumentActions document={document} releaseTitle={release.metadata.title} />
+    },
+    [release.metadata.title, release.state],
+  )
 
   const documentTableColumnDefs = useMemo(
-    () => getDocumentTableColumnDefs(release._id, t),
-    [release._id, t],
+    () => getDocumentTableColumnDefs(release._id, release.state, t),
+    [release._id, release.state, t],
   )
 
   const filterRows = useCallback(

packages/sanity/src/core/releases/tool/detail/documentTable/DocumentTableColumnDefs.tsx

@@ -8,6 +8,7 @@ import {Tooltip} from '../../../../../ui-components/tooltip'
 import {UserAvatar} from '../../../../components'
 import {RelativeTime} from '../../../../components/RelativeTime'
 import {useSchema} from '../../../../hooks'
+import {type ReleaseState} from '../../../store'
 import {isGoingToUnpublish} from '../../../util/isGoingToUnpublish'
 import {ReleaseDocumentPreview} from '../../components/ReleaseDocumentPreview'
 import {Headers} from '../../components/Table/TableHeader'
@@ -19,18 +20,23 @@ const MemoReleaseDocumentPreview = memo(
   function MemoReleaseDocumentPreview({
     item,
     releaseId,
+    releaseState,
+    documentRevision,
   }: {
     item: DocumentInRelease
     releaseId: string
+    releaseState?: ReleaseState
+    documentRevision?: string
   }) {
     return (
       <ReleaseDocumentPreview
         documentId={item.document._id}
         documentTypeName={item.document._type}
         releaseId={releaseId}
+        releaseState={releaseState}
+        documentRevision={documentRevision}
         previewValues={item.previewValues.values}
         isLoading={item.previewValues.isLoading}
-        hasValidationError={item.validation?.hasError}
       />
     )
   },
@@ -46,54 +52,59 @@ const MemoDocumentType = memo(
   (prev, next) => prev.type === next.type,
 )
 
-export const getDocumentTableColumnDefs: (
-  releaseId: string,
-  t: TFunction<'releases', undefined>,
-) => Column<BundleDocumentRow>[] = (releaseId, t) => [
-  {
-    id: 'action',
-    width: 100,
-    header: (props) => (
-      <Flex {...props.headerProps} paddingY={3} sizing="border">
-        <Headers.BasicHeader text={t('table-header.action')} />
-      </Flex>
-    ),
-    cell: ({cellProps, datum}) => {
-      const willBeUnpublished = isGoingToUnpublish(datum.document)
-      const actionBadge = () => {
-        if (willBeUnpublished) {
-          return (
-            <Badge
-              radius={2}
-              tone={'critical'}
-              data-testid={`unpublish-badge-${datum.document._id}`}
-            >
-              {t('table-body.action.unpublish')}
-            </Badge>
-          )
-        }
-        if (datum.document.publishedDocumentExists) {
-          return (
-            <Badge radius={2} tone={'caution'} data-testid={`change-badge-${datum.document._id}`}>
-              {t('table-body.action.change')}
-            </Badge>
-          )
-        }
-
+const documentActionColumn: (t: TFunction<'releases', undefined>) => Column<BundleDocumentRow> = (
+  t,
+) => ({
+  id: 'action',
+  width: 100,
+  header: (props) => (
+    <Flex {...props.headerProps} paddingY={3} sizing="border">
+      <Headers.BasicHeader text={t('table-header.action')} />
+    </Flex>
+  ),
+  cell: ({cellProps, datum}) => {
+    const willBeUnpublished = isGoingToUnpublish(datum.document)
+    const actionBadge = () => {
+      if (willBeUnpublished) {
         return (
-          <Badge radius={2} tone={'positive'} data-testid={`add-badge-${datum.document._id}`}>
-            {t('table-body.action.add')}
+          <Badge radius={2} tone={'critical'} data-testid={`unpublish-badge-${datum.document._id}`}>
+            {t('table-body.action.unpublish')}
+          </Badge>
+        )
+      }
+      if (datum.document.publishedDocumentExists) {
+        return (
+          <Badge radius={2} tone={'caution'} data-testid={`change-badge-${datum.document._id}`}>
+            {t('table-body.action.change')}
           </Badge>
         )
       }
 
       return (
-        <Flex align="center" {...cellProps}>
-          <Box paddingX={2}>{actionBadge()}</Box>
-        </Flex>
+        <Badge radius={2} tone={'positive'} data-testid={`add-badge-${datum.document._id}`}>
+          {t('table-body.action.add')}
+        </Badge>
       )
-    },
+    }
+
+    return (
+      <Flex align="center" {...cellProps}>
+        <Box paddingX={2}>{actionBadge()}</Box>
+      </Flex>
+    )
   },
+})
+
+export const getDocumentTableColumnDefs: (
+  releaseId: string,
+  releaseState: ReleaseState,
+  t: TFunction<'releases', undefined>,
+) => Column<BundleDocumentRow>[] = (releaseId, releaseState, t) => [
+  /**
+   * Hiding action for archived and published releases of v1.0
+   * This will be added once Events API has reverse order lookup supported
+   */
+  ...(releaseState === 'archived' || releaseState === 'published' ? [] : [documentActionColumn(t)]),
   {
     id: 'document._type',
     width: 100,
@@ -123,7 +134,12 @@ export const getDocumentTableColumnDefs: (
     ),
     cell: ({cellProps, datum}) => (
       <Box {...cellProps} flex={1} padding={1} paddingRight={2} sizing="border">
-        <MemoReleaseDocumentPreview item={datum} releaseId={releaseId} />
+        <MemoReleaseDocumentPreview
+          item={datum}
+          releaseId={releaseId}
+          releaseState={releaseState}
+          documentRevision={datum.document._rev}
+        />
       </Box>
     ),
   },

packages/sanity/src/core/releases/tool/detail/review/DocumentReviewHeader.tsx

@@ -55,7 +55,6 @@ export function DocumentReviewHeader({
             releaseId={releaseId}
             previewValues={previewValues}
             isLoading={isLoading}
-            hasValidationError={validation?.hasError}
           />
         </Box>
         <Flex gap={2} padding={3} style={{flexShrink: 0}}>