Add upload file button to payload-input, base64 decode all payloads

temporalio · Oct 7, 2024 · 3e3652f · 3e3652f
1 parent c418451
commit 3e3652f
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 66 deletions.
diff --git a/src/lib/components/payload-input.svelte b/src/lib/components/payload-input.svelte
@@ -10,9 +10,11 @@
   import Alert from '$lib/holocene/alert.svelte';
   import Card from '$lib/holocene/card.svelte';
   import CodeBlock from '$lib/holocene/code-block.svelte';
+  import FileInput from '$lib/holocene/file-input.svelte';
   import Label from '$lib/holocene/label.svelte';
   import RadioGroup from '$lib/holocene/radio-input/radio-group.svelte';
   import RadioInput from '$lib/holocene/radio-input/radio-input.svelte';
+  import Tooltip from '$lib/holocene/tooltip.svelte';
   import { translate } from '$lib/i18n/translate';
 
   export let input: string;
@@ -21,16 +23,22 @@
   export let resetValues = false;
 
   let codeBlock: CodeBlock;
+  let uploaded = false;
+
+  $: error = !isValidInput(input);
+
+  $: {
+    if (resetValues) {
+      clearValues();
+    }
+  }
 
   const handleInputChange = (event: CustomEvent<string>): void => {
     input = event.detail;
   };
 
   const isValidInput = (value: string) => {
-    if (!input) {
-      return true;
-    }
-
+    if (!input) return true;
     try {
       JSON.parse(value);
       return true;
@@ -39,27 +47,29 @@
     }
   };
 
-  $: error = !isValidInput(input);
-
   const clearValues = () => {
     $encoding = 'json/plain';
     input = '';
     codeBlock?.resetView(input);
-    input = '';
+    uploaded = false;
   };
 
-  $: {
-    if (resetValues) {
-      clearValues();
-    }
-  }
+  const onUpload = (uploadInput: string) => {
+    input = uploadInput;
+    uploaded = true;
+  };
 
   onDestroy(() => {
     clearValues();
   });
 </script>
 
-<h5>Input</h5>
+<div class="flex items-center justify-between">
+  <h5>Input</h5>
+  <span class="text-xs font-light italic">
+    {translate('workflows.signal-payload-input-label-hint')}
+  </span>
+</div>
 <Card class="flex flex-col gap-2">
   <div class="flex items-center justify-between">
     <RadioGroup description={'Encoding'} bind:group={encoding} name="encoding">
@@ -70,27 +80,26 @@
         label="json/protobuf"
       />
     </RadioGroup>
-    <slot />
+    <Tooltip text={translate('common.upload-json')} left>
+      <FileInput id="start-workflow-input-file-upload" {onUpload} />
+    </Tooltip>
   </div>
   <div class="flex flex-col gap-2">
-    <div class="flex items-center gap-1">
-      <Label
-        for="payload-input"
-        label={translate('workflows.signal-payload-input-label')}
-      />
-      <span class="text-xs font-light italic">
-        {translate('workflows.signal-payload-input-label-hint')}
-      </span>
-    </div>
-    <CodeBlock
-      id="payload-input"
-      maxHeight={320}
-      content={input}
-      on:change={handleInputChange}
-      editable
-      copyable={false}
-      bind:this={codeBlock}
+    <Label
+      for="payload-input"
+      label={translate('workflows.signal-payload-input-label')}
     />
