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

src/lib/components/payload-input.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+  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 Input from '$lib/holocene/input/input.svelte';
+  import Label from '$lib/holocene/label.svelte';
+  import { translate } from '$lib/i18n/translate';
+
+  export let input: string;
+  export let encoding: string;
+  export let error = false;
+  export let resetValues = false;
+
+  let codeBlock: CodeBlock;
+
+  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;
+    }
+  };
+
+  $: error = !isValidInput(input);
+
+  const clearValues = () => {
+    encoding = 'json/plain';
+    input = '';
+    codeBlock?.resetView(input);
+    input = '';
+  };
+
+  $: {
+    if (resetValues) {
+      clearValues();
+    }
+  }
+
+  onDestroy(() => {
+    clearValues();
+  });
+</script>
+
+<h5>Input</h5>
+<Card class="flex flex-col gap-2">
+  <div class="flex items-end gap-2">
+    <Input
+      id="payload-encoding"
+      label="Encoding"
+      class="w-full"
+      required
+      bind:value={encoding}
+    />
+    <slot />
+  </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}
+    />
+    {#if error}
+      <Alert intent="error" title={translate('common.input-valid-json')} />
+    {/if}
+  </div>
+</Card>

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

@@ -70,6 +70,7 @@
   let workflowId = decodedWorkflow?.workflowId ?? '';
   let taskQueue = decodedWorkflow?.taskQueue?.name ?? '';
   let input = '';
+  let encoding = '';
   let daysOfWeek: string[] = [];
   let daysOfMonth: number[] = [];
   let months: string[] = [];
@@ -90,6 +91,7 @@
       workflowId,
       taskQueue,
       input,
+      encoding,
       hour,
       minute,
       second,
@@ -163,7 +165,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 +213,8 @@
       </div>
       <ScheduleInputPayload
         bind:input
+        bind:encoding
         payloads={schedule?.action?.startWorkflow?.input}
-        error={errors['input']}
       />
       <AddSearchAttributes
         bind:attributesToAdd={searchAttributesInput}
@@ -243,6 +244,7 @@
           >
         </div>
       </SchedulesCalendarView>
+      <Alert intent="error" title={$error} hidden={!$error} />
     </form>
   {/if}
 </div>

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

@@ -1,45 +1,30 @@
 <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 { 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 from '../payload-input.svelte';
 
   export let input: string;
+  export let encoding: string;
   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'),
+    );
+    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,7 @@
 <script lang="ts">
   import type { Writable } from 'svelte/store';
 
-  import CodeBlock from '$lib/holocene/code-block.svelte';
+  import PayloadInput 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 +18,13 @@
   let error: string = '';
   let loading = false;
   let name = '';
+
+  let encoding = 'json/plain';
   let input = '';
-  let codeBlock: CodeBlock;
 
   const hideSignalModal = () => {
     open = false;
-    input = '';
     name = '';
-    codeBlock?.resetView(input);
   };
 
   const signal = async () => {
@@ -36,6 +35,7 @@
         namespace,
         workflow,
         input,
+        encoding,
         name,
       });
       $refresh = Date.now();
@@ -52,10 +52,6 @@
       loading = false;
     }
   };
-
-  const handleInputChange = (event: CustomEvent<string>): void => {
-    input = event.detail;
-  };
 </script>
 
 <Modal
@@ -66,7 +62,7 @@
   {loading}
   confirmText={translate('common.submit')}
   cancelText={translate('common.cancel')}
-  confirmDisabled={!name}
+  confirmDisabled={!name || !encoding}
   on:cancelModal={hideSignalModal}
   on:confirmModal={signal}
 >
@@ -78,21 +74,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/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': 'Payload',
   '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> = {