Support middle-click on folders

Author: leomoty

src/files-card-body.tsx

@@ -210,6 +210,15 @@ export const FilesCardBody = ({
             }
         };
 
+        const handleAuxClick = (ev: MouseEvent) => {
+            const name = getFilenameForEvent(ev);
+            const file = sortedFiles?.find(file => file.name === name);
+
+            if (ev.button === 1 && file?.to !== "dir") {
+                ev.preventDefault();
+            }
+        };
+
         const handleContextMenu = (event: MouseEvent) => {
             const name = getFilenameForEvent(event);
             if (name !== null && selected.length > 1) {
@@ -273,6 +282,7 @@ export const FilesCardBody = ({
             folderViewElem.addEventListener("click", handleClick);
             folderViewElem.addEventListener("dblclick", handleDoubleClick);
             folderViewElem.addEventListener("contextmenu", handleContextMenu);
+            folderViewElem.addEventListener("auxclick", handleAuxClick);
         }
 
         if (!isMounted.current && !dialogs.isActive()) {
@@ -288,6 +298,7 @@ export const FilesCardBody = ({
                 folderViewElem.removeEventListener("click", handleClick);
                 folderViewElem.removeEventListener("dblclick", handleDoubleClick);
                 folderViewElem.removeEventListener("contextmenu", handleContextMenu);
+                folderViewElem.removeEventListener("auxclick", handleAuxClick);
             }
         };
     }, [
@@ -389,6 +400,7 @@ export const FilesCardBody = ({
                             <Row
                               key={rowIndex}
                               file={file}
+                              path={path}
                               isSelected={selected.some(s => s.name === file.name)}
                             />)}
                     </Tbody>
@@ -408,8 +420,9 @@ const getFileType = (file: FolderFileInfo) => {
 };
 
 // Memoize the Item component as rendering thousands of them on each render of parent component is costly.
-const Row = React.memo(function Item({ file, isSelected } : {
+const Row = React.memo(function Item({ file, path, isSelected } : {
     file: FolderFileInfo,
+    path: string[],
     isSelected: boolean
 }) {
     const fileType = getFileType(file);
@@ -418,6 +431,8 @@ const Row = React.memo(function Item({ file, isSelected } : {
         className += " row-selected";
     if (file.type === "lnk")
         className += " symlink";
+    const filePath = (file.type === "dir" &&
+        `${cockpit.transport.origin}/files#/?path=${encodeURIComponent([...path, file.name].join("/"))}`) || "#";
 
     return (
         <Tr
@@ -428,7 +443,7 @@ const Row = React.memo(function Item({ file, isSelected } : {
               className="item-name"
               dataLabel={fileType}
             >
-                <a href="#">{file.name}</a>
+                <a href={filePath}>{file.name}</a>
             </Td>
             <Td
               className="item-size pf-v5-m-tabular-nums"