Workflow Electron

.gitignore

@@ -19,3 +19,5 @@ server/ui/assets
 /playwright/.cache/
 /dist
 /audits
+go.work
+go.work.sum

server/go.mod

@@ -1,6 +1,6 @@
 module github.com/temporalio/ui-server/v2
 
-go 1.20
+go 1.22.6
 
 require (
 	github.com/coreos/go-oidc/v3 v3.1.0

src/lib/components/data-encoder-settings.svelte

@@ -4,7 +4,7 @@
 
   import { page } from '$app/stores';
 
-  import Accordion from '$lib/holocene/accordion.svelte';
+  import Accordion from '$lib/holocene/accordion/accordion.svelte';
   import Button from '$lib/holocene/button.svelte';
   import Link from '$lib/holocene/link.svelte';
   import { translate } from '$lib/i18n/translate';

src/lib/components/lines-and-dots/workflow-error-stack-trace.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import Accordion from '$lib/holocene/accordion/accordion.svelte';
+  import CodeBlock from '$lib/holocene/code-block.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import type { Failure } from '$lib/types';
+
+  export let failure: Failure | undefined = undefined;
+</script>
+
+{#if failure}
+  <Accordion title={translate('common.failure')} class="text-sm">
+    <div class="hidden w-full text-right text-xs lg:block" slot="description">
+      {failure?.message}
+    </div>
+    <div class="flex flex-col gap-2">
+      <p>{translate('common.message')}</p>
+      <CodeBlock
+        content={failure?.message || ''}
+        language="text"
+        copyIconTitle={translate('common.copy-icon-title')}
+        copySuccessIconTitle={translate('common.copy-success-icon-title')}
+      />
+      {#if failure?.source}
+        <p>{translate('common.source')}</p>
+        <CodeBlock
+          content={failure.source}
+          language="text"
+          copyIconTitle={translate('common.copy-icon-title')}
+          copySuccessIconTitle={translate('common.copy-success-icon-title')}
+        />
+      {/if}
+      {#if failure?.stackTrace}
+        <p>{translate('common.stack-trace')}</p>
+        <CodeBlock
+          content={failure.stackTrace}
+          language="text"
+          copyIconTitle={translate('common.copy-icon-title')}
+          copySuccessIconTitle={translate('common.copy-success-icon-title')}
+        />
+      {/if}
+    </div>
+  </Accordion>
+{/if}
+{#if failure?.cause}
+  <svelte:self failure={failure.cause} />
+{/if}

src/lib/components/lines-and-dots/workflow-error.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
+  import AccordionGroup from '$lib/holocene/accordion/accordion-group.svelte';
   import Alert from '$lib/holocene/alert.svelte';
-  import CodeBlock from '$lib/holocene/code-block.svelte';
   import Icon from '$lib/holocene/icon/icon.svelte';
   import Link from '$lib/holocene/link.svelte';
   import { translate } from '$lib/i18n/translate';
@@ -17,6 +17,9 @@
 
   import { CategoryIcon } from './constants';
 
+  import WorkflowErrorStackTrace from './workflow-error-stack-trace.svelte';
+  import WorkflowPendingTask from './workflow-pending-task.svelte';
+
   export let error: WorkflowTaskFailedEvent;
   export let pendingTask: PendingWorkflowTaskInfo | undefined = undefined;
 
@@ -66,7 +69,7 @@
     <div
       class="mt-2 flex w-full flex-col gap-0 overflow-hidden rounded-xl border-2 border-danger"
     >
-      <div class="flex items-center justify-between gap-2 bg-danger px-2 py-1">
+      <div class="flex items-center justify-between gap-2 bg-danger px-2 py-2">
         <div class="flex items-center gap-2">
           {error.id}
           <Icon name={CategoryIcon[error.category]} />
@@ -78,61 +81,16 @@
           relative: $relativeTime,
         })}
       </div>
-      <div class="flex flex-col gap-2 bg-space-black p-4 text-white">
-        <p>{translate('common.failure')}</p>
-        <CodeBlock
-          content={error.attributes?.failure?.message || ''}
-          language="text"
-          copyIconTitle={translate('common.copy-icon-title')}
-          copySuccessIconTitle={translate('common.copy-success-icon-title')}
-        />
-        <p>{translate('common.stack-trace')}</p>
-        <CodeBlock
-          content={error.attributes?.failure?.stackTrace || ''}
-          language="text"
-          copyIconTitle={translate('common.copy-icon-title')}
-          copySuccessIconTitle={translate('common.copy-success-icon-title')}
-        />
-        <p>{translate('common.source')}</p>
-        <CodeBlock
-          content={error.attributes?.failure?.source || ''}
-          language="text"
-          copyIconTitle={translate('common.copy-icon-title')}
-          copySuccessIconTitle={translate('common.copy-success-icon-title')}
-        />
+      <div class="flex flex-col gap-2 bg-primary p-4">
+        {#if error.attributes?.failure}
+          <AccordionGroup>
+            <WorkflowErrorStackTrace failure={error.attributes.failure} />
+            {#if pendingTask}
+              <WorkflowPendingTask {pendingTask} />
+            {/if}
+          </AccordionGroup>
+        {/if}
       </div>
     </div>
-
-    {#if pendingTask}
-      <div class="flex flex-col gap-2 pt-4">
-        <h5>Pending Workflow Task Info</h5>
-        <p>
-          {translate('common.state')}
-          <span class="badge">{pendingTask.state}</span>
-        </p>
-        <p>
-          {translate('common.attempt')}
-          <span class="badge">{pendingTask.attempt}</span>
-        </p>
-        <p>
-          <span class="inline-block w-48">Original Scheduled Time</span>
-          <span class="badge"
-            >{formatDate(pendingTask.originalScheduledTime, $timeFormat)}</span
-          >
-        </p>
-        <p>
-          <span class="inline-block w-48">Scheduled Time</span>
-          <span class="badge"
-            >{formatDate(pendingTask.scheduledTime, $timeFormat)}</span
-          >
-        </p>
-        <p>
-          <span class="inline-block w-48">Started Time</span>
-          <span class="badge"
-            >{formatDate(pendingTask.startedTime, $timeFormat)}</span
-          >
-        </p>
-      </div>
-    {/if}
   </Alert>
 {/if}

src/lib/components/lines-and-dots/workflow-pending-task.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import Accordion from '$lib/holocene/accordion/accordion.svelte';
+  import Badge from '$lib/holocene/badge.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import { timeFormat } from '$lib/stores/time-format';
+  import type { PendingWorkflowTaskInfo } from '$lib/types';
+  import { formatDate } from '$lib/utilities/format-date';
+
+  export let pendingTask: PendingWorkflowTaskInfo | undefined = undefined;
+</script>
+
+<Accordion title={translate('workflows.pending-workflow-task')}>
+  <div class="flex flex-col gap-2">
+    <p class="flex items-center gap-4">
+      {translate('common.state')}
+      <Badge>{pendingTask.state}</Badge>
+    </p>
+    <p class="flex items-center gap-4">
+      {translate('common.attempt')}
+      <Badge>{pendingTask.attempt}</Badge>
+    </p>
+    <p class="flex items-center gap-4">
+      {translate('workflows.original-scheduled-time')}
+      <Badge>{formatDate(pendingTask.originalScheduledTime, $timeFormat)}</Badge
+      >
+    </p>
+    <p class="flex items-center gap-4">
+      {translate('workflows.scheduled-time')}
+      <Badge>{formatDate(pendingTask.scheduledTime, $timeFormat)}</Badge>
+    </p>
+    <p class="flex items-center gap-4">
+      {translate('workflows.started-time')}
+      <Badge>{formatDate(pendingTask.startedTime, $timeFormat)}</Badge>
+    </p>
+  </div>
+</Accordion>

src/lib/components/schedule/schedule-advanced-settings.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Accordion from '$lib/holocene/accordion.svelte';
+  import Accordion from '$lib/holocene/accordion/accordion.svelte';
   import { translate } from '$lib/i18n/translate';
 
   import ScheduleNotes from './schedule-notes.svelte';

src/lib/components/schedule/schedule-search-attributes.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Accordion from '$lib/holocene/accordion.svelte';
+  import Accordion from '$lib/holocene/accordion/accordion.svelte';
   import { translate } from '$lib/i18n/translate';
   import type { SearchAttribute } from '$lib/types';
   import { decodePayloadAttributes } from '$lib/utilities/decode-payload';

src/lib/components/side-nav.svelte

@@ -23,6 +23,7 @@
         tooltip={item?.tooltip || item.label}
         external={item?.external}
         animate={item?.animate}
+        isActive={item.isActive}
       />
     {/if}
   {/each}

src/lib/components/workflow/pending-activities.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { page } from '$app/stores';
 
-  import Accordion from '$lib/holocene/accordion.svelte';
+  import Accordion from '$lib/holocene/accordion/accordion.svelte';
   import Badge from '$lib/holocene/badge.svelte';
   import CodeBlock from '$lib/holocene/code-block.svelte';
   import Icon from '$lib/holocene/icon/icon.svelte';