[web] "back to editor" button when history is opened (#18137)

* [web] "back to editor" button when history is opened

* rename to shouldReopenChat

* move to separate component

* show online users widget

* using MaterialIcon

* import useState directly

* fix formatting

GitOrigin-RevId: c37432f16518ef83510c48d90722e74b228b5ab1

services/web/frontend/extracted-translations.json

@@ -97,6 +97,7 @@
   "autocomplete_references": "",
   "back": "",
   "back_to_configuration": "",
+  "back_to_editor": "",
   "back_to_subscription": "",
   "back_to_your_projects": "",
   "beta_program_already_participating": "",

services/web/frontend/js/features/editor-navigation-toolbar/components/back-to-editor-button.tsx

@@ -0,0 +1,21 @@
+import { useTranslation } from 'react-i18next'
+import { Button } from 'react-bootstrap'
+import MaterialIcon from '@/shared/components/material-icon'
+
+function BackToEditorButton({ onClick }: { onClick: () => void }) {
+  const { t } = useTranslation()
+
+  return (
+    <Button
+      bsSize="sm"
+      bsStyle={null}
+      onClick={onClick}
+      className="back-to-editor-btn btn-secondary"
+    >
+      <MaterialIcon type="arrow_back" className="toolbar-btn-secondary-icon" />
+      <p className="toolbar-label">{t('back_to_editor')}</p>
+    </Button>
+  )
+}
+
+export default BackToEditorButton

services/web/frontend/js/features/editor-navigation-toolbar/components/editor-navigation-toolbar-root.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react'
+import React, { useState, useCallback } from 'react'
 import ToolbarHeader from './toolbar-header'
 import { useEditorContext } from '../../../shared/context/editor-context'
 import { useChatContext } from '../../chat/context/chat-context'
@@ -66,11 +66,21 @@ const EditorNavigationToolbarRoot = React.memo(
       [reviewPanelOpen, setReviewPanelOpen]
     )
 
+    const [shouldReopenChat, setShouldReopenChat] = useState(chatIsOpen)
     const toggleHistoryOpen = useCallback(() => {
       const action = view === 'history' ? 'close' : 'open'
       eventTracking.sendMB('navigation-clicked-history', { action })
+
+      if (chatIsOpen && action === 'open') {
+        setShouldReopenChat(true)
+        toggleChatOpen()
+      }
+      if (shouldReopenChat && action === 'close') {
+        setShouldReopenChat(false)
+        toggleChatOpen()
+      }
       setView(view === 'history' ? 'editor' : 'history')
-    }, [view, setView])
+    }, [view, chatIsOpen, shouldReopenChat, setView, toggleChatOpen])
 
     const openShareModal = useCallback(() => {
       eventTracking.sendMB('navigation-clicked-share')

services/web/frontend/js/features/editor-navigation-toolbar/components/history-toggle-button.jsx

@@ -1,18 +1,13 @@
 import PropTypes from 'prop-types'
-import classNames from 'classnames'
 import { useTranslation } from 'react-i18next'
 import Icon from '../../../shared/components/icon'
 
-function HistoryToggleButton({ historyIsOpen, onClick }) {
+function HistoryToggleButton({ onClick }) {
   const { t } = useTranslation()
 
-  const classes = classNames('btn', 'btn-full-height', {
-    active: historyIsOpen,
-  })
-
   return (
     <div className="toolbar-item">
-      <button className={classes} onClick={onClick}>
+      <button className="btn btn-full-height" onClick={onClick}>
         <Icon type="history" fw />
         <p className="toolbar-label">{t('history')}</p>
       </button>
@@ -21,7 +16,6 @@ function HistoryToggleButton({ historyIsOpen, onClick }) {
 }
 
 HistoryToggleButton.propTypes = {
-  historyIsOpen: PropTypes.bool,
   onClick: PropTypes.func.isRequired,
 }
 

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

@@ -13,6 +13,7 @@ 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'
 
 const [publishModalModules] = importOverleafModules('publishModal')
 const PublishButton = publishModalModules?.import.default
@@ -64,34 +65,37 @@ const ToolbarHeader = React.memo(function ToolbarHeader({
       <div className="toolbar-right">
         <OnlineUsersWidget onlineUsers={onlineUsers} goToUser={goToUser} />
 
-        {trackChangesVisible && (
-          <TrackChangesToggleButton
-            onMouseDown={toggleReviewPanelOpen}
-            disabled={historyIsOpen}
-            trackChangesIsOpen={reviewPanelOpen}
-          />
-        )}
+        {historyIsOpen ? (
+          <BackToEditorButton onClick={toggleHistoryOpen} />
+        ) : (
+          <>
+            {trackChangesVisible && (
+              <TrackChangesToggleButton
+                onMouseDown={toggleReviewPanelOpen}
+                disabled={historyIsOpen}
+                trackChangesIsOpen={reviewPanelOpen}
+              />
+            )}
 
-        <ShareProjectButton onClick={openShareModal} />
-        {shouldDisplayPublishButton && (
-          <PublishButton cobranding={cobranding} />
-        )}
+            <ShareProjectButton onClick={openShareModal} />
+            {shouldDisplayPublishButton && (
+              <PublishButton cobranding={cobranding} />
+            )}
 
-        {!isRestrictedTokenMember && (
-          <HistoryToggleButton
-            historyIsOpen={historyIsOpen}
-            onClick={toggleHistoryOpen}
-          />
-        )}
+            {!isRestrictedTokenMember && (
+              <HistoryToggleButton onClick={toggleHistoryOpen} />
+            )}
 
-        <LayoutDropdownButton />
+            <LayoutDropdownButton />
 
-        {!isRestrictedTokenMember && (
-          <ChatToggleButton
-            chatIsOpen={chatIsOpen}
-            onClick={toggleChatOpen}
-            unreadMessageCount={unreadMessageCount}
-          />
+            {!isRestrictedTokenMember && (
+              <ChatToggleButton
+                chatIsOpen={chatIsOpen}
+                onClick={toggleChatOpen}
+                unreadMessageCount={unreadMessageCount}
+              />
+            )}
+          </>
         )}
       </div>
     </header>

services/web/frontend/stylesheets/app/editor/toolbar.less

@@ -22,12 +22,22 @@
 
   .toolbar-right,
   .toolbar-left {
-    button {
+    button:not(.back-to-editor-btn) {
       background: transparent;
       box-shadow: none;
     }
   }
 
+  .toolbar-right .back-to-editor-btn {
+    margin-right: 25px;
+    display: flex;
+    align-items: center;
+
+    .toolbar-label {
+      margin-bottom: 0;
+    }
+  }
+
   > a:focus,
   button:focus {
     outline: none;
@@ -38,7 +48,7 @@
   .toolbar-left > a:not(.btn),
   .toolbar-left > button,
   .toolbar-right > a:not(.btn),
-  .toolbar-right > button {
+  .toolbar-right > button:not(.back-to-editor-btn) {
     display: inline-block;
     color: @toolbar-icon-btn-color;
     background-color: transparent;

services/web/locales/en.json

@@ -146,6 +146,7 @@
   "back": "Back",
   "back_to_account_settings": "Back to account settings",
   "back_to_configuration": "Back to configuration",
+  "back_to_editor": "Back to editor",
   "back_to_log_in": "Back to log in",
   "back_to_subscription": "Back to Subscription",
   "back_to_your_projects": "Back to your projects",