Allow selecting a timezone when creating and editing a Schedule

src/lib/components/schedule/schedule-day-of-month-view.svelte

@@ -9,6 +9,7 @@
   export let months: string[];
   export let hour: string;
   export let minute: string;
+  export let timezoneName: string;
 </script>
 
 <div class="flex flex-col gap-4">
@@ -23,5 +24,5 @@
     <DayOfMonthPicker bind:daysOfMonth />
   </div>
   <MonthPicker bind:months />
-  <SchedulesTimeView bind:hour bind:minute />
+  <SchedulesTimeView bind:hour bind:minute bind:timezoneName />
 </div>

src/lib/components/schedule/schedule-day-of-week-view.svelte

@@ -7,6 +7,7 @@
   export let daysOfWeek: string[];
   export let hour: string;
   export let minute: string;
+  export let timezoneName: string;
 </script>
 
 <div class="flex flex-col gap-4">
@@ -19,5 +20,5 @@
     </p>
     <DayOfWeekPicker bind:daysOfWeek />
   </div>
-  <SchedulesTimeView bind:hour bind:minute />
+  <SchedulesTimeView bind:hour bind:minute bind:timezoneName />
 </div>

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

@@ -83,6 +83,7 @@
   let second = '';
   let phase = '';
   let cronString = '';
+  let timezoneName = schedule?.spec?.timezoneName ?? '';
 
   const decodedSearchAttributes = decodePayloadAttributes({ searchAttributes });
   const decodedWorkflowSearchAttributes = decodePayloadAttributes({
@@ -132,6 +133,7 @@
       months,
       searchAttributes: searchAttributesInput,
       workflowSearchAttributes: workflowSearchAttributesInput,
+      timezoneName: timezoneName.trim(),
     };
 
     onConfirm(preset, args, schedule);
@@ -256,6 +258,7 @@
           bind:second
           bind:phase
           bind:cronString
+          bind:timezoneName
         >
           <SchedulesSearchAttributesInputs
             bind:searchAttributesInput

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

@@ -29,6 +29,7 @@
   export let second: string;
   export let phase: string;
   export let cronString: string;
+  export let timezoneName: string;
 
   const clearSchedule = () => {
     daysOfWeek = [];
@@ -106,14 +107,20 @@
       />
     </TabPanel>
     <TabPanel id="daily-panel" tabId="daily-tab">
-      <ScheduleDayOfWeekView bind:daysOfWeek bind:hour bind:minute />
+      <ScheduleDayOfWeekView
+        bind:daysOfWeek
+        bind:hour
+        bind:minute
+        bind:timezoneName
+      />
     </TabPanel>
     <TabPanel id="monthly-panel" tabId="monthly-tab">
       <ScheduleDayOfMonthView
         bind:daysOfMonth
         bind:months
         bind:hour
         bind:minute
+        bind:timezoneName
       />
     </TabPanel>
     <TabPanel

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

@@ -1,10 +1,13 @@
 <script lang="ts">
   import Icon from '$lib/holocene/icon/icon.svelte';
+  import Input from '$lib/holocene/input/input.svelte';
+  import Link from '$lib/holocene/link.svelte';
   import TimePicker from '$lib/holocene/time-picker.svelte';
   import { translate } from '$lib/i18n/translate';
 
   export let hour = '';
   export let minute = '';
+  export let timezoneName: string;
 </script>
 
 <div class="flex flex-col gap-4">
@@ -16,18 +19,31 @@
       {translate('schedules.time-view-description')}
     </p>
 
-    <TimePicker
-      bind:hour
-      bind:minute
-      twelveHourClock={false}
-      includeSeconds={false}
-    />
+    <div class="flex w-fit flex-col gap-2">
+      <TimePicker
+        bind:hour
+        bind:minute
+        twelveHourClock={false}
+        includeSeconds={false}
+      />
+      <Input
+        placeholder="UTC"
+        id="timezone-name"
+        bind:value={timezoneName}
+        label={translate('common.timezone', { timezone: '' })}
+        labelHidden
+        suffix={translate('common.timezone', { timezone: '' })}
+      />
+    </div>
   </div>
 
   <div class="flex w-full flex-row items-center gap-2">
     <Icon name="clock" aria-hidden="true" />
-    <span class="text-xs font-normal text-slate-500"
-      >{translate('common.based-on-time-preface')} Universal Standard Time (UTC)
+    <span class="text-xs text-secondary"
+      >{translate('schedules.iana-timezones-link-preface')}
+      <Link newTab href="https://www.iana.org/time-zones"
+        >{translate('schedules.iana-timezones-link')}</Link
+      >
     </span>
   </div>
 </div>

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

@@ -74,7 +74,7 @@ export const Strings = {
     'Select the day(s) of the week this schedule will always run on.',
   'time-view-heading': 'Time',
   'time-view-description':
-    'Specify the time (UTC) for this schedule to run. By default, the schedule will run at 00:00 UTC if left blank.',
+    'Specify the time for this schedule to run. By default, the schedule will run at 00:00 UTC if left blank.',
   'interval-view-heading': 'Recurring Time',
   'interval-view-description':
     'Specify the time interval for this schedule to run (for example every 5 minutes).',
@@ -97,4 +97,6 @@ export const Strings = {
   'getting-started-cli-link-preface': 'or get started with',
   'add-schedule-attr': 'Schedule Attributes',
   'add-workflow-attr': 'Workflow Attributes',
+  'iana-timezones-link-preface': 'Based on names in the',
+  'iana-timezones-link': 'IANA time zone database',
 } as const;

src/lib/pages/schedule-edit.svelte

@@ -51,6 +51,7 @@
       months,
       searchAttributes,
       workflowSearchAttributes,
+      timezoneName,
     } = args;
     const action: ScheduleActionParameters = {
       identity,
@@ -71,6 +72,7 @@
       second,
       phase,
       cronString,
+      timezoneName,
     };
     const presets: SchedulePresetsParameters = {
       preset,

src/lib/pages/schedules-create.svelte

@@ -39,6 +39,7 @@
       months,
       searchAttributes,
       workflowSearchAttributes,
+      timezoneName,
     } = args;
 
     const action: ScheduleActionParameters = {
@@ -60,6 +61,7 @@
       second,
       phase,
       cronString,
+      timezoneName,
     };
     const presets: SchedulePresetsParameters = {
       preset,

src/lib/stores/schedules.ts

@@ -47,7 +47,7 @@ const setBodySpec = (
   spec: Partial<ScheduleSpecParameters>,
   presets: SchedulePresetsParameters,
 ) => {
-  const { hour, minute, second, phase, cronString } = spec;
+  const { hour, minute, second, phase, cronString, timezoneName } = spec;
   const { preset, months, days, daysOfMonth, daysOfWeek } = presets;
   if (preset === 'string') {
     // Add the cronString as a comment to the cronString to view it for frequency
@@ -82,6 +82,7 @@ const setBodySpec = (
     ];
     body.schedule.spec.interval = [];
     body.schedule.spec.cronString = [];
+    body.schedule.spec.timezoneName = timezoneName || 'UTC';
   }
 };
 

src/lib/types/schedule.ts

@@ -57,6 +57,7 @@ export type ScheduleSpecParameters = {
   cronString: string;
   searchAttributes: SearchAttributeInput[];
   workflowSearchAttributes?: SearchAttributeInput[];
+  timezoneName: string;
 };
 
 // For UI Only