Rolling builds error logs notification (#28654)

* feat: allow for monthly tl builds experiment

* feat: add in-editor notification when rolling image has updated

* feat: add in-editor notification when rolling image has updated

* feat: allowing for different messages in experiment when user is optend in

* feat: add a banner notification in the error logs when the user is on the rolling build

* moving rolling check from context to util

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

Co-authored-by: Alf Eaton <alf.eaton@overleaf.com>

---------

Co-authored-by: Alf Eaton <alf.eaton@overleaf.com>
GitOrigin-RevId: fb669db28a7194babb299413f20209e76dcbd351

services/web/frontend/extracted-translations.json

@@ -1287,6 +1287,7 @@
   "please_contact_support_to_makes_change_to_your_plan": "",
   "please_enter_confirmation_code": "",
   "please_get_in_touch": "",
+  "please_keep_an_eye_out_for_issues": "",
   "please_link_before_making_primary": "",
   "please_provide_a_message": "",
   "please_provide_a_subject": "",
@@ -1869,6 +1870,7 @@
   "this_project_exceeded_collaborator_limit": "",
   "this_project_exceeded_compile_timeout_limit_on_free_plan": "",
   "this_project_has_more_than_max_collabs": "",
+  "this_project_is_compiled_using_untested_version": "",
   "this_project_is_public": "",
   "this_project_is_public_read_only": "",
   "this_project_will_appear_in_your_dropbox_folder_at": "",

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

@@ -17,6 +17,7 @@ import getMeta from '@/utils/meta'
 import PdfClearCacheButton from '@/features/pdf-preview/components/pdf-clear-cache-button'
 import PdfDownloadFilesButton from '@/features/pdf-preview/components/pdf-download-files-button'
 import { useIsNewErrorLogsPositionEnabled } from '../../utils/new-editor-utils'
+import RollingBuildSelectedReminder from './rolling-build-selected-reminder'
 
 const logsComponents: Array<{
   import: { default: ElementType }
@@ -85,6 +86,7 @@ function ErrorLogs({
       ))}
       <TabContent className="error-logs new-error-logs">
         <div className="logs-pane-content">
+          <RollingBuildSelectedReminder />
           {stoppedOnFirstError && includeErrors && <StopOnFirstErrorPrompt />}
 
           {loadingError && (

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

@@ -0,0 +1,33 @@
+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="please_keep_an_eye_out_for_issues"
+      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/monthly-texlive/rolling-compile-image-changed-alert.tsx

@@ -1,31 +1,28 @@
 import { useTutorial } from '@/shared/hooks/promotions/use-tutorial'
-
 import { useEditorContext } from '@/shared/context/editor-context'
-import { useProjectSettingsContext } from '../editor-left-menu/context/project-settings-context'
-
+import { useProjectContext } from '@/shared/context/project-context'
 import OLNotification from '@/shared/components/ol/ol-notification'
-import getMeta from '@/utils/meta'
 import { useTranslation } from 'react-i18next'
 import { useCallback } from 'react'
+import { onRollingBuild } from '@/shared/utils/rolling-build'
 
 export const TUTORIAL_KEY = 'rolling-compile-image-changed'
-const rollingImages = getMeta('ol-imageNames')
-  .filter(img => img.rolling)
-  .map(img => img.imageName)
 
 const RollingCompileImageChangedAlert = () => {
   const { completeTutorial } = useTutorial(TUTORIAL_KEY)
-
+  const { project } = useProjectContext()
   const { inactiveTutorials } = useEditorContext()
-  const { imageName } = useProjectSettingsContext()
+
   const { t } = useTranslation()
 
   const onClose = useCallback(() => {
     completeTutorial({ event: 'promo-click', action: 'complete' })
   }, [completeTutorial])
 
-  const onRollingBuild = imageName && rollingImages.includes(imageName)
-  if (inactiveTutorials.includes(TUTORIAL_KEY) || !onRollingBuild) {
+  if (
+    inactiveTutorials.includes(TUTORIAL_KEY) ||
+    !onRollingBuild(project?.imageName)
+  ) {
     return null
   }
 

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

@@ -1,6 +1,7 @@
 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'
@@ -41,6 +42,8 @@ function PdfLogsViewer({ alwaysVisible = false }: { alwaysVisible?: boolean }) {
       data-testid="logs-pane"
     >
       <div className="logs-pane-content">
+        <RollingBuildSelectedReminder />
+
         {codeCheckFailed && <PdfCodeCheckFailedNotice />}
 
         {stoppedOnFirstError && <StopOnFirstErrorPrompt />}

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

@@ -0,0 +1,33 @@
+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="please_keep_an_eye_out_for_issues"
+      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"
+    />
+  )
+}
+
+export default RollingBuildSelectedReminder

services/web/frontend/js/shared/utils/rolling-build.ts

@@ -0,0 +1,10 @@
+import getMeta from '@/utils/meta'
+const images = getMeta('ol-imageNames') || []
+
+const rollingImages = images
+  .filter(img => img.rolling)
+  .map(img => img.imageName)
+
+export function onRollingBuild(imageName: string | undefined) {
+  return Boolean(imageName && rollingImages.includes(imageName))
+}

services/web/locales/en.json

@@ -1685,6 +1685,7 @@
   "please_enter_confirmation_code": "Please enter your confirmation code",
   "please_enter_email": "Please enter your email address",
   "please_get_in_touch": "Please get in touch",
+  "please_keep_an_eye_out_for_issues": "Please keep an eye out for any issues with TeX Live, packages, or compilation, and <0>provide feedback here</0>. If you encounter problems, you can <1>revert your project</1> to a stable TeX Live version.",
   "please_link_before_making_primary": "Please confirm your email by linking to your institutional account before making it the primary email.",
   "please_provide_a_message": "Please provide a message",
   "please_provide_a_subject": "Please provide a subject",
@@ -2389,6 +2390,7 @@
   "this_project_exceeded_collaborator_limit": "This project exceeded the collaborator limit for your plan. All other users now have view-only access.",
   "this_project_exceeded_compile_timeout_limit_on_free_plan": "This project exceeded the compile timeout limit on our free plan.",
   "this_project_has_more_than_max_collabs": "This project has more than the maximum number of collaborators allowed on the project owner’s Overleaf plan. This means you could lose edit access from __linkSharingDate__.",
+  "this_project_is_compiled_using_untested_version": "This project is compiled using an untested version of TeX Live",
   "this_project_is_public": "This project is public and can be edited by anyone with the URL.",
   "this_project_is_public_read_only": "This project is public and can be viewed but not edited by anyone with the URL",
   "this_project_will_appear_in_your_dropbox_folder_at": "This project will appear in your Dropbox folder at ",