feat: allow symbol navigation buttons to open in new tab

- Add createBrowsePath to useBrowseNavigation hook to generate URLs
- Update LoadingButton component to support asChild prop for anchor elements
- Convert symbol hover popup buttons to use anchor elements with href
- Users can now cmd+click (ctrl+click) to open definitions/references in new tab

Co-authored-by: Michael Sukkarieh <msukkari@users.noreply.github.com>

Author: cursoragent

packages/web/src/app/[domain]/browse/hooks/useBrowseNavigation.ts

@@ -27,7 +27,26 @@ export const useBrowseNavigation = () => {
         router.push(browsePath);
     }, [router]);
 
+    const createBrowsePath = useCallback(({
+        repoName,
+        revisionName = 'HEAD',
+        path,
+        pathType,
+        highlightRange,
+        setBrowseState,
+    }: GetBrowsePathProps) => {
+        return getBrowsePath({
+            repoName,
+            revisionName,
+            path,
+            pathType,
+            highlightRange,
+            setBrowseState,
+        });
+    }, []);
+
     return {
         navigateToPath,
+        createBrowsePath,
     };
 };

packages/web/src/components/ui/loading-button.tsx

@@ -2,28 +2,43 @@
 
 // @note: this is not a original Shadcn component.
 
-import { Button, ButtonProps } from "@/components/ui/button";
+import { buttonVariants } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { Slot } from "@radix-ui/react-slot";
+import { VariantProps } from "class-variance-authority";
 import { Loader2 } from "lucide-react";
 import React from "react";
 
-export interface LoadingButtonProps extends ButtonProps {
+export interface LoadingButtonProps
+    extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+        VariantProps<typeof buttonVariants> {
     loading?: boolean;
+    asChild?: boolean;
 }
 
-const LoadingButton = React.forwardRef<HTMLButtonElement, LoadingButtonProps>(({ children, loading, ...props }, ref) => {
-    return (
-        <Button
-            {...props}
-            ref={ref}
-            disabled={loading || props.disabled}
-        >
-            {loading && (
-                <Loader2 className="w-4 h-4 mr-2 animate-spin" />
-            )}
-            {children}
-        </Button>
-    )
-});
+const LoadingButton = React.forwardRef<HTMLButtonElement, LoadingButtonProps>(
+    ({ children, loading, className, variant, size, asChild = false, disabled, ...props }, ref) => {
+        const Comp = asChild ? Slot : "button";
+        const isDisabled = loading || disabled;
+
+        return (
+            <Comp
+                className={cn(buttonVariants({ variant, size, className }))}
+                ref={ref}
+                disabled={isDisabled}
+                aria-disabled={isDisabled}
+                {...props}
+            >
+                <>
+                    {loading && (
+                        <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                    )}
+                    {children}
+                </>
+            </Comp>
+        );
+    }
+);
 
 LoadingButton.displayName = "LoadingButton";
 

packages/web/src/ee/features/codeNav/components/symbolHoverPopup/index.tsx

@@ -7,10 +7,11 @@ import { Separator } from "@/components/ui/separator";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { createAuditAction } from "@/ee/features/audit/actions";
 import useCaptureEvent from "@/hooks/useCaptureEvent";
+import { cn } from "@/lib/utils";
 import { computePosition, flip, offset, shift, VirtualElement } from "@floating-ui/react";
 import { ReactCodeMirrorRef } from "@uiw/react-codemirror";
 import { Loader2 } from "lucide-react";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState, MouseEvent } from "react";
 import { createPortal } from "react-dom";
 import { useHotkeys } from "react-hotkeys-hook";
 import { SymbolDefinitionPreview } from "./symbolDefinitionPreview";
