Skip to content

refactor: replace PayloadDecoder and MetadataDecoder with unified Payload component #3299

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
rossedfort wants to merge 24 commits into
base: main
Choose a base branch
from
Open

refactor: replace PayloadDecoder and MetadataDecoder with unified Payload component #3299

Show file tree
Hide file tree
Changes from 22 commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
fb7d660
refactor: replace PayloadDecoder and MetadataDecoder with unified Pay…
rossedfort Apr 9, 2026
aa66e2d
remove unused component, fix css
rossedfort Apr 13, 2026
5a5794f
refactor: move Payload component into payload/ directory
rossedfort Apr 13, 2026
d89d123
docs: add Payload component improvement suggestions
rossedfort Apr 13, 2026
13f0e56
docs: add decode-payload usage report and refactoring recommendations
rossedfort Apr 13, 2026
aadc984
Merge branch 'main' into refactor-payload-component
rossedfort Apr 16, 2026
3bc7c9f
Merge branch 'main' into refactor-payload-component
rossedfort Apr 20, 2026
d174838
refactor(payload): split Payload component into focused mode-specific…
rossedfort Apr 20, 2026
fda5e2c
fix(payload-summary): use decodeUserMetadata and add onDecode prop
rossedfort Apr 20, 2026
4ce968e
refactor(payload): extract shared decode logic into decode-payload-va…
rossedfort Apr 20, 2026
00288d0
fix(payload): replace onMount with \$effect for reactive value updates
rossedfort Apr 20, 2026
1265db8
add workflow with user metadata
rossedfort Apr 21, 2026
47f80ec
Merge branch 'main' into refactor-payload-component
rossedfort Apr 21, 2026
f38770f
remove unnecessary props from payload code block
rossedfort Apr 21, 2026
a627493
fix summary display
rossedfort Apr 21, 2026
9700eb9
add improvements
rossedfort Apr 22, 2026
adaf39d
fix heading levels
rossedfort Apr 22, 2026
5da1c5c
add multi input workflow
rossedfort Apr 23, 2026
ceae496
get rid of fieldName prop and fix most of the call sites
rossedfort Apr 23, 2026
cb00653
fix remaining type errors
rossedfort Apr 23, 2026
51a5c44
fix tests
rossedfort Apr 23, 2026
6fd76a0
rm inspect
rossedfort Apr 23, 2026
1d27eb4
rm console.log
rossedfort Apr 23, 2026
86127b9
Merge branch 'main' into refactor-payload-component
rossedfort Apr 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 13 additions & 55 deletions src/lib/components/event/event-card.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
<script lang="ts">
import { page } from '$app/state';

import PayloadCodeBlock from '$lib/components/payload/payload-code-block.svelte';
import PayloadSummary from '$lib/components/payload/payload-summary.svelte';
import Timestamp from '$lib/components/timestamp.svelte';
import CodeBlock from '$lib/holocene/code-block.svelte';
import Copyable from '$lib/holocene/copyable/index.svelte';
import Link from '$lib/holocene/link.svelte';
import { translate } from '$lib/i18n/translate';
import type { EventLink as ELink } from '$lib/types';
import { type Payload } from '$lib/types';
import { type Payload as RawPayload } from '$lib/types';
import type { WorkflowEvent } from '$lib/types/events';
import { getEventLinkHref } from '$lib/utilities/event-link-href';
import {
Expand All @@ -28,8 +30,6 @@
} from '$lib/utilities/route-for';

import EventDetailsLink from './event-details-link.svelte';
import MetadataDecoder from './metadata-decoder.svelte';
import PayloadDecoder from './payload-decoder.svelte';

let { event }: { event: WorkflowEvent } = $props();
const { namespace, workflow, run } = $derived(page.params);
Expand Down Expand Up @@ -157,24 +157,20 @@
{/snippet}

