Revert filetree empty space click (#14283)

GitOrigin-RevId: e019f88631e91ffefd71cae145b5355372f12df7

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

@@ -8,16 +8,9 @@ import Icon from '../../../shared/components/icon'
 import iconTypeFromName from '../util/icon-type-from-name'
 import classnames from 'classnames'
 
-function FileTreeDoc({
-  name,
-  id,
-  isFile,
-  isLinkedFile,
-  shouldShowVisualSelection,
-}) {
+function FileTreeDoc({ name, id, isFile, isLinkedFile }) {
   const { isSelected, props: selectableEntityProps } = useSelectableEntity(
     id,
-    shouldShowVisualSelection,
     isFile
   )
 
@@ -45,7 +38,6 @@ FileTreeDoc.propTypes = {
   id: PropTypes.string.isRequired,
   isFile: PropTypes.bool,
   isLinkedFile: PropTypes.bool,
-  shouldShowVisualSelection: PropTypes.bool,
 }
 
 export const FileTreeIcon = ({ isLinkedFile, name }) => {

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

@@ -12,7 +12,6 @@ function FileTreeFolderList({
   classes = {},
   dropRef = null,
   children,
-  shouldShowVisualSelection,
 }) {
   files = files.map(file => ({ ...file, isFile: true }))
   const docsAndFiles = [...docs, ...files]
@@ -33,7 +32,6 @@ function FileTreeFolderList({
             folders={folder.folders}
             docs={folder.docs}
             files={folder.fileRefs}
-            shouldShowVisualSelection={shouldShowVisualSelection}
           />
         )
       })}
@@ -45,7 +43,6 @@ function FileTreeFolderList({
             id={doc._id}
             isFile={doc.isFile}
             isLinkedFile={doc.linkedFileData && !!doc.linkedFileData.provider}
-            shouldShowVisualSelection={shouldShowVisualSelection}
           />
         )
       })}
@@ -63,7 +60,6 @@ FileTreeFolderList.propTypes = {
   }),
   dropRef: PropTypes.func,
   children: PropTypes.node,
