Merge pull request #21737 from overleaf/dp-eq-preview-beta-badge-v2

Update split test badge for math preview tooltip V3

GitOrigin-RevId: 9ff41f5bc68ba6cd4d7a1c7e8d5f1f725369c02a
This commit is contained in:
Mathias Jakobsen 2024-11-08 15:02:28 +02:00 committed by Copybot
parent cb72799fff
commit 595c60327e

View file

@ -12,9 +12,8 @@ import OLModal, {
OLModalTitle, OLModalTitle,
} from '@/features/ui/components/ol/ol-modal' } from '@/features/ui/components/ol/ol-modal'
import MaterialIcon from '@/shared/components/material-icon' import MaterialIcon from '@/shared/components/material-icon'
import SplitTestBadge from '@/shared/components/split-test-badge'
import useEventListener from '@/shared/hooks/use-event-listener' import useEventListener from '@/shared/hooks/use-event-listener'
import { FC, useCallback, useEffect, useRef, useState } from 'react' import { FC, useCallback, useLayoutEffect, useRef, useState } from 'react'
import { Trans, useTranslation } from 'react-i18next' import { Trans, useTranslation } from 'react-i18next'
import { import {
useCodeMirrorStateContext, useCodeMirrorStateContext,
@ -86,7 +85,7 @@ const MathPreviewTooltip: FC<{ mathContent: HTMLDivElement }> = ({
useEventListener('keydown', keyDownListener) useEventListener('keydown', keyDownListener)
useEffect(() => { useLayoutEffect(() => {
if (mathRef.current) { if (mathRef.current) {
mathRef.current.replaceChildren(mathContent) mathRef.current.replaceChildren(mathContent)
} }
@ -96,10 +95,8 @@ const MathPreviewTooltip: FC<{ mathContent: HTMLDivElement }> = ({
<> <>
<div className="ol-cm-math-tooltip"> <div className="ol-cm-math-tooltip">
<span ref={mathRef} /> <span ref={mathRef} />
<SplitTestBadge <CustomSplitTestBadge />
displayOnVariants={['enabled']}
splitTestName="math-preview"
/>
<BootstrapVersionSwitcher <BootstrapVersionSwitcher
bs5={ bs5={
<Dropdown align="end"> <Dropdown align="end">
@ -217,4 +214,21 @@ const MathPreviewTooltip: FC<{ mathContent: HTMLDivElement }> = ({
) )
} }
// Temporary SplitTest badge for just this component that always shows
// as in beta and doesn't have a tooltip
const CustomSplitTestBadge: FC = () => {
return (
<a
href="https://forms.gle/uDVGSqnBBJQ8fUPt5"
target="_blank"
rel="noopener noreferrer"
>
<BootstrapVersionSwitcher
bs3={<span className="badge beta-badge" />}
bs5={<MaterialIcon type="info" className="align-middle beta-badge" />}
/>
</a>
)
}
export default MathPreviewTooltipContainer export default MathPreviewTooltipContainer