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 all 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
21 changes: 11 additions & 10 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 { onMount, type Snippet } from 'svelte';

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

Expand All @@ -18,16 +18,17 @@
} 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(() => {
decodePayloads(value);
Expand Down Expand Up @@ -70,4 +71,4 @@
};
</script>

<slot {decodedValue} />
{@render children(decodedValue)}
47 changes: 26 additions & 21 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,41 @@

{#if typeof value === 'object'}
{#if value?.payloads}
<PayloadDecoder {value} key="payloads" let:decodedValue {onDecode}>
{#key decodedValue}
<CodeBlock
content={decodedValue}
maxHeight={staticCodeBlockHeight - fontSizeRatio}
/>
{/key}
<PayloadDecoder {value} key="payloads" {onDecode}>
{#snippet children(decodedValue)}
{#key 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}
<CodeBlock
content={decodedValue}
maxHeight={staticCodeBlockHeight - fontSizeRatio}
/>
{/key}
{#snippet children(decodedValue)}
{#key decodedValue}
<CodeBlock
content={decodedValue}
maxHeight={staticCodeBlockHeight - fontSizeRatio}
/>
{/key}
{/snippet}
</PayloadDecoder>
{:else}
<PayloadDecoder value={codeBlockValue} let:decodedValue {onDecode}>
{#key decodedValue}
<CodeBlock
content={decodedValue}
maxHeight={staticCodeBlockHeight - fontSizeRatio}
/>
{/key}
<PayloadDecoder value={codeBlockValue} {onDecode}>
{#snippet children(decodedValue)}
{#key 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
39 changes: 19 additions & 20 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 @@ -193,16 +191,17 @@
{#key activity.attempt}
<PayloadDecoder
value={activity.lastFailure as PotentiallyDecodable}
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>
{/key}
{:else}
Expand Down
45 changes: 24 additions & 21 deletions src/lib/components/workflow/workflow-json-navigator.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
<script lang="ts">
import type { Snippet } from 'svelte';

import CodeBlock from '$lib/holocene/code-block.svelte';
import RangeInput from '$lib/holocene/input/range-input.svelte';
import { translate } from '$lib/i18n/translate';
Expand All @@ -9,9 +11,15 @@

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

export let events: WorkflowEvents = [];
interface Props {
events?: WorkflowEvents;
decode?: Snippet;
}

let { events = [], decode }: Props = $props();

let index = 1;
let index = $state(1);
let rawEvent = $derived(fromEventToRawEvent(events[index - 1]));

function handleKeydown(event: KeyboardEvent) {
switch (event.code) {
Expand Down Expand Up @@ -52,7 +60,7 @@
<button
class="caret"
disabled={index === 1}
on:click={() => {
onclick={() => {
index -= 1;
}}
aria-label={translate('common.previous')}
Expand All @@ -67,7 +75,7 @@
<button
class="caret"
disabled={index === events.length}
on:click={() => {
onclick={() => {
index += 1;
}}
aria-label={translate('common.next')}
Expand All @@ -81,31 +89,26 @@
</button>
</div>
</div>
<slot name="decode" />
{@render decode?.()}
</div>
<div class="min-h-screen py-4">
{#if $decodeEventHistory}
{#if $decodeEventHistory && events.length > 0}
{#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={rawEvent}>
{#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}
{#key index}
<CodeBlock
content={stringifyWithBigInt(
fromEventToRawEvent(events[index - 1]),
undefined,
2,
)}
content={stringifyWithBigInt(rawEvent, undefined, 2)}
testId="event-history-json"
copyIconTitle={translate('common.copy-icon-title')}
copySuccessIconTitle={translate('common.copy-success-icon-title')}
Expand Down
Loading
Loading