feat(dashboard): use SelectionLink across all search results

dashboard/src/app/(authenticated)/[tenantId]/components/VersionTag.tsx

@@ -0,0 +1,9 @@
+import { TagIcon } from "lucide-react";
+
+export default function VersionTag({ label }: { label: string }) {
+    return (
+        <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" />{label}
+        </div>
+    )
+}

dashboard/src/app/(authenticated)/[tenantId]/components/tables/ExternalEventDefTable.tsx

@@ -2,6 +2,7 @@ import { ExternalEventDefId } from 'littlehorse-client/proto'
 import LinkWithTenant from '../LinkWithTenant'
 import { FC, Fragment } from 'react'
 import { SearchResultProps } from '.'
+import { SelectionLink } from '../SelectionLink'
 
 export const ExternalEventDefTable: FC<SearchResultProps> = ({ pages = [] }) => {
   if (pages.length === 0) {
@@ -13,11 +14,9 @@ export const ExternalEventDefTable: FC<SearchResultProps> = ({ pages = [] }) =>
       {pages.map((page, i) => (
         <Fragment key={i}>
           {page.results.map(({ name }: ExternalEventDefId) => (
-            <div key={name} className="my-2 flex gap-2">
-              <LinkWithTenant className="underline hover:no-underline" href={`/externalEventDef/${name}`}>
-                {name}
-              </LinkWithTenant>
-            </div>
+            <SelectionLink key={name} href={`/externalEventDef/${name}`}>
+              <p className="group">{name}</p>
+            </SelectionLink>
           ))}
         </Fragment>
       ))}

dashboard/src/app/(authenticated)/[tenantId]/components/tables/TaskDefTable.tsx

@@ -2,7 +2,7 @@ import { TaskDefId } from 'littlehorse-client/proto'
 import { FC, Fragment } from 'react'
 import { SearchResultProps } from '.'
 import { useParams } from 'next/navigation'
-import LinkWithTenant from '../LinkWithTenant'
+import { SelectionLink } from '../SelectionLink'
 
 export const TaskDefTable: FC<SearchResultProps> = ({ pages = [] }) => {
   const { tenantId } = useParams()
@@ -16,11 +16,9 @@ export const TaskDefTable: FC<SearchResultProps> = ({ pages = [] }) => {
       {pages.map((page, i) => (
         <Fragment key={i}>
           {page.results.map(({ name }: TaskDefId) => (
-            <div key={name} className="my-2 flex gap-2">
-              <LinkWithTenant className="underline hover:no-underline" href={`/taskDef/${name}`}>
-                {name}
-              </LinkWithTenant>
-            </div>
+            <SelectionLink key={name} href={`/taskDef/${name}`}>
+              <p className="group">{name}</p>
+            </SelectionLink>
           ))}
         </Fragment>
       ))}

dashboard/src/app/(authenticated)/[tenantId]/components/tables/UserTaskDefTable.tsx

@@ -1,9 +1,9 @@
 import { Separator } from '@/components/ui/separator'
 import { UserTaskDefId } from 'littlehorse-client/proto'
-import { TagIcon } from 'lucide-react'
 import { FC, Fragment } from 'react'
 import { SearchResultProps } from '.'
-import LinkWithTenant from '../LinkWithTenant'
+import { SelectionLink } from '../SelectionLink'
+import VersionTag from '../VersionTag'
 
 export const UserTaskDefTable: FC<SearchResultProps> = ({ pages = [] }) => {
   if (pages.length === 0) {
@@ -15,16 +15,10 @@ export const UserTaskDefTable: FC<SearchResultProps> = ({ pages = [] }) => {
       {pages.map((page, i) => (
         <Fragment key={i}>
           {page.results.map(({ name, version }: UserTaskDefId) => (
-            <Fragment key={`${name}.${version}`}>
-              <div className="my-2 flex gap-2">
-                <LinkWithTenant className="underline hover:no-underline" href={`/userTaskDef/${name}/${version}`}>
-                  {name}
-                </LinkWithTenant>
-                <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" />v{version}
-                </div>
-              </div>
-            </Fragment>
+            <SelectionLink key={`${name}.${version}`} href={`/userTaskDef/${name}/${version}`}>
+              <p className="group">{name}</p>
+              <VersionTag label={`Latest: v${version}`} />
+            </SelectionLink>
           ))}
         </Fragment>
       ))}

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

@@ -1,12 +1,11 @@
 import { getLatestWfSpecs } from '@/app/actions/getLatestWfSpec'
-import { Separator } from '@/components/ui/separator'
 import { WfSpecData } from '@/types'
-import { TagIcon } from 'lucide-react'
 import { useParams, useRouter } from 'next/navigation'
-import { FC, Fragment, useEffect, useState } from 'react'
+import { FC, useEffect, useState } from 'react'
 import { SearchResultProps } from '.'
 import { SelectionLink } from '../SelectionLink'
 
+import VersionTag from '../VersionTag'
 export const WfSpecTable: FC<SearchResultProps> = ({ pages = [] }) => {
   const router = useRouter()
   const tenantId = useParams().tenantId as string
@@ -25,16 +24,10 @@ export const WfSpecTable: FC<SearchResultProps> = ({ pages = [] }) => {
     <div className="py-4">
       <div className="flex max-h-[600px] flex-col overflow-auto">
         {wfSpecs.map(wfSpec => (
-          <Fragment key={wfSpec.name}>
-            <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>
-            </SelectionLink>
-            <Separator />
-          </Fragment>
+          <SelectionLink key={wfSpec.name} href={`/wfSpec/${wfSpec.name}/${wfSpec.latestVersion}`}>
+            <p className="group">{wfSpec.name}</p>
+            <VersionTag label={`Latest: v${wfSpec.latestVersion}`} />
+          </SelectionLink>
         ))}
       </div>
     </div>

dashboard/src/app/(authenticated)/[tenantId]/components/tables/WorkflowEventDefTable.tsx

@@ -3,6 +3,7 @@ import { FC, Fragment } from 'react'
 import { SearchResultProps } from '.'
 import { useParams } from 'next/navigation'
 import LinkWithTenant from '../LinkWithTenant'
+import { SelectionLink } from '../SelectionLink'
 
 export const WorkflowEventDefTable: FC<SearchResultProps> = ({ pages = [] }) => {
   const { tenantId } = useParams()
@@ -16,11 +17,9 @@ export const WorkflowEventDefTable: FC<SearchResultProps> = ({ pages = [] }) =>
       {pages.map((page, i) => (
         <Fragment key={i}>
           {page.results.map(({ name }: WorkflowEventDefId) => (
-            <div key={name} className="my-2 flex gap-2">
-              <LinkWithTenant className="underline hover:no-underline" href={`/workflowEventDef/${name}`}>
-                {name}
-              </LinkWithTenant>
-            </div>
+            <SelectionLink key={name} href={`/workflowEventDef/${name}`}>
+              <p className="group">{name}</p>
+            </SelectionLink>
           ))}
         </Fragment>
       ))}