From db5bb139206a2bf17c55bf8442b8dfc60cd341b1 Mon Sep 17 00:00:00 2001 From: Jordan Lawrence Date: Thu, 31 Oct 2024 00:36:24 +0000 Subject: [PATCH 1/4] fix: resolving state update look due to unmemoized sticky params in usePerspective --- .../core/releases/hooks/usePerspective.tsx | 20 +++++++++++-------- packages/sanity/src/router/RouterProvider.tsx | 4 ++-- 2 files changed, 14 insertions(+), 10 deletions(-) diff --git a/packages/sanity/src/core/releases/hooks/usePerspective.tsx b/packages/sanity/src/core/releases/hooks/usePerspective.tsx index 72e66a7c9b7..dfba9fc25b7 100644 --- a/packages/sanity/src/core/releases/hooks/usePerspective.tsx +++ b/packages/sanity/src/core/releases/hooks/usePerspective.tsx @@ -1,4 +1,5 @@ import {useCallback, useMemo} from 'react' +import {isPublishedPerspective} from 'sanity' import {useRouter} from 'sanity/router' import {useReleases} from '../../store/release' @@ -54,7 +55,10 @@ export function usePerspective(): PerspectiveValue { | `bundle.${string}` | undefined - const excludedPerspectives = router.stickyParams.excludedPerspectives?.split(',') || EMPTY_ARRAY + const excludedPerspectives = useMemo( + () => router.stickyParams.excludedPerspectives?.split(',') || EMPTY_ARRAY, + [router.stickyParams.excludedPerspectives], + ) // TODO: Should it be possible to set the perspective within a pane, rather than globally? const setPerspective = useCallback( @@ -107,15 +111,15 @@ export function usePerspective(): PerspectiveValue { const toggleExcludedPerspective = useCallback( (excluded: string) => { if (excluded === LATEST._id) return - const nextExcludedPerspectives: string[] = excludedPerspectives || [] + const existingPerspectives = excludedPerspectives || [] - const excludedPerspectiveId = excluded === 'published' ? 'published' : `bundle.${excluded}` + const excludedPerspectiveId = isPublishedPerspective(excluded) + ? 'published' + : `bundle.${excluded}` - if (excludedPerspectives?.includes(excludedPerspectiveId)) { - nextExcludedPerspectives.splice(nextExcludedPerspectives.indexOf(excludedPerspectiveId), 1) - } else { - nextExcludedPerspectives.push(excludedPerspectiveId) - } + const nextExcludedPerspectives = existingPerspectives.includes(excludedPerspectiveId) + ? existingPerspectives.filter((id) => id !== excludedPerspectiveId) + : [...existingPerspectives, excludedPerspectiveId] router.navigateStickyParams({excludedPerspectives: nextExcludedPerspectives.toString()}) }, diff --git a/packages/sanity/src/router/RouterProvider.tsx b/packages/sanity/src/router/RouterProvider.tsx index 7829219e5cc..866c57d650a 100644 --- a/packages/sanity/src/router/RouterProvider.tsx +++ b/packages/sanity/src/router/RouterProvider.tsx @@ -128,12 +128,12 @@ export function RouterProvider(props: RouterProviderProps): ReactElement { const allNextSearchParams = [...(state._searchParams || []), ...Object.entries(params)] const searchParams = Object.entries( - allNextSearchParams.reduce( + allNextSearchParams.reduce( (deduppedSearchParams, [key, value]) => ({ ...deduppedSearchParams, [key]: value, }), - [], + [] as unknown as SearchParam, ), ) From c7df229106f7b4ab0e9272b9c39e9cc95f782047 Mon Sep 17 00:00:00 2001 From: Jordan Lawrence Date: Thu, 31 Oct 2024 01:44:14 +0000 Subject: [PATCH 2/4] fix: overflow menu uses default tone --- .../src/core/studio/components/navbar/StudioNavbar.tsx | 5 +---- .../core/studio/components/navbar/tools/ToolCollapseMenu.tsx | 5 +++-- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/packages/sanity/src/core/studio/components/navbar/StudioNavbar.tsx b/packages/sanity/src/core/studio/components/navbar/StudioNavbar.tsx index 02cc2e650a3..53f0222e966 100644 --- a/packages/sanity/src/core/studio/components/navbar/StudioNavbar.tsx +++ b/packages/sanity/src/core/studio/components/navbar/StudioNavbar.tsx @@ -12,7 +12,7 @@ import { } from '@sanity/ui' import {useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react' import {NavbarContext} from 'sanity/_singletons' -import {type RouterState, useRouter, useRouterState} from 'sanity/router' +import {type RouterState, useRouterState} from 'sanity/router' import {styled} from 'styled-components' import {Button, TooltipDelayGroupProvider} from '../../../../ui-components' @@ -70,7 +70,6 @@ export function StudioNavbar(props: Omit) { } = props const {name, tools} = useWorkspace() - const router = useRouter() const routerState = useRouterState() const mediaIndex = useMediaIndex() const activeToolName = typeof routerState.tool === 'string' ? routerState.tool : undefined @@ -163,8 +162,6 @@ export function StudioNavbar(props: Omit) { setDrawerOpen(true) }, []) - const perspective = useMemo(() => router.stickyParams.perspective, [router.stickyParams]) - const actionNodes = useMemo(() => { if (!shouldRender.tools) return null diff --git a/packages/sanity/src/core/studio/components/navbar/tools/ToolCollapseMenu.tsx b/packages/sanity/src/core/studio/components/navbar/tools/ToolCollapseMenu.tsx index b4139970a2b..0a2db77ba34 100644 --- a/packages/sanity/src/core/studio/components/navbar/tools/ToolCollapseMenu.tsx +++ b/packages/sanity/src/core/studio/components/navbar/tools/ToolCollapseMenu.tsx @@ -2,7 +2,7 @@ import {Flex} from '@sanity/ui' import {startCase} from 'lodash' import {forwardRef, type Ref, useMemo, useState} from 'react' -import {Button} from '../../../../../ui-components' +import {Button, type MenuButtonProps} from '../../../../../ui-components' import {useRovingFocus} from '../../../../components' import {CollapseTabList} from '../../../../components/collapseTabList/CollapseTabList' import {type Tool} from '../../../../config' @@ -24,12 +24,13 @@ export function ToolCollapseMenu(props: ToolCollapseMenuProps) { navigation: ['arrows'], }) - const menuButtonProps = useMemo( + const menuButtonProps: Partial = useMemo( () => ({ popover: { constrainSize: true, portal: true, scheme: scheme, + tone: 'default', }, }), [scheme], From c30f16aca11062cc2a8cd17f131d41413cb495c6 Mon Sep 17 00:00:00 2001 From: Jordan Lawrence Date: Thu, 31 Oct 2024 01:58:54 +0000 Subject: [PATCH 3/4] fix: all dialogs in navbar use default tone --- .../src/core/studio/components/navbar/free-trial/FreeTrial.tsx | 1 + .../studio/components/navbar/new-document/NewDocumentButton.tsx | 1 + .../src/core/studio/components/navbar/presence/PresenceMenu.tsx | 1 + .../core/studio/components/navbar/resources/ResourcesButton.tsx | 2 +- .../src/core/studio/components/navbar/userMenu/UserMenu.tsx | 1 + 5 files changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/sanity/src/core/studio/components/navbar/free-trial/FreeTrial.tsx b/packages/sanity/src/core/studio/components/navbar/free-trial/FreeTrial.tsx index 0206ffa6891..13159198c6f 100644 --- a/packages/sanity/src/core/studio/components/navbar/free-trial/FreeTrial.tsx +++ b/packages/sanity/src/core/studio/components/navbar/free-trial/FreeTrial.tsx @@ -138,6 +138,7 @@ export function FreeTrial({type}: FreeTrialProps) { size={0} scheme={scheme} radius={3} + tone="default" portal placement={type === 'sidebar' ? 'top' : 'bottom-end'} content={ diff --git a/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.tsx b/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.tsx index c90490e7600..59ff3a4a2a5 100644 --- a/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.tsx +++ b/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.tsx @@ -241,6 +241,7 @@ export function NewDocumentButton(props: NewDocumentButtonProps) { constrainSize onKeyDown={handlePopoverKeyDown} open={open} + tone="default" portal radius={3} ref={popoverRef} diff --git a/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenu.tsx b/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenu.tsx index 38b466a0b02..195934f3c62 100644 --- a/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenu.tsx +++ b/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenu.tsx @@ -67,6 +67,7 @@ export function PresenceMenu() { placement: 'bottom', portal: true, scheme: scheme, + tone: 'default', }), [scheme], ) diff --git a/packages/sanity/src/core/studio/components/navbar/resources/ResourcesButton.tsx b/packages/sanity/src/core/studio/components/navbar/resources/ResourcesButton.tsx index f7a707d0a33..38b273241ef 100644 --- a/packages/sanity/src/core/studio/components/navbar/resources/ResourcesButton.tsx +++ b/packages/sanity/src/core/studio/components/navbar/resources/ResourcesButton.tsx @@ -33,7 +33,7 @@ export function ResourcesButton() { } - popover={{constrainSize: true}} + popover={{constrainSize: true, tone: 'default'}} /> ) } diff --git a/packages/sanity/src/core/studio/components/navbar/userMenu/UserMenu.tsx b/packages/sanity/src/core/studio/components/navbar/userMenu/UserMenu.tsx index cffb3db5854..153329d27e1 100644 --- a/packages/sanity/src/core/studio/components/navbar/userMenu/UserMenu.tsx +++ b/packages/sanity/src/core/studio/components/navbar/userMenu/UserMenu.tsx @@ -51,6 +51,7 @@ export function UserMenu() { preventOverflow: true, scheme: scheme, constrainSize: true, + tone: 'default', }), [scheme], ) From e69826a93fb860d35cade81bed8ca1a8a52e18d7 Mon Sep 17 00:00:00 2001 From: Jordan Lawrence Date: Thu, 31 Oct 2024 02:07:11 +0000 Subject: [PATCH 4/4] chore(Releases): using i18n for Published perspective labels --- packages/sanity/src/core/releases/hooks/usePerspective.tsx | 7 ++++--- .../src/core/releases/navbar/GlobalPerspectiveMenuItem.tsx | 2 +- packages/sanity/src/core/releases/navbar/ReleasesNav.tsx | 4 ++-- 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/sanity/src/core/releases/hooks/usePerspective.tsx b/packages/sanity/src/core/releases/hooks/usePerspective.tsx index dfba9fc25b7..dc5356f818b 100644 --- a/packages/sanity/src/core/releases/hooks/usePerspective.tsx +++ b/packages/sanity/src/core/releases/hooks/usePerspective.tsx @@ -130,7 +130,7 @@ export function usePerspective(): PerspectiveValue { (perspectiveId: string) => Boolean( excludedPerspectives?.includes( - perspectiveId === 'published' ? 'published' : `bundle.${perspectiveId}`, + isPublishedPerspective(perspectiveId) ? 'published' : `bundle.${perspectiveId}`, ), ), [excludedPerspectives], @@ -144,8 +144,9 @@ export function usePerspective(): PerspectiveValue { setPerspectiveFromRelease, toggleExcludedPerspective, currentGlobalBundle, - currentGlobalBundleId: - currentGlobalBundle === 'published' ? 'published' : currentGlobalBundle._id, + currentGlobalBundleId: isPublishedPerspective(currentGlobalBundle) + ? 'published' + : currentGlobalBundle._id, bundlesPerspective, isPerspectiveExcluded, }), diff --git a/packages/sanity/src/core/releases/navbar/GlobalPerspectiveMenuItem.tsx b/packages/sanity/src/core/releases/navbar/GlobalPerspectiveMenuItem.tsx index d7ff5809ccc..4bbbbe4911f 100644 --- a/packages/sanity/src/core/releases/navbar/GlobalPerspectiveMenuItem.tsx +++ b/packages/sanity/src/core/releases/navbar/GlobalPerspectiveMenuItem.tsx @@ -157,7 +157,7 @@ export const GlobalPerspectiveMenuItem = forwardRef< }} > - {isReleasePublishedPerspective ? 'Published' : release.metadata.title} + {isReleasePublishedPerspective ? t('release.chip.published') : release.metadata.title} {!isPublishedPerspective(release) && release.metadata.releaseType !== 'undecided' && diff --git a/packages/sanity/src/core/releases/navbar/ReleasesNav.tsx b/packages/sanity/src/core/releases/navbar/ReleasesNav.tsx index 8151c3e9472..70a953a9086 100644 --- a/packages/sanity/src/core/releases/navbar/ReleasesNav.tsx +++ b/packages/sanity/src/core/releases/navbar/ReleasesNav.tsx @@ -73,7 +73,7 @@ export function ReleasesNav(): JSX.Element { {isPublishedPerspective(currentGlobalBundle) - ? 'Published' + ? t('release.chip.published') : currentGlobalBundle.metadata?.title} @@ -110,7 +110,7 @@ export function ReleasesNav(): JSX.Element { } return {visibleLabelChildren()} - }, [currentGlobalBundle]) + }, [currentGlobalBundle, t]) return (