Only encode Schedule Input when added or edited (#2384)

* Only encode schedule input when it is added or edited * Add edit button for input value and encoding * Move file input to same line as data * Add FileInput story
temporalio · Nov 4, 2024 · d540904 · d540904
1 parent 197e238
commit d540904
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 23 deletions.
diff --git a/src/lib/components/payload-input-with-encoding.svelte b/src/lib/components/payload-input-with-encoding.svelte
@@ -24,6 +24,7 @@
   export let encoding: Writable<PayloadInputEncoding>;
   export let error = false;
   export let loading = false;
+  export let editing = true;
 
   const clearValues = () => {
     $encoding = 'json/plain';
@@ -35,20 +36,23 @@
 <div>
   <h5 class="pb-1 text-sm font-medium">{translate('workflows.input')}</h5>
   <Card class="flex flex-col gap-2">
-    <PayloadInput bind:input bind:loading {error} {id} />
-    <div class="flex items-end justify-between">
-      <RadioGroup
-        description={translate('workflows.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>
+    <PayloadInput bind:input bind:loading {error} {id} {editing} />
+    <div class="flex items-end {editing ? 'justify-between' : 'justify-end'}">
+      {#if editing}
+        <RadioGroup
+          description={translate('workflows.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>
+      {/if}
+      <slot name="action" />
     </div>
   </Card>
 </div>
diff --git a/src/lib/components/payload-input.svelte b/src/lib/components/payload-input.svelte
@@ -14,6 +14,7 @@
   export let label = translate('workflows.signal-payload-input-label');
   export let loading = false;
   export let hintText = translate('workflows.signal-payload-input-label-hint');
+  export let editing = true;
 
   $: error = !isValidInput(input);
 
@@ -46,19 +47,21 @@
 <div class="flex flex-col gap-2">
   <Label for={id} {label} />
   <div class="flex gap-2">
-    {#key loading}
+    {#key [loading, editing]}
       <CodeBlock
         {id}
         maxHeight={320}
         content={input}
         on:change={handleInputChange}
-        editable
+        editable={editing}
         copyable={false}
       />
     {/key}
-    <Tooltip text={translate('common.upload-json')} topRight>
-      <FileInput id="{id}-input-file-upload" {onUpload} />
-    </Tooltip>
+    {#if editing}
+      <Tooltip text={translate('common.upload-json')} topRight>
+        <FileInput id="{id}-input-file-upload" {onUpload} />
+      </Tooltip>
+    {/if}
   </div>
   <span
     class="text-xs {error ? 'text-danger' : 'text-primary'} inline-block"

diff --git a/src/lib/components/schedule/schedule-form-view.svelte b/src/lib/components/schedule/schedule-form-view.svelte
@@ -73,6 +73,7 @@
   let workflowId = decodedWorkflow?.workflowId ?? '';
   let taskQueue = decodedWorkflow?.taskQueue?.name ?? '';
   let input = '';
+  let editInput = !schedule;
   let encoding: Writable<PayloadInputEncoding> = writable('json/plain');
   let daysOfWeek: string[] = [];
   let daysOfMonth: number[] = [];
@@ -93,7 +94,7 @@
       workflowType,
       workflowId,
       taskQueue,
-      input,
+      ...(editInput && { input }),
       encoding: $encoding,
       hour,
       minute,
@@ -216,8 +217,10 @@
       </div>
       <ScheduleInputPayload
         bind:input
+        bind:editInput
         bind:encoding
         payloads={schedule?.action?.startWorkflow?.input}
+        showEditActions={Boolean(schedule)}
       />
       <AddSearchAttributes
         bind:attributesToAdd={searchAttributesInput}

diff --git a/src/lib/components/schedule/schedule-input-payload.svelte b/src/lib/components/schedule/schedule-input-payload.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
   import type { Writable } from 'svelte/store';
 
+  import Button from '$lib/holocene/button.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';
@@ -12,21 +14,38 @@
   } from '../payload-input-with-encoding.svelte';
 
   export let input: string;
+  export let editInput: boolean;
   export let encoding: Writable<PayloadInputEncoding>;
   export let payloads: Payloads;
+  export let showEditActions: boolean = false;
 
+  let initialInput = '';
+  let initialEncoding: PayloadInputEncoding = 'json/plain';
   let loading = true;
 
   const setInitialInput = (decodedValue: string): void => {
-    input = getSinglePayload(decodedValue);
+    initialInput = getSinglePayload(decodedValue);
+    input = initialInput;
     const currentEncoding = atob(
       String(payloads?.payloads[0]?.metadata?.encoding ?? 'json/plain'),
     );
     if (isPayloadInputEncodingType(currentEncoding)) {
       $encoding = currentEncoding;
+      initialEncoding = $encoding;
     }
     loading = false;
   };
+
+  const handleEdit = () => {
+    if (editInput) {
+      editInput = false;
+      input = initialInput;
+      $encoding = initialEncoding;
+    } else {
+      editInput = true;
+      input;
+    }
+  };
 </script>
 
 <div class="flex flex-col gap-1">
@@ -35,7 +54,14 @@
       bind:input
       bind:encoding
       bind:loading
+      editing={editInput}
       id="schedule-payload-input"
-    />
+    >
+      <div slot="action" class:hidden={!showEditActions}>
+        <Button variant="secondary" on:click={handleEdit}>
+          {editInput ? translate('common.cancel') : translate('common.edit')}
+        </Button>
+      </div>
+    </PayloadInputWithEncoding>
   </PayloadDecoder>
 </div>
diff --git a/src/lib/holocene/file-input.stories.svelte b/src/lib/holocene/file-input.stories.svelte
@@ -0,0 +1,28 @@
+<script lang="ts" context="module">
+  import type { Meta } from '@storybook/svelte';
+
+  export const meta = {
+    title: 'File Input',
+    component: FileInput,
+    args: {
+      id: 'file-input',
+      accept: '.json',
+    },
+    argTypes: {
+      id: { control: 'text' },
+      accept: { control: 'text' },
+    },
+  } satisfies Meta<FileInput>;
+</script>
+
+<script lang="ts">
+  import { Story, Template } from '@storybook/addon-svelte-csf';
+
+  import FileInput from './file-input.svelte';
+</script>
+
+<Template let:args>
+  <FileInput {...args} />
+</Template>
+
+<Story name="Default" />
diff --git a/src/lib/stores/schedules.ts b/src/lib/stores/schedules.ts
@@ -199,7 +199,7 @@ export const submitEditSchedule = async (
           workflowId,
           workflowType: { name: workflowType },
           taskQueue: { name: taskQueue },
-          input: payloads ? { payloads } : null,
+          ...(input !== undefined && { input: payloads ? { payloads } : null }),
         },
       },
     },