From 720238c3cf5bcd14932f1da9efc0874780d77d79 Mon Sep 17 00:00:00 2001 From: pedrobonamin Date: Fri, 13 Dec 2024 09:07:53 +0100 Subject: [PATCH 1/3] feat(core): add option to exclude draft perspective from releases stack --- .../sanity/src/core/i18n/bundles/studio.ts | 2 + .../core/releases/hooks/usePerspective.tsx | 1 - .../releases/navbar/GlobalPerspectiveMenu.tsx | 5 ++ .../navbar/GlobalPerspectiveMenuItem.tsx | 78 ++++++++++--------- .../navbar/PerspectiveLayerIndicator.tsx | 8 +- .../navbar/__tests__/ReleasesNav.test.tsx | 20 ++++- 6 files changed, 66 insertions(+), 48 deletions(-) diff --git a/packages/sanity/src/core/i18n/bundles/studio.ts b/packages/sanity/src/core/i18n/bundles/studio.ts index c038f0b8d7f..75859f922b0 100644 --- a/packages/sanity/src/core/i18n/bundles/studio.ts +++ b/packages/sanity/src/core/i18n/bundles/studio.ts @@ -1223,6 +1223,8 @@ export const studioLocaleStrings = defineLocalesResources('studio', { /** Tooltip for button to hide release visibility */ 'release.layer.hide': 'Hide release', /** Label for published releases in navbar */ + 'release.navbar.drafts': 'Drafts', + /** Label for published releases in navbar */ 'release.navbar.published': 'Published', /** Tooltip for releases navigation in navbar */ 'release.navbar.tooltip': 'Releases', diff --git a/packages/sanity/src/core/releases/hooks/usePerspective.tsx b/packages/sanity/src/core/releases/hooks/usePerspective.tsx index 07c80641cf8..5d8f815156c 100644 --- a/packages/sanity/src/core/releases/hooks/usePerspective.tsx +++ b/packages/sanity/src/core/releases/hooks/usePerspective.tsx @@ -130,7 +130,6 @@ export function usePerspective(): PerspectiveValue { const toggleExcludedPerspective = useCallback( (excluded: string) => { - if (excluded === LATEST._id) return const existingPerspectives = excludedPerspectives || [] const nextExcludedPerspectives = existingPerspectives.includes(excluded) diff --git a/packages/sanity/src/core/releases/navbar/GlobalPerspectiveMenu.tsx b/packages/sanity/src/core/releases/navbar/GlobalPerspectiveMenu.tsx index beed38b482f..6e6386c80b4 100644 --- a/packages/sanity/src/core/releases/navbar/GlobalPerspectiveMenu.tsx +++ b/packages/sanity/src/core/releases/navbar/GlobalPerspectiveMenu.tsx @@ -10,6 +10,7 @@ import {CreateReleaseDialog} from '../components/dialog/CreateReleaseDialog' import {usePerspective} from '../hooks/usePerspective' import {type ReleaseDocument, type ReleaseType} from '../store/types' import {useReleases} from '../store/useReleases' +import {LATEST} from '../util/const' import { getRangePosition, GlobalPerspectiveMenuItem, @@ -125,6 +126,10 @@ export function GlobalPerspectiveMenu(): JSX.Element { rangePosition={isRangeVisible ? getRangePosition(range, 0) : undefined} release={'published'} /> + <> {orderedReleaseTypes.map((releaseType) => ( diff --git a/packages/sanity/src/core/releases/navbar/GlobalPerspectiveMenuItem.tsx b/packages/sanity/src/core/releases/navbar/GlobalPerspectiveMenuItem.tsx index aa326c66ff4..371e568a461 100644 --- a/packages/sanity/src/core/releases/navbar/GlobalPerspectiveMenuItem.tsx +++ b/packages/sanity/src/core/releases/navbar/GlobalPerspectiveMenuItem.tsx @@ -1,3 +1,4 @@ +import {type ReleaseId} from '@sanity/client' import {DotIcon, EyeClosedIcon, EyeOpenIcon, LockIcon} from '@sanity/icons' // eslint-disable-next-line no-restricted-imports -- custom use for MenuItem & Button not supported by ui-components import {Box, Button, Flex, MenuItem, Stack, Text} from '@sanity/ui' @@ -8,11 +9,13 @@ import {Tooltip} from '../../../ui-components/tooltip' import {useTranslation} from '../../i18n/hooks/useTranslation' import {ReleaseAvatar} from '../components/ReleaseAvatar' import {usePerspective} from '../hooks/usePerspective' -import {type ReleaseDocument} from '../store/types' +import {isReleaseDocument, type ReleaseDocument} from '../store/types' +import {type LATEST} from '../util/const' import {getReleaseIdFromReleaseDocumentId} from '../util/getReleaseIdFromReleaseDocumentId' import {getReleaseTone} from '../util/getReleaseTone' import { formatRelativeLocalePublishDate, + isDraftPerspective, isPublishedPerspective, isReleaseScheduledOrScheduling, } from '../util/util' @@ -78,67 +81,67 @@ export function getRangePosition(range: LayerRange, index: number): rangePositio export const GlobalPerspectiveMenuItem = forwardRef< HTMLDivElement, { - release: ReleaseDocument | 'published' + release: ReleaseDocument | 'published' | typeof LATEST rangePosition: rangePosition } >((props, ref) => { const {release, rangePosition} = props const { - globalReleaseDocumentId, - setPerspectiveFromReleaseDocumentId, setPerspective, + selectedPerspective, + selectedPerspectiveName, toggleExcludedPerspective, isPerspectiveExcluded, } = usePerspective() - const isReleasePublishedPerspective = isPublishedPerspective(release) - const isUnnamedRelease = !isReleasePublishedPerspective && !release.metadata.title - const releaseId = isReleasePublishedPerspective ? 'published' : release._id - const active = releaseId === globalReleaseDocumentId - const first = rangePosition === 'first' - const within = rangePosition === 'within' - const last = rangePosition === 'last' - const inRange = first || within || last - - const releasePerspectiveId = isReleasePublishedPerspective - ? releaseId - : getReleaseIdFromReleaseDocumentId(releaseId) - const isReleasePerspectiveExcluded = isPerspectiveExcluded(releasePerspectiveId) + + // eslint-disable-next-line no-nested-ternary + const releaseId: 'published' | 'drafts' | ReleaseId = isReleaseDocument(release) + ? (getReleaseIdFromReleaseDocumentId(release._id) as ReleaseId) + : isDraftPerspective(release) + ? (release._id as 'drafts') + : (release as 'published') + + const active = selectedPerspectiveName + ? releaseId === selectedPerspectiveName + : isDraftPerspective(release) + + const isReleasePerspectiveExcluded = isPerspectiveExcluded(releaseId) const {t} = useTranslation() const displayTitle = useMemo(() => { - if (isUnnamedRelease) { - return t('release.placeholder-untitled-release') - } + if (isPublishedPerspective(release)) return t('release.navbar.published') + if (isDraftPerspective(release)) return t('release.navbar.drafts') - return isReleasePublishedPerspective ? t('release.navbar.published') : release.metadata?.title - }, [isReleasePublishedPerspective, isUnnamedRelease, release, t]) + return release.metadata.title || t('release.placeholder-untitled-release') + }, [release, t]) const handleToggleReleaseVisibility = useCallback( (event: MouseEvent) => { event.stopPropagation() - toggleExcludedPerspective(releasePerspectiveId) + toggleExcludedPerspective(releaseId) }, - [toggleExcludedPerspective, releasePerspectiveId], + [toggleExcludedPerspective, releaseId], ) const handleOnReleaseClick = useCallback( - () => - isReleasePublishedPerspective - ? setPerspective(releaseId) - : setPerspectiveFromReleaseDocumentId(releaseId), - [releaseId, isReleasePublishedPerspective, setPerspective, setPerspectiveFromReleaseDocumentId], + () => setPerspective(releaseId), + [releaseId, setPerspective], ) - const canReleaseBeExcluded = - !isPublishedPerspective(release) && !isReleaseScheduledOrScheduling(release) && inRange && !last + const canReleaseBeExcluded = useMemo(() => { + if (release === 'published') return false + if (isDraftPerspective(release)) return isReleaseDocument(selectedPerspective) + if (isReleaseScheduledOrScheduling(release)) return false + return rangePosition && ['first', 'within'].includes(rangePosition) + }, [rangePosition, release, selectedPerspective]) return ( @@ -156,7 +159,6 @@ export const GlobalPerspectiveMenuItem = forwardRef< ) : ( )} - {/* )} */} {displayTitle} - {!isPublishedPerspective(release) && + {isReleaseDocument(release) && release.metadata.releaseType === 'scheduled' && (release.publishAt || release.metadata.intendedPublishAt) && ( @@ -193,7 +195,7 @@ export const GlobalPerspectiveMenuItem = forwardRef< /> )} - {!isPublishedPerspective(release) && isReleaseScheduledOrScheduling(release) && ( + {isReleaseDocument(release) && isReleaseScheduledOrScheduling(release) && ( diff --git a/packages/sanity/src/core/releases/navbar/PerspectiveLayerIndicator.tsx b/packages/sanity/src/core/releases/navbar/PerspectiveLayerIndicator.tsx index f195d7b6ea3..87b32bd6884 100644 --- a/packages/sanity/src/core/releases/navbar/PerspectiveLayerIndicator.tsx +++ b/packages/sanity/src/core/releases/navbar/PerspectiveLayerIndicator.tsx @@ -10,9 +10,9 @@ export const GlobalPerspectiveMenuItemIndicator = styled.div<{ $inRange: boolean $last: boolean $first: boolean - $isPublished: boolean + $isDraft: boolean }>( - ({$inRange, $last, $first, $isPublished}) => css` + ({$inRange, $last, $first, $isDraft}) => css` position: relative; --indicator-left: ${INDICATOR_LEFT_OFFSET}px; @@ -32,9 +32,7 @@ export const GlobalPerspectiveMenuItemIndicator = styled.div<{ left: var(--indicator-left); bottom: -var(--indicator-bottom); width: var(--indicator-width); - height: ${$isPublished - ? 'calc(var(--indicator-bottom) + 12px)' - : 'var(--indicator-bottom)'}; + height: ${$isDraft ? 'calc(var(--indicator-bottom) + 12px)' : 'var(--indicator-bottom)'}; background-color: var(--indicator-color); } `} diff --git a/packages/sanity/src/core/releases/navbar/__tests__/ReleasesNav.test.tsx b/packages/sanity/src/core/releases/navbar/__tests__/ReleasesNav.test.tsx index a3d813efe98..6d5c0deedae 100644 --- a/packages/sanity/src/core/releases/navbar/__tests__/ReleasesNav.test.tsx +++ b/packages/sanity/src/core/releases/navbar/__tests__/ReleasesNav.test.tsx @@ -196,10 +196,7 @@ describe('ReleasesNav', () => { }) it('should set a given perspective from the menu', async () => { - expect(usePerspectiveMockReturn.setPerspectiveFromReleaseDocumentId).toHaveBeenCalledWith( - '_.releases.active-scheduled-2', - ) - expect(usePerspectiveMockReturn.setPerspective).not.toHaveBeenCalled() + expect(usePerspectiveMockReturn.setPerspective).toHaveBeenCalledWith('active-scheduled-2') }) it('should allow for hiding of any deeper layered releases', async () => { @@ -230,6 +227,21 @@ describe('ReleasesNav', () => { ).not.toBeInTheDocument() }) + it('should allow for hiding of draft perspective', async () => { + const drafts = within(screen.getByTestId('release-menu')) + .getByText('Drafts') + .closest('button')! + + expect(within(drafts).queryByTestId('release-toggle-visibility')).toBeInTheDocument() + // toggle to hide + fireEvent.click(within(drafts).getByTestId('release-toggle-visibility')) + expect(usePerspectiveMockReturn.toggleExcludedPerspective).toHaveBeenCalledWith('drafts') + + // toggle to include + fireEvent.click(within(drafts).getByTestId('release-toggle-visibility')) + expect(usePerspectiveMockReturn.toggleExcludedPerspective).toHaveBeenCalledWith('drafts') + }) + it('should not allow hiding of the current perspective', async () => { const currentRelease = within(screen.getByTestId('release-menu')) .getByText('active Scheduled 2') From 1160250ee906be7611271cc5b21d3a788371d5d7 Mon Sep 17 00:00:00 2001 From: Jordan Lawrence Date: Fri, 13 Dec 2024 11:13:16 +0000 Subject: [PATCH 2/3] fix(core): perspective menu indicators hide when scrolled from view --- .../src/core/releases/navbar/useScrollIndicatorVisibility.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/sanity/src/core/releases/navbar/useScrollIndicatorVisibility.ts b/packages/sanity/src/core/releases/navbar/useScrollIndicatorVisibility.ts index 9c3bc9816f7..93bada9ef55 100644 --- a/packages/sanity/src/core/releases/navbar/useScrollIndicatorVisibility.ts +++ b/packages/sanity/src/core/releases/navbar/useScrollIndicatorVisibility.ts @@ -8,8 +8,8 @@ function isElementVisibleInContainer(container: ScrollElement, element: ScrollEl const containerRect = container.getBoundingClientRect() const elementRect = element.getBoundingClientRect() - // 32.5px is padding on published element + padding of perspective menu item - const isVisible = elementRect.top >= containerRect.top + 32.5 + // 32.5px is padding on published/draft element + padding of perspective/draft menu item + const isVisible = elementRect.top >= containerRect.top + 32.5 * 2 return isVisible } From d19c1f11941a1a803ee6004b90c5ca1adf848103 Mon Sep 17 00:00:00 2001 From: Pedro Bonamin <46196328+pedrobonamin@users.noreply.github.com> Date: Fri, 13 Dec 2024 13:06:20 +0100 Subject: [PATCH 3/3] Update packages/sanity/src/core/i18n/bundles/studio.ts Co-authored-by: Jordan Lawrence --- packages/sanity/src/core/i18n/bundles/studio.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/sanity/src/core/i18n/bundles/studio.ts b/packages/sanity/src/core/i18n/bundles/studio.ts index 75859f922b0..9fb7b2adeeb 100644 --- a/packages/sanity/src/core/i18n/bundles/studio.ts +++ b/packages/sanity/src/core/i18n/bundles/studio.ts @@ -1222,7 +1222,7 @@ export const studioLocaleStrings = defineLocalesResources('studio', { 'release.form.placeholer-describe-release': 'Describe the release…', /** Tooltip for button to hide release visibility */ 'release.layer.hide': 'Hide release', - /** Label for published releases in navbar */ + /** Label for draft perspective in navbar */ 'release.navbar.drafts': 'Drafts', /** Label for published releases in navbar */ 'release.navbar.published': 'Published',