import React, { ElementType } from 'react' import { useTranslation } from 'react-i18next' import MenuButton from './menu-button' import CobrandingLogo from './cobranding-logo' import BackToProjectsButton from './back-to-projects-button' import UpgradePrompt from './upgrade-prompt' import ChatToggleButton from './chat-toggle-button' import LayoutDropdownButton from './layout-dropdown-button' import OnlineUsersWidget from './online-users-widget' import ProjectNameEditableLabel from './project-name-editable-label' import TrackChangesToggleButton from './track-changes-toggle-button' import HistoryToggleButton from './history-toggle-button' import ShareProjectButton from './share-project-button' import importOverleafModules from '../../../../macros/import-overleaf-module.macro' import BackToEditorButton from './back-to-editor-button' import getMeta from '@/utils/meta' import { isSplitTestEnabled } from '@/utils/splitTestUtils' import { canUseNewEditor } from '@/features/ide-redesign/utils/new-editor-utils' import TryNewEditorButton from '../try-new-editor-button' import { OnlineUser } from '@/features/ide-react/context/online-users-context' import { Cobranding } from '../../../../../types/cobranding' const [publishModalModules] = importOverleafModules('publishModal') as { import: { default: ElementType } path: string }[] const PublishButton = publishModalModules?.import.default const offlineModeToolbarButtons = importOverleafModules( 'offlineModeToolbarButtons' ) as { import: { default: ElementType } path: string }[] // double opt-in const enableROMirrorOnClient = isSplitTestEnabled('ro-mirror-on-client') && new URLSearchParams(window.location.search).get('ro-mirror-on-client') === 'enabled' export type ToolbarHeaderProps = { cobranding: Cobranding | undefined onShowLeftMenuClick: () => void chatIsOpen: boolean toggleChatOpen: () => void reviewPanelOpen: boolean toggleReviewPanelOpen: (e: React.MouseEvent) => void historyIsOpen: boolean toggleHistoryOpen: () => void unreadMessageCount: number onlineUsers: OnlineUser[] goToUser: (user: OnlineUser) => void isRestrictedTokenMember: boolean | undefined hasPublishPermissions: boolean chatVisible: boolean projectName: string renameProject: (name: string) => void hasRenamePermissions: boolean openShareModal: () => void trackChangesVisible: boolean | undefined } const ToolbarHeader = React.memo(function ToolbarHeader({ cobranding, onShowLeftMenuClick, chatIsOpen, toggleChatOpen, reviewPanelOpen, toggleReviewPanelOpen, historyIsOpen, toggleHistoryOpen, unreadMessageCount, onlineUsers, goToUser, isRestrictedTokenMember, hasPublishPermissions, chatVisible, projectName, renameProject, hasRenamePermissions, openShareModal, trackChangesVisible, }: ToolbarHeaderProps) { const chatEnabled = getMeta('ol-capabilities')?.includes('chat') const { t } = useTranslation() const shouldDisplayPublishButton = hasPublishPermissions && PublishButton return (
{cobranding && cobranding.logoImgUrl && ( )} {enableROMirrorOnClient && offlineModeToolbarButtons.map( ({ path, import: { default: OfflineModeToolbarButton } }) => { return } )}
{getMeta('ol-showUpgradePrompt') && (
)}
{canUseNewEditor() && } {historyIsOpen ? (
) : ( <> {trackChangesVisible && ( )} {shouldDisplayPublishButton && ( )} {!isRestrictedTokenMember && ( )} {chatEnabled && chatVisible && ( )} )}
) }) export default ToolbarHeader