first commit

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

@@ -0,0 +1,58 @@
+import OLButton from '@/features/ui/components/ol/ol-button'
+import MaterialIcon from '@/shared/components/material-icon'
+import { useTranslation } from 'react-i18next'
+import { useRailContext } from '../../contexts/rail-context'
+import { usePdfPreviewContext } from '@/features/pdf-preview/components/pdf-preview-provider'
+import { useDetachCompileContext as useCompileContext } from '@/shared/context/detach-compile-context'
+import { useIsNewEditorEnabled } from '../../utils/new-editor-utils'
+
+function PdfErrorState() {
+  const { loadingError } = usePdfPreviewContext()
+  // TODO ide-redesign-cleanup: rename showLogs to something else and check usages
+  const { showLogs } = useCompileContext()
+  const { t } = useTranslation()
+  const { openTab: openRailTab } = useRailContext()
+  const newEditor = useIsNewEditorEnabled()
+
+  if (!newEditor || (!loadingError && !showLogs)) {
+    return null
+  }
+
+  return (
+    <div className="pdf-error-state">
+      <div className="pdf-error-state-top-section">
+        <div className="pdf-error-state-warning-icon">
+          <MaterialIcon type="warning" />
+        </div>
+        <div className="pdf-error-state-text">
+          <p className="pdf-error-state-label">{t('pdf_couldnt_compile')}</p>
+          <p className="pdf-error-state-description">
+            {t('we_are_unable_to_generate_the_pdf_at_this_time')}
+          </p>
+        </div>
+        <OLButton
+          variant="secondary"
+          size="sm"
+          onClick={() => {
+            openRailTab('errors')
+          }}
+        >
+          {t('check_logs')}
+        </OLButton>
+      </div>
+      <div className="pdf-error-state-info-box">
+        <div className="pdf-error-state-info-box-title">
+          <MaterialIcon type="info" unfilled />
+          {t('why_might_this_happen')}
+        </div>
+        <ul className="pdf-error-state-info-box-text">
+          <li>{t('there_is_an_unrecoverable_latex_error')}</li>
+          <li>{t('the_document_environment_contains_no_content')}</li>
+          <li>{t('this_project_contains_a_file_called_output')}</li>
+        </ul>
+      </div>
+    </div>
+  )
+}
+
+export default PdfErrorState

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

@@ -0,0 +1,22 @@
+import { memo } from 'react'
+import OlButtonToolbar from '@/features/ui/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'
+
+function PdfPreviewHybridToolbar() {
+  // TODO: add detached pdf logic
+  return (
+    <OlButtonToolbar className="toolbar toolbar-pdf toolbar-pdf-hybrid">
+      <div className="toolbar-pdf-left">
+        <PdfCompileButton />
+        <PdfHybridDownloadButton />
+      </div>
+      <div className="toolbar-pdf-right">
+        <div className="toolbar-pdf-controls" id="toolbar-pdf-controls" />
+        {/* TODO: should we have switch to editor/code check/synctex buttons? */}
+      </div>
+    </OlButtonToolbar>
+  )
+}
+
+export default memo(PdfPreviewHybridToolbar)