Include Input for Schedules on Create/Edit and show Input on View

src/lib/components/schedule/schedule-basic-frequency.svelte

@@ -10,12 +10,18 @@
 
 {#key [calendar, interval]}
   <div class="frequency {$$props.class}">
-    <code><pre>{stringifyWithBigInt(calendar || interval)}</pre></code>
+    <code
+      ><pre>{stringifyWithBigInt(
+          calendar || interval,
+          undefined,
+          2,
+        )}</pre></code
+    >
   </div>
 {/key}
 
 <style lang="postcss">
   .frequency {
-    @apply flex flex-col overflow-auto rounded-lg bg-inverse px-2 py-2 font-mono text-sm text-[#e9d5ff];
+    @apply flex h-auto max-h-32 flex-col overflow-auto rounded-lg bg-inverse px-2 py-2 font-mono text-sm text-[#e9d5ff];
   }
 </style>

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

@@ -22,6 +22,8 @@
   } from '$lib/utilities/route-for';
   import { writeActionsAreAllowed } from '$lib/utilities/write-actions-are-allowed';
 
+  import ScheduleInputPayload from './schedule-input-payload.svelte';
+
   import type { Schedule } from '$types';
 
   export let schedule: FullSchedule | null = null;
@@ -53,6 +55,7 @@
   let workflowType = schedule?.action?.startWorkflow?.workflowType?.name ?? '';
   let workflowId = schedule?.action?.startWorkflow?.workflowId ?? '';
   let taskQueue = schedule?.action?.startWorkflow?.taskQueue?.name ?? '';
+  let input = '';
   let daysOfWeek: string[] = [];
   let daysOfMonth: number[] = [];
   let months: string[] = [];
@@ -69,6 +72,7 @@
       workflowType,
       workflowId,
       taskQueue,
+      input,
       hour,
       minute,
       second,
@@ -101,8 +105,18 @@
     }
   };
 
