Make workflowId the link in relationships, add interactive class to Link

temporalio · Jan 16, 2025 · f60534b · f60534b
1 parent 0b17ef2
commit f60534b
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 20 deletions.
diff --git a/src/lib/components/workflow/relationships/workflow-family-node-description-details.svelte b/src/lib/components/workflow/relationships/workflow-family-node-description-details.svelte
@@ -1,14 +1,18 @@
 <script lang="ts">
   import WorkflowStatus from '$lib/components/workflow-status.svelte';
   import Icon from '$lib/holocene/icon/icon.svelte';
+  import Link from '$lib/holocene/link.svelte';
   import { translate } from '$lib/i18n/translate';
   import { relativeTime, timeFormat } from '$lib/stores/time-format';
   import type { WorkflowExecution } from '$lib/types/workflows';
   import { formatDate } from '$lib/utilities/format-date';
   import { formatDistanceAbbreviated } from '$lib/utilities/format-time';
+  import { routeForEventHistory } from '$lib/utilities/route-for';
 
   export let workflow: WorkflowExecution;
+  export let namespace: string;
   export let isRootWorkflow = false;
+  export let isActive = false;
 
   $: elapsedTime = formatDistanceAbbreviated({
     start: workflow?.startTime,
@@ -21,24 +25,33 @@
   class="flex w-full flex-col gap-2 p-1 text-left text-sm lg:flex-row lg:items-center"
 >
   <div class="flex items-center gap-2 lg:basis-96">
-    <div class="w-32 leading-3">
+    <div class="w-32 leading-4">
       <WorkflowStatus status={workflow.status} />
     </div>
-    <div class="w-full leading-3">
+    <div class="w-full leading-4">
       {#if isRootWorkflow}
         <p class="font-mono text-xs">{translate('common.type')}</p>
       {/if}
       <p>{workflow.name}</p>
     </div>
   </div>
-  <div class="leading-3 lg:basis-[800px]">
+  <div class="leading-4 lg:basis-[800px]">
     {#if isRootWorkflow}
       <p class="font-mono text-xs">{translate('common.id')}</p>
     {/if}
-    <p>{workflow.id}</p>
+    <Link
+      href={routeForEventHistory({
+        namespace,
+        workflow: workflow.id,
+        run: workflow.runId,
+      })}
+      interactive={isActive}
+    >
+      {workflow.id}
+    </Link>
   </div>
   <div class="hidden items-center gap-4 lg:flex lg:basis-5/12">
-    <div class="leading-3">
+    <div class="leading-4">
       {#if isRootWorkflow}
         <p class="font-mono text-xs">
           {translate('common.start')}
@@ -50,7 +63,7 @@
         })}
       </p>
     </div>
-    <div class="leading-3">
+    <div class="leading-4">
       {#if isRootWorkflow}
         <p class="min-w-12 font-mono text-xs">{translate('common.end')}</p>
       {/if}
@@ -60,7 +73,7 @@
         }) || '-'}
       </p>
     </div>
-    <div class="leading-3">
+    <div class="leading-4">
       {#if isRootWorkflow}
         <Icon name="clock" class="h-4 w-3" />
       {/if}

diff --git a/src/lib/components/workflow/relationships/workflow-family-node-description.svelte b/src/lib/components/workflow/relationships/workflow-family-node-description.svelte
@@ -2,10 +2,8 @@
   import { page } from '$app/stores';
 
   import Icon from '$lib/holocene/icon/icon.svelte';
-  import Link from '$lib/holocene/link.svelte';
   import type { RootNode } from '$lib/services/workflow-service';
   import type { WorkflowExecution } from '$lib/types/workflows';
-  import { routeForEventHistory } from '$lib/utilities/route-for';
 
   import WorkflowFamilyNodeDescriptionDetails from './workflow-family-node-description-details.svelte';
   import WorkflowFamilyNodeDescriptionTree from './workflow-family-node-description-tree.svelte';
@@ -43,20 +41,11 @@
     <div class="flex w-full items-center gap-3 pr-2 text-sm">
       <WorkflowFamilyNodeDescriptionDetails
         workflow={root.workflow}
+        {namespace}
         {isRootWorkflow}
+        {isActive}
       />
       <div class="flex basis-16 items-center justify-end gap-1">
-        {#if !isCurrent}
-          <Link
-            href={routeForEventHistory({
-              namespace,
-              workflow: root.workflow.id,
-              run: root.workflow.runId,
-            })}
-          >
-            <Icon name="external-link" class={isActive && 'text-white'} />
-          </Link>
-        {/if}
         {#if root?.children?.length}
           <div class="flex items-center gap-2 text-sm">
             <Icon name="relationship" class="-mr-1 w-3 flex-shrink-0" />

diff --git a/src/lib/holocene/link.svelte b/src/lib/holocene/link.svelte
@@ -12,6 +12,7 @@
   type $$Props = HTMLAnchorAttributes & {
     href: string;
     active?: boolean;
+    interactive?: boolean;
     newTab?: boolean;
     class?: string;
     icon?: IconName;
@@ -24,6 +25,7 @@
   export { className as class };
   export let href: string;
   export let active = false;
+  export let interactive = false;
   export let newTab = false;
   export let icon: IconName = null;
   export let text: string = '';
@@ -43,6 +45,7 @@
   rel={newTab ? 'noreferrer' : null}
   class={merge('link', icon ? 'inline-flex' : 'inline', className)}
   class:active
+  class:interactive
   class:light
   on:click|stopPropagation={onLinkClick}
   tabindex={href ? null : 0}
@@ -65,6 +68,10 @@
       @apply text-brand;
     }
 
+    &.interactive {
+      @apply text-white hover:text-indigo-200 focus-visible:text-indigo-200;
+    }
+
     &.light {
       @apply text-off-white hover:text-indigo-400;
     }