From ce5715e45add6bbf22912708b5bdcf04be068f30 Mon Sep 17 00:00:00 2001
From: Denise Li <dli@squareup.com>
Date: Fri, 25 Oct 2024 13:43:29 +1100
Subject: [PATCH] feat: support cmd+click to open module + decl links in new
 tab (#3187)

Fixes https://github.com/TBD54566975/ftl/issues/3021
---
 frontend/console/e2e/helpers.ts               |  2 +-
 frontend/console/src/components/List.tsx      | 28 +++++++-----
 .../src/features/modules/ModulesPanel.tsx     |  8 +---
 .../src/features/modules/ModulesTree.tsx      | 45 +++++++------------
 .../src/features/modules/decls/DeclLink.tsx   |  9 ++--
 5 files changed, 40 insertions(+), 52 deletions(-)

diff --git a/frontend/console/e2e/helpers.ts b/frontend/console/e2e/helpers.ts
index 8c383d3cd5..d4de948707 100644
--- a/frontend/console/e2e/helpers.ts
+++ b/frontend/console/e2e/helpers.ts
@@ -16,6 +16,6 @@ export async function navigateToDecl(page: Page, moduleName: string, declName: s
   await navigateToModule(page, moduleName)
 
   // Navigate to the decl page
-  await page.locator(`div#decl-${declName}`).click()
+  await page.locator(`a#decl-${declName}`).click()
   await expect(page).toHaveURL(new RegExp(`/modules/${moduleName}/verb/${declName}`))
 }
diff --git a/frontend/console/src/components/List.tsx b/frontend/console/src/components/List.tsx
index 52246b0440..3003e98552 100644
--- a/frontend/console/src/components/List.tsx
+++ b/frontend/console/src/components/List.tsx
@@ -1,26 +1,30 @@
 import { ArrowRight01Icon } from 'hugeicons-react'
+import { Link } from 'react-router-dom'
 import { classNames } from '../utils'
 
 type ListProps<T> = {
   items: T[]
   renderItem: (item: T) => React.ReactNode
-  onClick?: (item: T) => void
+  href?: (item: T) => string
   className?: string
 }
 
-export const List = <T,>({ items, renderItem, onClick, className }: ListProps<T>) => {
+export const List = <T,>({ items, renderItem, href, className }: ListProps<T>) => {
+  const baseClasses = 'relative flex justify-between items-center gap-x-4 p-4'
   return (
     <ul className={classNames('divide-y divide-gray-100 dark:divide-gray-700 overflow-hidden', className)}>
-      {items.map((item, index) => (
-        <li
-          key={index}
-          className={`relative flex justify-between items-center gap-x-4 p-4 ${onClick ? 'cursor-pointer hover:bg-gray-100/50 dark:hover:bg-gray-700/50' : ''}`}
-          onClick={onClick ? () => onClick(item) : undefined}
-        >
-          {renderItem(item)}
-          {onClick && <ArrowRight01Icon className='size-5 text-gray-400' />}
-        </li>
-      ))}
+      {items.map((item, index) =>
+        href ? (
+          <Link key={index} className={`${baseClasses} cursor-pointer hover:bg-gray-100/50 dark:hover:bg-gray-700/50`} to={href(item)}>
+            {renderItem(item)}
+            <ArrowRight01Icon className='size-5 text-gray-400' />
+          </Link>
+        ) : (
+          <li key={index} className={baseClasses}>
+            {renderItem(item)}
+          </li>
+        ),
+      )}
     </ul>
   )
 }
diff --git a/frontend/console/src/features/modules/ModulesPanel.tsx b/frontend/console/src/features/modules/ModulesPanel.tsx
index 45f36354de..47455bf9cf 100644
--- a/frontend/console/src/features/modules/ModulesPanel.tsx
+++ b/frontend/console/src/features/modules/ModulesPanel.tsx
@@ -1,4 +1,3 @@
-import { useNavigate } from 'react-router-dom'
 import { useModules } from '../../api/modules/use-modules'
 import { AttributeBadge } from '../../components'
 import { List } from '../../components/List'
@@ -8,17 +7,14 @@ import { deploymentTextColor } from '../deployments/deployment.utils'
 
 export const ModulesPanel = () => {
   const modules = useModules()
-  const navigate = useNavigate()
 
-  const handleModuleClick = (module: Module) => {
-    navigate(`/modules/${module.name}`)
-  }
+  const moduleHref = (module: Module) => `/modules/${module.name}`
 
   return (
     <div className='p-2'>
       <List
         items={modules.data?.modules ?? []}
-        onClick={handleModuleClick}
+        href={moduleHref}
         renderItem={(module) => (
           <div className='flex w-full' data-module-row={module.name}>
             <div className='flex gap-x-4 items-center w-1/2'>
diff --git a/frontend/console/src/features/modules/ModulesTree.tsx b/frontend/console/src/features/modules/ModulesTree.tsx
index f470ad1ac9..192b50b6e8 100644
--- a/frontend/console/src/features/modules/ModulesTree.tsx
+++ b/frontend/console/src/features/modules/ModulesTree.tsx
@@ -1,6 +1,6 @@
 import { ArrowRight01Icon, ArrowShrink02Icon, CircleArrowRight02Icon, FileExportIcon, PackageIcon } from 'hugeicons-react'
 import { useEffect, useMemo, useRef, useState } from 'react'
-import { useNavigate, useParams, useSearchParams } from 'react-router-dom'
+import { Link, useParams, useSearchParams } from 'react-router-dom'
 import { Multiselect, sortMultiselectOpts } from '../../components/Multiselect'
 import type { MultiselectOpt } from '../../components/Multiselect'
 import { classNames } from '../../utils'
@@ -24,7 +24,6 @@ const ExportedIcon = () => (
 )
 
 const DeclNode = ({ decl, href, isSelected }: { decl: DeclInfo; href: string; isSelected: boolean }) => {
-  const navigate = useNavigate()
   const declRef = useRef<HTMLDivElement>(null)
 
   // Scroll to the selected decl on page load
@@ -41,22 +40,19 @@ const DeclNode = ({ decl, href, isSelected }: { decl: DeclInfo; href: string; is
   const Icon = useMemo(() => declIcon(decl.declType), [decl.declType])
   return (
     <li className='my-1'>
-      <div
-        ref={declRef}
-        id={`decl-${decl.value.name}`}
-        className={classNames(
-          isSelected ? 'bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 hover:dark:bg-gray-600' : 'hover:bg-gray-200 hover:dark:bg-gray-700',
-          'group flex items-center gap-x-2 pl-4 pr-2 text-sm font-light leading-6 w-full cursor-pointer scroll-mt-10',
-        )}
-        onClick={(e) => {
-          e.preventDefault()
-          navigate(href)
-        }}
-      >
-        <Icon aria-hidden='true' className='size-4 shrink-0 ml-3' />
-        {decl.value.name}
-        {declSumTypeIsExported(decl.value) ? <ExportedIcon /> : []}
-      </div>
+      <Link id={`decl-${decl.value.name}`} to={href}>
+        <div
+          ref={declRef}
+          className={classNames(
+            isSelected ? 'bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 hover:dark:bg-gray-600' : 'hover:bg-gray-200 hover:dark:bg-gray-700',
+            'group flex items-center gap-x-2 pl-4 pr-2 text-sm font-light leading-6 w-full cursor-pointer scroll-mt-10',
+          )}
+        >
+          <Icon aria-hidden='true' className='size-4 shrink-0 ml-3' />
+          {decl.value.name}
+          {declSumTypeIsExported(decl.value) ? <ExportedIcon /> : []}
+        </div>
+      </Link>
     </li>
   )
 }
@@ -68,7 +64,6 @@ const ModuleSection = ({
   selectedDeclTypes,
 }: { module: ModuleTreeItem; isExpanded: boolean; toggleExpansion: (m: string) => void; selectedDeclTypes: MultiselectOpt[] }) => {
   const { moduleName, declName } = useParams()
-  const navigate = useNavigate()
   const isSelected = useMemo(() => moduleName === module.name, [moduleName, module.name])
   const moduleRef = useRef<HTMLDivElement>(null)
 
@@ -98,15 +93,9 @@ const ModuleSection = ({
       >
         <PackageIcon aria-hidden='true' className='size-4 my-1 ml-3 shrink-0' />
         {module.name}
-        <CircleArrowRight02Icon
-          id={`module-${module.name}-view-icon`}
-          className='size-4 shrink-0 rounded-md hover:bg-gray-200 dark:hover:bg-gray-600'
-          onClick={(e) => {
-            e.preventDefault()
-            e.stopPropagation()
-            navigate(`/modules/${module.name}`)
-          }}
-        />
+        <Link to={`/modules/${module.name}`} onClick={(e) => e.stopPropagation()}>
+          <CircleArrowRight02Icon id={`module-${module.name}-view-icon`} className='size-4 shrink-0 rounded-md hover:bg-gray-200 dark:hover:bg-gray-600' />
+        </Link>
         {filteredDecls.length === 0 || (
           <ArrowRight01Icon aria-hidden='true' className={`ml-auto mr-2 h-4 w-4 shrink-0 ${isExpanded ? 'rotate-90 text-gray-500' : ''}`} />
         )}
diff --git a/frontend/console/src/features/modules/decls/DeclLink.tsx b/frontend/console/src/features/modules/decls/DeclLink.tsx
index 0037897f7f..e9a3833c7b 100644
--- a/frontend/console/src/features/modules/decls/DeclLink.tsx
+++ b/frontend/console/src/features/modules/decls/DeclLink.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { Link } from 'react-router-dom'
 import { useStreamModules } from '../../../api/modules/use-stream-modules'
 import { classNames } from '../../../utils'
 import { getTreeWidthFromLS } from '../module.utils'
@@ -60,14 +60,13 @@ export const DeclLink = ({
   if (!moduleName || !declName) {
     return
   }
-  const navigate = useNavigate()
   const modules = useStreamModules()
   const decl = useMemo(
     () => (moduleName && !!modules?.data ? declSchemaFromModules(moduleName, declName, modules?.data) : undefined),
     [moduleName, declName, modules?.data],
   )
   const [isHovering, setIsHovering] = useState(false)
-  const linkRef = useRef<HTMLSpanElement>(null)
+  const linkRef = useRef<HTMLAnchorElement>(null)
 
   const str = moduleName && slim !== true ? `${moduleName}.${declName}` : declName
 
@@ -81,9 +80,9 @@ export const DeclLink = ({
       onMouseEnter={() => setIsHovering(true)}
       onMouseLeave={() => setIsHovering(false)}
     >
-      <span ref={linkRef} className={textColors} onClick={() => navigate(`/modules/${moduleName}/${decl.declType}/${declName}`)}>
+      <Link ref={linkRef} className={textColors} to={`/modules/${moduleName}/${decl.declType}/${declName}`}>
         {str}
-      </span>
+      </Link>
       {!slim && (
         <SnippetContainer
           decl={decl}