Merge pull request #20840 from overleaf/dp-review-panel-split-test-badge

Add split test badge to new review panel for beta release

GitOrigin-RevId: 863b7614fc6b68aebc15dbc9bfec5014499af817

services/web/frontend/js/features/review-panel-new/components/review-panel-header.tsx

@@ -5,16 +5,27 @@ import ReviewPanelTrackChangesMenuButton from './review-panel-track-changes-menu
 import { Button } from 'react-bootstrap'
 import MaterialIcon from '@/shared/components/material-icon'
 import { useLayoutContext } from '@/shared/context/layout-context'
+import SplitTestBadge from '@/shared/components/split-test-badge'
+import { useTranslation } from 'react-i18next'
 
 const ReviewPanelHeader: FC = () => {
   const [trackChangesMenuExpanded, setTrackChangesMenuExpanded] =
     useState(false)
   const { setReviewPanelOpen } = useLayoutContext()
+  const { t } = useTranslation()
 
   return (
     <div className="review-panel-header">
       <div className="review-panel-heading">
-        <div className="review-panel-label">Review</div>
+        <div className="review-panel-label">
+          {t('review')}
+          <span className="review-panel-split-test-badge">
+            <SplitTestBadge
+              splitTestName="review-panel-redesign"
+              displayOnVariants={['enabled']}
+            />
+          </span>
+        </div>
         <Button
           bsStyle={null}
           className="review-panel-close-button"

services/web/frontend/stylesheets/app/editor/review-panel-new.less

@@ -197,6 +197,10 @@
       margin: 0;
     }
 
+    .review-panel-split-test-badge {
+      margin-left: 4px;
+    }
+
     .review-panel-close-button {
       display: flex;
       align-items: center;