Show multiple callbacks and WorkflowExecutionUpdateOptions attributes

.eslintrc.cjs

@@ -39,6 +39,7 @@ module.exports = {
     $$Generic: 'readonly',
   },
   rules: {
+    '@typescript-eslint/ban-ts-comment': 'warn',
     quotes: ['error', 'single', { avoidEscape: true }],
     '@typescript-eslint/no-unused-vars': [
       'error',

src/lib/components/lines-and-dots/workflow-callback.svelte → src/lib/components/workflow/workflow-callback.svelte

@@ -3,21 +3,23 @@
   import Badge from '$lib/holocene/badge.svelte';
   import CodeBlock from '$lib/holocene/code-block.svelte';
   import { translate } from '$lib/i18n/translate';
-  import { fullEventHistory } from '$lib/stores/events';
   import { timeFormat } from '$lib/stores/time-format';
   import type { CallbackState } from '$lib/types';
+  import type { EventLink as Link } from '$lib/types/events';
   import type { Callback } from '$lib/types/nexus';
   import { formatDate } from '$lib/utilities/format-date';
   import { routeForNamespace } from '$lib/utilities/route-for';
 
   import EventLink from '../event/event-link.svelte';
 
   export let callback: Callback;
+  export let link: Link | undefined = undefined;
 
   $: completedTime = formatDate(callback.lastAttemptCompleteTime, $timeFormat);
   $: nextTime = formatDate(callback.nextAttemptScheduleTime, $timeFormat);
   $: failure = callback?.lastAttemptFailure?.message;
   $: blockedReason = callback?.blockedReason;
+  $: callbackUrl = callback?.callback?.nexus?.url;
 
   const titles = {
     Standby: translate('nexus.callback.standby'),
@@ -26,8 +28,6 @@
     Failed: translate('nexus.callback.failed'),
     Succeeded: translate('nexus.callback.succeeded'),
   };
-  $: initialEvent = $fullEventHistory[0];
-  $: link = initialEvent?.links[0];
 
   const failedState = 'Failed' as unknown as CallbackState;
   $: failed = callback.state === failedState;
@@ -68,6 +68,12 @@
         </p>
       {/if}
     </div>
+    {#if !link}
+      <p class="flex items-center gap-2">
+        {translate('nexus.callback-url')}
+        <Badge type="subtle">{callbackUrl}</Badge>
+      </p>
+    {/if}
     {#if blockedReason}
       <p class="flex items-center gap-2">
         {translate('nexus.blocked-reason')}
@@ -86,4 +92,5 @@
       </div>
     {/if}
   </div>
+  <slot />
 </Alert>

src/lib/components/workflow/workflow-callbacks.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import AccordionLight from '$lib/holocene/accordion/accordion-light.svelte';
+  import { fullEventHistory } from '$lib/stores/events';
+  import type { Callback } from '$lib/types/nexus';
+
+  import WorkflowCallback from './workflow-callback.svelte';
+
+  export let callbacks: Callback[];
+
+  $: initialEvent = $fullEventHistory[0];
+  $: link = initialEvent?.links?.[0];
+
+  $: firstCallback = callbacks[0];
+</script>
+
+<WorkflowCallback callback={firstCallback} {link}>
+  {#if callbacks.length > 1}
+    <div class="py-2">
+      <AccordionLight let:open>
+        <p class="p-1" slot="title">
+          View {callbacks.length - 1} other Callbacks
+        </p>
+        {#if open}
+          <div class="flex flex-col gap-2">
+            {#each callbacks.slice(1) as callback}
+              <WorkflowCallback {callback} />
+            {/each}
+          </div>
+        {/if}
+      </AccordionLight>
+    </div>
+  {/if}
+</WorkflowCallback>

src/lib/holocene/accordion/accordion-light.svelte

@@ -31,7 +31,7 @@
   };
 </script>
 
-<div class="w-full" {...$$restProps}>
+<div class="w-full {$$restProps.class}">
   <button
     id="{id}-trigger"
     aria-expanded={open}

src/lib/i18n/locales/en/nexus.ts

@@ -54,6 +54,7 @@ export const Strings = {
     failed: 'Nexus Callback has failed.',
     succeeded: 'Nexus Callback has succeeded.',
   },
+  'callback-url': 'Callback URL',
   'last-attempt-completed-time': 'Last Attempt Completed Time',
   'next-attempt-scheduled-time': 'Next Attempt Scheduled Time',
   'last-attempt-failure': 'Last Attempt Failure',

src/lib/layouts/workflow-history-layout.svelte

@@ -4,9 +4,9 @@
   import EventSummary from '$lib/components/event/event-summary.svelte';
   import InputAndResults from '$lib/components/lines-and-dots/input-and-results.svelte';
   import TimelineGraph from '$lib/components/lines-and-dots/svg/timeline-graph.svelte';
-  import WorkflowCallback from '$lib/components/lines-and-dots/workflow-callback.svelte';
   import WorkflowError from '$lib/components/lines-and-dots/workflow-error.svelte';
   import WorkflowCallStackError from '$lib/components/workflow/workflow-call-stack-error.svelte';
+  import WorkflowCallbacks from '$lib/components/workflow/workflow-callbacks.svelte';
   import { translate } from '$lib/i18n/translate';
   import { groupEvents } from '$lib/models/event-groups';
   import { clearActives } from '$lib/stores/active-events';
@@ -69,7 +69,7 @@
       />
     {/if}
     {#if workflow?.callbacks?.length}
-      <WorkflowCallback callback={workflow.callbacks[0]} />
+      <WorkflowCallbacks callbacks={workflow.callbacks} />
     {/if}
     <div
       class="flex flex-col items-center gap-2 py-2 xl:flex-row xl:justify-between xl:gap-8"

src/lib/models/event-history/get-event-categorization.test.ts

@@ -59,6 +59,7 @@ describe('Event Category Data Structures', () => {
         "WorkflowExecutionCompleted": "workflow",
         "WorkflowExecutionContinuedAsNew": "workflow",
         "WorkflowExecutionFailed": "workflow",
+        "WorkflowExecutionOptionsUpdated": "workflow",
         "WorkflowExecutionSignaled": "signal",
         "WorkflowExecutionStarted": "workflow",
         "WorkflowExecutionTerminated": "workflow",

src/lib/models/event-history/get-event-categorization.ts

@@ -57,6 +57,7 @@ export const eventTypeCategorizations: Readonly<
   WorkflowExecutionStarted: CATEGORIES.WORKFLOW,
   WorkflowExecutionTerminated: CATEGORIES.WORKFLOW,
   WorkflowExecutionTimedOut: CATEGORIES.WORKFLOW,
+  WorkflowExecutionOptionsUpdated: CATEGORIES.WORKFLOW,
   WorkflowTaskCompleted: CATEGORIES.WORKFLOW,
   WorkflowTaskFailed: CATEGORIES.WORKFLOW,
   WorkflowTaskScheduled: CATEGORIES.WORKFLOW,

src/lib/utilities/is-event-type.ts

@@ -123,6 +123,7 @@
   'WorkflowExecutionStarted',
   'WorkflowExecutionTerminated',
   'WorkflowExecutionTimedOut',
+  'WorkflowExecutionOptionsUpdated',
   'WorkflowTaskCompleted',
   'WorkflowTaskFailed',
   'WorkflowTaskScheduled',
@@ -141,11 +142,14 @@
   'WorkflowPropertiesModified',
 ] as const;
 
+// Remove ts-ignore when TS SDK adds workflowExecutionOptionsUpdatedEventAttributes
 export const eventAttributeKeys: Readonly<EventAttributeKey[]> = [
   'workflowExecutionStartedEventAttributes',
   'workflowExecutionCompletedEventAttributes',
   'workflowExecutionFailedEventAttributes',
   'workflowExecutionTimedOutEventAttributes',
+  // @ts-ignore
+  'workflowExecutionOptionsUpdatedEventAttributes',
   'workflowTaskStartedEventAttributes',
   'workflowTaskScheduledEventAttributes',
   'workflowTaskCompletedEventAttributes',