Add bi-directional links to Timeline info (#2561)

* Add bi-di link to timeline info

* Switch to text-secondary instead of text-subtle

* Consistent styles for link

* Fix pending activities empty state check

Author: Alex-Tideman

Diff for: server/go.mod

@@ -10,7 +10,7 @@ require (
 	github.com/labstack/echo/v4 v4.9.1
 	github.com/stretchr/testify v1.9.0
 	github.com/urfave/cli/v2 v2.3.0
-	go.temporal.io/api v1.43.0
+	go.temporal.io/api v1.44.1
 	golang.org/x/net v0.33.0
 	golang.org/x/oauth2 v0.22.0
 	google.golang.org/grpc v1.66.0

Diff for: server/go.sum

@@ -51,8 +51,8 @@ github.com/valyala/bytebufferpool v1.0.0 h1:GqA5TC/0021Y/b9FG4Oi9Mr3q7XYx6Kllzaw
 github.com/valyala/bytebufferpool v1.0.0/go.mod h1:6bBcMArwyJ5K/AmCkWv1jt77kVWyCJ6HpOuEn7z0Csc=
 github.com/valyala/fasttemplate v1.2.1 h1:TVEnxayobAdVkhQfrfes2IzOB6o+z4roRkPF52WA1u4=
 github.com/valyala/fasttemplate v1.2.1/go.mod h1:KHLXt3tVN2HBp8eijSv/kGJopbvo7S+qRAEEKiv+SiQ=
-go.temporal.io/api v1.43.0 h1:lBhq+u5qFJqGMXwWsmg/i8qn1UA/3LCwVc88l2xUMHg=
-go.temporal.io/api v1.43.0/go.mod h1:1WwYUMo6lao8yl0371xWUm13paHExN5ATYT/B7QtFis=
+go.temporal.io/api v1.44.1 h1:sb5Hq08AB0WtYvfLJMiWmHzxjqs2b+6Jmzg4c8IOeng=
+go.temporal.io/api v1.44.1/go.mod h1:1WwYUMo6lao8yl0371xWUm13paHExN5ATYT/B7QtFis=
 golang.org/x/crypto v0.31.0 h1:ihbySMvVjLAeSH1IbfcRTkD/iNscyz8rGzjF/E5hV6U=
 golang.org/x/crypto v0.31.0/go.mod h1:kDsLvtWBEx7MV9tJOj9bnXsPbxwJQ6csT/x4KIN4Ssk=
 golang.org/x/net v0.33.0 h1:74SYHlV8BIgHIFC/LrYkOGIwL19eTYXQ5wc6TBuO36I=

Diff for: src/lib/components/lines-and-dots/svg/group-details-row.svelte

@@ -7,12 +7,14 @@
   import WorkflowStatus from '$lib/components/workflow-status.svelte';
   import Button from '$lib/holocene/button.svelte';
   import Icon from '$lib/holocene/icon/icon.svelte';
+  import Link from '$lib/holocene/link.svelte';
   import { translate } from '$lib/i18n/translate';
   import type { EventGroup } from '$lib/models/event-groups/event-groups';
   import { activeGroupHeight, setActiveGroup } from '$lib/stores/active-events';
   import { format } from '$lib/utilities/format-camel-case';
   import { formatDistanceAbbreviated } from '$lib/utilities/format-time';
   import { isChildWorkflowExecutionStartedEvent } from '$lib/utilities/is-event-type';
+  import { routeForEventHistory } from '$lib/utilities/route-for';
 
   import { mergeEventGroupDetails } from '../constants';
 
@@ -44,6 +46,7 @@
   $: textAttributes = Object.entries(attributes).filter(
     ([, value]) => typeof value !== 'object',
   );
+  $: link = group.links?.[0];
 
   $: childWorkflowStartedEvent =
     group && group.eventList.find(isChildWorkflowExecutionStartedEvent);
@@ -117,9 +120,25 @@
                 </div>
               </MetadataDecoder>
             {/if}
+            {#if link}
+              <div>
+                <div class="font-medium leading-3 text-secondary">
+                  {translate('nexus.link')}
+                </div>
+                <div class="text-wrap break-all leading-4">
+                  <Link
+                    href={routeForEventHistory({
+                      namespace: link.workflowEvent.namespace,
+                      workflow: link.workflowEvent.workflowId,
+                      run: link.workflowEvent.runId,
+                    })}>{link.workflowEvent.workflowId}</Link
+                  >
+                </div>
+              </div>
+            {/if}
             {#each textAttributes as [key, value] (key)}
               <div>
-                <div class="font-medium leading-3 text-subtle">
+                <div class="font-medium leading-3 text-secondary">
                   {format(key)}
                 </div>
                 <div class="text-wrap break-all leading-4">
@@ -132,7 +151,7 @@
         <div class="flex w-full flex-col gap-2 xl:w-1/2">
           {#each codeBlockAttributes as [key, value] (key)}
             <div>
-              <div class="font-medium leading-4 text-subtle">
+              <div class="font-medium leading-4 text-secondary">
                 {format(key)}
               </div>
               <GroupDetailsText {key} {value} {attributes} {onDecode} />
@@ -142,7 +161,7 @@
       </div>
       {#if childWorkflowStartedEvent}
         <div class="surface-primary px-4">
-          <div class="font-medium leading-4 text-subtle">Child Workflow</div>
+          <div class="font-medium leading-4 text-secondary">Child Workflow</div>
           {#key group.eventList.length}
             <GraphWidget
               {namespace}

Diff for: src/lib/models/event-groups/create-event-group.ts

@@ -91,6 +91,9 @@ const createGroupFor = <K extends keyof StartingEvents>(
     get eventList() {
       return Array.from(this.events, ([_key, value]) => value);
     },
+    get links() {
+      return Array.from(this.events, ([_key, value]) => value.links).flat();
+    },
     get lastEvent() {
       return getLastEvent(this);
     },

Diff for: src/lib/models/event-groups/event-groups.d.ts

@@ -1,5 +1,6 @@
 import type { Payload } from '$lib/types';
 import type {
+  EventLink,
   PendingActivity,
   PendingNexusOperation,
   WorkflowEvent,
@@ -31,6 +32,7 @@ interface EventGroup
   pendingActivity: PendingActivity | undefined;
   pendingNexusOperation: PendingNexusOperation | undefined;
   userMetadata?: { summary?: Payload };
+  links: EventLink[];
 }
 
 type EventGroups = EventGroup[];

Diff for: src/lib/pages/workflow-pending-activities.svelte

@@ -22,9 +22,11 @@
   import { omit } from '$lib/utilities/omit';
   import { stringifyWithBigInt } from '$lib/utilities/parse-with-big-int';
   import { toTimeDifference } from '$lib/utilities/to-time-difference';
+
+  $: pendingActivities = $workflowRun.workflow?.pendingActivities;
 </script>
 
-{#if $workflowRun.workflow?.pendingActivities}
+{#if pendingActivities?.length}
   {#await toDecodedPendingActivities($workflowRun.workflow) then activities}
     <Table class="mb-6 w-full min-w-[600px] table-fixed">
       <caption class="sr-only" slot="caption"