mirror of
https://github.com/overleaf/overleaf.git
synced 2024-12-12 10:53:34 -05:00
e9e36737e6
[web] SplitTestBadge based on split test phase and badge config GitOrigin-RevId: e178ca864fd6619ff61a2a84fc1ccb5d54e0a814
53 lines
1.3 KiB
TypeScript
53 lines
1.3 KiB
TypeScript
import { useSplitTestContext } from '../context/split-test-context'
|
|
import BetaBadge from './beta-badge'
|
|
import { OverlayTriggerProps } from 'react-bootstrap'
|
|
|
|
type TooltipProps = {
|
|
id?: string
|
|
placement?: OverlayTriggerProps['placement']
|
|
className?: string
|
|
}
|
|
|
|
type SplitTestBadgeProps = {
|
|
splitTestName: string
|
|
displayOnVariants: string[]
|
|
tooltip?: TooltipProps
|
|
}
|
|
|
|
export default function SplitTestBadge({
|
|
splitTestName,
|
|
displayOnVariants,
|
|
tooltip = {},
|
|
}: SplitTestBadgeProps) {
|
|
const { splitTestVariants, splitTestInfo } = useSplitTestContext()
|
|
|
|
const testInfo = splitTestInfo[splitTestName]
|
|
if (!testInfo) {
|
|
return null
|
|
}
|
|
|
|
const variant = splitTestVariants[splitTestName]
|
|
if (!variant || !displayOnVariants.includes(variant)) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<BetaBadge
|
|
tooltip={{
|
|
id: tooltip.id || `${splitTestName}-badge-tooltip`,
|
|
className: `split-test-badge-tooltip ${tooltip.className}`,
|
|
text: testInfo.badgeInfo?.tooltipText || (
|
|
<>
|
|
We are testing this new feature.
|
|
<br />
|
|
Click to give feedback
|
|
</>
|
|
),
|
|
}}
|
|
phase={testInfo.phase}
|
|
url={
|
|
testInfo.badgeInfo?.url?.length ? testInfo.badgeInfo?.url : undefined
|
|
}
|
|
/>
|
|
)
|
|
}
|