Refactor out payload inputs to its own component and add encoding field (#2370)

* Refactor out payload inputs to its own component and add encoding field to set encoding

* Pass encoding to workflow start

* Use RadioGroup for encoding type

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

* Update e2e test with new id

Author: Alex-Tideman

src/lib/components/payload-input.svelte

@@ -0,0 +1,107 @@
+<script context="module" lang="ts">
+  export type PayloadInputEncoding = 'json/plain' | 'json/protobuf';
+</script>
+
+<script lang="ts">
+  import { type Writable } from 'svelte/store';
+
+  import { onDestroy } from 'svelte';
+
+  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;
+  export let encoding: Writable<PayloadInputEncoding>;
+  export let error = false;
+  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;
+    try {
+      JSON.parse(value);
+      return true;
+    } catch (e) {
+      return false;
+    }
+  };
+
+  const clearValues = () => {
+    $encoding = 'json/plain';
+    input = '';
+    codeBlock?.resetView(input);
+    uploaded = false;
+  };
+
+  const onUpload = (uploadInput: string) => {
+    input = uploadInput;
+    uploaded = true;
+  };
+
+  onDestroy(() => {
+    clearValues();
+  });
+</script>
+
+<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">
+      <RadioInput id="json/plain" value="json/plain" label="json/plain" />
+      <RadioInput
+        id="json/protobuf"
+        value="json/protobuf"
+        label="json/protobuf"
+      />
+    </RadioGroup>
+    <Tooltip text={translate('common.upload-json')} left>
+      <FileInput id="start-workflow-input-file-upload" {onUpload} />
+    </Tooltip>
+  </div>
+  <div class="flex flex-col gap-2">
+    <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}
+  </div>
+</Card>

src/lib/components/schedule/schedule-form-view.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { writable, type Writable } from 'svelte/store';
+
   import { onDestroy } from 'svelte';
 
   import { page } from '$app/stores';
@@ -24,6 +26,7 @@
   } from '$lib/utilities/route-for';
   import { writeActionsAreAllowed } from '$lib/utilities/write-actions-are-allowed';
 
+  import type { PayloadInputEncoding } from '../payload-input.svelte';
   import AddSearchAttributes from '../workflow/add-search-attributes.svelte';
 
   import ScheduleInputPayload from './schedule-input-payload.svelte';
@@ -70,6 +73,7 @@
   let workflowId = decodedWorkflow?.workflowId ?? '';
   let taskQueue = decodedWorkflow?.taskQueue?.name ?? '';
   let input = '';
+  let encoding: Writable<PayloadInputEncoding> = writable('json/plain');
   let daysOfWeek: string[] = [];
   let daysOfMonth: number[] = [];
   let months: string[] = [];
@@ -90,6 +94,7 @@
       workflowId,
       taskQueue,
       input,
+      encoding: $encoding,
       hour,
       minute,
       second,
@@ -163,7 +168,6 @@
       <h1>{title}</h1>
     </header>
     <form class="mb-4 flex w-full flex-col gap-4 md:w-2/3 xl:w-1/2">
-      <Alert intent="error" title={$error} hidden={!$error} />
       <div class="w-full">
         <Input
           id="name"
@@ -212,8 +216,8 @@
       </div>
       <ScheduleInputPayload
         bind:input
+        bind:encoding
         payloads={schedule?.action?.startWorkflow?.input}
-        error={errors['input']}
       />
       <AddSearchAttributes
         bind:attributesToAdd={searchAttributesInput}
@@ -243,6 +247,7 @@
           >
         </div>
       </SchedulesCalendarView>
+      <Alert intent="error" title={$error} hidden={!$error} />
     </form>
   {/if}
 </div>

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

@@ -1,45 +1,34 @@
 <script lang="ts">
-  import CodeBlock from '$lib/holocene/code-block.svelte';
-  import Label from '$lib/holocene/label.svelte';
-  import { translate } from '$lib/i18n/translate';
+  import type { Writable } from 'svelte/store';
+
   import type { Payloads } from '$lib/types';
+  import { atob } from '$lib/utilities/atob';
   import { getSinglePayload } from '$lib/utilities/encode-payload';
 
   import PayloadDecoder from '../event/payload-decoder.svelte';
+  import PayloadInput, {
+    type PayloadInputEncoding,
+  } from '../payload-input.svelte';
 
   export let input: string;
+  export let encoding: Writable<PayloadInputEncoding>;
   export let payloads: Payloads;
