Merge pull request #6800 from overleaf/ta-file-tree-selection-flat-2

File Tree File Selection in Flat PDF View Take 2

GitOrigin-RevId: 0e7732e3a4df0650a6410d202c06c4852666615d

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

@@ -8,8 +8,11 @@ import Icon from '../../../shared/components/icon'
 import iconTypeFromName from '../util/icon-type-from-name'
 import classnames from 'classnames'
 
-function FileTreeDoc({ name, id, isLinkedFile }) {
-  const { isSelected, props: selectableEntityProps } = useSelectableEntity(id)
+function FileTreeDoc({ name, id, isFile, isLinkedFile }) {
+  const { isSelected, props: selectableEntityProps } = useSelectableEntity(
+    id,
+    isFile
+  )
 
   return (
     <li
@@ -31,6 +34,7 @@ function FileTreeDoc({ name, id, isLinkedFile }) {
 FileTreeDoc.propTypes = {
   name: PropTypes.string.isRequired,
   id: PropTypes.string.isRequired,
+  isFile: PropTypes.bool,
   isLinkedFile: PropTypes.bool,
 }
 

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

@@ -40,6 +40,7 @@ function FileTreeFolderList({
             key={doc._id}
             name={doc.name}
             id={doc._id}
+            isFile={doc.linkedFileData !== undefined}
             isLinkedFile={doc.linkedFileData && !!doc.linkedFileData.provider}
           />
         )

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

@@ -15,6 +15,7 @@ import { findInTree } from '../util/find-in-tree'
 import { useFileTreeData } from '../../../shared/context/file-tree-data-context'
 import { useProjectContext } from '../../../shared/context/project-context'
 import { useEditorContext } from '../../../shared/context/editor-context'
+import { useLayoutContext } from '../../../shared/context/layout-context'
 import usePersistedState from '../../../shared/hooks/use-persisted-state'
 import usePreviousValue from '../../../shared/hooks/use-previous-value'
 
@@ -193,7 +194,9 @@ const projectContextPropTypes = {
 const editorContextPropTypes = {
   permissionsLevel: PropTypes.oneOf(['readOnly', 'readAndWrite', 'owner']),
 }
-export function useSelectableEntity(id) {
+
+export function useSelectableEntity(id, isFile) {
+  const { view, setView } = useLayoutContext(layoutContextPropTypes)
   const { selectedEntityIds, selectOrMultiSelectEntity } = useContext(
     FileTreeSelectableContext
   )
@@ -203,8 +206,9 @@ export function useSelectableEntity(id) {
   const handleEvent = useCallback(
     ev => {
       selectOrMultiSelectEntity(id, ev.ctrlKey || ev.metaKey)
+      setView(isFile ? 'file' : 'editor')
     },
-    [id, selectOrMultiSelectEntity]
+    [id, selectOrMultiSelectEntity, setView, isFile]
   )
 
   const handleClick = useCallback(
@@ -233,20 +237,26 @@ export function useSelectableEntity(id) {
     [id, handleEvent, selectedEntityIds]
   )
 
+  const isVisuallySelected = isSelected && view !== 'pdf'
   const props = useMemo(
     () => ({
-      className: classNames({ selected: isSelected }),
-      'aria-selected': isSelected,
+      className: classNames({ selected: isVisuallySelected }),
+      'aria-selected': isVisuallySelected,
       onClick: handleClick,
       onContextMenu: handleContextMenu,
       onKeyPress: handleKeyPress,
     }),
-    [handleClick, handleContextMenu, handleKeyPress, isSelected]
+    [handleClick, handleContextMenu, handleKeyPress, isVisuallySelected]
   )
 
   return { isSelected, props }
 }
 
+const layoutContextPropTypes = {
+  view: PropTypes.string,
+  setView: PropTypes.func.isRequired,
+}
+
 export function useFileTreeSelectable() {
   const context = useContext(FileTreeSelectableContext)