wip

Author: brendan-kellam

packages/web/src/app/api/(client)/client.ts

@@ -18,6 +18,8 @@ import {
 import {
     GetFilesRequest,
     GetFilesResponse,
+    GetFolderContentsRequest,
+    GetFolderContentsResponse,
     GetTreeRequest,
     GetTreeResponse,
 } from "@/features/fileTree/types";
@@ -101,4 +103,12 @@ export const getFiles = async (body: GetFilesRequest): Promise<GetFilesResponse
         body: JSON.stringify(body),
     }).then(response => response.json());
     return result as GetFilesResponse | ServiceError;
+}
+
+export const getFolderContents = async (body: GetFolderContentsRequest): Promise<GetFolderContentsResponse | ServiceError> => {
+    const result = await fetch("/api/folder_contents", {
+        method: "POST",
+        body: JSON.stringify(body),
+    }).then(response => response.json());
+    return result as GetFolderContentsResponse | ServiceError;
 }

packages/web/src/app/api/(server)/folder_contents/route.ts

@@ -0,0 +1,23 @@
+'use server';
+
+import { getFolderContents } from "@/features/fileTree/api";
+import { getFolderContentsRequestSchema } from "@/features/fileTree/types";
+import { schemaValidationError, serviceErrorResponse } from "@/lib/serviceError";
+import { isServiceError } from "@/lib/utils";
+import { NextRequest } from "next/server";
+
+export const POST = async (request: NextRequest) => {
+    const body = await request.json();
+    const parsed = await getFolderContentsRequestSchema.safeParseAsync(body);
+    if (!parsed.success) {
+        return serviceErrorResponse(schemaValidationError(parsed.error));
+    }
+
+    const response = await getFolderContents(parsed.data);
+    if (isServiceError(response)) {
+        return serviceErrorResponse(response);
+    }
+
+    return Response.json(response);
+}
+

packages/web/src/features/fileTree/api.ts

@@ -8,7 +8,8 @@ import { Repo } from '@sourcebot/db';
 import { createLogger } from '@sourcebot/shared';
 import path from 'path';
 import { simpleGit } from 'simple-git';
-import { FileTreeItem, FileTreeNode } from './types';
+import { FileTreeItem } from './types';
+import { buildFileTree, getPathspecs, isPathValid, normalizePath } from './utils';
 
 const logger = createLogger('file-tree');
 