@@ -36,7 +37,7 @@ export const SymbolHoverPopup: React.FC<SymbolHoverPopupProps> = ({
     const ref = useRef<HTMLDivElement>(null);
     const [isSticky, setIsSticky] = useState(false);
     const { toast } = useToast();
-    const { navigateToPath } = useBrowseNavigation();
+    const { navigateToPath, createBrowsePath } = useBrowseNavigation();
     const captureEvent = useCaptureEvent();
 
     const symbolInfo = useHoveredOverSymbolInfo({
@@ -106,6 +107,72 @@ export const SymbolHoverPopup: React.FC<SymbolHoverPopupProps> = ({
         return symbolInfo.symbolDefinitions[0];
     }, [fileName, repoName, symbolInfo?.symbolDefinitions]);
 
+    const gotoDefinitionHref = useMemo(() => {
+        if (
+            !symbolInfo ||
+            !symbolInfo.symbolDefinitions ||
+            !previewedSymbolDefinition
+        ) {
+            return undefined;
+        }
+
+        const {
+            fileName,
+            repoName,
+            revisionName,
+            language,
+            range: highlightRange,
+        } = previewedSymbolDefinition;
+
+        return createBrowsePath({
+            repoName,
+            revisionName,
+            path: fileName,
+            pathType: 'blob',
+            highlightRange,
+            ...(symbolInfo.symbolDefinitions.length > 1 ? {
+                setBrowseState: {
+                    selectedSymbolInfo: {
+                        symbolName: symbolInfo.symbolName,
+                        repoName,
+                        revisionName,
+                        language,
+                    },
+                    activeExploreMenuTab: "definitions",
+                    isBottomPanelCollapsed: false,
+                }
+            } : {}),
+        });
+    }, [createBrowsePath, previewedSymbolDefinition, symbolInfo]);
+
+    const onGotoDefinitionClick = useCallback((e: MouseEvent<HTMLAnchorElement>) => {
+        if (
+            !symbolInfo ||
+            !symbolInfo.symbolDefinitions ||
+            !previewedSymbolDefinition
+        ) {
+            e.preventDefault();
+            return;
+        }
+
+        captureEvent('wa_goto_definition_pressed', {
+            source,
+        });
+
+        createAuditAction({
+            action: "user.performed_goto_definition",
+            metadata: {
+                message: symbolInfo.symbolName,
+                source: 'sourcebot-web-client',
+            },
+        });
+    }, [
+        captureEvent,
+        previewedSymbolDefinition,
+        source,
+        symbolInfo
+    ]);
+
     const onGotoDefinition = useCallback(() => {
         if (
             !symbolInfo ||
@@ -136,13 +203,11 @@ export const SymbolHoverPopup: React.FC<SymbolHoverPopupProps> = ({
         } = previewedSymbolDefinition;
 
         navigateToPath({
-            // Always navigate to the preview symbol definition.
             repoName,
             revisionName,
             path: fileName,
             pathType: 'blob',
             highlightRange,
-            // If there are multiple definitions, we should open the Explore panel with the definitions.
             ...(symbolInfo.symbolDefinitions.length > 1 ? {
                 setBrowseState: {
                     selectedSymbolInfo: {
@@ -164,6 +229,49 @@ export const SymbolHoverPopup: React.FC<SymbolHoverPopupProps> = ({
         symbolInfo
     ]);
 
+    const findReferencesHref = useMemo(() => {
+        if (!symbolInfo) {
+            return undefined;
+        }
+
+        return createBrowsePath({
+            repoName,
+            revisionName,
+            path: fileName,
+            pathType: 'blob',
+            highlightRange: symbolInfo.range,
+            setBrowseState: {
+                selectedSymbolInfo: {
+                    symbolName: symbolInfo.symbolName,
+                    repoName,
+                    revisionName,
+                    language,
+                },
+                activeExploreMenuTab: "references",
+                isBottomPanelCollapsed: false,
+            }
+        });
+    }, [createBrowsePath, fileName, language, repoName, revisionName, symbolInfo]);
+
+    const onFindReferencesClick = useCallback((e: MouseEvent<HTMLAnchorElement>) => {
+        if (!symbolInfo) {
+            e.preventDefault();
+            return;
+        }
+
+        captureEvent('wa_find_references_pressed', {
+            source,
+        });
+
+        createAuditAction({
+            action: "user.performed_find_references",
+            metadata: {
+                message: symbolInfo.symbolName,
+                source: 'sourcebot-web-client',
+            },
+        });
+    }, [captureEvent, source, symbolInfo]);
+
     const onFindReferences = useCallback(() => {
         if (!symbolInfo) {
             return;
@@ -276,13 +384,20 @@ export const SymbolHoverPopup: React.FC<SymbolHoverPopupProps> = ({
                             disabled={!previewedSymbolDefinition}
                             variant="outline"
                             size="sm"
-                            onClick={onGotoDefinition}
+                            asChild={!symbolInfo.isSymbolDefinitionsLoading && !!previewedSymbolDefinition}
                         >
-                            {
-                                !symbolInfo.isSymbolDefinitionsLoading && !previewedSymbolDefinition ?
-                                    "No definition found" :
-                                    `Go to ${symbolInfo.symbolDefinitions && symbolInfo.symbolDefinitions.length > 1 ? "definitions" : "definition"}`
-                            }
+                            {!symbolInfo.isSymbolDefinitionsLoading && previewedSymbolDefinition ? (
+                                <a
+                                    href={gotoDefinitionHref}
+                                    onClick={onGotoDefinitionClick}
+                                >
+                                    {`Go to ${symbolInfo.symbolDefinitions && symbolInfo.symbolDefinitions.length > 1 ? "definitions" : "definition"}`}
+                                </a>
+                            ) : (
+                                <span>
+                                    {symbolInfo.isSymbolDefinitionsLoading ? "Loading..." : "No definition found"}
+                                </span>
+                            )}
                         </LoadingButton>
                     </TooltipTrigger>
                     <TooltipContent
@@ -299,9 +414,15 @@ export const SymbolHoverPopup: React.FC<SymbolHoverPopupProps> = ({
                         <Button
                             variant="outline"
                             size="sm"
-                            onClick={onFindReferences}
+                            asChild
                         >
-                            Find references
+                            <a
+                                href={findReferencesHref}
+                                onClick={onFindReferencesClick}
+                                className={cn(!symbolInfo && "pointer-events-none opacity-50")}
+                            >
+                                Find references
+                            </a>
                         </Button>
                     </TooltipTrigger>
                     <TooltipContent