Skip to content

Redesign event detail layout and improve pending activities view#3281

Open
Alex-Tideman wants to merge 7 commits intomainfrom
input-order-for-activites
Open

Redesign event detail layout and improve pending activities view#3281
Alex-Tideman wants to merge 7 commits intomainfrom
input-order-for-activites

Conversation

@Alex-Tideman
Copy link
Copy Markdown
Collaborator

@Alex-Tideman Alex-Tideman commented Apr 8, 2026

Description & motivation 💭

Summary

  • Redesigns the event detail expanded view to show all payloads on the right and event info/links on the left, creating a clearer two-column layout
  • Refactors the pending activities tab to use EventDetailsFull with grouped events (including the scheduled event), replacing the standalone PendingActivityCard list
  • Reorders content across event cards, pending activity cards, and pending nexus operation cards to consistently show payloads/failures on the right and metadata on the left
  • Extracts reusable EventDetailsSection and EventPayloads components from the event card logic
  • Fixes a bug in pending nexus operation card where scheduleToStartTimeout was incorrectly displaying scheduleToCloseTimeout
  • Polishes borders and removes hover background on expanded event summary rows
  • Moves Pending Activity action buttons to the left side below info

Changes

  • event-details-full.svelte — Now processes event attributes inline, aggregates and sorts all payload fields, and renders a two-column layout (payloads left, details right) using the new extracted components
  • event-details-section.svelte (new) — Extracted component for rendering event header, links, metadata summary, detail fields, and link fields
  • event-payloads.svelte (new) — Extracted component for rendering payload code blocks with decoder support and stack traces
  • event-card.svelte — Swaps column order so payloads appear on the left
  • pending-activity-card.svelte — Moves failures/heartbeat to the left column, metadata to the right; moves action commands above the two-column layout
  • pending-nexus-operation-card.svelte — Moves failures/blocked reason/cancellation info to the left column; fixes scheduleToStartTimeout bug
  • event-summary-row.svelte — Removes hover background and pointer cursor on expanded rows
  • workflow-pending-activities.svelte — Replaces flat pending activity list with grouped event history view that includes scheduled events

Test plan

  • Verify event detail expanded view shows payloads on the left and info on the right
  • Verify pending activities tab displays grouped events with scheduled event context
  • Verify pending nexus operation cards show correct scheduleToStartTimeout value
  • Verify expanded event summary rows don't show hover highlight
  • Test with workflows that have failures, heartbeat details, and search attributes
  • Test empty states (no pending activities, no payloads)

Screenshots (if applicable) 📸

Before/After
Screenshot 2026-04-13 at 9 44 18 AM
Screenshot 2026-04-13 at 9 42 53 AM

Before/After
Screenshot 2026-04-13 at 9 58 04 AM
Screenshot 2026-04-13 at 9 43 36 AM

Pending Activities
Screenshot 2026-04-13 at 10 00 11 AM
Screenshot 2026-04-13 at 10 00 42 AM

Design Considerations 🎨

Testing 🧪

How was this tested 👻

  • Manual testing
  • E2E tests added
  • Unit tests added

Steps for others to test: 🚶🏽‍♂️🚶🏽‍♀️

Checklists

Draft Checklist

Merge Checklist

Issue(s) closed

Docs

Any docs updates needed?

- Reorder event card columns so input/payloads appear first
- Extract EventPayloads and EventDetailsSection sub-components
- Two-column layout in EventDetailsFull: unified payloads on left,
  per-event details with headers on right
- Sort payloads: input, result, failures, then header/searchAttributes/memo
- Apply same payloads-left pattern to pending activity and nexus cards
- Remove duplicate status/name headers from pending cards
- Disable hover background on expanded event history rows
- Fix scheduleToStartTimeout displaying wrong value in nexus card
- Add collapsible workflow details with persisted preference
- Pending activities tab now uses EventDetailsFull with event groups
  to show both the pending card and the scheduled event
- Add surface-primary background to event detail sections
- Add bottom border to two-column payload/details container
- Remove double border on last detail section
@vercel
Copy link
Copy Markdown

vercel bot commented Apr 8, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
holocene Ready Ready Preview, Comment Apr 14, 2026 3:24am

Request Review

@temporal-cicd
Copy link
Copy Markdown
Contributor

temporal-cicd bot commented Apr 8, 2026

Warnings
⚠️

📊 Strict Mode: 31 errors in 5 files (2.9% of 1066 total)

src/lib/components/event/event-card.svelte (11)
  • L141:37: Type 'string | null | undefined' is not assignable to type 'string'.
  • L141:48: 'link.workflowEvent' is possibly 'null' or 'undefined'.
  • L149:6: Type 'string | null | undefined' is not assignable to type 'string'.
  • L149:15: 'link.workflowEvent' is possibly 'null' or 'undefined'.
  • L152:10: 'link.workflowEvent' is possibly 'null' or 'undefined'.
  • L180:19: Parameter 'key' implicitly has an 'any' type.
  • L180:24: Parameter 'value' implicitly has an 'any' type.
  • L241:15: Parameter 'key' implicitly has an 'any' type.
  • L241:20: Parameter 'value' implicitly has an 'any' type.
  • L261:18: Parameter 'key' implicitly has an 'any' type.
  • L261:23: Parameter 'value' implicitly has an 'any' type.