+  const isValidInput = (value: string) => {
+    try {
+      JSON.parse(value);
+      return true;
+    } catch (e) {
+      return false;
+    }
+  };
+
   $: isDisabled = (preset: SchedulePreset) => {
     if (!name || !workflowType || !workflowId || !taskQueue) return true;
+    if (input && !isValidInput(input)) return true;
     if (preset === 'interval') return !days && !hour && !minute && !second;
     if (preset === 'week') return !daysOfWeek.length;
     if (preset === 'month') return !daysOfMonth.length || !months.length;
@@ -169,6 +183,10 @@
           on:blur={onBlur}
         />
       </div>
+      <ScheduleInputPayload
+        bind:input
+        payloads={schedule?.action?.startWorkflow?.input}
+      />
       <SchedulesCalendarView
         let:preset
         {schedule}

src/lib/components/schedule/schedule-frequency-panel.svelte

@@ -12,7 +12,7 @@
 </script>
 
 <Panel>
-  <h2 class="mb-4 text-2xl">{translate('schedules.schedule-spec')}</h2>
+  <h2 class="mb-4 text-lg">{translate('schedules.schedule-spec')}</h2>
   <div class="pr-2">
     <ScheduleFrequency {calendar} {interval} class="text-base" />
   </div>

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

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import CodeBlock from '$lib/holocene/code-block.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import type { Payloads } from '$lib/types';
+  import {
+    parseWithBigInt,
+    stringifyWithBigInt,
+  } from '$lib/utilities/parse-with-big-int';
+
+  import PayloadDecoder from '../event/payload-decoder.svelte';
+
+  export let input: string;
+  export let payloads: Payloads;
+
+  const handleInputChange = (event: CustomEvent<string>) => {
+    input = event.detail;
+  };
+</script>
+
+<div class="flex flex-col gap-4">
+  <label for="schedule-input">{translate('workflows.input')}</label>
+  <PayloadDecoder value={payloads} let:decodedValue key="payloads">
+    {@const singlePayload =
+      decodedValue && parseWithBigInt(decodedValue)?.[0]
+        ? stringifyWithBigInt(parseWithBigInt(decodedValue)[0])
+        : ''}
+    {#key decodedValue}
+      <CodeBlock
+        id="schedule-input"
+        class="max-h-80 overflow-y-scroll overscroll-contain"
+        content={singlePayload}
+        on:change={handleInputChange}
+        editable
+        copyable={false}
+      />
+    {/key}
+  </PayloadDecoder>
+  <span class="font-secondary text-xs font-light italic">
+    {translate('workflows.signal-payload-input-label-hint')}
+  </span>
+</div>
+
+<style lang="postcss">
+  .error {
+    @apply border-2 border-red-500;
+  }
+</style>

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

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import Panel from '$lib/components/panel.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import type { Payloads } from '$lib/types';
+  import { stringifyWithBigInt } from '$lib/utilities/parse-with-big-int';
+
+  import InputAndResults from '../workflow/input-and-results.svelte';
+
+  export let input: Payloads;
+</script>
+
+<Panel>
+  <InputAndResults
+    title={translate('schedules.schedule-input')}
+    content={stringifyWithBigInt(input)}
+  />
+</Panel>

src/lib/components/schedule/schedule-notes.svelte

@@ -5,6 +5,6 @@
 </script>
 
 <div>
-  <h2 class="mb-4 text-2xl">{translate('common.notes')}</h2>
+  <h2 class="mb-4 text-lg">{translate('common.notes')}</h2>
   <p>{notes}</p>
 </div>

src/lib/components/schedule/schedule-recent-runs.svelte

@@ -35,7 +35,7 @@
 
 <Panel class="w-full">
   <div class="flex justify-between">
-    <h2 class="mb-4 text-2xl">{translate('schedules.recent-runs')}</h2>
+    <h2 class="mb-4 text-lg">{translate('schedules.recent-runs')}</h2>
     <Link
       href={routeForWorkflowsWithQuery({
         namespace,

src/lib/components/schedule/schedule-upcoming-runs.svelte

@@ -10,7 +10,7 @@
 </script>
 
 <Panel>
-  <h2 class="mb-4 text-2xl">{translate('schedules.upcoming-runs')}</h2>
+  <h2 class="mb-4 text-lg">{translate('schedules.upcoming-runs')}</h2>
   {#each futureRuns.slice(0, 5) as run}
     <div class="row">
       <p>

src/lib/components/schedule/schedules-calendar-view.svelte

@@ -45,7 +45,7 @@
 </script>
 
 <Tabs class="mt-8 w-full">
-  <h2 class="mb-4 text-2xl">{translate('schedules.schedule-spec')}</h2>
+  <h2 class="mb-4 text-lg">{translate('schedules.schedule-spec')}</h2>
   <TabList label="Schedule Tabs" class="flex flex-wrap gap-6">
     {#if schedule}
       <Tab

src/lib/components/schedule/schedules-interval-view.svelte

@@ -44,44 +44,52 @@
   <div class="flex flex-col items-center gap-2 lg:flex-row">
     <Input
       id="days"
+      class="w-28"
       label={translate('common.days')}
       labelHidden
       bind:value={days}
-      placeholder="00"
+      placeholder="000"
       suffix={translate('common.days')}
+      hideCount
       maxLength={3}
       error={error(days)}
     />
     <div class="hidden lg:block">:</div>
     <Input
       id="hour-interval"
+      class="w-24"
       label={translate('common.hours-abbreviated')}
       labelHidden
       bind:value={hour}
       placeholder="00"
       suffix={translate('common.hours-abbreviated')}
+      hideCount
       maxLength={2}
       error={error(hour)}
     />
     <div class="hidden lg:block">:</div>
     <Input
       id="minute-interval"
+      class="w-24"
       label={translate('common.minutes-abbreviated')}
       labelHidden
       bind:value={minute}
       placeholder="00"
       suffix={translate('common.minutes-abbreviated')}
+      hideCount
       maxLength={2}
       error={error(minute)}
     />
     <div class="hidden lg:block">:</div>
     <Input
       id="second"
+      class="w-24"
       label={translate('common.seconds-abbreviated')}
       labelHidden
       bind:value={second}
       placeholder="00"
       suffix={translate('common.seconds-abbreviated')}
+      hideCount
       maxLength={2}
       error={error(second)}
     />
@@ -95,10 +103,13 @@
   <div class="flex w-48 gap-0">
     <Input
       id="phase"
+      class="w-28"
       label={translate('schedules.offset-heading')}
       labelHidden
       bind:value={offset}
       placeholder="00"
+      maxLength={3}
+      hideCount
       error={error(phase)}
       unroundRight
     />

src/lib/components/schedule/schedules-table-row.svelte

@@ -82,15 +82,7 @@
       </div>
     {/each}
   </td>
-</TableRow>
-<TableRow class="schedule-spec-row">
-  <td colspan="5" class="hidden xl:table-cell">
-    <ScheduleBasicFrequency {calendar} {interval} />
-  </td>
-  <td colspan="3" class="hidden md:table-cell xl:hidden">
-    <ScheduleBasicFrequency {calendar} {interval} />
-  </td>
-  <td colspan="2" class="md:hidden">
+  <td class="cell hidden xl:table-cell">
     <ScheduleBasicFrequency {calendar} {interval} />
   </td>
 </TableRow>

src/lib/components/schedule/schedules-table.svelte

@@ -11,11 +11,10 @@
   <TableHeaderRow slot="headers">
     <th class="w-28">{translate('common.status')}</th>
     <th class="md:w-80 xl:w-auto">{translate('schedules.name')}</th>
-    <th class="w-60 max-md:hidden xl:w-80"
-      >{translate('common.workflow-type')}</th
-    >
+    <th class="w-60 max-md:hidden">{translate('common.workflow-type')}</th>
     <th class="w-56 max-xl:hidden">{translate('schedules.recent-runs')}</th>
     <th class="w-56 max-xl:hidden">{translate('schedules.upcoming-runs')}</th>
+    <th class="max-xl:hidden">{translate('schedules.schedule-spec')}</th>
   </TableHeaderRow>
   <slot />
 </Table>

src/lib/components/schedule/schedules-time-view.svelte

@@ -41,23 +41,27 @@
   <div class="flex flex-col items-center gap-2 lg:flex-row">
     <Input
       id="hour-time"
+      class="w-24"
       label={translate('common.hour-abbreviated')}
       labelHidden
       bind:value={_hour}
       placeholder="00"
       suffix={translate('common.hour-abbreviated')}
       maxLength={2}
+      hideCount
       error={error(_hour, 12)}
     />
     <div class="hidden lg:block">:</div>
     <Input
       id="minute-time"
+      class="w-24"
       label={translate('common.minutes-abbreviated')}
       labelHidden
       bind:value={minute}
       placeholder="00"
       suffix={translate('common.minutes-abbreviated')}
       maxLength={2}
+      hideCount
       error={error(minute, 59)}
     />
     <div class="ml-2">

src/lib/components/workflow-actions.svelte

@@ -157,7 +157,6 @@
             passAccessToken: $passAccessToken,
           },
         },
-        accessToken: $authUser.accessToken,
       });
       signalConfirmationModalOpen = false;
       $refresh = Date.now();

src/lib/components/workflow/input-and-results.svelte

@@ -46,7 +46,7 @@
   };
 </script>
 
-<article class="flex w-full flex-col lg:w-1/2" {...$$restProps}>
+<article class="flex w-full flex-col" {...$$restProps}>
   <h3 class="mb-2 flex items-center gap-2 text-lg">
     {title}
     {#if showParsedContentCount}

src/lib/holocene/input/input.svelte

@@ -195,7 +195,7 @@
   }
 
   .input {
-    @apply m-2 w-full bg-transparent focus:outline-none enabled:placeholder:text-primary disabled:text-disabled disabled:placeholder:text-disabled;
+    @apply m-2 w-full bg-transparent focus:outline-none enabled:placeholder:text-subtle disabled:text-disabled disabled:placeholder:text-disabled;
   }
 
   .suffix {

src/lib/i18n/locales/en/schedules.ts

@@ -11,6 +11,7 @@ export const Strings = {
   schedule: 'Schedule',
   frequency: 'Frequency',
   'schedule-spec': 'Schedule Spec',
+  'schedule-input': 'Schedule Input',
   'empty-state-title': 'No Schedules Found',
   'empty-state-description': 'Try a different search',
   'error-message-fetching': 'Error fetching schedules',

src/lib/pages/schedule-edit.svelte

@@ -35,6 +35,7 @@
       workflowType,
       workflowId,
       taskQueue,
+      input,
       hour,
       minute,
       second,
@@ -51,6 +52,7 @@
       workflowType,
       workflowId,
       taskQueue,
+      input,
     };
     const spec: Partial<ScheduleSpecParameters> = {
       hour,

src/lib/pages/schedule-view.svelte

@@ -7,6 +7,7 @@
   import ScheduleAdvancedSettings from '$lib/components/schedule/schedule-advanced-settings.svelte';
   import ScheduleError from '$lib/components/schedule/schedule-error.svelte';
   import ScheduleFrequencyPanel from '$lib/components/schedule/schedule-frequency-panel.svelte';
+  import ScheduleInput from '$lib/components/schedule/schedule-input.svelte';
   import ScheduleRecentRuns from '$lib/components/schedule/schedule-recent-runs.svelte';
   import ScheduleUpcomingRuns from '$lib/components/schedule/schedule-upcoming-runs.svelte';
   import WorkflowCounts from '$lib/components/workflow/workflow-counts.svelte';
@@ -299,7 +300,10 @@
             notes={schedule?.schedule?.state?.notes}
           />
         </div>
-        <div class="w-full xl:w-1/3">
+        <div class="flex w-full flex-col gap-4 xl:w-1/3">
+          <ScheduleInput
+            input={schedule?.schedule?.action?.startWorkflow?.input}
+          />
           <ScheduleFrequencyPanel
             calendar={schedule?.schedule?.spec?.structuredCalendar?.[0]}
             interval={schedule?.schedule?.spec?.interval?.[0]}