-  export let error = false;
 
-  const handleInputChange = (event: CustomEvent<string>) => {
-    input = event.detail;
-  };
+  let loading = true;
 
   const setInitialInput = (decodedValue: string): void => {
     input = getSinglePayload(decodedValue);
+    $encoding = atob(
+      String(payloads?.payloads[0]?.metadata?.encoding ?? 'json/plain'),
+    ) as PayloadInputEncoding;
+    loading = false;
   };
 </script>
 
 <div class="flex flex-col gap-1">
-  <Label for="schedule-input" label={translate('workflows.input')} />
-  <PayloadDecoder
-    value={payloads}
-    let:decodedValue
-    key="payloads"
-    onDecode={setInitialInput}
-  >
-    {#key decodedValue}
-      <CodeBlock
-        id="schedule-input"
-        maxHeight={320}
-        content={getSinglePayload(decodedValue)}
-        on:change={handleInputChange}
-        editable
-        copyable={false}
-      />
+  <PayloadDecoder value={payloads} key="payloads" onDecode={setInitialInput}>
+    {#key loading}
+      <PayloadInput bind:input bind:encoding />
     {/key}
   </PayloadDecoder>
-  <span class="text-xs font-light italic" class:text-red-700={error}>
-    {translate('workflows.signal-payload-input-label-hint')}
-  </span>
 </div>

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

@@ -1,7 +1,9 @@
 <script lang="ts">
-  import type { Writable } from 'svelte/store';
+  import { writable, type Writable } from 'svelte/store';
 
-  import CodeBlock from '$lib/holocene/code-block.svelte';
+  import PayloadInput, {
+    type PayloadInputEncoding,
+  } from '$lib/components/payload-input.svelte';
   import Input from '$lib/holocene/input/input.svelte';
   import Modal from '$lib/holocene/modal.svelte';
   import { translate } from '$lib/i18n/translate';
@@ -18,14 +20,13 @@
   let error: string = '';
   let loading = false;
   let name = '';
+
+  let encoding: Writable<PayloadInputEncoding> = writable('json/plain');
   let input = '';
-  let codeBlock: CodeBlock;
 
   const hideSignalModal = () => {
     open = false;
-    input = '';
     name = '';
-    codeBlock?.resetView(input);
   };
 
   const signal = async () => {
@@ -36,6 +37,7 @@
         namespace,
         workflow,
         input,
+        encoding: $encoding,
         name,
       });
       $refresh = Date.now();
@@ -52,10 +54,6 @@
       loading = false;
     }
   };
-
-  const handleInputChange = (event: CustomEvent<string>): void => {
-    input = event.detail;
-  };
 </script>
 
 <Modal
@@ -66,7 +64,7 @@
   {loading}
   confirmText={translate('common.submit')}
   cancelText={translate('common.cancel')}
-  confirmDisabled={!name}
+  confirmDisabled={!name || !encoding}
   on:cancelModal={hideSignalModal}
   on:confirmModal={signal}
 >
@@ -78,21 +76,6 @@
       required
       bind:value={name}
     />
-    <div>
-      <span class="text-sm font-medium"
-        >{translate('workflows.signal-payload-input-label')}</span
-      >
-      <span class="text-xs font-light italic">
-        {translate('workflows.signal-payload-input-label-hint')}
-      </span>
-      <CodeBlock
-        maxHeight={320}
-        content={input}
-        on:change={handleInputChange}
-        editable
-        copyable={false}
-        bind:this={codeBlock}
-      />
-    </div>
+    <PayloadInput bind:input bind:encoding resetValues={!open} />
   </div>
 </Modal>

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();

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': 'Input',
+  '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':

src/lib/pages/schedule-edit.svelte

@@ -36,6 +36,7 @@
       workflowId,
       taskQueue,
       input,
+      encoding,
       hour,
       minute,
       second,
@@ -54,6 +55,7 @@
       workflowId,
       taskQueue,
       input,
+      encoding,
       searchAttributes,
     };
     const spec: Partial<ScheduleSpecParameters> = {

src/lib/pages/schedules-create.svelte

@@ -23,6 +23,7 @@
       workflowId,
       taskQueue,
       input,
+      encoding,
       hour,
       minute,
       second,
@@ -42,6 +43,7 @@
       workflowId,
       taskQueue,
       input,
+      encoding,
       searchAttributes,
     };
     const spec: Partial<ScheduleSpecParameters> = {