Merge pull request #22178 from overleaf/jpa-file-view-hash-2

[web] migrate file-view to download from history-v1 (via web) 2/2

GitOrigin-RevId: 93172cbbd2d19a55bb27f5b0ca0b494f815a3632

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

@@ -12,7 +12,6 @@ import { LinkedFileIcon } from './file-view-icons'
 import { BinaryFile, hasProvider, LinkedFile } from '../types/binary-file'
 import FileViewRefreshButton from './file-view-refresh-button'
 import FileViewRefreshError from './file-view-refresh-error'
-import { useSnapshotContext } from '@/features/ide-react/context/snapshot-context'
 import MaterialIcon from '@/shared/components/material-icon'
 import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
 import OLButton from '@/features/ui/components/ol/ol-button'
@@ -53,7 +52,6 @@ type FileViewHeaderProps = {
 export default function FileViewHeader({ file }: FileViewHeaderProps) {
   const { _id: projectId } = useProjectContext()
   const { fileTreeReadOnly } = useFileTreeData()
-  const { fileTreeFromHistory } = useSnapshotContext()
   const { t } = useTranslation()
 
   const [refreshError, setRefreshError] = useState<Nullable<string>>(null)
@@ -86,11 +84,7 @@ export default function FileViewHeader({ file }: FileViewHeaderProps) {
         <OLButton
           variant="secondary"
           download={file.name}
-          href={
-            fileTreeFromHistory
-              ? `/project/${projectId}/blob/${file.hash}`
-              : `/project/${projectId}/file/${file.id}`
-          }
+          href={`/project/${projectId}/blob/${file.hash}?fallback=${file.id}`}
         >
           <BootstrapVersionSwitcher
             bs3={<Icon type="download" fw />}

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

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

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

@@ -3,7 +3,6 @@ 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 { useSnapshotContext } from '@/features/ide-react/context/snapshot-context'
 
 const MAX_FILE_SIZE = 2 * 1024 * 1024
 
@@ -17,7 +16,6 @@ export default function FileViewText({
   onError: () => void
 }) {
   const { _id: projectId } = useProjectContext()
-  const { fileTreeFromHistory } = useSnapshotContext()
 
   const [textPreview, setTextPreview] = useState('')
   const [shouldShowDots, setShouldShowDots] = useState(false)
@@ -30,9 +28,7 @@ export default function FileViewText({
     if (inFlight) {
       return
     }
-    let path = fileTreeFromHistory
-      ? `/project/${projectId}/blob/${file.hash}`
-      : `/project/${projectId}/file/${file.id}`
+    const path = `/project/${projectId}/blob/${file.hash}?fallback=${file.id}`
     const fetchContentLengthTimeout = setTimeout(
       () => fetchContentLengthController.abort(),
       10000
@@ -45,32 +41,27 @@ export default function FileViewText({
       })
       .then(fileSize => {
         let truncated = false
-        let maxSize = null
+        const headers = new Headers()
         if (fileSize && Number(fileSize) > MAX_FILE_SIZE) {
           truncated = true
-          maxSize = MAX_FILE_SIZE
-        }
-
-        if (maxSize != null) {
-          path += `?range=0-${maxSize}`
+          headers.set('Range', `bytes=0-${MAX_FILE_SIZE}`)
         }
         fetchDataTimeout = window.setTimeout(
           () => fetchDataController.abort(),
           60000
         )
-        return fetch(path, { signal: fetchDataController.signal }).then(
-          response => {
-            return response.text().then(text => {
-              if (truncated) {
-                text = text.replace(/\n.*$/, '')
-              }
+        const signal = fetchDataController.signal
+        return fetch(path, { signal, headers }).then(response => {
+          return response.text().then(text => {
+            if (truncated) {
+              text = text.replace(/\n.*$/, '')
+            }
 
-              setTextPreview(text)
-              onLoad()
-              setShouldShowDots(truncated)
-            })
-          }
-        )
+            setTextPreview(text)
+            onLoad()
+            setShouldShowDots(truncated)
+          })
+        })
       })
       .catch(err => {
         debugConsole.error('Error fetching file contents', err)
@@ -82,7 +73,6 @@ export default function FileViewText({
         clearTimeout(fetchDataTimeout)
       })
   }, [
-    fileTreeFromHistory,
     projectId,
     file.id,
     file.hash,