Skip to content

Commit 66a64c4

Browse files
laurakwhitlaurakwhit
authored
Fix initial load of JSON view not rendering event (#2825)
* Update PayloadDecoder to svelte 5 syntax and make decodePayloads reactive * Update PayloadDecoder to use snippets * Update PayloadDecoder in PendingActivityCard * Revert to onMount and add events length check to workflow json navigator
1 parent 98339cb commit 66a64c4

File tree

10 files changed

+163
-138
lines changed

10 files changed

+163
-138
lines changed

‎src/lib/components/event/event-card.svelte‎

Lines changed: 26 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -169,35 +169,40 @@
169169
{format(key)}
170170
</p>
171171
{#if value?.payloads}
172-
<PayloadDecoder {value} key="payloads" let:decodedValue>
173-
<CodeBlock
174-
content={decodedValue}
175-
maxHeight={384}
176-
copyIconTitle={translate('common.copy-icon-title')}
177-
copySuccessIconTitle={translate('common.copy-success-icon-title')}
178-
/>
172+
<PayloadDecoder {value} key="payloads">
173+
{#snippet children(decodedValue)}
174+
<CodeBlock
175+
content={decodedValue}
176+
maxHeight={384}
177+
copyIconTitle={translate('common.copy-icon-title')}
178+
copySuccessIconTitle={translate('common.copy-success-icon-title')}
179+
/>
180+
{/snippet}
179181
</PayloadDecoder>
180182
{:else if key === 'searchAttributes'}
181183
<PayloadDecoder
182184
key="searchAttributes"
183185
value={{ searchAttributes: codeBlockValue }}
184-
let:decodedValue
185186
>
186-
<CodeBlock
187-
content={decodedValue}
188-
maxHeight={384}
189-
copyIconTitle={translate('common.copy-icon-title')}
190-
copySuccessIconTitle={translate('common.copy-success-icon-title')}
191-
/>
187+
{#snippet children(decodedValue)}
188+
<CodeBlock
189+
content={decodedValue}
190+
maxHeight={384}
191+
copyIconTitle={translate('common.copy-icon-title')}
192+
copySuccessIconTitle={translate('common.copy-success-icon-title')}
193+
/>
194+
{/snippet}
192195
</PayloadDecoder>
193196
{:else}
194-
<PayloadDecoder value={codeBlockValue} let:decodedValue>
195-
<CodeBlock
196-
content={decodedValue}
197-
maxHeight={384}
198-
copyIconTitle={translate('common.copy-icon-title')}
199-
copySuccessIconTitle={translate('common.copy-success-icon-title')}
200-
/>
197+
<PayloadDecoder value={codeBlockValue}>
198+
{#snippet children(decodedValue)}
199+
<CodeBlock
200+
content={decodedValue}
201+
maxHeight={384}
202+
copyIconTitle={translate('common.copy-icon-title')}
203+
copySuccessIconTitle={translate('common.copy-success-icon-title')}
204+
/>
205+
{/snippet}
201206
</PayloadDecoder>
202207
{/if}
203208
</div>

‎src/lib/components/event/event-details-row.svelte‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,14 @@
3333
<div
3434
class="flex max-w-sm items-center justify-between gap-2 overflow-hidden pr-1 xl:flex-nowrap"
3535
>
36-
<PayloadDecoder {value} key="payloads" let:decodedValue>
37-
<div class={merge('payload', $$props.class)}>
38-
<code><pre class="truncate">{decodedValue.slice(0, 60)}</pre></code>
39-
</div>
36+
<PayloadDecoder {value} key="payloads">
37+
{#snippet children(decodedValue)}
38+
<div class={merge('payload', $$props.class)}>
39+
<code>
40+
<pre class="truncate">{decodedValue.slice(0, 60)}</pre>
41+
</code>
42+
</div>
43+
{/snippet}
4044
</PayloadDecoder>
4145
</div>
4246
{:else if linkType !== 'none'}

‎src/lib/components/event/payload-decoder.svelte‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script lang="ts">
2-
import { onMount } from 'svelte';
2+
import { onMount, type Snippet } from 'svelte';
33
44
import { page } from '$app/stores';
55
@@ -18,16 +18,17 @@
1818
} from '$lib/utilities/get-codec';
1919
import { stringifyWithBigInt } from '$lib/utilities/parse-with-big-int';
2020
21-
export let value:
22-
| PotentiallyDecodable
23-
| EventAttribute
24-
| WorkflowEvent
25-
| Memo;
26-
export let key = '';
27-
export let onDecode: (decodedValue: string) => void | undefined = undefined;
21+
interface Props {
22+
value: PotentiallyDecodable | EventAttribute | WorkflowEvent | Memo;
23+
key?: string;
24+
onDecode?: (decodedValue: string) => void;
25+
children: Snippet<[decodedValue: string]>;
26+
}
27+
28+
let { children, value, key = '', onDecode }: Props = $props();
2829
2930
let keyedValue = key && value?.[key] ? value[key] : value;
30-
let decodedValue = stringifyWithBigInt(keyedValue);
31+
let decodedValue = $state(stringifyWithBigInt(keyedValue));
3132
3233
onMount(() => {
3334
decodePayloads(value);
@@ -70,4 +71,4 @@
7071
};
7172
</script>
7273

73-
<slot {decodedValue} />
74+
{@render children(decodedValue)}

‎src/lib/components/lines-and-dots/svg/group-details-text.svelte‎

Lines changed: 26 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -23,36 +23,41 @@
2323

2424
{#if typeof value === 'object'}
2525
{#if value?.payloads}
26-
<PayloadDecoder {value} key="payloads" let:decodedValue {onDecode}>
27-
{#key decodedValue}
28-
<CodeBlock
29-
content={decodedValue}
30-
maxHeight={staticCodeBlockHeight - fontSizeRatio}
31-
/>
32-
{/key}
26+
<PayloadDecoder {value} key="payloads" {onDecode}>
27+
{#snippet children(decodedValue)}
28+
{#key decodedValue}
29+
<CodeBlock
30+
content={decodedValue}
31+
maxHeight={staticCodeBlockHeight - fontSizeRatio}
32+
/>
33+
{/key}
34+
{/snippet}
3335
</PayloadDecoder>
3436
{:else if key === 'searchAttributes'}
3537
<PayloadDecoder
3638
key="searchAttributes"
3739
value={{ searchAttributes: codeBlockValue }}
38-
let:decodedValue
3940
{onDecode}
4041
>
41-
{#key decodedValue}
42-
<CodeBlock
43-
content={decodedValue}
44-
maxHeight={staticCodeBlockHeight - fontSizeRatio}
45-
/>
46-
{/key}
42+
{#snippet children(decodedValue)}
43+
{#key decodedValue}
44+
<CodeBlock
45+
content={decodedValue}
46+
maxHeight={staticCodeBlockHeight - fontSizeRatio}
47+
/>
48+
{/key}
49+
{/snippet}
4750
</PayloadDecoder>
4851
{:else}
49-
<PayloadDecoder value={codeBlockValue} let:decodedValue {onDecode}>
50-
{#key decodedValue}
51-
<CodeBlock
52-
content={decodedValue}
53-
maxHeight={staticCodeBlockHeight - fontSizeRatio}
54-
/>
55-
{/key}
52+
<PayloadDecoder value={codeBlockValue} {onDecode}>
53+
{#snippet children(decodedValue)}
54+
{#key decodedValue}
55+
<CodeBlock
56+
content={decodedValue}
57+
maxHeight={staticCodeBlockHeight - fontSizeRatio}
58+
/>
59+
{/key}
60+
{/snippet}
5661
</PayloadDecoder>
5762
{/if}
5863
{:else if linkType !== 'none'}

‎src/lib/components/workflow/client-actions/update-confirmation-modal.svelte‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -172,8 +172,10 @@
172172
{#if success}
173173
<Alert intent="success" title="Success">
174174
{#if success?.payloads?.[0] && success.payloads[0].data}
175-
<PayloadDecoder value={success.payloads[0]} let:decodedValue>
176-
<CodeBlock class="mt-4" content={decodedValue} language="text" />
175+
<PayloadDecoder value={success.payloads[0]}>
176+
{#snippet children(decodedValue)}
177+
<CodeBlock class="mt-4" content={decodedValue} language="text" />
178+
{/snippet}
177179
</PayloadDecoder>
178180
{/if}
179181
</Alert>

‎src/lib/components/workflow/input-and-results-payload.svelte‎

Lines changed: 22 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -53,35 +53,41 @@
5353
{#if content}
5454
{#key $minimizeEventView}
5555
{#if payloadsSize > 0}
56-
<PayloadDecoder value={parsedContent} key="payloads" let:decodedValue>
57-
{#if payloadsSize > 1}
58-
{#each parsePayloads(decodedValue) as decodedContent}
56+
<PayloadDecoder value={parsedContent} key="payloads">
57+
{#snippet children(decodedValue)}
58+
{#if payloadsSize > 1}
59+
{#each parsePayloads(decodedValue) as decodedContent}
60+
<CodeBlock
61+
content={stringifyWithBigInt(decodedContent)}
62+
copyIconTitle={translate('common.copy-icon-title')}
63+
copySuccessIconTitle={translate(
64+
'common.copy-success-icon-title',
65+
)}
66+
maxHeight={300}
67+
/>
68+
{/each}
69+
{:else}
5970
<CodeBlock
60-
content={stringifyWithBigInt(decodedContent)}
71+
content={decodedValue}
6172
copyIconTitle={translate('common.copy-icon-title')}
6273
copySuccessIconTitle={translate(
6374
'common.copy-success-icon-title',
6475
)}
6576
maxHeight={300}
6677
/>
67-
{/each}
68-
{:else}
78+
{/if}
79+
{/snippet}
80+
</PayloadDecoder>
81+
{:else}
82+
<PayloadDecoder value={parseWithBigInt(content)}>
83+
{#snippet children(decodedValue)}
6984
<CodeBlock
7085
content={decodedValue}
7186
copyIconTitle={translate('common.copy-icon-title')}
7287
copySuccessIconTitle={translate('common.copy-success-icon-title')}
7388
maxHeight={300}
7489
/>
75-
{/if}
76-
</PayloadDecoder>
77-
{:else}
78-
<PayloadDecoder value={parseWithBigInt(content)} let:decodedValue>
79-
<CodeBlock
80-
content={decodedValue}
81-
copyIconTitle={translate('common.copy-icon-title')}
82-
copySuccessIconTitle={translate('common.copy-success-icon-title')}
83-
maxHeight={300}
84-
/>
90+
{/snippet}
8591
</PayloadDecoder>
8692
{/if}
8793
{/key}

‎src/lib/components/workflow/pending-activity/pending-activity-card.svelte‎

Lines changed: 19 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -167,17 +167,15 @@
167167
<p class="text-sm text-secondary/80">
168168
{translate('workflows.heartbeat-details')}
169169
</p>
170-
<PayloadDecoder
171-
value={activity.heartbeatDetails}
172-
let:decodedValue
173-
key="payloads"
174-
>
175-
<CodeBlock
176-
content={decodedValue}
177-
maxHeight={384}
178-
copyIconTitle={translate('common.copy-icon-title')}
179-
copySuccessIconTitle={translate('common.copy-success-icon-title')}
180-
/>
170+
<PayloadDecoder value={activity.heartbeatDetails} key="payloads">
171+
{#snippet children(decodedValue)}
172+
<CodeBlock
173+
content={decodedValue}
174+
maxHeight={384}
175+
copyIconTitle={translate('common.copy-icon-title')}
176+
copySuccessIconTitle={translate('common.copy-success-icon-title')}
177+
/>
178+
{/snippet}
181179
</PayloadDecoder>
182180
</div>
183181
{/snippet}
@@ -193,16 +191,17 @@
193191
{#key activity.attempt}
194192
<PayloadDecoder
195193
value={activity.lastFailure as PotentiallyDecodable}
196-
let:decodedValue
197194
>
198-
<CodeBlock
199-
content={decodedValue}
200-
maxHeight={384}
201-
copyIconTitle={translate('common.copy-icon-title')}
202-
copySuccessIconTitle={translate(
203-
'common.copy-success-icon-title',
204-
)}
205-
/>
195+
{#snippet children(decodedValue)}
196+
<CodeBlock
197+
content={decodedValue}
198+
maxHeight={384}
199+
copyIconTitle={translate('common.copy-icon-title')}
200+
copySuccessIconTitle={translate(
201+
'common.copy-success-icon-title',
202+
)}
203+
/>
204+
{/snippet}
206205
</PayloadDecoder>
207206
{/key}
208207
{:else}

‎src/lib/components/workflow/workflow-json-navigator.svelte‎

Lines changed: 24 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
<script lang="ts">
2+
import type { Snippet } from 'svelte';
3+
24
import CodeBlock from '$lib/holocene/code-block.svelte';
35
import RangeInput from '$lib/holocene/input/range-input.svelte';
46
import { translate } from '$lib/i18n/translate';
@@ -9,9 +11,15 @@
911
1012
import PayloadDecoder from '../event/payload-decoder.svelte';
1113
12-
export let events: WorkflowEvents = [];
14+
interface Props {
15+
events?: WorkflowEvents;
16+
decode?: Snippet;
17+
}
18+
19+
let { events = [], decode }: Props = $props();
1320
14-
let index = 1;
21+
let index = $state(1);
22+
let rawEvent = $derived(fromEventToRawEvent(events[index - 1]));
1523
1624
function handleKeydown(event: KeyboardEvent) {
1725
switch (event.code) {
@@ -52,7 +60,7 @@
5260
<button
5361
class="caret"
5462
disabled={index === 1}
55-
on:click={() => {
63+
onclick={() => {
5664
index -= 1;
5765
}}
5866
aria-label={translate('common.previous')}
@@ -67,7 +75,7 @@
6775
<button
6876
class="caret"
6977
disabled={index === events.length}
70-
on:click={() => {
78+
onclick={() => {
7179
index += 1;
7280
}}
7381
aria-label={translate('common.next')}
@@ -81,31 +89,26 @@
8189
</button>
8290
</div>
8391
</div>
84-
<slot name="decode" />
92+
{@render decode?.()}
8593
</div>
8694
<div class="min-h-screen py-4">
87-
{#if $decodeEventHistory}
95+
{#if $decodeEventHistory && events.length > 0}
8896
{#key [index, $decodeEventHistory]}
89-
<PayloadDecoder
90-
value={fromEventToRawEvent(events[index - 1])}
91-
let:decodedValue
92-
>
93-
<CodeBlock
94-
content={decodedValue}
95-
testId="event-history-json"
96-
copyIconTitle={translate('common.copy-icon-title')}
97-
copySuccessIconTitle={translate('common.copy-success-icon-title')}
98-
/>
97+
<PayloadDecoder value={rawEvent}>
98+
{#snippet children(decodedValue)}
99+
<CodeBlock
100+
content={decodedValue}
101+
testId="event-history-json"
102+
copyIconTitle={translate('common.copy-icon-title')}
103+
copySuccessIconTitle={translate('common.copy-success-icon-title')}
104+
/>
105+
{/snippet}
99106
</PayloadDecoder>
100107
{/key}
101108
{:else}
102109
{#key index}
103110
<CodeBlock
104-
content={stringifyWithBigInt(
105-
fromEventToRawEvent(events[index - 1]),
106-
undefined,
107-
2,
108-
)}
111+
content={stringifyWithBigInt(rawEvent, undefined, 2)}
109112
testId="event-history-json"
110113
copyIconTitle={translate('common.copy-icon-title')}
111114
copySuccessIconTitle={translate('common.copy-success-icon-title')}

0 commit comments

Comments
 (0)