refactor(dashboard): SelectionLink for listed item page redirects

dashboard/src/app/[tenantId]/components/LinkWithTenant.tsx

@@ -4,13 +4,16 @@ import NextLink from 'next/link'
 import { useParams } from 'next/navigation'
 import { ComponentProps } from 'react'
 
-const LinkWithTenant = ({ linkStyle, ...props }: ComponentProps<typeof NextLink> & { linkStyle?: boolean }) => {
+const LinkWithTenant = ({ linkStyle, href, ...props }: ComponentProps<typeof NextLink> & { linkStyle?: boolean }) => {
   const { tenantId } = useParams()
+
   return (
     <NextLink
       {...props}
-      href={`/${tenantId}${props.href}`}
-      className={cn(props.className, { 'text-blue-500 underline': linkStyle })}
+      href={`/${tenantId}${href}`}
+      className={cn(props.className, {
+        '[&>*:first-child]:text-blue-500 [&>*:first-child]:hover:underline': linkStyle,
+      })}
     />
   )
 }

dashboard/src/app/[tenantId]/components/SelectionLink.tsx

@@ -0,0 +1,32 @@
+import { WfSpecData } from '@/types'
+import LinkWithTenant from './LinkWithTenant'
+
+import { Fragment } from 'react'
+import { TagIcon } from 'lucide-react'
+import { Separator } from '@/components/ui/separator'
+
+export const SelectionLink = ({
+  href,
+  key,
+  children,
+  ...props
+}: { href: string | undefined } & Omit<React.ComponentProps<typeof LinkWithTenant>, 'href'>) => {
+  return href !== undefined ? (
+    <Fragment key={key}>
+      <LinkWithTenant
+        className="flex items-center gap-3 rounded-md px-2 py-2 hover:bg-gray-100"
+        href={href}
+        linkStyle={href !== undefined}
+        {...props}
+      >
+        {children}
+      </LinkWithTenant>
+      <Separator />
+    </Fragment>
+  ) : (
+    <Fragment key={key}>
+      <div className="flex items-center gap-3 rounded-md px-2 py-2 hover:bg-gray-100">{children}</div>
+      <Separator />
+    </Fragment>
+  )
+}

dashboard/src/app/[tenantId]/components/tables/WfSpecTable.tsx

@@ -5,7 +5,7 @@ import { TagIcon } from 'lucide-react'
 import { useParams, useRouter } from 'next/navigation'
 import { FC, Fragment, useEffect, useState } from 'react'
 import { SearchResultProps } from '.'
-import LinkWithTenant from '../LinkWithTenant'
+import { SelectionLink } from '../SelectionLink'
 
 export const WfSpecTable: FC<SearchResultProps> = ({ pages = [] }) => {
   const router = useRouter()
@@ -26,16 +26,13 @@ export const WfSpecTable: FC<SearchResultProps> = ({ pages = [] }) => {
       <div className="flex max-h-[600px] flex-col overflow-auto">
         {wfSpecs.map(wfSpec => (
           <Fragment key={wfSpec.name}>
-            <LinkWithTenant
-              className="flex items-center gap-3 rounded-md px-2 py-2 hover:bg-gray-100"
-              href={`/wfSpec/${wfSpec.name}/${wfSpec.latestVersion}`}
-            >
-              <p>{wfSpec.name}</p>
+            <SelectionLink href={`/wfSpec/${wfSpec.name}/${wfSpec.latestVersion}`}>
+              <p className="group">{wfSpec.name}</p>
               <div className="flex items-center gap-2 rounded bg-blue-200 px-2 font-mono text-sm text-gray-500">
                 <TagIcon className="h-4 w-4 fill-none stroke-gray-500 stroke-1" />
                 Latest: v{wfSpec.latestVersion}
               </div>
-            </LinkWithTenant>
+            </SelectionLink>
             <Separator />
           </Fragment>
         ))}