Merge pull request #23914 from overleaf/dp-history

Add existing history view into new editor

GitOrigin-RevId: 0d35ba1f38dafd8a71087f231f2cddc1b0424401

services/web/frontend/js/features/ide-redesign/components/main-layout.tsx

@@ -11,6 +11,7 @@ import { useLayoutContext } from '@/shared/context/layout-context'
 import { useState } from 'react'
 import EditorPanel from './editor-panel'
 import { useRailContext } from '../contexts/rail-context'
+import HistoryContainer from '@/features/ide-react/components/history-container'
 
 export default function MainLayout() {
   const [resizing, setResizing] = useState(false)
@@ -30,6 +31,7 @@ export default function MainLayout() {
     view === 'editor' || view === 'file' || pdfLayout === 'sideBySide'
 
   const { t } = useTranslation()
+
   return (
     <div className="ide-redesign-main">
       <Toolbar />
@@ -42,49 +44,59 @@ export default function MainLayout() {
           })}
         >
           <RailLayout />
-          <Panel
-            id="ide-redesign-editor-panel"
-            order={1}
-            className={classNames({
-              hidden: !editorIsOpen,
-            })}
-            minSize={5}
-            defaultSize={50}
-          >
-            <div className="ide-redesign-editor-container">
-              <EditorPanel />
-            </div>
-          </Panel>
-          <HorizontalResizeHandle
-            resizable={pdfLayout === 'sideBySide'}
-            onDragging={setResizing}
-            onDoubleClick={togglePdfPane}
-            hitAreaMargins={{ coarse: 0, fine: 0 }}
-            className={classNames({
-              hidden: !editorIsOpen,
-            })}
-          >
-            <HorizontalToggler
-              id="ide-redesign-pdf-panel"
-              togglerType="east"
-              isOpen={isPdfOpen}
-              setIsOpen={setIsPdfOpen}
-              tooltipWhenOpen={t('tooltip_hide_pdf')}
-              tooltipWhenClosed={t('tooltip_show_pdf')}
-            />
-          </HorizontalResizeHandle>
-          <Panel
-            collapsible
-            className="ide-redesign-pdf-container"
-            id="ide-redesign-pdf-panel"
-            order={2}
-            defaultSize={50}
-            minSize={5}
-            ref={pdfPanelRef}
-            onExpand={handlePdfPaneExpand}
-            onCollapse={handlePdfPaneCollapse}
-          >
-            <PdfPreview />
+          <Panel id="ide-redesign-editor-and-pdf-panel" order={2}>
+            <HistoryContainer />
+            <PanelGroup
+              autoSaveId="ide-redesign-editor-and-pdf-panel-group"
+              direction="horizontal"
+            >
+              <Panel
+                id="ide-redesign-editor-panel"
+                order={1}
+                className={classNames({
+                  hidden: !editorIsOpen || view === 'history',
+                })}
+                minSize={5}
+                defaultSize={50}
+              >
+                <div className="ide-redesign-editor-container">
+                  <EditorPanel />
+                </div>
+              </Panel>
+              <HorizontalResizeHandle
+                resizable={pdfLayout === 'sideBySide'}
+                onDragging={setResizing}
+                onDoubleClick={togglePdfPane}
+                hitAreaMargins={{ coarse: 0, fine: 0 }}
+                className={classNames({
+                  hidden: !editorIsOpen,
+                })}
+              >
+                <HorizontalToggler
+                  id="ide-redesign-pdf-panel"
+                  togglerType="east"
+                  isOpen={isPdfOpen}
+                  setIsOpen={setIsPdfOpen}
+                  tooltipWhenOpen={t('tooltip_hide_pdf')}
+                  tooltipWhenClosed={t('tooltip_show_pdf')}
+                />
+              </HorizontalResizeHandle>
+              <Panel
+                collapsible
+                className={classNames('ide-redesign-pdf-container', {
+                  hidden: view === 'history',
+                })}
+                id="ide-redesign-pdf-panel"
+                order={2}
+                defaultSize={50}
+                minSize={5}
+                ref={pdfPanelRef}
+                onExpand={handlePdfPaneExpand}
+                onCollapse={handlePdfPaneCollapse}
+              >
+                <PdfPreview />
+              </Panel>
+            </PanelGroup>
           </Panel>
         </PanelGroup>
       </div>

services/web/frontend/js/features/ide-redesign/components/rail.tsx

@@ -29,6 +29,7 @@ import {
 } from '@/features/ui/components/bootstrap-5/dropdown-menu'
 import { RailHelpShowHotkeysModal } from './help/keyboard-shortcuts'
 import { RailHelpContactUsModal } from './help/contact-us'
+import { HistorySidebar } from '@/features/ide-react/components/history-sidebar'
 
 type RailElement = {
   icon: AvailableUnfilledIcon
@@ -109,7 +110,11 @@ export const RailLayout = () => {
     togglePane,
     setResizing,
   } = useRailContext()
-  const { setLeftMenuShown } = useLayoutContext()
+
+  const { view, setLeftMenuShown } = useLayoutContext()
+
+  const isHistoryView = view === 'history'
+
   const railActions: RailAction[] = useMemo(
     () => [
       {
@@ -154,7 +159,7 @@ export const RailLayout = () => {
       onSelect={onTabSelect}
       id="ide-rail-tabs"
     >
-      <div className="ide-rail">
+      <div className={classNames('ide-rail', { hidden: isHistoryView })}>
         <Nav activeKey={selectedTab} className="ide-rail-tabs-nav">
           {RAIL_TABS.filter(({ hide }) => !hide).map(
             ({ icon, key, indicator }) => (
@@ -184,7 +189,10 @@ export const RailLayout = () => {
         onCollapse={handlePaneCollapse}
         onExpand={handlePaneExpand}
       >
-        <div className="ide-rail-content">
+        {isHistoryView && <HistorySidebar />}
+        <div
+          className={classNames('ide-rail-content', { hidden: isHistoryView })}
+        >
           <Tab.Content>
             {RAIL_TABS.filter(({ hide }) => !hide).map(({ key, component }) => (
               <Tab.Pane eventKey={key} key={key}>

services/web/frontend/js/features/ide-redesign/components/toolbar/show-history-button.tsx

@@ -0,0 +1,37 @@
+import OLButton from '@/features/ui/components/ol/ol-button'
+import MaterialIcon from '@/shared/components/material-icon'
+import { useTranslation } from 'react-i18next'
+import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
+import * as eventTracking from '../../../../infrastructure/event-tracking'
+import { useLayoutContext } from '@/shared/context/layout-context'
+import { useCallback } from 'react'
+
+export default function ShowHistoryButton() {
+  const { t } = useTranslation()
+  const { view, setView } = useLayoutContext()
+
+  const toggleHistoryOpen = useCallback(() => {
+    const action = view === 'history' ? 'close' : 'open'
+    eventTracking.sendMB('navigation-clicked-history', { action })
+
+    setView(view === 'history' ? 'editor' : 'history')
+  }, [view, setView])
+
+  return (
+    <div className="ide-redesign-toolbar-button-container">
+      <OLTooltip
+        id="tooltip-open-history"
+        description={t('history')}
+        overlayProps={{ delay: 0, placement: 'bottom' }}
+      >
+        <OLButton
+          size="sm"
+          variant="ghost"
+          className="ide-redesign-toolbar-button-subdued"
+          leadingIcon={<MaterialIcon type="history" />}
+          onClick={toggleHistoryOpen}
+        />
+      </OLTooltip>
+    </div>
+  )
+}

services/web/frontend/js/features/ide-redesign/components/toolbar/toolbar.tsx

@@ -1,4 +1,3 @@
-import OLButton from '@/features/ui/components/ol/ol-button'
 import MaterialIcon from '@/shared/components/material-icon'
 import { useTranslation } from 'react-i18next'
 import { ToolbarMenuBar } from './menu-bar'
@@ -7,8 +6,8 @@ import { OnlineUsers } from './online-users'
 import ShareProjectButton from './share-project-button'
 import importOverleafModules from '../../../../../macros/import-overleaf-module.macro'
 import { useEditorContext } from '@/shared/context/editor-context'
-import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
 import ChangeLayoutButton from './change-layout-button'
+import ShowHistoryButton from './show-history-button'
 
 const [publishModalModules] = importOverleafModules('publishModal')
 const SubmitProjectButton = publishModalModules?.import.NewPublishToolbarButton
@@ -40,7 +39,6 @@ const ToolbarMenus = () => {
 
 const ToolbarButtons = () => {
   const { permissionsLevel } = useEditorContext()
-  const { t } = useTranslation()
 
   const shouldDisplaySubmitButton =
     (permissionsLevel === 'owner' || permissionsLevel === 'readAndWrite') &&
@@ -49,20 +47,7 @@ const ToolbarButtons = () => {
   return (
     <div className="ide-redesign-toolbar-actions">
       <OnlineUsers />
-      <div className="ide-redesign-toolbar-button-container">
-        <OLTooltip
-          id="tooltip-open-history"
-          description={t('history')}
-          overlayProps={{ delay: 0, placement: 'bottom' }}
-        >
-          <OLButton
-            size="sm"
-            variant="ghost"
-            className="ide-redesign-toolbar-button-subdued"
-            leadingIcon={<MaterialIcon type="history" />}
-          />
-        </OLTooltip>
-      </div>
+      <ShowHistoryButton />
       <ChangeLayoutButton />
       {shouldDisplaySubmitButton && <SubmitProjectButton />}
       <ShareProjectButton />