refactor(preview): clean up preview fallback logic (#8904)

Author: bjoerge

packages/sanity/src/core/preview/utils/getPreviewValueWithFallback.tsx

@@ -1,8 +1,7 @@
 import {WarningOutlineIcon} from '@sanity/icons'
 import {type PreviewValue, type SanityDocument} from '@sanity/types'
-import {assignWith} from 'lodash'
 
-export function getMissingDocumentFallback(document: Partial<SanityDocument> | PreviewValue) {
+function getMissingDocumentFallback(document: Partial<SanityDocument> | PreviewValue) {
   return {
     title: <em>{document.title ? String(document.title) : 'Missing document'}</em>,
     subtitle: (
@@ -14,25 +13,34 @@ export function getMissingDocumentFallback(document: Partial<SanityDocument> | P
   }
 }
 
+/**
+ * @internal
+ */
+export type Sources = {
+  /**
+   * Preview snapshot with current perspective applied
+   * This takes priority of original and fallback
+   */
+  snapshot?: Partial<SanityDocument> | PreviewValue | null | undefined
+  /**
+   * Preview of the original document (e.g. without current perspective applied)
+   */
+  original?: Partial<SanityDocument> | PreviewValue | null | undefined
+  /**
+   * last resort fallback in case we don't have anything to preview
+   * this can be a hard-coded preview value, or a document stub
+   */
+  fallback?: Partial<SanityDocument> | PreviewValue
+}
+
+const EMPTY: {[key: string]: never} = {}
+
 /**
  * Obtain document preview values used in <SanityPreview> and <SanityDefaultPreview> components.
  * Also displays fallback values if the document cannot be found.
  *
  * @internal
  */
-export function getPreviewValueWithFallback({
-  snapshot,
-  original,
-  document,
-}: {
-  document?: Partial<SanityDocument> | PreviewValue | null | undefined
-  snapshot?: Partial<SanityDocument> | PreviewValue | null | undefined
-  original?: Partial<SanityDocument> | PreviewValue | null | undefined
-}) {
-  if (document && !original && !snapshot) {
-    return getMissingDocumentFallback(document)
-  }
-  return assignWith({}, snapshot, original, (objValue, srcValue) => {
-    return typeof srcValue === 'undefined' ? objValue : srcValue
-  }) as PreviewValue
+export function getPreviewValueWithFallback({snapshot, original, fallback}: Sources) {
+  return snapshot || original || getMissingDocumentFallback(fallback || EMPTY)
 }

packages/sanity/src/core/releases/tool/detail/useBundleDocuments.ts

@@ -229,7 +229,7 @@ const getPublishedArchivedReleaseDocumentsObservable = ({
             map(({snapshot}) => ({
               isLoading: false,
               values: prepareForPreview(
-                getPreviewValueWithFallback({snapshot, original: document}),
+                getPreviewValueWithFallback({snapshot, fallback: document}),
                 schemaType,
               ),
             })),

packages/sanity/src/core/studio/components/navbar/StudioNavbar.tsx

@@ -87,7 +87,7 @@ export function StudioNavbar(props: Omit<NavbarProps, 'renderDefault'>) {
     searchOpen,
   } = useContext(NavbarContext)
 
-  const {selectedPerspective} = usePerspective()
+  const {selectedPerspective, perspectiveStack} = usePerspective()
 
   const ToolMenu = useToolMenuComponent()
 
@@ -265,6 +265,7 @@ export function StudioNavbar(props: Omit<NavbarProps, 'renderDefault'>) {
                           onClose={handleCloseSearch}
                           onOpen={handleOpenSearch}
                           open={searchOpen}
+                          previewPerspective={perspectiveStack}
                         />
                       )}
                     </BoundaryElementProvider>

packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/SearchResultItem.tsx

@@ -69,10 +69,14 @@ export function SearchResultItem({
   // should the search items be disasabled
   const disabledAction = (!hasCreatePermission && state.canDisableAction) || existsInRelease
 
+  const documentStub = useMemo(
+    () => ({_id: documentId, _type: documentType}),
+    [documentId, documentType],
+  )
   const preview = useValuePreview({
     enabled: true,
     schemaType: type,
-    value: {_id: documentId},
+    value: documentStub,
   })
 
   const handleClick = useCallback(
@@ -105,6 +109,7 @@ export function SearchResultItem({
       >
         <SearchResultItemPreview
           documentId={documentId}
+          documentType={documentType}
           layout={layout}
           perspective={previewPerspective}
           presence={documentPresence}

packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/SearchResultItemPreview.tsx

@@ -19,6 +19,7 @@ import {type DocumentPresence, useDocumentPreviewStore} from '../../../../../../
 
 interface SearchResultItemPreviewProps {
   documentId: string
+  documentType: string
   layout?: GeneralPreviewLayoutKey
   presence?: DocumentPresence[]
   perspective?: PerspectiveStack
@@ -43,6 +44,7 @@ const SearchResultItemPreviewBox = styled(Box)`
  */
 export function SearchResultItemPreview({
   documentId,
+  documentType,
   layout,
   presence,
   schemaType,
@@ -55,6 +57,11 @@ export function SearchResultItemPreview({
     return getPreviewStateObservable(documentPreviewStore, schemaType, documentId, perspective)
   }, [documentPreviewStore, schemaType, documentId, perspective])
 
+  const documentStub = useMemo(
+    () => ({_id: documentId, _type: documentType}),
+    [documentId, documentType],
+  )
+
   const {isLoading, snapshot, original} = useObservable(observable, {
     snapshot: null,
     isLoading: true,
@@ -97,7 +104,7 @@ export function SearchResultItemPreview({
   return (
     <SearchResultItemPreviewBox>
       <SanityDefaultPreview
-        {...getPreviewValueWithFallback({snapshot, original})}
+        {...getPreviewValueWithFallback({snapshot, original, fallback: documentStub})}
         isPlaceholder={isLoading ?? true}
         layout={layout || 'default'}
         icon={schemaType.icon}

packages/sanity/src/core/tasks/components/form/fields/TargetField.tsx

@@ -122,6 +122,7 @@ function Preview(props: {value: TaskTarget; handleRemove: () => void}) {
       <Flex gap={1} align={'center'} justify={'space-between'}>
         <Card as={CardLink} radius={2} data-as="button">
           <SearchResultItemPreview
+            documentType={documentType}
             documentId={value.document._ref}
             layout={'compact'}
             presence={documentPresence}

packages/sanity/src/presentation/editor/ContentEditor.tsx

@@ -6,7 +6,6 @@ import {
   type Path,
   PreviewCard,
   SanityDefaultPreview,
-  type SanityDocument,
   Translate,
   useSchema,
   useTranslation,
@@ -77,8 +76,8 @@ export function ContentEditor(props: {
     return (
       <SanityDefaultPreview
         {...getPreviewValueWithFallback({
-          document: mainDocumentState!.document! as SanityDocument,
           snapshot: previewState.snapshot,
+          fallback: mainDocumentState!.document,
         })}
         schemaType={schemaType}
         status={

packages/sanity/src/structure/components/paneItem/PaneItemPreview.tsx

@@ -84,7 +84,7 @@ export function PaneItemPreview(props: PaneItemPreviewProps) {
 
   return (
     <SanityDefaultPreview
-      {...getPreviewValueWithFallback({document, snapshot, original})}
+      {...getPreviewValueWithFallback({snapshot, original, fallback: value})}
       isPlaceholder={isLoading}
       icon={icon}
       layout={layout}