Merge pull request #8405 from overleaf/em-halt-on-error-beta-survey

Stop on first error beta badges

GitOrigin-RevId: 1f5609518a81d12eb81fd4d1ca51ef432e039548

services/web/frontend/js/features/pdf-preview/components/pdf-preview-error.js

@@ -1,10 +1,11 @@
 import PropTypes from 'prop-types'
 import { useTranslation, Trans } from 'react-i18next'
-import { memo, useCallback } from 'react'
+import { memo, useCallback, useMemo } from 'react'
 import { Button } from 'react-bootstrap'
 import PdfLogEntry from './pdf-log-entry'
 import { useDetachCompileContext as useCompileContext } from '../../../shared/context/detach-compile-context'
 import { useStopOnFirstError } from '../../../shared/hooks/use-stop-on-first-error'
+import BetaBadge from '../../../shared/components/beta-badge'
 import getMeta from '../../../utils/meta'
 
 function PdfPreviewError({ error }) {
@@ -146,12 +147,13 @@ PdfPreviewError.propTypes = {
 
 export default memo(PdfPreviewError)
 
-function ErrorLogEntry({ title, children }) {
+function ErrorLogEntry({ title, headerIcon, children }) {
   const { t } = useTranslation()
 
   return (
     <PdfLogEntry
       headerTitle={title}
+      headerIcon={headerIcon}
       formattedContent={children}
       entryAriaLabel={t('compile_error_entry_description')}
       level="error"
@@ -160,6 +162,7 @@ function ErrorLogEntry({ title, children }) {
 }
 ErrorLogEntry.propTypes = {
   title: PropTypes.string.isRequired,
+  headerIcon: PropTypes.element,
   children: PropTypes.any.isRequired,
 }
 
@@ -178,6 +181,22 @@ function TimedOutLogEntry() {
     setAnimateCompileDropdownArrow(true)
   }, [enableStopOnFirstError, startCompile, setAnimateCompileDropdownArrow])
 
+  const betaBadgeTooltip = useMemo(
+    () => ({
+      id: 'stop-on-first-error-tooltip',
+      placement: 'bottom',
+      className: 'tooltip-wide',
+      text: (
+        <>
+          We are beta testing the “Stop on first error” compilation mode.
+          <br />
+          Click to give feedback
+        </>
+      ),
+    }),
+    []
+  )
+
   if (showStopOnFirstError) {
     return (
       <ErrorLogEntry title={t('timedout')}>
@@ -213,6 +232,10 @@ function TimedOutLogEntry() {
                       onClick={handleEnableStopOnFirstErrorClick}
                     />,
                   ]}
+                />{' '}
+                <BetaBadge
+                  tooltip={betaBadgeTooltip}
+                  url="https://forms.gle/7M8821o5RDZrFKoF6"
                 />
               </>
             )}

services/web/frontend/js/features/pdf-preview/components/stop-on-first-error-prompt.js

@@ -1,9 +1,10 @@
-import { useCallback } from 'react'
+import { useCallback, useMemo } from 'react'
 import { useTranslation, Trans } from 'react-i18next'
 import { Button } from 'react-bootstrap'
 import PdfLogEntry from './pdf-log-entry'
 import { useDetachCompileContext as useCompileContext } from '../../../shared/context/detach-compile-context'
 import { useStopOnFirstError } from '../../../shared/hooks/use-stop-on-first-error'
+import BetaBadge from '../../../shared/components/beta-badge'
 
 export default function StopOnFirstErrorPrompt() {
   const { t } = useTranslation()
@@ -18,9 +19,31 @@ export default function StopOnFirstErrorPrompt() {
     setAnimateCompileDropdownArrow(true)
   }, [disableStopOnFirstError, startCompile, setAnimateCompileDropdownArrow])
 
+  const betaBadgeTooltip = useMemo(
+    () => ({
+      id: 'stop-on-first-error-tooltip',
+      placement: 'right',
+      className: 'tooltip-wide',
+      text: (
+        <>
+          We are beta testing the “Stop on first error” compilation mode.
+          <br />
+          Click to give feedback
+        </>
+      ),
+    }),
+    []
+  )
+
   return (
     <PdfLogEntry
       headerTitle={t('stop_on_first_error_enabled_title')}
+      headerIcon={
+        <BetaBadge
+          tooltip={betaBadgeTooltip}
+          url="https://forms.gle/7M8821o5RDZrFKoF6"
+        />
+      }
       formattedContent={
         <>
           <Trans

services/web/frontend/js/features/preview/components/preview-logs-pane-max-entries.js

@@ -1,4 +1,4 @@
-import { useCallback } from 'react'
+import { useCallback, useMemo } from 'react'
 import PropTypes from 'prop-types'
 import { Trans, useTranslation } from 'react-i18next'
 import { Button } from 'react-bootstrap'
@@ -7,6 +7,7 @@ import Icon from '../../../shared/components/icon'
 import getMeta from '../../../utils/meta'
 import { useDetachCompileContext as useCompileContext } from '../../../shared/context/detach-compile-context'
 import { useStopOnFirstError } from '../../../shared/hooks/use-stop-on-first-error'
+import BetaBadge from '../../../shared/components/beta-badge'
 
 function PreviewLogsPaneMaxEntries({ totalEntries, entriesShown, hasErrors }) {
   const { t } = useTranslation()
@@ -28,61 +29,83 @@ function PreviewLogsPaneMaxEntries({ totalEntries, entriesShown, hasErrors }) {
     setAnimateCompileDropdownArrow(true)
   }, [enableStopOnFirstError, startCompile, setAnimateCompileDropdownArrow])
 
+  const betaBadgeTooltip = useMemo(
+    () => ({
+      id: 'stop-on-first-error-tooltip',
+      placement: 'bottom',
+      className: 'tooltip-wide',
+      text: (
+        <>
+          We are beta testing the “Stop on first error” compilation mode.
+          <br />
+          Click to give feedback
+        </>
+      ),
+    }),
+    []
+  )
+
   return (
     <div className="log-entry" aria-label={t('log_entry_maximum_entries')}>
       <PreviewLogEntryHeader level="raw" headerTitle={title} />
       <div className="log-entry-content">
-        {showStopOnFirstError ? (
-          hasErrors && !stoppedOnFirstError ? (
-            <>
+        <div className="log-entry-formatted-content">
+          {showStopOnFirstError ? (
+            hasErrors && !stoppedOnFirstError ? (
+              <>
+                <p>
+                  <Icon type="lightbulb-o" />
+                  &nbsp;
+                  <strong>{t('tip')}: </strong>
+                  <Trans
+                    i18nKey="log_entry_maximum_entries_enable_stop_on_first_error"
+                    components={{
+                      button: (
+                        <Button
+                          bsSize="xs"
+                          bsStyle="info"
+                          onClick={handleEnableStopOnFirstErrorClick}
+                        />
+                      ),
+                      'learn-more-link': (
+                        // eslint-disable-next-line jsx-a11y/anchor-has-content
+                        <a href="https://www.overleaf.com/learn/latex/Questions/Tips_and_Tricks_for_Troubleshooting_LaTeX" />
+                      ),
+                    }}
+                  />{' '}
+                  <BetaBadge
+                    tooltip={betaBadgeTooltip}
+                    url="https://forms.gle/7M8821o5RDZrFKoF6"
+                  />
+                </p>
+                <p>{t('log_entry_maximum_entries_see_full_logs')}</p>
+              </>
+            ) : (
               <p>
                 <Icon type="lightbulb-o" />
                 &nbsp;
                 <strong>{t('tip')}: </strong>
-                <Trans
-                  i18nKey="log_entry_maximum_entries_enable_stop_on_first_error"
-                  components={{
-                    button: (
-                      <Button
-                        bsSize="xs"
-                        bsStyle="info"
-                        onClick={handleEnableStopOnFirstErrorClick}
-                      />
-                    ),
-                    'learn-more-link': (
-                      // eslint-disable-next-line jsx-a11y/anchor-has-content
-                      <a href="https://www.overleaf.com/learn/latex/Questions/Tips_and_Tricks_for_Troubleshooting_LaTeX" />
-                    ),
-                  }}
-                />
+                {t('log_entry_maximum_entries_see_full_logs')}
               </p>
-              <p>{t('log_entry_maximum_entries_see_full_logs')}</p>
-            </>
+            )
           ) : (
-            <p>
+            <>
               <Icon type="lightbulb-o" />
               &nbsp;
-              <strong>{t('tip')}: </strong>
-              {t('log_entry_maximum_entries_see_full_logs')}
-            </p>
-          )
-        ) : (
-          <>
-            <Icon type="lightbulb-o" />
-            &nbsp;
-            {hasErrors ? (
-              <Trans
-                i18nKey="log_entry_maximum_entries_message"
-                components={[<b />, <p />]} // eslint-disable-line react/jsx-key
-              />
-            ) : (
-              <Trans
-                i18nKey="log_entry_maximum_entries_message_no_errors"
-                components={[<b />]} // eslint-disable-line react/jsx-key
-              />
-            )}
-          </>
-        )}
+              {hasErrors ? (
+                <Trans
+                  i18nKey="log_entry_maximum_entries_message"
+                  components={[<b />, <p />]} // eslint-disable-line react/jsx-key
+                />
+              ) : (
+                <Trans
+                  i18nKey="log_entry_maximum_entries_message_no_errors"
+                  components={[<b />]} // eslint-disable-line react/jsx-key
+                />
+              )}
+            </>
+          )}
+        </div>
       </div>
     </div>
   )