Merge pull request #28120 from overleaf/dp-more-error-states

Add remaining pdf error states

GitOrigin-RevId: 4c0dd3fa105273eda5c9a010051a2cb60c0056c4

services/web/frontend/extracted-translations.json

@@ -1614,6 +1614,7 @@
   "something_went_wrong_processing_the_request": "",
   "something_went_wrong_rendering_pdf": "",
   "something_went_wrong_rendering_pdf_expected": "",
+  "something_went_wrong_rendering_pdf_expected_new": "",
   "something_went_wrong_server": "",
   "somthing_went_wrong_compiling": "",
   "sorry_it_looks_like_that_didnt_work_this_time": "",

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

@@ -8,6 +8,8 @@ import {
   ShortCompileTimeoutErrorState,
 } from './compile-timeout-error-state'
 import GeneralErrorState from './general-error-state'
+import RenderingErrorExpectedState from './rendering-error-expected-state'
+import RenderingErrorState from './rendering-error-state'
 
 // AvailableStates
 // - rendering-error-expected
@@ -131,6 +133,10 @@ function PdfErrorState() {
           }
         />
       )
+    case 'rendering-error-expected':
+      return <RenderingErrorExpectedState />
+    case 'rendering-error':
+      return <RenderingErrorState />
     default:
       return <GeneralErrorState />
   }

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

@@ -0,0 +1,35 @@
+import { Trans, useTranslation } from 'react-i18next'
+import ErrorState from './error-state'
+import OLButton from '@/shared/components/ol/ol-button'
+import { useDetachCompileContext as useCompileContext } from '@/shared/context/detach-compile-context'
+
+export default function RenderingErrorExpectedState() {
+  const { t } = useTranslation()
+
+  const { startCompile } = useCompileContext()
+
+  return (
+    <ErrorState
+      title={t('pdf_rendering_error')}
+      description={
+        <Trans
+          i18nKey="something_went_wrong_rendering_pdf_expected_new"
+          components={[
+            // eslint-disable-next-line jsx-a11y/anchor-has-content
+            <a
+              href="/learn/how-to/Resolving_access%2C_loading%2C_and_display_problems"
+              target="_blank"
+              key="troubleshooting-link"
+            />,
+          ]}
+        />
+      }
+      actions={[
+        // eslint-disable-next-line react/jsx-key
+        <OLButton variant="primary" size="sm" onClick={() => startCompile()}>
+          {t('recompile')}
+        </OLButton>,
+      ]}
+    />
+  )
+}

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

@@ -0,0 +1,55 @@
+import { Trans, useTranslation } from 'react-i18next'
+import ErrorState from './error-state'
+import getMeta from '@/utils/meta'
+
+export default function RenderingErrorState() {
+  const { t } = useTranslation()
+
+  return (
+    <ErrorState
+      title={t('pdf_rendering_error')}
+      description={
+        <>
+          {t('something_went_wrong_rendering_pdf')}
+          &nbsp;
+          <Trans
+            i18nKey="try_recompile_project_or_troubleshoot"
+            components={[
+              // eslint-disable-next-line jsx-a11y/anchor-has-content
+              <a
+                href="/learn/how-to/Resolving_access%2C_loading%2C_and_display_problems"
+                target="_blank"
+                key="troubleshooting-link"
+              />,
+            ]}
+          />
+          {getMeta('ol-compilesUserContentDomain') && (
+            <>
+              <br />
+              <br />
+              <Trans
+                i18nKey="new_compile_domain_notice"
+                values={{
+                  compilesUserContentDomain: new URL(
+                    getMeta('ol-compilesUserContentDomain')
+                  ).hostname,
+                }}
+                shouldUnescape
+                tOptions={{ interpolation: { escapeValue: true } }}
+                components={[
+                  <code key="domain" />,
+                  /* eslint-disable-next-line jsx-a11y/anchor-has-content */
+                  <a
+                    href="/learn/how-to/Resolving_access%2C_loading%2C_and_display_problems"
+                    target="_blank"
+                    key="troubleshooting-link"
+                  />,
+                ]}
+              />
+            </>
+          )}
+        </>
+      }
+    />
+  )
+}

services/web/frontend/stories/pdf-error-state.stories.tsx

@@ -24,6 +24,8 @@ const compileErrors = [
   'pdf-viewer-loading-error',
   'project-too-large',
   'rate-limited',
+  'rendering-error-expected',
+  'rendering-error',
   'success',
   'terminated',
   'timedout',

services/web/locales/en.json

@@ -2096,6 +2096,7 @@
   "something_went_wrong_processing_the_request": "Something went wrong processing the request",
   "something_went_wrong_rendering_pdf": "Something went wrong while rendering this PDF.",
   "something_went_wrong_rendering_pdf_expected": "There was an issue displaying this PDF. <0>Please recompile</0>",
+  "something_went_wrong_rendering_pdf_expected_new": "There was an issue displaying this PDF. Please recompile. If that doesn’t help, follow our <0>troubleshooting guide</0>.",
   "something_went_wrong_server": "Something went wrong. Please try again.",
   "somthing_went_wrong_compiling": "Sorry, something went wrong and your project could not be compiled. Please try again in a few moments.",
   "sorry_detected_sales_restricted_region": "Sorry, we’ve detected that you are in a region from which we cannot presently accept payments. If you think you’ve received this message in error, please <a href=\"__link__\">contact us</a> with details of your location, and we will look into this for you. We apologize for the inconvenience.",