+    {#key uploaded}
+      <CodeBlock
+        id="payload-input"
+        maxHeight={320}
+        content={input}
+        on:change={handleInputChange}
+        editable
+        copyable={false}
+        bind:this={codeBlock}
+      />
+    {/key}
     {#if error}
       <Alert intent="error" title={translate('common.input-valid-json')} />
     {/if}

diff --git a/src/lib/holocene/file-input.svelte b/src/lib/holocene/file-input.svelte
@@ -7,7 +7,7 @@
   export let accept = '.json';
   export let onUpload: (input: string) => void;
 
-  const onFileSelect = async (e: Event) => {
+  const onFileSelect = (e: Event) => {
     const target = e.target as HTMLInputElement;
     const file = target?.files?.[0];
     const reader = new FileReader();

diff --git a/src/lib/i18n/locales/en/workflows.ts b/src/lib/i18n/locales/en/workflows.ts
@@ -103,7 +103,7 @@ export const Strings = {
     'Are you sure you want to terminate this workflow? This action cannot be undone.',
   'signal-modal-title': 'Send a Signal',
   'signal-name-label': 'Signal name',
-  'signal-payload-input-label': 'Payload',
+  'signal-payload-input-label': 'Data',
   'signal-payload-input-label-hint': '(only single JSON payload supported)',
   'cancel-request-sent': 'Cancel Request Sent',
   'cancel-request-sent-description':

diff --git a/src/lib/pages/start-workflow.svelte b/src/lib/pages/start-workflow.svelte
@@ -13,10 +13,8 @@
   import AddSearchAttributes from '$lib/components/workflow/add-search-attributes.svelte';
   import Alert from '$lib/holocene/alert.svelte';
   import Button from '$lib/holocene/button.svelte';
-  import FileInput from '$lib/holocene/file-input.svelte';
   import Input from '$lib/holocene/input/input.svelte';
   import Link from '$lib/holocene/link.svelte';
-  import Tooltip from '$lib/holocene/tooltip.svelte';
   import { translate } from '$lib/i18n/translate';
   import { getPollers } from '$lib/services/pollers-service';
   import {
@@ -110,7 +108,6 @@
       workflowType: type,
     });
     input = initialValues.input;
-    $encoding = initialValues.encoding as PayloadInputEncoding;
     inputRetrieved = Date.now();
     if (initialValues?.searchAttributes) {
       const customSAKeys = Object.keys($customSearchAttributes);
@@ -136,11 +133,6 @@
     });
   };
 
-  const onUpload = (uploadInput: string) => {
-    input = uploadInput;
-    inputRetrieved = Date.now();
-  };
-
   const inputIsJSON = (input: string) => {
     try {
       JSON.parse(input);
@@ -233,11 +225,7 @@
       on:blur={(e) => onInputChange(e, 'workflowType')}
     />
     {#key inputRetrieved}
-      <PayloadInput bind:input bind:encoding>
-        <Tooltip text={translate('common.upload-json')} left>
-          <FileInput id="start-workflow-input-file-upload" {onUpload} />
-        </Tooltip>
-      </PayloadInput>
+      <PayloadInput bind:input bind:encoding />
     {/key}
     {#if viewAdvancedOptions}
       <AddSearchAttributes bind:attributesToAdd={searchAttributes} />

diff --git a/src/lib/services/workflow-service.ts b/src/lib/services/workflow-service.ts
@@ -35,7 +35,6 @@ import type {
   ListWorkflowExecutionsResponse,
   WorkflowExecution,
 } from '$lib/types/workflows';
-import { atob } from '$lib/utilities/atob';
 import {
   cloneAllPotentialPayloadsWithCodec,
   type PotentiallyDecodable,
@@ -554,15 +553,13 @@ export const fetchInitialValuesForStartWorkflow = async ({
   workflowId?: string;
 }): Promise<{
   input: string;
-  encoding: string;
   searchAttributes: Record<string, string | Payload> | undefined;
 }> => {
   const handleError: ErrorCallback = (err) => {
     console.error(err);
   };
   const emptyValues = {
     input: '',
-    encoding: 'json/plain',
     searchAttributes: undefined,
   };
   try {
@@ -602,15 +599,8 @@ export const fetchInitialValuesForStartWorkflow = async ({
     )) as PotentiallyDecodable;
 
     const input = stringifyWithBigInt(convertedAttributes?.payloads[0]);
-    const encoding = atob(
-      String(
-        convertedAttributes?.payloads[0]?.metadata?.encoding ?? 'json/plain',
-      ),
-    );
-
     return {
       input,
-      encoding,
       searchAttributes: workflow?.searchAttributes?.indexedFields,
     };
   } catch (e) {

diff --git a/src/lib/utilities/decode-payload.ts b/src/lib/utilities/decode-payload.ts
@@ -59,18 +59,15 @@ export function decodePayload(
     return payload;
   }
 
-  const encoding = atob(String(payload?.metadata?.encoding ?? ''));
-
-  if (encoding?.startsWith('json/')) {
-    try {
-      const data = parseWithBigInt(atob(String(payload?.data ?? '')));
-      return returnDataOnly ? data : { ...payload, data };
-    } catch (_e) {
-      console.warn('Could not parse payload: ', _e);
-      // Couldn't correctly decode this just let the user deal with the data as is
-    }
+  try {
+    const data = parseWithBigInt(atob(String(payload?.data ?? '')));
+    return returnDataOnly ? data : { ...payload, data };
+  } catch (_e) {
+    console.warn('Could not parse payload: ', _e);
+    // Couldn't correctly decode this just let the user deal with the data as is
   }
 
+  const encoding = atob(String(payload?.metadata?.encoding ?? ''));
   if (encoding === 'binary/null') {
     return returnDataOnly ? null : { ...payload, data: null };
   }