From b939ef464cbc573372209be6bc0ed57a42daf791 Mon Sep 17 00:00:00 2001 From: Jordan Lawrence Date: Wed, 11 Dec 2024 12:20:52 +0000 Subject: [PATCH] feat: showing archived chips when history viewing an archived version --- .../components/documentHeader/VersionChip.tsx | 53 ++++++++++++------ .../perspective/DocumentPerspectiveList.tsx | 55 +++++++++++++++---- 2 files changed, 82 insertions(+), 26 deletions(-) diff --git a/packages/sanity/src/core/releases/components/documentHeader/VersionChip.tsx b/packages/sanity/src/core/releases/components/documentHeader/VersionChip.tsx index c9307a004c5..c7cbb4ea57f 100644 --- 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)( + ({$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 ( <> @@ -178,7 +198,8 @@ export const VersionChip = memo(function VersionChip(props: { tone={tone} icon={} iconRight={locked && LockIcon} - onContextMenu={handleContextMenu} + onContextMenu={contextMenuHandler} + $isArchived={releaseState === 'archived'} /> diff --git a/packages/sanity/src/structure/panes/document/documentPanel/header/perspective/DocumentPerspectiveList.tsx b/packages/sanity/src/structure/panes/document/documentPanel/header/perspective/DocumentPerspectiveList.tsx index e686d75d805..32b0034ff94 100644 --- a/packages/sanity/src/structure/panes/document/documentPanel/header/perspective/DocumentPerspectiveList.tsx +++ b/packages/sanity/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 ( <> } - 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, }} />