Merge pull request #22378 from overleaf/bg-issue22368

Fix frontend to handle missing hashes for image preview

GitOrigin-RevId: e67300d9b08b02b1670cb3a7bbd4483cf4486f51

services/web/frontend/js/features/file-tree/util/path.ts

@@ -3,6 +3,7 @@ import { FileTreeEntity } from '../../../../../types/file-tree-entity'
 import { Doc } from '../../../../../types/doc'
 import { FileRef } from '../../../../../types/file-ref'
 import { PreviewPath } from '../../../../../types/preview-path'
+import { fileUrl } from '../../utils/fileUrl'
 
 type DocFindResult = {
   entity: Doc
@@ -124,7 +125,7 @@ export function previewByPath(
     if (result?.type === 'fileRef') {
       const { name, _id: id, hash } = result.entity
       return {
-        url: `/project/${projectId}/blob/${hash}?fallback=${id}`,
+        url: fileUrl(projectId, id, hash),
         extension: name.slice(name.lastIndexOf('.') + 1),
       }
     }

services/web/frontend/js/features/file-view/components/file-view-header.tsx

@@ -3,6 +3,7 @@ import { Trans, useTranslation } from 'react-i18next'
 
 import Icon from '../../../shared/components/icon'
 import { formatTime, relativeDate } from '../../utils/format-date'
+import { fileUrl } from '../../utils/fileUrl'
 import { useFileTreeData } from '@/shared/context/file-tree-data-context'
 import { useProjectContext } from '@/shared/context/project-context'
 
@@ -84,7 +85,7 @@ export default function FileViewHeader({ file }: FileViewHeaderProps) {
         <OLButton
           variant="secondary"
           download={file.name}
-          href={`/project/${projectId}/blob/${file.hash}?fallback=${file.id}`}
+          href={fileUrl(projectId, file.id, file.hash)}
         >
           <BootstrapVersionSwitcher
             bs3={<Icon type="download" fw />}

services/web/frontend/js/features/file-view/components/file-view-image.tsx

@@ -1,5 +1,6 @@
 import { useProjectContext } from '../../../shared/context/project-context'
 import { BinaryFile } from '@/features/file-view/types/binary-file'
+import { fileUrl } from '../../utils/fileUrl'
 
 export default function FileViewImage({
   file,
@@ -11,10 +12,9 @@ export default function FileViewImage({
   onError: () => void
 }) {
   const { _id: projectId } = useProjectContext()
-
   return (
     <img
-      src={`/project/${projectId}/blob/${file.hash}?fallback=${file.id}`}
+      src={fileUrl(projectId, file.id, file.hash)}
       onLoad={onLoad}
       onError={onError}
       alt={file.name}

services/web/frontend/js/features/file-view/components/file-view-text.tsx

@@ -3,6 +3,7 @@ import { useProjectContext } from '../../../shared/context/project-context'
 import { debugConsole } from '@/utils/debugging'
 import useAbortController from '../../../shared/hooks/use-abort-controller'
 import { BinaryFile } from '@/features/file-view/types/binary-file'
+import { fileUrl } from '../../utils/fileUrl'
 
 const MAX_FILE_SIZE = 2 * 1024 * 1024
 
@@ -28,7 +29,7 @@ export default function FileViewText({
     if (inFlight) {
       return
     }
-    const path = `/project/${projectId}/blob/${file.hash}?fallback=${file.id}`
+    const path = fileUrl(projectId, file.id, file.hash)
     const fetchContentLengthTimeout = setTimeout(
       () => fetchContentLengthController.abort(),
       10000

services/web/frontend/js/features/utils/fileUrl.js

@@ -0,0 +1,10 @@
+// Helper function to compute the url for a file in history-v1 or filestore.
+// This will be obsolete when the migration to history-v1 is complete.
+
+export function fileUrl(projectId, id, hash) {
+  if (hash) {
+    return `/project/${projectId}/blob/${hash}?fallback=${id}`
+  } else {
+    return `/project/${projectId}/file/${id}`
+  }
+}

services/web/test/frontend/features/file-view/components/file-view.test.jsx

@@ -18,6 +18,7 @@ describe('<FileView/>', function () {
       source_entity_path: '/source-entity-path.ext',
       provider: 'project_file',
     },
+    hash: '012345678901234567890123',
     created: new Date(2021, 1, 17, 3, 24).toISOString(),
   }