Merge pull request #35465 from overleaf/mj-download-file-button

[web] Add download file button during network stall

GitOrigin-RevId: f85c69c5ce5bc2a0c28c3b5205f108f983fe4c8b

services/web/frontend/js/features/source-editor/components/toolbar/download-file-button.tsx

@@ -0,0 +1,32 @@
+import OLButton from '@/shared/components/ol/ol-button'
+import { useCodeMirrorViewContext } from '../codemirror-context'
+import { useCallback } from 'react'
+import { useEditorOpenDocContext } from '@/features/ide-react/context/editor-open-doc-context'
+import { useTranslation } from 'react-i18next'
+
+const DownloadFileButton = () => {
+  const view = useCodeMirrorViewContext()
+  const { openDocName } = useEditorOpenDocContext()
+  const { t } = useTranslation()
+
+  const downloadFile = useCallback(() => {
+    const doc = view.state.doc.toString()
+    const blob = new Blob([doc], { type: 'application/octet-stream' })
+    const url = URL.createObjectURL(blob)
+    const link = document.createElement('a')
+    link.href = url
+    link.download = openDocName ?? 'document.txt'
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+    setTimeout(() => URL.revokeObjectURL(url), 0)
+  }, [view, openDocName])
+
+  return (
+    <OLButton variant="secondary" size="sm" onClick={downloadFile}>
+      {t('download_file')}
+    </OLButton>
+  )
+}
+
+export default DownloadFileButton

services/web/frontend/js/features/source-editor/components/toolbar/toolbar-layout.tsx

@@ -12,6 +12,8 @@ import { ToggleSearchButton } from './toggle-search-button'
 import SwitchToPDFButton from '../switch-to-pdf-button'
 import importOverleafModules from '../../../../../macros/import-overleaf-module.macro'
 import { useFeatureFlag } from '@/shared/context/split-test-context'
+import useIsNetworkStalled from '@/features/ide-react/hooks/use-is-network-stalled'
+import DownloadFileButton from './download-file-button'
 
 type ToolbarLayoutProps = {
   children: ReactNode
@@ -81,8 +83,10 @@ function Right({
   const visualPreviewEnabled = useFeatureFlag('visual-preview')
   const isToolbarMigration = useFeatureFlag('writefull-toolbar-migration')
   const { features } = useProjectContext()
+  const networkIsStalled = useIsNetworkStalled()
   return (
     <div className="ol-toolbar-layout-right">
+      {networkIsStalled && <DownloadFileButton />}
       {!visualPreviewEnabled && <EditorSwitch />}
       {/* trackChangesVisible controls provider/UI availability; trackChanges
           (checked inside the switcher) controls the actual feature entitlement.