Decouple history-file-tree styling out of editor file tree:

- Extract/duplicate the style from editor file tree (only extract styling that's being used in history file tree)
- Change some of the class name to avoid duplicated class name from the editor file tree
- Revert change to editor file tree since it has been moved to history file tree

GitOrigin-RevId: 6c3b20080c9b428363024db622f60e3540d919e6

services/web/app/views/project/editor/file-tree-history-react.pug

@@ -1,3 +1,3 @@
-aside.editor-sidebar.full-size.file-tree#history-file-tree(
+aside.editor-sidebar.full-size.history-file-tree#history-file-tree(
 	ng-show="history.isReact && ui.view == 'history'"
 )

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

@@ -27,6 +27,7 @@ export default function HistoryFileTreeFolder({
       <button
         onClick={() => setExpanded(!expanded)}
         aria-label={expanded ? t('collapse') : t('expand')}
+        className="history-file-tree-folder-button"
       >
         <Icon
           type={expanded ? 'angle-down' : 'angle-right'}

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

@@ -8,24 +8,22 @@ type FileTreeItemProps = {
   icons: ReactNode
 }
 
-export default function FileTreeItem({
+export default function HistoryFileTreeItem({
   name,
   operation,
   icons,
 }: FileTreeItemProps) {
   return (
-    <div className="entity" role="presentation">
-      <div className="entity-name entity-name-react" role="presentation">
-        {icons}
-        <button className="item-name-button">
-          <span className="item-name-button-text">{name}</span>
-          {operation ? (
-            <Badge className="item-name-button-badge" size="sm">
-              {operation}
-            </Badge>
-          ) : null}
-        </button>
-      </div>
+    <div className="history-file-tree-item" role="presentation">
+      {icons}
+      <button className="history-file-tree-item-button">
+        <span className="history-file-tree-item-button-text">{name}</span>
+        {operation ? (
+          <Badge className="history-file-tree-item-button-badge" size="sm">
+            {operation}
+          </Badge>
+        ) : null}
+      </button>
     </div>
   )
 }

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

@@ -17,7 +17,7 @@ export default function HistoryFileTree() {
     <HistoryFileTreeFolderList
       folders={mappedFileTree.folders}
       docs={mappedFileTree.docs ?? []}
-      rootClassName="file-tree-list"
+      rootClassName="history-file-tree-list"
     >
       <li className="bottom-buffer" />
     </HistoryFileTreeFolderList>

services/web/frontend/stylesheets/app/editor/file-tree.less

@@ -119,7 +119,9 @@
       }
 
       .entity > .entity-name > button {
-        .reset-button;
+        background-color: transparent;
+        border: 0;
+        padding: 0;
         &:focus {
           outline: none;
         }
@@ -129,20 +131,6 @@
           text-overflow: ellipsis;
           text-align: left;
           padding-right: 32px;
-          font-weight: normal;
-
-          .item-name-button-text {
-            display: inline-flex;
-            margin-right: 5px;
-          }
-
-          .item-name-button-badge {
-            text-transform: capitalize;
-
-            &:hover {
-              background-color: @neutral-20;
-            }
-          }
         }
       }
 

services/web/frontend/stylesheets/app/editor/history-react.less

@@ -224,3 +224,133 @@ history-root {
     bottom: 16px;
   }
 }
+
+.history-file-tree {
+  display: flex !important; // To work around jQuery layout's inline styles
+  flex-direction: column;
+  flex-grow: 1;
+  max-height: 100%;
+
+  ul.history-file-tree-list {
+    margin: 0;
+    overflow-x: hidden;
+    height: 100%;
+    flex-grow: 1;
+    position: relative;
+    overflow-y: auto;
+
+    .history-file-tree-item > ul,
+    ul[role='tree'] {
+      margin-left: 22px;
+    }
+
+    li.bottom-buffer {
+      min-height: @line-height-computed;
+    }
+
+    li {
+      line-height: @file-tree-line-height;
+      position: relative;
+
+      &:focus {
+        outline: none;
+      }
+
+      .history-file-tree-item {
+        color: @file-tree-item-color;
+        cursor: pointer;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: clip;
+        user-select: none;
+
+        &:focus {
+          outline: none;
+        }
+
+        &:hover {
+          background-color: @file-tree-item-hover-bg;
+
+          // When the entity is a subfolder, the DOM element is "indented" via margin-left. This makes the
+          // element not fill the entire file-tree width (as it's spaced from the left-hand side via margin)
+          // and, in consequence, the background gets clipped. The ::before pseudo-selector is used to fill
+          // the empty space.
+          .fake-full-width-bg(@file-tree-item-hover-bg);
+        }
+
+        .history-file-tree-folder-button,
+        .history-file-tree-item-button {
+          .reset-button;
+
+          &:focus {
+            outline: none;
+          }
+        }
+
+        .history-file-tree-item-button {
+          width: 100%;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          text-align: left;
+          padding-right: 40px;
+          font-weight: normal;
+          display: inline-flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: space-between;
+
+          .history-file-tree-item-button-text {
+            display: inline-flex;
+            margin-right: 5px;
+          }
+
+          .history-file-tree-item-button-badge {
+            text-transform: capitalize;
+
+            &:hover {
+              background-color: @neutral-20;
+            }
+          }
+        }
+      }
+
+      i.fa {
+        color: @file-tree-item-icon-color;
+        font-size: 14px;
+
+        &.file-tree-icon {
+          margin-right: 4px;
+          margin-left: 8px;
+        }
+
+        &.file-tree-folder-icon {
+          margin-right: 4px;
+        }
+
+        &.file-tree-expand-icon {
+          margin-left: 8px;
+        }
+      }
+
+      i.fa-folder-open,
+      i.fa-folder {
+        color: @file-tree-item-folder-color;
+        font-size: 14px;
+      }
+    }
+
+    li.selected > .history-file-tree-item {
+      color: @file-tree-item-selected-color;
+      background-color: @file-tree-item-selected-bg;
+      font-weight: bold;
+
+      > div > i.fa,
+      > button > i.fa,
+      > i.fa {
+        color: @file-tree-item-selected-color;
+      }
+
+      .fake-full-width-bg(@file-tree-item-selected-bg);
+    }
+  }
+}