Merge pull request #8511 from overleaf/em-stop-on-first-error-info-badge

Replace stop-on-first-error beta badge with info badge

GitOrigin-RevId: d0f8d1c6e960646bd257aeaf5efc21b23615242b

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

@@ -1,11 +1,11 @@
 import PropTypes from 'prop-types'
 import { useTranslation, Trans } from 'react-i18next'
-import { memo, useCallback, useMemo } from 'react'
+import { memo, useCallback } 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 StopOnFirstErrorBadge from '../../../shared/components/stop-on-first-error-badge'
 import getMeta from '../../../utils/meta'
 
 function PdfPreviewError({ error }) {
@@ -181,22 +181,6 @@ 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')}>
@@ -233,10 +217,7 @@ function TimedOutLogEntry() {
                     />,
                   ]}
                 />{' '}
-                <BetaBadge
+                <StopOnFirstErrorBadge placement="bottom" />
-                  tooltip={betaBadgeTooltip}
-                  url="https://forms.gle/7M8821o5RDZrFKoF6"
-                />
               </>
             )}
           </li>

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

@@ -1,10 +1,10 @@
-import { useCallback, useMemo } from 'react'
+import { useCallback } 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'
+import StopOnFirstErrorBadge from '../../../shared/components/stop-on-first-error-badge'
 
 export default function StopOnFirstErrorPrompt() {
   const { t } = useTranslation()
@@ -19,31 +19,10 @@ 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={
+      headerIcon={<StopOnFirstErrorBadge placement="right" />}
-        <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, useMemo } from 'react'
+import { useCallback } from 'react'
 import PropTypes from 'prop-types'
 import { Trans, useTranslation } from 'react-i18next'
 import { Button } from 'react-bootstrap'
@@ -7,7 +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'
+import StopOnFirstErrorBadge from '../../../shared/components/stop-on-first-error-badge'
 
 function PreviewLogsPaneMaxEntries({ totalEntries, entriesShown, hasErrors }) {
   const { t } = useTranslation()
@@ -29,22 +29,6 @@ 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} />
@@ -73,10 +57,7 @@ function PreviewLogsPaneMaxEntries({ totalEntries, entriesShown, hasErrors }) {
                       ),
                     }}
                   />{' '}
-                  <BetaBadge
+                  <StopOnFirstErrorBadge placement="bottom" />
-                    tooltip={betaBadgeTooltip}
-                    url="https://forms.gle/7M8821o5RDZrFKoF6"
-                  />
                 </p>
                 <p>{t('log_entry_maximum_entries_see_full_logs')}</p>
               </>

services/web/frontend/js/shared/components/stop-on-first-error-badge.tsx

@@ -0,0 +1,33 @@
+import Tooltip from './tooltip'
+
+type Props = {
+  placement: string
+}
+
+export default function StopOnFirstErrorBadge({ placement }: Props) {
+  const content = (
+    <>
+      We are testing the “Stop on first error” compilation mode.
+      <br />
+      Click to give feedback
+    </>
+  )
+
+  return (
+    <Tooltip
+      id="stop-on-first-error-badge"
+      description={content}
+      overlayProps={{ placement, delayHide: 100 }}
+      tooltipProps={{ className: 'tooltip-wide' }}
+    >
+      <a
+        href="https://forms.gle/7M8821o5RDZrFKoF6"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="badge info-badge"
+      >
+        <span className="sr-only">{content}</span>
+      </a>
+    </Tooltip>
+  )
+}