Merge pull request #26177 from overleaf/mj-ide-history-file-tree

[web] Editor redesign: Update history view file tree

GitOrigin-RevId: bb0fe871837ffac6e1af6c18c7c1ae651dee7f81

services/web/frontend/js/features/history/components/file-tree/history-file-tree-doc.tsx

@@ -1,9 +1,12 @@
 import { memo } from 'react'
 import classNames from 'classnames'
 import HistoryFileTreeItem from './history-file-tree-item'
-import iconTypeFromName from '../../../file-tree/util/icon-type-from-name'
+import iconTypeFromName, {
+  newEditorIconTypeFromName,
+} from '../../../file-tree/util/icon-type-from-name'
 import type { FileDiff } from '../../services/types/file'
 import MaterialIcon from '@/shared/components/material-icon'
+import { useIsNewEditorEnabled } from '@/features/ide-redesign/utils/new-editor-utils'
 
 type HistoryFileTreeDocProps = {
   file: FileDiff
@@ -20,6 +23,16 @@ function HistoryFileTreeDoc({
   onClick,
   onKeyDown,
 }: HistoryFileTreeDocProps) {
+  const newEditor = useIsNewEditorEnabled()
+  const icon = newEditor ? (
+    <MaterialIcon
+      unfilled
+      type={newEditorIconTypeFromName(name)}
+      className="file-tree-icon"
+    />
+  ) : (
+    <MaterialIcon type={iconTypeFromName(name)} className="file-tree-icon" />
+  )
   return (
     <li
       role="treeitem"
@@ -33,12 +46,7 @@ function HistoryFileTreeDoc({
       <HistoryFileTreeItem
         name={name}
         operation={'operation' in file ? file.operation : undefined}
-        icons={
-          <MaterialIcon
-            type={iconTypeFromName(name)}
-            className="file-tree-icon"
-          />
-        }
+        icons={icon}
       />
     </li>
   )

services/web/frontend/js/features/history/components/file-tree/history-file-tree-folder.tsx

@@ -6,6 +6,7 @@ import HistoryFileTreeFolderList from './history-file-tree-folder-list'
 
 import type { HistoryDoc, HistoryFileTree } from '../../utils/file-tree'
 import MaterialIcon from '@/shared/components/material-icon'
+import { useIsNewEditorEnabled } from '@/features/ide-redesign/utils/new-editor-utils'
 
 type HistoryFileTreeFolderProps = {
   name: string
@@ -35,6 +36,7 @@ function HistoryFileTreeFolder({
   docs,
 }: HistoryFileTreeFolderProps) {
   const { t } = useTranslation()
+  const newEditor = useIsNewEditorEnabled()
 
   const [expanded, setExpanded] = useState(() => {
     return hasChanges({ name, folders, docs })
@@ -52,10 +54,12 @@ function HistoryFileTreeFolder({
           className="file-tree-expand-icon"
         />
       </button>
-      <MaterialIcon
-        type={expanded ? 'folder_open' : 'folder'}
-        className="file-tree-folder-icon"
-      />
+      {!newEditor && (
+        <MaterialIcon
+          type={expanded ? 'folder_open' : 'folder'}
+          className="file-tree-folder-icon"
+        />
+      )}
     </>
   )
 
@@ -79,7 +83,11 @@ function HistoryFileTreeFolder({
         <HistoryFileTreeItem name={name} icons={icons} />
       </li>
       {expanded ? (
-        <HistoryFileTreeFolderList folders={folders} docs={docs} />
+        <HistoryFileTreeFolderList
+          folders={folders}
+          docs={docs}
+          rootClassName="history-file-tree-list-inner"
+        />
       ) : null}
     </>
   )

services/web/frontend/stylesheets/bootstrap-5/pages/editor/history.scss

@@ -1,4 +1,5 @@
 :root {
+  --history-react-icon-color: var(--content-disabled);
   --history-react-header-bg: var(--bg-dark-secondary);
   --history-react-header-color: var(--content-primary-dark);
   --history-react-separator-color: var(--border-divider-dark);
@@ -10,6 +11,61 @@
   --history-react-separator-color: var(--border-divider);
 }
 
+.ide-redesign-main {
+  --history-react-header-bg: var(--bg-primary-themed);
+  --history-react-header-color: var(--content-primary-themed);
+  --history-react-icon-color: var(--file-tree-item-color);
+
+  .history-file-tree {
+    ul.history-file-tree-list {
+      padding: var(--spacing-02);
+
+      .history-file-tree-item > ul,
+      ul[role='tree'] {
+        border-left: 1px solid
+          color-mix(in srgb, var(--border-primary-themed) 24%, transparent);
+        margin-left: 14px !important;
+        margin-top: 0;
+      }
+
+      li {
+        padding: var(--spacing-02);
+        padding-right: 0;
+        margin-left: 0;
+      }
+
+      .history-file-tree-item {
+        border-radius: var(--border-radius-base);
+
+        .history-file-tree-item-name-wrapper {
+          .history-file-tree-item-badge {
+            margin-right: var(--spacing-02);
+          }
+        }
+
+        &::before {
+          display: none;
+        }
+
+        .material-symbols {
+          &.file-tree-expand-icon {
+            margin-left: 0;
+            vertical-align: middle;
+          }
+
+          &.file-tree-icon {
+            margin-left: 0;
+          }
+        }
+      }
+    }
+  }
+
+  ul[role='tree'].history-file-tree-list-inner {
+    padding-left: 10px;
+  }
+}
+
 history-root {
   height: 100%;
   display: block;
@@ -510,7 +566,7 @@ history-root {
       }
 
       .material-symbols {
-        color: var(--content-disabled);
+        color: var(--history-react-icon-color);
 
         &.file-tree-icon {
           margin-right: var(--spacing-02);