overleaf/services/web/frontend/js/features/review-panel-new/components/review-panel-header.tsx
David 50723d0f8f 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
2024-10-14 11:03:05 +00:00

51 lines
1.8 KiB
TypeScript

import { FC, memo, useState } from 'react'
import { ReviewPanelResolvedThreadsButton } from './review-panel-resolved-threads-button'
import { ReviewPanelTrackChangesMenu } from './review-panel-track-changes-menu'
import ReviewPanelTrackChangesMenuButton from './review-panel-track-changes-menu-button'
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">
{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"
type="button"
onClick={() => setReviewPanelOpen(false)}
>
<MaterialIcon type="close" />
</Button>
</div>
<div className="review-panel-tools">
<ReviewPanelResolvedThreadsButton />
<ReviewPanelTrackChangesMenuButton
menuExpanded={trackChangesMenuExpanded}
setMenuExpanded={setTrackChangesMenuExpanded}
/>
</div>
{trackChangesMenuExpanded && <ReviewPanelTrackChangesMenu />}
</div>
)
}
export default memo(ReviewPanelHeader)