fix(core): batch requests for archived releases view (#8779)

Author: pedrobonamin

packages/sanity/src/core/releases/i18n/resources.ts

@@ -130,8 +130,6 @@ const releasesLocaleStrings = {
   /** Title for dialog for discarding a version of a document */
   'discard-version-dialog.title': 'Yes, discard version',
 
-  /** Text for when documents of a release are loading */
-  'document-loading': 'Loading documents',
   /** Label for when a document in a release has multiple validation warnings */
   'document-validation.error_other': '{{count}} validation errors',
   /** Label for when a document in a release has a single validation warning */
@@ -162,6 +160,14 @@ const releasesLocaleStrings = {
   /** Label text for the loading state whilst release is being loaded */
   'loading-release': 'Loading release',
 
+  /** Text for when documents of a release are loading */
+  'loading-release-documents': 'Loading documents',
+  /** Title text for when loading documents on a release failed */
+  'loading-release-documents.error.title': 'Something went wrong',
+  /** Description text for when loading documents on a release failed */
+  'loading-release-documents.error.description':
+    "We're unable to load the documents for this release. Please try again later.",
+
   /** Label for the release menu */
   'menu.label': 'Release menu',
   /** Tooltip for the release menu */

packages/sanity/src/core/releases/tool/detail/ReleaseDetail.tsx

@@ -1,4 +1,6 @@
-import {Card, Container, Flex, Heading, Stack} from '@sanity/ui'
+import {ErrorOutlineIcon} from '@sanity/icons'
+import {Box, Card, Container, Flex, Heading, Stack, Text} from '@sanity/ui'
+import {motion} from 'framer-motion'
 import {useMemo, useRef, useState} from 'react'
 import {useRouter} from 'sanity/router'
 
@@ -19,18 +21,22 @@ import {ReleaseSummary} from './ReleaseSummary'
 import {useBundleDocuments} from './useBundleDocuments'
 
 export type ReleaseInspector = 'activity'
+const MotionCard = motion(Card)
 
 export const ReleaseDetail = () => {
   const router = useRouter()
   const [inspector, setInspector] = useState<ReleaseInspector | undefined>(undefined)
   const {t} = useTranslation(releasesLocaleNamespace)
-
   const {releaseId: releaseIdRaw}: ReleasesRouterState = router.state
   const releaseId = decodeURIComponent(releaseIdRaw || '')
   const {data, loading} = useActiveReleases()
   const {data: archivedReleases} = useArchivedReleases()
 
-  const {loading: documentsLoading, results} = useBundleDocuments(releaseId)
+  const {
+    loading: documentsLoading,
+    results,
+    error: bundleDocumentsError,
+  } = useBundleDocuments(releaseId)
   const releaseEvents = useReleaseEvents(releaseId)
 
   const documentIds = results.map((result) => result.document?._id)
@@ -43,8 +49,33 @@ export const ReleaseDetail = () => {
   const scrollContainerRef = useRef<HTMLDivElement | null>(null)
 
   const detailContent = useMemo(() => {
+    if (bundleDocumentsError) {
+      return (
+        <Box padding={3}>
+          <MotionCard
+            initial={{opacity: 0}}
+            animate={{opacity: 1}}
+            tone="critical"
+            padding={4}
+            radius={4}
+          >
+            <Flex gap={3}>
+              <Text size={1}>
+                <ErrorOutlineIcon />
+              </Text>
+              <Stack space={4}>
+                <Text size={1} weight="semibold">
+                  {t('loading-release-documents.error.title')}
+                </Text>
+                <Text size={1}>{t('loading-release-documents.error.description')}</Text>
+              </Stack>
+            </Flex>
+          </MotionCard>
+        </Box>
+      )
+    }
     if (documentsLoading) {
-      return <LoadingBlock title={t('document-loading')} />
+      return <LoadingBlock title={t('loading-release-documents')} showText />
     }
     if (!releaseInDetail) return null
 
@@ -56,7 +87,14 @@ export const ReleaseDetail = () => {
         scrollContainerRef={scrollContainerRef}
       />
     )
-  }, [releaseInDetail, documentsLoading, history.documentsHistory, results, t])
+  }, [
+    bundleDocumentsError,
+    documentsLoading,
+    releaseInDetail,
+    results,
+    history.documentsHistory,
+    t,
+  ])
 
   if (loading) {
     return (

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

@@ -9,10 +9,14 @@ import {useMemo} from 'react'
 import {useObservable} from 'react-rx'
 import {combineLatest, from, type Observable, of} from 'rxjs'
 import {
+  catchError,
+  concatMap,
   distinctUntilChanged,
+  expand,
   filter,
   map,
   mergeMap,
+  reduce,
   startWith,
   switchAll,
   switchMap,
@@ -48,7 +52,11 @@ export interface DocumentInRelease {
   }
 }
 
-type ReleaseDocumentsObservableResult = Observable<{loading: boolean; results: DocumentInRelease[]}>
+type ReleaseDocumentsObservableResult = Observable<{
+  loading: boolean
+  results: DocumentInRelease[]
+  error: Error | null
+}>
 
 const getActiveReleaseDocumentsObservable = ({
   schema,
@@ -153,7 +161,10 @@ const getActiveReleaseDocumentsObservable = ({
           })),
         )
       }),
-      map((results) => ({loading: false, results})),
+      map((results) => ({loading: false, results, error: null})),
+      catchError((error) => {
+        return of({loading: false, results: [], error})
+      }),
     )
 }
 
@@ -172,49 +183,73 @@ const getPublishedArchivedReleaseDocumentsObservable = ({
   const observableClient = client.observable
   const dataset = client.config().dataset
 
-  if (!release.finalDocumentStates?.length) return of({loading: false, results: []})
+  if (!release.finalDocumentStates?.length) return of({loading: false, results: [], error: null})
 
-  return from(release.finalDocumentStates || []).pipe(
-    mergeMap(({id: documentId}) => {
-      const document$ = observableClient
-        .request<{documents: DocumentInRelease['document'][]}>({
-          url: `/data/history/${dataset}/documents/${documentId}?lastRevision=true`,
-        })
-        .pipe(map(({documents: [document]}) => document))
+  function batchRequestDocumentFromHistory(startIndex: number) {
+    const finalIndex = startIndex + 10
+    return observableClient
+      .request<{documents: DocumentInRelease['document'][]}>({
+        url: `/data/history/${dataset}/documents/${release.finalDocumentStates
+          ?.slice(startIndex, finalIndex)
+          .map((d) => d.id)
+          .join(',')}?lastRevision=true`,
+      })
+      .pipe(map(({documents}) => ({documents, finalIndex})))
+  }
+
+  const documents$ = batchRequestDocumentFromHistory(0).pipe(
+    expand((response) => {
+      if (release.finalDocumentStates && response.finalIndex < release.finalDocumentStates.length) {
+        // Continue with next batch
+        return batchRequestDocumentFromHistory(response.finalIndex)
+      }
+      // End recursion by emitting an empty observable
+      return of()
+    }),
+    reduce(
+      (documents: DocumentInRelease['document'][], batch) => documents.concat(batch.documents),
+      [],
+    ),
+  )
 
-      const previewValues$ = document$.pipe(
-        switchMap((document) => {
+  return documents$.pipe(
+    mergeMap((documents) => {
+      return from(documents).pipe(
+        concatMap((document) => {
           const schemaType = schema.get(document._type)
           if (!schemaType) {
             throw new Error(`Schema type not found for document type ${document._type}`)
           }
-
-          return documentPreviewStore.observeForPreview(document, schemaType).pipe(
+          const previewValues$ = documentPreviewStore.observeForPreview(document, schemaType).pipe(
             take(1),
             map(({snapshot}) => ({
               isLoading: false,
               values: snapshot,
             })),
             startWith({isLoading: true, values: {}}),
+            filter(({isLoading}) => !isLoading),
           )
-        }),
-        filter(({isLoading}) => !isLoading),
-      )
 
-      return combineLatest([document$, previewValues$]).pipe(
-        map(([document, previewValues]) => ({
-          document,
-          previewValues,
-          memoKey: uuid(),
-          validation: {validation: [], hasError: false, isValidating: false},
+          return previewValues$.pipe(
+            map((previewValues) => ({
+              document,
+              previewValues,
+              memoKey: uuid(),
+              validation: {validation: [], hasError: false, isValidating: false},
+            })),
+          )
+        }),
+        toArray(),
+        map((results) => ({
+          loading: false,
+          results,
+          error: null,
         })),
       )
     }),
-    toArray(),
-    map((results) => ({
-      loading: false,
-      results,
-    })),
+    catchError((error) => {
+      return of({loading: false, results: [], error})
+    }),
   )
 }
 
@@ -257,12 +292,13 @@ const getReleaseDocumentsObservable = ({
         releaseId,
       })
     }),
-    startWith({loading: true, results: []}),
+    startWith({loading: true, results: [], error: null}),
   )
 
 export function useBundleDocuments(releaseId: string): {
   loading: boolean
   results: DocumentInRelease[]
+  error: null | Error
 } {
   const documentPreviewStore = useDocumentPreviewStore()
   const {getClient, i18n} = useSource()
@@ -282,5 +318,5 @@ export function useBundleDocuments(releaseId: string): {
     [schema, documentPreviewStore, getClient, releaseId, i18n, releasesState$],
   )
 
-  return useObservable(releaseDocumentsObservable, {loading: true, results: []})
+  return useObservable(releaseDocumentsObservable, {loading: true, results: [], error: null})
 }