Overleaf/services/web/frontend/js/features/editor-navigation-toolbar/components/toolbar-header.js

import React from 'react'
import PropTypes from 'prop-types'
import { useTranslation } from 'react-i18next'
import MenuButton from './menu-button'
import CobrandingLogo from './cobranding-logo'
import BackToProjectsButton from './back-to-projects-button'
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 PdfToggleButton from './pdf-toggle-button'
import importOverleafModules from '../../../../macros/import-overleaf-module.macro'

const [publishModalModules] = importOverleafModules('publishModal')
const PublishButton = publishModalModules?.import.default

const ToolbarHeader = React.memo(function ToolbarHeader({
  reattach,
  detach,
  detachMode,
  detachRole,
  cobranding,
  onShowLeftMenuClick,
  handleChangeLayout,
  chatIsOpen,
  toggleChatOpen,
  reviewPanelOpen,
  toggleReviewPanelOpen,
  historyIsOpen,
  toggleHistoryOpen,
  unreadMessageCount,
  onlineUsers,
  goToUser,
  isRestrictedTokenMember,
  hasPublishPermissions,
  projectName,
  renameProject,
  hasRenamePermissions,
  openShareModal,
  pdfLayout,
  pdfViewIsOpen,
  pdfButtonIsVisible,
  togglePdfView,
  trackChangesVisible,
  view,
}) {
  const { t } = useTranslation()
  const shouldDisplayPublishButton = hasPublishPermissions && PublishButton
  const shouldDisplayTrackChangesButton =
    trackChangesVisible && !isRestrictedTokenMember

  return (
    <header
      className="toolbar toolbar-header toolbar-with-labels"
      role="navigation"
      aria-label={t('project_layout_sharing_submission')}
    >
      <div className="toolbar-left">
        <MenuButton onClick={onShowLeftMenuClick} />
        {cobranding && cobranding.logoImgUrl && (
          <CobrandingLogo {...cobranding} />
        )}
        <BackToProjectsButton />
      </div>
      {!window.showPdfDetach && pdfButtonIsVisible && (
        <PdfToggleButton
          onClick={togglePdfView}
          pdfViewIsOpen={pdfViewIsOpen}
        />
      )}
      <ProjectNameEditableLabel
        className="toolbar-center"
        projectName={projectName}
        hasRenamePermissions={hasRenamePermissions}
        onChange={renameProject}
      />

      <div className="toolbar-right">
        <OnlineUsersWidget onlineUsers={onlineUsers} goToUser={goToUser} />

        {window.showPdfDetach && (
          <LayoutDropdownButton
            reattach={reattach}
            detach={detach}
            handleChangeLayout={handleChangeLayout}
            detachMode={detachMode}
            detachRole={detachRole}
            pdfLayout={pdfLayout}
            view={view}
          />
        )}

        {shouldDisplayTrackChangesButton && (
          <TrackChangesToggleButton
            onClick={toggleReviewPanelOpen}
            disabled={historyIsOpen}
            trackChangesIsOpen={reviewPanelOpen}
          />
        )}
        <ShareProjectButton onClick={openShareModal} />
        {shouldDisplayPublishButton && (
          <PublishButton cobranding={cobranding} />
        )}
        {!isRestrictedTokenMember && (
          <>
            <HistoryToggleButton
              historyIsOpen={historyIsOpen}
              onClick={toggleHistoryOpen}
            />
            <ChatToggleButton
              chatIsOpen={chatIsOpen}
              onClick={toggleChatOpen}
              unreadMessageCount={unreadMessageCount}
            />
          </>
        )}
      </div>
    </header>
  )
})

ToolbarHeader.propTypes = {
  reattach: PropTypes.func.isRequired,
  detach: PropTypes.func.isRequired,
  detachMode: PropTypes.string,
  detachRole: PropTypes.string,
  onShowLeftMenuClick: PropTypes.func.isRequired,
  handleChangeLayout: PropTypes.func.isRequired,
  cobranding: PropTypes.object,
  chatIsOpen: PropTypes.bool,
  toggleChatOpen: PropTypes.func.isRequired,
  reviewPanelOpen: PropTypes.bool,
  toggleReviewPanelOpen: PropTypes.func.isRequired,
  historyIsOpen: PropTypes.bool,
  toggleHistoryOpen: PropTypes.func.isRequired,
  unreadMessageCount: PropTypes.number.isRequired,
  onlineUsers: PropTypes.array.isRequired,
  goToUser: PropTypes.func.isRequired,
  isRestrictedTokenMember: PropTypes.bool,
  hasPublishPermissions: PropTypes.bool,
  projectName: PropTypes.string.isRequired,
  renameProject: PropTypes.func.isRequired,
  hasRenamePermissions: PropTypes.bool,
  openShareModal: PropTypes.func.isRequired,
  pdfLayout: PropTypes.string.isRequired,
  pdfViewIsOpen: PropTypes.bool,
  pdfButtonIsVisible: PropTypes.bool,
  togglePdfView: PropTypes.func.isRequired,
  trackChangesVisible: PropTypes.bool,
  view: PropTypes.string,
}

export default ToolbarHeader