{#snippet eventLinks(links: ELink[])}
{#each links as link}
{#each links as link (link)}
{@render eventLink(link)}
{@render eventNamespaceLink(link)}
{/each}
{/snippet}

{#snippet eventSummary(value: Payload)}
{#snippet eventSummary(value: RawPayload)}
<div class="flex items-start gap-4">
<p class="min-w-56 text-sm text-secondary/80">Summary</p>
<p class="whitespace-pre-line">
<MetadataDecoder
{value}
let:decodedValue
fallback={translate('events.decode-failed')}
>
{decodedValue}
</MetadataDecoder>
</p>
<PayloadSummary
class="whitespace-pre-line"
{value}
fallback={translate('events.decode-failed')}
/>
</div>
{/snippet}

Copy link
Copy Markdown
Contributor

@temporal-cicd temporal-cicd Bot Apr 23, 2026

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.

Expand All @@ -186,55 +182,17 @@
{format(key)}
</p>
{#if value?.payloads}
<PayloadDecoder {value} key="payloads">
{#snippet children(decodedValue)}
<CodeBlock
content={decodedValue}
maxHeight={384}
copyIconTitle={translate('common.copy-icon-title')}
copySuccessIconTitle={translate('common.copy-success-icon-title')}
/>
{/snippet}
</PayloadDecoder>
{:else if key === 'searchAttributes'}
<PayloadDecoder
key="searchAttributes"
value={{ searchAttributes: codeBlockValue }}
>
{#snippet children(decodedValue)}
<CodeBlock
content={decodedValue}
maxHeight={384}
copyIconTitle={translate('common.copy-icon-title')}
copySuccessIconTitle={translate('common.copy-success-icon-title')}
/>
{/snippet}
</PayloadDecoder>
<PayloadCodeBlock {value} maxHeight={384} />
{:else}
<PayloadDecoder value={codeBlockValue}>
{#snippet children(decodedValue)}
<CodeBlock
content={decodedValue}
maxHeight={384}
copyIconTitle={translate('common.copy-icon-title')}
copySuccessIconTitle={translate('common.copy-success-icon-title')}
/>
{/snippet}
</PayloadDecoder>
<PayloadCodeBlock value={codeBlockValue} maxHeight={384} />
{/if}
</div>
{#if stackTrace}
<div>
<p class="mb-1 min-w-56 text-sm text-secondary/80">
{translate('workflows.call-stack-tab')}
</p>
<CodeBlock
content={stackTrace}
language="text"
maxHeight={384}
copyIconTitle={translate('common.copy-icon-title')}
copySuccessIconTitle={translate('common.copy-success-icon-title')}
/>
<CodeBlock content={stackTrace} language="text" maxHeight={384} />
</div>
{/if}
{/snippet}
Expand Down
35 changes: 7 additions & 28 deletions src/lib/components/event/event-details-row.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,20 @@
<script lang="ts">
import { twMerge as merge } from 'tailwind-merge';

import PayloadInline from '$lib/components/payload/payload-inline.svelte';
import Badge from '$lib/holocene/badge.svelte';
import Copyable from '$lib/holocene/copyable/index.svelte';
import { translate } from '$lib/i18n/translate';
import type { Payloads } from '$lib/types';
import type { Payload, Payloads } from '$lib/types';
import { isRawPayload, isRawPayloads } from '$lib/utilities/decode-payload';
import { format } from '$lib/utilities/format-camel-case';
import type { CombinedAttributes } from '$lib/utilities/format-event-attributes';
import { displayLinkType } from '$lib/utilities/get-single-attribute-for-event';

import EventDetailsLink from './event-details-link.svelte';
import PayloadDecoder from './payload-decoder.svelte';

export let key: string;
export let value: string | Record<string, unknown> | Payloads;
export let value: string | Payload | Payloads | Record<string, unknown>;
export let attributes: CombinedAttributes;
export let showKey = true;

Expand All @@ -29,21 +30,13 @@
{format(key)}
</p>
{/if}
{#if typeof value === 'object'}
{#if isRawPayload(value) || isRawPayloads(value)}
<div
class="flex max-w-sm items-center justify-between gap-2 overflow-hidden pr-1 xl:flex-nowrap"
>
<PayloadDecoder {value} key="payloads">
{#snippet children(decodedValue)}
<div class={merge('payload', $$props.class)}>
<code>
<pre class="truncate">{decodedValue.slice(0, 60)}</pre>
</code>
</div>
{/snippet}
</PayloadDecoder>
<PayloadInline {value} class={merge($$props.class)} />
</div>
{:else if linkType !== 'none'}
{:else if typeof value === 'string' && linkType !== 'none'}
<Copyable
copyIconTitle={translate('common.copy-icon-title')}
copySuccessIconTitle={translate('common.copy-success-icon-title')}
Expand All @@ -64,17 +57,3 @@
{/if}
</div>
{/if}

<style lang="postcss">
.payload {
@apply overflow-hidden border border-subtle bg-code-block px-1 py-0.5 font-mono text-xs;
}

.payload code {
@apply text-primary;
}

.payload pre {
@apply text-primary;
}
</style>
22 changes: 0 additions & 22 deletions src/lib/components/event/event-metadata-expanded.svelte
View file
Open in desktop

This file was deleted.

21 changes: 6 additions & 15 deletions src/lib/components/event/event-summary-row.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@

import { page } from '$app/state';

import PayloadSummary from '$lib/components/payload/payload-summary.svelte';
import { timestamp } from '$lib/components/timestamp.svelte';
import Badge from '$lib/holocene/badge.svelte';
import Copyable from '$lib/holocene/copyable/index.svelte';
Expand Down Expand Up @@ -42,7 +43,6 @@
import EventDetailsFull from './event-details-full.svelte';
import EventDetailsRow from './event-details-row.svelte';
import EventLink from './event-link.svelte';
import MetadataDecoder from './metadata-decoder.svelte';

interface Props {
event: IterableEvent;
Expand Down Expand Up @@ -215,7 +215,7 @@
{#if isEventGroup(event)}
<td class="font-mono">
<div class="flex items-center gap-0.5">
{#each event.eventList as groupEvent}

Check warning on line 218 in src/lib/components/event/event-summary-row.svelte

View workflow job for this annotation

GitHub Actions / lint 

Each block should have a key
<Link
data-testid="link"
href={routeForEventHistoryEvent({
Expand Down Expand Up @@ -327,21 +327,12 @@
<EventDetailsRow {...primaryLocalAttribute} {attributes} />
{/if}
{#if currentEvent?.userMetadata?.summary}
<MetadataDecoder
value={currentEvent.userMetadata.summary}
let:decodedValue
<div
class="flex max-w-xl items-center gap-2 first:pt-0 last:border-b-0 md:w-auto"
>
{#if decodedValue}
<div
class="flex max-w-xl items-center gap-2 first:pt-0 last:border-b-0 md:w-auto"
>
<p class="whitespace-nowrap text-right text-xs">Summary</p>
<Badge type="secondary" class="block select-none truncate">
{decodedValue}
</Badge>
</div>
{/if}
</MetadataDecoder>
<p class="whitespace-nowrap text-right text-xs">Summary</p>
<PayloadSummary value={currentEvent.userMetadata.summary} />
</div>
{/if}
{#if currentEvent?.links?.length}
<EventLink
Expand Down
46 changes: 0 additions & 46 deletions src/lib/components/event/metadata-decoder.svelte
View file
Open in desktop

This file was deleted.

52 changes: 0 additions & 52 deletions src/lib/components/event/payload-decoder.svelte
View file
Open in desktop

This file was deleted.

Loading
Loading