refactor(dashboard): ExternalLinkButton

dashboard/src/app/[tenantId]/(diagram)/components/ExternalLinkButton.tsx

@@ -0,0 +1,19 @@
+import { Button } from '@/components/ui/button'
+import LinkWithTenant from '@/app/[tenantId]/components/LinkWithTenant'
+import { ExternalLinkIcon } from 'lucide-react'
+import { ComponentProps } from 'react'
+import { cn } from '@/components/utils'
+
+type ExternalLinkButtonProps = {
+  href: string
+  label: string
+  target?: string
+} & ComponentProps<typeof Button>
+
+export const ExternalLinkButton = ({ href, label, target, className, ...props }: ExternalLinkButtonProps) => (
+  <Button variant="link" className={cn('h-5 w-fit p-0 text-xs', className)} {...props}>
+    <LinkWithTenant href={href} target={target} className="flex gap-1">
+      {label} <ExternalLinkIcon className="h-4 w-4" />
+    </LinkWithTenant>
+  </Button>
+)

dashboard/src/app/[tenantId]/(diagram)/components/NodeRunsList.tsx

@@ -2,7 +2,7 @@ import { NodeRun, TaskNode, UserTaskNode } from 'littlehorse-client/proto'
 import { EyeIcon } from 'lucide-react'
 import { FC, useCallback } from 'react'
 import { useModal } from '../hooks/useModal'
-import { NodeViewButton } from './NodeViewButton'
+import { Button } from '@/components/ui/button'
 
 type Prop = {
   nodeRuns: [NodeRun]
@@ -19,5 +19,16 @@ export const NodeRunsList: FC<Prop> = ({ nodeRuns, taskNode, userTaskNode, nodeR
 
   if (!nodeRuns?.length) return
 
-  return <NodeViewButton text="View NodeRuns" callback={showNodeRuns} />
+  return (
+    <div className="mt-2 flex justify-center">
+      <Button
+        variant="ghost"
+        className="flex items-center gap-1 p-1 text-blue-500 hover:bg-gray-200"
+        onClick={showNodeRuns}
+      >
+        <EyeIcon className="h-4 w-4" />
+        View NodeRuns
+      </Button>
+    </div>
+  )
 }

dashboard/src/app/[tenantId]/(diagram)/components/NodeTypes/UserTask/UserTask.tsx

@@ -7,8 +7,9 @@ import { NodeRunsList } from '../../NodeRunsList'
 import { Fade } from '../Fade'
 import { NodeProps } from '../index'
 import { NodeDetails } from '../NodeDetails'
-import { NodeViewButton } from '../../NodeViewButton'
 import { useParams, useRouter } from 'next/navigation'
+import { Button } from '@/components/ui/button'
+import { ExternalLinkButton } from '../../ExternalLinkButton'
 
 const Node: FC<NodeProps> = ({ data, selected }) => {
   const router = useRouter()
@@ -20,27 +21,16 @@ const Node: FC<NodeProps> = ({ data, selected }) => {
   return (
     <>
       <NodeDetails>
-        <div className="flex flex-col items-center justify-center">
-          <div className="flex items-center gap-1 text-nowrap">
-            <h3 className="font-bold">UserTask</h3>
-            <LinkWithTenant
-              className="flex items-center justify-center gap-1 text-blue-500 hover:underline"
-              target="_blank"
-              href={`/userTaskDef/${userTask.userTaskDefName}`}
-            >
-              {userTask.userTaskDefName} <ExternalLinkIcon className="h-4 w-4" />
-            </LinkWithTenant>
-          </div>
+        <div className="flex flex-col">
+          <h3 className="font-bold">UserTask</h3>
+          <ExternalLinkButton href={`/userTaskDef/${userTask.userTaskDefName}`} label={userTask.userTaskDefName} />
           {nodeRun && (
-            <NodeViewButton
-              text="View Audit Log"
-              callback={() => {
-                router.push(
-                  `/${tenantId}/userTaskDef/audit/${nodeRun.id?.wfRunId?.id}/${nodeRun.userTask?.userTaskRunId?.userTaskGuid}`
-                )
-              }}
+            <ExternalLinkButton
+              href={`/userTaskDef/audit/${nodeRun.id?.wfRunId?.id}/${nodeRun.userTask?.userTaskRunId?.userTaskGuid}`}
+              label="Audit Log"
             />
           )}
+
           {nodeRun ? (
             <NodeRunsList nodeRuns={nodeRunsList} userTaskNode={userTask} nodeRun={nodeRun} />
           ) : (

dashboard/src/components/ui/button.tsx

@@ -14,7 +14,7 @@ const buttonVariants = cva(
         outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
         secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 hover:underline text-blue-500',
+        link: 'text-primary underline-offset-4 hover:underline text-blue-500 h-0',
       },
       size: {
         default: 'h-10 px-4 py-2',