@@ -41,17 +42,22 @@ export const getTree = async (params: { repoName: string, revisionName: string,
 
         let result: string = '';
         try {
-            result= await git.raw([
+
+            const command = [
                 // Disable quoting of non-ASCII characters in paths
                 '-c', 'core.quotePath=false',
                 'ls-tree',
                 revisionName,
                 // format as output as {type},{path}
                 '--format=%(objecttype),%(path)',
+                // include tree nodes
+                '-t',
                 '--',
                 '.',
                 ...pathSpecs,
-            ])
+            ];
+
+            result = await git.raw(command);
         } catch (error) {
             logger.error('git ls-tree failed.', { error });
             return unexpectedError('git ls-tree command failed.');
@@ -184,104 +190,6 @@ export const getFiles = async (params: { repoName: string, revisionName: string
 
     }));
 
-// @note: we don't allow directory traversal
-// or null bytes in the path.
-const isPathValid = (path: string) => {
-    return !path.includes('..') && !path.includes('\0');
-}
-
-const normalizePath = (path: string): string => {
-    // Normalize the path by...
-    let normalizedPath = path;
-
-    // ... adding a trailing slash if it doesn't have one.
-    // This is important since ls-tree won't return the contents
-    // of a directory if it doesn't have a trailing slash.
-    if (!normalizedPath.endsWith('/')) {
-        normalizedPath = `${normalizedPath}/`;
-    }
-
-    // ... removing any leading slashes. This is needed since
-    // the path is relative to the repository's root, so we
-    // need a relative path.
-    if (normalizedPath.startsWith('/')) {
-        normalizedPath = normalizedPath.slice(1);
-    }
-
-    return normalizedPath;
-}
-
-const getPathspecs = (path: string): string[] => {
-    const normalizedPath = normalizePath(path);
-    if (normalizedPath.length === 0) {
-        return [];
-    }
-
-    const parts = normalizedPath.split('/').filter(part => part.length > 0);
-    const pathspecs: string[] = [];
-
-    for (let i = 0; i < parts.length; i++) {
-        const prefix = parts.slice(0, i + 1).join('/');
-        pathspecs.push(`${prefix}/`);
-    }
-
-    return pathspecs;
-}
-
-const buildFileTree = (flatList: { type: string, path: string }[]): FileTreeNode => {
-    const root: FileTreeNode = {
-        name: 'root',
-        path: '',
-        type: 'tree',
-        children: [],
-    };
-
-    for (const item of flatList) {
-        const parts = item.path.split('/');
-        let current: FileTreeNode = root;
-
-        for (let i = 0; i < parts.length; i++) {
-            const part = parts[i];
-            const isLeaf = i === parts.length - 1;
-            const nodeType = isLeaf ? item.type : 'tree';
-            let next = current.children.find((child: FileTreeNode) => child.name === part && child.type === nodeType);
-
-            if (!next) {
-                next = {
-                    name: part,
-                    path: item.path,
-                    type: nodeType,
-                    children: [],
-                };
-                current.children.push(next);
-            }
-            current = next;
-        }
-    }
-
-    const sortTree = (node: FileTreeNode): FileTreeNode => {
-        if (node.type === 'blob') {
-            return node;
-        }
-
-        const sortedChildren = node.children
-            .map(sortTree)
-            .sort((a: FileTreeNode, b: FileTreeNode) => {
-                if (a.type !== b.type) {
-                    return a.type === 'tree' ? -1 : 1;
-                }
-                return a.name.localeCompare(b.name, undefined, { sensitivity: 'base' });
-            });
-
-        return {
-            ...node,
-            children: sortedChildren,
-        };
-    };
-
-    return sortTree(root);
-}
-
 // @todo: this is duplicated from the `getRepoPath` function in the
 // backend's `utils.ts` file. Eventually we should move this to a shared
 // package.

packages/web/src/features/fileTree/components/fileTreePanel.tsx

@@ -2,7 +2,7 @@
 
 import { useBrowseParams } from "@/app/[domain]/browse/hooks/useBrowseParams";
 import { useBrowseState } from "@/app/[domain]/browse/hooks/useBrowseState";
-import { getTree } from "@/app/api/(client)/client";
+import { getFolderContents, getTree } from "@/app/api/(client)/client";
 import { KeyboardShortcutHint } from "@/app/components/keyboardShortcutHint";
 import { Button } from "@/components/ui/button";
 import { ResizablePanel } from "@/components/ui/resizable";
@@ -12,14 +12,15 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip
 import { unwrapServiceError } from "@/lib/utils";
 import { useQuery } from "@tanstack/react-query";
 import { SearchIcon } from "lucide-react";
-import { useRef } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import {
     GoSidebarExpand as CollapseIcon,
     GoSidebarCollapse as ExpandIcon
 } from "react-icons/go";
 import { ImperativePanelHandle } from "react-resizable-panels";
 import { PureFileTreePanel } from "./pureFileTreePanel";
+import { FileTreeNode } from "../types";
 
 interface FileTreePanelProps {
     order: number;
@@ -29,7 +30,6 @@ const FILE_TREE_PANEL_DEFAULT_SIZE = 20;
 const FILE_TREE_PANEL_MIN_SIZE = 10;
 const FILE_TREE_PANEL_MAX_SIZE = 30;
 
-
 export const FileTreePanel = ({ order }: FileTreePanelProps) => {
     const {
         state: {
@@ -40,8 +40,20 @@ export const FileTreePanel = ({ order }: FileTreePanelProps) => {
 
     const { repoName, revisionName, path } = useBrowseParams();
 
+    const [tree, setTree] = useState<FileTreeNode | null>(null);
+
     const fileTreePanelRef = useRef<ImperativePanelHandle>(null);
-    const { data, isPending, isError } = useQuery({
+    const loadFolderContents = useCallback(async (folderPath: string) => {
+        return unwrapServiceError(
+            getFolderContents({
+                repoName,
+                revisionName: revisionName ?? 'HEAD',
+                path: folderPath
+            })
+        );
+    }, [repoName, revisionName]);
+
+    const { data, isError } = useQuery({
         queryKey: ['tree', repoName, revisionName, path],
         queryFn: () => unwrapServiceError(
             getTree({
@@ -64,6 +76,13 @@ export const FileTreePanel = ({ order }: FileTreePanelProps) => {
         description: "Toggle file tree panel",
     });
 
+    useEffect(() => {
+        if (!data) {
+            return;
+        }
+        setTree(data.tree);
+    }, [data]);
+
     return (
         <>
             <ResizablePanel
@@ -122,7 +141,7 @@ export const FileTreePanel = ({ order }: FileTreePanelProps) => {
                         </Tooltip>
                     </div>
                     <Separator orientation="horizontal" className="w-full mb-2" />
-                    {isPending ? (
+                    {!tree ? (
                         <FileTreePanelSkeleton />
                     ) :
                         isError ? (
@@ -131,8 +150,9 @@ export const FileTreePanel = ({ order }: FileTreePanelProps) => {
                             </div>
                         ) : (
                             <PureFileTreePanel
-                                tree={data.tree}
+                                tree={tree}
                                 path={path}
+                                onLoadChildren={loadFolderContents}
                             />
                         )}
                 </div>