feat(DT-3565): Schedules Redesign

package.json

@@ -89,6 +89,7 @@
     "@lezer/highlight": "^1.1.3",
     "@sveltejs/package": "^2.3.10",
     "class-variance-authority": "^0.7.0",
+    "cronstrue": "^3.14.0",
     "danger": "^13.0.5",
     "date-fns": "2.29.x",
     "date-fns-tz": "1.3.x",

src/lib/components/panel.svelte

@@ -1,25 +1,29 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import { twMerge } from 'tailwind-merge';
 
   interface Props {
+    as?: string;
     error?: boolean;
     class?: string;
     children?: Snippet;
   }
 
-  let { error = false, class: className = '', children }: Props = $props();
+  let {
+    as = 'div',
+    error = false,
+    class: className = '',
+    children,
+  }: Props = $props();
 </script>
 
-<div class="panel surface-primary {className}" class:error>
+<svelte:element
+  this={as}
+  class={twMerge(
+    'surface-primary border p-8 dark:border-subtle',
+    className,
+    error && 'border-danger bg-danger',
+  )}
+>
   {@render children?.()}
-</div>
-
-<style lang="postcss">
-  .panel {
-    @apply border p-8 dark:border-subtle;
-
-    &.error {
-      @apply border-danger bg-danger;
-    }
-  }
-</style>
+</svelte:element>

src/lib/components/payload-input-with-encoding.svelte

@@ -18,6 +18,10 @@
   export let loading = false;
   export let label = translate('workflows.input');
   export let editing = true;
+  export let hintText: string | undefined = undefined;
+  export let placeholder: string | undefined = undefined;
+  export let payloadLabel: string | undefined = undefined;
+  export let copyable = false;
 
   $: {
     if ($encoding === 'json/plain' && messageType) {
@@ -28,8 +32,18 @@
 
 <div>
   <h5 class="pb-1 text-sm font-medium">{label}</h5>
-  <Card class="flex flex-col gap-2">
-    <PayloadInput bind:input bind:loading {error} {id} {editing} />
+  <Card class="flex flex-col gap-4">
+    <PayloadInput
+      bind:input
+      bind:loading
+      {error}
+      {id}
+      {editing}
+      {placeholder}
+      label={payloadLabel}
+      {hintText}
+      {copyable}
+    />
     <div
       class="flex items-end gap-2 {editing ? 'justify-between' : 'justify-end'}"
     >
@@ -39,6 +53,7 @@
             description={translate('workflows.encoding')}
             group={encoding}
             name="encoding"
+            class="p-0"
           >
             <RadioInput id="json/plain" value="json/plain" label="json/plain" />
             <RadioInput

src/lib/components/payload-input.svelte

@@ -15,6 +15,8 @@
     loading?: boolean;
     hintText?: string;
     editing?: boolean;
+    placeholder?: string;
+    copyable?: boolean;
   }
 
   let {
@@ -25,6 +27,8 @@
     loading = $bindable(false),
     hintText = translate('workflows.signal-payload-input-label-hint'),
     editing = true,
+    placeholder,
+    copyable = false,
   }: Props = $props();
 
   const isValidInput = (value: string) => {
@@ -71,12 +75,13 @@
         content={input}
         onchange={handleInputChange}
         editable={editing}
-        copyable={false}
+        {copyable}
+        {placeholder}
       />
     {/key}
     {#if editing}
       <Tooltip text={translate('common.upload-json')} topRight>
-        <FileInput id="{id}-input-file-upload" {onUpload} />
+        <FileInput class="h-full" id="{id}-input-file-upload" {onUpload} />
       </Tooltip>
     {/if}
   </div>

src/lib/components/schedule/constants.ts

@@ -0,0 +1,87 @@
+import {
+  HOURS as HOURS_UNIT,
+  MINUTES as MINUTES_UNIT,
+  SECONDS as SECONDS_UNIT,
+  type Unit,
+} from '$lib/holocene/duration-input/duration-input.svelte';
+import { translate } from '$lib/i18n/translate';
+import type { OverlapPolicy } from '$lib/types/schedule';
+
+import type { DurationString } from './types';
+
+export const getOverlapPolicyContent = (): Record<
+  Exclude<OverlapPolicy, 'Unspecified'>,
+  { isDefault?: boolean; label: string; description: string }
+> => ({
+  Skip: {
+    isDefault: true,
+    label: translate('schedules.overlap-skip-label'),
+    description: translate('schedules.overlap-skip-description'),
+  },
+  BufferOne: {
+    label: translate('schedules.overlap-buffer-one-label'),
+    description: translate('schedules.overlap-buffer-one-description'),
+  },
+  BufferAll: {
+    label: translate('schedules.overlap-buffer-all-label'),
+    description: translate('schedules.overlap-buffer-all-description'),
+  },
+  CancelOther: {
+    label: translate('schedules.overlap-cancel-other-label'),
+    description: translate('schedules.overlap-cancel-other-description'),
+  },
+  TerminateOther: {
+    label: translate('schedules.overlap-terminate-other-label'),
+    description: translate('schedules.overlap-terminate-other-description'),
+  },
+  AllowAll: {
+    label: translate('schedules.overlap-allow-all-label'),
+    description: translate('schedules.overlap-allow-all-description'),
+  },
+});
+
+const MONTHS_UNIT: Unit<'month(s)'> = {
+  label: 'month(s)',
+  convert: (n: number) => n * 31 * 24 * 60 * 60,
+};
+
+const DAYS_UNIT: Unit<'day(s)'> = {
+  label: 'day(s)',
+  convert: (n: number) => n * 24 * 60 * 60,
+};
+
+export const durationUnits = [
+  MONTHS_UNIT,
+  DAYS_UNIT,
+  HOURS_UNIT,
+  MINUTES_UNIT,
+  SECONDS_UNIT,
+];
+
+export const intervalUnits = [
+  DAYS_UNIT,
+  HOURS_UNIT,
+  MINUTES_UNIT,
+  SECONDS_UNIT,
+];
+
+export const DAYS_OF_WEEK = [0, 1, 2, 3, 4, 5, 6] as const;
+
+export const DAYS_OF_MONTH = [
+  1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22,
+  23, 24, 25, 26, 27, 28, 29, 30, 31,
+] as const;
+
+export const MONTHS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] as const;
+
+export const WEEKDAYS = [1, 2, 3, 4, 5] as const;
+export const WEEKEND = [0, 6] as const;
+
+const SECONDS_PER_DAY = 86400;
+const SECONDS_PER_YEAR = 365 * SECONDS_PER_DAY;
+
+export const MIN_CATCHUP_SECONDS = 10;
+export const DEFAULT_CATCHUP_WINDOW: DurationString = `${SECONDS_PER_YEAR}s`;
+export const DEFAULT_TASK_TIMEOUT: DurationString = '30s';
+export const DEFAULT_RUN_TIMEOUT: DurationString = '120s';
+export const DEFAULT_EXECUTION_TIMEOUT: DurationString = '14400s';