From 93ba9fa28a95e419b0d62d2e62d999749b0a3a7f Mon Sep 17 00:00:00 2001
From: David <33458145+davidmcpowell@users.noreply.github.com>
Date: Mon, 19 Aug 2024 14:16:44 +0100
Subject: [PATCH] Merge pull request #20001 from
 overleaf/dp-math-preview-split-test-badge

Add split test badge to math preview tooltip

GitOrigin-RevId: 9dfd30502f4b023bc7f640660904b0d3e7f4ce62
---
 .../{math-preview.ts => math-preview.tsx}     | 19 +++++++++++++++++++
 .../stylesheets/app/editor/math-preview.less  |  2 ++
 2 files changed, 21 insertions(+)
 rename services/web/frontend/js/features/source-editor/extensions/{math-preview.ts => math-preview.tsx} (89%)

diff --git a/services/web/frontend/js/features/source-editor/extensions/math-preview.ts b/services/web/frontend/js/features/source-editor/extensions/math-preview.tsx
similarity index 89%
rename from services/web/frontend/js/features/source-editor/extensions/math-preview.ts
rename to services/web/frontend/js/features/source-editor/extensions/math-preview.tsx
index d9c03065bf..57a94f6946 100644
--- a/services/web/frontend/js/features/source-editor/extensions/math-preview.ts
+++ b/services/web/frontend/js/features/source-editor/extensions/math-preview.tsx
@@ -22,6 +22,9 @@ import {
 import { documentCommands } from '../languages/latex/document-commands'
 import { debugConsole } from '@/utils/debugging'
 import { isSplitTestEnabled } from '@/utils/splitTestUtils'
+import ReactDOM from 'react-dom'
+import { SplitTestProvider } from '@/shared/context/split-test-context'
+import SplitTestBadge from '@/shared/components/split-test-badge'
 
 const REPOSITION_EVENT = 'editor:repositionMathTooltips'
 
@@ -107,6 +110,8 @@ function buildTooltips(state: EditorState): readonly Tooltip[] {
           create() {
             const dom = document.createElement('div')
             dom.append(content)
+            const badge = renderSplitTestBadge()
+            dom.append(badge)
             dom.className = 'ol-cm-math-tooltip'
 
             return { dom, overlap: true, offset: { x: 0, y: 8 } }
@@ -166,6 +171,20 @@ const buildTooltipContent = (
   return element
 }
 
+const renderSplitTestBadge = () => {
+  const element = document.createElement('span')
+  ReactDOM.render(
+    <SplitTestProvider>
+      <SplitTestBadge
+        displayOnVariants={['enabled']}
+        splitTestName="math-preview"
+      />
+    </SplitTestProvider>,
+    element
+  )
+  return element
+}
+
 /**
  * Styles for the preview tooltip
  */
diff --git a/services/web/frontend/stylesheets/app/editor/math-preview.less b/services/web/frontend/stylesheets/app/editor/math-preview.less
index aea2df3179..47a70275d3 100644
--- a/services/web/frontend/stylesheets/app/editor/math-preview.less
+++ b/services/web/frontend/stylesheets/app/editor/math-preview.less
@@ -4,4 +4,6 @@
   max-width: 800px;
   overflow: auto;
   padding: 8px;
+  display: flex;
+  gap: 8px;
 }