Fix decoding payloads for user metadata (#3328)

* add workflow with user metadata

* base64 decode user metadata payloads and remove unused component

* fix imports

* fix workflow runner for ci

* reorganize test workflows and add test for user metadata

* fix scripts

* don't wait for wf results in e2e test setup

* add better tests

* add error case test

Author: rossedfort

package.json

@@ -73,8 +73,7 @@
     "stylelint": "stylelint \"src/**/*.{css,postcss,svelte}\"",
     "stylelint:fix": "stylelint --fix \"src/**/*.{css,postcss,svelte}\"",
     "generate:locales": "esno scripts/generate-locales.ts",
-    "e2e-workflows": "esno scripts/e2e-workflows.ts",
-    "payload-coverage-workflow": "esno scripts/payload-coverage-workflow.ts",
+    "run-workflows": "esno scripts/run-workflows.ts",
     "audit:tailwind": "esno scripts/audit-tailwind-colors",
     "audit:holocene-props": "esno scripts/generate-holocene-props.ts",
     "validate:versions": "./scripts/validate-versions.sh"

scripts/payload-coverage-workflow.ts

@@ -1,5 +1,5 @@
 import { connect, startWorkflows } from '../temporal/client';
-import { runWorkerUntil } from '../temporal/workers';
+import { runWorkerUntil } from '../temporal/worker';
 
 async function main() {
   const client = await connect();

scripts/e2e-workflows.ts scripts/run-workflows.tsscripts/e2e-workflows.ts renamed to scripts/run-workflows.ts

@@ -10,15 +10,20 @@
   let { summary, details }: Props = $props();
 </script>
 
-<div class="flex h-full flex-1 flex-col bg-primary">
+<div data-testid="user-metadata" class="flex h-full flex-1 flex-col bg-primary">
   <div>
     <div class="surface-information w-full px-6 py-2">
       <h3 data-testid="user-metadata-summary-heading">
         {translate('workflows.summary')}
       </h3>
     </div>
     {#if summary}
-      <Markdown class="p-3" overrideTheme="primary" content={summary} />
+      <Markdown
+        frameId="user-metadata-summary"
+        class="p-3"
+        overrideTheme="primary"
+        content={summary}
+      />
     {:else}
       <div class="py-6 pl-6 text-secondary/70">
         <p class="text-sm italic">
@@ -34,7 +39,12 @@
       </h3>
     </div>
     {#if details}
-      <Markdown class="p-3" overrideTheme="primary" content={details} />
+      <Markdown
+        frameId="user-metadata-details"
+        class="p-3"
+        overrideTheme="primary"
+        content={details}
+      />
     {:else}
       <div class="py-6 pl-6 text-secondary/70">
         <p class="text-sm italic">

src/lib/components/user-metadata.svelte

@@ -85,6 +85,11 @@
     </div>
   </div>
   {#key currentDetails}
-    <Markdown class="p-3" overrideTheme="primary" content={currentDetails} />
+    <Markdown
+      frameId="user-metadata-current-details"
+      class="p-3"
+      overrideTheme="primary"
+      content={currentDetails}
+    />
   {/key}
 </div>

src/lib/components/workflow/metadata/metadata-events.svelte

@@ -16,9 +16,15 @@
       | 'details'
       | ''
       | undefined;
+    frameId?: string;
   }
 
-  let { content, class: className = '', overrideTheme = '' }: Props = $props();
+  let {
+    content,
+    class: className = '',
+    overrideTheme = '',
+    frameId = '',
+  }: Props = $props();
 
   let iframe: HTMLIFrameElement | null = $state(null);
 
@@ -65,5 +71,6 @@
     title="output"
     class="w-full"
     src={previewPath}
+    id={frameId}
   ></iframe>
 </section>

src/lib/components/workflow/metadata/workflow-current-details.svelte

@@ -211,7 +211,7 @@ export const decodeUserMetadata = async (
   try {
     const data = await decodePayloadsWithRemoteCodec([payload]);
     const result = data[0];
-    return result || '';
+    return parseRawPayloadToJSON(result) || '';
   } catch {
     return '';
   }

src/lib/holocene/markdown-editor/preview.svelte

@@ -7,6 +7,7 @@ import {
   type PayloadCoverageResult,
   PayloadCoverageWorkflow,
   RunningWorkflow,
+  UserMetadataWorkflow,
   Workflow,
 } from './workflows';
 
@@ -33,7 +34,8 @@ const workflows: WorkflowHandle[] = [];
 
 export const startWorkflows = async (
   client: Client,
-): Promise<(string | number | void)[]> => {
+  config: { waitForResult?: boolean } = { waitForResult: true },
+): Promise<(string | number | PayloadCoverageResult)[]> => {
   const wf1 = await client.workflow.start(Workflow, {
     taskQueue: 'e2e-1',
     args: ['Plain text input 1'],
@@ -58,15 +60,15 @@ export const startWorkflows = async (
     workflowId: 'running-workflow',
   });
 
-  workflows.push(wf1, wf2, wf3, wf4);
-
-  return Promise.all([wf1.result(), wf3.result()]);
-};
+  const wf5 = await client.workflow.start(UserMetadataWorkflow, {
+    taskQueue: 'e2e-1',
+    args: ['Plain text input 5'],
+    workflowId: 'user-metadata-workflow',
+    staticSummary: '# Summary\n **this is the summary**',
+    staticDetails: '# Details\n **these are the details**',
+  });
 
-export const startPayloadCoverageWorkflow = async (
-  client: Client,
-): Promise<PayloadCoverageResult> => {
-  const wf = await client.workflow.start(PayloadCoverageWorkflow, {
+  const wf6 = await client.workflow.start(PayloadCoverageWorkflow, {
     taskQueue: 'e2e-1',
     workflowId: 'payload-coverage-workflow',
     args: [
@@ -98,9 +100,11 @@ export const startPayloadCoverageWorkflow = async (
     },
   });
 
-  workflows.push(wf);
-  console.log(`✨ started payload-coverage-workflow (${wf.workflowId})`);
-  return wf.result();
+  workflows.push(wf1, wf2, wf3, wf4, wf5, wf6);
+
+  if (config?.waitForResult) {
+    return Promise.all(workflows.map((wf) => wf.result()));
+  }
 };
 
 export const stopWorkflows = (): Promise<void[]> => {