-  shouldShowVisualSelection: PropTypes.bool,
 }
 
 function compareFunction(one, two) {

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

@@ -14,20 +14,10 @@ import FileTreeItemInner from './file-tree-item/file-tree-item-inner'
 import FileTreeFolderList from './file-tree-folder-list'
 import usePersistedState from '../../../shared/hooks/use-persisted-state'
 
-function FileTreeFolder({
-  name,
-  id,
-  folders,
-  docs,
-  files,
-  shouldShowVisualSelection,
-}) {
+function FileTreeFolder({ name, id, folders, docs, files }) {
   const { t } = useTranslation()
 
-  const { isSelected, props: selectableEntityProps } = useSelectableEntity(
-    id,
-    shouldShowVisualSelection
-  )
+  const { isSelected, props: selectableEntityProps } = useSelectableEntity(id)
 
   const { selectedEntityParentIds } = useFileTreeSelectable(id)
 
@@ -97,7 +87,6 @@ function FileTreeFolder({
           docs={docs}
           files={files}
           dropRef={dropRefList}
-          shouldShowVisualSelection={shouldShowVisualSelection}
         />
       ) : null}
     </>
@@ -110,7 +99,6 @@ FileTreeFolder.propTypes = {
   folders: PropTypes.array.isRequired,
   docs: PropTypes.array.isRequired,
   files: PropTypes.array.isRequired,
-  shouldShowVisualSelection: PropTypes.bool,
 }
 
 export default FileTreeFolder

services/web/frontend/js/features/file-tree/components/file-tree-root.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect } from 'react'
 import PropTypes from 'prop-types'
 
 import withErrorBoundary from '../../../infrastructure/error-boundary'
@@ -31,17 +31,6 @@ const FileTreeRoot = React.memo(function FileTreeRoot({
   const { _id: projectId } = useProjectContext(projectContextPropTypes)
   const { fileTreeData } = useFileTreeData()
   const isReady = projectId && fileTreeData
-  const [shouldShowVisualSelection, setShouldShowVisualSelection] =
-    useState(true)
-
-  const handleFileTreeClick = e => {
-    if (e.target.classList.contains('bottom-buffer')) {
-      setShouldShowVisualSelection(false)
-      return
-    }
-
-    setShouldShowVisualSelection(e.target !== e.currentTarget)
-  }
 
   useEffect(() => {
     if (isReady) onInit()
@@ -59,15 +48,8 @@ const FileTreeRoot = React.memo(function FileTreeRoot({
       {isConnected ? null : <div className="disconnected-overlay" />}
       <FileTreeToolbar />
       <FileTreeContextMenu />
-      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
-      <div
-        className="file-tree-inner"
-        onClick={handleFileTreeClick}
-        data-testid="file-tree-inner"
-      >
-        <FileTreeRootFolder
-          shouldShowVisualSelection={shouldShowVisualSelection}
-        />
+      <div className="file-tree-inner">
+        <FileTreeRootFolder />
       </div>
       <FileTreeModalDelete />
       <FileTreeModalCreateFile />
@@ -77,7 +59,7 @@ const FileTreeRoot = React.memo(function FileTreeRoot({
   )
 })
 
-function FileTreeRootFolder({ shouldShowVisualSelection }) {
+function FileTreeRootFolder() {
   useFileTreeSocketListener()
   const { fileTreeData } = useFileTreeData()
 
@@ -93,7 +75,6 @@ function FileTreeRootFolder({ shouldShowVisualSelection }) {
         classes={{ root: 'file-tree-list' }}
         dropRef={dropRef}
         isOver={isOver}
-        shouldShowVisualSelection={shouldShowVisualSelection}
       >
         <li className="bottom-buffer" />
       </FileTreeFolderList>
@@ -101,10 +82,6 @@ function FileTreeRootFolder({ shouldShowVisualSelection }) {
   )
 }
 
-FileTreeRootFolder.propTypes = {
-  shouldShowVisualSelection: PropTypes.bool,
-}
-
 FileTreeRoot.propTypes = {
   onSelect: PropTypes.func.isRequired,
   onInit: PropTypes.func.isRequired,

services/web/frontend/js/features/file-tree/contexts/file-tree-selectable.js

@@ -150,7 +150,6 @@ export function FileTreeSelectableProvider({ onSelect, children }) {
 
       dispatch({ type: ACTION_TYPES.SELECT, id: found.entity._id })
     }
-
     window.addEventListener('editor.openDoc', handleOpenDoc)
     return () => window.removeEventListener('editor.openDoc', handleOpenDoc)
   }, [fileTreeData])
@@ -203,11 +202,7 @@ const editorContextPropTypes = {
   permissionsLevel: PropTypes.oneOf(['readOnly', 'readAndWrite', 'owner']),
 }
 
-export function useSelectableEntity(
-  id,
-  shouldShowVisualSelection = true,
-  isFile
-) {
+export function useSelectableEntity(id, isFile) {
   const { view, setView } = useLayoutContext(layoutContextPropTypes)
   const { selectedEntityIds, selectOrMultiSelectEntity } = useContext(
     FileTreeSelectableContext
@@ -249,8 +244,7 @@ export function useSelectableEntity(
     [id, handleEvent, selectedEntityIds]
   )
 
-  const isVisuallySelected =
-    shouldShowVisualSelection && isSelected && view !== 'pdf'
+  const isVisuallySelected = isSelected && view !== 'pdf'
   const props = useMemo(
     () => ({
       className: classNames({ selected: isVisuallySelected }),

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

@@ -11,7 +11,6 @@ import { fileFinalPathname } from '../../utils/file-diff'
 type HistoryFileTreeFolderListProps = {
   folders: HistoryFileTree[]
   docs: HistoryDoc[]
-  shouldShowVisualSelection: boolean
   rootClassName?: string
   children?: ReactNode
 }
@@ -20,7 +19,6 @@ function HistoryFileTreeFolderList({
   folders,
   docs,
   rootClassName,
-  shouldShowVisualSelection,
   children,
 }: HistoryFileTreeFolderListProps) {
   const { selection, setSelection } = useHistoryContext()
@@ -66,7 +64,6 @@ function HistoryFileTreeFolderList({
           name={folder.name}
           folders={folder.folders}
           docs={folder.docs ?? []}
-          shouldShowVisualSelection={shouldShowVisualSelection}
         />
       ))}
       {docs.map(doc => (
@@ -75,7 +72,6 @@ function HistoryFileTreeFolderList({
           name={doc.name}
           file={doc}
           selected={
-            shouldShowVisualSelection &&
             !!selection.selectedFile &&
             fileFinalPathname(selection.selectedFile) === doc.pathname
           }

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

@@ -11,14 +11,12 @@ type HistoryFileTreeFolderProps = {
   name: string
   folders: HistoryFileTree[]
   docs: HistoryDoc[]
-  shouldShowVisualSelection: boolean
 }
 
 function HistoryFileTreeFolder({
   name,
   folders,
   docs,
-  shouldShowVisualSelection,
 }: HistoryFileTreeFolderProps) {
   const { t } = useTranslation()
 
@@ -60,11 +58,7 @@ function HistoryFileTreeFolder({
         <HistoryFileTreeItem name={name} icons={icons} />
       </li>
       {expanded ? (
-        <HistoryFileTreeFolderList
-          folders={folders}
-          docs={docs}
-          shouldShowVisualSelection={shouldShowVisualSelection}
-        />
+        <HistoryFileTreeFolderList folders={folders} docs={docs} />
       ) : null}
     </>
   )

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

@@ -1,4 +1,4 @@
-import { useMemo, useEffect, useState } from 'react'
+import { useMemo } from 'react'
 import { orderBy, reduce } from 'lodash'
 import { useHistoryContext } from '../context/history-context'
 import {
@@ -6,12 +6,9 @@ import {
   reducePathsToTree,
 } from '../utils/file-tree'
 import HistoryFileTreeFolderList from './file-tree/history-file-tree-folder-list'
-import { fileTreeContainer } from './history-root'
 
 export default function HistoryFileTree() {
   const { selection } = useHistoryContext()
-  const [shouldShowVisualSelection, setShouldShowVisualSelection] =
-    useState(true)
 
   const fileTree = useMemo(
     () => reduce(selection.files, reducePathsToTree, []),
@@ -28,29 +25,11 @@ export default function HistoryFileTree() {
     [sortedFileTree]
   )
 
-  useEffect(() => {
-    const listener = function (e: MouseEvent) {
-      if ((e.target as HTMLElement).classList.contains('bottom-buffer')) {
-        setShouldShowVisualSelection(false)
-        return
-      }
-
-      setShouldShowVisualSelection(e.target !== e.currentTarget)
-    }
-
-    fileTreeContainer?.addEventListener('click', listener)
-
-    return () => {
-      fileTreeContainer?.removeEventListener('click', listener)
-    }
-  }, [])
-
   return (
     <HistoryFileTreeFolderList
       folders={mappedFileTree.folders}
       docs={mappedFileTree.docs ?? []}
       rootClassName="history-file-tree-list"
-      shouldShowVisualSelection={shouldShowVisualSelection}
     >
       <li className="bottom-buffer" />
     </HistoryFileTreeFolderList>

services/web/frontend/js/features/history/components/history-root.tsx

@@ -8,7 +8,7 @@ import LoadingSpinner from '../../../shared/components/loading-spinner'
 import { ErrorBoundaryFallback } from '../../../shared/components/error-boundary-fallback'
 import withErrorBoundary from '../../../infrastructure/error-boundary'
 
-export const fileTreeContainer = document.getElementById('history-file-tree')
+const fileTreeContainer = document.getElementById('history-file-tree')
 
 function Main() {
   const { view } = useLayoutContext()

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

@@ -90,6 +90,8 @@
   ul.file-tree-list {
     margin: 0;
     overflow-x: hidden;
+    height: 100%;
+    flex-grow: 1;
     position: relative;
     overflow-y: auto;
 

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

@@ -384,6 +384,8 @@ history-root {
   ul.history-file-tree-list {
     margin: 0;
     overflow-x: hidden;
+    height: 100%;
+    flex-grow: 1;
     position: relative;
     overflow-y: auto;
 

services/web/test/frontend/features/file-tree/components/file-tree-root.test.js

@@ -305,38 +305,4 @@ describe('<FileTreeRoot/>', function () {
     // multiple items selected: no menu button is visible
     expect(screen.queryAllByRole('button', { name: 'Menu' })).to.have.length(0)
   })
-
-  it('deselects files when clicked outside the list but inside wrapping container', function () {
-    const rootFolder = [
-      {
-        _id: 'root-folder-id',
-        name: 'rootFolder',
-        docs: [{ _id: '456def', name: 'main.tex' }],
-        folders: [],
-        fileRefs: [],
-      },
-    ]
-    renderWithEditorContext(
-      <FileTreeRoot
-        refProviders={{}}
-        reindexReferences={() => null}
-        setRefProviderEnabled={() => null}
-        setStartedFreeTrial={() => null}
-        onSelect={onSelect}
-        onInit={onInit}
-        isConnected
-      />,
-      {
-        rootFolder,
-        projectId: '123abc',
-        rootDocId: '456def',
-        features: {},
-        permissionsLevel: 'owner',
-      }
-    )
-
-    screen.getByRole('treeitem', { selected: true })
-    fireEvent.click(screen.getByTestId('file-tree-inner'))
-    expect(screen.queryByRole('treeitem', { selected: true })).to.be.null
-  })
 })