feat: showing archived chips when history viewing an archived version

sanity-io · Dec 11, 2024 · b939ef4 · b939ef4
1 parent 839f0a9
commit b939ef4
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 26 deletions.
diff --git a/packages/sanity/src/core/releases/components/documentHeader/VersionChip.tsx b/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>
 

diff --git a/...src/structure/panes/document/documentPanel/header/perspective/DocumentPerspectiveList.tsx b/...src/structure/panes/document/documentPanel/header/perspective/DocumentPerspectiveList.tsx
@@ -2,6 +2,7 @@ import {Text} from '@sanity/ui'
 import {memo, useCallback, useMemo} from 'react'
 import {
   formatRelativeLocalePublishDate,
+  getReleaseIdFromReleaseDocumentId,
   getReleaseTone,
   getVersionFromId,
   isReleaseScheduledOrScheduling,
@@ -14,6 +15,7 @@ import {
   VersionChip,
   versionDocumentExists,
 } from 'sanity'
+import {usePaneRouter} from 'sanity/structure'
 
 import {useDocumentPane} from '../../../useDocumentPane'
 
@@ -66,18 +68,19 @@ export const DocumentPerspectiveList = memo(function DocumentPerspectiveList() {
   const {selectedPerspectiveName} = usePerspective()
   const {t} = useTranslation()
   const {setPerspective} = usePerspective()
+  const {params} = usePaneRouter()
   const dateTimeFormat = useDateTimeFormat({
     dateStyle: 'medium',
     timeStyle: 'short',
   })
-  const {data: releases, loading} = useReleases()
+  const {data: releases, loading, archivedReleases} = useReleases()
 
   const {documentVersions, editState, displayed, documentType} = useDocumentPane()
 
   const filteredReleases: FilterReleases = useMemo(() => {
     if (!documentVersions) return {notCurrentReleases: [], currentReleases: []}
 
-    return releases.reduce(
+    const activeReleases = releases.reduce(
       (acc: FilterReleases, release) => {
         const versionDocExists = versionDocumentExists(documentVersions, release._id)
         if (versionDocExists) {
@@ -89,7 +92,21 @@ export const DocumentPerspectiveList = memo(function DocumentPerspectiveList() {
       },
       {notCurrentReleases: [], currentReleases: []},
     )
-  }, [documentVersions, releases])
+
+    // without historyVersion, version is not in an archived release
+    if (!params?.historyVersion) return activeReleases
+
+    const archivedRelease = archivedReleases.find(
+      (r) => getReleaseIdFromReleaseDocumentId(r._id) === params?.historyVersion,
+    )
+
+    // only for explicitly archived releases; published releases use published perspective
+    if (archivedRelease?.state === 'archived') {
+      activeReleases.currentReleases.push(archivedRelease)
+    }
+
+    return activeReleases
+  }, [archivedReleases, documentVersions, params?.historyVersion, releases])
 
   const handleBundleChange = useCallback(
     (bundleId: string) => () => {
@@ -107,6 +124,19 @@ export const DocumentPerspectiveList = memo(function DocumentPerspectiveList() {
     return !editState?.published
   }, [editState?.liveEdit, editState?.published])
 
+  const getIsReleaseSelected = useCallback(
+    (release: ReleaseDocument): {selected: boolean; disabled?: boolean} => {
+      if (!params?.historyVersion)
+        return {selected: release.name === getVersionFromId(displayed?._id || '')}
+
+      const isReleaseHistoryMatch =
+        getReleaseIdFromReleaseDocumentId(release._id) === params.historyVersion
+
+      return {selected: isReleaseHistoryMatch, disabled: isReleaseHistoryMatch}
+    },
+    [displayed?._id, params?.historyVersion],
+  )
+
   return (
     <>
       <VersionChip
@@ -177,18 +207,20 @@ export const DocumentPerspectiveList = memo(function DocumentPerspectiveList() {
         }
         selected={
           /** the draft is selected when:
+           * not viewing a historical version,
            * when the document displayed is a draft,
            * when the perspective is null,
            * when the document is not published and the displayed version is draft,
            * when there is no draft (new document),
            */
           !!(
-            editState?.draft?._id === displayed?._id ||
-            !selectedPerspectiveName ||
-            (!editState?.published &&
-              editState?.draft &&
-              editState?.draft?._id === displayed?._id) ||
-            (!editState?.published && !editState?.draft)
+            !params?.historyVersion &&
+            (editState?.draft?._id === displayed?._id ||
+              !selectedPerspectiveName ||
+              (!editState?.published &&
+                editState?.draft &&
+                editState?.draft?._id === displayed?._id) ||
+              (!editState?.published && !editState?.draft))
           )
         }
         text={t('release.chip.draft')}
@@ -211,7 +243,9 @@ export const DocumentPerspectiveList = memo(function DocumentPerspectiveList() {
           <VersionChip
             key={release._id}
             tooltipContent={<TooltipContent release={release} />}
-            selected={release.name === getVersionFromId(displayed?._id || '')}
+            {...getIsReleaseSelected(release)}
+            // selected
+            // disabled={false}
             onClick={handleBundleChange(release.name)}
             text={release.metadata.title || t('release.placeholder-untitled-release')}
             tone={getReleaseTone(release)}
@@ -223,6 +257,7 @@ export const DocumentPerspectiveList = memo(function DocumentPerspectiveList() {
               releasesLoading: loading,
               documentType: documentType,
               fromRelease: release.name,
+              releaseState: release.state,
               isVersion: true,
             }}
           />