Merge pull request #21226 from overleaf/rd-history-filetree

Migrate the history file tree to Bootstrap 5

GitOrigin-RevId: bb5443d91992ff7241ed5c8bb467fa553e55bb0f

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

@@ -4,6 +4,8 @@ import HistoryFileTreeItem from './history-file-tree-item'
 import iconTypeFromName from '../../../file-tree/util/icon-type-from-name'
 import Icon from '../../../../shared/components/icon'
 import type { FileDiff } from '../../services/types/file'
+import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
+import MaterialIcon from '@/shared/components/material-icon'
 
 type HistoryFileTreeDocProps = {
   file: FileDiff
@@ -34,10 +36,20 @@ function HistoryFileTreeDoc({
         name={name}
         operation={'operation' in file ? file.operation : undefined}
         icons={
-          <Icon
-            type={iconTypeFromName(name)}
-            fw
-            className="spaced file-tree-icon"
+          <BootstrapVersionSwitcher
+            bs3={
+              <Icon
+                type={iconTypeFromName(name)}
+                fw
+                className="file-tree-icon"
+              />
+            }
+            bs5={
+              <MaterialIcon
+                type={iconTypeFromName(name)}
+                className="file-tree-icon"
+              />
+            }
           />
         }
       />

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

@@ -6,6 +6,8 @@ import HistoryFileTreeFolderList from './history-file-tree-folder-list'
 
 import Icon from '../../../../shared/components/icon'
 import type { HistoryDoc, HistoryFileTree } from '../../utils/file-tree'
+import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
+import MaterialIcon from '@/shared/components/material-icon'
 
 type HistoryFileTreeFolderProps = {
   name: string
@@ -41,24 +43,46 @@ function HistoryFileTreeFolder({
   })
 
   const icons = (
-    <>
-      <button
-        onClick={() => setExpanded(!expanded)}
-        aria-label={expanded ? t('collapse') : t('expand')}
-        className="history-file-tree-folder-button"
-      >
-        <Icon
-          type={expanded ? 'angle-down' : 'angle-right'}
-          fw
-          className="file-tree-expand-icon"
-        />
-      </button>
-      <Icon
-        type={expanded ? 'folder-open' : 'folder'}
-        fw
-        className="file-tree-folder-icon"
-      />
-    </>
+    <BootstrapVersionSwitcher
+      bs3={
+        <>
+          <button
+            onClick={() => setExpanded(!expanded)}
+            aria-label={expanded ? t('collapse') : t('expand')}
+            className="history-file-tree-folder-button"
+          >
+            <Icon
+              type={expanded ? 'angle-down' : 'angle-right'}
+              fw
+              className="file-tree-expand-icon"
+            />
+          </button>
+          <Icon
+            type={expanded ? 'folder-open' : 'folder'}
+            fw
+            className="file-tree-folder-icon"
+          />
+        </>
+      }
+      bs5={
+        <>
+          <button
+            onClick={() => setExpanded(!expanded)}
+            aria-label={expanded ? t('collapse') : t('expand')}
+            className="history-file-tree-folder-button"
+          >
+            <MaterialIcon
+              type={expanded ? 'expand_more' : 'chevron_right'}
+              className="file-tree-expand-icon"
+            />
+          </button>
+          <MaterialIcon
+            type={expanded ? 'folder_open' : 'folder'}
+            className="file-tree-folder-icon"
+          />
+        </>
+      }
+    />
   )
 
   return (
@@ -71,7 +95,12 @@ function HistoryFileTreeFolder({
         aria-label={name}
         tabIndex={0}
         onClick={() => setExpanded(!expanded)}
-        onKeyDown={() => setExpanded(!expanded)}
+        onKeyDown={event => {
+          if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault()
+            setExpanded(!expanded)
+          }
+        }}
       >
         <HistoryFileTreeItem name={name} icons={icons} />
       </li>

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

@@ -1,7 +1,7 @@
 import classNames from 'classnames'
 import type { ReactNode } from 'react'
 import type { FileOperation } from '../../services/types/file-operation'
-import Tag from '@/shared/components/tag'
+import OLTag from '@/features/ui/components/ol/ol-tag'
 
 type FileTreeItemProps = {
   name: string
@@ -26,7 +26,7 @@ export default function HistoryFileTreeItem({
           {name}
         </div>
         {operation && (
-          <Tag className="history-file-tree-item-badge">{operation}</Tag>
+          <OLTag className="history-file-tree-item-badge">{operation}</OLTag>
         )}
       </div>
     </div>