Skip to content

Fix initial load of JSON view not rendering event #2825

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

Merged
merged 5 commits into from
Jul 23, 2025
Merged

Fix initial load of JSON view not rendering event #2825

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
510573f
Update PayloadDecoder to svelte 5 syntax and make decodePayloads reac…
laurakwhit Jul 22, 2025
7f77635
Update PayloadDecoder to use snippets
laurakwhit Jul 22, 2025
7fd2202
Merge branch 'main' into DT-3138-fix-initial-json-view
laurakwhit Jul 22, 2025
f2f3ff5
Update PayloadDecoder in PendingActivityCard
laurakwhit Jul 22, 2025
ede6cd9
Revert to onMount and add events length check to workflow json navigator
laurakwhit Jul 23, 2025
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
47 changes: 26 additions & 21 deletions src/lib/components/event/event-card.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,35 +169,40 @@
{format(key)}
</p>
{#if value?.payloads}
<PayloadDecoder {value} key="payloads" let:decodedValue>
<CodeBlock
content={decodedValue}
maxHeight={384}
copyIconTitle={translate('common.copy-icon-title')}
copySuccessIconTitle={translate('common.copy-success-icon-title')}
/>
<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 }}
let:decodedValue
>
<CodeBlock
content={decodedValue}
maxHeight={384}
copyIconTitle={translate('common.copy-icon-title')}
copySuccessIconTitle={translate('common.copy-success-icon-title')}
/>
{#snippet children(decodedValue)}
<CodeBlock
content={decodedValue}
maxHeight={384}
copyIconTitle={translate('common.copy-icon-title')}
copySuccessIconTitle={translate('common.copy-success-icon-title')}
/>
{/snippet}
</PayloadDecoder>
{:else}
<PayloadDecoder value={codeBlockValue} let:decodedValue>
<CodeBlock
content={decodedValue}
maxHeight={384}
copyIconTitle={translate('common.copy-icon-title')}
copySuccessIconTitle={translate('common.copy-success-icon-title')}
/>
<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>
{/if}
</div>
Expand Down
12 changes: 8 additions & 4 deletions src/lib/components/event/event-details-row.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,10 +33,14 @@
<div
class="flex max-w-sm items-center justify-between gap-2 overflow-hidden pr-1 xl:flex-nowrap"
>
<PayloadDecoder {value} key="payloads" let:decodedValue>
<div class={merge('payload', $$props.class)}>
<code><pre class="truncate">{decodedValue.slice(0, 60)}</pre></code>
</div>
<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>
</div>
{:else if linkType !== 'none'}
Expand Down
23 changes: 12 additions & 11 deletions src/lib/components/event/payload-decoder.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script lang="ts">
import { onMount } from 'svelte';
import type { Snippet } from 'svelte';
import { page } from '$app/stores';
Expand All @@ -18,18 +18,19 @@
} from '$lib/utilities/get-codec';
import { stringifyWithBigInt } from '$lib/utilities/parse-with-big-int';
export let value:
| PotentiallyDecodable
| EventAttribute
| WorkflowEvent
| Memo;
export let key = '';
export let onDecode: (decodedValue: string) => void | undefined = undefined;
interface Props {
value: PotentiallyDecodable | EventAttribute | WorkflowEvent | Memo;
key?: string;
onDecode?: (decodedValue: string) => void;
children: Snippet<[decodedValue: string]>;
}
let { children, value, key = '', onDecode }: Props = $props();
let keyedValue = key && value?.[key] ? value[key] : value;
let decodedValue = stringifyWithBigInt(keyedValue);
let decodedValue = $state(stringifyWithBigInt(keyedValue));
onMount(() => {
$effect(() => {
decodePayloads(value);
});
Expand Down Expand Up @@ -70,4 +71,4 @@
};
</script>

<slot {decodedValue} />
{@render children(decodedValue)}
17 changes: 8 additions & 9 deletions src/lib/components/lines-and-dots/svg/group-details-text.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,36 +23,35 @@

{#if typeof value === 'object'}
{#if value?.payloads}
<PayloadDecoder {value} key="payloads" let:decodedValue {onDecode}>
{#key decodedValue}
<PayloadDecoder {value} key="payloads" {onDecode}>
{#snippet children(decodedValue)}
<CodeBlock
content={decodedValue}
maxHeight={staticCodeBlockHeight - fontSizeRatio}
/>
{/key}
{/snippet}
</PayloadDecoder>
{:else if key === 'searchAttributes'}
<PayloadDecoder
key="searchAttributes"
value={{ searchAttributes: codeBlockValue }}
let:decodedValue
{onDecode}
>
{#key decodedValue}
{#snippet children(decodedValue)}
<CodeBlock
content={decodedValue}
maxHeight={staticCodeBlockHeight - fontSizeRatio}
/>
{/key}
{/snippet}
</PayloadDecoder>
{:else}
<PayloadDecoder value={codeBlockValue} let:decodedValue {onDecode}>
{#key decodedValue}
<PayloadDecoder value={codeBlockValue} {onDecode}>
{#snippet children(decodedValue)}
<CodeBlock
content={decodedValue}
maxHeight={staticCodeBlockHeight - fontSizeRatio}
/>
{/key}
{/snippet}
</PayloadDecoder>
{/if}
{:else if linkType !== 'none'}
Expand Down
6 changes: 4 additions & 2 deletions src/lib/components/workflow/client-actions/update-confirmation-modal.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,8 +172,10 @@
{#if success}
<Alert intent="success" title="Success">
{#if success?.payloads?.[0] && success.payloads[0].data}
<PayloadDecoder value={success.payloads[0]} let:decodedValue>
<CodeBlock class="mt-4" content={decodedValue} language="text" />
<PayloadDecoder value={success.payloads[0]}>
{#snippet children(decodedValue)}
<CodeBlock class="mt-4" content={decodedValue} language="text" />
{/snippet}
</PayloadDecoder>
{/if}
</Alert>
Expand Down
38 changes: 22 additions & 16 deletions src/lib/components/workflow/input-and-results-payload.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,35 +53,41 @@
{#if content}
{#key $minimizeEventView}
{#if payloadsSize > 0}
<PayloadDecoder value={parsedContent} key="payloads" let:decodedValue>
{#if payloadsSize > 1}
{#each parsePayloads(decodedValue) as decodedContent}
<PayloadDecoder value={parsedContent} key="payloads">
{#snippet children(decodedValue)}
{#if payloadsSize > 1}
{#each parsePayloads(decodedValue) as decodedContent}
<CodeBlock
content={stringifyWithBigInt(decodedContent)}
copyIconTitle={translate('common.copy-icon-title')}
copySuccessIconTitle={translate(
'common.copy-success-icon-title',
)}
maxHeight={300}
/>
{/each}
{:else}
<CodeBlock
content={stringifyWithBigInt(decodedContent)}
content={decodedValue}
copyIconTitle={translate('common.copy-icon-title')}
copySuccessIconTitle={translate(
'common.copy-success-icon-title',
)}
maxHeight={300}
/>
{/each}
{:else}
{/if}
{/snippet}
</PayloadDecoder>
{:else}
<PayloadDecoder value={parseWithBigInt(content)}>
{#snippet children(decodedValue)}
<CodeBlock
content={decodedValue}
copyIconTitle={translate('common.copy-icon-title')}
copySuccessIconTitle={translate('common.copy-success-icon-title')}
maxHeight={300}
/>
{/if}
</PayloadDecoder>
{:else}
<PayloadDecoder value={parseWithBigInt(content)} let:decodedValue>
<CodeBlock
content={decodedValue}
copyIconTitle={translate('common.copy-icon-title')}
copySuccessIconTitle={translate('common.copy-success-icon-title')}
maxHeight={300}
/>
{/snippet}
</PayloadDecoder>
{/if}
{/key}
Expand Down
31 changes: 13 additions & 18 deletions src/lib/components/workflow/pending-activity/pending-activity-card.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,17 +167,15 @@
<p class="text-sm text-secondary/80">
{translate('workflows.heartbeat-details')}
</p>
<PayloadDecoder
value={activity.heartbeatDetails}
let:decodedValue
key="payloads"
>
<CodeBlock
content={decodedValue}
maxHeight={384}
copyIconTitle={translate('common.copy-icon-title')}
copySuccessIconTitle={translate('common.copy-success-icon-title')}
/>
<PayloadDecoder value={activity.heartbeatDetails} 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>
</div>
{/snippet}
Expand All @@ -190,11 +188,8 @@
{translate('workflows.last-failure')}
</p>
{#if activity.lastFailure?.encodedAttributes}
{#key activity.attempt}
<PayloadDecoder
value={activity.lastFailure as PotentiallyDecodable}
let:decodedValue
>
<PayloadDecoder value={activity.lastFailure as PotentiallyDecodable}>
{#snippet children(decodedValue)}
<CodeBlock
content={decodedValue}
maxHeight={384}
Expand All @@ -203,8 +198,8 @@
'common.copy-success-icon-title',
)}
/>
</PayloadDecoder>
{/key}
{/snippet}
</PayloadDecoder>
{:else}
<CodeBlock
content={stringifyWithBigInt(
Expand Down
19 changes: 9 additions & 10 deletions src/lib/components/workflow/workflow-json-navigator.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,16 +86,15 @@
<div class="min-h-screen py-4">
{#if $decodeEventHistory}
{#key [index, $decodeEventHistory]}
<PayloadDecoder
value={fromEventToRawEvent(events[index - 1])}
let:decodedValue
>
<CodeBlock
content={decodedValue}
testId="event-history-json"
copyIconTitle={translate('common.copy-icon-title')}
copySuccessIconTitle={translate('common.copy-success-icon-title')}
/>
<PayloadDecoder value={fromEventToRawEvent(events[index - 1])}>
{#snippet children(decodedValue)}
<CodeBlock
content={decodedValue}
testId="event-history-json"
copyIconTitle={translate('common.copy-icon-title')}
copySuccessIconTitle={translate('common.copy-success-icon-title')}
/>
{/snippet}
</PayloadDecoder>
{/key}
{:else}
Expand Down
31 changes: 15 additions & 16 deletions src/lib/pages/workflow-metadata.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,30 +16,29 @@
<PayloadDecoder
value={{ searchAttributes: workflow.searchAttributes }}
key="searchAttributes"
let:decodedValue
>
<CodeBlock
content={decodedValue}
copyIconTitle={translate('common.copy-icon-title')}
copySuccessIconTitle={translate('common.copy-success-icon-title')}
/>
{#snippet children(decodedValue)}
<CodeBlock
content={decodedValue}
copyIconTitle={translate('common.copy-icon-title')}
copySuccessIconTitle={translate('common.copy-success-icon-title')}
/>
{/snippet}
</PayloadDecoder>
</div>
{/if}

{#if workflow?.memo}
<div class="mt-4 flex flex-col gap-2">
<h3>{translate('common.memo')}</h3>
<PayloadDecoder
value={{ memo: workflow.memo }}
key="memo"
let:decodedValue
>
<CodeBlock
content={decodedValue}
copyIconTitle={translate('common.copy-icon-title')}
copySuccessIconTitle={translate('common.copy-success-icon-title')}
/>
<PayloadDecoder value={{ memo: workflow.memo }} key="memo">
{#snippet children(decodedValue)}
<CodeBlock
content={decodedValue}
copyIconTitle={translate('common.copy-icon-title')}
copySuccessIconTitle={translate('common.copy-success-icon-title')}
/>
{/snippet}
</PayloadDecoder>
</div>
{/if}
Expand Down
Loading