src/lib/components/workflow/pending-activity/pending-activity-card.svelte (7)
  • L236:20: Parameter 'timeDifference' implicitly has an 'any' type.
  • L253:8: Argument of type 'number | null | undefined' is not assignable to parameter of type 'number | null'.
  • L258:54: Argument of type 'number | null | undefined' is not assignable to parameter of type 'number'.
  • L30:26: 'activity.attempt' is possibly 'null' or 'undefined'.
  • L85:12: Argument of type 'number | null | undefined' is not assignable to parameter of type 'number'.
  • L87:14: Argument of type 'Duration | null' is not assignable to parameter of type 'string | Duration'.
  • L135:13: 'totalPending' is possibly 'undefined'.
src/lib/components/workflow/pending-nexus-operation/pending-nexus-operation-card.svelte (2)
  • L119:20: Parameter 'timeDifference' implicitly has an 'any' type.
  • L15:26: 'operation.attempt' is possibly 'null' or 'undefined'.
src/lib/components/event/event-details-section.svelte (6)
  • L103:6: Type 'string | null | undefined' is not assignable to type 'string'.
  • L103:17: 'link.workflowEvent' is possibly 'null' or 'undefined'.
  • L112:8: Type 'string | null | undefined' is not assignable to type 'string'.
  • L112:17: 'link.workflowEvent' is possibly 'null' or 'undefined'.
  • L115:12: 'link.workflowEvent' is possibly 'null' or 'undefined'.
  • L144:19: Type 'unknown' is not assignable to type 'ValidTime | null | undefined'.
src/lib/components/event/event-summary-row.svelte (5)
  • L130:6: Argument of type 'string | undefined' is not assignable to parameter of type 'string'.
  • L167:23: Parameter 'event' implicitly has an 'any' type.
  • L179:30: Parameter 'group' implicitly has an 'any' type.
  • L179:37: Parameter 'hoveredEventId' implicitly has an 'any' type.
  • L310:16: Type 'ITimestamp | null | undefined' is not assignable to type 'ITimestamp'.

Generated by 🚫 dangerJS against b60eced

@Alex-Tideman Alex-Tideman changed the title Input order for activites Redesign event detail layout and improve pending activities view Apr 8, 2026
@Alex-Tideman Alex-Tideman marked this pull request as ready for review April 9, 2026 13:07
@Alex-Tideman Alex-Tideman requested a review from a team as a code owner April 9, 2026 13:07
<Link {href} class="whitespace-pre-line">{value}</Link>
</Copyable>
</div>
{@const nsHref = routeForNamespace({
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • ⚠️ 'link.workflowEvent' is possibly 'null' or 'undefined'.
  • ⚠️ Type 'string | null | undefined' is not assignable to type 'string'.

</p>
<Copyable
copyIconTitle={translate('common.copy-icon-title')}
copySuccessIconTitle={translate('common.copy-success-icon-title')}
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • ⚠️ 'link.workflowEvent' is possibly 'null' or 'undefined'.
  • ⚠️ Type 'string | null | undefined' is not assignable to type 'string'.

copySuccessIconTitle={translate('common.copy-success-icon-title')}
content={link.workflowEvent.namespace}
>
<Link href={nsHref} class="whitespace-pre-line"
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • ⚠️ 'link.workflowEvent' is possibly 'null' or 'undefined'.

{format(key)}
</p>
<p class="whitespace-pre-line break-all">
{#if shouldDisplayAsTime(key)}
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • ⚠️ Type 'unknown' is not assignable to type 'ValidTime | null | undefined'.

</div>
<div class="flex w-full flex-col gap-4 md:flex-1 xl:w-1/2">
<div class="flex w-full flex-col gap-1 p-4 md:flex-1 xl:w-1/2">
{#if failed}
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • ⚠️ 'totalPending' is possibly 'undefined'.

@@ -241,7 +236,7 @@

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • ⚠️ Parameter 'timeDifference' implicitly has an 'any' type.

@@ -126,7 +119,7 @@

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • ⚠️ Parameter 'timeDifference' implicitly has an 'any' type.

@@ -141,7 +141,7 @@
{#snippet eventNamespaceLink(link: ELink)}
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • ⚠️ 'link.workflowEvent' is possibly 'null' or 'undefined'.
  • ⚠️ Type 'string | null | undefined' is not assignable to type 'string'.

@@ -241,7 +241,7 @@

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • ⚠️ Parameter 'key' implicitly has an 'any' type.
  • ⚠️ Parameter 'value' implicitly has an 'any' type.

@@ -261,7 +261,7 @@

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • ⚠️ Parameter 'key' implicitly has an 'any' type.
  • ⚠️ Parameter 'value' implicitly has an 'any' type.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants