Merge pull request #47204 from nextcloud/fix/tree-hidden-files

fix(files): Respect "Show hidden files" setting in tree

apps/files/src/services/FolderTree.ts

@@ -6,10 +6,7 @@
 import type { ContentsWithRoot } from '@nextcloud/files'
 
 import { CancelablePromise } from 'cancelable-promise'
-import {
-	davRemoteURL,
-	Folder,
-} from '@nextcloud/files'
+import { davRemoteURL } from '@nextcloud/files'
 import axios from '@nextcloud/axios'
 import { generateOcsUrl } from '@nextcloud/router'
 import { getCurrentUser } from '@nextcloud/auth'
@@ -27,6 +24,7 @@ type Tree = Array<{
 
 export interface TreeNode {
 	source: string,
+	encodedSource: string,
 	path: string,
 	fileid: number,
 	basename: string,
@@ -40,8 +38,10 @@ export const sourceRoot = `${davRemoteURL}/files/${getCurrentUser()?.uid}`
 const getTreeNodes = (tree: Tree, currentPath: string = '/', nodes: TreeNode[] = []): TreeNode[] => {
 	for (const { id, basename, displayName, children } of tree) {
 		const path = joinPaths(currentPath, basename)
+		const source = `${sourceRoot}${path}`
 		const node: TreeNode = {
-			source: `${sourceRoot}${path}`,
+			source,
+			encodedSource: encodeSource(source),
 			path,
 			fileid: id,
 			basename,
@@ -79,14 +79,3 @@ export const getSourceParent = (source: string): string => {
 	}
 	return encodeSource(parent)
 }
-
-export const getFolderTreeViewId = (folder: Folder): string => {
-	return folder.encodedSource
-}
-
-export const getFolderTreeParentId = (folder: Folder): string => {
-	if (folder.dirname === '/') {
-		return folderTreeId
-	}
-	return dirname(folder.encodedSource)
-}

apps/files/src/views/folderTree.ts

@@ -16,28 +16,27 @@ import FolderSvg from '@mdi/svg/svg/folder.svg?raw'
 import FolderMultipleSvg from '@mdi/svg/svg/folder-multiple.svg?raw'
 
 import {
-	encodeSource,
 	folderTreeId,
 	getContents,
 	getFolderTreeNodes,
-	getFolderTreeParentId,
-	getFolderTreeViewId,
 	getSourceParent,
 	sourceRoot,
 } from '../services/FolderTree.ts'
 
 const isFolderTreeEnabled = loadState('files', 'config', { folder_tree: true }).folder_tree
 
+let showHiddenFiles = loadState('files', 'config', { show_hidden: false }).show_hidden
+
 const Navigation = getNavigation()
 
 const queue = new PQueue({ concurrency: 5, intervalCap: 5, interval: 200 })
 
 const registerQueue = new PQueue({ concurrency: 5, intervalCap: 5, interval: 200 })
 
-const registerTreeNodes = async (path: string = '/') => {
+const registerTreeChildren = async (path: string = '/') => {
 	await queue.add(async () => {
 		const nodes = await getFolderTreeNodes(path)
-		const promises = nodes.map(node => registerQueue.add(() => registerTreeNodeView(node)))
+		const promises = nodes.map(node => registerQueue.add(() => registerNodeView(node)))
 		await Promise.allSettled(promises)
 	})
 }
@@ -50,7 +49,7 @@ const getLoadChildViews = (node: TreeNode | Folder) => {
 		}
 		// @ts-expect-error Custom property
 		view.loading = true
-		await registerTreeNodes(node.path)
+		await registerTreeChildren(node.path)
 		// @ts-expect-error Custom property
 		view.loading = false
 		// @ts-expect-error Custom property
@@ -62,12 +61,20 @@ const getLoadChildViews = (node: TreeNode | Folder) => {
 	}
 }
 
-const registerTreeNodeView = (node: TreeNode) => {
+const registerNodeView = (node: TreeNode | Folder) => {
+	const registeredView = Navigation.views.find(view => view.id === node.encodedSource)
+	if (registeredView) {
+		Navigation.remove(registeredView.id)
+	}
+	if (!showHiddenFiles && node.basename.startsWith('.')) {
+		return
+	}
 	Navigation.register(new View({
-		id: encodeSource(node.source),
+		id: node.encodedSource,
 		parent: getSourceParent(node.source),
 
-		name: node.displayName ?? node.basename,
+		// @ts-expect-error Casing differences
+		name: node.displayName ?? node.displayname ?? node.basename,
 
 		icon: FolderSvg,
 		order: 0, // TODO Allow undefined order for natural sort
@@ -83,29 +90,8 @@ const registerTreeNodeView = (node: TreeNode) => {
 	}))
 }
 
-const registerFolderView = (folder: Folder) => {
-	Navigation.register(new View({
-		id: getFolderTreeViewId(folder),
-		parent: getFolderTreeParentId(folder),
-
-		name: folder.displayname,
-
-		icon: FolderSvg,
-		order: 0, // TODO Allow undefined order for natural sort
-
-		getContents,
-		loadChildViews: getLoadChildViews(folder),
-
-		params: {
-			view: folderTreeId,
-			fileid: String(folder.fileid),
-			dir: folder.path,
-		},
-	}))
-}
-
 const removeFolderView = (folder: Folder) => {
-	const viewId = getFolderTreeViewId(folder)
+	const viewId = folder.encodedSource
 	Navigation.remove(viewId)
 }
 
@@ -117,7 +103,7 @@ const onCreateNode = (node: Node) => {
 	if (!(node instanceof Folder)) {
 		return
 	}
-	registerFolderView(node)
+	registerNodeView(node)
 }
 
 const onDeleteNode = (node: Node) => {
@@ -132,7 +118,7 @@ const onMoveNode = ({ node, oldSource }) => {
 		return
 	}
 	removeFolderViewSource(oldSource)
-	registerFolderView(node)
+	registerNodeView(node)
 
 	const newPath = node.source.replace(sourceRoot, '')
 	const oldPath = oldSource.replace(sourceRoot, '')
@@ -147,13 +133,22 @@ const onMoveNode = ({ node, oldSource }) => {
 	})
 	for (const view of childViews) {
 		// @ts-expect-error FIXME Allow setting parent
-		view.parent = getFolderTreeParentId(node)
+		view.parent = getSourceParent(node.source)
 		// @ts-expect-error dir param is defined
 		view.params.dir = view.params.dir.replace(oldPath, newPath)
 	}
 }
 
-const registerFolderTreeRoot = () => {
+const onUserConfigUpdated = async ({ key, value }) => {
+	if (key === 'show_hidden') {
+		showHiddenFiles = value
+		await registerTreeChildren()
+		// @ts-expect-error No payload
+		emit('files:folder-tree:initialized')
+	}
+}
+
+const registerTreeRoot = () => {
 	Navigation.register(new View({
 		id: folderTreeId,
 
@@ -167,19 +162,16 @@ const registerFolderTreeRoot = () => {
 	}))
 }
 
-const registerFolderTreeChildren = async () => {
-	await registerTreeNodes()
-	subscribe('files:node:created', onCreateNode)
-	subscribe('files:node:deleted', onDeleteNode)
-	subscribe('files:node:moved', onMoveNode)
-	// @ts-expect-error No payload
-	emit('files:folder-tree:initialized')
-}
-
 export const registerFolderTreeView = async () => {
 	if (!isFolderTreeEnabled) {
 		return
 	}
-	registerFolderTreeRoot()
-	await registerFolderTreeChildren()
+	registerTreeRoot()
+	await registerTreeChildren()
+	subscribe('files:node:created', onCreateNode)
+	subscribe('files:node:deleted', onDeleteNode)
+	subscribe('files:node:moved', onMoveNode)
+	subscribe('files:config:updated', onUserConfigUpdated)
+	// @ts-expect-error No payload
+	emit('files:folder-tree:initialized')
 }