fix(web): validate browse paths on the server

Author: brendan-kellam

packages/web/src/app/(app)/browse/[...path]/layout.tsx

@@ -0,0 +1,32 @@
+import { getConfiguredLanguageModelsInfo } from "@/features/chat/utils.server";
+import { notFound } from "next/navigation";
+import { getBrowseParamsFromPathParam } from "../hooks/utils";
+import { LayoutClient } from "../layoutClient";
+
+interface LayoutProps {
+    children: React.ReactNode;
+    params: Promise<{
+        path: string[];
+    }>;
+}
+
+export default async function Layout({
+    children,
+    params,
+}: LayoutProps) {
+    const { path } = await params;
+    const browseParams = getBrowseParamsFromPathParam(path.join('/'));
+    if (!browseParams) {
+        notFound();
+    }
+
+    const languageModels = await getConfiguredLanguageModelsInfo();
+    return (
+        <LayoutClient
+            browseParams={browseParams}
+            isSearchAssistSupported={languageModels.length > 0}
+        >
+            {children}
+        </LayoutClient>
+    )
+}

packages/web/src/app/(app)/browse/hooks/useBrowseParams.ts

@@ -1,22 +1,13 @@
-import { notFound, usePathname } from "next/navigation";
-import { useMemo } from "react";
-import { getBrowseParamsFromPathParam } from "./utils";
+import { createContext, useContext } from "react";
+import type { BrowseProps } from "./utils";
 
-export const useBrowseParams = () => {
-    const pathname = usePathname();
-
-    return useMemo(() => {
-        const startIndex = pathname.indexOf('/browse/');
-        if (startIndex === -1) {
-            notFound();
-        }
+export const BrowseParamsContext = createContext<BrowseProps | null>(null);
 
-        const rawPath = pathname.substring(startIndex + '/browse/'.length);
-        const browseParams = getBrowseParamsFromPathParam(rawPath);
-        if (!browseParams) {
-            notFound();
-        }
+export const useBrowseParams = () => {
+    const browseParams = useContext(BrowseParamsContext);
+    if (!browseParams) {
+        throw new Error('useBrowseParams must be used within a BrowseParamsContext provider');
+    }
 
-        return browseParams;
-    }, [pathname]);
+    return browseParams;
 }

packages/web/src/app/(app)/browse/layout.tsx

@@ -5,73 +5,78 @@ import { BottomPanel } from "./components/bottomPanel";
 import { AnimatedResizableHandle } from "@/components/ui/animatedResizableHandle";
 import { BrowseStateProvider } from "./browseStateProvider";
 import { FileTreePanel } from "./components/fileTreePanel";
-import { useBrowseParams } from "./hooks/useBrowseParams";
+import { BrowseParamsContext } from "./hooks/useBrowseParams";
+import type { BrowseProps } from "./hooks/utils";
 import { FileSearchCommandDialog } from "./components/fileSearchCommandDialog";
 import { SearchBar } from "../components/searchBar";
 import escapeStringRegexp from "escape-string-regexp";
 import { Separator } from "@/components/ui/separator";
 
 interface LayoutProps {
     children: React.ReactNode;
+    browseParams: BrowseProps;
     isSearchAssistSupported: boolean;
 }
 
 export function LayoutClient({
     children,
+    browseParams,
     isSearchAssistSupported,
 }: LayoutProps) {
-    const { repoName, revisionName, pathType } = useBrowseParams();
+    const { repoName, revisionName, pathType } = browseParams;
     return (
-        <BrowseStateProvider>
-            <div className="flex flex-col h-full">
-                <div className='sticky top-0 left-0 right-0 z-10'>
-                    <div className="py-1.5 px-3">
-                        <SearchBar
-                            size="sm"
-                            defaults={{
-                                query: `repo:^${escapeStringRegexp(repoName)}$${revisionName ? ` rev:${revisionName}` : ''} `,
-                            }}
-                            className="w-full"
-                            isSearchAssistSupported={isSearchAssistSupported}
-                        />
+        <BrowseParamsContext.Provider value={browseParams}>
+            <BrowseStateProvider>
+                <div className="flex flex-col h-full">
+                    <div className='sticky top-0 left-0 right-0 z-10'>
+                        <div className="py-1.5 px-3">
+                            <SearchBar
+                                size="sm"
+                                defaults={{
+                                    query: `repo:^${escapeStringRegexp(repoName)}$${revisionName ? ` rev:${revisionName}` : ''} `,
+                                }}
+                                className="w-full"
+                                isSearchAssistSupported={isSearchAssistSupported}
+                            />
+                        </div>
+                        <Separator />
                     </div>
-                    <Separator />
-                </div>
-                <ResizablePanelGroup
-                    direction="horizontal"
-                >
-                    <FileTreePanel order={1} />
+                    <ResizablePanelGroup
+                        direction="horizontal"
+                    >
+                        <FileTreePanel order={1} />
 
-                    <AnimatedResizableHandle />
+                        <AnimatedResizableHandle />
 
-                    <ResizablePanel
-                        order={2}
-                        minSize={10}
-                        defaultSize={80}
-                        id="code-preview-panel-container"
-                    >
-                        <ResizablePanelGroup
-                            direction="vertical"
+                        <ResizablePanel
+                            order={2}
+                            minSize={10}
+                            defaultSize={80}
+                            id="code-preview-panel-container"
                         >
-                            <ResizablePanel
-                                order={1}
-                                id="code-preview-panel"
+                            <ResizablePanelGroup
+                                direction="vertical"
                             >
-                                {children}
-                            </ResizablePanel>
-                            {(pathType === 'blob' || pathType === 'tree') && (
-                                <>
-                                    <AnimatedResizableHandle />
-                                    <BottomPanel
-                                        order={2}
-                                    />
-                                </>
-                            )}
-                        </ResizablePanelGroup>
-                    </ResizablePanel>
-                </ResizablePanelGroup>
-            </div>
-            <FileSearchCommandDialog />
-        </BrowseStateProvider>
+                                <ResizablePanel
+                                    order={1}
+                                    id="code-preview-panel"
+                                >
+                                    {children}
+                                </ResizablePanel>
+                                {(pathType === 'blob' || pathType === 'tree') && (
+                                    <>
+                                        <AnimatedResizableHandle />
+                                        <BottomPanel
+                                            order={2}
+                                        />
+                                    </>
+                                )}
+                            </ResizablePanelGroup>
+                        </ResizablePanel>
+                    </ResizablePanelGroup>
+                </div>
+                <FileSearchCommandDialog />
+            </BrowseStateProvider>
+        </BrowseParamsContext.Provider>
     );
 }