From c2960a44b80f606d44b998ab8f9d259bfc005784 Mon Sep 17 00:00:00 2001
From: "Bryson G." <bryson.glembin@gmail.com>
Date: Sat, 14 Dec 2024 15:29:51 -0800
Subject: [PATCH] refactor(dashboard): SelectionLink for listed item page
 redirects

---
 .../wfSpec/[...props]/components/WfRuns.tsx   | 15 ++++-----
 .../[tenantId]/components/LinkWithTenant.tsx  |  9 ++++--
 .../[tenantId]/components/SelectionLink.tsx   | 32 +++++++++++++++++++
 .../components/tables/WfSpecTable.tsx         | 11 +++----
 4 files changed, 48 insertions(+), 19 deletions(-)
 create mode 100644 dashboard/src/app/[tenantId]/components/SelectionLink.tsx

diff --git a/dashboard/src/app/[tenantId]/(diagram)/wfSpec/[...props]/components/WfRuns.tsx b/dashboard/src/app/[tenantId]/(diagram)/wfSpec/[...props]/components/WfRuns.tsx
index 2099bd7b0..78dd5cb83 100644
--- a/dashboard/src/app/[tenantId]/(diagram)/wfSpec/[...props]/components/WfRuns.tsx
+++ b/dashboard/src/app/[tenantId]/(diagram)/wfSpec/[...props]/components/WfRuns.tsx
@@ -10,6 +10,8 @@ import { useParams, useSearchParams } from 'next/navigation'
 import { FC, Fragment, useMemo, useState } from 'react'
 import { PaginatedWfRunIdList, searchWfRun } from '../actions/searchWfRun'
 import { WfRunsHeader } from './WfRunsHeader'
+import { SelectionLink } from '@/app/[tenantId]/components/SelectionLink'
+import { parseExpression } from 'cron-parser'
 
 export const WfRuns: FC<WfSpec> = spec => {
   const searchParams = useSearchParams()
@@ -57,18 +59,13 @@ export const WfRuns: FC<WfSpec> = spec => {
           <RefreshCwIcon className="h-8 w-8 animate-spin text-blue-500" />
         </div>
       ) : (
-        <div className="flex min-h-[360px] flex-col gap-4">
+        <div className="flex min-h-[360px] flex-col">
           {data?.pages.map((page, i) => (
             <Fragment key={i}>
               {page.results.map(wfRunId => (
-                <div key={wfRunId.id}>
-                  <LinkWithTenant
-                    className="py-2 text-blue-500 hover:underline"
-                    href={`/wfRun/${concatWfRunIds(wfRunId)}`}
-                  >
-                    {wfRunId.id}
-                  </LinkWithTenant>
-                </div>
+                <SelectionLink key={wfRunId.id} href={`/wfRun/${concatWfRunIds(wfRunId)}`}>
+                  <p>{wfRunId.id}</p>
+                </SelectionLink>
               ))}
             </Fragment>
           ))}
diff --git a/dashboard/src/app/[tenantId]/components/LinkWithTenant.tsx b/dashboard/src/app/[tenantId]/components/LinkWithTenant.tsx
index f0b0ca947..3411b2d34 100644
--- a/dashboard/src/app/[tenantId]/components/LinkWithTenant.tsx
+++ b/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,
+      })}
     />
   )
 }
diff --git a/dashboard/src/app/[tenantId]/components/SelectionLink.tsx b/dashboard/src/app/[tenantId]/components/SelectionLink.tsx
new file mode 100644
index 000000000..811c761a6
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/dashboard/src/app/[tenantId]/components/tables/WfSpecTable.tsx b/dashboard/src/app/[tenantId]/components/tables/WfSpecTable.tsx
index 10201e16c..f417546dc 100644
--- a/dashboard/src/app/[tenantId]/components/tables/WfSpecTable.tsx
+++ b/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>
         ))}