Merge pull request #27389 from overleaf/dp-folder-click

Open folder on click of folder item

GitOrigin-RevId: 4af71533951ef183eec9dec4b4940470695f2f1d

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

@@ -7,7 +7,7 @@ function FileTreeFolderIcons({
   onExpandCollapseClick,
 }: {
   expanded: boolean
-  onExpandCollapseClick: () => void
+  onExpandCollapseClick?: () => void
 }) {
   const { t } = useTranslation()
   const newEditor = useIsNewEditorEnabled()
@@ -15,16 +15,16 @@ function FileTreeFolderIcons({
   if (newEditor) {
     return (
       <>
-        <button
+        <div
+          // TODO ide-redesign-cleanup: rename the class now its no longer a button
           className="folder-expand-collapse-button"
-          onClick={onExpandCollapseClick}
           aria-label={expanded ? t('collapse') : t('expand')}
         >
           <MaterialIcon
             type={expanded ? 'expand_more' : 'chevron_right'}
             className="file-tree-expand-icon"
           />
-        </button>
+        </div>
       </>
     )
   }

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

@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { useCallback, useEffect } from 'react'
 import classNames from 'classnames'
 
 import {
@@ -14,6 +14,7 @@ import { Folder } from '../../../../../types/folder'
 import { Doc } from '../../../../../types/doc'
 import { FileRef } from '../../../../../types/file-ref'
 import FileTreeFolderIcons from './file-tree-folder-icons'
+import { useIsNewEditorEnabled } from '@/features/ide-redesign/utils/new-editor-utils'
 
 function FileTreeFolder({
   name,
@@ -28,6 +29,7 @@ function FileTreeFolder({
   docs: Doc[]
   files: FileRef[]
 }) {
+  const newEditor = useIsNewEditorEnabled()
   const { isSelected, props: selectableEntityProps } = useSelectableEntity(
     id,
     'folder'
@@ -46,9 +48,15 @@ function FileTreeFolder({
     }
   }, [id, selectedEntityParentIds, setExpanded])
 
-  function handleExpandCollapseClick() {
-    setExpanded(!expanded)
-  }
+  const handleExpandCollapseClick = useCallback(() => {
+    setExpanded(expanded => !expanded)
+  }, [setExpanded])
+
+  const onClick = useCallback(() => {
+    if (newEditor) {
+      handleExpandCollapseClick()
+    }
+  }, [newEditor, handleExpandCollapseClick])
 
   const { isOver: isOverRoot, dropRef: dropRefRoot } = useDroppable(id)
   const { isOver: isOverList, dropRef: dropRefList } = useDroppable(id)
@@ -62,7 +70,6 @@ function FileTreeFolder({
         {...selectableEntityProps}
         aria-expanded={expanded}
         aria-label={name}
-        tabIndex={0}
         ref={dropRefRoot}
         className={classNames(selectableEntityProps.className, {
           'dnd-droppable-hover': isOverRoot || isOverList,
@@ -74,6 +81,7 @@ function FileTreeFolder({
           name={name}
           type="folder"
           isSelected={isSelected}
+          onClick={onClick}
           icons={
             <FileTreeFolderIcons
               expanded={expanded}

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

@@ -11,6 +11,7 @@ import FileTreeItemMenu from './file-tree-item-menu'
 import { useFileTreeSelectable } from '../../contexts/file-tree-selectable'
 import { useFileTreeActionable } from '../../contexts/file-tree-actionable'
 import { useDragDropManager } from 'react-dnd'
+import { useIsNewEditorEnabled } from '@/features/ide-redesign/utils/new-editor-utils'
 
 function FileTreeItemInner({
   id,
@@ -18,12 +19,14 @@ function FileTreeItemInner({
   type,
   isSelected,
   icons,
+  onClick,
 }: {
   id: string
   name: string
   type: string
   isSelected: boolean
   icons?: ReactNode
+  onClick?: () => void
 }) {
   const { fileTreeReadOnly } = useFileTreeData()
   const { setContextMenuCoords } = useFileTreeMainContext()
@@ -84,10 +87,11 @@ function FileTreeItemInner({
         role="presentation"
         ref={itemRef}
       >
-        {icons}
-        <FileTreeItemName
+        <FileTreeItemIconsAndName
           name={name}
           isSelected={isSelected}
+          icons={icons}
+          onClick={onClick}
           setIsDraggable={setIsDraggable}
         />
         {hasMenu ? <FileTreeItemMenu id={id} name={name} /> : null}
@@ -96,4 +100,53 @@ function FileTreeItemInner({
   )
 }
 
+const FileTreeItemIconsAndName = ({
+  name,
+  isSelected,
+  icons,
+  onClick,
+  setIsDraggable,
+}: {
+  name: string
+  isSelected: boolean
+  icons?: ReactNode
+  onClick?: () => void
+  setIsDraggable: (isDraggable: boolean) => void
+}) => {
+  const newEditor = useIsNewEditorEnabled()
+
+  if (newEditor) {
+    return onClick ? (
+      <button className="file-tree-entity-button" onClick={onClick}>
+        {icons}
+        <FileTreeItemName
+          name={name}
+          isSelected={isSelected}
+          setIsDraggable={setIsDraggable}
+        />
+      </button>
+    ) : (
+      <div className="file-tree-entity-details">
+        {icons}
+        <FileTreeItemName
+          name={name}
+          isSelected={isSelected}
+          setIsDraggable={setIsDraggable}
+        />
+      </div>
+    )
+  }
+
+  return (
+    <>
+      {icons}
+      <FileTreeItemName
+        name={name}
+        isSelected={isSelected}
+        setIsDraggable={setIsDraggable}
+      />
+    </>
+  )
+}
+
 export default FileTreeItemInner

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

@@ -1,6 +1,7 @@
 import { useState, useEffect, RefObject } from 'react'
 import { useRefWithAutoFocus } from '../../../../shared/hooks/use-ref-with-auto-focus'
 import { useFileTreeActionable } from '../../contexts/file-tree-actionable'
+import { useIsNewEditorEnabled } from '@/features/ide-redesign/utils/new-editor-utils'
 
 function FileTreeItemName({
   name,
@@ -48,6 +49,7 @@ function DisplayName({
   startRenaming: () => void
 }) {
   const [clicksInSelectedCount, setClicksInSelectedCount] = useState(0)
+  const newEditor = useIsNewEditorEnabled()
 
   function onClick() {
     setClicksInSelectedCount(clicksInSelectedCount + 1)
@@ -63,6 +65,15 @@ function DisplayName({
     startRenaming()
   }
 
+  if (newEditor) {
+    return (
+      // TODO ide-redesign-cleanup: rename the class now its no longer a button
+      <div className="item-name-button">
+        <span>{name}</span>
+      </div>
+    )
+  }
+
   return (
     <button
       className="item-name-button"

services/web/frontend/stylesheets/pages/editor/file-tree.scss

@@ -171,7 +171,6 @@
   .entity-name {
     color: var(--file-tree-item-color);
     border-radius: var(--border-radius-base);
-    padding: var(--spacing-02);
 
     // TODO ide-redesign-cleanup: This is here to override the fake-full-width-bg
     // mixin. We can just remove that mixin when we clean this up.
@@ -182,6 +181,12 @@
 
   .item-name-button {
     margin-left: var(--spacing-02);
+    overflow: hidden;
+
+    span {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
   }
 
   .dnd-draggable-preview-item {
@@ -550,7 +555,6 @@
           .entity-menu-toggle {
             display: inline-block;
             background-color: transparent;
-            box-shadow: none;
             border: 0;
             padding-right: var(--spacing-02);
             padding-left: var(--spacing-02);
@@ -734,6 +738,18 @@
   margin-top: var(--spacing-06);
 }
 
+.file-tree-entity-button,
+.file-tree-entity-details {
+  display: flex;
+  width: 100%;
+  color: inherit;
+
+  // TODO ide-redesign-cleanup: Remove !important when we clean up the old file tree
+  padding: var(--spacing-02) !important;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
 .btn.modal-new-file-mode {
   justify-content: left;
   text-align: left;