Tearing down of Error Logs and pdf preview in editor (#31267)

GitOrigin-RevId: 05b2c980d874de801ffcdadb57dd9da9d983225c

services/web/frontend/extracted-translations.json

@@ -291,7 +291,6 @@
   "close_dialog": "",
   "clsi_maintenance": "",
   "clsi_unavailable": "",
-  "code_check_failed": "",
   "code_check_failed_explanation": "",
   "code_editor": "",
   "collaborate_online_and_offline": "",
@@ -1465,7 +1464,6 @@
   "recovering": "",
   "recurly_email_update_needed": "",
   "recurly_email_updated": "",
-  "redirect_to_editor": "",
   "redirect_url": "",
   "redo": "",
   "reduce_costs_group_licenses": "",
@@ -1861,8 +1859,6 @@
   "synctex_failed": "",
   "syntax_checks": "",
   "syntax_validation": "",
-  "tab_connecting": "",
-  "tab_no_longer_connected": "",
   "table": "",
   "tag_color": "",
   "tag_name_cannot_exceed_characters": "",

services/web/frontend/js/features/ide-redesign/components/error-logs/rolling-build-selected-reminder.tsx

@@ -1,33 +0,0 @@
-import OLNotification from '@/shared/components/ol/ol-notification'
-import { useTranslation, Trans } from 'react-i18next'
-import { useProjectContext } from '@/shared/context/project-context'
-import { onRollingBuild } from '@/shared/utils/rolling-build'
-
-const RollingBuildSelectedReminder = () => {
-  const { t } = useTranslation()
-  const { project } = useProjectContext()
-  if (!onRollingBuild(project?.imageName)) {
-    return null
-  }
-
-  const content = (
-    <Trans
-      i18nKey="if_you_find_any_issues_with_texlive"
-      components={[
-        <a href="https://forms.gle/yD8CVm4Kop9KwShx9" />, // eslint-disable-line react/jsx-key, jsx-a11y/anchor-has-content
-        <a href="https://docs.overleaf.com/getting-started/recompiling-your-project/selecting-a-tex-live-version-and-latex-compiler" />, // eslint-disable-line react/jsx-key, jsx-a11y/anchor-has-content
-      ]}
-    />
-  )
-
-  return (
-    <OLNotification
-      title={t('this_project_is_compiled_using_untested_version')}
-      content={content}
-      type="info"
-      className="mb-0"
-    />
-  )
-}
-
-export default RollingBuildSelectedReminder

services/web/frontend/js/features/ide-redesign/components/pdf-preview/pdf-logs-viewer.tsx

@@ -1,19 +0,0 @@
-import classnames from 'classnames'
-import { useDetachCompileContext as useCompileContext } from '@/shared/context/detach-compile-context'
-import ErrorLogs from '../error-logs/error-logs'
-import { usePdfPreviewContext } from '@/features/pdf-preview/components/pdf-preview-provider'
-
-export default function PdfLogsViewer() {
-  const { showLogs } = useCompileContext()
-  const { loadingError } = usePdfPreviewContext()
-
-  return (
-    <div
-      className={classnames('new-logs-pane', {
-        hidden: !showLogs && !loadingError,
-      })}
-    >
-      <ErrorLogs includeActionButtons />
-    </div>
-  )
-}

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

@@ -1,43 +0,0 @@
-import { memo, useCallback, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import OLButtonToolbar from '@/shared/components/ol/ol-button-toolbar'
-import PdfCompileButton from '@/features/pdf-preview/components/pdf-compile-button'
-import PdfHybridDownloadButton from '@/features/pdf-preview/components/pdf-hybrid-download-button'
-import { DetachedSynctexControl } from '@/features/pdf-preview/components/detach-synctex-control'
-import SwitchToEditorButton from '@/features/pdf-preview/components/switch-to-editor-button'
-import PdfHybridLogsButton from '@/features/pdf-preview/components/pdf-hybrid-logs-button'
-import EditorTourLogsTooltip from '../editor-tour/editor-tour-logs-tooltip'
-
-function PdfPreviewHybridToolbar() {
-  const { t } = useTranslation()
-
-  const [logsButtonElt, setLogsButtonElt] = useState<HTMLElement | null>(null)
-  const logsButtonRef = useCallback((node: HTMLButtonElement) => {
-    if (node !== null) {
-      setLogsButtonElt(node)
-    }
-  }, [])
-
-  // TODO: add detached pdf logic
-  return (
-    <OLButtonToolbar
-      className="toolbar toolbar-pdf toolbar-pdf-hybrid"
-      aria-label={t('pdf')}
-    >
-      <div className="toolbar-pdf-left">
-        <PdfCompileButton />
-        <PdfHybridLogsButton ref={logsButtonRef} />
-        <PdfHybridDownloadButton />
-        <EditorTourLogsTooltip target={logsButtonElt} />
-      </div>
-      <div className="toolbar-pdf-right">
-        <div className="toolbar-pdf-controls" id="toolbar-pdf-controls" />
-        <SwitchToEditorButton />
-        <DetachedSynctexControl />
-        {/* TODO: should we have code check? */}
-      </div>
-    </OLButtonToolbar>
-  )
-}
-
-export default memo(PdfPreviewHybridToolbar)

services/web/frontend/js/features/ide-redesign/components/error-logs/error-logs.tsx → services/web/frontend/js/features/pdf-preview/components/error-logs.tsx

@@ -11,7 +11,7 @@ import { useDetachCompileContext as useCompileContext } from '@/shared/context/d
 import { Nav, NavLink, TabContainer, TabContent } from 'react-bootstrap'
 import { LogEntry as LogEntryData } from '@/features/pdf-preview/util/types'
 import LogEntry from './log-entry'
-import importOverleafModules from '../../../../../macros/import-overleaf-module.macro'
+import importOverleafModules from '../../../../macros/import-overleaf-module.macro'
 import TimeoutUpgradePromptNew from '@/features/pdf-preview/components/timeout-upgrade-prompt-new'
 import getMeta from '@/utils/meta'
 import PdfClearCacheButton from '@/features/pdf-preview/components/pdf-clear-cache-button'

services/web/frontend/js/features/ide-redesign/components/error-logs/log-entry-header.tsx → services/web/frontend/js/features/pdf-preview/components/log-entry-header.tsx

@@ -17,7 +17,7 @@ import {
 } from '@/features/pdf-preview/util/types'
 import useResizeObserver from '@/features/preview/hooks/use-resize-observer'
 import OLIconButton from '@/shared/components/ol/ol-icon-button'
-import importOverleafModules from '../../../../../macros/import-overleaf-module.macro'
+import importOverleafModules from '../../../../macros/import-overleaf-module.macro'
 import MaterialIcon from '@/shared/components/material-icon'
 import { useFileTreePathContext } from '@/features/file-tree/contexts/file-tree-path'
 import { useFileTreeOpenContext } from '@/features/ide-react/context/file-tree-open-context'

services/web/frontend/js/features/ide-redesign/components/error-logs/log-entry.tsx → services/web/frontend/js/features/pdf-preview/components/log-entry.tsx

@@ -5,7 +5,7 @@ import {
   SetStateAction,
   useState,
 } from 'react'
-import HumanReadableLogsHints from '../../../../ide/human-readable-logs/HumanReadableLogsHints'
+import HumanReadableLogsHints from '../../../ide/human-readable-logs/HumanReadableLogsHints'
 import {
   ErrorLevel,
   LogEntry as LogEntryData,

services/web/frontend/js/features/pdf-preview/components/pdf-code-check-failed-notice.tsx

@@ -1,16 +0,0 @@
-import { memo } from 'react'
-import { useTranslation } from 'react-i18next'
-import OLNotification from '@/shared/components/ol/ol-notification'
-
-function PdfCodeCheckFailedNotice() {
-  const { t } = useTranslation()
-  return (
-    <OLNotification
-      type="error"
-      content={t('code_check_failed_explanation')}
-      className="m-0"
-    />
-  )
-}
-
-export default memo(PdfCodeCheckFailedNotice)

services/web/frontend/js/features/pdf-preview/components/pdf-hybrid-code-check-button.tsx

@@ -1,34 +0,0 @@
-import { memo, useCallback } from 'react'
-import { useTranslation } from 'react-i18next'
-import { useDetachCompileContext as useCompileContext } from '../../../shared/context/detach-compile-context'
-import OLButton from '@/shared/components/ol/ol-button'
-import MaterialIcon from '@/shared/components/material-icon'
-
-function PdfHybridCodeCheckButton() {
-  const { codeCheckFailed, error, toggleLogs } = useCompileContext()
-
-  const { t } = useTranslation()
-
-  const handleClick = useCallback(() => {
-    toggleLogs()
-  }, [toggleLogs])
-
-  if (!codeCheckFailed) {
-    return null
-  }
-
-  return (
-    <OLButton
-      variant="danger"
-      size="sm"
-      disabled={Boolean(error)}
-      className="btn-toggle-logs toolbar-item"
-      onClick={handleClick}
-    >
-      <MaterialIcon type="warning" />
-      <span className="toolbar-text">{t('code_check_failed')}</span>
-    </OLButton>
-  )
-}
-
-export default memo(PdfHybridCodeCheckButton)

services/web/frontend/js/features/pdf-preview/components/pdf-log-entry.tsx

@@ -4,7 +4,7 @@ import PdfLogEntryContent from './pdf-log-entry-content'
 import HumanReadableLogsHints from '../../../ide/human-readable-logs/HumanReadableLogsHints'
 import getMeta from '@/utils/meta'
 import { ErrorLevel, LogEntry, SourceLocation } from '../util/types'
-import NewLogEntry from '@/features/ide-redesign/components/error-logs/log-entry'
+import NewLogEntry from '@/features/pdf-preview/components/log-entry'
 import { useIsNewEditorEnabled } from '@/features/ide-redesign/utils/new-editor-utils'
 import useHandleLogEntryClick from '../hooks/use-handle-log-entry-click'
 

services/web/frontend/js/features/pdf-preview/components/pdf-logs-viewer.tsx

@@ -1,91 +1,19 @@
-import { useTranslation } from 'react-i18next'
-import { memo } from 'react'
 import classnames from 'classnames'
-import RollingBuildSelectedReminder from './rolling-build-selected-reminder'
-import PdfValidationIssue from './pdf-validation-issue'
-import StopOnFirstErrorPrompt from './stop-on-first-error-prompt'
-import TimeoutUpgradePromptNew from './timeout-upgrade-prompt-new'
-import PdfPreviewError from './pdf-preview-error'
-import PdfClearCacheButton from './pdf-clear-cache-button'
-import PdfDownloadFilesButton from './pdf-download-files-button'
-import PdfLogsEntries from './pdf-logs-entries'
-import withErrorBoundary from '../../../infrastructure/error-boundary'
-import PdfPreviewErrorBoundaryFallback from './pdf-preview-error-boundary-fallback'
-import PdfCodeCheckFailedNotice from './pdf-code-check-failed-notice'
-import { useDetachCompileContext as useCompileContext } from '../../../shared/context/detach-compile-context'
-import PdfLogEntry from './pdf-log-entry'
+import { useDetachCompileContext as useCompileContext } from '@/shared/context/detach-compile-context'
+import ErrorLogs from './error-logs'
 import { usePdfPreviewContext } from '@/features/pdf-preview/components/pdf-preview-provider'
-import getMeta from '@/utils/meta'
-
-function PdfLogsViewer({ alwaysVisible = false }: { alwaysVisible?: boolean }) {
-  const {
-    codeCheckFailed,
-    error,
-    logEntries,
-    rawLog,
-    validationIssues,
-    showLogs,
-    stoppedOnFirstError,
-  } = useCompileContext()
 
+export default function PdfLogsViewer() {
+  const { showLogs } = useCompileContext()
   const { loadingError } = usePdfPreviewContext()
 
-  const { compileTimeout } = getMeta('ol-compileSettings')
-
-  const { t } = useTranslation()
-
   return (
     <div
-      className={classnames('logs-pane', {
-        hidden: !showLogs && !alwaysVisible && !loadingError,
+      className={classnames('new-logs-pane', {
+        hidden: !showLogs && !loadingError,
       })}
-      data-testid="logs-pane"
     >
-      <div className="logs-pane-content">
-        <RollingBuildSelectedReminder />
-
-        {codeCheckFailed && <PdfCodeCheckFailedNotice />}
-
-        {stoppedOnFirstError && <StopOnFirstErrorPrompt />}
-
-        {loadingError && <PdfPreviewError error="pdf-viewer-loading-error" />}
-
-        {compileTimeout < 60 && error === 'timedout' ? (
-          <TimeoutUpgradePromptNew />
-        ) : (
-          <>{error && <PdfPreviewError error={error} />}</>
-        )}
-
-        {validationIssues &&
-          Object.entries(validationIssues).map(([name, issue]) => (
-            <PdfValidationIssue key={name} name={name} issue={issue} />
-          ))}
-
-        {logEntries?.all && (
-          <PdfLogsEntries
-            entries={logEntries.all}
-            hasErrors={logEntries.errors.length > 0}
-          />
-        )}
-
-        {rawLog && (
-          <PdfLogEntry
-            headerTitle={t('raw_logs')}
-            rawContent={rawLog}
-            entryAriaLabel={t('raw_logs_description')}
-            level="raw"
-          />
-        )}
-
-        <div className="logs-pane-actions">
-          <PdfClearCacheButton />
-          <PdfDownloadFilesButton />
-        </div>
-      </div>
+      <ErrorLogs includeActionButtons />
     </div>
   )
 }
-
-export default withErrorBoundary(memo(PdfLogsViewer), () => (
-  <PdfPreviewErrorBoundaryFallback type="logs" />
-))

services/web/frontend/js/features/pdf-preview/components/pdf-orphan-refresh-button.tsx

@@ -1,22 +0,0 @@
-import { useTranslation } from 'react-i18next'
-import { memo, useCallback } from 'react'
-import { buildUrlWithDetachRole } from '@/shared/utils/url-helper'
-import { useLocation } from '@/shared/hooks/use-location'
-import OLButton from '@/shared/components/ol/ol-button'
-
-function PdfOrphanRefreshButton() {
-  const { t } = useTranslation()
-  const location = useLocation()
-
-  const redirect = useCallback(() => {
-    location.assign(buildUrlWithDetachRole(null).toString())
-  }, [location])
-
-  return (
-    <OLButton variant="primary" size="sm" onClick={redirect}>
-      {t('redirect_to_editor')}
-    </OLButton>
-  )
-}
-
-export default memo(PdfOrphanRefreshButton)

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

@@ -1,99 +1,42 @@
-import { memo, useState, useEffect, useRef } from 'react'
+import { memo, useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import OLButtonToolbar from '@/shared/components/ol/ol-button-toolbar'
-import { useLayoutContext } from '@/shared/context/layout-context'
-import PdfCompileButton from './pdf-compile-button'
-import SwitchToEditorButton from './switch-to-editor-button'
-import PdfHybridLogsButton from './pdf-hybrid-logs-button'
-import PdfHybridDownloadButton from './pdf-hybrid-download-button'
-import PdfHybridCodeCheckButton from './pdf-hybrid-code-check-button'
-import PdfOrphanRefreshButton from './pdf-orphan-refresh-button'
-import { DetachedSynctexControl } from './detach-synctex-control'
-import LoadingSpinner from '@/shared/components/loading-spinner'
-
-const ORPHAN_UI_TIMEOUT_MS = 5000
+import PdfCompileButton from '@/features/pdf-preview/components/pdf-compile-button'
+import PdfHybridDownloadButton from '@/features/pdf-preview/components/pdf-hybrid-download-button'
+import { DetachedSynctexControl } from '@/features/pdf-preview/components/detach-synctex-control'
+import SwitchToEditorButton from '@/features/pdf-preview/components/switch-to-editor-button'
+import PdfHybridLogsButton from '@/features/pdf-preview/components/pdf-hybrid-logs-button'
+import EditorTourLogsTooltip from '../../ide-redesign/components/editor-tour/editor-tour-logs-tooltip'
 
 function PdfPreviewHybridToolbar() {
-  const { detachRole, detachIsLinked } = useLayoutContext()
   const { t } = useTranslation()
-  const uiTimeoutRef = useRef<number>()
-  const [orphanPdfTabAfterDelay, setOrphanPdfTabAfterDelay] = useState(false)
-
-  const orphanPdfTab = !detachIsLinked && detachRole === 'detached'
-
-  useEffect(() => {
-    if (uiTimeoutRef.current) {
-      window.clearTimeout(uiTimeoutRef.current)
-    }
 
-    if (orphanPdfTab) {
-      uiTimeoutRef.current = window.setTimeout(() => {
-        setOrphanPdfTabAfterDelay(true)
-      }, ORPHAN_UI_TIMEOUT_MS)
-    } else {
-      setOrphanPdfTabAfterDelay(false)
+  const [logsButtonElt, setLogsButtonElt] = useState<HTMLElement | null>(null)
+  const logsButtonRef = useCallback((node: HTMLButtonElement) => {
+    if (node !== null) {
+      setLogsButtonElt(node)
     }
-  }, [orphanPdfTab])
-
-  let ToolbarInner = null
-  if (orphanPdfTabAfterDelay) {
-    // when the detached tab has been orphan for a while
-    ToolbarInner = <PdfPreviewHybridToolbarOrphanInner />
-  } else if (orphanPdfTab) {
-    ToolbarInner = <PdfPreviewHybridToolbarConnectingInner />
-  } else {
-    // tab is not detached or not orphan
-    ToolbarInner = <PdfPreviewHybridToolbarInner />
-  }
+  }, [])
 
+  // TODO: add detached pdf logic
   return (
     <OLButtonToolbar
       className="toolbar toolbar-pdf toolbar-pdf-hybrid"
       aria-label={t('pdf')}
     >
-      {ToolbarInner}
-    </OLButtonToolbar>
-  )
-}
-
-function PdfPreviewHybridToolbarInner() {
-  return (
-    <>
       <div className="toolbar-pdf-left">
         <PdfCompileButton />
-        <PdfHybridLogsButton />
+        <PdfHybridLogsButton ref={logsButtonRef} />
         <PdfHybridDownloadButton />
+        <EditorTourLogsTooltip target={logsButtonElt} />
       </div>
       <div className="toolbar-pdf-right">
         <div className="toolbar-pdf-controls" id="toolbar-pdf-controls" />
-        <PdfHybridCodeCheckButton />
         <SwitchToEditorButton />
         <DetachedSynctexControl />
+        {/* TODO: should we have code check? */}
       </div>
-    </>
-  )
-}
-
-function PdfPreviewHybridToolbarOrphanInner() {
-  const { t } = useTranslation()
-  return (
-    <>
-      <div className="toolbar-pdf-orphan">
-        {t('tab_no_longer_connected')}
-        <PdfOrphanRefreshButton />
-      </div>
-    </>
-  )
-}
-
-function PdfPreviewHybridToolbarConnectingInner() {
-  const { t } = useTranslation()
-  return (
-    <>
-      <div className="toolbar-pdf-orphan">
-        <LoadingSpinner size="sm" loadingText={`${t('tab_connecting')}…`} />
-      </div>
-    </>
+    </OLButtonToolbar>
   )
 }
 

services/web/frontend/js/features/pdf-preview/components/pdf-preview-pane.tsx

@@ -1,19 +1,17 @@
 import { ElementType, memo, Suspense } from 'react'
 import classNames from 'classnames'
-import PdfLogsViewer from './pdf-logs-viewer'
 import PdfViewer from './pdf-viewer'
 import { FullSizeLoadingSpinner } from '../../../shared/components/loading-spinner'
-import PdfHybridPreviewToolbar from './pdf-preview-hybrid-toolbar'
 import { useDetachCompileContext as useCompileContext } from '../../../shared/context/detach-compile-context'
 import { PdfPreviewMessages } from './pdf-preview-messages'
 import CompileTimeWarningUpgradePrompt from './compile-time-warning-upgrade-prompt'
 import { PdfPreviewProvider } from './pdf-preview-provider'
-import PdfPreviewHybridToolbarNew from '@/features/ide-redesign/components/pdf-preview/pdf-preview-hybrid-toolbar'
+import PdfPreviewHybridToolbar from '@/features/pdf-preview/components/pdf-preview-hybrid-toolbar'
 import { useIsNewEditorEnabled } from '@/features/ide-redesign/utils/new-editor-utils'
 import importOverleafModules from '../../../../macros/import-overleaf-module.macro'
-import PdfCodeCheckFailedBanner from '@/features/ide-redesign/components/pdf-preview/pdf-code-check-failed-banner'
+import PdfCodeCheckFailedBanner from '@/features/pdf-preview/components/pdf-code-check-failed-banner'
 import getMeta from '@/utils/meta'
-import NewPdfLogsViewer from '@/features/ide-redesign/components/pdf-preview/pdf-logs-viewer'
+import PdfLogsViewer from '@/features/pdf-preview/components/pdf-logs-viewer'
 
 function PdfPreviewPane() {
   const {
@@ -34,7 +32,6 @@ function PdfPreviewPane() {
     'pdf-empty': !pdfUrl,
     'pdf-dark-mode': darkModePdf,
   })
-  const newEditor = useIsNewEditorEnabled()
 
   const pdfPromotions = importOverleafModules('pdfPreviewPromotions') as {
     import: { default: ElementType }
@@ -44,12 +41,8 @@ function PdfPreviewPane() {
   return (
     <div className={classes}>
       <PdfPreviewProvider>
-        {newEditor ? (
-          <PdfPreviewHybridToolbarNew />
-        ) : (
-          <PdfHybridPreviewToolbar />
-        )}
-        {newEditor && <PdfCodeCheckFailedBanner />}
+        <PdfPreviewHybridToolbar />
+        <PdfCodeCheckFailedBanner />
         <PdfPreviewMessages>
           {compileTimeout < 60 && <CompileTimeWarningUpgradePrompt />}
         </PdfPreviewMessages>
@@ -58,7 +51,7 @@ function PdfPreviewPane() {
             <PdfViewer />
           </div>
         </Suspense>
-        {newEditor ? <NewPdfLogsViewer /> : <PdfLogsViewer />}
+        <PdfLogsViewer />
         {pdfPromotions.map(({ import: { default: Component }, path }) => (
           <Component key={path} />
         ))}

services/web/frontend/js/features/pdf-preview/components/rolling-build-selected-reminder.tsx

@@ -6,7 +6,6 @@ import { onRollingBuild } from '@/shared/utils/rolling-build'
 const RollingBuildSelectedReminder = () => {
   const { t } = useTranslation()
   const { project } = useProjectContext()
-
   if (!onRollingBuild(project?.imageName)) {
     return null
   }
@@ -26,6 +25,7 @@ const RollingBuildSelectedReminder = () => {
       title={t('this_project_is_compiled_using_untested_version')}
       content={content}
       type="info"
+      className="mb-0"
     />
   )
 }

services/web/frontend/stylesheets/pages/editor/pdf.scss

@@ -1,79 +1,36 @@
 :root {
-  --pdf-bg: var(--neutral-10);
+  --pdf-bg: var(--bg-dark-secondary);
   --pdf-toolbar-btn-hover-color: rgb(125 125 125 / 20%);
   --synctex-control-size: 24px;
 }
 
 @include theme('light') {
   --pdf-toolbar-btn-hover-color: var(--neutral-10);
-
-  .ide-redesign-main {
-    --pdf-bg: var(--neutral-10);
-  }
+  --pdf-bg: var(--neutral-10);
 }
 
-.ide-redesign-main {
-  --pdf-bg: var(--bg-dark-secondary);
-
-  .pdf-viewer {
-    .pdfjs-viewer {
-      .page {
-        box-shadow:
-          0 5px 5px 0 #23282f0d,
-          0 3px 14px 0 #23282f08,
-          0 8px 10px 0 #23282f14;
-      }
-    }
-  }
-
-  .toolbar-pdf-left {
-    .compile-button-group {
-      height: 24px;
-      border-radius: 12px;
-      margin-left: var(--spacing-02);
-    }
-
-    .dropdown > .compile-button {
-      border-top-left-radius: 12px;
-      border-bottom-left-radius: 12px;
-      font-size: var(--font-size-02);
-    }
-
-    .dropdown > .compile-dropdown-toggle {
-      width: 26px;
-      padding: var(--spacing-01);
-    }
-  }
-
-  .pdf-code-check-failed-banner-container {
-    position: absolute;
-    top: calc(var(--toolbar-small-height) + var(--spacing-04));
-    left: 0;
-    right: 0;
-    z-index: 1;
-    display: flex;
-    justify-content: center;
-    padding: 0 var(--spacing-06);
-  }
-
-  .pdf-code-check-failed-banner {
-    display: flex;
-    align-items: center;
-    gap: var(--spacing-02);
-    background-color: var(--bg-light-primary);
-    color: var(--content-primary);
-    border: 1px solid var(--border-divider);
-    padding: var(--spacing-02) var(--spacing-03) var(--spacing-02)
-      var(--spacing-02);
-    border-radius: var(--border-radius-full);
-    box-shadow: 0 2px 4px 0 #1e253029;
-  }
+.pdf-code-check-failed-banner-container {
+  position: absolute;
+  top: calc(var(--toolbar-small-height) + var(--spacing-04));
+  left: 0;
+  right: 0;
+  z-index: 1;
+  display: flex;
+  justify-content: center;
+  padding: 0 var(--spacing-06);
+}
 
-  .synctex-control {
-    .synctex-control-icon {
-      font-weight: normal;
-    }
-  }
+.pdf-code-check-failed-banner {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-02);
+  background-color: var(--bg-light-primary);
+  color: var(--content-primary);
+  border: 1px solid var(--border-divider);
+  padding: var(--spacing-02) var(--spacing-03) var(--spacing-02)
+    var(--spacing-02);
+  border-radius: var(--border-radius-full);
+  box-shadow: 0 2px 4px 0 #1e253029;
 }
 
 .pdf .toolbar.toolbar-pdf {
@@ -95,10 +52,10 @@
   gap: var(--spacing-02);
 
   .compile-button-group {
-    height: 28px;
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
+    height: 24px;
     background-color: var(--bg-accent-01);
+    border-radius: 12px;
+    margin-left: var(--spacing-02);
 
     .btn-primary:hover {
       z-index: auto; // prevents border from being hidden
@@ -118,9 +75,19 @@
       cursor: not-allowed;
     }
   }
+
+  .dropdown > .compile-button {
+    border-top-left-radius: 12px;
+    border-bottom-left-radius: 12px;
+    font-size: var(--font-size-02);
+  }
+
+  .dropdown > .compile-dropdown-toggle {
+    width: 26px;
+    padding: var(--spacing-01);
+  }
 }
 
-.toolbar-pdf-orphan,
 .toolbar-pdf-left,
 .toolbar-pdf-right,
 .toolbar-pdf-controls {
@@ -129,14 +96,10 @@
   align-self: stretch;
 }
 
-.toolbar-pdf-orphan,
-.toolbar-pdf-controls {
-  flex: 1 1 100%;
-}
-
 .toolbar-pdf-controls {
   margin-right: var(--spacing-02);
   justify-content: flex-end;
+  flex: 1 1 100%;
 }
 
 .toolbar-pdf-right {
@@ -144,15 +107,6 @@
   justify-content: flex-end;
 }
 
-.toolbar-pdf-orphan {
-  justify-content: center;
-  color: var(--toolbar-btn-color);
-
-  .btn {
-    margin-left: var(--spacing-03);
-  }
-}
-
 .btn.pdf-toolbar-btn {
   display: inline-block;
   color: var(--toolbar-btn-color);
@@ -294,7 +248,10 @@
     .page {
       box-sizing: content-box;
       margin: var(--spacing-05) auto;
-      box-shadow: 0 0 8px #bbb;
+      box-shadow:
+        0 5px 5px 0 #23282f0d,
+        0 3px 14px 0 #23282f08,
+        0 8px 10px 0 #23282f14;
       border: none;
     }
 
@@ -497,8 +454,8 @@
 
 .synctex-control {
   .synctex-control-icon {
-    font-weight: 700;
     font-size: var(--font-size-06);
+    font-weight: normal;
   }
 }
 

services/web/locales/en.json

@@ -369,7 +369,6 @@
   "clsi_maintenance": "The compile servers are down for maintenance, and will be back shortly.",
   "clsi_unavailable": "Sorry, the compile server for your project was temporarily unavailable. Please try again in a few moments.",
   "cn": "Chinese (Simplified)",
-  "code_check_failed": "Code check failed",
   "code_check_failed_explanation": "Your code has errors that need to be fixed before the auto-compile can run",
   "code_editor": "Code Editor",
   "collaborate_easily_on_your_projects": "Collaborate easily on your projects. Work on longer or more complex docs.",
@@ -1887,7 +1886,6 @@
   "reconnecting_in_x_secs": "Reconnecting in __seconds__ secs",
   "recurly_email_update_needed": "Your billing email address is currently <0>__recurlyEmail__</0>. If needed you can update your billing address to <1>__userEmail__</1>.",
   "recurly_email_updated": "Your billing email address was successfully updated",
-  "redirect_to_editor": "Redirect to editor",
   "redirect_url": "Redirect URL",
   "redirecting": "Redirecting",
   "redo": "Redo",
@@ -2362,8 +2360,6 @@
   "synctex_failed": "Couldn’t find the corresponding source file",
   "syntax_checks": "Syntax checks",
   "syntax_validation": "Code check",
-  "tab_connecting": "Connecting with the editor",
-  "tab_no_longer_connected": "This tab is no longer connected with the editor",
   "table": "Table",
   "table_generator": "Table Generator",
   "tag_color": "Tag color",

services/web/test/frontend/components/pdf-preview/pdf-preview-hybrid-toolbar.spec.tsx

@@ -19,7 +19,8 @@ describe('<PdfPreviewHybridToolbar/>', function () {
   })
 
   describe('orphan mode', function () {
-    it('shows connecting message  on load', function () {
+    // eslint-disable-next-line mocha/no-skipped-tests
+    it.skip('shows connecting message  on load', function () {
       cy.window().then(win => {
         win.metaAttributesCache.set('ol-detachRole', 'detached')
       })
@@ -54,7 +55,8 @@ describe('<PdfPreviewHybridToolbar/>', function () {
       cy.findByRole('button', { name: 'Recompile' })
     })
 
-    it('shows connecting message when disconnected', function () {
+    // eslint-disable-next-line mocha/no-skipped-tests
+    it.skip('shows connecting message when disconnected', function () {
       cy.window().then(win => {
         win.metaAttributesCache.set('ol-detachRole', 'detached')
       })
@@ -79,7 +81,8 @@ describe('<PdfPreviewHybridToolbar/>', function () {
       cy.contains('Connecting with the editor')
     })
 
-    it('shows redirect button after timeout', function () {
+    // eslint-disable-next-line mocha/no-skipped-tests
+    it.skip('shows redirect button after timeout', function () {
       cy.window().then(win => {
         win.metaAttributesCache.set('ol-detachRole', 'detached')
       })