WIP - download external payloads

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

@@ -182,9 +182,27 @@
       {format(key)}
     </p>
     {#if value?.payloads}
-      <PayloadCodeBlock {value} maxHeight={384} />
+      <PayloadCodeBlock
+        filenameData={{
+          workflowId: workflow,
+          runId: run,
+          eventId: event.id,
+          type: key,
+        }}
+        {value}
+        maxHeight={384}
+      />
     {:else}
-      <PayloadCodeBlock value={codeBlockValue} maxHeight={384} />
+      <PayloadCodeBlock
+        filenameData={{
+          workflowId: workflow,
+          runId: run,
+          eventId: event.id,
+          type: key,
+        }}
+        value={codeBlockValue}
+        maxHeight={384}
+      />
     {/if}
   </div>
   {#if stackTrace}

src/lib/components/payload/payload-code-block.svelte

@@ -1,34 +1,142 @@
 <script lang="ts">
+  import Button from '$lib/holocene/button.svelte';
   import CodeBlock from '$lib/holocene/code-block.svelte';
+  import Icon from '$lib/holocene/icon/icon.svelte';
+  import Link from '$lib/holocene/link.svelte';
+  import Tooltip from '$lib/holocene/tooltip.svelte';
   import { translate } from '$lib/i18n/translate';
-  import type {
-    PayloadContainingObject,
-    PotentiallyDecodable,
+  import { downloadExternalPayloadWithCodec } from '$lib/services/data-encoder';
+  import { codecEndpoint } from '$lib/stores/data-encoder-config';
+  import type { Payload, Payloads } from '$lib/types';
+  import {
+    isExternallyStoredRawPayload,
+    parseRawPayloadToJSON,
+    type PayloadContainingObject,
   } from '$lib/utilities/decode-payload';
+  import { formatBytes } from '$lib/utilities/format-bytes';
+  import { isNetworkError } from '$lib/utilities/is-network-error';
+  import { stringifyWithBigInt } from '$lib/utilities/parse-with-big-int';
 
   import PayloadDecoder from './payload-decoder.svelte';
 
+  type FilenameData = {
+    workflowId: string | undefined;
+    runId: string | undefined;
+    type: 'input' | 'result' | undefined;
+    eventId?: string | undefined;
+  };
+
   interface Props {
-    value: PotentiallyDecodable | PayloadContainingObject;
+    value: Payload | Payloads | PayloadContainingObject;
     maxHeight?: number;
     testId?: string;
+    filenameData?: FilenameData;
   }
 
-  let { value, maxHeight, testId }: Props = $props();
+  let { value, maxHeight, testId, filenameData = undefined }: Props = $props();
+
+  let downloadError: string | undefined = $state(undefined);
+  let downloadLoading: boolean = $state(false);
+
+  const fileName = $derived.by(() => {
+    if (!filenameData) {
+      return 'payload.json';
+    }
+
+    const base = `payload-wf-${filenameData.workflowId}-run-${filenameData.runId}`;
+
+    if (filenameData.eventId) {
+      return `${base}-event-${filenameData.eventId}-${filenameData.type}.json`;
+    }
+
+    return `${base}-${filenameData.type}.json`;
+  });
+
+  const downloadExternalPayload = async (payload: Payload) => {
+    downloadLoading = true;
+    let data: Payloads | undefined = undefined;
+    try {
+      data = await downloadExternalPayloadWithCodec(payload);
+      const parsed = parseRawPayloadToJSON(data.payloads[0]);
+      const content = stringifyWithBigInt(parsed, undefined, 2);
+      const a = document.createElement('a');
+      const file = new Blob([content], { type: 'json/plain' });
+      a.href = URL.createObjectURL(file);
+      a.download = fileName;
+      a.click();
+    } catch (error) {
+      if (isNetworkError(error) && error.statusCode === 404) {
+        downloadError =
+          "Unable to download payload file. Your codec server is connected, but it isn't configured to download from external storage.";
+      } else {
+        downloadError = 'Unable to download payload file.';
+      }
+    } finally {
+      downloadLoading = false;
+    }
+  };
 </script>
 
 <PayloadDecoder {value}>
-  {#snippet children(decodedValue)}
+  {#snippet children(results)}
     <div class="space-y-2">
-      {#each decodedValue as data (data)}
-        <CodeBlock
-          content={data}
-          {maxHeight}
-          copyIconTitle={translate('common.copy-icon-title')}
-          copySuccessIconTitle={translate('common.copy-success-icon-title')}
-          {testId}
-          language="json"
-        />
+      {#each results as result (result.decodedValue)}
+        {#if isExternallyStoredRawPayload(result.decodedValue)}
+          <CodeBlock
+            content={stringifyWithBigInt(result.decodedValue.data)}
+            {maxHeight}
+            copyIconTitle={translate('common.copy-icon-title')}
+            copySuccessIconTitle={translate('common.copy-success-icon-title')}
+            {testId}
+            language="json"
+          >
+            {#snippet headerActions()}
+              <Tooltip
+                width={192}
+                top
+                hide={!!$codecEndpoint}
+                text="Add a codec server with a /download endpoint to download this payload."
+              >
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  leadingIcon="download"
+                  disabled={!$codecEndpoint}
+                  loading={downloadLoading}
+                  on:click={() => downloadExternalPayload(result.originalValue)}
+                >
+                  {formatBytes(
+                    result.decodedValue.externalPayloads?.[0].sizeBytes,
+                  )}
+                </Button>
+              </Tooltip>
+            {/snippet}
+          </CodeBlock>
+          {#if downloadError}
+            <div class="flex items-start gap-2 text-danger">
+              <Icon width={16} height={16} name="exclamation-octagon" />
+              <p class="leading-4">{downloadError}</p>
+            </div>
+          {/if}
+          <p>
+            Payload downloads require a codec server with a <span
+              class="rounded-sm bg-code-block px-1 font-mono">/download</span
+            >
+            endpoint. <Link href="https://docs.temporal.io/codec-server" newTab
+              >How to set up a codec server
+            </Link>
+            <Icon class="inline" name="external-link" />
+          </p>
+        {:else}
+          <CodeBlock
+            content={stringifyWithBigInt(result.decodedValue.data)}
+            {maxHeight}
+            copyIconTitle={translate('common.copy-icon-title')}
+            copySuccessIconTitle={translate('common.copy-success-icon-title')}
+            {testId}
+            language="json"
+          />
+        {/if}
       {/each}
     </div>
   {/snippet}

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

@@ -1,52 +1,102 @@
+<script lang="ts" module>
+  export type DecodedPayloadResult = {
+    decodedValue: ParsedPayload | PayloadContainingObject;
+    originalValue: Payload | PayloadContainingObject;
+  }[];
+</script>
+
 <script lang="ts">
   import { type Snippet } from 'svelte';
 
+  import type { Payload, Payloads } from '$lib/types';
   import {
     decodeEventAttributes,
     decodePayloadAndParseDataToJSON,
     decodePayloadsAndParseDataToJSON,
     isRawPayload,
     isRawPayloads,
+    type ParsedPayload,
     type PayloadContainingObject,
-    type PotentiallyDecodable,
   } from '$lib/utilities/decode-payload';
-  import { stringifyWithBigInt } from '$lib/utilities/parse-with-big-int';
 
-  export const decodePayloadValue = async (
-    value: PotentiallyDecodable | PayloadContainingObject,
-  ): Promise<string[]> => {
+  type T = $$Generic<PayloadContainingObject>;
+
+  const decodePayloadValue = async (
+    value: Payload,
+  ): Promise<DecodedPayloadResult> => {
+    const decodedPayload = await decodePayloadAndParseDataToJSON(value, false);
+    const result = [
+      {
+        decodedValue: decodedPayload,
+        originalValue: value,
+      },
+    ];
+
+    onDecode?.(result);
+    return result;
+  };
+
+  const decodePayloadsValue = async (
+    value: Payloads,
+  ): Promise<DecodedPayloadResult> => {
+    const decodedPayloads = await decodePayloadsAndParseDataToJSON(
+      value,
+      false,
+    );
+    const result = decodedPayloads.map((decodedPayload, idx) => {
+      return {
+        decodedValue: decodedPayload,
+        originalValue: value.payloads[idx],
+      };
+    });
+
+    onDecode?.(result);
+    return result;
+  };
+
+  const decodePayloadContainingObjectValue = async <
+    T extends PayloadContainingObject,
+  >(
+    value: T,
+  ): Promise<DecodedPayloadResult> => {
+    const decodedValue = await decodeEventAttributes(value);
+    const result = [
+      {
+        decodedValue,
+        originalValue: value,
+      },
+    ];
+
+    onDecode?.(result);
+    return result;
+  };
+
+  const decodeValue = (
+    value: Payload | Payloads | T,
+  ): Promise<DecodedPayloadResult> => {
     if (isRawPayload(value)) {
-      const decodedPayloadData = await decodePayloadAndParseDataToJSON(value);
-      const stringified = stringifyWithBigInt(decodedPayloadData);
-      onDecode?.([stringified]);
-      return [stringified];
-    } else if (isRawPayloads(value)) {
-      const parsedPayloadsData = await decodePayloadsAndParseDataToJSON(value);
-      const stringified = parsedPayloadsData.map((data) =>
-        stringifyWithBigInt(data),
-      );
-      onDecode?.(stringified);
-      return stringified;
-    } else {
-      const decoded = await decodeEventAttributes(value);
-      const stringified = stringifyWithBigInt(decoded);
-      onDecode?.([stringified]);
-      return [stringified];
+      return decodePayloadValue(value);
     }
+
+    if (isRawPayloads(value)) {
+      return decodePayloadsValue(value);
+    }
+
+    return decodePayloadContainingObjectValue(value);
   };
 
-  interface Props {
-    value: PotentiallyDecodable | PayloadContainingObject;
-    onDecode?: (decodedPayloads: string[]) => void;
-    children: Snippet<[decodedPayloads: string[]]>;
-    loading?: Snippet;
-  }
+  type Props = {
+    value: Payload | Payloads | T;
+    children: Snippet<[DecodedPayloadResult]>;
+    onDecode?: (result: DecodedPayloadResult) => void;
+    loading?: Snippet<[]>;
+  };
 
-  let { value, onDecode, children, loading }: Props = $props();
+  let { value, children, onDecode, loading }: Props = $props();
 </script>
 
-{#await decodePayloadValue(value)}
+{#await decodeValue(value)}
   {@render loading?.()}
-{:then decodedValue}
-  {@render children(decodedValue)}
+{:then decodeResult}
+  {@render children(decodeResult)}
 {/await}

src/lib/components/payload/payload-inline.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { PotentiallyDecodable } from '$lib/utilities/decode-payload';
+  import { stringifyWithBigInt } from '$lib/utilities/parse-with-big-int';
 
   import PayloadDecoder from './payload-decoder.svelte';
 
@@ -13,15 +14,13 @@
 </script>
 
 <PayloadDecoder {value}>
-  {#snippet children(decodedValue)}
+  {#snippet children(result)}
+    {@const stringifiedData = stringifyWithBigInt(result[0].decodedValue.data)}
     <div
       class="overflow-hidden border border-subtle bg-code-block px-1 py-0.5 font-mono text-xs text-primary {className}"
     >
       <code>
-        <pre class="truncate">{(decodedValue[0] ?? '').slice(
-            0,
-            truncateAt,
-          )}</pre>
+        <pre class="truncate">{stringifiedData.slice(0, truncateAt)}</pre>
       </code>
     </div>
   {/snippet}

src/lib/components/schedule/schedule-form/schedule-input-payload.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
   import type { Writable } from 'svelte/store';
 
-  import PayloadDecoder from '$lib/components/payload/payload-decoder.svelte';
+  import PayloadDecoder, {
+    type DecodedPayloadResult,
+  } from '$lib/components/payload/payload-decoder.svelte';
   import PayloadInputWithEncoding from '$lib/components/payload-input-with-encoding.svelte';
   import Button from '$lib/holocene/button.svelte';
   import { translate } from '$lib/i18n/translate';
@@ -35,8 +37,9 @@
   let initialMessageType = $state('');
   let loading = $state(true);
 
-  const setInitialInput = (decodedValue: string[]): void => {
-    initialInput = decodedValue[0];
+  const setInitialInput = (result: DecodedPayloadResult): void => {
+    initialInput = result[0].decodedValue.data;
+
     input = initialInput;
     let currentEncoding: PayloadInputEncoding = 'json/plain';
     let currentMessageType = '';