Merge pull request #8218 from overleaf/ta-pdf-detach-safari-warnings

PDF Detach Safari Warning

GitOrigin-RevId: e6f8942d8c8c141d887c44921a09716c4e4c85ae

services/web/frontend/extracted-translations.json

@@ -312,6 +312,7 @@
   "pdf_compile_in_progress_error": "",
   "pdf_compile_rate_limit_hit": "",
   "pdf_compile_try_again": "",
+  "pdf_detach_safari_issues": "",
   "pdf_in_separate_tab": "",
   "pdf_only_hide_editor": "",
   "pdf_preview_error": "",

services/web/frontend/js/features/pdf-preview/components/pdf-hybrid-safari-warning.tsx

@@ -0,0 +1,38 @@
+import { useTranslation } from 'react-i18next'
+import { Button } from 'react-bootstrap'
+import Tooltip from '../../../shared/components/tooltip'
+import Icon from '../../../shared/components/icon'
+import { useLayoutContext } from '../../../shared/context/layout-context'
+
+const BROWSER_IS_SAFARI =
+  navigator.userAgent &&
+  /.*Safari\/.*/.test(navigator.userAgent) &&
+  !/.*Chrome\/.*/.test(navigator.userAgent) &&
+  !/.*Chromium\/.*/.test(navigator.userAgent)
+
+function PdfHybridSafariWarning() {
+  const { t } = useTranslation()
+  const { detachRole } = useLayoutContext()
+
+  if (!BROWSER_IS_SAFARI) {
+    return null
+  }
+
+  if (detachRole !== 'detached') {
+    return null
+  }
+
+  return (
+    <Tooltip
+      id="safari-pdf-detach-warning"
+      description={t('pdf_detach_safari_issues')}
+      overlayProps={{ placement: 'bottom' }}
+    >
+      <Button bsStyle="link">
+        <Icon type="warning" fw />
+      </Button>
+    </Tooltip>
+  )
+}
+
+export default PdfHybridSafariWarning

services/web/frontend/js/features/pdf-preview/components/pdf-preview-detached-root-safari-warning.js

@@ -0,0 +1,38 @@
+import { Alert } from 'react-bootstrap'
+import { useTranslation } from 'react-i18next'
+import usePersistedState from '../../../shared/hooks/use-persisted-state'
+
+const BROWSER_IS_SAFARI =
+  navigator.userAgent &&
+  /.*Safari\/.*/.test(navigator.userAgent) &&
+  !/.*Chrome\/.*/.test(navigator.userAgent) &&
+  !/.*Chromium\/.*/.test(navigator.userAgent)
+
+function PdfPreviewDetachedRootSafariWarning() {
+  const { t } = useTranslation()
+
+  const [hidePdfDetachSafariAlert, setHidePdfDetachSafariAlert] =
+    usePersistedState('hide-pdf-detach-safari-alert', false, true)
+
+  function handleDismiss() {
+    setHidePdfDetachSafariAlert(true)
+  }
+
+  if (!BROWSER_IS_SAFARI) {
+    return null
+  }
+
+  if (hidePdfDetachSafariAlert) {
+    return null
+  }
+
+  return (
+    <div className="global-alerts global-alerts-detached">
+      <Alert bsStyle="warning" onDismiss={handleDismiss}>
+        {t('pdf_detach_safari_issues')}
+      </Alert>
+    </div>
+  )
+}
+
+export default PdfPreviewDetachedRootSafariWarning

services/web/frontend/js/features/pdf-preview/components/pdf-preview-detached-root.js

@@ -2,11 +2,13 @@ import ReactDOM from 'react-dom'
 import PdfPreview from './pdf-preview'
 import { ContextRoot } from '../../../shared/context/root-context'
 import { Shortcuts } from './shortcuts'
+import PdfPreviewDetachedRootSafariWarning from './pdf-preview-detached-root-safari-warning'
 
 function PdfPreviewDetachedRoot() {
   return (
     <ContextRoot>
       <Shortcuts>
+        <PdfPreviewDetachedRootSafariWarning />
         <PdfPreview />
       </Shortcuts>
     </ContextRoot>

services/web/frontend/js/features/pdf-preview/components/pdf-preview-hybrid-toolbar.js

@@ -6,6 +6,7 @@ import PdfCompileButton from './pdf-compile-button'
 import PdfExpandButton from './pdf-expand-button'
 import PdfHybridLogsButton from './pdf-hybrid-logs-button'
 import PdfHybridDownloadButton from './pdf-hybrid-download-button'
+import PdfHybridSafariWarning from './pdf-hybrid-safari-warning'
 import PdfHybridCodeCheckButton from './pdf-hybrid-code-check-button'
 import PdfOrphanRefreshButton from './pdf-orphan-refresh-button'
 import { DetachedSynctexControl } from './detach-synctex-control'
@@ -60,6 +61,7 @@ function PdfPreviewHybridToolbarInner() {
         <PdfCompileButton />
         <PdfHybridLogsButton />
         <PdfHybridDownloadButton />
+        <PdfHybridSafariWarning />
       </div>
       <div className="toolbar-pdf-right">
         <PdfHybridCodeCheckButton />

services/web/frontend/stylesheets/app/editor.less

@@ -63,12 +63,20 @@
     display: inline-block;
     text-align: left;
     min-width: 400px;
-    padding: @global-alerts-padding;
     font-size: 14px;
     margin-bottom: (@line-height-computed / 4);
     position: relative;
     z-index: 20;
   }
+
+  .alert&:not(.alert-dismissable) {
+    padding: @global-alerts-padding;
+  }
+}
+
+.global-alerts-detached {
+  margin-top: 0;
+  padding-top: @margin-sm;
 }
 
 #try-reconnect-now-button {

services/web/locales/en.json

@@ -1653,6 +1653,7 @@
   "redirect_to_editor": "Redirect to editor",
   "layout_processing": "Layout processing",
   "your_browser_does_not_support_this_feature": "Sorry, your browser doesn’t support this feature. Please update your browser to its latest version.",
+  "pdf_detach_safari_issues": "Safari users reported experiencing problems with opening PDF in a new tab. If you are also experiencing problems, we recommend trying a different browser.",
   "show_in_code": "Show in code",
   "show_in_pdf": "Show in PDF",
   "fold_line": "Fold line",